@sunbird-cb/toc 0.0.1 → 0.0.2

package/fesm2022/sunbird-cb-toc.mjs

@@ -275,6 +275,7 @@ var NsContent;
         ECourseCategory["MODERATED_COURSE"] = "Moderated Course";
         ECourseCategory["STANDALONE_ASSESSMENT"] = "Standalone Assessment";
         ECourseCategory["MODERATED_ASSESSEMENT"] = "Moderated Assessment";
+        ECourseCategory["LEARNING_PATHWAY"] = "Learning Pathway";
         ECourseCategory["CASE_STUDY"] = "Case Study";
     })(ECourseCategory = NsContent.ECourseCategory || (NsContent.ECourseCategory = {}));
     let WFBlendedProgramStatus;
@@ -661,6 +662,7 @@ const API_END_POINTS$4 = {
     EXT_CONTENT_EROLL: `/apis/proxies/v8/cios-enroll/v1/create`,
     EXT_PUBLIC_CONTENT: (partent, contentId) => `/apis/proxies/v8/ciosIntegration/v1/read/content/${partent}/${contentId}`,
     ENROLL_CONTENT_DATA: (userId) => `/apis/proxies/v8/learner/course/v4/user/enrollment/details/${userId}`,
+    LEARNER_PATHWAY_ENROLL: (contentId) => `/apis/proxies/v8/learningpathway/v1/enrol/${contentId}`,
 };
 class WidgetContentService {
     constructor(http, configSvc, activatedRoute) {
@@ -770,6 +772,10 @@ class WidgetContentService {
         return this.http.get(`${API_END_POINTS$4.AUTO_ASSIGN_BATCH}${identifier}?language=${enrollLang}`)
             .pipe(retry(1), map((data) => data.result.response));
     }
+    autoEnrollLP(identifier) {
+        return this.http.get(`${API_END_POINTS$4.LEARNER_PATHWAY_ENROLL(identifier)}`)
+            .pipe(retry(1), map((data) => data.result.response));
+    }
     autoAssignCuratedBatchApi(request, programType) {
         const url = programType === NsContent.ECourseCategory.MODERATED_PROGRAM ?
             API_END_POINTS$4.AUTO_ASSIGN_OPEN_PROGRAM : API_END_POINTS$4.AUTO_ASSIGN_CURATED_BATCH;
@@ -1870,6 +1876,13 @@ class AppTocService {
             // this.mapModuleDurationAndProgress(content, content)
             this.callHirarchyProgressHashmap(content);
             this.checkModuleWiseData(content);
+            // Compute milestone locking AFTER progress data is populated
+            if (content.courseCategory === 'Learning Pathway') {
+                this.computeMilestoneLockingStatus();
+                // Ensure hashmap updates are published for change detection
+                this.hashmap = { ...this.hashmap };
+                console.log('Milestone locking computed, hashmap updated:', this.hashmap);
+            }
             this.contentLoader.next(false);
         }
     }
@@ -1925,25 +1938,60 @@ class AppTocService {
             });
         }
     }
-    createHirarchyProgressHashmap(hierarchyData) {
+    createHirarchyProgressHashmap(hierarchyData, rootCourseCategory) {
         if (hierarchyData && hierarchyData.children) {
             hierarchyData.children.forEach((child) => {
                 if (child && child.children) {
-                    this.createHirarchyProgressHashmap(child);
-                }
-                let localMap = {};
-                localMap = {
-                    parent: child.parent,
+                    this.createHirarchyProgressHashmap(child, rootCourseCategory);
+                }
+                const primaryCat = child.primaryCategory;
+                const courseCat = (child.courseCategory || child.primaryCategory || '');
+                const isMilestone = primaryCat === 'Milestone' || courseCat === 'Milestone';
+                const isCollection = child.mimeType === NsContent.EMimeTypes.COLLECTION;
+                const isModule = child.primaryCategory === NsContent.EPrimaryCategory.MODULE;
+                const isResource = child.primaryCategory === NsContent.EPrimaryCategory.RESOURCE ||
+                    child.primaryCategory === NsContent.EPrimaryCategory.PRACTICE_RESOURCE ||
+                    child.primaryCategory === NsContent.EPrimaryCategory.FINAL_ASSESSMENT ||
+                    child.primaryCategory === NsContent.EPrimaryCategory.COMP_ASSESSMENT;
+                const isLearningPathway = rootCourseCategory === 'Learning Pathway';
+                // Check if content is mandatory (isMandatory flag or mandatory property)
+                const isMandatory = child.isMandatory === true || child.mandatory === true;
+                let localMap = {
+                    parent: child?.parent,
                     identifier: child.identifier,
                     leafNodesCount: child.leafNodesCount || null,
                     leafNodes: child.leafNodes || [],
-                    completionPercentage: child.completionPercentage || child.progress,
-                    completionStatus: child.completionStatus,
+                    completionPercentage: child.completionPercentage || child.progress || 0,
+                    completionStatus: child.completionStatus || child.status || 0,
+                    status: child.status || child.completionStatus || 0,
                     progress: child.progress,
                     primaryCategory: child.primaryCategory,
+                    courseCategory: courseCat,
                     duration: child.duration || 0,
                     expectedDuration: child.expectedDuration || 0,
+                    // Additional metadata for performance optimization
+                    mimeType: child.mimeType,
+                    isLocked: child.isLocked || false,
+                    artifactUrl: child.artifactUrl || null,
+                    name: child.name || '',
+                    contentType: child.contentType || '',
+                    // Pre-computed flags for Learning Pathway
+                    isMilestone: isMilestone,
+                    isCollection: isCollection,
+                    isModule: isModule,
+                    isResource: isResource,
+                    isLearningPathway: isLearningPathway,
+                    isMandatory: isMandatory,
+                    // Milestone specific data
+                    milestoneIndex: child.milestoneIndex,
+                    completedLeafNodesCount: child.completedLeafNodesCount || 0,
+                    // Pre-assessment flag (for milestone gating)
+                    isPreAssessment: child.isPreAssessment || false,
                 };
+                // Debug logging for milestones
+                if (isMilestone) {
+                    console.log(`[Hashmap Build] Milestone ${child.identifier} (${child.name}): completionPercentage=${child.completionPercentage}, completionStatus=${child.completionStatus}, status=${child.status}, leafNodesCount=${child.leafNodesCount}, completedLeafNodesCount=${child.completedLeafNodesCount}`);
+                }
                 this.hashmap[child.identifier] = localMap;
             });
         }
@@ -1957,7 +2005,7 @@ class AppTocService {
                 }
                 let localMap = {};
                 localMap = {
-                    parent: child.parent,
+                    parent: child?.parent,
                     identifier: child.identifier,
                     leafNodesCount: child.leafNodesCount || null,
                     leafNodes: child.leafNodes || [],
@@ -1965,6 +2013,7 @@ class AppTocService {
                     completionStatus: child.completionStatus,
                     progress: child.progress,
                     primaryCategory: child.primaryCategory,
+                    courseCategory: child.courseCategory || child.primaryCategory || '',
                     duration: child.duration || 0,
                     expectedDuration: child.expectedDuration || 0,
                 };
@@ -1974,17 +2023,30 @@ class AppTocService {
     }
     callHirarchyProgressHashmap(hierarchyData) {
         if (hierarchyData) {
+            const rootCourseCategory = hierarchyData.courseCategory || hierarchyData.primaryCategory || '';
+            const isLearningPathway = rootCourseCategory === 'Learning Pathway';
             this.hashmap[hierarchyData.identifier] = {
                 parent: hierarchyData.parent,
                 identifier: hierarchyData.identifier,
                 leafNodesCount: hierarchyData.leafNodesCount || null,
                 leafNodes: hierarchyData.leafNodes || [],
-                completionPercentage: hierarchyData.completionPercentage || hierarchyData.progress,
-                completionStatus: hierarchyData.completionStatus,
+                completionPercentage: hierarchyData.completionPercentage || hierarchyData.progress || 0,
+                completionStatus: hierarchyData.completionStatus || 0,
                 progress: hierarchyData.progress,
                 primaryCategory: hierarchyData.primaryCategory,
-                courseCategory: hierarchyData.courseCategory || hierarchyData.primaryCategory || '',
+                courseCategory: rootCourseCategory,
                 expectedDuration: hierarchyData.expectedDuration || 0,
+                // Additional metadata
+                mimeType: hierarchyData.mimeType,
+                isLocked: hierarchyData.isLocked || false,
+                artifactUrl: hierarchyData.artifactUrl || null,
+                name: hierarchyData.name || '',
+                contentType: hierarchyData.contentType || '',
+                isMilestone: false,
+                isCollection: hierarchyData.mimeType === NsContent.EMimeTypes.COLLECTION,
+                isModule: hierarchyData.primaryCategory === NsContent.EPrimaryCategory.MODULE,
+                isResource: false,
+                isLearningPathway: isLearningPathway,
             };
             if (hierarchyData.primaryCategory === NsContent.EPrimaryCategory.CURATED_PROGRAM &&
                 hierarchyData.compatibilityLevel >= 5 && hierarchyData.contextLockingType &&
@@ -1995,11 +2057,254 @@ class AppTocService {
                     compatibilityLevel: hierarchyData.compatibilityLevel,
                 };
             }
-            this.createHirarchyProgressHashmap(hierarchyData);
+            this.createHirarchyProgressHashmap(hierarchyData, rootCourseCategory);
+            // NOTE: computeMilestoneLockingStatus is called AFTER progress data is populated
+            // in mapCompletionPercentageProgram, not here where completion data is still 0
             this.hashmap = { ...this.hashmap };
             console.log('this.hashmap--', this.hashmap);
         }
     }
+    /**
+     * Pre-compute milestone locking status for all milestones in Learning Pathway
+     * This avoids expensive calculations in component getters
+     *
+     * Locking Rules:
+     * 1. All milestones are locked by default
+     * 2. Milestone 1 (M1) unlocks when pre-assessment is completed
+     * 3. Milestone N (N > 1) unlocks when:
+     *    - All mandatory learning items in Milestone N-1 are completed
+     *    - The assessment of Milestone N-1 is completed
+     */
+    computeMilestoneLockingStatus() {
+        console.log('=== COMPUTING MILESTONE LOCKING STATUS ===');
+        console.log('Full hashmap:', this.hashmap);
+        // Get all milestone entries from hashmap sorted by their index or number
+        const milestoneEntries = Object.keys(this.hashmap)
+            .filter(key => {
+            const item = this.hashmap[key];
+            return item.isMilestone || item.primaryCategory === 'Milestone' || item.courseCategory === 'Milestone';
+        })
+            .sort((a, b) => {
+            // Sort by milestoneIndex if available, otherwise by number in ID
+            const itemA = this.hashmap[a];
+            const itemB = this.hashmap[b];
+            if (itemA.milestoneIndex !== undefined && itemB.milestoneIndex !== undefined) {
+                return itemA.milestoneIndex - itemB.milestoneIndex;
+            }
+            const numA = parseInt(a.replace(/\D/g, '')) || 0;
+            const numB = parseInt(b.replace(/\D/g, '')) || 0;
+            return numA - numB;
+        });
+        console.log('Milestone entries found:', milestoneEntries);
+        // Check if pre-assessment is completed (required to unlock M1)
+        const isPreAssessmentCompleted = this.checkPreAssessmentCompletion();
+        milestoneEntries.forEach((milestoneId, index) => {
+            const milestone = this.hashmap[milestoneId];
+            if (!milestone)
+                return;
+            // First milestone (M1) - unlocks when pre-assessment is completed
+            if (index === 0) {
+                this.hashmap[milestoneId].computedIsLocked = !isPreAssessmentCompleted;
+                console.log(`Milestone ${milestoneId} (M1): Pre-assessment completed: ${isPreAssessmentCompleted}, Locked: ${!isPreAssessmentCompleted}`);
+                return;
+            }
+            // For subsequent milestones (M2, M3, etc.), check if previous milestone is fully completed
+            const previousMilestoneId = milestoneEntries[index - 1];
+            const previousMilestone = this.hashmap[previousMilestoneId];
+            if (previousMilestone) {
+                // SIMPLIFIED APPROACH: Check if previous milestone is 100% complete
+                // This uses the aggregated completion percentage which is already calculated
+                // Use Number() to ensure proper numeric comparison
+                const prevCompletionPct = Number(previousMilestone.completionPercentage) || 0;
+                const prevCompletionStatus = Number(previousMilestone.completionStatus) || 0;
+                const prevStatus = Number(previousMilestone.status) || 0;
+                const prevCompletedLeafNodes = Number(previousMilestone.completedLeafNodesCount) || 0;
+                const prevLeafNodesCount = Number(previousMilestone.leafNodesCount) || 0;
+                const previousMilestoneComplete = prevCompletionPct >= 100 ||
+                    prevCompletionStatus === 2 ||
+                    prevStatus === 2 ||
+                    (prevLeafNodesCount > 0 && prevCompletedLeafNodes >= prevLeafNodesCount);
+                console.log(`Milestone ${milestoneId} (M${index + 1}): Previous milestone (${previousMilestoneId}) - completionPercentage: ${prevCompletionPct}, completionStatus: ${prevCompletionStatus}, status: ${prevStatus}, completedLeafNodes: ${prevCompletedLeafNodes}/${prevLeafNodesCount}, isComplete: ${previousMilestoneComplete}`);
+                // If simple check doesn't show complete, fall back to detailed check
+                let canUnlock = previousMilestoneComplete;
+                if (!canUnlock) {
+                    // Fallback: Check individual items
+                    const isPreviousMilestoneAssessmentComplete = this.checkMilestoneAssessmentComplete(previousMilestoneId);
+                    const isPreviousMilestoneMandatoryComplete = this.checkMilestoneMandatoryContentComplete(previousMilestoneId);
+                    canUnlock = isPreviousMilestoneAssessmentComplete && isPreviousMilestoneMandatoryComplete;
+                    console.log(`Milestone ${milestoneId} (M${index + 1}) - Fallback check: assessment: ${isPreviousMilestoneAssessmentComplete}, mandatory: ${isPreviousMilestoneMandatoryComplete}, canUnlock: ${canUnlock}`);
+                }
+                this.hashmap[milestoneId].computedIsLocked = !canUnlock;
+                console.log(`Milestone ${milestoneId} (M${index + 1}): FINAL - canUnlock: ${canUnlock}, Locked: ${!canUnlock}`);
+            }
+            else {
+                this.hashmap[milestoneId].computedIsLocked = true;
+            }
+        });
+        // Now compute parent milestone lock status for all children
+        Object.keys(this.hashmap).forEach(key => {
+            const item = this.hashmap[key];
+            if (item.isMilestone)
+                return; // Skip milestones themselves
+            // Traverse up to find if any ancestor milestone is locked
+            let currentParentId = item.parent;
+            let depth = 0;
+            const maxDepth = 5;
+            while (currentParentId && depth < maxDepth) {
+                const parentData = this.hashmap[currentParentId];
+                if (parentData) {
+                    if (parentData.isMilestone && parentData.computedIsLocked) {
+                        this.hashmap[key].isParentMilestoneLocked = true;
+                        break;
+                    }
+                    currentParentId = parentData.parent;
+                }
+                else {
+                    break;
+                }
+                depth++;
+            }
+            if (!this.hashmap[key].isParentMilestoneLocked) {
+                this.hashmap[key].isParentMilestoneLocked = false;
+            }
+        });
+        // Create new hashmap reference to trigger Angular change detection
+        this.hashmap = { ...this.hashmap };
+        console.log('=== MILESTONE LOCKING STATUS COMPUTED ===', this.hashmap);
+    }
+    /**
+     * Check if pre-assessment (preliminary assessment) is completed
+     * Pre-assessment is typically a Course Assessment at the root level of Learning Pathway (before milestones)
+     */
+    checkPreAssessmentCompletion() {
+        console.log('Checking pre-assessment completion...');
+        // Find the Learning Pathway root
+        let learningPathwayId = null;
+        for (const key of Object.keys(this.hashmap)) {
+            const item = this.hashmap[key];
+            if (item.isLearningPathway && item.courseCategory === 'Learning Pathway') {
+                learningPathwayId = key;
+                break;
+            }
+        }
+        console.log('Learning Pathway root ID:', learningPathwayId);
+        // PRIORITY 1: Look for items explicitly marked as pre-assessment
+        for (const key of Object.keys(this.hashmap)) {
+            const item = this.hashmap[key];
+            if (item.isPreAssessment === true) {
+                const isCompleted = item.completionStatus === 2 || item.status === 2 || item.completionPercentage >= 100 || item.progress >= 100;
+                console.log(`Pre-assessment (via flag) found: ${key} (${item.name}), Status: ${item.completionStatus}, status: ${item.status}, Percentage: ${item.completionPercentage}, Completed: ${isCompleted}`);
+                return isCompleted;
+            }
+        }
+        // PRIORITY 2: Find pre-assessment in hashmap - direct child of Learning Pathway that is NOT a milestone
+        // Check for first non-milestone child of Learning Pathway
+        for (const key of Object.keys(this.hashmap)) {
+            const item = this.hashmap[key];
+            // Check if this is a direct child of the Learning Pathway
+            if (item.parent !== learningPathwayId)
+                continue;
+            // Skip milestones
+            if (item.isMilestone)
+                continue;
+            // This is a non-milestone direct child - it's the pre-assessment
+            const isCompleted = item.completionStatus === 2 || item.status === 2 || item.completionPercentage >= 100 || item.progress >= 100;
+            console.log(`Pre-assessment (first non-milestone child) found: ${key} (${item.name}), Status: ${item.completionStatus}, status: ${item.status}, Percentage: ${item.completionPercentage}, Completed: ${isCompleted}`);
+            return isCompleted;
+        }
+        // If no pre-assessment found, consider M1 can be unlocked (no pre-assessment requirement)
+        console.log('No pre-assessment found, defaulting to unlocked M1');
+        return true;
+    }
+    /**
+     * Check if a milestone's assessment is completed
+     * Searches for any assessment type (Course Assessment, Final Assessment, etc.) that belongs to this milestone
+     */
+    checkMilestoneAssessmentComplete(milestoneId) {
+        const milestone = this.hashmap[milestoneId];
+        console.log(`Checking assessment for milestone ${milestoneId}:`, milestone);
+        // Check all items in hashmap that are assessments and belong to this milestone
+        for (const key of Object.keys(this.hashmap)) {
+            const item = this.hashmap[key];
+            // Check if this is an assessment type
+            const isAssessmentType = item.primaryCategory === 'Course Assessment' ||
+                item.primaryCategory === 'Final Assessment' ||
+                item.primaryCategory === 'Practice Question Set' ||
+                item.courseCategory === 'Course Assessment' ||
+                item.courseCategory === 'Final Assessment' ||
+                (item.name && item.name.toLowerCase().includes('assessment'));
+            if (!isAssessmentType)
+                continue;
+            // Check if this assessment belongs to this milestone
+            if (this.isChildOfMilestone(key, milestoneId)) {
+                const isCompleted = item.completionStatus === 2 || item.status === 2 || item.completionPercentage >= 100 || item.progress >= 100;
+                console.log(`Milestone ${milestoneId} Assessment found: ${key} (${item.name}), primaryCategory: ${item.primaryCategory}, Status: ${item.completionStatus}, status: ${item.status}, Percentage: ${item.completionPercentage}, Progress: ${item.progress}, Completed: ${isCompleted}`);
+                if (isCompleted) {
+                    return true;
+                }
+            }
+        }
+        // If no assessment found, consider it as completed (no assessment requirement)
+        console.log(`Milestone ${milestoneId}: No assessment found, defaulting to completed`);
+        return true;
+    }
+    /**
+     * Check if a milestone's mandatory content is completed
+     * Only checks courses/content that are marked as isMandatory
+     */
+    checkMilestoneMandatoryContentComplete(milestoneId) {
+        const milestone = this.hashmap[milestoneId];
+        console.log(`Checking mandatory content for milestone ${milestoneId}:`, milestone);
+        let mandatoryCount = 0;
+        let completedMandatoryCount = 0;
+        // Check all items in hashmap that are direct children of this milestone (courses)
+        for (const key of Object.keys(this.hashmap)) {
+            const item = this.hashmap[key];
+            // Check if this item is a direct child of the milestone (course level)
+            if (item.parent !== milestoneId)
+                continue;
+            // Skip if not a course or collection
+            if (item.primaryCategory !== 'Course' && !item.isCollection)
+                continue;
+            // Skip assessments - they're checked separately
+            const isAssessment = item.primaryCategory === 'Course Assessment' ||
+                item.primaryCategory === 'Final Assessment' ||
+                item.courseCategory === 'Course Assessment' ||
+                (item.name && item.name.toLowerCase().includes('assessment'));
+            if (isAssessment)
+                continue;
+            // Check if this content is mandatory
+            if (item.isMandatory) {
+                mandatoryCount++;
+                const isCompleted = item.completionStatus === 2 || item.status === 2 || item.completionPercentage >= 100 || item.progress >= 100;
+                console.log(`Mandatory course ${key} (${item.name}): Status ${item.completionStatus}, status: ${item.status}, Percentage ${item.completionPercentage}, Progress: ${item.progress}, Completed: ${isCompleted}`);
+                if (isCompleted) {
+                    completedMandatoryCount++;
+                }
+            }
+        }
+        const allComplete = mandatoryCount === 0 || completedMandatoryCount >= mandatoryCount;
+        console.log(`Milestone ${milestoneId} Mandatory: ${completedMandatoryCount}/${mandatoryCount} completed, All complete: ${allComplete}`);
+        return allComplete;
+    }
+    /**
+     * Check if a content item is a child (direct or nested) of a milestone
+     */
+    isChildOfMilestone(contentId, milestoneId) {
+        let currentId = contentId;
+        let depth = 0;
+        const maxDepth = 10;
+        while (currentId && depth < maxDepth) {
+            const item = this.hashmap[currentId];
+            if (!item)
+                return false;
+            if (item.parent === milestoneId)
+                return true;
+            currentId = item.parent;
+            depth++;
+        }
+        return false;
+    }
     getCalculationsFromChildren(item) {
         item['duration'] = item.children.reduce((sum, child) => {
             return sum + Number(child.duration || 0);
@@ -5387,11 +5692,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$4.MatLegacyDialog }, { token: i1$3.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?.primaryCategory === 'Standalone Assessment'\">\n                                            {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Program'\">\n                                            {{ 'apptocsinglepage.completedProgram' | translate }} {{\n                                            content?.completedOn ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Course'\">\n                                            {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n                                    </div>\n\n                                </ng-container>\n                            </div>\n                            <div class=\"flex justify-center download-section\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container>\n                                    <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n                                        (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n                                    <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n                                        [diameter]=\"20\"></mat-spinner>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"flex-1\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n                                    [height]=\"'148px'\"></ws-widget-skeleton-loader>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n                                    <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n                                        alt=\"No certificate image\" />\n                                    <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n                                        alt=\"No certificate image\" />\n                                    <div class=\"flex items-center certificate_overlay\">\n                                        <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n                                            <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n                                            <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n                                            <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n                                                    href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n                                                    mission.karmayogi@gov.in</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ng-container *ngIf=\"content?.certificateObj?.certId\">\n                                    <div class=\"img-container\">\n                                        <img class=\"celebration-animation\"\n                                            src=\"assets/images/animation/leaderboard_animation.gif\" />\n                                        <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n                                        <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n                                            alt=\"certificate image\" />\n\n                                        <div\n                                            [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n                                            <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n                                                <span *ngIf=\"!downloadCertificateBool\">{{\n                                                    'apptoccontentcard.viewCertificate' | translate }}</span>\n                                                <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n                                                    <mat-spinner></mat-spinner>\n                                                </div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n                                    <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n                                    <img class=\"ceritificate-image\"\n                                        [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n                                        alt=\"certificate image\" />\n                                </ng-container> -->\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap gap-3 chips-card\">\n                    <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n                        <div class=\"chip rounded-full p-2 text-xs\"\n                            [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n                            [title]=\"subTheme\">{{ subTheme }}</div>\n                    </ng-container>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n                        (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewMore' | translate}}\n                    </div>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewLess' | translate}}\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #certificateLock>\n            <div class=\"certificate-outer-div locked-certificate-outer-div\">\n                <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n                    <div class=\"flex justify-center items-center certificate-lock-text\">\n                        {{ 'apptoc.certificateLocked' | translate }}\n                    </div>\n                    <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n                        <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n                        <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n                        <div class=\"locking-screen-description\">\n                            {{'apptoc.unlockCertificate' | translate}} <span\n                                class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n                            'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n                            content?.courseCategory : content?.primaryCategory } }}\n                        </div>\n\n                        <button mat-button class=\"surveyFormeButton px-7\"\n                            (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n    <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n        {{ 'apptocsinglepage.competencies' | translate }}\n        <mat-icon\n            class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n            [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n            matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n    </div>\n</ng-template>\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n    <ng-container\n        *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n        <div class=\"flex flex-col gap-1 mt-2\">\n            <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n            <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n                content?.source }}</div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n                    '0' }}\n                </div>\n                <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n            <div class=\"flex flex-row\">\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n                <div class=\"flex\">\n                    <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                </div>\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row gap-4 justify-center\">\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                    </div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <div class=\"flex flex-row gap-3\">\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n            <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n                [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\"\n        *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n            <div class=\"desc\"\n                [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n                #descElem>\n\n                <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n                </div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n                    &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\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}</div>\n            <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n            <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n                #summaryElem>\n                <div class=\"mob-text nodtranslate\"\n                    [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n                    (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">&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\">\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 | 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.objectives' | translate\n                }}</div>\n            <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n                #objectivesElem>\n                <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n                    (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n                    &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    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-3\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-row gap-3\">\n                <ng-container *ngFor=\"let i of [1, 2]\">\n                    <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n            </div>\n            <div class=\"flex flex-row gap-4\">\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n            <div class=\"flex flex-col\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n            <div class=\"flex flex-col gap-3\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n                    <ng-container *ngFor=\"let item of competenciesObject\">\n                        <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n                            (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngFor=\"let item of competenciesObject\">\n                    <div *ngIf=\"item?.key === competencySelected\">\n                        <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                            <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [wsResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                        </ws-utils-horizontal-scroller-v2>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        <div class=\"flex flex-col gap-2 mt-4\">\n            <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <!-- {{content|json}} -->\n        <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n            <ng-container [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n            <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader && sectorsList?.length\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n            <ng-container *ngIf=\"sectorsList?.length > 0\">\n                <div class=\"flex flex-col gap-3\">\n                    <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n                        <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                            <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n                            <div class=\"themes-button\"\n                                [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n                                (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n                        <div>\n                            <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                                <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n                                    <ng-container [wsResolverWidget]=\"widget\"></ng-container>\n                                </ng-container>\n                            </ws-utils-horizontal-scroller-v2>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n                        <div class=\"mb-2\">\n                            No Subsector Available\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <!-- <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div> -->\n        </div>\n    </ng-container>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n            <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container> -->\n\n    <ng-template #tagsList let-tagData=\"tagData\">\n        <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"tagData?.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n                    #tagsElem>\n                    <ng-container *ngFor=\"let tag of tagData; let i = index\">\n                        <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n                    *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n                    'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n                    *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n                    translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n        <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n            <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"content?.searchTags.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n                    <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n                        <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n                (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-container> -->\n\n    <div class=\"mobile-karma-points\">\n        <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n            (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n        </ws-widget-karma-points>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- commented because of new discussion v2 comments implmentation -->\n        <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n            <div class=\"flex-1 forum-content\">\n                <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n                    <mat-icon>forum</mat-icon>\n                    <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n                </div>\n            </div>\n            <div class=\"flex-none p-3\">\n                <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n            </div>\n        </div> -->\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-6\">\n            <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                    <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                        [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                    <div class=\"flex flex-col gap-2\">\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n            <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row gap-4 items-center\"\n                    *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n                    </div>\n                </div>\n\n                <div class=\"flex flex-row gap-4\"\n                    *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n            <div class=\"flex flex-row gap-4 items-center\">\n                <div class=\"provider-logo-div\">\n                    <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                </div>\n                <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n        <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n            <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n            <div class=\"flex flex-col gap-3\">\n                <div class=\"flex flex-row gap-4\">\n                    <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n                        'apptocsinglepage.topReviews' | translate }}</div>\n                    <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n                        <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n                            'msg.showAll' | translate }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n                    <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n                        <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n                            <div class=\"p-4 flex flex-col gap-6\">\n                                <div class=\"flex flex-row gap-4\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n                                            handleCapitalize(eachReview?.review) }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-2 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div>{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center text-sm\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                                        [photoUrl]=\"eachReview?.photo || ''\"\n                                        [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n                    <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n                        <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n                            }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <!-- </ng-container> -->\n        <!-- <ng-container *ngIf=\"!content?.averageRating\">\n            <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n                <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n                <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n            </div>\n        </ng-container> -->\n    </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ReplaceNbspPipe, name: "replaceNbsp" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #certificateCard>\n    <ng-container *ngIf=\"!disableCertificate\">\n        <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n            <div class=\"certificate-outer-div\">\n                <div class=\"certificate-card\">\n                    <div class=\"flex flex-col certificate-info p-4 gap-3\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"flex-1\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container *ngIf=\"!skeletonLoader\">\n                                    <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n                                    </div>\n                                    <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n                                        (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n                                    <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n                                        <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n                                            {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Program'\">\n                                            {{ 'apptocsinglepage.completedProgram' | translate }} {{\n                                            content?.completedOn ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Course'\">\n                                            {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n                                    </div>\n\n                                </ng-container>\n                            </div>\n                            <div class=\"flex justify-center download-section\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container>\n                                    <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n                                        (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n                                    <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n                                        [diameter]=\"20\"></mat-spinner>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"flex-1\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n                                    [height]=\"'148px'\"></ws-widget-skeleton-loader>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n                                    <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n                                        alt=\"No certificate image\" />\n                                    <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n                                        alt=\"No certificate image\" />\n                                    <div class=\"flex items-center certificate_overlay\">\n                                        <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n                                            <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n                                            <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n                                            <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n                                                    href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n                                                    mission.karmayogi@gov.in</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ng-container *ngIf=\"content?.certificateObj?.certId\">\n                                    <div class=\"img-container\">\n                                        <img class=\"celebration-animation\"\n                                            src=\"assets/images/animation/leaderboard_animation.gif\" />\n                                        <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n                                        <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n                                            alt=\"certificate image\" />\n\n                                        <div\n                                            [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n                                            <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n                                                <span *ngIf=\"!downloadCertificateBool\">{{\n                                                    'apptoccontentcard.viewCertificate' | translate }}</span>\n                                                <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n                                                    <mat-spinner></mat-spinner>\n                                                </div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n                                    <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n                                    <img class=\"ceritificate-image\"\n                                        [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n                                        alt=\"certificate image\" />\n                                </ng-container> -->\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap gap-3 chips-card\">\n                    <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n                        <div class=\"chip rounded-full p-2 text-xs\"\n                            [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n                            [title]=\"subTheme\">{{ subTheme }}</div>\n                    </ng-container>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n                        (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewMore' | translate}}\n                    </div>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewLess' | translate}}\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #certificateLock>\n            <div class=\"certificate-outer-div locked-certificate-outer-div\">\n                <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n                    <div class=\"flex justify-center items-center certificate-lock-text\">\n                        {{ 'apptoc.certificateLocked' | translate }}\n                    </div>\n                    <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n                        <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n                        <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n                        <div class=\"locking-screen-description\">\n                            {{'apptoc.unlockCertificate' | translate}} <span\n                                class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n                            'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n                            content?.courseCategory : content?.primaryCategory } }}\n                        </div>\n\n                        <button mat-button class=\"surveyFormeButton px-7\"\n                            (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n    <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n        {{ 'apptocsinglepage.competencies' | translate }}\n        <mat-icon\n            class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n            [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n            matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n    </div>\n</ng-template>\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n    <ng-container\n        *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n        <div class=\"flex flex-col gap-1 mt-2\">\n            <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n            <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n                content?.source }}</div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n                    '0' }}\n                </div>\n                <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n            <div class=\"flex flex-row\">\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n                <div class=\"flex\">\n                    <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                </div>\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row gap-4 justify-center\">\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                    </div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <div class=\"flex flex-row gap-3\">\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n            <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n                [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\"\n        *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n            <div class=\"desc\"\n                [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n                #descElem>\n\n                <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n                </div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n                    &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\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}</div>\n            <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n            <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n                #summaryElem>\n                <div class=\"mob-text nodtranslate\"\n                    [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n                    (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">&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\">\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 | 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.objectives' | translate\n                }}</div>\n            <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n                #objectivesElem>\n                <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n                    (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n                    &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    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-3\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-row gap-3\">\n                <ng-container *ngFor=\"let i of [1, 2]\">\n                    <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n            </div>\n            <div class=\"flex flex-row gap-4\">\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n            <div class=\"flex flex-col\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n            <div class=\"flex flex-col gap-3\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n                    <ng-container *ngFor=\"let item of competenciesObject\">\n                        <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n                            (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngFor=\"let item of competenciesObject\">\n                    <div *ngIf=\"item?.key === competencySelected\">\n                        <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                            <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [wsResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                        </ws-utils-horizontal-scroller-v2>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        <div class=\"flex flex-col gap-2 mt-4\">\n            <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <!-- {{content|json}} -->\n        <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n            <ng-container [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n            <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n    content?.resourceCategory?.toLowerCase() === 'case study')\">\n        <div class=\" flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n            <ng-container *ngIf=\"sectorsList?.length > 0\">\n                <div class=\"flex flex-col gap-3\">\n                    <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n                        <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                            <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n                            <div class=\"themes-button\"\n                                [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n                                (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n                        <div>\n                            <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                                <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n                                    <ng-container [wsResolverWidget]=\"widget\"></ng-container>\n                                </ng-container>\n                            </ws-utils-horizontal-scroller-v2>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n                        <div class=\"mb-2\">\n                            No Subsector Available\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <!-- <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div> -->\n        </div>\n    </ng-container>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n            <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container> -->\n\n    <ng-template #tagsList let-tagData=\"tagData\">\n        <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"tagData?.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n                    #tagsElem>\n                    <ng-container *ngFor=\"let tag of tagData; let i = index\">\n                        <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n                    *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n                    'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n                    *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n                    translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n        <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n            <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"content?.searchTags.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n                    <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n                        <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n                (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-container> -->\n\n    <div class=\"mobile-karma-points\">\n        <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n            (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n        </ws-widget-karma-points>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- commented because of new discussion v2 comments implmentation -->\n        <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n            <div class=\"flex-1 forum-content\">\n                <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n                    <mat-icon>forum</mat-icon>\n                    <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n                </div>\n            </div>\n            <div class=\"flex-none p-3\">\n                <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n            </div>\n        </div> -->\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-6\">\n            <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                    <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                        [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                    <div class=\"flex flex-col gap-2\">\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n            <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row gap-4 items-center\"\n                    *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n                    </div>\n                </div>\n\n                <div class=\"flex flex-row gap-4\"\n                    *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n            <div class=\"flex flex-row gap-4 items-center\">\n                <div class=\"provider-logo-div\">\n                    <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                </div>\n                <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n        <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n            <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n            <div class=\"flex flex-col gap-3\">\n                <div class=\"flex flex-row gap-4\">\n                    <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n                        'apptocsinglepage.topReviews' | translate }}</div>\n                    <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n                        <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n                            'msg.showAll' | translate }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n                    <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n                        <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n                            <div class=\"p-4 flex flex-col gap-6\">\n                                <div class=\"flex flex-row gap-4\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n                                            handleCapitalize(eachReview?.review) }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-2 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div>{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center text-sm\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                                        [photoUrl]=\"eachReview?.photo || ''\"\n                                        [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n                    <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n                        <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n                            }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <!-- </ng-container> -->\n        <!-- <ng-container *ngIf=\"!content?.averageRating\">\n            <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n                <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n                <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n            </div>\n        </ng-container> -->\n    </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "component", type: i2$1.HorizontalScrollerV2Component, selector: "ws-utils-horizontal-scroller-v2", inputs: ["loadStatus", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "stripsResultDataMap", "subtype"], outputs: ["loadNext"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ReplaceNbspPipe, name: "replaceNbsp" }] }); }
 }
 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?.primaryCategory === 'Standalone Assessment'\">\n                                            {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Program'\">\n                                            {{ 'apptocsinglepage.completedProgram' | translate }} {{\n                                            content?.completedOn ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Course'\">\n                                            {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n                                    </div>\n\n                                </ng-container>\n                            </div>\n                            <div class=\"flex justify-center download-section\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container>\n                                    <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n                                        (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n                                    <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n                                        [diameter]=\"20\"></mat-spinner>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"flex-1\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n                                    [height]=\"'148px'\"></ws-widget-skeleton-loader>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n                                    <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n                                        alt=\"No certificate image\" />\n                                    <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n                                        alt=\"No certificate image\" />\n                                    <div class=\"flex items-center certificate_overlay\">\n                                        <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n                                            <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n                                            <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n                                            <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n                                                    href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n                                                    mission.karmayogi@gov.in</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ng-container *ngIf=\"content?.certificateObj?.certId\">\n                                    <div class=\"img-container\">\n                                        <img class=\"celebration-animation\"\n                                            src=\"assets/images/animation/leaderboard_animation.gif\" />\n                                        <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n                                        <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n                                            alt=\"certificate image\" />\n\n                                        <div\n                                            [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n                                            <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n                                                <span *ngIf=\"!downloadCertificateBool\">{{\n                                                    'apptoccontentcard.viewCertificate' | translate }}</span>\n                                                <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n                                                    <mat-spinner></mat-spinner>\n                                                </div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n                                    <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n                                    <img class=\"ceritificate-image\"\n                                        [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n                                        alt=\"certificate image\" />\n                                </ng-container> -->\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap gap-3 chips-card\">\n                    <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n                        <div class=\"chip rounded-full p-2 text-xs\"\n                            [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n                            [title]=\"subTheme\">{{ subTheme }}</div>\n                    </ng-container>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n                        (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewMore' | translate}}\n                    </div>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewLess' | translate}}\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #certificateLock>\n            <div class=\"certificate-outer-div locked-certificate-outer-div\">\n                <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n                    <div class=\"flex justify-center items-center certificate-lock-text\">\n                        {{ 'apptoc.certificateLocked' | translate }}\n                    </div>\n                    <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n                        <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n                        <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n                        <div class=\"locking-screen-description\">\n                            {{'apptoc.unlockCertificate' | translate}} <span\n                                class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n                            'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n                            content?.courseCategory : content?.primaryCategory } }}\n                        </div>\n\n                        <button mat-button class=\"surveyFormeButton px-7\"\n                            (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n    <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n        {{ 'apptocsinglepage.competencies' | translate }}\n        <mat-icon\n            class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n            [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n            matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n    </div>\n</ng-template>\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n    <ng-container\n        *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n        <div class=\"flex flex-col gap-1 mt-2\">\n            <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n            <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n                content?.source }}</div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n                    '0' }}\n                </div>\n                <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n            <div class=\"flex flex-row\">\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n                <div class=\"flex\">\n                    <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                </div>\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row gap-4 justify-center\">\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                    </div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <div class=\"flex flex-row gap-3\">\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n            <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n                [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\"\n        *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n            <div class=\"desc\"\n                [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n                #descElem>\n\n                <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n                </div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n                    &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\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}</div>\n            <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n            <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n                #summaryElem>\n                <div class=\"mob-text nodtranslate\"\n                    [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n                    (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">&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\">\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 | 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.objectives' | translate\n                }}</div>\n            <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n                #objectivesElem>\n                <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n                    (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n                    &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    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-3\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-row gap-3\">\n                <ng-container *ngFor=\"let i of [1, 2]\">\n                    <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n            </div>\n            <div class=\"flex flex-row gap-4\">\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n            <div class=\"flex flex-col\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n            <div class=\"flex flex-col gap-3\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n                    <ng-container *ngFor=\"let item of competenciesObject\">\n                        <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n                            (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngFor=\"let item of competenciesObject\">\n                    <div *ngIf=\"item?.key === competencySelected\">\n                        <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                            <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [wsResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                        </ws-utils-horizontal-scroller-v2>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        <div class=\"flex flex-col gap-2 mt-4\">\n            <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <!-- {{content|json}} -->\n        <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n            <ng-container [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n            <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader && sectorsList?.length\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n            <ng-container *ngIf=\"sectorsList?.length > 0\">\n                <div class=\"flex flex-col gap-3\">\n                    <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n                        <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                            <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n                            <div class=\"themes-button\"\n                                [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n                                (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n                        <div>\n                            <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                                <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n                                    <ng-container [wsResolverWidget]=\"widget\"></ng-container>\n                                </ng-container>\n                            </ws-utils-horizontal-scroller-v2>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n                        <div class=\"mb-2\">\n                            No Subsector Available\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <!-- <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div> -->\n        </div>\n    </ng-container>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n            <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container> -->\n\n    <ng-template #tagsList let-tagData=\"tagData\">\n        <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"tagData?.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n                    #tagsElem>\n                    <ng-container *ngFor=\"let tag of tagData; let i = index\">\n                        <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n                    *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n                    'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n                    *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n                    translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n        <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n            <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"content?.searchTags.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n                    <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n                        <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n                (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-container> -->\n\n    <div class=\"mobile-karma-points\">\n        <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n            (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n        </ws-widget-karma-points>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- commented because of new discussion v2 comments implmentation -->\n        <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n            <div class=\"flex-1 forum-content\">\n                <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n                    <mat-icon>forum</mat-icon>\n                    <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n                </div>\n            </div>\n            <div class=\"flex-none p-3\">\n                <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n            </div>\n        </div> -->\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-6\">\n            <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                    <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                        [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                    <div class=\"flex flex-col gap-2\">\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n            <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row gap-4 items-center\"\n                    *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n                    </div>\n                </div>\n\n                <div class=\"flex flex-row gap-4\"\n                    *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n            <div class=\"flex flex-row gap-4 items-center\">\n                <div class=\"provider-logo-div\">\n                    <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                </div>\n                <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n        <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n            <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n            <div class=\"flex flex-col gap-3\">\n                <div class=\"flex flex-row gap-4\">\n                    <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n                        'apptocsinglepage.topReviews' | translate }}</div>\n                    <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n                        <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n                            'msg.showAll' | translate }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n                    <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n                        <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n                            <div class=\"p-4 flex flex-col gap-6\">\n                                <div class=\"flex flex-row gap-4\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n                                            handleCapitalize(eachReview?.review) }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-2 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div>{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center text-sm\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                                        [photoUrl]=\"eachReview?.photo || ''\"\n                                        [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n                    <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n                        <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n                            }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <!-- </ng-container> -->\n        <!-- <ng-container *ngIf=\"!content?.averageRating\">\n            <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n                <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n                <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n            </div>\n        </ng-container> -->\n    </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\n"] }]
+            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?.primaryCategory === 'Standalone Assessment'\">\n                                            {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Program'\">\n                                            {{ 'apptocsinglepage.completedProgram' | translate }} {{\n                                            content?.completedOn ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Course'\">\n                                            {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n                                    </div>\n\n                                </ng-container>\n                            </div>\n                            <div class=\"flex justify-center download-section\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container>\n                                    <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n                                        (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n                                    <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n                                        [diameter]=\"20\"></mat-spinner>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"flex-1\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n                                    [height]=\"'148px'\"></ws-widget-skeleton-loader>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n                                    <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n                                        alt=\"No certificate image\" />\n                                    <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n                                        alt=\"No certificate image\" />\n                                    <div class=\"flex items-center certificate_overlay\">\n                                        <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n                                            <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n                                            <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n                                            <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n                                                    href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n                                                    mission.karmayogi@gov.in</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ng-container *ngIf=\"content?.certificateObj?.certId\">\n                                    <div class=\"img-container\">\n                                        <img class=\"celebration-animation\"\n                                            src=\"assets/images/animation/leaderboard_animation.gif\" />\n                                        <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n                                        <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n                                            alt=\"certificate image\" />\n\n                                        <div\n                                            [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n                                            <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n                                                <span *ngIf=\"!downloadCertificateBool\">{{\n                                                    'apptoccontentcard.viewCertificate' | translate }}</span>\n                                                <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n                                                    <mat-spinner></mat-spinner>\n                                                </div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n                                    <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n                                    <img class=\"ceritificate-image\"\n                                        [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n                                        alt=\"certificate image\" />\n                                </ng-container> -->\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap gap-3 chips-card\">\n                    <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n                        <div class=\"chip rounded-full p-2 text-xs\"\n                            [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n                            [title]=\"subTheme\">{{ subTheme }}</div>\n                    </ng-container>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n                        (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewMore' | translate}}\n                    </div>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewLess' | translate}}\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #certificateLock>\n            <div class=\"certificate-outer-div locked-certificate-outer-div\">\n                <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n                    <div class=\"flex justify-center items-center certificate-lock-text\">\n                        {{ 'apptoc.certificateLocked' | translate }}\n                    </div>\n                    <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n                        <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n                        <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n                        <div class=\"locking-screen-description\">\n                            {{'apptoc.unlockCertificate' | translate}} <span\n                                class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n                            'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n                            content?.courseCategory : content?.primaryCategory } }}\n                        </div>\n\n                        <button mat-button class=\"surveyFormeButton px-7\"\n                            (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n    <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n        {{ 'apptocsinglepage.competencies' | translate }}\n        <mat-icon\n            class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n            [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n            matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n    </div>\n</ng-template>\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n    <ng-container\n        *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n        <div class=\"flex flex-col gap-1 mt-2\">\n            <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n            <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n                content?.source }}</div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n                    '0' }}\n                </div>\n                <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n            <div class=\"flex flex-row\">\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n                <div class=\"flex\">\n                    <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                </div>\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row gap-4 justify-center\">\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                    </div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <div class=\"flex flex-row gap-3\">\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n            <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n                [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\"\n        *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n            <div class=\"desc\"\n                [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n                #descElem>\n\n                <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n                </div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n                    &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\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div *ngIf=\"content?.contentId && content?.contentId.includes('ext_')\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.description' | translate }}</div>\n            <div *ngIf=\"!(content?.contentId && content?.contentId.includes('ext_'))\"\n                class=\"mat-subheading-1 font-bold nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n            <div [ngClass]=\"{'mob-desc-ellipsis': summary.ellipsis && isMobile, 'desc-ellipsis': summary.ellipsis && !isMobile}\"\n                #summaryElem>\n                <div class=\"mob-text nodtranslate\"\n                    [innerHtml]=\"handleCapitalize(contentReadData?.description | replaceNbsp)\"></div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"summary.viewLess\"\n                    (click)=\"summary.ellipsis = !summary.ellipsis; summary.viewLess = !summary.viewLess\">&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\">\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 | 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.objectives' | translate\n                }}</div>\n            <div [ngClass]=\"{'mob-desc-ellipsis': objectives.ellipsis && isMobile, 'desc-ellipsis': objectives.ellipsis && !isMobile}\"\n                #objectivesElem>\n                <span class=\"mob-text nodtranslate\" [innerHtml]=\"handleCapitalize(content?.objectives)\"></span>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"objectives.viewLess\"\n                    (click)=\"objectives.ellipsis = !objectives.ellipsis; objectives.viewLess = !objectives.viewLess\">\n                    &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    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-3\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-row gap-3\">\n                <ng-container *ngFor=\"let i of [1, 2]\">\n                    <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n            </div>\n            <div class=\"flex flex-row gap-4\">\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'250px'\" [height]=\"'80px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <ng-container *ngIf=\"!strip?.loaderWidgets?.length || !competenciesObject\">\n            <div class=\"flex flex-col\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                {{ 'apptocsinglepage.noCompetencyFound' | translate }}\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"strip?.loaderWidgets?.length > 0\">\n            <div class=\"flex flex-col gap-3\">\n                <ng-container [ngTemplateOutlet]=\"competencyLabel\"></ng-container>\n                <div class=\"flex flex-row gap-3 sm:gap-4 mb-3\">\n                    <ng-container *ngFor=\"let item of competenciesObject\">\n                        <div class=\"themes-button\" [ngClass]=\"{'theme-activated': competencySelected === item.key}\"\n                            (click)=\"handleShowCompetencies(item, 'selected')\">{{ item.key }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngFor=\"let item of competenciesObject\">\n                    <div *ngIf=\"item?.key === competencySelected\">\n                        <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                            <ng-container *ngFor=\"let widget of strip?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [wsResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                        </ws-utils-horizontal-scroller-v2>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'16px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        <div class=\"flex flex-col gap-2 mt-4\">\n            <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader\">\n        <!-- {{content|json}} -->\n        <ng-container *ngIf=\"contentReadData?.keywords?.length\">\n            <ng-container [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: contentReadData?.keywords }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"content?.searchTags?.length > 1\">\n            <ng-container *ngIf=\"content?.searchTags?.length\" [ngTemplateOutlet]=\"tagsList\"\n                [ngTemplateOutletContext]=\"{ tagData: content?.searchTags?.slice(1,content?.searchTags?.length) }\"></ng-container>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(!skeletonLoader && sectorsList?.length) && (content?.primaryCategory?.toLowerCase() === 'learning resource' ||\n    content?.resourceCategory?.toLowerCase() === 'case study')\">\n        <div class=\" flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.sectors' | translate }}</div>\n            <ng-container *ngIf=\"sectorsList?.length > 0\">\n                <div class=\"flex flex-col gap-3\">\n                    <div class=\"flex flex-row gap-3 sm:gap-4 mb-3 flex-wrap\">\n                        <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                            <!-- [ngClass]=\"{'theme-activated': competencySelected === item.key}\"-->\n                            <div class=\"themes-button\"\n                                [ngClass]=\"{'theme-activated': selectedSectorId === sector?.sectorId}\"\n                                (click)=\"handleSubsector(sector, 'selected')\">{{ sector?.sectorName }}</div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length\">\n                        <div>\n                            <ws-utils-horizontal-scroller-v2 [loadStatus]=\"'done'\" [stripConfig]=\"strip.stripConfig\">\n                                <ng-container *ngFor=\"let widget of strip?.sectorWidgets; trackBy: tracker\">\n                                    <ng-container [wsResolverWidget]=\"widget\"></ng-container>\n                                </ng-container>\n                            </ws-utils-horizontal-scroller-v2>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"strip?.sectorWidgets?.length === 0 && selectedSectorId\">\n                        <div class=\"mb-2\">\n                            No Subsector Available\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <!-- <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of sectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.sectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div> -->\n        </div>\n    </ng-container>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && subSectorsList?.length\">\n        <div class=\"flex flex-col\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'gyaanKarmayogi.subSectors' | translate }}</div>\n            <div class=\"flex flex-wrap gap-2\" >\n                <ng-container *ngFor=\"let sector of subSectorsList; let i = index; let isLast = last\">\n                    <div class=\"text-xs mob-text\" >{{ sector?.subSectorName }}</div>\n                    <div class=\"flex items-center\" *ngIf=\"!isLast\">\n                        <span class=\"period\"></span>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </ng-container> -->\n\n    <ng-template #tagsList let-tagData=\"tagData\">\n        <div class=\"flex flex-col\" *ngIf=\"tagData?.length\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"tagData?.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': tagsEllipsis && !viewMoreTags}\"\n                    #tagsElem>\n                    <ng-container *ngFor=\"let tag of tagData; let i = index\">\n                        <div class=\"text-xs mob-text\">{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"tagData?.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\"\n                    *ngIf=\"tagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{\n                    'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\"\n                    *ngIf=\"viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' |\n                    translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!tagData?.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- <ng-container *ngIf=\"!skeletonLoader && content?.searchTags\">\n        <div class=\"flex flex-col\" *ngIf=\"content?.searchTags.length\">\n            <div class=\"mat-subheading-1\">{{ 'userProfile.tags' | translate }}</div>\n            <ng-container *ngIf=\"content?.searchTags.length\">\n                <div class=\"flex flex-wrap gap-2\" [ngClass]=\"{'tags-ellipsis': searchTagsEllipsis && !viewMoreTags}\" #searchTagElem>\n                    <ng-container *ngFor=\"let tag of content?.searchTags; let i = index\">\n                        <div class=\"text-xs mob-text\" >{{ handleCapitalize(tag) }}</div>\n                        <div class=\"flex items-center\" *ngIf=\"content?.searchTags.length > (i + 1)\">\n                            <span class=\"period\"></span>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs\" *ngIf=\"searchTagsEllipsis && !viewMoreTags\" (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewMore' | translate }}</div>\n                <div class=\"flex items-center ws-mat-default-text underline cursor-pointer text-xs mt-1\" *ngIf=\"viewMoreTags\"\n                (click)=\"viewMoreTags = !viewMoreTags\">{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </ng-container>\n            <div class=\"flex flex-wrap gap-2\" *ngIf=\"!content?.searchTags.length\">\n                {{ 'userProfile.noTags' | translate }}\n            </div>\n        </div>\n    </ng-container> -->\n\n    <div class=\"mobile-karma-points\">\n        <ws-widget-karma-points [content]=\"content\" [btnCategory]=\"\" [condition]=\"condition\"\n            (clickClaimKarmaPoints)=\"handleClickOfClaim($event)\" [data]=\"kparray\">\n        </ws-widget-karma-points>\n    </div>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'72px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- commented because of new discussion v2 comments implmentation -->\n        <!-- <div class=\"flex flex-col sm:flex-row items-center discussion-div\">\n            <div class=\"flex-1 forum-content\">\n                <div class=\"flex flex-col sm:flex-row gap-5 items-center\">\n                    <mat-icon>forum</mat-icon>\n                    <div class=\"suggestion-text sm:pr-4\">{{ 'apptocsinglepage.anySuggestions' | translate }}</div>\n                </div>\n            </div>\n            <div class=\"flex-none p-3\">\n                <button class=\"action-button\" (click)=\"navigateToDiscussionHub()\">{{ 'discuss.startDiscuss' | translate }}</button>\n            </div>\n        </div> -->\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <div class=\"flex flex-col gap-6\">\n            <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                    <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                        [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                    <div class=\"flex flex-col gap-2\">\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authorsAndCurators' | translate }}</div>\n            <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row gap-4 items-center\"\n                    *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"author.photo || ''\" [name]=\"author.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(author?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.author' | translate }}</div>\n                    </div>\n                </div>\n\n                <div class=\"flex flex-row gap-4\"\n                    *ngFor=\"let creator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                    <div class=\"flex items-center justify-center\">\n                        <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                            [photoUrl]=\"creator.photo || ''\" [name]=\"creator.name\">\n                        </ws-widget-avatar-photo>\n                    </div>\n                    <div class=\"flex flex-col gap-1 justify-center\">\n                        <div class=\"font-bold\">{{ handleCapitalize(creator?.name.toLowerCase(), 'name') }}</div>\n                        <div class=\"text-xs leading-3 mob-text\">{{ 'apptocsinglepage.curator' | translate }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-column gap-3\" [ngClass]=\"{'hideAbove1200': !router.url.includes('/viewer/')}\">\n            <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n            <div class=\"flex flex-row gap-4 items-center\">\n                <div class=\"provider-logo-div\">\n                    <img *ngIf=\"content?.creatorLogo\" [src]=\"content?.creatorLogo\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!content?.creatorLogo\" src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                        alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                </div>\n                <div class=\"text-sm break-all\">{{ handleCapitalize(content?.source, 'source') }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'400px'\"\n            [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!skeletonLoader && !forPreview\">\n        <!-- <ng-container *ngIf=\"content?.averageRating\"> -->\n        <div class=\"flex flex-col ratings-div gap-10\" id=\"ratingsDiv\" *ngIf=\"showReviews\">\n            <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary>\n\n            <div class=\"flex flex-col gap-3\">\n                <div class=\"flex flex-row gap-4\">\n                    <div class=\"flex-1 mat-subheading-1 nodtranslate\" id=\"reviewContainer\">{{\n                        'apptocsinglepage.topReviews' | translate }}</div>\n                    <ng-container *ngIf=\"ratingSummaryProcessed?.avgRating\">\n                        <div class=\"ws-mat-default-text cursor-pointer\" (click)=\"handleOpenReviewModal()\">{{\n                            'msg.showAll' | translate }}</div>\n                    </ng-container>\n                </div>\n                <ng-container *ngIf=\"topRatingReviews && topRatingReviews?.length\">\n                    <div class=\"flex gap-5\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n                        <div class=\"comment-div\" *ngFor=\"let eachReview of topRatingReviews | slice:0:4; let i = index\">\n                            <div class=\"p-4 flex flex-col gap-6\">\n                                <div class=\"flex flex-row gap-4\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-left desc-ellipsis\" title=\"{{ eachReview?.review }}\">{{\n                                            handleCapitalize(eachReview?.review) }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-2 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div>{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center text-sm\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                                        [photoUrl]=\"eachReview?.photo || ''\"\n                                        [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div>{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div>{{ eachReview?.date | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div *ngIf=\"!topRatingReviews || !topRatingReviews?.length\">\n                    <div class=\"flex flex-col text-center items-center justify-center bg-white p-4 rounded-md\">\n                        <div class=\"font-base font-bold nodtranslate\">{{ 'apptocsinglepage.noReviewsFound' | translate\n                            }}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <!-- </ng-container> -->\n        <!-- <ng-container *ngIf=\"!content?.averageRating\">\n            <div class=\"flex flex-col gap-3 justify-center ratings-div\">\n                <img src=\"/assets/icons/toc/no-certificate.svg\" alt=\"no ratings image\" />\n                <div class=\"text-lg font-bol\">Be the first one to rate this course and your <br/> learning experience</div>\n            </div>\n        </ng-container> -->\n    </ng-container>\n</div>", styles: [".mt60{margin-top:60px}.mat-subheading-1{font-weight:700}.hidden{display:none!important}.info-icon{width:16px;height:16px;font-size:16px}.themes-button{border-radius:20px;border:1px solid rgba(0,0,0,.08);background-color:#e6e8ef;color:#0009;font-weight:400;letter-spacing:.25px;padding:8px 16px;cursor:pointer}.theme-activated{border:1px solid rgba(0,0,0,.8705882353);background-color:#dee6f2;color:#000000de;font-weight:700}.discussion-div{border-radius:12px;border:1px solid rgba(0,0,0,.08);background-color:#fff}.discussion-div .forum-content{padding:12px 28px}.discussion-div mat-icon{width:40px;height:40px;font-size:40px;color:#ff9800}.discussion-div .action-button{padding:12px 16px}@media screen and (max-width: 767px){.suggestion-text{text-align:center}.mob-text{color:#0009;word-wrap:break-word;width:100%}}.mob-text{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}::ng-deep .mob-text p{word-break:break-word!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;text-align:left}.ratings-div{background-color:#1b4ca114;padding:24px}.ratings-div .ratings-container{max-width:380px;width:100%}.ratings-div .comment-div{background-color:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.16);max-width:344px;width:100%}.ratings-div .comment-div .rating-start-value mat-icon{color:#ff9800}.horizontal-strip .comment-div{min-width:340px}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.text-ellipsis,.mob-desc-ellipsis,.desc-ellipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word}.desc{word-break:break-word;white-space:normal;overflow-wrap:break-word;text-align:left}.desc-ellipsis{min-height:72px;-webkit-line-clamp:3}.mob-desc-ellipsis{min-height:48px;-webkit-line-clamp:2}.tags-ellipsis{max-height:64px;overflow:hidden}::ng-deep .ratings-modal-box{max-width:880px!important;width:100%!important}::ng-deep .ratings-modal-box .mat-dialog-container{padding:0;border-radius:12px}@media screen and (max-width: 1000px){::ng-deep .ratings-modal-box{max-width:90vw!important}}.leading-5{font-family:Montserrat;font-size:16px;letter-spacing:.12px;color:#000000de;font-weight:500;margin-top:24px;margin-bottom:8px}.leading-4{font-family:Lato;font-size:14px;letter-spacing:.25px;color:#0009;font-weight:400;margin-top:8px;margin-bottom:24px}.kpi-values{margin:0 12px;min-width:72px}.earned-certificate-container{height:136px;border:1px solid rgb(27,76,161);border-radius:8px;background-color:#fff;max-width:768px}.earned-certificate-container .ribbon{position:relative;text-align:center;background:#1b4ca1;display:block;width:64px;height:60px;margin-left:20px;top:-6px;border-top-left-radius:4px;border-top-right-radius:4px}.earned-certificate-container .ribbon:after{content:\"\";width:100%;top:100%;position:absolute;display:block;border-width:4px 28px 24px 28px;border-color:#1b4ca1;border-bottom-color:transparent;border-style:solid;box-sizing:border-box}.earned-certificate-container .earned-certificate{font-family:Montserrat;font-size:20px;letter-spacing:.12px;line-height:28px;color:#1b4ca1;font-weight:600}.earned-certificate-container .certificate-background{background:url(/assets/icons/toc/cert-banner.svg);background-repeat:no-repeat;background-size:cover;width:100%;background-position-y:-88px;background-position-x:72px;height:inherit}.mobile-certificate-container{margin-top:10px;margin-bottom:20px}.mobile-certificate-container .earned-certificate-container{display:flex;flex-direction:column;gap:16px;height:100%}.mobile-certificate-container .earned-certificate-container .ribbon{width:52px;height:56px}.mobile-certificate-container .earned-certificate-container .ribbon:after{border-width:4px 28px 24px 24px}.mobile-certificate-container .earned-certificate{width:70%;padding:16px}.mobile-certificate-container .certificate-background{background:url(/assets/icons/toc/mob-cert-banner.svg);background-repeat:no-repeat;background-size:auto;width:100%;min-height:360px;background-position-x:center;background-position-y:8px}.mobile-certificate-container .certificate-outer-div{width:100%;position:relative;top:28px;right:0;min-height:200px;margin:0 auto 28px}.certificate-container{margin:108px 0 88px}@media screen and (max-width: 767px){.certificate-container{display:none}}@media screen and (min-width: 768px){.mobile-certificate-container{display:none}}.horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%;align-items:center;text-align:center}.horizontal-strip::-webkit-scrollbar{display:none}.mobile-karma-points{max-width:360px}@media screen and (min-width: 1200px){.hideAbove1200{display:none!important}.mobile-karma-points{display:none}}@media screen and (max-width: 1200px){.pt-mweb-8{padding-top:2rem}.pt-mweb-4{padding-top:1rem}}.certificate_box{width:100%;height:180px;border-radius:12px;position:relative}.certificate_box img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:12px}.certificate_box .certificate_overlay{height:100%;width:100%;position:absolute;background:linear-gradient(180deg,#0000003d,#000000b0);top:0;left:0;z-index:1;border-radius:8px;overflow-y:auto}.certificate-outer-div{max-width:320px;width:100%;position:relative;right:108px;top:-168px;min-height:200px;z-index:10}.certificate-outer-div .certificate-card{border-radius:12px;border-top:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.08);background:#fff;--mask: radial-gradient(16px at 16px 100%, #0000 98%, #000) -16px;mask:var(--mask)}.certificate-outer-div .certificate-card .ceritificate-image{display:flex;margin:auto;width:100%;border-radius:8px}.certificate-outer-div .certificate-card .icon{width:20px;height:20px;font-size:20px;color:#000000de}.certificate-outer-div .certificate-card .certificate-info{border-bottom:1px dashed rgba(0,0,0,.08)}.certificate-outer-div .chips-card{border-right:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);border-left:1px solid rgba(0,0,0,.16);padding:16px;background:#fff;border-radius:12px;--mask: radial-gradient(16px at 16px 0, #0000 98%, #000) -16px;mask:var(--mask)}.chip{border:1px solid rgba(0,0,0,.8705882353);color:#000000de;line-height:14px}.chip-ellipsis{white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.celebration-animation{position:absolute;left:0%;top:0;z-index:9999;width:100%}.download-section{z-index:99999}.truncate-3{-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.img-container{position:relative}.img-container .view-cert{visibility:hidden;display:none}.img-container:hover{display:block;z-index:99999}.img-container:hover .view-cert{visibility:visible;position:absolute;left:0;top:0;text-align:center;opacity:1;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#000000b5;border-radius:8px}.img-container:hover .view-cert button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999}.view-certificate{visibility:visible!important;display:block;position:absolute;left:0;top:0;text-align:center;opacity:1;background-color:#000000b5;border-radius:8px;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.view-certificate button{color:#fff;border:1px solid white;padding:8px;background:transparent;border-radius:12px;cursor:pointer;z-index:999999;width:150px}.uploader-status ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.uploader-status ::ng-deep .mat-progress-spinner svg{width:24px!important;height:24px!important}.uploader-status ::ng-deep .mat-progress-spinner{width:24px!important;height:24px!important}.emailDefault{color:#f3962f!important;text-decoration:underline!important}.locked-certificate-outer-div{background-color:#fff;border-radius:10px}.certificate-lock{border:.7px solid rgba(0,0,0,.16);border-radius:12px}.certificate-lock .certificate-lock-text{color:#344054;font:700 14px/20.074px Inter}.certificate-lock .locking-screen{color:#fff;border-radius:4px;background-color:#000000db}.certificate-lock .certificateLockedText{color:#fff;text-align:center;font:700 11.72px/normal Lato}.certificate-lock .locking-screen-description{color:#fff;text-align:center;font:400 14px/normal Lato}.certificate-lock .locking-screen-description .surveyFormeText{color:#f3962f}.certificate-lock .surveyFormeButton{background-color:#1b4ca1;height:34px;border-radius:18px;color:#fff;font:700 12px Lato;border:0px;cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: RatingService }, { type: i2$1.LoggerService }, { type: i1$4.MatLegacyDialog }, { type: i1$3.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']
@@ -5622,6 +5927,7 @@ class AppTocContentCardV2Component {
         this.isPreAssessment = false;
         this.baseContentReadData = null;
         this.mlCourse = null;
+        this.parentMilestoneLocked = false; // Passed from parent when inside a locked milestone
         this.hasContentStructure = false;
         this.downloadCertificateLoading = false;
         this.enumContentTypes = NsContent.EDisplayContentTypes;
@@ -5649,15 +5955,197 @@ class AppTocContentCardV2Component {
         this.viewChildren = false;
         this.primaryCategory = NsContent.EPrimaryCategory;
         this.pageScrollSubscription = null;
+        // Cached computed properties for performance optimization
+        this._cachedIsCollection = false;
+        this._cachedIsModule = false;
+        this._cachedIsResource = false;
+        this._cachedIsMilestone = false;
+        this._cachedIsMilestoneLocked = false;
+        this._cachedIsParentMilestoneLocked = false;
+        this._cachedIsContentUnlocked = true;
+        this._cachedCheckForCuratedProgram = false;
+        this._cachedResourceLink = { url: '', queryParams: {} };
+        this._cacheInitialized = false;
     }
     ngOnInit() {
         this.evaluateImmediateChildrenStructure();
+        this.initializeComputedProperties();
         // this.route.data.subscribe(data => {
         //     this.defaultThumbnail = data.configData.data.logos.defaultContent
         //   }
         // )
         this.resourceScroll();
     }
+    /**
+     * Initialize all computed properties once to avoid expensive getter calculations
+     * on every change detection cycle
+     */
+    initializeComputedProperties() {
+        this.computeAllCachedProperties();
+    }
+    /**
+     * Compute all cached properties at once for performance optimization
+     */
+    computeAllCachedProperties() {
+        if (!this.content) {
+            this._cacheInitialized = false;
+            return;
+        }
+        const contentId = this.content.identifier;
+        const hashData = this.hierarchyMapData && this.hierarchyMapData[contentId];
+        // Use hashmap data if available for pre-computed values
+        if (hashData) {
+            this._cachedIsCollection = hashData.isCollection !== undefined ?
+                hashData.isCollection : this.content.mimeType === NsContent.EMimeTypes.COLLECTION;
+            this._cachedIsModule = hashData.isModule !== undefined ?
+                hashData.isModule : this.content.primaryCategory === NsContent.EPrimaryCategory.MODULE;
+            this._cachedIsResource = hashData.isResource !== undefined ?
+                hashData.isResource : this.computeIsResource();
+            this._cachedIsMilestone = hashData.isMilestone !== undefined ?
+                hashData.isMilestone : this.computeIsMilestone();
+            this._cachedIsMilestoneLocked = hashData.computedIsLocked !== undefined ?
+                hashData.computedIsLocked : this.computeIsMilestoneLocked();
+            this._cachedIsParentMilestoneLocked = hashData.isParentMilestoneLocked !== undefined ?
+                hashData.isParentMilestoneLocked : this.computeIsParentMilestoneLocked();
+        }
+        else {
+            // Fallback to direct computation if hashmap not available
+            this._cachedIsCollection = this.content.mimeType === NsContent.EMimeTypes.COLLECTION;
+            this._cachedIsModule = this.content.primaryCategory === NsContent.EPrimaryCategory.MODULE;
+            this._cachedIsResource = this.computeIsResource();
+            this._cachedIsMilestone = this.computeIsMilestone();
+            this._cachedIsMilestoneLocked = this.computeIsMilestoneLocked();
+            this._cachedIsParentMilestoneLocked = this.computeIsParentMilestoneLocked();
+        }
+        this._cachedCheckForCuratedProgram = this.computeCheckForCuratedProgram();
+        this._cachedIsContentUnlocked = this.computeIsContentUnlocked();
+        this._cachedResourceLink = this.computeResourceLink();
+        this._cacheInitialized = true;
+    }
+    computeIsResource() {
+        if (!this.content)
+            return false;
+        return (this.content.primaryCategory === NsContent.EPrimaryCategory.RESOURCE ||
+            this.content.primaryCategory === NsContent.EPrimaryCategory.PRACTICE_RESOURCE ||
+            this.content.primaryCategory === NsContent.EPrimaryCategory.FINAL_ASSESSMENT ||
+            this.content.primaryCategory === NsContent.EPrimaryCategory.COMP_ASSESSMENT);
+    }
+    computeIsMilestone() {
+        if (!this.content)
+            return false;
+        const primaryCat = this.content.primaryCategory;
+        const courseCat = this.content.courseCategory;
+        return primaryCat === 'Milestone' || courseCat === 'Milestone';
+    }
+    computeCheckForCuratedProgram() {
+        if (this.content && this.content.parent && this.hierarchyMapData && this.hierarchyMapData[this.content.parent]) {
+            const parentData = this.hierarchyMapData[this.content.parent];
+            return parentData && parentData.primaryCategory === NsContent.EPrimaryCategory.CURATED_PROGRAM &&
+                parentData.compatibilityLevel >= 5 &&
+                parentData.contextLockingType === NsContent.EContextLockingType.COURSE_ASSESSMENT_ONLY;
+        }
+        return false;
+    }
+    computeIsContentUnlocked() {
+        if (this._cachedCheckForCuratedProgram) {
+            if (this.content && this.content.parent && this.hierarchyMapData && this.hierarchyMapData[this.content.parent]) {
+                const parentData = this.hierarchyMapData[this.content.parent];
+                let completedLeafNodes = [];
+                parentData.leafNodes.forEach((_ele) => {
+                    if (this.hierarchyMapData && this.hierarchyMapData[_ele]) {
+                        const childData = this.hierarchyMapData[_ele];
+                        if (childData && childData.completionStatus === 2) {
+                            completedLeafNodes.push(childData);
+                        }
+                    }
+                });
+                return completedLeafNodes.length >= parentData.leafNodesCount - 1;
+            }
+            return false;
+        }
+        return true;
+    }
+    computeResourceLink() {
+        if (this.content) {
+            let mimeType = '';
+            if (this.content && this.content.courseCategory === 'Pre Enrolment Assessment' &&
+                this.content.mimeType === 'application/vnd.ekstep.content-collection') {
+                mimeType = 'application/vnd.sunbird.questionset';
+                this.content.mimeType = NsContent.EMimeTypes.FINAL_ASSESSMENT;
+            }
+            else {
+                mimeType = this.content.mimeType;
+            }
+            const selectedLanguage = this.mlCourse ? this.contentLangSvc.getSelectedLanguage(this.mlCourse) : undefined;
+            return viewerRouteGenerator(this.content.identifier, mimeType, this.baseContentReadData?.identifier || this.rootId, this.baseContentReadData?.contentType || this.rootContentType, this.forPreview, this.content.primaryCategory, this.batchId, this.content?.name || this.baseContentReadData?.name, (selectedLanguage ? selectedLanguage.langId : null), (selectedLanguage ? selectedLanguage.identifier : null));
+        }
+        return { url: '', queryParams: {} };
+    }
+    computeIsMilestoneLocked() {
+        // Only apply milestone locking for Learning Pathway content
+        if (!this.baseContentReadData || this.baseContentReadData.courseCategory !== 'Learning Pathway') {
+            return false;
+        }
+        if (!this.content) {
+            return false;
+        }
+        // Check if current content is a Milestone
+        if (!this._cachedIsMilestone && !this.computeIsMilestone()) {
+            return false;
+        }
+        // Check if hashmap has pre-computed locking status (preferred - computed by service)
+        const hashData = this.hierarchyMapData && this.hierarchyMapData[this.content.identifier];
+        console.log(`computeIsMilestoneLocked for ${this.content.identifier} (${this.content.name}):`, {
+            hashData,
+            computedIsLocked: hashData?.computedIsLocked,
+            contentIsLocked: this.content.isLocked
+        });
+        if (hashData && hashData.computedIsLocked !== undefined) {
+            return hashData.computedIsLocked;
+        }
+        // If milestone has isLocked flag explicitly set to false, it's unlocked
+        if (this.content.isLocked === false) {
+            return false;
+        }
+        // Fallback: All milestones are locked by default until computed otherwise
+        // This ensures proper locking until the hashmap is updated with progress
+        return true;
+    }
+    computeIsParentMilestoneLocked() {
+        if (this.parentMilestoneLocked) {
+            return true;
+        }
+        if (!this.baseContentReadData || this.baseContentReadData.courseCategory !== 'Learning Pathway') {
+            return false;
+        }
+        if (!this.content || !this.hierarchyMapData) {
+            return false;
+        }
+        // Check hashmap for pre-computed value
+        const hashData = this.hierarchyMapData[this.content.identifier];
+        if (hashData && hashData.isParentMilestoneLocked !== undefined) {
+            return hashData.isParentMilestoneLocked;
+        }
+        // Traverse up the hierarchy to find if any ancestor is a locked Milestone
+        let currentParentId = this.content.parent;
+        const maxDepth = 5;
+        let depth = 0;
+        while (currentParentId && depth < maxDepth) {
+            const parentData = this.hierarchyMapData[currentParentId];
+            if (parentData) {
+                if ((parentData.isMilestone || parentData.primaryCategory === 'Milestone' || parentData.courseCategory === 'Milestone') &&
+                    (parentData.computedIsLocked || parentData.isLocked)) {
+                    return true;
+                }
+                currentParentId = parentData.parent;
+            }
+            else {
+                break;
+            }
+            depth++;
+        }
+        return false;
+    }
     // FOR RIGHT SIDE RESOURCE SCROLL ON TOC PAGE
     resourceScroll() {
         this.pageScrollSubscription = this.appTocSvc.updatePageScroll.subscribe((value) => {
@@ -5673,6 +6161,7 @@ class AppTocContentCardV2Component {
         this.appTocSvc.getPageScroll.next(true);
     }
     ngOnChanges(changes) {
+        let shouldRecomputeCache = false;
         for (const property in changes) {
             if (property === 'expandAll') {
                 this.viewChildren = this.expandAll;
@@ -5699,8 +6188,19 @@ class AppTocContentCardV2Component {
                     if (this.content) {
                         this.updateChildParentMap(this.content.identifier);
                     }
+                    shouldRecomputeCache = true;
                 }
             }
+            // Recompute cache when critical inputs change
+            if (property === 'content' || property === 'baseContentReadData' ||
+                property === 'batchId' || property === 'forPreview' ||
+                property === 'parentMilestoneLocked' || property === 'mlCourse') {
+                shouldRecomputeCache = true;
+            }
+        }
+        // Recompute all cached properties if needed
+        if (shouldRecomputeCache) {
+            this.computeAllCachedProperties();
         }
         // console.log('pre assessment content---', this.content)
         // console.log('this.hierarchyMapData---', this.hierarchyMapData)
@@ -5712,12 +6212,18 @@ class AppTocContentCardV2Component {
         return content.viewChildren;
     }
     get isCollection() {
+        if (this._cacheInitialized) {
+            return this._cachedIsCollection;
+        }
         if (this.content) {
             return this.content.mimeType === NsContent.EMimeTypes.COLLECTION;
         }
         return false;
     }
     get isModule() {
+        if (this._cacheInitialized) {
+            return this._cachedIsModule;
+        }
         if (this.content) {
             return this.content.primaryCategory === NsContent.EPrimaryCategory.MODULE;
         }
@@ -5752,33 +6258,16 @@ class AppTocContentCardV2Component {
         return false;
     }
     get isResource() {
-        if (this.content) {
-            return (this.content.primaryCategory === NsContent.EPrimaryCategory.RESOURCE
-                // || this.content.primaryCategory === NsContent.EPrimaryCategory.KNOWLEDGE_ARTIFACT
-                || this.content.primaryCategory === NsContent.EPrimaryCategory.PRACTICE_RESOURCE
-                || this.content.primaryCategory === NsContent.EPrimaryCategory.FINAL_ASSESSMENT
-                || this.content.primaryCategory === NsContent.EPrimaryCategory.COMP_ASSESSMENT);
+        if (this._cacheInitialized) {
+            return this._cachedIsResource;
         }
-        return false;
+        return this.computeIsResource();
     }
     get resourceLink() {
-        if (this.content) {
-            let mimeType = '';
-            if (this.content && this.content.courseCategory === 'Pre Enrolment Assessment' &&
-                this.content.mimeType === 'application/vnd.ekstep.content-collection') {
-                mimeType = 'application/vnd.sunbird.questionset';
-                this.content.mimeType = NsContent.EMimeTypes.FINAL_ASSESSMENT;
-            }
-            else {
-                mimeType = this.content.mimeType;
-            }
-            let selectedLanguage = this.mlCourse ? this.contentLangSvc.getSelectedLanguage(this.mlCourse) : undefined;
-            let url = viewerRouteGenerator(this.content.identifier, mimeType, this.baseContentReadData?.identifier || this.rootId, this.baseContentReadData?.contentType || this.rootContentType, this.forPreview, this.content.primaryCategory, this.batchId, this.content?.name || this.baseContentReadData?.name, (selectedLanguage ? selectedLanguage.langId : null), (selectedLanguage ? selectedLanguage.identifier : null));
-            /* tslint:disable-next-line */
-            // console.log(this.content.identifier, '------', url,'=====> content card url link <========')
-            return url;
+        if (this._cacheInitialized) {
+            return this._cachedResourceLink;
         }
-        return { url: '', queryParams: {} };
+        return this.computeResourceLink();
     }
     progressColor() {
         // if (this.currentProgress <= 30) {
@@ -6031,38 +6520,125 @@ class AppTocContentCardV2Component {
         }
     }
     get checkForCuratedProgram() {
-        if (this.content && this.content.parent && this.hierarchyMapData && this.hierarchyMapData[this.content.parent]) {
-            let parentData = this.hierarchyMapData[this.content.parent];
-            return parentData && parentData.primaryCategory === NsContent.EPrimaryCategory.CURATED_PROGRAM &&
-                parentData.compatibilityLevel >= 5 &&
-                parentData.contextLockingType === NsContent.EContextLockingType.COURSE_ASSESSMENT_ONLY;
+        if (this._cacheInitialized) {
+            return this._cachedCheckForCuratedProgram;
         }
-        return false;
+        return this.computeCheckForCuratedProgram();
     }
     get isContentUnlocked() {
-        if (this.checkForCuratedProgram) {
-            if (this.content && this.content.parent && this.hierarchyMapData && this.hierarchyMapData[this.content.parent]) {
-                let parentData = this.hierarchyMapData[this.content.parent];
-                let completedLeafNodes = [];
-                parentData.leafNodes.forEach((_ele) => {
-                    if (this.hierarchyMapData && this.hierarchyMapData[_ele]) {
-                        let childData = this.hierarchyMapData[_ele];
-                        if (childData && childData.completionStatus === 2) {
-                            completedLeafNodes.push(childData);
-                        }
-                    }
-                });
-                if (completedLeafNodes.length >= parentData.leafNodesCount - 1) {
-                    return true;
+        if (this._cacheInitialized) {
+            return this._cachedIsContentUnlocked;
+        }
+        return this.computeIsContentUnlocked();
+    }
+    get isParentMilestoneLocked() {
+        if (this._cacheInitialized) {
+            return this._cachedIsParentMilestoneLocked;
+        }
+        return this.computeIsParentMilestoneLocked();
+    }
+    get isMilestoneLocked() {
+        if (this._cacheInitialized) {
+            return this._cachedIsMilestoneLocked;
+        }
+        return this.computeIsMilestoneLocked();
+    }
+    /**
+     * Check if a milestone's mandatory courses and assessment are completed.
+     * Looks at the content hierarchy to find children of the milestone.
+     */
+    checkMilestoneContentCompletion(milestoneId) {
+        if (!this.baseContentReadData || !this.baseContentReadData.children || !this.hierarchyMapData) {
+            // Fallback: Try to find assessment completion in hashmap for this milestone
+            return this.checkMilestoneAssessmentCompletion(milestoneId);
+        }
+        // Find the milestone in the content hierarchy
+        const milestoneContent = this.findContentInHierarchy(this.baseContentReadData, milestoneId);
+        if (!milestoneContent || !milestoneContent.children) {
+            return this.checkMilestoneAssessmentCompletion(milestoneId);
+        }
+        // Check all mandatory courses and assessments
+        let allMandatoryComplete = true;
+        let hasAssessment = false;
+        let assessmentComplete = false;
+        milestoneContent.children.forEach((child) => {
+            const childData = this.hierarchyMapData[child.identifier];
+            const isAssessment = child.primaryCategory === 'Course Assessment' ||
+                child.courseCategory === 'Course Assessment' ||
+                child.primaryCategory === 'Final Assessment';
+            const isMandatory = child.mandatory === true || child.optionalReading !== true;
+            if (isAssessment) {
+                hasAssessment = true;
+                if (childData && (childData.completionStatus === 2 || childData.completionPercentage >= 100)) {
+                    assessmentComplete = true;
+                }
+            }
+            else if (isMandatory) {
+                // Check if mandatory content is completed
+                if (!childData || (childData.completionStatus !== 2 && childData.completionPercentage < 100)) {
+                    allMandatoryComplete = false;
+                }
+            }
+        });
+        console.log('Milestone content check:', { allMandatoryComplete, hasAssessment, assessmentComplete });
+        // Milestone is complete if assessment is complete (mandatory courses optional based on requirements)
+        return hasAssessment ? assessmentComplete : allMandatoryComplete;
+    }
+    /**
+     * Fallback: Check if enough assessments are completed to unlock this milestone.
+     * For milestone at index N, we need at least N completed assessments.
+     * E.g., For M2 (index 1), we need 1 completed assessment (M1's assessment)
+     *       For M3 (index 2), we need 2 completed assessments (M1's and M2's)
+     */
+    checkMilestoneAssessmentCompletion(milestoneId) {
+        if (!this.hierarchyMapData) {
+            return false;
+        }
+        // Extract milestone number from ID (M1 -> 1, M2 -> 2, etc.)
+        const milestoneNum = parseInt(milestoneId.replace(/\D/g, '')) || 0;
+        const requiredCompletedAssessments = milestoneNum - 1; // For M2, need 1; for M3, need 2
+        console.log(`Milestone ${milestoneId} (num: ${milestoneNum}) requires ${requiredCompletedAssessments} completed assessments`);
+        if (requiredCompletedAssessments <= 0) {
+            return true; // First milestone, no requirements
+        }
+        // Count completed Course Assessments that are INSIDE milestones (have a parent)
+        // Exclude pre-enrollment assessments at the root level (no parent or parent is Learning Pathway)
+        let completedMilestoneAssessmentCount = 0;
+        const learningPathwayId = this.baseContentReadData?.identifier;
+        for (const key of Object.keys(this.hierarchyMapData)) {
+            const item = this.hierarchyMapData[key];
+            // Check if it's a completed Course Assessment
+            if ((item.primaryCategory === 'Course Assessment' || item.courseCategory === 'Course Assessment') &&
+                (item.completionStatus === 2 || item.completionPercentage >= 100)) {
+                // Check if this assessment has a parent (meaning it's inside a course/milestone, not at root level)
+                // Also exclude if parent is the Learning Pathway itself (pre-enrollment assessment)
+                const hasParent = item.parent && item.parent !== learningPathwayId;
+                if (hasParent) {
+                    completedMilestoneAssessmentCount++;
+                    console.log(`Found completed MILESTONE assessment: ${key}`, item);
                 }
                 else {
-                    return false;
+                    console.log(`Skipping root-level/pre-enrollment assessment: ${key}`);
                 }
             }
         }
-        else {
-            return true;
+        console.log(`Total completed MILESTONE assessments: ${completedMilestoneAssessmentCount}, Required: ${requiredCompletedAssessments}`);
+        // If we have enough completed milestone assessments, unlock this milestone
+        return completedMilestoneAssessmentCount >= requiredCompletedAssessments;
+    }
+    findContentInHierarchy(content, identifier) {
+        if (!content)
+            return null;
+        if (content.identifier === identifier)
+            return content;
+        if (content.children) {
+            for (const child of content.children) {
+                const found = this.findContentInHierarchy(child, identifier);
+                if (found)
+                    return found;
+            }
         }
+        return null;
     }
     get computedQueryParams() {
         if (this.isAllowed && !this.forPreview && this.isEnabled) {
@@ -6073,6 +6649,29 @@ class AppTocContentCardV2Component {
         }
         return null;
     }
+    get isMilestone() {
+        if (this._cacheInitialized) {
+            return this._cachedIsMilestone;
+        }
+        return this.computeIsMilestone();
+    }
+    getMilestoneCompletedCount() {
+        if (!this.content || !this.hierarchyMapData) {
+            return 0;
+        }
+        const milestoneData = this.hierarchyMapData[this.content.identifier];
+        if (!milestoneData || !milestoneData.leafNodes) {
+            return 0;
+        }
+        let completedCount = 0;
+        milestoneData.leafNodes.forEach((leafId) => {
+            const leafData = this.hierarchyMapData[leafId];
+            if (leafData && leafData.completionStatus === 2) {
+                completedCount++;
+            }
+        });
+        return completedCount;
+    }
     shouldShowDownloadButton(content) {
         if (!content) {
             return false;
@@ -6111,7 +6710,7 @@ class AppTocContentCardV2Component {
         console.log('baseContent', this.baseContentReadData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardV2Component, deps: [{ token: i2$1.EventService }, { token: i1$4.MatLegacyDialog }, { token: i0.Renderer2 }, { token: CertificateService }, { token: AppTocService }, { token: i5.ContentLanguageService }, { token: ResourceDownloadHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId", componentName: "componentName", index: "index", pathSet: "pathSet", expandActive: "expandActive", hierarchyMapData: "hierarchyMapData", batchData: "batchData", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", mlCourse: "mlCourse" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n    <ng-container *ngIf=\"isCollection && !isModule\">\n        <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isCollection && isModule\">\n        <ng-container *ngIf=\"content?.moduleResourseCount\">\n            <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"isResource\" class=\"resource-container\"\n        [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n        <div class=\"resource flex  sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n            [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <a class=\"width-expand\"\n                [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked) ? true : null\"\n                [ngClass]=\"{'ml-3': isEnrolled}\"\n                [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                [queryParams]=\"(isAllowed && !forPreview && isEnabled)  ? resourceLink.queryParams : null\">\n                <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                            {{ content?.name | truncate:50 }}\n\n                        </p>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container *ngIf=\"isModule && isEnrolled\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\">\n                                {{index}}. {{ content?.name | truncate:50 }}\n                            </p>\n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .resource{padding:16px 16px 16px 0}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px}.lock-icon{color:#f3962f}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: i1$5.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId", componentName: "componentName", index: "index", pathSet: "pathSet", expandActive: "expandActive", hierarchyMapData: "hierarchyMapData", batchData: "batchData", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", mlCourse: "mlCourse", parentMilestoneLocked: "parentMilestoneLocked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n    <ng-container *ngIf=\"isCollection && !isModule\">\n        <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isCollection && isModule\">\n        <ng-container *ngIf=\"content?.moduleResourseCount\">\n            <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"isResource\" class=\"resource-container\"\n        [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n        <div class=\"resource flex  sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n            [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled  && !isMilestoneLocked && !isParentMilestoneLocked\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <a class=\"width-expand\"\n                [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n                [ngClass]=\"{'ml-3': isEnrolled}\"\n                [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n                [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked)  ? resourceLink.queryParams : null\">\n                <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                            {{ content?.name | truncate:50 }}\n\n                        </p>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container\n                                *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n                                class=\"lock-icon mr-2 margin-bottom-xxs\">\n                            <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\">\n                                <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n                                <ng-container *ngIf=\"isMilestone\">\n                                    <span *ngIf=\"isMilestoneLocked\" class=\"locked-text ml-2\">Locked</span>\n                                </ng-container>\n                                <span *ngIf=\"content?.isMandatory\"\n                                    class=\"mandatory-text mat-caption ml-2\">Mandatory</span>\n                            </p>\n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <!-- Milestone Badge -->\n                        <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2\">\n                            <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n                        </div>\n                        <!-- Milestone Description (3 lines with ellipsis) -->\n                        <p *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\">\n                            {{ content?.description }}\n                        </p>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                        <!-- Milestone Completion Progress -->\n                        <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2\">\n                            <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n                                {{content?.leafNodesCount || 0}} completed</span>\n                        </div>\n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .resource{padding:16px 16px 16px 0}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px}.lock-icon{color:#f3962f}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#e8f4fd;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: i1$5.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [
             trigger('panelInOut', [
                 transition('void => *', [
                     style({ transform: 'translateY(-10%)', opacity: '0' }),
@@ -6135,7 +6734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 animate(200, style({ transform: 'translateY(-10%)', opacity: '0' }))
                             ])
                         ])
-                    ], template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n    <ng-container *ngIf=\"isCollection && !isModule\">\n        <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isCollection && isModule\">\n        <ng-container *ngIf=\"content?.moduleResourseCount\">\n            <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"isResource\" class=\"resource-container\"\n        [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n        <div class=\"resource flex  sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n            [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <a class=\"width-expand\"\n                [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked) ? true : null\"\n                [ngClass]=\"{'ml-3': isEnrolled}\"\n                [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                [queryParams]=\"(isAllowed && !forPreview && isEnabled)  ? resourceLink.queryParams : null\">\n                <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                            {{ content?.name | truncate:50 }}\n\n                        </p>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container *ngIf=\"isModule && isEnrolled\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\">\n                                {{index}}. {{ content?.name | truncate:50 }}\n                            </p>\n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .resource{padding:16px 16px 16px 0}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px}.lock-icon{color:#f3962f}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}\n"] }]
+                    ], template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n    <ng-container *ngIf=\"isCollection && !isModule\">\n        <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isCollection && isModule\">\n        <ng-container *ngIf=\"content?.moduleResourseCount\">\n            <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"isResource\" class=\"resource-container\"\n        [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n        <div class=\"resource flex  sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n            [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled  && !isMilestoneLocked && !isParentMilestoneLocked\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <a class=\"width-expand\"\n                [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n                [ngClass]=\"{'ml-3': isEnrolled}\"\n                [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n                [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked)  ? resourceLink.queryParams : null\">\n                <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                            {{ content?.name | truncate:50 }}\n\n                        </p>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container\n                                *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n                                class=\"lock-icon mr-2 margin-bottom-xxs\">\n                            <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\">\n                                <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n                                <ng-container *ngIf=\"isMilestone\">\n                                    <span *ngIf=\"isMilestoneLocked\" class=\"locked-text ml-2\">Locked</span>\n                                </ng-container>\n                                <span *ngIf=\"content?.isMandatory\"\n                                    class=\"mandatory-text mat-caption ml-2\">Mandatory</span>\n                            </p>\n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <!-- Milestone Badge -->\n                        <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2\">\n                            <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n                        </div>\n                        <!-- Milestone Description (3 lines with ellipsis) -->\n                        <p *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\">\n                            {{ content?.description }}\n                        </p>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                        <!-- Milestone Completion Progress -->\n                        <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2\">\n                            <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n                                {{content?.leafNodesCount || 0}} completed</span>\n                        </div>\n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .resource{padding:16px 16px 16px 0}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px}.lock-icon{color:#f3962f}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#e8f4fd;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$1.EventService }, { type: i1$4.MatLegacyDialog }, { type: i0.Renderer2 }, { type: CertificateService }, { type: AppTocService }, { type: i5.ContentLanguageService }, { type: ResourceDownloadHelperService }]; }, propDecorators: { content: [{
                 type: Input
             }], expandAll: [{
@@ -6166,6 +6765,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], mlCourse: [{
                 type: Input
+            }], parentMilestoneLocked: [{
+                type: Input
             }] } });
 
 class AppTocSessionCardNewComponent {
@@ -6541,11 +7142,11 @@ class AppTocContentComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: AppTocService }, { token: i2$1.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentComponent, selector: "ws-widget-app-toc-content", inputs: { batchId: "batchId", content: "content", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData", skeletonLoader: "skeletonLoader", tocStructure: "tocStructure", config: "config", hierarchyMapData: "hierarchyMapData", pathSet: "pathSet", componentName: "componentName", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", contentReadData: "contentReadData" }, usesOnChanges: true, ngImport: i0, template: "<div>\n    <!-- Milestone / Learning Path UI -->\n    <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n        <ng-container *ngIf=\"content?.children?.length>3; else fallbackMilestones\">\n            <ul class=\"milestone-list\">\n                <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n                    [class.completed]=\"m?.completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n                        <img *ngIf=\"m?.completed\" src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                        <span *ngIf=\"!m?.completed\" class=\"milestone-index\">{{ i + 1 }}</span>\n                    </div>\n                    <div class=\"milestone-label\">{{ m?.name }}</div>\n                </li>\n            </ul>\n        </ng-container>\n        <ng-template #fallbackMilestones>\n            <ul class=\"milestone-list\">\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">Pre Assessment</div>\n                </li>\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n                        <span class=\"milestone-index\">4</span>\n                    </div>\n                    <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n</div>\n<div class=\"bggrey\">\n    <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n        <div class=\"main-container flex flex-col gap-4\">\n            <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <div class=\"padding-left-m flex gap-4 tab-list\" >\n                    <ng-container *ngFor=\"let type of typesOfContent\">  \n                        <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\" [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n                            <span>{{type.name}}</span>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\" [rootContentType]=\"contextPath\"  [batchId]=\"batchId\" [config]=\"config\"  [content]=\"content\">\n                </ws-widget-app-app-toc-sessions-new>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <!-- {{pathSet|json}} -->\n    <ng-template #contentBlock>\n        <ng-container *ngIf=\"!contentLoader\">\n            <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n                <div class=\"content-card \" *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\" \n                [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                    <!-- {{card|json}} -->\n                    <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\" [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n                </div>\n            </ng-container>\n            <ng-template #noChildren>                \n                <div *ngIf=\"!isPlayable\"\n                    class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\"\n                   >\n                    The preview for this type of content is unavailable. Please click on Start button above to view.\n                </div>\n                <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n            </ng-template>\n        </ng-container>\n    \n        <ng-container *ngIf=\"contentLoader\">\n            <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n        </ng-container>\n    </ng-template>\n    <div *ngIf=\"isPreAssessment\">\n            <div class=\"content-card \" *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\" \n            [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                <!-- {{card|json}} -->\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\" [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n            </div>\n    </div>\n</div>\n", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:24px 16px 32px;background:transparent}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;padding:0 16px;gap:12px}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;max-width:140px;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse"] }, { kind: "component", type: AppTocSessionsNewComponent, selector: "ws-widget-app-app-toc-sessions-new", inputs: ["batchData", "content", "forPreview", "config", "batchId", "rootId", "rootContentType", "pathSet"] }, { kind: "component", type: AppTocContentCardV2SkeletonComponent, selector: "ws-widget-app-toc-content-card-v2-skeleton" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentComponent, selector: "ws-widget-app-toc-content", inputs: { batchId: "batchId", content: "content", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData", skeletonLoader: "skeletonLoader", tocStructure: "tocStructure", config: "config", hierarchyMapData: "hierarchyMapData", pathSet: "pathSet", componentName: "componentName", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", contentReadData: "contentReadData" }, usesOnChanges: true, ngImport: i0, template: "<div>\n    <!-- Milestone / Learning Path UI -->\n    <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n        <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n            <ul class=\"milestone-list\">\n                <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n                    [class.completed]=\"m?.completionStatus === 2\" role=\"listitem\">\n                    <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n                        <img *ngIf=\"m?.completionStatus === 2\" src=\"assets/icons/toc/tick-orange.svg\"\n                            class=\"milestone-checkmark\" alt=\"Completed\" />\n                        <span *ngIf=\"m?.completionStatus !== 2\" class=\"milestone-index\">{{ i + 1 }}</span>\n                    </div>\n                    <div class=\"milestone-label\">{{ m?.name }}</div>\n                </li>\n            </ul>\n        </ng-container>\n        <ng-template #fallbackMilestones>\n            <ul class=\"milestone-list\">\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">Pre Assessment</div>\n                </li>\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n                        <span class=\"milestone-index\">4</span>\n                    </div>\n                    <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n</div>\n<div class=\"bggrey\">\n    <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n        <div class=\"main-container flex flex-col gap-4\">\n            <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <div class=\"padding-left-m flex gap-4 tab-list\">\n                    <ng-container *ngFor=\"let type of typesOfContent\">\n                        <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n                            [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n                            <span>{{type.name}}</span>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n                    [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n                </ws-widget-app-app-toc-sessions-new>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <!-- {{pathSet|json}} -->\n    <ng-template #contentBlock>\n        <ng-container *ngIf=\"!contentLoader\">\n            <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n                <div class=\"content-card \"\n                    *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n                    [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                    <!-- {{card|json}} -->\n                    <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                        [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                        [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n                        [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                        [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n                </div>\n            </ng-container>\n            <ng-template #noChildren>\n                <div *ngIf=\"!isPlayable\"\n                    class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n                    The preview for this type of content is unavailable. Please click on Start button above to view.\n                </div>\n                <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"contentLoader\">\n            <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n        </ng-container>\n    </ng-template>\n    <div *ngIf=\"isPreAssessment\">\n        <div class=\"content-card \"\n            *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n            [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n            <!-- {{card|json}} -->\n            <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n                [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n                [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n        </div>\n    </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:24px 16px 32px;background:transparent}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;padding:0 16px;gap:12px}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;max-width:140px;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "component", type: AppTocSessionsNewComponent, selector: "ws-widget-app-app-toc-sessions-new", inputs: ["batchData", "content", "forPreview", "config", "batchId", "rootId", "rootContentType", "pathSet"] }, { kind: "component", type: AppTocContentCardV2SkeletonComponent, selector: "ws-widget-app-toc-content-card-v2-skeleton" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ws-widget-app-toc-content', template: "<div>\n    <!-- Milestone / Learning Path UI -->\n    <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n        <ng-container *ngIf=\"content?.children?.length>3; else fallbackMilestones\">\n            <ul class=\"milestone-list\">\n                <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n                    [class.completed]=\"m?.completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n                        <img *ngIf=\"m?.completed\" src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                        <span *ngIf=\"!m?.completed\" class=\"milestone-index\">{{ i + 1 }}</span>\n                    </div>\n                    <div class=\"milestone-label\">{{ m?.name }}</div>\n                </li>\n            </ul>\n        </ng-container>\n        <ng-template #fallbackMilestones>\n            <ul class=\"milestone-list\">\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">Pre Assessment</div>\n                </li>\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n                        <span class=\"milestone-index\">4</span>\n                    </div>\n                    <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n</div>\n<div class=\"bggrey\">\n    <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n        <div class=\"main-container flex flex-col gap-4\">\n            <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <div class=\"padding-left-m flex gap-4 tab-list\" >\n                    <ng-container *ngFor=\"let type of typesOfContent\">  \n                        <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\" [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n                            <span>{{type.name}}</span>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\" [rootContentType]=\"contextPath\"  [batchId]=\"batchId\" [config]=\"config\"  [content]=\"content\">\n                </ws-widget-app-app-toc-sessions-new>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <!-- {{pathSet|json}} -->\n    <ng-template #contentBlock>\n        <ng-container *ngIf=\"!contentLoader\">\n            <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n                <div class=\"content-card \" *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\" \n                [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                    <!-- {{card|json}} -->\n                    <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\" [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n                </div>\n            </ng-container>\n            <ng-template #noChildren>                \n                <div *ngIf=\"!isPlayable\"\n                    class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\"\n                   >\n                    The preview for this type of content is unavailable. Please click on Start button above to view.\n                </div>\n                <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n            </ng-template>\n        </ng-container>\n    \n        <ng-container *ngIf=\"contentLoader\">\n            <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n        </ng-container>\n    </ng-template>\n    <div *ngIf=\"isPreAssessment\">\n            <div class=\"content-card \" *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\" \n            [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                <!-- {{card|json}} -->\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\" [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n            </div>\n    </div>\n</div>\n", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:24px 16px 32px;background:transparent}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;padding:0 16px;gap:12px}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;max-width:140px;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}\n"] }]
+            args: [{ selector: 'ws-widget-app-toc-content', template: "<div>\n    <!-- Milestone / Learning Path UI -->\n    <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n        <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n            <ul class=\"milestone-list\">\n                <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n                    [class.completed]=\"m?.completionStatus === 2\" role=\"listitem\">\n                    <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n                        <img *ngIf=\"m?.completionStatus === 2\" src=\"assets/icons/toc/tick-orange.svg\"\n                            class=\"milestone-checkmark\" alt=\"Completed\" />\n                        <span *ngIf=\"m?.completionStatus !== 2\" class=\"milestone-index\">{{ i + 1 }}</span>\n                    </div>\n                    <div class=\"milestone-label\">{{ m?.name }}</div>\n                </li>\n            </ul>\n        </ng-container>\n        <ng-template #fallbackMilestones>\n            <ul class=\"milestone-list\">\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">Pre Assessment</div>\n                </li>\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n                        <span class=\"milestone-index\">4</span>\n                    </div>\n                    <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n</div>\n<div class=\"bggrey\">\n    <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n        <div class=\"main-container flex flex-col gap-4\">\n            <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <div class=\"padding-left-m flex gap-4 tab-list\">\n                    <ng-container *ngFor=\"let type of typesOfContent\">\n                        <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n                            [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n                            <span>{{type.name}}</span>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n                    [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n                </ws-widget-app-app-toc-sessions-new>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <!-- {{pathSet|json}} -->\n    <ng-template #contentBlock>\n        <ng-container *ngIf=\"!contentLoader\">\n            <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n                <div class=\"content-card \"\n                    *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n                    [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                    <!-- {{card|json}} -->\n                    <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                        [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                        [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n                        [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                        [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n                </div>\n            </ng-container>\n            <ng-template #noChildren>\n                <div *ngIf=\"!isPlayable\"\n                    class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n                    The preview for this type of content is unavailable. Please click on Start button above to view.\n                </div>\n                <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"contentLoader\">\n            <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n        </ng-container>\n    </ng-template>\n    <div *ngIf=\"isPreAssessment\">\n        <div class=\"content-card \"\n            *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n            [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n            <!-- {{card|json}} -->\n            <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n                [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n                [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n        </div>\n    </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:24px 16px 32px;background:transparent}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;padding:0 16px;gap:12px}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;max-width:140px;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: AppTocService }, { type: i2$1.ConfigurationsService }]; }, propDecorators: { batchId: [{
                 type: Input
             }], content: [{
@@ -14088,41 +14689,223 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: i10$1.FormBuilder }, { type: AppTocService }, { type: i1$2.TranslateService }]; } });
 
 class AppTocV2Service {
-    constructor() { }
+    constructor(tocSvc) {
+        this.tocSvc = tocSvc;
+    }
     constructHeirarchyData(contentReadData) {
         let contentHeirarchy = { ...contentReadData };
+        let leafNodes = [];
+        if (contentHeirarchy['preliminaryAssessmentDetail'] && Object.keys(contentHeirarchy['preliminaryAssessmentDetail']).length > 0) {
+            contentHeirarchy['children'] = [];
+            // Set parent reference for preliminary assessment (pre-assessment)
+            contentHeirarchy['preliminaryAssessmentDetail'].parent = contentHeirarchy.identifier;
+            // Mark this as the pre-assessment for milestone locking logic
+            contentHeirarchy['preliminaryAssessmentDetail'].isPreAssessment = true;
+            contentHeirarchy['children'].push(contentHeirarchy['preliminaryAssessmentDetail']);
+            leafNodes.push(contentReadData?.preliminaryAssessment || contentReadData?.preliminaryAssessmentDetail?.identifier);
+        }
+        // Track milestone index for proper locking logic
+        // All milestones are locked by default - unlocking is computed based on progress
+        let milestoneIndex = 0;
         contentHeirarchy['milestones_v1'].forEach((milestone) => {
+            // All milestones are locked by default
+            // M1 unlocks when pre-assessment is completed
+            // M2+ unlock when previous milestone's mandatory content + assessment are completed
+            const shouldBeLocked = true;
             let mileStoneData = {
                 "identifier": milestone.id,
                 "description": milestone.description,
                 "mimeType": "application/vnd.ekstep.content-collection",
                 "duration": "3600",
-                "primaryCategory": "MileStone",
-                "courseCategory": "MileStone",
+                "primaryCategory": "Milestone",
+                "courseCategory": "Milestone",
                 "createdBy": "25311a4f-fa42-4cf7-882a-5e79198edfcb",
                 "name": milestone.name,
                 "contentType": "Course",
-                "isLocked": true,
-                "status": "Live"
+                "isLocked": shouldBeLocked,
+                "milestoneIndex": milestoneIndex,
+                "status": "Live",
+                "leafNodes": [],
+                // Pre-computed flags for performance optimization
+                "isMilestone": true,
+                "isCollection": true,
+                "isModule": false,
+                "isResource": false,
+                "isLearningPathway": false,
+                "parent": contentHeirarchy.identifier
             };
             mileStoneData['children'] = [];
-            mileStoneData['children'].push({
-                "name": "Final Assessment R418",
-                "contextCategory": "Final Program Assessment",
-                "identifier": "do_114478073205096448118489",
-                "description": "Final Assessment R418 description",
-                "compatibilityLevel": 6,
-                "primaryCategory": "Course Assessment",
-                "mimeType": "application/vnd.sunbird.questionset",
-                "objectType": "QuestionSet",
-                "status": "Review"
-            });
-            mileStoneData['children'] = [...mileStoneData['children'], ...milestone['courses']];
+            if (milestone?.courses && milestone?.courses?.length) {
+                milestone.courses.forEach((mileStoneCourse) => {
+                    // Set parent reference for courses inside milestone
+                    mileStoneCourse.parent = milestone.id;
+                    leafNodes = [...leafNodes, ...mileStoneCourse.leafNodes];
+                    mileStoneData['leafNodes'] = [...mileStoneData?.leafNodes, ...mileStoneCourse.leafNodes];
+                    this.tocSvc.checkModuleWiseData(mileStoneCourse);
+                });
+            }
+            if (milestone?.assessmentDetail) {
+                // Set parent reference for assessment inside milestone
+                milestone.assessmentDetail.parent = milestone.id;
+                leafNodes.push(milestone?.assessmentDetail?.identifier);
+                mileStoneData['leafNodes'] = [...mileStoneData?.leafNodes, milestone?.assessmentDetail?.identifier];
+                mileStoneData['children'].push(milestone?.assessmentDetail);
+            }
+            mileStoneData['children'] = [...milestone['courses'], ...mileStoneData['children']];
+            mileStoneData['leafNodesCount'] = mileStoneData['leafNodes'].length;
             contentHeirarchy['children'] = contentHeirarchy['children'] ? [...contentHeirarchy['children'], mileStoneData] : [mileStoneData];
+            milestoneIndex++;
         });
+        contentHeirarchy['leafNodes'] = [...leafNodes];
         return contentHeirarchy;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocV2Service, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    mapContentHierarchyProgressUpdate(contentHeirarchyData, enrollmentListData) {
+        if (contentHeirarchyData && contentHeirarchyData.children) {
+            let totalLeafNodes = 0;
+            let totalCompletedLeafNodes = 0;
+            contentHeirarchyData.children.forEach((child) => {
+                if (child.primaryCategory === 'Milestone') {
+                    this.updateMilestoneProgress(child, contentHeirarchyData?.identifier, enrollmentListData);
+                    totalLeafNodes += child.leafNodesCount || 0;
+                    totalCompletedLeafNodes += child.completedLeafNodesCount || 0;
+                }
+                else {
+                    // For pre-assessment and other root-level content
+                    const enrollment = this.findEnrollment(enrollmentListData, contentHeirarchyData?.identifier);
+                    this.updateNodeProgress(child, enrollment);
+                    console.log(`Pre-assessment progress updated: ${child.identifier} (${child.name}), Status: ${child.completionStatus}, Percentage: ${child.completionPercentage}`);
+                    const isCompleted = child.status === 2 || child.completionStatus === 2 || child.completionPercentage === 100;
+                    totalLeafNodes += child.leafNodesCount || 1;
+                    totalCompletedLeafNodes += isCompleted ? (child.leafNodesCount || 1) : 0;
+                }
+            });
+            if (totalLeafNodes > 0) {
+                contentHeirarchyData.completionPercentage = Math.round((totalCompletedLeafNodes / totalLeafNodes) * 100);
+                contentHeirarchyData.completionStatus = contentHeirarchyData.completionPercentage === 100 ? 2 : 1;
+            }
+        }
+        return contentHeirarchyData;
+    }
+    updateMilestoneProgress(milestone, parentContentIdentifier, enrollmentListData) {
+        let totalLeafNodes = 0;
+        let totalCompletedLeafNodes = 0;
+        let completedCourses = 0;
+        let totalCourses = 0;
+        if (milestone.children) {
+            milestone.children.forEach((child) => {
+                if (child.primaryCategory === 'Course') {
+                    totalCourses += 1;
+                    debugger;
+                    if (child?.identifier === "do_114482311476740096154") {
+                        debugger;
+                    }
+                    this.updateCourseProgress(child, parentContentIdentifier, enrollmentListData);
+                    // Check both status and completionStatus for completion
+                    if (child.status === 2 || child.completionStatus === 2 || child.completionPercentage >= 100) {
+                        completedCourses += 1;
+                    }
+                }
+                else {
+                    // For assessments and other content, try multiple enrollment sources
+                    // First try parent Learning Pathway enrollment
+                    let enrollment = this.findEnrollment(enrollmentListData, parentContentIdentifier);
+                    if (!enrollment) {
+                        // Try milestone enrollment
+                        enrollment = this.findEnrollment(enrollmentListData, milestone?.identifier);
+                    }
+                    this.updateNodeProgress(child, enrollment);
+                    console.log(`Assessment/Other progress updated: ${child.identifier} (${child.name}), Status: ${child.completionStatus}, Percentage: ${child.completionPercentage}`);
+                }
+                const leafNodes = child.leafNodesCount || 1;
+                totalLeafNodes += leafNodes;
+                // Check both status and completionStatus for completion
+                if (child.status === 2 || child.completionStatus === 2 || child.completionPercentage >= 100) {
+                    totalCompletedLeafNodes += leafNodes;
+                }
+            });
+        }
+        milestone.leafNodesCount = totalLeafNodes;
+        milestone.completedLeafNodesCount = totalCompletedLeafNodes;
+        milestone.totalCourses = totalCourses;
+        milestone.completedCourses = completedCourses;
+        if (totalLeafNodes > 0) {
+            milestone.completionPercentage = Math.round((totalCompletedLeafNodes / totalLeafNodes) * 100);
+            milestone.completionStatus = milestone.completionPercentage === 100 ? 2 : 1;
+            milestone.status = milestone.completionPercentage === 100 ? 2 : 1;
+        }
+        console.log(`Milestone ${milestone.identifier} (${milestone.name}) progress updated: ${totalCompletedLeafNodes}/${totalLeafNodes} = ${milestone.completionPercentage}%, status: ${milestone.status}, completionStatus: ${milestone.completionStatus}`);
+    }
+    updateNodeProgress(node, enrollment) {
+        const nodeEnrollData = enrollment?.contentList?.find((ele) => ele?.contentId === node.identifier);
+        if (enrollment && nodeEnrollData && nodeEnrollData.status < 2) {
+            node.completionPercentage = nodeEnrollData.completionPercentage || nodeEnrollData.progress || 0;
+            node.completionStatus = nodeEnrollData.status;
+        }
+        else if (enrollment && nodeEnrollData && nodeEnrollData.status === 2) {
+            node.completionPercentage = 100;
+            node.completionStatus = 2;
+        }
+        else {
+            node.completionPercentage = 0;
+            node.completionStatus = 0;
+        }
+    }
+    updateCourseProgress(course, parentContentIdentifier, enrollmentListData) {
+        console.log(`Updating course progress for ${course.identifier} (${course.name})`);
+        const enrollment = this.findEnrollment(enrollmentListData, course?.identifier);
+        console.log(`Course ${course.identifier} enrollment:`, enrollment);
+        if (enrollment?.completionPercentage === 100) {
+            // Enrollment shows 100% - mark course as complete
+            course.completionPercentage = 100;
+            course.completionStatus = 2;
+            course.status = 2;
+            console.log(`Course ${course.identifier} marked 100% complete from enrollment`);
+            this.tocSvc.mapCompletionChildPercentageProgram(course);
+        }
+        else if (enrollment && enrollment.completionPercentage > 0) {
+            // Enrollment has partial progress
+            course.completionPercentage = enrollment.completionPercentage || 0;
+            course.completionStatus = 1;
+            course.status = 1;
+            console.log(`Course ${course.identifier} has partial progress: ${course.completionPercentage}%`);
+            // Also update children
+            if (course.children && course.children.length > 0) {
+                course.children.forEach((child) => {
+                    this.updateNodeProgress(child, enrollment);
+                });
+            }
+        }
+        else {
+            if (course.children && course.children.length > 0) {
+                let totalLeafNodes = course.leafNodesCount || 0;
+                let totalCompleted = 0;
+                course.children.forEach((child) => {
+                    this.updateNodeProgress(child, enrollment);
+                    if (child.status === 2 || child.completionStatus === 2 || child.completionPercentage === 100) {
+                        totalCompleted += child.leafNodesCount || 1;
+                    }
+                });
+                // If it's a collection and doesn't have its own enrollment progress, calculate it
+                if (!enrollment || !course.completionPercentage || course.completionPercentage === 0) {
+                    if (!totalLeafNodes) {
+                        totalLeafNodes = course.children.reduce((acc, curr) => acc + (curr.leafNodesCount || 1), 0);
+                    }
+                    if (totalLeafNodes > 0) {
+                        course.completionPercentage = Math.round((totalCompleted / totalLeafNodes) * 100);
+                        course.completionStatus = course.completionPercentage === 100 ? 2 : (course.completionPercentage > 0 ? 1 : 0);
+                        course.status = course.completionStatus;
+                    }
+                }
+            }
+        }
+        console.log(`Course ${course.identifier} final: completionPercentage=${course.completionPercentage}, completionStatus=${course.completionStatus}, status=${course.status}`);
+    }
+    findEnrollment(enrollmentList, identifier) {
+        if (!enrollmentList || !enrollmentList.length)
+            return null;
+        return enrollmentList.find((el) => el.collectionId === identifier || el.contentId === identifier);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocV2Service, deps: [{ token: AppTocService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocV2Service, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocV2Service, decorators: [{
@@ -14130,7 +14913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: AppTocService }]; } });
 
 const EMAIL_PATTERN$1 = /^[a-zA-Z0-9]+[a-zA-Z0-9._-]*[a-zA-Z0-9]+@[a-zA-Z0-9]+([-a-zA-Z0-9]*[a-zA-Z0-9]+)?(\.[a-zA-Z0-9-]+)*\.[a-zA-Z]{2,4}$/;
 const MOBILE_PATTERN$1 = /^[0]?[6789]\d{9}$/;
@@ -18426,12 +19209,23 @@ class AppTocHomeV2Component {
                 }
                 this.autoEnrollCuratedProgram(NsContent.ECourseCategory.MODERATED_PROGRAM, moderatedBatchData);
             }
+            else if (this.content.courseCategory === NsContent.ECourseCategory.LEARNING_PATHWAY) {
+                this.autoEnrollLearningPathway();
+            }
             else {
                 this.autoAssignEnroll();
             }
         }
         this.contentViewEventForNetCore('enroll');
     }
+    autoEnrollLearningPathway() {
+        this.contentSvc.autoEnrollLP(this.content?.identifier).subscribe((res) => {
+            console.log('autoEnrollLearningPathway', res);
+            if (res) {
+                this.navigateToPlayerPage(res);
+            }
+        });
+    }
     autoEnrollCuratedProgram(programType, batchData) {
         if (!batchData) {
             this.enrollBtnLoading = false;
@@ -19885,9 +20679,17 @@ class AppTocHomeV2Component {
             return new Promise((resolve) => {
                 const content = this.baseContentReadData;
                 this.content = this.appTocV2Svc.constructHeirarchyData(content);
+                this.appTocV2Svc.mapContentHierarchyProgressUpdate(this.content, this.userEnrollmentList);
+                // Create hashmap and compute milestone locking after progress is updated
+                this.tocSvc.callHirarchyProgressHashmap(this.content);
+                // Compute milestone locking status with updated progress data
+                this.tocSvc.computeMilestoneLockingStatus();
+                // Sync content tree's isLocked with computed values
+                this.syncMilestoneLockStatus();
                 this.getOrgIdForShare();
                 this.getTocStructure();
-                console.log('content', this.content);
+                console.log('content after locking sync', this.content);
+                console.log('hashmap after locking', this.tocSvc.hashmap);
                 resolve(true);
                 return;
             });
@@ -19951,6 +20753,23 @@ class AppTocHomeV2Component {
             this.getLearningUrls();
         }
     }
+    /**
+     * Sync milestone isLocked property with computed locking status from hashmap
+     * This ensures the content tree reflects the actual lock status
+     */
+    syncMilestoneLockStatus() {
+        if (!this.content || !this.content.children)
+            return;
+        this.content.children.forEach((child) => {
+            if (child.primaryCategory === 'Milestone' && child.identifier) {
+                const hashData = this.tocSvc.hashmap[child.identifier];
+                if (hashData && hashData.computedIsLocked !== undefined) {
+                    child.isLocked = hashData.computedIsLocked;
+                    console.log(`Synced milestone ${child.identifier} (${child.name}) isLocked: ${child.isLocked}`);
+                }
+            }
+        });
+    }
     onLanguageSelect(lang) {
         // Check if the selected language is already set
         if (this.selectedLanguage && this.selectedLanguage.identifier === lang.identifier) {
@@ -20457,21 +21276,25 @@ class AppTocHomeV2Component {
     checkForCompletionSurveyTrigger() {
         if (this.content && this.contentReadData) {
             console.log('checkForSurveyTrigger this.content', this.contentReadData);
-            if ((this.content.completionStatus === 2 || this.content.completionPercentage === 100) && this.contentReadData.completionSurveyLink) {
-                const sID = this.contentReadData.completionSurveyLink.split('surveys/');
-                const surveyId = sID[1];
-                const courseId = this.contentReadData.identifier;
-                // Call API to see if survey is submitted or not
-                this.tocSvc.getApllicationsById(surveyId, courseId).subscribe((res) => {
-                    console.log('response of getApllicationsById', res);
-                    if (res.result.response && Object.keys(res.result.response).length > 0) {
-                        this.lockCertificate = false;
-                    }
-                    else {
-                        this.lockCertificate = true;
-                        this.openCompletionSurveyFormPopup();
-                    }
-                });
+            // check if completion survey is enabled and user has completed the course before 23rd DEC 2023 (release date of completion survey)
+            if (this.configSvc.instanceConfig && this.configSvc.instanceConfig.completionSurvey && this.configSvc.instanceConfig.completionSurvey.enabled &&
+                this.enrolledCourseData && this.enrolledCourseData && this.enrolledCourseData.completedOn >= this.configSvc.instanceConfig.completionSurvey.startDate) {
+                if ((this.content.completionStatus === 2 || this.content.completionPercentage === 100) && this.contentReadData.completionSurveyLink) {
+                    const sID = this.contentReadData.completionSurveyLink.split('surveys/');
+                    const surveyId = sID[1];
+                    const courseId = this.contentReadData.identifier;
+                    // Call API to see if survey is submitted or not
+                    this.tocSvc.getApllicationsById(surveyId, courseId).subscribe((res) => {
+                        console.log('response of getApllicationsById', res);
+                        if (res.result.response && Object.keys(res.result.response).length > 0) {
+                            this.lockCertificate = false;
+                        }
+                        else {
+                            this.lockCertificate = true;
+                            this.openCompletionSurveyFormPopup();
+                        }
+                    });
+                }
             }
         }
     }
@@ -20519,11 +21342,11 @@ class AppTocHomeV2Component {
         this.router.navigate([navigationUrl], { queryParams: queryParams });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeV2Component, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: WidgetContentService }, { token: AppTocService }, { token: i2$1.LoggerService }, { token: i2$1.ConfigurationsService }, { token: i1$6.DomSanitizer }, { token: i1$3.MatLegacySnackBar }, { token: i1$4.MatLegacyDialog }, { token: MobileAppsService }, { token: i2$1.UtilityService }, { token: i5.ContentLanguageService }, { token: ActionService }, { token: ViewerUtilService }, { token: RatingService }, { token: i2$1.TelemetryService }, { token: i1$2.TranslateService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.EventService }, { token: LoadCheckService }, { token: HandleClaimService }, { token: ResetRatingsService }, { token: TimerService }, { token: i2$1.WidgetEnrollService }, { token: i5.WidgetContentLibService }, { token: i2$1.DataTransferService }, { token: i19.MatSnackBar }, { token: i5.WidgetUserServiceLib }, { token: NetCoreService }, { token: AppTocV2Service }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeV2Component, selector: "ws-app-app-toc-home-v2", inputs: { forPreview: "forPreview" }, host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "menuElement", first: true, predicate: ["stickyMenu"], descendants: true, static: true }, { propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "bannerElem", first: true, predicate: ["bannerDetails"], descendants: true, static: true }, { propertyName: "contentSource", first: true, predicate: ["contentSource"], descendants: true }], ngImport: i0, template: "jhasggkasgkfgkjasgfjkgsajkgfjgasfjkgkg\n\n<ng-container *ngIf=\"courseID else noDataFound\">\n  <ng-template #enrollFunctionality>\n    <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n      <!-- Course block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n                    contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n        <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n                      !content?.artifactUrl?.length) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n          <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n            [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n            class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ translateLabels('resume', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </a>\n\n          <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n              }}</ng-container>\n          </button>\n\n          <!-- <div\n            *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n            <ng-container *ngIf=\"isAcbpClaim\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n            <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n          </div> -->\n\n          <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n            <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n          </div> -->\n\n          <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n            <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n          </div> -->\n        </ng-container>\n\n        <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n          <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE  && !enrollBtnLoading\">\n            <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n              (click)=\"handleEnrollment()\">\n              <ng-container>\n                {{ 'apptochome.enroll' | translate }}\n              </ng-container>\n            </a>\n            <!-- <ng-container *ngIf=\"isAcbpCourse\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n            <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n              <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n\n      <!-- PRogram & mandatory course block -->\n      <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n        <ng-container\n          *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n            <ng-container\n              *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n              <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{'apptochome.enroll' | translate}}\n                </ng-container>\n              </a>\n              <!-- <ng-container *ngIf=\"isAcbpCourse\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n                <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container> -->\n            </ng-container>\n            <ng-container *ngIf=\"!forPreview || isInIFrame\">\n              <ng-container\n                *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n                <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                  [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n                  (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                  [contentReadData]=\"contentReadData\">\n                </ws-app-toc-banner>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n            No Batches\n          </ng-container>\n          <ng-container\n            *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container\n              *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"isBatchInProgress &&\n                        ( actionBtnStatus === 'grant' &&\n                          !(isMobile && content?.isInIntranet) &&\n                          (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n                          (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n                        )\">\n            <a *ngIf=\"showStart.show && !isPostAssessment\"\n              [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n              [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                    translateLabels('resume', 'apptochome') :\n                    translateLabels('start', 'apptochome') }}\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"content?.completionPercentage === 100\">\n                {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n              </ng-container>\n            </a>\n            <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n                }}</ng-container>\n            </a>\n            <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n              <ng-container *ngIf=\"isAcbpClaim\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n            </div> -->\n            <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n              <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                  (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n            </div>\n            <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n              <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-container\n        *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n        <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n          [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n          [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n          class=\"flex action-button justify-center resume\">\n          <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n              {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                translateLabels('resume', 'apptochome') :\n                translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">\n            {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n            translateLabels('resume', 'apptochome') }}\n          </ng-container>\n        </a>\n      </ng-container>\n\n      <ng-container *ngIf=\"enrollBtnLoading\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n          [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n      </ng-container>\n\n      <!-- Curated program block -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n        <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n          (click)=\"handleEnrollment()\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- STANDALONE_ASSESSMENT black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n          *ngIf=\"!forPreview || isInIFrame\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n        <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n          <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n          </span>\n        </ng-container>\n      </ng-container>\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n          {{getStartDate}}!</span>\n      </ng-container>\n\n      <!-- STANDALONE_ASSESSMENT enrolled black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <!-- BLENDED_PROGRAM block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n        <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n                      !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n          <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n            <p class=\"margin-remove-bottom font-bold\">\n              {{ 'apptochome.requestUnderReview' | translate }}\n            </p>\n          </div>\n        </ng-container>\n        <ng-container>\n          <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n            [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n            (click)=\"raiseTelemetryForPublic()\"\n            [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n            class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                  translateLabels('resume', 'apptochome') :\n                  translateLabels('start', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('start', 'apptochome') }}\n            </ng-container>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n        <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n          'apptochome.register' | translate }}</a>\n      </ng-container>\n\n    </div>\n  </ng-template>\n\n  <ng-template #progressFunctionality>\n    <div class=\"flex flex-row gap-4\">\n      <div class=\"flex-1\">\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"flex flex-row gap-4 text-sm\">\n            <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n            <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n          </div>\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n            [customClassName]=\"'content-progress'\">\n          </ws-widget-content-progress>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n        <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n          (click)=\"openFeedbackDialog(content)\">\n          <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n          <ng-container *ngIf=\"!userRating\">\n            <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n          </ng-container>\n          <ng-container *ngIf=\"userRating\">\n            <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n          </ng-container>\n        </button>\n      </ng-container>\n    </div>\n  </ng-template>\n\n  <div class=\"toc-banner\">\n    <div class=\"flex flex-row gap-6 fixed-width\">\n      <div class=\"banner-details toc-content\" #bannerDetails>\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"flex items-center justify-between gap-4\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-row gap-2\">\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                  <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                  <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                  <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                </div>\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n                  *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n                  <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n                  <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                    'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n                </div>\n                <!-- Knowledge level block for search box -->\n                  <!-- {{content?.difficultyLevel}} -->\n            <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container\">\n              <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\" class=\"level-badge beginner\">\n                <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                  <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\"/>\n                  <path 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\" fill=\"#49C951\"/>\n                </svg>\n                {{contentReadData?.difficultyLevel}}\n              </span>\n              <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\" class=\"level-badge intermediate\">\n                <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                  <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\"/>\n                  <path 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\" fill=\"#1B4CA1\"/>\n                  <path 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\" fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\"/>\n                </svg>\n                {{contentReadData?.difficultyLevel}}\n              </span>\n              <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\" class=\"level-badge advanced\">\n                <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                  <g clip-path=\"url(#clip0)\">\n                    <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\"/>\n                    <path 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\" fill=\"#FF8268\"/>\n                    <path 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\" fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\"/>\n                    <path 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\" fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\"/>\n                  </g>\n                  <defs>\n                    <clipPath id=\"clip0\">\n                      <rect width=\"16\" height=\"16\" fill=\"white\"/>\n                    </clipPath>\n                  </defs>\n                </svg>\n                {{contentReadData?.difficultyLevel}}\n              </span>\n            </div>\n\n                <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n                  <div class=\"flex items-center due-tag text-xs leading-3\"\n                    [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n                    {{ 'common.dueBy' | translate }} - &nbsp;<span class=\"font-bold\">{{ cbPlanEndDate | date: 'd MMM,y'}}</span>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n\n            <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n              <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-2\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n                handleCapitalize(contentReadData?.name) }}</div>\n              <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n                | translate }} {{ contentReadData?.source }}</div>\n            </ng-container>\n          </div>\n\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n              <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n                (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                  <mat-icon class=\"nodtranslate\">grade</mat-icon>\n                  <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                </div>\n                <div class=\"separator\"></div>\n                <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n                </div>\n              </div>\n              <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                <div class=\"most-enrolled-chip text-xs leading-3\">\n                  <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n                    translate }}</span>\n                  <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n                    translate }}</span>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n            <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n              contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n          </ng-container>\n          <ng-container>\n            <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n              <mat-chip-list class=\"lang-chips\">\n                <!-- Show up to 6 chips -->\n                <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n                  <mat-chip class=\"matchip-custom\" selectable=\"true\"\n                    [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n                    {{ lang.name || lang.value }}\n                  </mat-chip>\n                </ng-container>\n\n                <!-- \"More\" chip if there are more than 6 languages -->\n                <ng-container *ngIf=\"languageList.length > 5\">\n                  <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n                    [selected]=\"isSelectedInMoreDropdown()\">\n                    More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n                  </mat-chip>\n                  <mat-menu #moreLanguagesMenu=\"matMenu\">\n                    <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n                      <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n                        [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n                        {{ lang.displayName || lang.name || lang }}\n                      </mat-radio-button>\n                    </mat-radio-group>\n                  </mat-menu>\n                </ng-container>\n              </mat-chip-list>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex flex-row gap-6 fixed-width\">\n    <div class=\"toc-content\">\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n        selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n        selectedBatchData?.content[0]?.enrollmentEndDate\">\n        <div class=\"location-details mt-6\">\n          <div class=\"flex items-center gap-4 pb-3\">\n            <mat-icon class=\"location-icon nodtranslate\">\n              location_on\n            </mat-icon>\n            <div class=\"loc-desc\">\n              {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n            </div>\n          </div>\n          <div class=\"flex items-center gap-4\">\n            <mat-icon class=\"event-icon nodtranslate\">\n              event</mat-icon>\n            <div class=\"loc-desc\">\n              Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n        <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n          <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n            <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n            <div class=\"relevent-info\">\n              <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n                }}</span>\n              <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n                }}</span>\n            </div>\n            <div class=\"flex flex-middle relevant-container\">\n              <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n                (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n                (click)=\"handleAcceptRelevent()\">\n                <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n                  alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n                <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n              </div>\n\n              <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n                <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n                <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <div class=\"pb-4 lg:py-4\"\n        *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n        <!-- Overall progress functionality -->\n        <div class=\"mobile-progress\">\n          <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n        </div>\n        <!-- Overall progress functionality -->\n        <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n          [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n          [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n          [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n          [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n          [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n          [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n          [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n          (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n        <div class=\"mob-tip-for-learner\">\n          <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n            <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n          </div>\n        </div>\n      </div>\n    </div>\n\n\n    <div class=\"right-container\">\n\n      <!-- if needed sticky of right container add this to below div => #rightContainer -->\n      <div class=\"right-content\">\n        <div class=\"right-content-inner\">\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n              [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-col image-div\"\n              [ngStyle]=\"{\n        'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n              [ngClass]=\"{'image-backdrop': scrolled}\">\n              <div class=\"flex flex-col justify-between text-container\">\n                <div class=\"flex items-center gap-4 justify-between\"\n                  [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n                  <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n                    <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                    <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                  </div>\n                  <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n                    *ngIf=\"canShare && !forPreview\">\n                    <mat-icon class=\"nodtranslate\">share</mat-icon>\n                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                  <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n                  </div>\n                  <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n                    [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n                    'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n\n          <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n\n            <div class=\"flex flex-col gap-4\"\n              *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n              <div class=\"flex flex-row gap-3 justify-around\">\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n                    || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n                </div>\n              </div>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n                <a class=\"flex action-button enroll-btn justify-center resume\"\n                  *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n                  <ng-container>\n                    {{ 'apptochome.preEnroll' | translate }}\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n                <a class=\"flex preenrolldone-btn justify-center resume\">\n                  <ng-container>\n                    {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n                      class=\"tick-icon\">\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n                <div class=\"flex flex-col gap-6 batch-timer\">\n                  <div class=\"flex flex-row\">\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                    <div class=\"flex\">\n                      <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                    </div>\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                  </div>\n                  <div class=\"flex flex-row gap-4 justify-center\">\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                      </div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n                <ng-container *ngIf=\"!mobile1200 && (\n         !contentReadData?.preEnrolmentResources?.length ||\n         (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus ||  !preAssessmentRequiredFlag))\n       )\">\n\n                  <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                    [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n                    [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                    [contentReadData]=\"contentReadData\">\n                  </ws-app-toc-banner>\n                </ng-container>\n              </ng-container>\n            </div>\n\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>\n                  <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n                </div>\n                <div *ngIf=\"showBtn\">\n                  <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n                    {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n                </div>\n\n                <!-- Overall progress functionality -->\n                <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n                  <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n                </ng-container>\n                <!-- Overall progress functionality -->\n\n                <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n                <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n                <!-- </div> -->\n\n                <!-- <div *ngIf=\"resumeData && userRating\">\n                <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n              </div> -->\n\n                <ng-container\n                  *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n                  <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n                </ng-container>\n              </div>\n\n              <div class=\"karma-points-div\">\n                <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n                  [content]=\"content\"\n                  [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-wrap gap-6\">\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n                [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n            </ng-container>\n          </div>\n\n          <div class=\"flex flex-col gap-8 p-5\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                  [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                  <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                    [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                  <div class=\"flex flex-col gap-2\">\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\"\n                *ngIf=\"contentReadData?.source  && (contentCreatorData && contentCreatorData?.length)\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n                  <div class=\"flex provider-logo-div\">\n                    <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n                      src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                  </div>\n                  <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n                    (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n                    [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n                    {{ handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                  <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n                    handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n          <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n        </div>\n      </div>\n\n\n\n    </div>\n  </div>\n  <div class=\"mobile-enroll-div\"\n    [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n    <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n      <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n        <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n          [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n          [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n        </ws-app-toc-banner>\n      </div>\n    </ng-container>\n    <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n  </div>\n\n  <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n    (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n  <div\n    class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n    <div class=\"error-logo\">\n      <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n        The page you requested cannot be found\n      </div>\n    </div>\n    <!-- <div class=\"error-support\">\n      <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n      <div class=\"support-message\" >You might want to:</div>\n    </div> -->\n  </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n  <a (click)=\"raiseTelemetryForPublic($event)\"\n    [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n    [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n    class=\"flex action-button justify-center\">\n    {{'apptochome.view' | translate}}\n  </a>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n  <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n    <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n      [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n      <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n    </a>\n  </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ContentTocComponent, selector: "ws-widget-content-toc", inputs: ["content", "contentReadData", "initialRouteData", "changeTab", "baseContentReadData", "forPreview", "contentTabFlag", "resumeData", "batchData", "skeletonLoader", "tocStructure", "pathSet", "fromViewer", "hierarchyMapData", "condition", "kparray", "selectedBatchData", "config", "componentName", "isEnrolled", "playResourceId", "sideNavBarOpened", "languageList", "lockCertificate"], outputs: ["playResumeForAI", "enrollUserToAI", "trigerCompletionSurveyForm", "resumeContent"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "component", type: TipsForLearnerCardComponent, selector: "ws-widget-tips-for-learner-card", inputs: ["learnAdvisoryData"] }, { kind: "component", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: ["banners", "content", "resumeData", "analytics", "forPreview", "batchData", "userEnrollmentList", "contentReadData", "clickToShare"], outputs: ["withdrawOrEnroll", "programEnrollCall"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeV2Component, selector: "ws-app-app-toc-home-v2", inputs: { forPreview: "forPreview" }, host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "menuElement", first: true, predicate: ["stickyMenu"], descendants: true, static: true }, { propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "bannerElem", first: true, predicate: ["bannerDetails"], descendants: true, static: true }, { propertyName: "contentSource", first: true, predicate: ["contentSource"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n  <ng-template #enrollFunctionality>\n    <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n      <!-- Course block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n                    contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n        <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n                      !content?.artifactUrl?.length) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n          <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n            [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n            class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ translateLabels('resume', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </a>\n\n          <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n              }}</ng-container>\n          </button>\n\n          <!-- <div\n            *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n            <ng-container *ngIf=\"isAcbpClaim\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n            <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n          </div> -->\n\n          <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n            <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n          </div> -->\n\n          <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n            <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n          </div> -->\n        </ng-container>\n\n        <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n          <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE  && !enrollBtnLoading\">\n            <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n              (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n              <ng-container>\n                {{ 'apptochome.enroll' | translate }}\n              </ng-container>\n            </a>\n            <!-- <ng-container *ngIf=\"isAcbpCourse\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n            <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n              <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n\n      <!-- PRogram & mandatory course block -->\n      <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n        <ng-container\n          *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n            <ng-container\n              *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n              <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{'apptochome.enroll' | translate}}\n                </ng-container>\n              </a>\n              <!-- <ng-container *ngIf=\"isAcbpCourse\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n                <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container> -->\n            </ng-container>\n            <ng-container *ngIf=\"!forPreview || isInIFrame\">\n              <ng-container\n                *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n                <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                  [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n                  (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                  [contentReadData]=\"contentReadData\">\n                </ws-app-toc-banner>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n            No Batches\n          </ng-container>\n          <ng-container\n            *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container\n              *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"isBatchInProgress &&\n                        ( actionBtnStatus === 'grant' &&\n                          !(isMobile && content?.isInIntranet) &&\n                          (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n                          (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n                        )\">\n            <a *ngIf=\"showStart.show && !isPostAssessment\"\n              [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n              [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                    translateLabels('resume', 'apptochome') :\n                    translateLabels('start', 'apptochome') }}\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"content?.completionPercentage === 100\">\n                {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n              </ng-container>\n            </a>\n            <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n                }}</ng-container>\n            </a>\n            <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n              <ng-container *ngIf=\"isAcbpClaim\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n            </div> -->\n            <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n              <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                  (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n            </div>\n            <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n              <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-container\n        *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n        <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n          [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n          [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n          class=\"flex action-button justify-center resume\">\n          <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n              {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                translateLabels('resume', 'apptochome') :\n                translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">\n            {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n            translateLabels('resume', 'apptochome') }}\n          </ng-container>\n        </a>\n      </ng-container>\n\n      <ng-container *ngIf=\"enrollBtnLoading\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n          [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n      </ng-container>\n\n      <!-- Curated program block -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n        <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n          (click)=\"handleEnrollment()\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- STANDALONE_ASSESSMENT black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n          *ngIf=\"!forPreview || isInIFrame\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n        <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n          <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n          </span>\n        </ng-container>\n      </ng-container>\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n          {{getStartDate}}!</span>\n      </ng-container>\n\n      <!-- STANDALONE_ASSESSMENT enrolled black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <!-- BLENDED_PROGRAM block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n        <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n                      !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n          <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n            <p class=\"margin-remove-bottom font-bold\">\n              {{ 'apptochome.requestUnderReview' | translate }}\n            </p>\n          </div>\n        </ng-container>\n        <ng-container>\n          <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n            [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n            (click)=\"raiseTelemetryForPublic()\"\n            [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n            class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                  translateLabels('resume', 'apptochome') :\n                  translateLabels('start', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('start', 'apptochome') }}\n            </ng-container>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n        <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n          'apptochome.register' | translate }}</a>\n      </ng-container>\n\n    </div>\n  </ng-template>\n\n  <ng-template #progressFunctionality>\n    <div class=\"flex flex-row gap-4\">\n      <div class=\"flex-1\">\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"flex flex-row gap-4 text-sm\">\n            <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n            <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n          </div>\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n            [customClassName]=\"'content-progress'\">\n          </ws-widget-content-progress>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n        <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n          (click)=\"openFeedbackDialog(content)\">\n          <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n          <ng-container *ngIf=\"!userRating\">\n            <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n          </ng-container>\n          <ng-container *ngIf=\"userRating\">\n            <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n          </ng-container>\n        </button>\n      </ng-container>\n    </div>\n  </ng-template>\n\n  <div class=\"toc-banner\">\n    <div class=\"flex flex-row gap-6 fixed-width\">\n      <div class=\"banner-details toc-content\" #bannerDetails>\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"flex items-center justify-between gap-4\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-row gap-2\">\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                  <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                  <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                  <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                </div>\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n                  *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n                  <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n                  <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                    'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n                </div>\n                <!-- Knowledge level block for search box -->\n                <!-- {{content?.difficultyLevel}} -->\n                <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container\">\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n                    class=\"level-badge beginner\">\n                    <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                      <path\n                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                        fill=\"#49C951\" />\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n                    class=\"level-badge intermediate\">\n                    <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                      <path\n                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                        fill=\"#1B4CA1\" />\n                      <path\n                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n                    class=\"level-badge advanced\">\n                    <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <g clip-path=\"url(#clip0)\">\n                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                        <path\n                          d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                          fill=\"#FF8268\" />\n                        <path\n                          d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                          fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                        <path\n                          d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                          fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                      </g>\n                      <defs>\n                        <clipPath id=\"clip0\">\n                          <rect width=\"16\" height=\"16\" fill=\"white\" />\n                        </clipPath>\n                      </defs>\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                </div>\n\n                <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n                  <div class=\"flex items-center due-tag text-xs leading-3\"\n                    [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n                    {{ 'common.dueBy' | translate }} - &nbsp;<span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n                      MMM,y'}}</span>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n              <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n                (keydown)=\"navigateToNewVersion()\">\n                <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n              </div>\n            </ng-container>\n            <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n              <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-2\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n                handleCapitalize(contentReadData?.name) }}</div>\n              <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n                | translate }} {{ contentReadData?.source }}</div>\n            </ng-container>\n          </div>\n\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex gap-4 items-center\">\n              <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n                (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                  <mat-icon class=\"nodtranslate\">grade</mat-icon>\n                  <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                </div>\n                <div class=\"separator\"></div>\n                <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n                </div>\n              </div>\n              <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                <div class=\"most-enrolled-chip text-xs leading-3\">\n                  <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n                    translate }}</span>\n                  <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n                    translate }}</span>\n                </div>\n              </div>\n              <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n                <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n                  <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n                </div>\n                <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n                  <span>{{ 'apptoc.retired' | translate }}</span>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n            <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n              contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n          </ng-container>\n          <ng-container>\n            <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n              <mat-chip-list class=\"lang-chips\">\n                <!-- Show up to 6 chips -->\n                <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n                  <mat-chip class=\"matchip-custom\" selectable=\"true\"\n                    [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n                    {{ lang.name || lang.value }}\n                  </mat-chip>\n                </ng-container>\n\n                <!-- \"More\" chip if there are more than 6 languages -->\n                <ng-container *ngIf=\"languageList.length > 5\">\n                  <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n                    [selected]=\"isSelectedInMoreDropdown()\">\n                    More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n                  </mat-chip>\n                  <mat-menu #moreLanguagesMenu=\"matMenu\">\n                    <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n                      <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n                        [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n                        {{ lang.displayName || lang.name || lang }}\n                      </mat-radio-button>\n                    </mat-radio-group>\n                  </mat-menu>\n                </ng-container>\n              </mat-chip-list>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex flex-row gap-6 fixed-width\">\n    <div class=\"toc-content\">\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n        selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n        selectedBatchData?.content[0]?.enrollmentEndDate\">\n        <div class=\"location-details mt-6\">\n          <div class=\"flex items-center gap-4 pb-3\">\n            <mat-icon class=\"location-icon nodtranslate\">\n              location_on\n            </mat-icon>\n            <div class=\"loc-desc\">\n              {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n            </div>\n          </div>\n          <div class=\"flex items-center gap-4\">\n            <mat-icon class=\"event-icon nodtranslate\">\n              event</mat-icon>\n            <div class=\"loc-desc\">\n              Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n        <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n          <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n            <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n            <div class=\"relevent-info\">\n              <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n                }}</span>\n              <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n                }}</span>\n            </div>\n            <div class=\"flex flex-middle relevant-container\">\n              <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n                (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n                (click)=\"handleAcceptRelevent()\">\n                <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n                  alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n                <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n              </div>\n\n              <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n                <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n                <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <div class=\"pb-4 lg:py-4\"\n        *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n        <!-- Overall progress functionality -->\n        <div class=\"mobile-progress\">\n          <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n        </div>\n        <!-- Overall progress functionality -->\n        <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n          [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n          [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n          [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n          [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n          [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n          [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n          [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n          (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n        <div class=\"mob-tip-for-learner\">\n          <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n            <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n          </div>\n        </div>\n      </div>\n    </div>\n\n\n    <div class=\"right-container\">\n\n      <!-- if needed sticky of right container add this to below div => #rightContainer -->\n      <div class=\"right-content\">\n        <div class=\"right-content-inner\">\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n              [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-col image-div\"\n              [ngStyle]=\"{\n        'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n              [ngClass]=\"{'image-backdrop': scrolled}\">\n              <div class=\"flex flex-col justify-between text-container\">\n                <div class=\"flex items-center gap-4 justify-between\"\n                  [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n                  <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n                    <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                    <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                  </div>\n                  <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n                    *ngIf=\"canShare && !forPreview\">\n                    <mat-icon class=\"nodtranslate\">share</mat-icon>\n                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                  <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n                  </div>\n                  <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n                    [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n                    'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n\n          <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n            <div class=\"flex flex-col gap-1  cursor-pointer switch-version\"\n              *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n              (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n              <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n            </div>\n\n            <div class=\"flex flex-col gap-4\"\n              *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n              <div class=\"flex flex-row gap-3 justify-around\">\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n                    || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n                </div>\n              </div>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n                <a class=\"flex action-button enroll-btn justify-center resume\"\n                  *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n                  <ng-container>\n                    {{ 'apptochome.preEnroll' | translate }}\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n                <a class=\"flex preenrolldone-btn justify-center resume\">\n                  <ng-container>\n                    {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n                      class=\"tick-icon\">\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n                <div class=\"flex flex-col gap-6 batch-timer\">\n                  <div class=\"flex flex-row\">\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                    <div class=\"flex\">\n                      <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                    </div>\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                  </div>\n                  <div class=\"flex flex-row gap-4 justify-center\">\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                      </div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n                <ng-container *ngIf=\"!mobile1200 && (\n         !contentReadData?.preEnrolmentResources?.length ||\n         (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus ||  !preAssessmentRequiredFlag))\n       )\">\n\n                  <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                    [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n                    [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                    [contentReadData]=\"contentReadData\">\n                  </ws-app-toc-banner>\n                </ng-container>\n              </ng-container>\n            </div>\n\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>\n                  <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n                </div>\n                <div *ngIf=\"showBtn\">\n                  <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n                    {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n                </div>\n\n                <!-- Overall progress functionality -->\n                <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n                  <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n                </ng-container>\n                <!-- Overall progress functionality -->\n\n                <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n                <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n                <!-- </div> -->\n\n                <!-- <div *ngIf=\"resumeData && userRating\">\n                <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n              </div> -->\n\n                <ng-container\n                  *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n                  <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n                </ng-container>\n              </div>\n\n              <div class=\"karma-points-div\">\n                <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n                  [content]=\"content\"\n                  [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-wrap gap-6\">\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n                [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n            </ng-container>\n          </div>\n\n          <div class=\"flex flex-col gap-8 p-5\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                  [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                  <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                    [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                  <div class=\"flex flex-col gap-2\">\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\"\n                *ngIf=\"contentReadData?.source  && (contentCreatorData && contentCreatorData?.length)\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n                  <div class=\"flex provider-logo-div\">\n                    <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n                      src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                  </div>\n                  <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n                    (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n                    [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n                    {{ handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                  <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n                    handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n          <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n        </div>\n      </div>\n\n\n\n    </div>\n  </div>\n  <div class=\"mobile-enroll-div\"\n    [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n    <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n      <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n        <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n          [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n          [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n        </ws-app-toc-banner>\n      </div>\n    </ng-container>\n    <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n  </div>\n\n  <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n    (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n  <div\n    class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n    <div class=\"error-logo\">\n      <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n        The page you requested cannot be found\n      </div>\n    </div>\n    <!-- <div class=\"error-support\">\n      <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n      <div class=\"support-message\" >You might want to:</div>\n    </div> -->\n  </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n  <a (click)=\"raiseTelemetryForPublic($event)\"\n    [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n    [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n    class=\"flex action-button justify-center\">\n    {{'apptochome.view' | translate}}\n  </a>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n  <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n    <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n      [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n      <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n    </a>\n  </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ContentTocComponent, selector: "ws-widget-content-toc", inputs: ["content", "contentReadData", "initialRouteData", "changeTab", "baseContentReadData", "forPreview", "contentTabFlag", "resumeData", "batchData", "skeletonLoader", "tocStructure", "pathSet", "fromViewer", "hierarchyMapData", "condition", "kparray", "selectedBatchData", "config", "componentName", "isEnrolled", "playResourceId", "sideNavBarOpened", "languageList", "lockCertificate"], outputs: ["playResumeForAI", "enrollUserToAI", "trigerCompletionSurveyForm", "resumeContent"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "component", type: TipsForLearnerCardComponent, selector: "ws-widget-tips-for-learner-card", inputs: ["learnAdvisoryData"] }, { kind: "component", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: ["banners", "content", "resumeData", "analytics", "forPreview", "batchData", "userEnrollmentList", "contentReadData", "clickToShare"], outputs: ["withdrawOrEnroll", "programEnrollCall"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'ws-app-app-toc-home-v2', encapsulation: ViewEncapsulation.None, template: "jhasggkasgkfgkjasgfjkgsajkgfjgasfjkgkg\n\n<ng-container *ngIf=\"courseID else noDataFound\">\n  <ng-template #enrollFunctionality>\n    <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n      <!-- Course block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n                    contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n        <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n                      !content?.artifactUrl?.length) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n          <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n            [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n            class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ translateLabels('resume', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </a>\n\n          <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n              }}</ng-container>\n          </button>\n\n          <!-- <div\n            *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n            <ng-container *ngIf=\"isAcbpClaim\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n            <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n          </div> -->\n\n          <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n            <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n          </div> -->\n\n          <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n            <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n          </div> -->\n        </ng-container>\n\n        <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n          <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE  && !enrollBtnLoading\">\n            <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n              (click)=\"handleEnrollment()\">\n              <ng-container>\n                {{ 'apptochome.enroll' | translate }}\n              </ng-container>\n            </a>\n            <!-- <ng-container *ngIf=\"isAcbpCourse\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n            <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n              <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n\n      <!-- PRogram & mandatory course block -->\n      <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n        <ng-container\n          *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n            <ng-container\n              *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n              <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{'apptochome.enroll' | translate}}\n                </ng-container>\n              </a>\n              <!-- <ng-container *ngIf=\"isAcbpCourse\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n                <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container> -->\n            </ng-container>\n            <ng-container *ngIf=\"!forPreview || isInIFrame\">\n              <ng-container\n                *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n                <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                  [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n                  (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                  [contentReadData]=\"contentReadData\">\n                </ws-app-toc-banner>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n            No Batches\n          </ng-container>\n          <ng-container\n            *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container\n              *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"isBatchInProgress &&\n                        ( actionBtnStatus === 'grant' &&\n                          !(isMobile && content?.isInIntranet) &&\n                          (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n                          (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n                        )\">\n            <a *ngIf=\"showStart.show && !isPostAssessment\"\n              [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n              [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                    translateLabels('resume', 'apptochome') :\n                    translateLabels('start', 'apptochome') }}\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"content?.completionPercentage === 100\">\n                {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n              </ng-container>\n            </a>\n            <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n                }}</ng-container>\n            </a>\n            <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n              <ng-container *ngIf=\"isAcbpClaim\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n            </div> -->\n            <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n              <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                  (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n            </div>\n            <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n              <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-container\n        *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n        <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n          [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n          [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n          class=\"flex action-button justify-center resume\">\n          <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n              {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                translateLabels('resume', 'apptochome') :\n                translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">\n            {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n            translateLabels('resume', 'apptochome') }}\n          </ng-container>\n        </a>\n      </ng-container>\n\n      <ng-container *ngIf=\"enrollBtnLoading\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n          [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n      </ng-container>\n\n      <!-- Curated program block -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n        <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n          (click)=\"handleEnrollment()\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- STANDALONE_ASSESSMENT black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n          *ngIf=\"!forPreview || isInIFrame\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n        <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n          <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n          </span>\n        </ng-container>\n      </ng-container>\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n          {{getStartDate}}!</span>\n      </ng-container>\n\n      <!-- STANDALONE_ASSESSMENT enrolled black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <!-- BLENDED_PROGRAM block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n        <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n                      !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n          <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n            <p class=\"margin-remove-bottom font-bold\">\n              {{ 'apptochome.requestUnderReview' | translate }}\n            </p>\n          </div>\n        </ng-container>\n        <ng-container>\n          <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n            [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n            (click)=\"raiseTelemetryForPublic()\"\n            [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n            class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                  translateLabels('resume', 'apptochome') :\n                  translateLabels('start', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('start', 'apptochome') }}\n            </ng-container>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n        <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n          'apptochome.register' | translate }}</a>\n      </ng-container>\n\n    </div>\n  </ng-template>\n\n  <ng-template #progressFunctionality>\n    <div class=\"flex flex-row gap-4\">\n      <div class=\"flex-1\">\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"flex flex-row gap-4 text-sm\">\n            <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n            <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n          </div>\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n            [customClassName]=\"'content-progress'\">\n          </ws-widget-content-progress>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n        <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n          (click)=\"openFeedbackDialog(content)\">\n          <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n          <ng-container *ngIf=\"!userRating\">\n            <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n          </ng-container>\n          <ng-container *ngIf=\"userRating\">\n            <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n          </ng-container>\n        </button>\n      </ng-container>\n    </div>\n  </ng-template>\n\n  <div class=\"toc-banner\">\n    <div class=\"flex flex-row gap-6 fixed-width\">\n      <div class=\"banner-details toc-content\" #bannerDetails>\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"flex items-center justify-between gap-4\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-row gap-2\">\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                  <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                  <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                  <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                </div>\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n                  *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n                  <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n                  <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                    'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n                </div>\n                <!-- Knowledge level block for search box -->\n                  <!-- {{content?.difficultyLevel}} -->\n            <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container\">\n              <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\" class=\"level-badge beginner\">\n                <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                  <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\"/>\n                  <path 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\" fill=\"#49C951\"/>\n                </svg>\n                {{contentReadData?.difficultyLevel}}\n              </span>\n              <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\" class=\"level-badge intermediate\">\n                <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                  <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\"/>\n                  <path 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\" fill=\"#1B4CA1\"/>\n                  <path 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\" fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\"/>\n                </svg>\n                {{contentReadData?.difficultyLevel}}\n              </span>\n              <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\" class=\"level-badge advanced\">\n                <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                  <g clip-path=\"url(#clip0)\">\n                    <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\"/>\n                    <path 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\" fill=\"#FF8268\"/>\n                    <path 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\" fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\"/>\n                    <path 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\" fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\"/>\n                  </g>\n                  <defs>\n                    <clipPath id=\"clip0\">\n                      <rect width=\"16\" height=\"16\" fill=\"white\"/>\n                    </clipPath>\n                  </defs>\n                </svg>\n                {{contentReadData?.difficultyLevel}}\n              </span>\n            </div>\n\n                <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n                  <div class=\"flex items-center due-tag text-xs leading-3\"\n                    [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n                    {{ 'common.dueBy' | translate }} - &nbsp;<span class=\"font-bold\">{{ cbPlanEndDate | date: 'd MMM,y'}}</span>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n\n            <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n              <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-2\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n                handleCapitalize(contentReadData?.name) }}</div>\n              <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n                | translate }} {{ contentReadData?.source }}</div>\n            </ng-container>\n          </div>\n\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n              <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n                (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                  <mat-icon class=\"nodtranslate\">grade</mat-icon>\n                  <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                </div>\n                <div class=\"separator\"></div>\n                <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n                </div>\n              </div>\n              <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                <div class=\"most-enrolled-chip text-xs leading-3\">\n                  <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n                    translate }}</span>\n                  <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n                    translate }}</span>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n            <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n              contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n          </ng-container>\n          <ng-container>\n            <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n              <mat-chip-list class=\"lang-chips\">\n                <!-- Show up to 6 chips -->\n                <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n                  <mat-chip class=\"matchip-custom\" selectable=\"true\"\n                    [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n                    {{ lang.name || lang.value }}\n                  </mat-chip>\n                </ng-container>\n\n                <!-- \"More\" chip if there are more than 6 languages -->\n                <ng-container *ngIf=\"languageList.length > 5\">\n                  <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n                    [selected]=\"isSelectedInMoreDropdown()\">\n                    More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n                  </mat-chip>\n                  <mat-menu #moreLanguagesMenu=\"matMenu\">\n                    <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n                      <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n                        [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n                        {{ lang.displayName || lang.name || lang }}\n                      </mat-radio-button>\n                    </mat-radio-group>\n                  </mat-menu>\n                </ng-container>\n              </mat-chip-list>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex flex-row gap-6 fixed-width\">\n    <div class=\"toc-content\">\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n        selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n        selectedBatchData?.content[0]?.enrollmentEndDate\">\n        <div class=\"location-details mt-6\">\n          <div class=\"flex items-center gap-4 pb-3\">\n            <mat-icon class=\"location-icon nodtranslate\">\n              location_on\n            </mat-icon>\n            <div class=\"loc-desc\">\n              {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n            </div>\n          </div>\n          <div class=\"flex items-center gap-4\">\n            <mat-icon class=\"event-icon nodtranslate\">\n              event</mat-icon>\n            <div class=\"loc-desc\">\n              Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n        <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n          <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n            <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n            <div class=\"relevent-info\">\n              <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n                }}</span>\n              <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n                }}</span>\n            </div>\n            <div class=\"flex flex-middle relevant-container\">\n              <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n                (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n                (click)=\"handleAcceptRelevent()\">\n                <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n                  alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n                <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n              </div>\n\n              <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n                <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n                <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <div class=\"pb-4 lg:py-4\"\n        *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n        <!-- Overall progress functionality -->\n        <div class=\"mobile-progress\">\n          <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n        </div>\n        <!-- Overall progress functionality -->\n        <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n          [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n          [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n          [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n          [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n          [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n          [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n          [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n          (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n        <div class=\"mob-tip-for-learner\">\n          <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n            <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n          </div>\n        </div>\n      </div>\n    </div>\n\n\n    <div class=\"right-container\">\n\n      <!-- if needed sticky of right container add this to below div => #rightContainer -->\n      <div class=\"right-content\">\n        <div class=\"right-content-inner\">\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n              [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-col image-div\"\n              [ngStyle]=\"{\n        'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n              [ngClass]=\"{'image-backdrop': scrolled}\">\n              <div class=\"flex flex-col justify-between text-container\">\n                <div class=\"flex items-center gap-4 justify-between\"\n                  [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n                  <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n                    <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                    <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                  </div>\n                  <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n                    *ngIf=\"canShare && !forPreview\">\n                    <mat-icon class=\"nodtranslate\">share</mat-icon>\n                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                  <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n                  </div>\n                  <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n                    [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n                    'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n\n          <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n\n            <div class=\"flex flex-col gap-4\"\n              *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n              <div class=\"flex flex-row gap-3 justify-around\">\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n                    || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n                </div>\n              </div>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n                <a class=\"flex action-button enroll-btn justify-center resume\"\n                  *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n                  <ng-container>\n                    {{ 'apptochome.preEnroll' | translate }}\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n                <a class=\"flex preenrolldone-btn justify-center resume\">\n                  <ng-container>\n                    {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n                      class=\"tick-icon\">\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n                <div class=\"flex flex-col gap-6 batch-timer\">\n                  <div class=\"flex flex-row\">\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                    <div class=\"flex\">\n                      <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                    </div>\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                  </div>\n                  <div class=\"flex flex-row gap-4 justify-center\">\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                      </div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n                <ng-container *ngIf=\"!mobile1200 && (\n         !contentReadData?.preEnrolmentResources?.length ||\n         (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus ||  !preAssessmentRequiredFlag))\n       )\">\n\n                  <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                    [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n                    [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                    [contentReadData]=\"contentReadData\">\n                  </ws-app-toc-banner>\n                </ng-container>\n              </ng-container>\n            </div>\n\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>\n                  <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n                </div>\n                <div *ngIf=\"showBtn\">\n                  <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n                    {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n                </div>\n\n                <!-- Overall progress functionality -->\n                <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n                  <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n                </ng-container>\n                <!-- Overall progress functionality -->\n\n                <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n                <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n                <!-- </div> -->\n\n                <!-- <div *ngIf=\"resumeData && userRating\">\n                <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n              </div> -->\n\n                <ng-container\n                  *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n                  <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n                </ng-container>\n              </div>\n\n              <div class=\"karma-points-div\">\n                <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n                  [content]=\"content\"\n                  [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-wrap gap-6\">\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n                [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n            </ng-container>\n          </div>\n\n          <div class=\"flex flex-col gap-8 p-5\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                  [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                  <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                    [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                  <div class=\"flex flex-col gap-2\">\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\"\n                *ngIf=\"contentReadData?.source  && (contentCreatorData && contentCreatorData?.length)\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n                  <div class=\"flex provider-logo-div\">\n                    <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n                      src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                  </div>\n                  <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n                    (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n                    [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n                    {{ handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                  <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n                    handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n          <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n        </div>\n      </div>\n\n\n\n    </div>\n  </div>\n  <div class=\"mobile-enroll-div\"\n    [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n    <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n      <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n        <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n          [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n          [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n        </ws-app-toc-banner>\n      </div>\n    </ng-container>\n    <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n  </div>\n\n  <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n    (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n  <div\n    class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n    <div class=\"error-logo\">\n      <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n        The page you requested cannot be found\n      </div>\n    </div>\n    <!-- <div class=\"error-support\">\n      <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n      <div class=\"support-message\" >You might want to:</div>\n    </div> -->\n  </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n  <a (click)=\"raiseTelemetryForPublic($event)\"\n    [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n    [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n    class=\"flex action-button justify-center\">\n    {{'apptochome.view' | translate}}\n  </a>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n  <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n    <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n      [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n      <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n    </a>\n  </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}\n"] }]
+            args: [{ selector: 'ws-app-app-toc-home-v2', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n  <ng-template #enrollFunctionality>\n    <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n      <!-- Course block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n                    contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n        <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n                      !content?.artifactUrl?.length) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n          <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n            [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n            class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ translateLabels('resume', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </a>\n\n          <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n              }}</ng-container>\n          </button>\n\n          <!-- <div\n            *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n            <ng-container *ngIf=\"isAcbpClaim\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n            <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n          </div> -->\n\n          <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n            <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n          </div> -->\n\n          <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n            <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n          </div> -->\n        </ng-container>\n\n        <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n          <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE  && !enrollBtnLoading\">\n            <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n              (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n              <ng-container>\n                {{ 'apptochome.enroll' | translate }}\n              </ng-container>\n            </a>\n            <!-- <ng-container *ngIf=\"isAcbpCourse\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n            <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n              <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n\n      <!-- PRogram & mandatory course block -->\n      <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n        <ng-container\n          *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n            <ng-container\n              *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n              <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{'apptochome.enroll' | translate}}\n                </ng-container>\n              </a>\n              <!-- <ng-container *ngIf=\"isAcbpCourse\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n                <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container> -->\n            </ng-container>\n            <ng-container *ngIf=\"!forPreview || isInIFrame\">\n              <ng-container\n                *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n                <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                  [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n                  (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                  [contentReadData]=\"contentReadData\">\n                </ws-app-toc-banner>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n            No Batches\n          </ng-container>\n          <ng-container\n            *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container\n              *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"isBatchInProgress &&\n                        ( actionBtnStatus === 'grant' &&\n                          !(isMobile && content?.isInIntranet) &&\n                          (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n                          (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n                        )\">\n            <a *ngIf=\"showStart.show && !isPostAssessment\"\n              [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n              [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                    translateLabels('resume', 'apptochome') :\n                    translateLabels('start', 'apptochome') }}\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"content?.completionPercentage === 100\">\n                {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n              </ng-container>\n            </a>\n            <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n                }}</ng-container>\n            </a>\n            <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n              <ng-container *ngIf=\"isAcbpClaim\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n            </div> -->\n            <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n              <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                  (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n            </div>\n            <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n              <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-container\n        *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n        <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n          [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n          [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n          class=\"flex action-button justify-center resume\">\n          <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n              {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                translateLabels('resume', 'apptochome') :\n                translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">\n            {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n            translateLabels('resume', 'apptochome') }}\n          </ng-container>\n        </a>\n      </ng-container>\n\n      <ng-container *ngIf=\"enrollBtnLoading\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n          [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n      </ng-container>\n\n      <!-- Curated program block -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n        <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n          (click)=\"handleEnrollment()\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- STANDALONE_ASSESSMENT black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n          *ngIf=\"!forPreview || isInIFrame\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n        <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n          <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n          </span>\n        </ng-container>\n      </ng-container>\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n          {{getStartDate}}!</span>\n      </ng-container>\n\n      <!-- STANDALONE_ASSESSMENT enrolled black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <!-- BLENDED_PROGRAM block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n        <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n                      !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n          <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n            <p class=\"margin-remove-bottom font-bold\">\n              {{ 'apptochome.requestUnderReview' | translate }}\n            </p>\n          </div>\n        </ng-container>\n        <ng-container>\n          <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n            [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n            (click)=\"raiseTelemetryForPublic()\"\n            [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n            class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                  translateLabels('resume', 'apptochome') :\n                  translateLabels('start', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('start', 'apptochome') }}\n            </ng-container>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n        <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n          'apptochome.register' | translate }}</a>\n      </ng-container>\n\n    </div>\n  </ng-template>\n\n  <ng-template #progressFunctionality>\n    <div class=\"flex flex-row gap-4\">\n      <div class=\"flex-1\">\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"flex flex-row gap-4 text-sm\">\n            <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n            <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n          </div>\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n            [customClassName]=\"'content-progress'\">\n          </ws-widget-content-progress>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n        <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n          (click)=\"openFeedbackDialog(content)\">\n          <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n          <ng-container *ngIf=\"!userRating\">\n            <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n          </ng-container>\n          <ng-container *ngIf=\"userRating\">\n            <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n          </ng-container>\n        </button>\n      </ng-container>\n    </div>\n  </ng-template>\n\n  <div class=\"toc-banner\">\n    <div class=\"flex flex-row gap-6 fixed-width\">\n      <div class=\"banner-details toc-content\" #bannerDetails>\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"flex items-center justify-between gap-4\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-row gap-2\">\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                  <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                  <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                  <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                </div>\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n                  *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n                  <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n                  <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                    'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n                </div>\n                <!-- Knowledge level block for search box -->\n                <!-- {{content?.difficultyLevel}} -->\n                <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container\">\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n                    class=\"level-badge beginner\">\n                    <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                      <path\n                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                        fill=\"#49C951\" />\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n                    class=\"level-badge intermediate\">\n                    <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                      <path\n                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                        fill=\"#1B4CA1\" />\n                      <path\n                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n                    class=\"level-badge advanced\">\n                    <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <g clip-path=\"url(#clip0)\">\n                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                        <path\n                          d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                          fill=\"#FF8268\" />\n                        <path\n                          d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                          fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                        <path\n                          d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                          fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                      </g>\n                      <defs>\n                        <clipPath id=\"clip0\">\n                          <rect width=\"16\" height=\"16\" fill=\"white\" />\n                        </clipPath>\n                      </defs>\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                </div>\n\n                <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n                  <div class=\"flex items-center due-tag text-xs leading-3\"\n                    [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n                    {{ 'common.dueBy' | translate }} - &nbsp;<span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n                      MMM,y'}}</span>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n              <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n                (keydown)=\"navigateToNewVersion()\">\n                <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n              </div>\n            </ng-container>\n            <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n              <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-2\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n                handleCapitalize(contentReadData?.name) }}</div>\n              <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n                | translate }} {{ contentReadData?.source }}</div>\n            </ng-container>\n          </div>\n\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex gap-4 items-center\">\n              <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n                (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                  <mat-icon class=\"nodtranslate\">grade</mat-icon>\n                  <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                </div>\n                <div class=\"separator\"></div>\n                <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n                </div>\n              </div>\n              <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                <div class=\"most-enrolled-chip text-xs leading-3\">\n                  <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n                    translate }}</span>\n                  <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n                    translate }}</span>\n                </div>\n              </div>\n              <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n                <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n                  <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n                </div>\n                <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n                  <span>{{ 'apptoc.retired' | translate }}</span>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n            <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n              contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n          </ng-container>\n          <ng-container>\n            <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n              <mat-chip-list class=\"lang-chips\">\n                <!-- Show up to 6 chips -->\n                <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n                  <mat-chip class=\"matchip-custom\" selectable=\"true\"\n                    [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n                    {{ lang.name || lang.value }}\n                  </mat-chip>\n                </ng-container>\n\n                <!-- \"More\" chip if there are more than 6 languages -->\n                <ng-container *ngIf=\"languageList.length > 5\">\n                  <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n                    [selected]=\"isSelectedInMoreDropdown()\">\n                    More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n                  </mat-chip>\n                  <mat-menu #moreLanguagesMenu=\"matMenu\">\n                    <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n                      <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n                        [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n                        {{ lang.displayName || lang.name || lang }}\n                      </mat-radio-button>\n                    </mat-radio-group>\n                  </mat-menu>\n                </ng-container>\n              </mat-chip-list>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex flex-row gap-6 fixed-width\">\n    <div class=\"toc-content\">\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n        selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n        selectedBatchData?.content[0]?.enrollmentEndDate\">\n        <div class=\"location-details mt-6\">\n          <div class=\"flex items-center gap-4 pb-3\">\n            <mat-icon class=\"location-icon nodtranslate\">\n              location_on\n            </mat-icon>\n            <div class=\"loc-desc\">\n              {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n            </div>\n          </div>\n          <div class=\"flex items-center gap-4\">\n            <mat-icon class=\"event-icon nodtranslate\">\n              event</mat-icon>\n            <div class=\"loc-desc\">\n              Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n        <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n          <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n            <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n            <div class=\"relevent-info\">\n              <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n                }}</span>\n              <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n                }}</span>\n            </div>\n            <div class=\"flex flex-middle relevant-container\">\n              <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n                (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n                (click)=\"handleAcceptRelevent()\">\n                <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n                  alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n                <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n              </div>\n\n              <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n                <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n                <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <div class=\"pb-4 lg:py-4\"\n        *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n        <!-- Overall progress functionality -->\n        <div class=\"mobile-progress\">\n          <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n        </div>\n        <!-- Overall progress functionality -->\n        <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n          [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n          [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n          [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n          [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n          [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n          [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n          [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n          (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n        <div class=\"mob-tip-for-learner\">\n          <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n            <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n          </div>\n        </div>\n      </div>\n    </div>\n\n\n    <div class=\"right-container\">\n\n      <!-- if needed sticky of right container add this to below div => #rightContainer -->\n      <div class=\"right-content\">\n        <div class=\"right-content-inner\">\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n              [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-col image-div\"\n              [ngStyle]=\"{\n        'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n              [ngClass]=\"{'image-backdrop': scrolled}\">\n              <div class=\"flex flex-col justify-between text-container\">\n                <div class=\"flex items-center gap-4 justify-between\"\n                  [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n                  <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n                    <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                    <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                  </div>\n                  <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n                    *ngIf=\"canShare && !forPreview\">\n                    <mat-icon class=\"nodtranslate\">share</mat-icon>\n                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                  <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n                  </div>\n                  <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n                    [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n                    'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n\n          <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n            <div class=\"flex flex-col gap-1  cursor-pointer switch-version\"\n              *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n              (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n              <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n            </div>\n\n            <div class=\"flex flex-col gap-4\"\n              *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n              <div class=\"flex flex-row gap-3 justify-around\">\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n                    || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n                </div>\n              </div>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n                <a class=\"flex action-button enroll-btn justify-center resume\"\n                  *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n                  <ng-container>\n                    {{ 'apptochome.preEnroll' | translate }}\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n                <a class=\"flex preenrolldone-btn justify-center resume\">\n                  <ng-container>\n                    {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n                      class=\"tick-icon\">\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n                <div class=\"flex flex-col gap-6 batch-timer\">\n                  <div class=\"flex flex-row\">\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                    <div class=\"flex\">\n                      <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                    </div>\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                  </div>\n                  <div class=\"flex flex-row gap-4 justify-center\">\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                      </div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n                <ng-container *ngIf=\"!mobile1200 && (\n         !contentReadData?.preEnrolmentResources?.length ||\n         (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus ||  !preAssessmentRequiredFlag))\n       )\">\n\n                  <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                    [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n                    [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                    [contentReadData]=\"contentReadData\">\n                  </ws-app-toc-banner>\n                </ng-container>\n              </ng-container>\n            </div>\n\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>\n                  <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n                </div>\n                <div *ngIf=\"showBtn\">\n                  <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n                    {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n                </div>\n\n                <!-- Overall progress functionality -->\n                <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n                  <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n                </ng-container>\n                <!-- Overall progress functionality -->\n\n                <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n                <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n                <!-- </div> -->\n\n                <!-- <div *ngIf=\"resumeData && userRating\">\n                <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n              </div> -->\n\n                <ng-container\n                  *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n                  <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n                </ng-container>\n              </div>\n\n              <div class=\"karma-points-div\">\n                <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n                  [content]=\"content\"\n                  [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-wrap gap-6\">\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n                [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n            </ng-container>\n          </div>\n\n          <div class=\"flex flex-col gap-8 p-5\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                  [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                  <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                    [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                  <div class=\"flex flex-col gap-2\">\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\"\n                *ngIf=\"contentReadData?.source  && (contentCreatorData && contentCreatorData?.length)\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n                  <div class=\"flex provider-logo-div\">\n                    <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n                      src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                  </div>\n                  <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n                    (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n                    [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n                    {{ handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                  <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n                    handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n          <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n        </div>\n      </div>\n\n\n\n    </div>\n  </div>\n  <div class=\"mobile-enroll-div\"\n    [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n    <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n      <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n        <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n          [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n          [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n        </ws-app-toc-banner>\n      </div>\n    </ng-container>\n    <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n  </div>\n\n  <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n    (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n  <div\n    class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n    <div class=\"error-logo\">\n      <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n        The page you requested cannot be found\n      </div>\n    </div>\n    <!-- <div class=\"error-support\">\n      <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n      <div class=\"support-message\" >You might want to:</div>\n    </div> -->\n  </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n  <a (click)=\"raiseTelemetryForPublic($event)\"\n    [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n    [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n    class=\"flex action-button justify-center\">\n    {{'apptochome.view' | translate}}\n  </a>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n  <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n    <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n      [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n      <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n    </a>\n  </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: WidgetContentService }, { type: AppTocService }, { type: i2$1.LoggerService }, { type: i2$1.ConfigurationsService }, { type: i1$6.DomSanitizer }, { type: i1$3.MatLegacySnackBar }, { type: i1$4.MatLegacyDialog }, { type: MobileAppsService }, { type: i2$1.UtilityService }, { type: i5.ContentLanguageService }, { type: ActionService }, { type: ViewerUtilService }, { type: RatingService }, { type: i2$1.TelemetryService }, { type: i1$2.TranslateService }, { type: i2$1.MultilingualTranslationsService }, { type: i2$1.EventService }, { type: LoadCheckService }, { type: HandleClaimService }, { type: ResetRatingsService }, { type: TimerService }, { type: i2$1.WidgetEnrollService }, { type: i5.WidgetContentLibService }, { type: i2$1.DataTransferService }, { type: i19.MatSnackBar }, { type: i5.WidgetUserServiceLib }, { type: NetCoreService }, { type: AppTocV2Service }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['environment']
@@ -23513,5 +24336,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionService, AppTocAnalyticsTilesComponent, AppTocBannerComponent, AppTocCiosHomeComponent, AppTocCiosResolverService, AppTocCiosUserEnrollResolverService, AppTocCohortsComponent, AppTocContentCardComponent, AppTocContentReadResolverService, AppTocDialogIntroVideoComponent, AppTocDiscussionComponent, AppTocExtPublicResolverService, AppTocHomeComponent, AppTocHomeV2Component, AppTocLibModule, AppTocOverviewComponent, AppTocResolverService, AppTocService, AppTocSessionCardComponent, AppTocSessionsComponent, AppTocSinglePageComponent, CompletionSurveyFormComponent, ConfigResolverService, CreateBatchDialogComponent, EnrollLanguageDialogueComponent, EnrollProfileFormComponent, EnrollQuestionnaireComponent, ErrorType, KnowledgeArtifactDetailsComponent, LoadCheckService, MetaTag, NsAppToc, NsCohorts, ProfileResolverService, PublicSurveyFormComponent, ResetRatingsService, RestrictedFeaturesResolverService, ShareTocComponent, ShareTocModule, SurveyFormQuestionComponent, SurveyFormSectionComponent, TimerService, TitleTagService };
+export { ActionService, AppTocAboutComponent, AppTocAnalyticsTilesComponent, AppTocBannerComponent, AppTocBatchAssignmentsComponent, AppTocCiosHomeComponent, AppTocCiosResolverService, AppTocCiosUserEnrollResolverService, AppTocCohortsComponent, AppTocContentCardComponent, AppTocContentComponent, AppTocContentReadResolverService, AppTocDialogIntroVideoComponent, AppTocDiscussionComponent, AppTocExtPublicResolverService, AppTocHomeComponent, AppTocHomeV2Component, AppTocLibModule, AppTocOverviewComponent, AppTocResolverService, AppTocService, AppTocSessionCardComponent, AppTocSessionsComponent, AppTocSinglePageComponent, AppTocTeachersNotesComponent, AppTocV2Service, CompletionSurveyFormComponent, ConfigResolverService, ContentTocComponent, ContentTocModule, CreateBatchDialogComponent, EnrollLanguageDialogueComponent, EnrollProfileFormComponent, EnrollQuestionnaireComponent, ErrorType, KarmaPointsComponent, KarmaPointsModule, KnowledgeArtifactDetailsComponent, LoadCheckService, MetaTag, NsAppToc, NsCohorts, ProfileResolverService, PublicSurveyFormComponent, ResetRatingsService, RestrictedFeaturesResolverService, ReviewsContentComponent, ShareTocComponent, ShareTocModule, SurveyFormQuestionComponent, SurveyFormSectionComponent, TimerService, TitleTagService, TocKpiValuesComponent, TocKpiValuesModule };
 //# sourceMappingURL=sunbird-cb-toc.mjs.map