@sunbird-cb/toc 0.0.10 → 0.0.12

package/fesm2022/sunbird-cb-toc.mjs

@@ -58,15 +58,15 @@ import { MatLegacyInputModule } from '@angular/material/legacy-input';
 import { MatLegacyListModule } from '@angular/material/legacy-list';
 import * as i6$1 from '@angular/material/legacy-menu';
 import { MatLegacyMenuModule } from '@angular/material/legacy-menu';
-import * as i3$2 from '@angular/material/legacy-progress-bar';
+import * as i3$1 from '@angular/material/legacy-progress-bar';
 import { MatLegacyProgressBarModule } from '@angular/material/legacy-progress-bar';
 import * as i4 from '@angular/material/legacy-radio';
 import { MatLegacyRadioModule } from '@angular/material/legacy-radio';
-import * as i5$4 from '@angular/material/legacy-select';
+import * as i5$5 from '@angular/material/legacy-select';
 import { MatLegacySelectModule } from '@angular/material/legacy-select';
 import * as i18 from '@angular/material/legacy-tabs';
 import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
-import * as i3$1 from '@angular/material/legacy-tooltip';
+import * as i5$2 from '@angular/material/legacy-tooltip';
 import { MatLegacyTooltipModule } from '@angular/material/legacy-tooltip';
 import * as i9$3 from '@sunbird-cb/micro-surveys';
 import { MicroSurveyModule } from '@sunbird-cb/micro-surveys';
@@ -88,13 +88,13 @@ import { MatSelectModule } from '@angular/material/select';
 import dayjs from 'dayjs';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import * as i5$2 from '@angular/material/menu';
+import * as i5$3 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i10$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as fileSaver from 'file-saver';
-import * as i5$3 from '@angular/material/dialog';
+import * as i5$4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRadioModule } from '@angular/material/radio';
@@ -701,11 +701,11 @@ class WidgetContentService {
         const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
         if (primaryCategory && this.isResource(primaryCategory)) {
             if (!forPreview) {
-                url = `/apis/proxies/v8/extended/content/v1/read/${contentId}`;
+                url = `/apis/proxies/v8/action/content/v3/read/${contentId}`;
             }
             else {
                 if (window.location.href.includes('editMode=true') && window.location.href.includes('_rc')) {
-                    url = `/apis/proxies/v8/extended/content/v1/read/${contentId}`;
+                    url = `/apis/proxies/v8/action/content/v3/read/${contentId}`;
                 }
                 else {
                     url = `/api/content/v1/read/${contentId}`;
@@ -1635,7 +1635,6 @@ class AppTocService {
     resetContentData() {
         this.hashmap = {};
         this.hashmapUpdated.next(null);
-        console.log('Content data cleared - hashmap reset');
     }
     fetchContentParents(contentId) {
         // return this.http.get<NsContent.IContentMinimal[]>(
@@ -2023,14 +2022,6 @@ class AppTocService {
                     child.primaryCategory === 'Standalone Assessment' ||
                     child.mimeType === 'application/vnd.sunbird.questionset';
                 if (isAssessment) {
-                    console.log(`📋 Adding assessment to hashmap: "${child.name}"`, {
-                        identifier: child.identifier,
-                        primaryCategory: child.primaryCategory,
-                        parent: correctParentId,
-                        originalParent: child?.parent,
-                        parentName: hierarchyData.name,
-                        parentCategory: hierarchyData.primaryCategory
-                    });
                 }
                 this.hashmap[child.identifier] = localMap;
             });
@@ -2162,11 +2153,6 @@ class AppTocService {
             console.warn('⚠️  Hashmap is empty - cannot compute milestone locking');
             return;
         }
-        console.log('\n═══════════════════════════════════════════════════════════');
-        console.log('🔒 MILESTONE LOCKING COMPUTATION START');
-        console.log('═══════════════════════════════════════════════════════════');
-        console.log('User enrolled:', isEnrolled);
-        console.log('Hashmap size:', Object.keys(this.hashmap).length);
         // STEP 1: Find all milestones and sort by index
         const milestoneEntries = Object.keys(this.hashmap)
             .filter(key => {
@@ -2184,11 +2170,8 @@ class AppTocService {
             return numA - numB;
         });
         if (milestoneEntries.length === 0) {
-            console.log('ℹ️  No milestones found - skipping milestone locking');
-            console.log('═══════════════════════════════════════════════════════════\n');
             return;
         }
-        console.log(`\n📍 Found ${milestoneEntries.length} milestones:`);
         milestoneEntries.forEach((id, i) => {
             console.log(`   M${i + 1}: ${this.hashmap[id].name || id}`);
         });
@@ -2207,32 +2190,30 @@ class AppTocService {
             });
             this.hashmap = { ...this.hashmap };
             this.hashmapUpdated.next({ timestamp: Date.now(), hashmap: this.hashmap });
-            console.log('═══════════════════════════════════════════════════════════\n');
             return;
         }
         // STEP 3: Check pre-assessment completion
         const isPreAssessmentCompleted = this.checkPreAssessmentCompletion();
-        console.log(`\n📝 Pre-assessment: ${isPreAssessmentCompleted ? '✅ COMPLETE' : '❌ INCOMPLETE'}`);
+        console.log('🔍 [MILESTONE LOCK] Pre-assessment completed:', isPreAssessmentCompleted ? '✅ YES' : '❌ NO');
         // STEP 4: Compute locking for each milestone
-        console.log('\n🔐 Computing milestone locks:');
-        console.log('─────────────────────────────────────────────────────────────');
         milestoneEntries.forEach((milestoneId, index) => {
             const milestone = this.hashmap[milestoneId];
             if (!milestone)
                 return;
             const milestoneNum = index + 1;
-            console.log(`\n📌 Milestone ${milestoneNum} (${milestone.name || milestoneId}):`);
             // MILESTONE 1: Unlocks when pre-assessment complete
             if (index === 0) {
                 const isLocked = !isPreAssessmentCompleted;
                 this.hashmap[milestoneId].computedIsLocked = isLocked;
                 this.hashmap[milestoneId].unlockMessage = isLocked ?
                     'Complete the preliminary assessment to unlock this milestone' : '';
-                console.log(`   ${isLocked ? '🔒 LOCKED' : '🔓 UNLOCKED'}`);
-                console.log(`   Reason: Pre-assessment ${isPreAssessmentCompleted ? 'complete' : 'incomplete'}`);
+                console.log(`📌 [MILESTONE 1] ${milestone.name}:`, {
+                    isPreAssessmentCompleted,
+                    isLocked: isLocked ? '🔒 LOCKED' : '🔓 UNLOCKED',
+                    unlockMessage: this.hashmap[milestoneId].unlockMessage
+                });
                 // For unlocked M1, check assessment locking
                 if (!isLocked) {
-                    console.log(`   ✓ Checking assessment lock...`);
                     this.computeAssessmentLockingInMilestone(milestoneId);
                 }
                 else {
@@ -2251,27 +2232,38 @@ class AppTocService {
                 const prevStatus = Number(previousMilestone.status) || 0;
                 const prevCompletedLeafNodes = Number(previousMilestone.completedLeafNodesCount) || 0;
                 const prevLeafNodesCount = Number(previousMilestone.leafNodesCount) || 0;
+                console.log(`🔍 [MILESTONE ${milestoneNum}] Checking if previous M${index} is complete:`, {
+                    previousMilestoneName: previousMilestone.name,
+                    completionPercentage: prevCompletionPct,
+                    completionStatus: prevCompletionStatus,
+                    status: prevStatus,
+                    completedLeafNodes: prevCompletedLeafNodes,
+                    leafNodesCount: prevLeafNodesCount
+                });
                 let previousMilestoneComplete = prevCompletionPct >= 100 ||
                     prevCompletionStatus === 2 ||
                     prevStatus === 2 ||
                     (prevLeafNodesCount > 0 && prevCompletedLeafNodes >= prevLeafNodesCount);
+                console.log(`   Primary check result: ${previousMilestoneComplete ? '✅ COMPLETE' : '❌ INCOMPLETE'}`);
                 // Fallback: Check individual items
                 if (!previousMilestoneComplete) {
+                    console.log(`   Running fallback check (mandatory content + assessment)...`);
                     const isPreviousMilestoneAssessmentComplete = this.checkMilestoneAssessmentComplete(previousMilestoneId);
                     const isPreviousMilestoneMandatoryComplete = this.checkMilestoneMandatoryContentComplete(previousMilestoneId);
                     previousMilestoneComplete = isPreviousMilestoneAssessmentComplete && isPreviousMilestoneMandatoryComplete;
-                    console.log(`   Fallback check: mandatory=${isPreviousMilestoneMandatoryComplete}, assessment=${isPreviousMilestoneAssessmentComplete}`);
+                    console.log(`   Fallback check: mandatory=${isPreviousMilestoneMandatoryComplete}, assessment=${isPreviousMilestoneAssessmentComplete}, result=${previousMilestoneComplete}`);
                 }
                 const isLocked = !previousMilestoneComplete;
                 this.hashmap[milestoneId].computedIsLocked = isLocked;
                 this.hashmap[milestoneId].unlockMessage = isLocked ?
                     `Complete all mandatory content and assessment in Milestone ${index} to unlock this milestone` : '';
-                console.log(`   ${isLocked ? '🔒 LOCKED' : '🔓 UNLOCKED'}`);
-                console.log(`   Reason: Previous milestone ${previousMilestoneComplete ? 'complete' : 'incomplete'}`);
-                console.log(`   Previous M${index} progress: ${prevCompletionPct}%`);
+                console.log(`   📊 [MILESTONE ${milestoneNum}] ${milestone.name}:`, {
+                    previousMilestoneComplete: previousMilestoneComplete ? '✅ YES' : '❌ NO',
+                    isLocked: isLocked ? '🔒 LOCKED' : '🔓 UNLOCKED',
+                    unlockMessage: this.hashmap[milestoneId].unlockMessage
+                });
                 // For unlocked milestones, check assessment locking
                 if (!isLocked) {
-                    console.log(`   ✓ Checking assessment lock...`);
                     this.computeAssessmentLockingInMilestone(milestoneId);
                 }
                 else {
@@ -2285,6 +2277,43 @@ class AppTocService {
                 console.log(`   🔒 LOCKED (previous milestone not found)`);
             }
         });
+        // STEP 4.5: Debug log milestone leaf nodes and their completion status
+        console.log('\n📊 Milestone Leaf Nodes Completion Status:');
+        milestoneEntries.forEach((milestoneId, index) => {
+            const milestone = this.hashmap[milestoneId];
+            if (!milestone)
+                return;
+            console.log(`   Leaf Nodes Array:`, milestone.leafNodes);
+            console.log(`   Leaf Nodes Count: ${milestone.leafNodesCount}`);
+            console.log(`   Completed Leaf Nodes Count: ${milestone.completedLeafNodesCount || 0}`);
+            console.log(`   Completion %: ${milestone.completionPercentage}%`);
+            if (milestone.leafNodes && milestone.leafNodes.length > 0) {
+                console.log(`   Individual Leaf Node Status:`);
+                milestone.leafNodes.forEach((leafId, i) => {
+                    const leafData = this.hashmap[leafId];
+                    if (leafData) {
+                        const isComplete = leafData.completionStatus === 2 ||
+                            leafData.status === 2 ||
+                            (leafData.completionPercentage && leafData.completionPercentage >= 100) ||
+                            (leafData.progress && leafData.progress >= 100);
+                        console.log(`      ${i + 1}. ${leafData.name || leafId} [${leafData.primaryCategory}]:`, {
+                            id: leafId,
+                            completionStatus: leafData.completionStatus,
+                            status: leafData.status,
+                            completionPercentage: leafData.completionPercentage,
+                            progress: leafData.progress,
+                            isComplete: isComplete ? '✅' : '❌'
+                        });
+                    }
+                    else {
+                        console.log(`      ${i + 1}. ⚠️ Leaf node ${leafId} NOT FOUND in hashmap`);
+                    }
+                });
+            }
+            else {
+                console.log(`   ⚠️ No leaf nodes defined for this milestone`);
+            }
+        });
         // STEP 5: Compute parent milestone lock status for ALL children
         console.log('\n🔗 Computing parent milestone locks for all children...');
         Object.keys(this.hashmap).forEach(key => {
@@ -2316,9 +2345,7 @@ class AppTocService {
             }
         });
         // STEP 6: Trigger hashmap update
-        console.log('\n─────────────────────────────────────────────────────────────');
         console.log('✅ Milestone locking computation COMPLETE');
-        console.log('═══════════════════════════════════════════════════════════\n');
         this.hashmap = { ...this.hashmap };
         this.hashmapUpdated.next({ timestamp: Date.now(), hashmap: this.hashmap });
     }
@@ -2343,6 +2370,7 @@ class AppTocService {
      * Pre-assessment is typically a Course Assessment at the root level of Learning Pathway (before milestones)
      */
     checkPreAssessmentCompletion() {
+        console.log('🔍 [PRE-ASSESSMENT] Starting pre-assessment completion check');
         // Find the Learning Pathway root
         let learningPathwayId = null;
         for (const key of Object.keys(this.hashmap)) {
@@ -2352,7 +2380,7 @@ class AppTocService {
                 break;
             }
         }
-        console.log('Checking pre-assessment completion. Learning Pathway ID:', learningPathwayId);
+        console.log('🔍 [PRE-ASSESSMENT] Learning Pathway 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];
@@ -2361,20 +2389,19 @@ class AppTocService {
                 const isCompleted = (item.completionStatus === 2 || item.status === 2 ||
                     (item.completionPercentage !== undefined && item.completionPercentage >= 100) ||
                     (item.progress !== undefined && item.progress >= 100));
-                console.log(`✅ Pre-assessment found (isPreAssessment flag): ${key}`, {
-                    name: item.name,
+                console.log(`✅ [PRE-ASSESSMENT] Found (isPreAssessment flag): ${item.name}`, {
+                    id: key,
                     completionStatus: item.completionStatus,
                     status: item.status,
                     completionPercentage: item.completionPercentage,
                     progress: item.progress,
-                    isCompleted,
-                    // Show ALL fields to debug what's available
-                    allData: JSON.stringify(item, null, 2)
+                    isCompleted: isCompleted ? '✅ COMPLETE' : '❌ INCOMPLETE'
                 });
                 // Pre-assessment exists - return its completion status (true/false)
                 return isCompleted;
             }
         }
+        console.log('🔍 [PRE-ASSESSMENT] No item with isPreAssessment flag found, checking for first non-milestone child');
         // 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)) {
@@ -2383,26 +2410,32 @@ class AppTocService {
             if (item.parent !== learningPathwayId)
                 continue;
             // Skip milestones
-            if (item.isMilestone)
+            if (item.isMilestone || item.primaryCategory === 'Milestone')
                 continue;
+            console.log(`🔍 [PRE-ASSESSMENT] Checking potential pre-assessment: ${item.name}`, {
+                id: key,
+                parent: item.parent,
+                primaryCategory: item.primaryCategory,
+                courseCategory: item.courseCategory,
+                isMilestone: item.isMilestone
+            });
             // This is a non-milestone direct child - it's the pre-assessment
             // Must check for actual completion - not just any value
             const isCompleted = (item.completionStatus === 2 || item.status === 2 ||
                 (item.completionPercentage !== undefined && item.completionPercentage >= 100) ||
                 (item.progress !== undefined && item.progress >= 100));
-            console.log(`✅ Pre-assessment found (first non-milestone child): ${key}`, {
-                name: item.name,
+            console.log(`✅ [PRE-ASSESSMENT] Found (first non-milestone child): ${item.name}`, {
+                id: key,
                 completionStatus: item.completionStatus,
                 status: item.status,
                 completionPercentage: item.completionPercentage,
                 progress: item.progress,
-                isCompleted,
-                // Show ALL fields to debug what's available
-                allData: JSON.stringify(item, null, 2)
+                isCompleted: isCompleted ? '✅ COMPLETE' : '❌ INCOMPLETE'
             });
             // Pre-assessment exists - return its completion status (true/false)
             return isCompleted;
         }
+        console.log('🔍 [PRE-ASSESSMENT] No pre-assessment found yet');
         // CRITICAL: If we reach here, no pre-assessment was found in the hashmap
         // This could mean either:
         // 1. There IS no pre-assessment (unlock M1 by default)
@@ -2411,41 +2444,60 @@ class AppTocService {
         const hasAnyChildren = Object.keys(this.hashmap).some(key => this.hashmap[key].parent === learningPathwayId);
         if (!hasAnyChildren) {
             // Hashmap not populated yet - lock M1 until data is ready
-            console.log('⚠️ No children found in hashmap yet - locking M1 until data is ready');
+            console.log('⚠️ [PRE-ASSESSMENT] No children found in hashmap yet - LOCKING M1 until data is ready');
             return false;
         }
         // Hashmap is populated but no pre-assessment found - allow M1 to unlock
-        console.log('No pre-assessment found in fully populated hashmap - allowing M1 to be unlocked by default');
+        console.log('ℹ️ [PRE-ASSESSMENT] No pre-assessment found in fully populated hashmap - allowing M1 to be unlocked by default');
         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
+     * ONLY checks the milestone assessment (Course Assessment that is a direct child of the milestone)
+     * Does NOT check assessments nested inside courses within the milestone
      */
     checkMilestoneAssessmentComplete(milestoneId) {
         const milestone = this.hashmap[milestoneId];
-        // Check all items in hashmap that are assessments and belong to this milestone
+        let foundMilestoneAssessment = false;
+        let isMilestoneAssessmentComplete = false;
+        console.log(`🔍 Checking milestone assessment for: ${milestoneId}`);
+        // Check all items in hashmap that are DIRECT children of 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' ||
+            // CRITICAL: Only check DIRECT children (parent === milestoneId)
+            if (item.parent !== milestoneId)
+                continue;
+            // Check if this is a milestone assessment (Course Assessment as direct child of milestone)
+            const isMilestoneAssessment = 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)
+                item.primaryCategory === 'Standalone Assessment';
+            if (!isMilestoneAssessment)
                 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;
-                if (isCompleted) {
-                    return true;
-                }
+            // Found the milestone assessment
+            foundMilestoneAssessment = true;
+            const isCompleted = item.completionStatus === 2 || item.status === 2 || item.completionPercentage >= 100 || item.progress >= 100;
+            console.log(`📋 Found milestone assessment (direct child): ${item.name || key}`, {
+                milestoneId,
+                assessmentId: key,
+                completionStatus: item.completionStatus,
+                status: item.status,
+                completionPercentage: item.completionPercentage,
+                isCompleted
+            });
+            if (isCompleted) {
+                isMilestoneAssessmentComplete = true;
             }
+            // Usually only one milestone assessment per milestone, but check all just in case
         }
-        // If no assessment found, consider it as completed (no assessment requirement)
-        return true;
+        // CRITICAL LOGIC:
+        // - If NO milestone assessment found → consider complete (no assessment requirement)
+        // - If milestone assessment found → it must be completed
+        if (!foundMilestoneAssessment) {
+            console.log(`ℹ️ No milestone assessment (direct child) found for ${milestoneId} - considering as complete`);
+            return true;
+        }
+        console.log(`${isMilestoneAssessmentComplete ? '✅' : '❌'} Milestone ${milestoneId} assessment: ${isMilestoneAssessmentComplete ? 'COMPLETE' : 'INCOMPLETE'}`);
+        return isMilestoneAssessmentComplete;
     }
     /**
      * Check if a milestone's mandatory content is completed
@@ -2455,6 +2507,7 @@ class AppTocService {
         const milestone = this.hashmap[milestoneId];
         let mandatoryCount = 0;
         let completedMandatoryCount = 0;
+        console.log(`🔍 Checking mandatory content for milestone: ${milestoneId}`);
         // 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];
@@ -2467,20 +2520,36 @@ class AppTocService {
             // Skip assessments - they're checked separately
             const isAssessment = item.primaryCategory === 'Course Assessment' ||
                 item.primaryCategory === 'Final Assessment' ||
+                item.primaryCategory === 'Standalone Assessment' ||
                 item.courseCategory === 'Course Assessment' ||
                 (item.name && item.name.toLowerCase().includes('assessment'));
             if (isAssessment)
                 continue;
-            // Check if this content is mandatory
-            if (item.isMandatory) {
+            // CRITICAL: Check if this content is mandatory
+            // By default, courses ARE mandatory unless explicitly marked as optional (isMandatory: false)
+            const isMandatory = item.isMandatory !== false;
+            if (isMandatory) {
                 mandatoryCount++;
                 const isCompleted = item.completionStatus === 2 || item.status === 2 || item.completionPercentage >= 100 || item.progress >= 100;
+                console.log(`   📝 Mandatory item: ${item.name || key}`, {
+                    isMandatory: item.isMandatory,
+                    completionStatus: item.completionStatus,
+                    status: item.status,
+                    completionPercentage: item.completionPercentage,
+                    progress: item.progress,
+                    isCompleted,
+                    hasCompletionStatus: item.completionStatus !== undefined,
+                    hasStatus: item.status !== undefined,
+                    hasCompletionPercentage: item.completionPercentage !== undefined,
+                    hasProgress: item.progress !== undefined
+                });
                 if (isCompleted) {
                     completedMandatoryCount++;
                 }
             }
         }
         const allComplete = mandatoryCount === 0 || completedMandatoryCount >= mandatoryCount;
+        console.log(`📊 Milestone ${milestoneId} mandatory status: ${completedMandatoryCount}/${mandatoryCount} complete = ${allComplete ? '✅ ALL COMPLETE' : '❌ INCOMPLETE'}`);
         return allComplete;
     }
     /**
@@ -3632,7 +3701,7 @@ class SlidersDynamicComponent {
         return this.langTranslations.translateLabelWithoutspace(label, type, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlidersDynamicComponent, deps: [{ token: i2$1.EventService }, { token: i1$2.TranslateService }, { token: i2$1.MultilingualTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: { widgetData: "widgetData" }, host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" [ngClass]=\"widgetData?.cardClass\" (swiperight)=\"slideTo(currentIndex - 1)\" [ngStyle]=\"{'min-height': widgetData?.height}\" *ngIf=\"widgetData?.sliderData?.length > 0\">\n  <ng-container *ngIf=\"widgetData.type === 'image'\">\n    <a (click)=\"raiseTelemetry(widgetData.sliderData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n    [ngClass]=\"{'cursor-auto': !widgetData.sliderData[currentIndex].redirectUrl}\">\n      <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n        <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n      </div>\n    </a>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.type === 'data'\">\n    <div class=\"banner WidgetInstanceId flex margin-bottom-xs\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n      <div class=\"banner-data flex margin-right-m \">\n        {{ widgetData.sliderData[currentIndex].title }}\n      </div>\n      <div class=\"flex data-analysis flex-middle\" [ngClass]=\"widgetData.sliderData[currentIndex].colorData\" *ngIf=\"widgetData.sliderData[currentIndex].data\">\n        <mat-icon class=\"icon-stats\">{{ widgetData.sliderData[currentIndex].icon }}</mat-icon>\n        <p class=\"margin-remove text-no-wrap\">{{ widgetData.sliderData[currentIndex].data }}</p>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData?.type === 'tips'\">\n    <ng-container *ngFor=\"let slide of widgetData?.sliderData; let i = index\">\n      <div class=\"tips banner WidgetInstanceId flex margin-bottom-xs\" [hidden]=\"i !== currentIndex\">\n        <div class=\"banner-data flex margin-right-m\">\n          {{i + 1}}. {{ slide }}\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.type === 'karma-points'\">\n    <div class=\"flex flex-row items-center gap-2 mb-4\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n      <img src=\"/assets/icons/home/karma-badge.svg\" width=\"28px\" alt=\"karma-points image\" />\n      <div class=\"text-xs\">\n        <span *ngIf=\"slide?.textBeforeIcon\">{{ translateLabels(slide?.textBeforeIcon, 'appKarmapointsPanel') }}</span>&nbsp;\n        <span *ngIf=\"slide?.points\" class=\"font-bold\">{{ slide?.points }} {{ translateLabels(slide?.textAfterPoints,\n        'appKarmapointsPanel') }}</span>&nbsp;\n        <span *ngIf=\"slide?.textAfterIcon\">{{ translateLabels(slide?.textAfterIcon, 'appKarmapointsPanel') }}</span>\n      </div>\n      <mat-icon class=\"cursor-pointer ws-mat-black60-text info-icon\" [matTooltip]=\"translateLabels(slide?.toolTipText, 'appKarmapointsPanel')\"\n        *ngIf=\"slide?.toolTipText\">info_outline</mat-icon>\n    </div>\n  </ng-container>\n\n  <ng-container>\n    <div class=\"banner-meta\">\n      <ng-container *ngIf=\"widgetData.type === 'image'\">\n        <a [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n        *ngIf=\"widgetData.sliderData[currentIndex].title\" [title]=\"widgetData.sliderData[currentIndex].title\">\n          {{ widgetData.sliderData[currentIndex].title }}\n        </a>\n      </ng-container>\n\n      <div class=\"dots-container\" *ngIf=\"widgetData.sliderData?.length > 1\">\n        <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex, 'dot-active': j === currentIndex, 'dot-grey': j !== currentIndex }\" *ngFor=\"let slide of widgetData.sliderData; let j = index\" (click)=\"slideTo(j)\"></span>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.iconsDisplay\">\n    <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n  </ng-container>\n\n</div>\n", styles: [".banner-container{min-height:243px;overflow:hidden;position:relative;margin:auto;border-radius:12px}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,#00000040,#0000 15% 85%,#00000040)}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;min-height:50px}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:12px}.tips{min-height:30px}.banner-meta{text-align:center;z-index:2;padding:4px 8px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translate(-50%);box-sizing:border-box}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:4px;font-size:1.1rem}.banner-meta .dots-container{padding:4px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:4px;width:4px;margin:0 6px;background-color:#d3d3d3;box-shadow:1px 1px 4px #0009;border-radius:50%;display:inline-block;transition:background-color .5s ease!important}.banner-meta .dots-container .dot.active{background-color:#f0f0f0;height:5px;width:5px}@keyframes fade{0%{opacity:.25}to{opacity:1}}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);padding:16px;color:#fff;font-weight:700;font-size:24px;z-index:2;border-radius:0 3px 3px 0}.next{right:0;border-radius:3px 0 0 3px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.banner-data{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.color-green{color:#1d8923}.color-red{color:#c41112}.data-analysis{opacity:1;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.21px;text-align:left;line-height:16px}.data-analysis mat-icon{width:18px;height:18px;font-size:1.2rem}.dot-grey{opacity:.2;background-color:#1b2133!important;width:4px!important;height:4px!important;box-shadow:unset!important}.dot-active{width:8px!important;height:4px!important;border-radius:2px!important;opacity:1;background-color:#f3962f!important;box-shadow:unset!important}.slider-container{background:#ef951e29!important;padding:16px}.text-no-wrap{text-wrap:nowrap;margin-top:4px!important}.icon-stats{margin-right:4px}.info-icon{width:16px;height:16px;font-size:16px}.cursor-auto{cursor:auto}.flex{display:flex}.flex-middle{align-items:center}.flex-row{flex-direction:row}.items-center{align-items:center}.gap-2{gap:.5rem}.mb-4{margin-bottom:1rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.margin-bottom-xs{margin-bottom:4px}.margin-right-m{margin-right:16px}.margin-remove{margin:0}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.ImageResponsiveDirective, selector: "[wsUtilsImageResponsive]", inputs: ["src"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: { widgetData: "widgetData" }, host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" [ngClass]=\"widgetData?.cardClass\" (swiperight)=\"slideTo(currentIndex - 1)\" [ngStyle]=\"{'min-height': widgetData?.height}\" *ngIf=\"widgetData?.sliderData?.length > 0\">\n  <ng-container *ngIf=\"widgetData.type === 'image'\">\n    <a (click)=\"raiseTelemetry(widgetData.sliderData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n    [ngClass]=\"{'cursor-auto': !widgetData.sliderData[currentIndex].redirectUrl}\">\n      <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n        <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n      </div>\n    </a>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.type === 'data'\">\n    <div class=\"banner WidgetInstanceId flex margin-bottom-xs\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n      <div class=\"banner-data flex margin-right-m \">\n        {{ widgetData.sliderData[currentIndex].title }}\n      </div>\n      <div class=\"flex data-analysis flex-middle\" [ngClass]=\"widgetData.sliderData[currentIndex].colorData\" *ngIf=\"widgetData.sliderData[currentIndex].data\">\n        <mat-icon class=\"icon-stats\">{{ widgetData.sliderData[currentIndex].icon }}</mat-icon>\n        <p class=\"margin-remove text-no-wrap\">{{ widgetData.sliderData[currentIndex].data }}</p>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData?.type === 'tips'\">\n    <ng-container *ngFor=\"let slide of widgetData?.sliderData; let i = index\">\n      <div class=\"tips banner WidgetInstanceId flex margin-bottom-xs\" [hidden]=\"i !== currentIndex\">\n        <div class=\"banner-data flex margin-right-m\">\n          {{i + 1}}. {{ slide }}\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.type === 'karma-points'\">\n    <div class=\"flex flex-row items-center gap-2 mb-4\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n      <img src=\"/assets/icons/home/karma-badge.svg\" width=\"28px\" alt=\"karma-points image\" />\n      <div class=\"text-xs\">\n        <span *ngIf=\"slide?.textBeforeIcon\">{{ translateLabels(slide?.textBeforeIcon, 'appKarmapointsPanel') }}</span>&nbsp;\n        <span *ngIf=\"slide?.points\" class=\"font-bold\">{{ slide?.points }} {{ translateLabels(slide?.textAfterPoints,\n        'appKarmapointsPanel') }}</span>&nbsp;\n        <span *ngIf=\"slide?.textAfterIcon\">{{ translateLabels(slide?.textAfterIcon, 'appKarmapointsPanel') }}</span>\n      </div>\n      <mat-icon class=\"cursor-pointer ws-mat-black60-text info-icon\" [matTooltip]=\"translateLabels(slide?.toolTipText, 'appKarmapointsPanel')\"\n        *ngIf=\"slide?.toolTipText\">info_outline</mat-icon>\n    </div>\n  </ng-container>\n\n  <ng-container>\n    <div class=\"banner-meta\">\n      <ng-container *ngIf=\"widgetData.type === 'image'\">\n        <a [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n        *ngIf=\"widgetData.sliderData[currentIndex].title\" [title]=\"widgetData.sliderData[currentIndex].title\">\n          {{ widgetData.sliderData[currentIndex].title }}\n        </a>\n      </ng-container>\n\n      <div class=\"dots-container\" *ngIf=\"widgetData.sliderData?.length > 1\">\n        <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex, 'dot-active': j === currentIndex, 'dot-grey': j !== currentIndex }\" *ngFor=\"let slide of widgetData.sliderData; let j = index\" (click)=\"slideTo(j)\"></span>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.iconsDisplay\">\n    <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n  </ng-container>\n\n</div>\n", styles: [".banner-container{min-height:243px;overflow:hidden;position:relative;margin:auto;border-radius:12px}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,#00000040,#0000 15% 85%,#00000040)}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;min-height:50px}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:12px}.tips{min-height:30px}.banner-meta{text-align:center;z-index:2;padding:4px 8px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translate(-50%);box-sizing:border-box}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:4px;font-size:1.1rem}.banner-meta .dots-container{padding:4px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:4px;width:4px;margin:0 6px;background-color:#d3d3d3;box-shadow:1px 1px 4px #0009;border-radius:50%;display:inline-block;transition:background-color .5s ease!important}.banner-meta .dots-container .dot.active{background-color:#f0f0f0;height:5px;width:5px}@keyframes fade{0%{opacity:.25}to{opacity:1}}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);padding:16px;color:#fff;font-weight:700;font-size:24px;z-index:2;border-radius:0 3px 3px 0}.next{right:0;border-radius:3px 0 0 3px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.banner-data{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.color-green{color:#1d8923}.color-red{color:#c41112}.data-analysis{opacity:1;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.21px;text-align:left;line-height:16px}.data-analysis mat-icon{width:18px;height:18px;font-size:1.2rem}.dot-grey{opacity:.2;background-color:#1b2133!important;width:4px!important;height:4px!important;box-shadow:unset!important}.dot-active{width:8px!important;height:4px!important;border-radius:2px!important;opacity:1;background-color:#f3962f!important;box-shadow:unset!important}.slider-container{background:#ef951e29!important;padding:16px}.text-no-wrap{text-wrap:nowrap;margin-top:4px!important}.icon-stats{margin-right:4px}.info-icon{width:16px;height:16px;font-size:16px}.cursor-auto{cursor:auto}.flex{display:flex}.flex-middle{align-items:center}.flex-row{flex-direction:row}.items-center{align-items:center}.gap-2{gap:.5rem}.mb-4{margin-bottom:1rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.margin-bottom-xs{margin-bottom:4px}.margin-right-m{margin-right:16px}.margin-remove{margin:0}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.ImageResponsiveDirective, selector: "[wsUtilsImageResponsive]", inputs: ["src"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlidersDynamicComponent, decorators: [{
             type: Component,
@@ -4506,7 +4575,7 @@ class RatingSummaryComponent {
         return this.ratingService.getRatingIconClass(ratingIndex, avg);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RatingSummaryComponent, deps: [{ token: RatingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: { ratingSummary: "ratingSummary" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"ratingSummary\">\n    <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-row gap-4 items-center\">\n            <div class=\"rating-value ws-mat-default-text nodtranslate\">{{ ratingSummary?.avgRating }}</div>\n            <div class=\"flex flex-col gap-1\">\n                <div class=\"flex flex-row gap-2\">\n                    <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text nodtranslate\"\n                        [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingSummary?.avgRating)}\"\n                        *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                        {{ getRatingIcon(rating, ratingSummary?.avgRating) }}\n                    </mat-icon>\n                </div>\n                <div class=\"text-base nodtranslate\">{{ ratingSummary?.total_number_of_ratings | pipeCountTransform }}\n                    {{'ratingsummary.ratings' | translate}}\n                </div>\n            </div>\n        </div>\n        <div class=\"flex flex-col gap-2\">\n            <ng-container *ngFor=\"let rating of ratingSummary?.breakDown?.slice().reverse()\">\n                <div class=\"flex flex-row gap-4 items-center\">\n                    <div class=\"flex-none font-bold nodtranslate\">{{ rating.key }} {{ 'ratingsummary.star' | translate }}</div>\n                    <div class=\"flex items-center rating-progress nodtranslate\">\n                        <mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"rating?.percent + ' %'\"\n                            [value]=\"rating?.percent\" class=\"rating-bar\"\n                            [attr.aria-labelledby]=\"'m-c-'+ contentId\"\n                            [ngClass]=\"{ 'visibility-0': rating === undefined, 'thick': className}\"\n                            [color]=\"ratingColor\"\n                            i18n-aria-label>\n                            {{rating?.percent}} %\n                        </mat-progress-bar>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n", styles: [".rating-value{font-size:54px;line-height:56px;font-weight:700}.rating-icon{transform:scale(1.2)}.rating-progress{width:100%;max-width:300px;border-radius:4px}.rating-bar.mat-progress-bar{height:8px;border-radius:12px;background-color:#00000014}.ratingColor{background-color:#00000014}.rating-bar .mat-progress-bar-fill:after{background:red}::ng-deep .theme-igot.day-mode .rating-bar .mat-progress-bar-fill:after{background:#ff9800;border-radius:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatLegacyProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: { ratingSummary: "ratingSummary" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"ratingSummary\">\n    <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-row gap-4 items-center\">\n            <div class=\"rating-value ws-mat-default-text nodtranslate\">{{ ratingSummary?.avgRating }}</div>\n            <div class=\"flex flex-col gap-1\">\n                <div class=\"flex flex-row gap-2\">\n                    <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text nodtranslate\"\n                        [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingSummary?.avgRating)}\"\n                        *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                        {{ getRatingIcon(rating, ratingSummary?.avgRating) }}\n                    </mat-icon>\n                </div>\n                <div class=\"text-base nodtranslate\">{{ ratingSummary?.total_number_of_ratings | pipeCountTransform }}\n                    {{'ratingsummary.ratings' | translate}}\n                </div>\n            </div>\n        </div>\n        <div class=\"flex flex-col gap-2\">\n            <ng-container *ngFor=\"let rating of ratingSummary?.breakDown?.slice().reverse()\">\n                <div class=\"flex flex-row gap-4 items-center\">\n                    <div class=\"flex-none font-bold nodtranslate\">{{ rating.key }} {{ 'ratingsummary.star' | translate }}</div>\n                    <div class=\"flex items-center rating-progress nodtranslate\">\n                        <mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"rating?.percent + ' %'\"\n                            [value]=\"rating?.percent\" class=\"rating-bar\"\n                            [attr.aria-labelledby]=\"'m-c-'+ contentId\"\n                            [ngClass]=\"{ 'visibility-0': rating === undefined, 'thick': className}\"\n                            [color]=\"ratingColor\"\n                            i18n-aria-label>\n                            {{rating?.percent}} %\n                        </mat-progress-bar>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n", styles: [".rating-value{font-size:54px;line-height:56px;font-weight:700}.rating-icon{transform:scale(1.2)}.rating-progress{width:100%;max-width:300px;border-radius:4px}.rating-bar.mat-progress-bar{height:8px;border-radius:12px;background-color:#00000014}.ratingColor{background-color:#00000014}.rating-bar .mat-progress-bar-fill:after{background:red}::ng-deep .theme-igot.day-mode .rating-bar .mat-progress-bar-fill:after{background:#ff9800;border-radius:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatLegacyProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RatingSummaryComponent, decorators: [{
             type: Component,
@@ -4593,7 +4662,7 @@ class ContentProgressComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: { contentId: "contentId", progress: "progress", progressType: "progressType", forPreview: "forPreview", className: "className", customClassName: "customClassName" }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "title": "progres" }, properties: { "attr.aria-valuenow": "progress", "id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"progress + ' %'\" [value]=\"progress\" class=\"new-w content-progress {{customClassName}}\"\n  [attr.aria-labelledby]=\"'m-c-'+ contentId\" [ngClass]=\"{ 'visibility-0': progress === undefined, 'thick': className}\"\n  i18n-aria-label> {{ progress }} % </mat-progress-bar>", styles: [".visibility-0{display:none}::ng-deep .mat-progress-bar.thick{height:10px}::ng-deep .theme-igot.day-mode .mat-progress-bar-fill:after{background:#34d6a4 0% 0% no-repeat padding-box}::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:#0000!important}::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:#0000001a!important}::ng-deep .content-progress .mat-progress-bar-fill:after{background:#f69953!important}::ng-deep .theme-igot.day-mode .viewer-progress .mat-progress-bar-background{fill:#0000001a!important}::ng-deep .theme-igot.day-mode .viewer-progress .mat-progress-bar-buffer{background-color:#0000001a!important}::ng-deep .mat-progress-bar.viewer-progress{height:4px;border-radius:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$2.MatLegacyProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: { contentId: "contentId", progress: "progress", progressType: "progressType", forPreview: "forPreview", className: "className", customClassName: "customClassName" }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "title": "progres" }, properties: { "attr.aria-valuenow": "progress", "id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"progress + ' %'\" [value]=\"progress\" class=\"new-w content-progress {{customClassName}}\"\n  [attr.aria-labelledby]=\"'m-c-'+ contentId\" [ngClass]=\"{ 'visibility-0': progress === undefined, 'thick': className}\"\n  i18n-aria-label> {{ progress }} % </mat-progress-bar>", styles: [".visibility-0{display:none}::ng-deep .mat-progress-bar.thick{height:10px}::ng-deep .theme-igot.day-mode .mat-progress-bar-fill:after{background:#34d6a4 0% 0% no-repeat padding-box}::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:#0000!important}::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:#0000001a!important}::ng-deep .content-progress .mat-progress-bar-fill:after{background:#f69953!important}::ng-deep .theme-igot.day-mode .viewer-progress .mat-progress-bar-background{fill:#0000001a!important}::ng-deep .theme-igot.day-mode .viewer-progress .mat-progress-bar-buffer{background-color:#0000001a!important}::ng-deep .mat-progress-bar.viewer-progress{height:4px;border-radius:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.MatLegacyProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentProgressComponent, decorators: [{
             type: Component,
@@ -5060,7 +5129,7 @@ class ReviewsContentComponent {
         this.initiateLoadMore.emit(this.showFilterIndicator);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReviewsContentComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: ReviewComponentDataService }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ReviewsContentComponent, selector: "ws-widget-reviews-content", outputs: { initiateLoadMore: "initiateLoadMore", loadLatestReviews: "loadLatestReviews" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"rating-modal-container\">\n    <div class=\"flex flex-row ratings-container\">\n        <div class=\"flex-1\">\n            <ws-widget-rating-summary [ratingSummary]=\"data?.ratings\"></ws-widget-rating-summary>\n        </div>\n        <div class=\"flex\">\n            <mat-icon class=\"cursor-pointer\" (click)=\"handleCloseModal()\" >close</mat-icon>\n        </div>\n    </div>\n    <div class=\"flex flex-col p-6\">\n        <div class=\"flex flex-col gap-4\">\n            <div class=\"font-base font-bold\">\n                <span *ngIf=\"showFilterIndicator === 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n                <span *ngIf=\"showFilterIndicator !== 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n            </div>\n            <div class=\"flex flex-row gap-3\">\n                <div class=\"flex-1\">\n                    <div class=\"flex flex-row search-div\">\n                        <mat-icon (click)=\"handleFocus()\" class=\"cursor-pointer\">search</mat-icon>\n                        <input #searchInput type=\"text\" class=\"search-input flex\" placeholder=\"Search\" maxlength=\"50\" />\n                        <ng-container *ngIf=\"clearIcon\">\n                            <mat-icon (click)=\"handleClear()\" class=\"cursor-pointer\">close</mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n                <div class=\"flex items-center justify-center w-8\">\n                    <mat-icon class=\"cursor-pointer\" [matMenuTriggerFor]=\"filter\">filter_list</mat-icon>\n                    <mat-menu #filter=\"matMenu\" xPosition=\"before\">\n                        <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Latest'}\"\n                            (click)=\"handleReviewsFilter('Latest')\">\n                            <span class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n                        </button>\n                        <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Top'}\"\n                            (click)=\"handleReviewsFilter('Top')\">\n                            <span class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n                        </button>\n                    </mat-menu>\n                </div>\n            </div>\n        </div>\n        <ng-container *ngIf=\"!reviews || !reviews.length\">\n            <div class=\"flex justify-center items-center no-reviews-found text-lg\">\n                <div class=\"p-4 nodtranslate\">\n                    {{ 'apptocsinglepage.noReviewsFound' | translate }}\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"reviews?.length\">\n            <div class=\"flex flex-col reviews\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"150\" [infiniteScrollContainer]=\"'.reviews'\" [fromRoot]=\"true\" [scrollWindow]=\"false\" (scrolled)=\"handleLoadMore()\">\n                <ng-container *ngFor=\"let eachReview of reviews; let i = index\">\n                    <div class=\"flex flex-row gap-3 p-4\">\n                        <div class=\"flex-1\">\n                            <div class=\"flex flex-col gap-4\">\n                                <div class=\"flex flex-row gap-2\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"flex text-sm nodtranslate\">{{ handleCapitalize(eachReview?.review, 'comment') }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-1 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div class=\"text-sm nodtranslate\">{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\" [photoUrl]=\"eachReview?.photo || ''\" [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div class=\"text-sm nodtranslate\">{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.date\">{{ eachReview?.date | pipeRelativeTime }}</div>\n                                        <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.updatedon\">{{ eachReview?.updatedon | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"separator\" *ngIf=\"reviews.length > (i + 1)\" ></div>\n                </ng-container>\n                <div *ngIf=\"displayLoader\" class=\"flex items-center justify-center mt-6\">\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n    \n</div>\n\n", styles: [".search-div{border:1px solid rgba(0,0,0,.16);border-radius:4px;background:#fff}.search-div .mat-icon{padding:8px}.search-div .search-input{padding:8px 0;border:none;border-radius:8px;width:100%;font-family:Lato}.search-div .search-input:focus{outline:none}.search-div .search-input:focus-visible{outline:none!important}.ratings-container{padding:24px;background-color:#1b4ca114}.separator{border-bottom:2px solid rgba(0,0,0,.1)}.reviews{max-height:320px;overflow-y:auto}.rating-start-value mat-icon{color:#ff9800}::ng-deep .mat-menu-panel{min-width:12em!important;padding:8px 0!important;border-radius:12px;margin-top:4px}::ng-deep .mat-menu-panel .mat-menu-content{padding-top:0!important}::ng-deep .mat-menu-panel .mat-menu-content button{padding:0 16px!important}.no-reviews-found{background-color:#fff;margin-top:16px;border-radius:8px;border:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "directive", type: i9$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ReviewsContentComponent, selector: "ws-widget-reviews-content", outputs: { initiateLoadMore: "initiateLoadMore", loadLatestReviews: "loadLatestReviews" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"rating-modal-container\">\n    <div class=\"flex flex-row ratings-container\">\n        <div class=\"flex-1\">\n            <ws-widget-rating-summary [ratingSummary]=\"data?.ratings\"></ws-widget-rating-summary>\n        </div>\n        <div class=\"flex\">\n            <mat-icon class=\"cursor-pointer\" (click)=\"handleCloseModal()\" >close</mat-icon>\n        </div>\n    </div>\n    <div class=\"flex flex-col p-6\">\n        <div class=\"flex flex-col gap-4\">\n            <div class=\"font-base font-bold\">\n                <span *ngIf=\"showFilterIndicator === 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n                <span *ngIf=\"showFilterIndicator !== 'Top'\" class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n            </div>\n            <div class=\"flex flex-row gap-3\">\n                <div class=\"flex-1\">\n                    <div class=\"flex flex-row search-div\">\n                        <mat-icon (click)=\"handleFocus()\" class=\"cursor-pointer\">search</mat-icon>\n                        <input #searchInput type=\"text\" class=\"search-input flex\" placeholder=\"Search\" maxlength=\"50\" />\n                        <ng-container *ngIf=\"clearIcon\">\n                            <mat-icon (click)=\"handleClear()\" class=\"cursor-pointer\">close</mat-icon>\n                        </ng-container>\n                    </div>\n                </div>\n                <div class=\"flex items-center justify-center w-8\">\n                    <mat-icon class=\"cursor-pointer\" [matMenuTriggerFor]=\"filter\">filter_list</mat-icon>\n                    <mat-menu #filter=\"matMenu\" xPosition=\"before\">\n                        <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Latest'}\"\n                            (click)=\"handleReviewsFilter('Latest')\">\n                            <span class=\"nodtranslate\">{{ 'apptocsinglepage.latestReviews' | translate }}</span>\n                        </button>\n                        <button mat-menu-item class=\"px-3\" [ngClass]=\"{'highlightFilter': showFilterIndicator === 'Top'}\"\n                            (click)=\"handleReviewsFilter('Top')\">\n                            <span class=\"nodtranslate\">{{ 'apptocsinglepage.topReviews' | translate }}</span>\n                        </button>\n                    </mat-menu>\n                </div>\n            </div>\n        </div>\n        <ng-container *ngIf=\"!reviews || !reviews.length\">\n            <div class=\"flex justify-center items-center no-reviews-found text-lg\">\n                <div class=\"p-4 nodtranslate\">\n                    {{ 'apptocsinglepage.noReviewsFound' | translate }}\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"reviews?.length\">\n            <div class=\"flex flex-col reviews\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"150\" [infiniteScrollContainer]=\"'.reviews'\" [fromRoot]=\"true\" [scrollWindow]=\"false\" (scrolled)=\"handleLoadMore()\">\n                <ng-container *ngFor=\"let eachReview of reviews; let i = index\">\n                    <div class=\"flex flex-row gap-3 p-4\">\n                        <div class=\"flex-1\">\n                            <div class=\"flex flex-col gap-4\">\n                                <div class=\"flex flex-row gap-2\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"flex text-sm nodtranslate\">{{ handleCapitalize(eachReview?.review, 'comment') }}</div>\n                                    </div>\n                                    <div class=\"flex flex-row gap-1 rating-start-value\">\n                                        <mat-icon>star</mat-icon>\n                                        <div class=\"text-sm nodtranslate\">{{ eachReview?.rating }}</div>\n                                    </div>\n                                </div>\n                                <div class=\"flex flex-row gap-2 items-center\">\n                                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\" [photoUrl]=\"eachReview?.photo || ''\" [name]=\"eachReview?.firstName\"></ws-widget-avatar-photo>\n                                    <div class=\"flex flex-wrap\">\n                                        <div class=\"text-sm nodtranslate\">{{ handleCapitalize(eachReview?.firstName.toLowerCase(), 'name') }}</div>\n                                        <div class=\"flex items-center mx-2\">\n                                            <span class=\"period\"></span>\n                                        </div>\n                                        <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.date\">{{ eachReview?.date | pipeRelativeTime }}</div>\n                                        <div class=\"text-sm nodtranslate\" *ngIf=\"eachReview?.updatedon\">{{ eachReview?.updatedon | pipeRelativeTime }}</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"separator\" *ngIf=\"reviews.length > (i + 1)\" ></div>\n                </ng-container>\n                <div *ngIf=\"displayLoader\" class=\"flex items-center justify-center mt-6\">\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n    \n</div>\n\n", styles: [".search-div{border:1px solid rgba(0,0,0,.16);border-radius:4px;background:#fff}.search-div .mat-icon{padding:8px}.search-div .search-input{padding:8px 0;border:none;border-radius:8px;width:100%;font-family:Lato}.search-div .search-input:focus{outline:none}.search-div .search-input:focus-visible{outline:none!important}.ratings-container{padding:24px;background-color:#1b4ca114}.separator{border-bottom:2px solid rgba(0,0,0,.1)}.reviews{max-height:320px;overflow-y:auto}.rating-start-value mat-icon{color:#ff9800}::ng-deep .mat-menu-panel{min-width:12em!important;padding:8px 0!important;border-radius:12px;margin-top:4px}::ng-deep .mat-menu-panel .mat-menu-content{padding-top:0!important}::ng-deep .mat-menu-panel .mat-menu-content button{padding:0 16px!important}.no-reviews-found{background-color:#fff;margin-top:16px;border-radius:8px;border:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: ["ratingSummary"] }, { kind: "directive", type: i9$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReviewsContentComponent, decorators: [{
             type: Component,
@@ -6039,7 +6108,7 @@ class AppTocAboutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocAboutComponent, deps: [{ token: RatingService }, { token: i2$1.LoggerService }, { token: i1$3.MatLegacyDialog }, { token: i7.MatLegacySnackBar }, { token: LoadCheckService }, { token: TimerService }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: DiscussUtilsService }, { token: i1$1.Router }, { token: ReviewComponentDataService }, { token: HandleClaimService }, { token: ResetRatingsService }, { token: i2$1.WidgetContentService }, { token: i1$1.ActivatedRoute }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #certificateCard>\n    <ng-container *ngIf=\"!disableCertificate\">\n        <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n            <div class=\"certificate-outer-div\">\n                <div class=\"certificate-card\">\n                    <div class=\"flex flex-col certificate-info p-4 gap-3\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"flex-1\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container *ngIf=\"!skeletonLoader\">\n                                    <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n                                    </div>\n                                    <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n                                        (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n                                    <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n                                        <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n                                            {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Program'\">\n                                            {{ 'apptocsinglepage.completedProgram' | translate }} {{\n                                            content?.completedOn ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Course'\">\n                                            {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n                                    </div>\n\n                                </ng-container>\n                            </div>\n                            <div class=\"flex justify-center download-section\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container>\n                                    <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n                                        (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n                                    <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n                                        [diameter]=\"20\"></mat-spinner>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"flex-1\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n                                    [height]=\"'148px'\"></ws-widget-skeleton-loader>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n                                    <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n                                        alt=\"No certificate image\" />\n                                    <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n                                        alt=\"No certificate image\" />\n                                    <div class=\"flex items-center certificate_overlay\">\n                                        <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n                                            <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n                                            <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n                                            <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n                                                    href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n                                                    mission.karmayogi@gov.in</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ng-container *ngIf=\"content?.certificateObj?.certId\">\n                                    <div class=\"img-container\">\n                                        <img class=\"celebration-animation\"\n                                            src=\"assets/images/animation/leaderboard_animation.gif\" />\n                                        <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n                                        <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n                                            alt=\"certificate image\" />\n\n                                        <div\n                                            [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n                                            <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n                                                <span *ngIf=\"!downloadCertificateBool\">{{\n                                                    'apptoccontentcard.viewCertificate' | translate }}</span>\n                                                <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n                                                    <mat-spinner></mat-spinner>\n                                                </div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n                                    <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n                                    <img class=\"ceritificate-image\"\n                                        [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n                                        alt=\"certificate image\" />\n                                </ng-container> -->\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap gap-3 chips-card\">\n                    <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n                        <div class=\"chip rounded-full p-2 text-xs\"\n                            [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n                            [title]=\"subTheme\">{{ subTheme }}</div>\n                    </ng-container>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n                        (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewMore' | translate}}\n                    </div>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewLess' | translate}}\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #certificateLock>\n            <div class=\"certificate-outer-div locked-certificate-outer-div\">\n                <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n                    <div class=\"flex justify-center items-center certificate-lock-text\">\n                        {{ 'apptoc.certificateLocked' | translate }}\n                    </div>\n                    <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n                        <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n                        <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n                        <div class=\"locking-screen-description\">\n                            {{'apptoc.unlockCertificate' | translate}} <span\n                                class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n                            'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n                            content?.courseCategory : content?.primaryCategory } }}\n                        </div>\n\n                        <button mat-button class=\"surveyFormeButton px-7\"\n                            (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n    <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n        {{ 'apptocsinglepage.competencies' | translate }}\n        <mat-icon\n            class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n            [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n            matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n    </div>\n</ng-template>\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n\n    <ng-container\n        *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n        <div class=\"flex flex-col gap-1 mt-2\">\n            <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n            <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n                content?.source }}</div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n                    '0' }}\n                </div>\n                <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n            <div class=\"flex flex-row\">\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n                <div class=\"flex\">\n                    <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                </div>\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row gap-4 justify-center\">\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                    </div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <div class=\"flex flex-row gap-3\">\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n            <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n                [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\"\n        *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n            <div class=\"desc\"\n                [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n                #descElem>\n\n                <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n                </div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n                    &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 || contentReadData?.purpose\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n            <div class=\"desc\"\n                [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n                #descElem>\n\n                <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n                    class=\"mob-text break-words nodtranslate\"></div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n                    &nbsp;{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </div>\n            <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n                <span class=\"cursor-pointer\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n                    'apptocsinglepage.viewMore' | translate }}</span>\n            </div>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: { condition: "condition", kparray: "kparray", content: "content", contentReadData: "contentReadData", baseContentReadData: "baseContentReadData", skeletonLoader: "skeletonLoader", sticky: "sticky", tocStructure: "tocStructure", pathSet: "pathSet", config: "config", resumeData: "resumeData", forPreview: "forPreview", showReviews: "showReviews", batchData: "batchData", fromViewer: "fromViewer", selectedBatchData: "selectedBatchData", selectedTabValue: "selectedTabValue", fromMarketPlace: "fromMarketPlace", showMarketPlaceCertificate: "showMarketPlaceCertificate", languageList: "languageList", lockCertificate: "lockCertificate" }, outputs: { trigerCompletionSurveyForm: "trigerCompletionSurveyForm" }, viewQueries: [{ propertyName: "summaryElem", first: true, predicate: ["summaryElem"], descendants: true }, { propertyName: "objectivesElem", first: true, predicate: ["objectivesElem"], descendants: true }, { propertyName: "descElem", first: true, predicate: ["descElem"], descendants: true }, { propertyName: "tagsElem", first: true, predicate: ["tagsElem"], descendants: true }, { propertyName: "searchTagElem", first: true, predicate: ["searchTagElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #certificateCard>\n    <ng-container *ngIf=\"!disableCertificate\">\n        <ng-container *ngIf=\"!lockCertificate; else certificateLock\">\n            <div class=\"certificate-outer-div\">\n                <div class=\"certificate-card\">\n                    <div class=\"flex flex-col certificate-info p-4 gap-3\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"flex-1\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'200px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container *ngIf=\"!skeletonLoader\">\n                                    <div class=\"text-sm font-semibold cursor-pointer truncate-3\">{{ content?.name }}\n                                    </div>\n                                    <!-- <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">{{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn ?\n                                        (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div> -->\n                                    <div class=\"text-xs font-light\" *ngIf=\"content?.completedOn\">\n                                        <div *ngIf=\"content?.primaryCategory === 'Standalone Assessment'\">\n                                            {{ 'apptocsinglepage.completedAssessment' | translate }} {{\n                                            content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Program'\">\n                                            {{ 'apptocsinglepage.completedProgram' | translate }} {{\n                                            content?.completedOn ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n\n                                        <div *ngIf=\"content?.primaryCategory === 'Course'\">\n                                            {{ 'apptocsinglepage.completedCourse' | translate }} {{ content?.completedOn\n                                            ?\n                                            (content?.completedOn | date: 'd MMM, y') : 'NA' }}</div>\n                                    </div>\n\n                                </ng-container>\n                            </div>\n                            <div class=\"flex justify-center download-section\">\n                                <ng-container *ngIf=\"skeletonLoader\">\n                                    <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'24px'\"\n                                        [height]=\"'24px'\"></ws-widget-skeleton-loader>\n                                </ng-container>\n                                <ng-container>\n                                    <mat-icon class=\"icon cursor-pointer \" *ngIf=\"!downloadCertificateBool\"\n                                        (click)=\"handleOpenCertificateDialog()\">arrow_downward</mat-icon>\n                                    <mat-spinner *ngIf=\"downloadCertificateBool\" strokeWidth=\"2\"\n                                        [diameter]=\"20\"></mat-spinner>\n                                </ng-container>\n                            </div>\n                        </div>\n                        <div class=\"flex-1\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'280px'\"\n                                    [height]=\"'148px'\"></ws-widget-skeleton-loader>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <div class=\"certificate_box\" *ngIf=\"!content?.certificateObj?.certId\">\n                                    <img *ngIf=\"!fromMarketPlace\" src=\"/assets/icons/toc/no-certificate.svg\"\n                                        alt=\"No certificate image\" />\n                                    <img *ngIf=\"fromMarketPlace\" src=\"/assets/icons/toc/no-certificate-market-place.svg\"\n                                        alt=\"No certificate image\" />\n                                    <div class=\"flex items-center certificate_overlay\">\n                                        <div class=\"flex flex-col text-center gap-1 p-4 text-white mt-4\">\n                                            <div>{{'apptochome.certificationTakesTime' | translate }}</div>\n                                            <!-- <div>{{'apptochome.issuePersistsMailus' | translate }} mission.karmayogi@gov.in -->\n                                            <div>{{'apptochome.issuePersistsMailus' | translate }} <a\n                                                    href=\"mailto:mission.karmayogi@gov.in\" class=\"emailDefault\">\n                                                    mission.karmayogi@gov.in</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ng-container *ngIf=\"content?.certificateObj?.certId\">\n                                    <div class=\"img-container\">\n                                        <img class=\"celebration-animation\"\n                                            src=\"assets/images/animation/leaderboard_animation.gif\" />\n                                        <img *ngIf=\"!fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate.svg'\" alt=\"certificate image\" />\n                                        <img *ngIf=\"fromMarketPlace\" class=\"ceritificate-image\"\n                                            [src]=\"'/assets/icons/toc/no-certificate-market-place.svg'\"\n                                            alt=\"certificate image\" />\n\n                                        <div\n                                            [ngClass]=\"{'view-certificate': downloadCertificateBool, 'view-cert': !downloadCertificateBool}\">\n                                            <button type=\"button\" (click)=\"handleOpenCertificateDialog()\">\n                                                <span *ngIf=\"!downloadCertificateBool\">{{\n                                                    'apptoccontentcard.viewCertificate' | translate }}</span>\n                                                <div *ngIf=\"downloadCertificateBool\" class=\"uploader-status\">\n                                                    <mat-spinner></mat-spinner>\n                                                </div>\n                                            </button>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <!-- <ng-container *ngIf=\"content?.certificateObj?.certData\">\n                                    <img class=\"celebration-animation\" src=\"assets/images/animation/leaderboard_animation.gif\"/>\n                                    <img class=\"ceritificate-image\"\n                                        [src]=\"content?.certificateObj?.certData | pipeSafeSanitizer: 'url'\"\n                                        alt=\"certificate image\" />\n                                </ng-container> -->\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap gap-3 chips-card\">\n                    <ng-container *ngFor=\"let subTheme of contentReadData?.subTheme; let j = index\">\n                        <div class=\"chip rounded-full p-2 text-xs\"\n                            [ngClass]=\"{'hidden': (j > 1 && !content?.viewMore), 'chip-ellipsis': !content?.viewMore && content?.subTheme?.length > 1 }\"\n                            [title]=\"subTheme\">{{ subTheme }}</div>\n                    </ng-container>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.subTheme?.length > 2 && !content?.viewMore\"\n                        (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewMore' | translate}}\n                    </div>\n                    <div class=\"flex items-center text-primary underline cursor-pointer text-xs\"\n                        *ngIf=\"content?.viewMore\" (click)=\"content.viewMore = !content.viewMore\">\n                        {{'competencyCardDetails.viewLess' | translate}}\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-template #certificateLock>\n            <div class=\"certificate-outer-div locked-certificate-outer-div\">\n                <div class=\"certificate-lock p-4 flex flex-col gap-4\">\n                    <div class=\"flex justify-center items-center certificate-lock-text\">\n                        {{ 'apptoc.certificateLocked' | translate }}\n                    </div>\n                    <div class=\"flex justify-center items-center flex-col p-4 gap-2 locking-screen\">\n                        <img src=\"/assets/icons/lock_wht.svg\" alt=\"lock image\" />\n                        <div class=\"certificateLockedText pb-2\">{{'apptoc.certificateLockedMessage' | translate }}</div>\n                        <div class=\"locking-screen-description\">\n                            {{'apptoc.unlockCertificate' | translate}} <span\n                                class=\"surveyFormeText\">{{'apptoc.surveyForm' | translate}}</span> {{\n                            'apptoc.unlockCertificate2' | translate : { courseCategory: content?.courseCategory ?\n                            content?.courseCategory : content?.primaryCategory } }}\n                        </div>\n\n                        <button mat-button class=\"surveyFormeButton px-7\"\n                            (click)=\"openSurveyFormPopup()\">{{'apptoc.completeSurveyNow' | translate}}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n\n<ng-template #competencyLabel>\n    <div class=\"pt-mweb-4 mat-subheading-1 flex items-center gap-2\">\n        {{ 'apptocsinglepage.competencies' | translate }}\n        <mat-icon\n            class=\"cursor-pointer ws-mat-black60-text info-icon mat-icon notranslate material-icons mat-icon-no-color\"\n            [matTooltipPosition]=\"'below'\" #tooltip=\"matTooltip\" (click)=\"tooltip.toggle()\"\n            matTooltip=\"{{ 'apptocsinglepage.competenciesTooltip' | translate }}\">info_outline</mat-icon>\n    </div>\n</ng-template>\n\n<div class=\"flex flex-col my-4 px-4\" [class.mt60]=\"sticky\" [ngClass]=\"isMobile ? '' : 'gap-10'\">\n\n    <ng-container\n        *ngIf=\"(content?.completionStatus === 2 || content?.certificateObj?.certId) && !fromMarketPlace && !disableCertificate\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"showMarketPlaceCertificate && fromMarketPlace\">\n        <div class=\"certificate-container\" *ngIf=\"!skeletonLoader && !disableCertificate\">\n            <div class=\"flex flex-row earned-certificate-container\">\n                <div class=\"ribbon\"></div>\n                <div class=\"certificate-background\">\n                    <div class=\"p-4\">\n                        <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                    </div>\n                    <div class=\"flex flex-col items-end\">\n                        <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"mobile-certificate-container\" *ngIf=\"!skeletonLoader\">\n            <div class=\"earned-certificate-container\">\n                <div class=\"flex flex-row\">\n                    <div class=\"ribbon\"></div>\n                    <div class=\"earned-certificate\">{{ 'apptocsinglepage.certificateEarned' | translate }}</div>\n                </div>\n\n                <div class=\"certificate-background\">\n                    <ng-container [ngTemplateOutlet]=\"certificateCard\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"skeletonLoader\">\n        <ws-widget-skeleton-loader [bindingClass]=\"'flex rounded'\" [height]=\"'148px'\"></ws-widget-skeleton-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"fromViewer || router.url.includes('/viewer/pdf/do_')\">\n        <div class=\"flex flex-col gap-1 mt-2\">\n            <div class=\"flex font-semibold text-base\">{{ handleCapitalize(content?.name) }} </div>\n            <div class=\"mob-text break-words text-sm nodtranslate\">{{ 'cardcontentv2.by' | translate }} {{\n                content?.source }}</div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"content && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-row gap-3 justify-around hideAbove1200\">\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize ||\n                    '0' }}\n                </div>\n                <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n            </div>\n            <div class=\"batch-info\">\n                <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"timer.days >= 0 && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n        <div class=\"flex flex-col gap-6 my-5 batch-timer hideAbove1200\">\n            <div class=\"flex flex-row\">\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n                <div class=\"flex\">\n                    <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                </div>\n                <div class=\"flex-1\">\n                    <div class=\"flex underline\"></div>\n                </div>\n            </div>\n\n            <div class=\"flex flex-row gap-4 justify-center\">\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                    </div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                </div>\n                <div class=\"flex items-center counter-label\">\n                    :\n                </div>\n                <div class=\"flex flex-row gap-1 items-center\">\n                    <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                    <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <div class=\"flex flex-col\" *ngIf=\"fromViewer || isMobile\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <div class=\"flex flex-row gap-3\">\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'60px'\" [height]=\"'60px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader && !fromMarketPlace\">\n            <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\" [isMobile]=\"isMobile\"\n                [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\"\n        *ngIf=\"contentReadData?.summary && contentReadData?.contentId && contentReadData?.contentId.includes('ext_')\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.summary' | translate }}</div>\n            <div class=\"desc\"\n                [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n                #descElem>\n\n                <div [innerHTML]=\"contentReadData?.summary | replaceNbsp\" class=\"mob-text break-words nodtranslate\">\n                </div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n                    &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 || contentReadData?.purpose\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 nodtranslate\">{{ 'apptocsinglepage.learningOutcome' | translate }}</div>\n            <div class=\"desc\"\n                [ngClass]=\"{'mob-desc-ellipsis': description.ellipsis && isMobile, 'desc-ellipsis': description.ellipsis && !isMobile}\"\n                #descElem>\n\n                <div [innerHTML]=\"contentReadData?.instructions || contentReadData?.purpose | replaceNbsp\"\n                    class=\"mob-text break-words nodtranslate\"></div>\n                <div class=\"ws-mat-default-text font-bold cursor-pointer text-sm\" *ngIf=\"description.viewLess\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">\n                    &nbsp;{{ 'apptocsinglepage.viewLess' | translate }}</div>\n            </div>\n            <div class=\"ws-mat-default-text font-bold text-sm\" *ngIf=\"description.ellipsis\">\n                <span class=\"cursor-pointer\"\n                    (click)=\"description.ellipsis = !description.ellipsis; description.viewLess = !description.viewLess\">{{\n                    'apptocsinglepage.viewMore' | translate }}</span>\n            </div>\n        </ng-container>\n    </div>\n\n    <div class=\"flex flex-col\" *ngIf=\"content?.objectives\">\n        <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            <div class=\"flex flex-col gap-2 mt-4\">\n                <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"mat-subheading-1 font-bold pt-mweb-8 nodtranslate\">{{ 'apptocsinglepage.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: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeRelativeTimePipe, name: "pipeRelativeTime" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ReplaceNbspPipe, name: "replaceNbsp" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocAboutComponent, decorators: [{
             type: Component,
@@ -6318,6 +6387,7 @@ class AppTocContentCardV2Component {
         this._cachedIsMilestoneAssessment = false;
         this._cachedIsMilestoneAssessmentLocked = false;
         this._cachedResourceLink = { url: '', queryParams: {} };
+        this._cachedMilestoneCompletedCount = 0;
         this._cacheInitialized = false;
     }
     ngOnInit() {
@@ -6331,7 +6401,6 @@ class AppTocContentCardV2Component {
         // Subscribe to hashmap updates to recompute cached properties when progress changes
         this.hashmapUpdatedSubscription = this.appTocSvc.hashmapUpdated$.subscribe((update) => {
             if (update && update.hashmap) {
-                console.log('🔄 Hashmap updated, recomputing cached properties for:', this.content?.identifier);
                 // IMPORTANT: Update hierarchyMapData with the latest hashmap from the service
                 // This ensures the component uses the updated data, not the stale @Input reference
                 this.hierarchyMapData = update.hashmap;
@@ -6385,6 +6454,7 @@ class AppTocContentCardV2Component {
         this._cachedIsMilestoneAssessment = this.computeIsMilestoneAssessment();
         this._cachedIsMilestoneAssessmentLocked = this.computeIsMilestoneAssessmentLocked();
         this._cachedResourceLink = this.computeResourceLink();
+        this._cachedMilestoneCompletedCount = this.computeMilestoneCompletedCount();
         this._cacheInitialized = true;
     }
     computeIsResource() {
@@ -6583,11 +6653,17 @@ class AppTocContentCardV2Component {
      * 3. NOT all mandatory courses in the same milestone are completed
      */
     computeIsMilestoneAssessmentLocked() {
+        // CRITICAL: Only apply milestone assessment locking for Learning Pathway content
+        // Regular courses should NEVER have their assessments locked by milestone logic
+        if (!this.baseContentReadData || this.baseContentReadData.courseCategory !== 'Learning Pathway') {
+            return false;
+        }
         // Only apply to assessments that are DIRECT children of milestones
         const isMilestoneAssessment = this._cachedIsMilestoneAssessment || this.computeIsMilestoneAssessment();
         console.log(`🔒 computeIsMilestoneAssessmentLocked for "${this.content?.name}":`, {
             isMilestoneAssessment,
             _cachedIsMilestoneAssessment: this._cachedIsMilestoneAssessment,
+            courseCategory: this.baseContentReadData?.courseCategory,
         });
         if (!isMilestoneAssessment) {
             console.log(`🔓 "${this.content?.name}" NOT locked - not a milestone assessment`);
@@ -7183,6 +7259,12 @@ class AppTocContentCardV2Component {
         return this.computeIsMilestone();
     }
     getMilestoneCompletedCount() {
+        if (this._cacheInitialized) {
+            return this._cachedMilestoneCompletedCount;
+        }
+        return this.computeMilestoneCompletedCount();
+    }
+    computeMilestoneCompletedCount() {
         if (!this.content || !this.hierarchyMapData) {
             return 0;
         }
@@ -7193,8 +7275,15 @@ class AppTocContentCardV2Component {
         let completedCount = 0;
         milestoneData.leafNodes.forEach((leafId) => {
             const leafData = this.hierarchyMapData[leafId];
-            if (leafData && leafData.completionStatus === 2) {
-                completedCount++;
+            if (leafData) {
+                // CRITICAL: Check multiple completion indicators
+                const isCompleted = leafData.completionStatus === 2 ||
+                    leafData.status === 2 ||
+                    (leafData.completionPercentage && leafData.completionPercentage >= 100) ||
+                    (leafData.progress && leafData.progress >= 100);
+                if (isCompleted) {
+                    completedCount++;
+                }
             }
         });
         return completedCount;
@@ -7345,8 +7434,27 @@ class AppTocContentCardV2Component {
             }
         });
     }
+    /**
+      * Check if text is truncated (has ellipsis) - for single line text
+      * @param element The HTMLElement to check
+      * @returns true if text is truncated, false otherwise
+      */
+    isTextTruncated(element) {
+        if (!element)
+            return false;
+        return element.offsetWidth < element.scrollWidth;
+    }
+    /**
+     * @param element The HTMLElement to check
+     * @returns true if text is truncated, false otherwise
+     */
+    isMultiLineTruncated(element) {
+        if (!element)
+            return false;
+        return element.scrollHeight > element.clientHeight;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardV2Component, deps: [{ token: i2$1.EventService }, { token: i1$3.MatLegacyDialog }, { token: i0.Renderer2 }, { token: CertificateService }, { token: AppTocService }, { token: i5.ContentLanguageService }, { token: ResourceDownloadHelperService }, { token: i2$1.ConfigurationsService }, { token: i7.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId", componentName: "componentName", index: "index", pathSet: "pathSet", expandActive: "expandActive", hierarchyMapData: "hierarchyMapData", batchData: "batchData", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", mlCourse: "mlCourse", parentMilestoneLocked: "parentMilestoneLocked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n    <ng-container *ngIf=\"isCollection && !isModule\">\n        <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isCollection && isModule\">\n        <ng-container *ngIf=\"content?.moduleResourseCount\">\n            <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"isResource\" class=\"resource-container\"\n        [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n        <div class=\"resource flex  sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n            [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n            <!-- Lock message for curated programs only (shown above content) -->\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled  && !isMilestoneLocked && !isParentMilestoneLocked\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <!-- For locked assessments: show content but make it non-clickable -->\n            <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n                [ngClass]=\"{'ml-3': isEnrolled}\">\n                <div class=\"text-truncate opacity-60\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <div class=\"flex items-center gap-2 w-full\">\n                            <mat-icon class=\"text-gray-500\">lock</mat-icon>\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\">\n                                {{ content?.name | truncate:50 }}\n                            </p>\n                        </div>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </div>\n                \n                <!-- Lock message displayed BELOW assessment details when locked -->\n                <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n                    <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n                        This content is locked. Complete all mandatory items to unlock the assessment.\n                    </span>\n                </div>\n            </div>\n            \n            <!-- Clickable content template (when NOT locked) -->\n            <ng-template #clickableContent>\n                <a class=\"width-expand\"\n                    [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n                    [ngClass]=\"{'ml-3': isEnrolled}\"\n                    [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n                    [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked)  ? resourceLink.queryParams : null\"\n                    [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n                    matTooltipPosition=\"above\">\n                    <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                    <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                        <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\">\n                                {{ content?.name | truncate:50 }}\n                            </p>\n                            <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                                'playerbrief.optional' | translate | titlecase}} </span>\n                        </div>\n                        <!-- for default grey icons -->\n                        <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                            <div class=\"resicons ws-mat-black60-text\">\n                                <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                          content?.mimeType ==='application/x-mpegURL'\">\n                                <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                    *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                    alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                        }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                        hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                        pipeDurationTransform:\n                                        'hms'\n                                        }}</span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n            </ng-template>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container\n                                *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n                                class=\"lock-icon mr-2 margin-bottom-xxs\">\n                            <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n                                <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n                                    [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\">\n                                    <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n                                </p>\n                                <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n                                    <span class=\"locked-text\">Locked</span>\n                                </div>\n                                <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n                                    <span class=\"mandatory-text mat-caption\">Mandatory</span>\n                                </div>\n                            </div>\n                            \n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <!-- Milestone Badge -->\n                        <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n                            <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n                        </div>\n                        <!-- Milestone Description (3 lines with ellipsis) -->\n                        <p *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2  nodtranslate\">\n                            {{ content?.description }}\n                        </p>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                        <!-- Milestone Completion Progress -->\n                        <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2  flex items-center justify-between\">\n                            <div>\n                                <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n                                {{content?.leafNodesCount || 0}} completed</span>\n                            </div>\n                            <!-- View Achievement Button for completed milestones - Outside clickable area -->\n                            <div *ngIf=\"isMilestone && isEnrolled && (getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2)\"\n                                class=\"view-achievement-container mt-2\">\n                                <button type=\"button\" class=\"view-achievement-btn\" [disabled]=\"achievementLoading\"\n                                    (click)=\"viewMilestoneAchievement($event)\">\n                                    <span *ngIf=\"!achievementLoading\">View Achievement</span>\n                                    <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" \n                                        [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n                                </button>\n                            </div>\n                        </div>\n                        <!-- Unlock Criteria Message for Locked Milestones -->\n                        <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n                            <span class=\"locked-criteria-text mat-caption\">\n                                {{ getMilestoneUnlockMessage() }}\n                            </span>\n                        </div>\n                        \n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId", componentName: "componentName", index: "index", pathSet: "pathSet", expandActive: "expandActive", hierarchyMapData: "hierarchyMapData", batchData: "batchData", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", mlCourse: "mlCourse", parentMilestoneLocked: "parentMilestoneLocked" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n    <ng-container *ngIf=\"isCollection && !isModule\">\n        <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isCollection && isModule\">\n        <ng-container *ngIf=\"content?.moduleResourseCount\">\n            <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"isResource\" class=\"resource-container\"\n        [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n        <div class=\"resource flex  sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n            [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n            <!-- Lock message for curated programs only (shown above content) -->\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled  && !isMilestoneLocked && !isParentMilestoneLocked\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <!-- For locked assessments: show content but make it non-clickable -->\n            <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n                [ngClass]=\"{'ml-3': isEnrolled}\">\n                <div class=\"text-truncate opacity-60\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <div class=\"flex items-center gap-2 w-full\">\n                            <mat-icon class=\"text-gray-500\">lock</mat-icon>\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                        </div>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </div>\n                \n                <!-- Lock message displayed BELOW assessment details when locked -->\n                <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n                    <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n                        This content is locked. Complete all mandatory items to unlock the assessment.\n                    </span>\n                </div>\n            </div>\n            \n            <!-- Clickable content template (when NOT locked) -->\n            <ng-template #clickableContent>\n                <a class=\"width-expand\"\n                    [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n                    [ngClass]=\"{'ml-3': isEnrolled}\"\n                    [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n                    [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked)  ? resourceLink.queryParams : null\"\n                    [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n                    matTooltipPosition=\"above\">\n                    <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                    <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                        <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                            <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                                'playerbrief.optional' | translate | titlecase}} </span>\n                        </div>\n                        <!-- for default grey icons -->\n                        <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                            <div class=\"resicons ws-mat-black60-text\">\n                                <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                          content?.mimeType ==='application/x-mpegURL'\">\n                                <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                    *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                    alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                        }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                        hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                        pipeDurationTransform:\n                                        'hms'\n                                        }}</span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n            </ng-template>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container\n                                *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n                                class=\"lock-icon mr-2 margin-bottom-xxs\">\n                            <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n                                <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n                                    [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n                                    [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                    matTooltipPosition=\"above\">\n                                    <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n                                </p>\n                                <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n                                    <span class=\"locked-text\">Locked</span>\n                                </div>\n                                <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n                                    <span class=\"mandatory-text mat-caption\">Mandatory</span>\n                                </div>\n                            </div>\n                            \n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <!-- Milestone Badge -->\n                        <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n                            <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n                        </div>\n                        <!-- Milestone Description (2 lines with ellipsis) -->\n                        <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n                            [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n                            matTooltipPosition=\"above\"\n                            matTooltipClass=\"multiline-tooltip\">\n                            {{ content?.description }}\n                        </p>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                        <!-- Milestone Completion Progress -->\n                        <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2  flex items-center justify-between\">\n                            <div>\n                                <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n                                {{content?.leafNodesCount || 0}} completed</span>\n                            </div>\n                            <!-- View Achievement Button for completed milestones - Outside clickable area -->\n                            <div *ngIf=\"isMilestone && isEnrolled && (getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2)\"\n                                class=\"view-achievement-container mt-2\">\n                                <button type=\"button\" class=\"view-achievement-btn\" [disabled]=\"achievementLoading\"\n                                    (click)=\"viewMilestoneAchievement($event)\">\n                                    <span *ngIf=\"!achievementLoading\">View Achievement</span>\n                                    <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" \n                                        [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n                                </button>\n                            </div>\n                        </div>\n                        <!-- Unlock Criteria Message for Locked Milestones -->\n                        <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n                            <span class=\"locked-criteria-text mat-caption\">\n                                {{ getMilestoneUnlockMessage() }}\n                            </span>\n                        </div>\n                        \n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n                                        [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                        matTooltipPosition=\"above\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [
             trigger('panelInOut', [
                 transition('void => *', [
                     style({ transform: 'translateY(-10%)', opacity: '0' }),
@@ -7370,7 +7478,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            <!-- Lock message for curated programs only (shown above content) -->\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled  && !isMilestoneLocked && !isParentMilestoneLocked\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <!-- For locked assessments: show content but make it non-clickable -->\n            <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n                [ngClass]=\"{'ml-3': isEnrolled}\">\n                <div class=\"text-truncate opacity-60\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <div class=\"flex items-center gap-2 w-full\">\n                            <mat-icon class=\"text-gray-500\">lock</mat-icon>\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\">\n                                {{ content?.name | truncate:50 }}\n                            </p>\n                        </div>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </div>\n                \n                <!-- Lock message displayed BELOW assessment details when locked -->\n                <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n                    <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n                        This content is locked. Complete all mandatory items to unlock the assessment.\n                    </span>\n                </div>\n            </div>\n            \n            <!-- Clickable content template (when NOT locked) -->\n            <ng-template #clickableContent>\n                <a class=\"width-expand\"\n                    [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n                    [ngClass]=\"{'ml-3': isEnrolled}\"\n                    [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n                    [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked)  ? resourceLink.queryParams : null\"\n                    [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n                    matTooltipPosition=\"above\">\n                    <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                    <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                        <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\">\n                                {{ content?.name | truncate:50 }}\n                            </p>\n                            <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                                'playerbrief.optional' | translate | titlecase}} </span>\n                        </div>\n                        <!-- for default grey icons -->\n                        <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                            <div class=\"resicons ws-mat-black60-text\">\n                                <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                          content?.mimeType ==='application/x-mpegURL'\">\n                                <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                    *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                    alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                        }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                        hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                        pipeDurationTransform:\n                                        'hms'\n                                        }}</span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n            </ng-template>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container\n                                *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n                                class=\"lock-icon mr-2 margin-bottom-xxs\">\n                            <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n                                <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n                                    [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\">\n                                    <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n                                </p>\n                                <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n                                    <span class=\"locked-text\">Locked</span>\n                                </div>\n                                <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n                                    <span class=\"mandatory-text mat-caption\">Mandatory</span>\n                                </div>\n                            </div>\n                            \n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <!-- Milestone Badge -->\n                        <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n                            <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n                        </div>\n                        <!-- Milestone Description (3 lines with ellipsis) -->\n                        <p *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2  nodtranslate\">\n                            {{ content?.description }}\n                        </p>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                        <!-- Milestone Completion Progress -->\n                        <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2  flex items-center justify-between\">\n                            <div>\n                                <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n                                {{content?.leafNodesCount || 0}} completed</span>\n                            </div>\n                            <!-- View Achievement Button for completed milestones - Outside clickable area -->\n                            <div *ngIf=\"isMilestone && isEnrolled && (getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2)\"\n                                class=\"view-achievement-container mt-2\">\n                                <button type=\"button\" class=\"view-achievement-btn\" [disabled]=\"achievementLoading\"\n                                    (click)=\"viewMilestoneAchievement($event)\">\n                                    <span *ngIf=\"!achievementLoading\">View Achievement</span>\n                                    <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" \n                                        [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n                                </button>\n                            </div>\n                        </div>\n                        <!-- Unlock Criteria Message for Locked Milestones -->\n                        <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n                            <span class=\"locked-criteria-text mat-caption\">\n                                {{ getMilestoneUnlockMessage() }}\n                            </span>\n                        </div>\n                        \n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}\n"] }]
+                    ], template: "<ng-container *ngIf=\"content && !isPreAssessment\">\n    <ng-container *ngIf=\"isCollection && !isModule\">\n        <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"isCollection && isModule\">\n        <ng-container *ngIf=\"content?.moduleResourseCount\">\n            <ng-container [ngTemplateOutlet]=\"collectionTemplate\">\n            </ng-container>\n        </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"isResource\" class=\"resource-container\"\n        [ngClass]=\"pathSet?.has(content?.identifier) && isEnrolled ? 'content-active-resource': 'content-not-active-resource'\">\n        <div class=\"resource flex  sm:flex-row flex-start width-expand w-100 sm:pr-4 sm:w-auto\"\n            [ngClass]=\"{'activeResource': pathSet?.has(content?.identifier) && isEnrolled}\">\n            <!-- Lock message for curated programs only (shown above content) -->\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            !isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"lock-icon\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2\">\n                        The content is locked. Complete program or all courses to view this module\n                    </span>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT && checkForCuratedProgram &&\n            isContentUnlocked\">\n                <div class=\"content-locking flex w-full flex-middle mb-2 gap-3\">\n                    <mat-icon class=\"unlock-icon\">lock_open_right</mat-icon>\n                    <span class=\"unlock-message mat-body-2\">\n                        This content is unlocked.\n                    </span>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-wrap items-start justify-start sm:justify-end\">\n                <!-- <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\"\n                    mat-icon-button class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n                    <mat-icon>more_vertical</mat-icon>\n                </button> -->\n                <ng-container *ngIf=\"isEnrolled  && !isMilestoneLocked && !isParentMilestoneLocked\">\n                    <ng-container\n                        *ngIf=\"!forPreview &&  content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"completed\">\n                                <div>\n                                    <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                </div>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <circle-progress class=\"flex items-center progress\"\n                                [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                matTooltip=\"In progress\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\"\n                                [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress>\n                            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                    [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                    [progressType]=\"'percentage'\">\n                  </ws-widget-content-progress> -->\n                        </ng-container>\n                    </ng-container>\n                    <ng-template #elseBlock>\n                        <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"11\"\n                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                            [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                            [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                            [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"22\"\n                            [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                        <!-- <p>no data</p> -->\n                    </ng-template>\n                </ng-container>\n            </div>\n            <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n            <!-- For locked assessments: show content but make it non-clickable -->\n            <div class=\"width-expand\" *ngIf=\"isMilestoneAssessmentLocked && isEnrolled; else clickableContent\"\n                [ngClass]=\"{'ml-3': isEnrolled}\">\n                <div class=\"text-truncate opacity-60\">\n                    <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                        <div class=\"flex items-center gap-2 w-full\">\n                            <mat-icon class=\"text-gray-500\">lock</mat-icon>\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate text-gray-600\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT )? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                        </div>\n                        <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                            'playerbrief.optional' | translate | titlecase}} </span>\n                    </div>\n                    <!-- for default grey icons -->\n                    <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                        <div class=\"resicons ws-mat-black60-text\">\n                            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </div>\n                \n                <!-- Lock message displayed BELOW assessment details when locked -->\n                <div class=\"content-locking flex w-full flex-middle mt-2 gap-2 px-2 py-1 bg-orange-50 border-l-4 border-orange-400\">\n                    <mat-icon class=\"lock-icon text-orange-600\" style=\"font-size: 18px; width: 18px; height: 18px;\">lock</mat-icon>\n                    <span class=\"lock-message mat-body-2 text-orange-800\" style=\"font-size: 13px;\">\n                        This content is locked. Complete all mandatory items to unlock the assessment.\n                    </span>\n                </div>\n            </div>\n            \n            <!-- Clickable content template (when NOT locked) -->\n            <ng-template #clickableContent>\n                <a class=\"width-expand\"\n                    [class.disabled]=\"(forPreview || !isEnabled || !isEnrolled || !isBatchInProgess || !isContentUnlocked || isParentMilestoneLocked) ? true : null\"\n                    [ngClass]=\"{'ml-3': isEnrolled}\"\n                    [routerLink]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked) ? resourceLink.url : null\"\n                    [queryParams]=\"(isAllowed && !forPreview && isEnabled && !isParentMilestoneLocked)  ? resourceLink.queryParams : null\"\n                    [matTooltip]=\"isParentMilestoneLocked ? 'This content is locked. Complete previous milestone to view this content.' : ''\"\n                    matTooltipPosition=\"above\">\n                    <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier) && isEnrolled}\"></div>\n                    <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled && isEnrolled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren; raiseTelemetry(); changeResource()\">\n                        <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                            <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                [ngClass]=\"{'text-active': pathSet?.has(content?.identifier) && isEnrolled}\"\n                                [matTooltip]=\"(content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')).length > 50 ? (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT) ? ' - ' + content?.contextCategory : '')) : ''\"\n                                matTooltipPosition=\"above\">\n                                {{ (content?.name + (content?.contextCategory && (content?.primaryCategory === primaryCategory.FINAL_ASSESSMENT)? ' - ' + content?.contextCategory : '')) | truncate:50 }}\n                            </p>\n                            <span class=\"content-type optional-span nodtranslate\" *ngIf=\"content?.optionalReading\">{{\n                                'playerbrief.optional' | translate | titlecase}} </span>\n                        </div>\n                        <!-- for default grey icons -->\n                        <ng-container *ngIf=\"!pathSet?.has(content?.identifier) || !isEnrolled\">\n                            <div class=\"resicons ws-mat-black60-text\">\n                                <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                          content?.mimeType ==='application/x-mpegURL'\">\n                                <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                    class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                    class=\"float-left margin-right-xs\"\n                                    *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                    *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\"\n                                    alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                        }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                                content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                    <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                        hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                        pipeDurationTransform:\n                                        'hms'\n                                        }}</span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n\n                    <!-- for white icons when content highlighted -->\n                    <ng-container *ngIf=\"pathSet?.has(content?.identifier) && isEnrolled\">\n                        <div class=\"resicons ws-mat-white-text\">\n                            <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                            <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                            <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/pdf'\">\n                            <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                            <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                class=\"float-left margin-right-xs\"\n                                *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                            <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n                                *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                            <img src=\"/assets/icons/content/white/module.svg\" class=\"float-left margin-right-xs\"\n                                alt=\"offline sessions\" *ngIf=\"content.mimeType === 'application/offline'\">\n                            <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ content?.maxQuestions\n                                    }} {{ 'playerbrief.questions' | translate | titlecase}}</span>\n                            </ng-container>\n                            <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{ (content?.duration||\n                                    hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                    pipeDurationTransform:\n                                    'hms'\n                                    }}</span>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n\n                    <!-- Download button for pdf resources -->\n                    <ng-container *ngIf=\"shouldShowDownloadButton(content)\">\n                        <div class=\"download-btn mat-body-2 mt-2 sm:mt-1\" (click)=\"downloadContent(content, $event)\"\n                            [ngClass]=\"{'active': pathSet?.has(content?.identifier)}\">\n                            <a class=\"download-link flex items-center\">\n                                <span class=\"\">Download</span>\n                            </a>\n                        </div>\n                    </ng-container>\n                </div>\n            </a>\n            </ng-template>\n        </div>\n    </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n    <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n        class=\"flex flex-middle\">\n        <mat-icon>toc</mat-icon>\n        <h3 class=\"margin-remove nodtranslate\">\n            View Details\n        </h3>\n    </a>\n</mat-menu>\n\n<ng-template #collectionTemplate>\n    <ng-container *ngIf=\"isCollection\">\n        <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n            'close': !content.viewChildren,\n            'course':!isModule, 'module': isModule,\n            'content-active': pathSet?.has(content.identifier) && isEnrolled}\">\n            <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n                <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n            (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n                <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n                    <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                        (click)=\"content.viewChildren = !content.viewChildren\">\n                        <div class=\"flex items-center justify-center mb-1 sm:flex-row\">\n                            <ng-container\n                                *ngIf=\"isModule && isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                                <ng-container\n                                    *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                    <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                        <div class=\"completed mr-2\">\n                                            <div>\n                                                <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                        <circle-progress class=\"flex items-center progress mr-1\"\n                                            [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                            [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                            [outerStrokeColor]=\"progressColor2()\"\n                                            [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                                            [animationDuration]=\"250\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                            [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                            [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                            [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\"\n                                            [showZeroOuterStroke]=false [backgroundPadding]=\"-7\" [startFromZero]=\"false\"\n                                            [backgroundPadding]=\"0\" [imageHeight]=\"18\" [imageWidth]=\"18\"\n                                            [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                                        </circle-progress>\n                                    </ng-container>\n                                </ng-container>\n                                <ng-template #elseBlock>\n                                    <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                        [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\"\n                                        [showUnits]=\"false\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [backgroundPadding]=\"0\" [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\"\n                                        matTooltip=\"Not started\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [imageHeight]=\"22\" [imageWidth]=\"22\"\n                                        [showBackground]=\"false\"></circle-progress>\n                                </ng-template>\n                            </ng-container>\n                            <div\n                                [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier) && isEnrolled}\">\n                            </div>\n                            <img *ngIf=\"isMilestoneLocked\" src=\"assets/icons/hubs/lock.svg\" alt=\"Locked\"\n                                class=\"lock-icon mr-2 margin-bottom-xxs\">\n                            <div class=\"flex-auto flex flex-col\" style=\"min-width: 0;\">\n                                <p class=\"margin-remove text-truncate mat-subheading-1 font-bold nodtranslate\"\n                                    [ngClass]=\"{'text-active': pathSet?.has(content.identifier) && isEnrolled}\"\n                                    [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                    matTooltipPosition=\"above\">\n                                    <span>{{isMilestone ? index -1 : index}}. </span>{{ content?.name | truncate:50 }}\n                                </p>\n                                <div class=\"mt-1\" *ngIf=\"isMilestone && isMilestoneLocked\">\n                                    <span class=\"locked-text\">Locked</span>\n                                </div>\n                                <div class=\"mt-1\" *ngIf=\"content?.isMandatory\">\n                                    <span class=\"mandatory-text mat-caption\">Mandatory</span>\n                                </div>\n                            </div>\n                            \n                            <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Resource</span>\n                            </div>\n                            <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Module</span>\n                            </div>\n                            <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                                <span class=\"nodtranslate\">Course</span>\n                            </div>\n                        </div>\n                        <!-- Milestone Badge -->\n                        <div *ngIf=\"isMilestone\" class=\"milestone-badge mt-2 mb-2\">\n                            <span class=\"milestone-badge-text nodtranslate\">Milestone {{index - 1}}</span>\n                        </div>\n                        <!-- Milestone Description (2 lines with ellipsis) -->\n                        <p #milestoneDescRef *ngIf=\"isMilestone && content?.description\" class=\"milestone-description mt-2 nodtranslate\"\n                            [matTooltip]=\"isMultiLineTruncated(milestoneDescRef) ? content?.description : ''\"\n                            matTooltipPosition=\"above\"\n                            matTooltipClass=\"multiline-tooltip\">\n                            {{ content?.description }}\n                        </p>\n                        <div class=\"flex flex-row gap-3 items-center content-key-values mt-2\">\n                            <mat-icon *ngIf=\"!isModule\" alt=\"course\"\n                                class=\"time-icon icon-color\">video_library</mat-icon>\n                            <img *ngIf=\"isModule\" alt=\"Module\" class=\"time-icon\"\n                                src=\"/assets/icons/content/grey/module.svg\">\n                            <div class=\"text-xs nodtranslate\">{{ (hierarchyMapData[content?.identifier]?.duration ||\n                                120)|\n                                pipeDurationTransform: 'hms' }}</div>\n\n                            <ng-container *ngIf=\"content?.moduleCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.moduleCount}} {{content?.moduleCount > 1?\n                                    'modules' :\n                                    'module'}}</div>\n                            </ng-container>\n                            <ng-container *ngIf=\"content?.leafNodesCount\">\n                                <div class=\"flex items-center\">\n                                    <span class=\"period\"></span>\n                                </div>\n                                <div class=\"text-xs nodtranslate\">{{content?.leafNodesCount}} {{content?.leafNodesCount\n                                    >1 ? 'items':\n                                    'item'}}</div>\n                            </ng-container>\n                        </div>\n                        <!-- Milestone Completion Progress -->\n                        <div *ngIf=\"isMilestone && isEnrolled && !isMilestoneLocked\" class=\"milestone-progress mt-2  flex items-center justify-between\">\n                            <div>\n                                <span class=\"milestone-progress-text nodtranslate\">{{getMilestoneCompletedCount()}} of\n                                {{content?.leafNodesCount || 0}} completed</span>\n                            </div>\n                            <!-- View Achievement Button for completed milestones - Outside clickable area -->\n                            <div *ngIf=\"isMilestone && isEnrolled && (getCompletionPercentage(content?.identifier) >= 100 || getCompletionStatus(content?.identifier) === 2)\"\n                                class=\"view-achievement-container mt-2\">\n                                <button type=\"button\" class=\"view-achievement-btn\" [disabled]=\"achievementLoading\"\n                                    (click)=\"viewMilestoneAchievement($event)\">\n                                    <span *ngIf=\"!achievementLoading\">View Achievement</span>\n                                    <mat-spinner *ngIf=\"achievementLoading\" [diameter]=\"16\" \n                                        [strokeWidth]=\"2\" color=\"primary\" class=\"inline-spinner\"></mat-spinner>\n                                </button>\n                            </div>\n                        </div>\n                        <!-- Unlock Criteria Message for Locked Milestones -->\n                        <div *ngIf=\"isMilestone && isEnrolled && isMilestoneLocked\" class=\"milestone-locked-message mt-2\">\n                            <span class=\"locked-criteria-text mat-caption\">\n                                {{ getMilestoneUnlockMessage() }}\n                            </span>\n                        </div>\n                        \n                    </div>\n                    <!-- For course progress to be shown -->\n                    <ng-container *ngIf=\"isEnrolled && !isMilestoneLocked && !isParentMilestoneLocked\">\n                        <ng-container\n                            *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) && content.primaryCategory === 'Course'\">\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full \">\n                                            <span class=\"mat-body-2 nodtranslate \">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                                <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                    [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                    [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                    [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                    [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                    [outerStrokeLinecap]=\"'butt'\">\n                                </circle-progress> -->\n                            </ng-container>\n                            <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                                <div class=\"flex flex-1\">\n                                    <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                            <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                                {{getCompletionPercentage(content?.identifier)}}%</span>\n                                        </div>\n\n                                        <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                            [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                            [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                        </ws-widget-content-progress>\n                                    </div>\n                                    <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                        <a class=\"ml-5 certificate-btn\"\n                                            [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                            (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                            <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                            <span class=\"nodtranslate\">Certificate</span>\n                                            <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                                class=\"ml-2\">arrow_downward</mat-icon>\n                                            <div class=\"center flex flex-middle certificate-loader\"\n                                                *ngIf=\"downloadCertificateLoading\">\n                                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                    [diameter]=\"16\"></mat-spinner>\n                                            </div>\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n\n                    <div class=\"see-all-container\">\n                        <a href=\"javascript:void(0)\" role=\"button\"\n                            (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                            class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                            <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                            <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                            <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                        </a>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"child-wrapper  \" *ngIf=\"content.viewChildren\" [ngClass]=\"{'open': content.viewChildren,\n            'close': !content.viewChildren,\n            'course':!isModule,\n            'module': isModule}\" [@panelInOut]>\n            <div class=\"children-container\" [ngClass]=\"{'module': isModule, '': !isModule}\">\n                <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [componentName]=\"componentName\"\n                    [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\" [batchId]=\"batchId\"\n                    [rootContentType]=\"rootContentType\" [index]=\"j+1\" [baseContentReadData]=\"baseContentReadData\"\n                    [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                    [mlCourse]=\"mlCourse\" [parentMilestoneLocked]=\"isMilestoneLocked || isParentMilestoneLocked\"\n                    *ngFor=\"let child of content?.children; trackBy: contentTrackBy; let j= index;let isFirst = first\"\n                    [ngClass]=\"{'moduleCard': checkIsModule(child), 'resourceCard': !checkIsModule(child), 'first': isFirst}\">\n                </ws-widget-app-toc-content-card-v2>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n\n<ng-container *ngIf=\"isPreAssessment\">\n    <div class=\"collection-wrapper p-4 flex flex-col position-relative\" [ngClass]=\"{'open': check(content),\n        'course':!isModule, 'module': isModule,\n        'content-active': pathSet?.has(content.identifier)}\">\n        <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n            <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"content.viewChildren = !content.viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n            <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 \">\n\n                <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                    (click)=\"content.viewChildren = !content.viewChildren\">\n                    <div class=\"flex sm:flex-row flex-wrap\">\n                        <ng-container>\n                            <ng-container\n                                *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier) ; else elseBlock\">\n\n                                <ng-container *ngIf=\"getCompletionStatus(content.identifier) == 2\">\n                                    <div class=\"completed mr-2\">\n                                        <div>\n                                            <mat-icon class=\"completed-icon\" [color]=\"blue\">check_circle</mat-icon>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n\n                                    <circle-progress class=\"flex items-center progress mr-1\"\n                                        [percent]=\"getCompletionPercentage(content?.identifier)\" [radius]=\"10\"\n                                        [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [space]=\"-2\"\n                                        [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\"\n                                        [animation]=\"true\" [animationDuration]=\"250\" [showTitle]=\"false\"\n                                        [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                                        [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                                        [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                                        [backgroundPadding]=\"-7\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                                        [imageHeight]=\"18\" [imageWidth]=\"18\" [showBackground]=\"false\"\n                                        [outerStrokeLinecap]=\"'butt'\">\n                                    </circle-progress>\n                                </ng-container>\n                            </ng-container>\n                            <ng-template #elseBlock>\n                                <circle-progress class=\"flex items-center progress mr-1\" [percent]=\"0\" [radius]=\"11\"\n                                    [outerStrokeWidth]=\"2\" [innerStrokeWidth]=\"2\" [outerStrokeColor]=\"'#808080'\"\n                                    [innerStrokeColor]=\"'#808080'\" [animation]=\"true\" [space]=\"-2\" [showUnits]=\"false\"\n                                    [animationDuration]=\"250\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                                    [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\"\n                                    [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                    [imageHeight]=\"22\" [imageWidth]=\"22\" [showBackground]=\"false\"></circle-progress>\n                            </ng-template>\n                        </ng-container>\n                        <div [ngClass]=\"{'collection-active-class': pathSet?.has(content?.identifier)}\"></div>\n                        <!-- <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [ngClass]=\"{'text-active': pathSet?.has(content.identifier)}\">\n                            {{index}}. {{ content?.name | truncate:50 }}\n                        </p> -->\n                        <a class=\"margin-remove text-truncate mat-subheading-1 flex-auto font-bold nodtranslate\"\n                            [class.disabled]=\"null\" [ngClass]=\"{'ml-3': isEnrolled}\"\n                            [routerLink]=\"(isAllowed && !forPreview && isEnabled) ? resourceLink.url : null\"\n                            [queryParams]=\"computedQueryParams\">\n                            <!-- {{content?.courseCategory}} -->\n                            <div [ngClass]=\"{'resource-active': pathSet?.has(content?.identifier)}\"></div>\n                            <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n                                (click)=\"raiseTelemetry(); changeResource()\">\n                                <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                                    <p class=\"margin-remove text-truncate mat-body-2 flex-auto font-bold nodtranslate\"\n                                        [ngClass]=\"{'text-active': pathSet?.has(content?.identifier)}\"\n                                        [matTooltip]=\"content?.name?.length > 50 ? content?.name : ''\"\n                                        matTooltipPosition=\"above\">\n                                        <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                                        {{index}}. {{ content?.name | truncate:50 }}\n\n                                    </p>\n                                    <span class=\"content-type optional-span nodtranslate\"\n                                        *ngIf=\"content?.optionalReading\">{{ 'playerbrief.optional' | translate |\n                                        titlecase}} </span>\n                                </div>\n                                <!-- for default grey icons -->\n                                <ng-container *ngIf=\"!pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-black60-text\">\n                                        <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/grey/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-black60-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n\n                                <!-- for white icons when content highlighted -->\n                                <ng-container *ngIf=\"pathSet?.has(content?.identifier)\">\n                                    <div class=\"resicons ws-mat-white-text\">\n                                        <img src=\"/assets/icons/content/white/video.svg\" alt=\"Video\"\n                                            class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                      content?.mimeType ==='application/x-mpegURL'\">\n                                        <img src=\"/assets/icons/content/white/audio.svg\" alt=\"Audio\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n                                        <img src=\"/assets/icons/content/white/pdf.svg\" alt=\"PDF\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/pdf'\">\n                                        <!-- <img src=\"/assets/icons/content/white/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n                    *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n                                        <img src=\"/assets/icons/content/white/link.svg\" alt=\"InteractiveContent\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n                                        <img src=\"/assets/icons/content/white/assessment.svg\" alt=\"Assessment\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n                                        <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\"\n                                            class=\"float-left margin-right-xs\"\n                                            *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n                                        <img src=\"/assets/icons/content/white/content_copy.svg\" class=\"contenticon\"\n                                            alt=\"Course\"\n                                            *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n                                        <img src=\"/assets/icons/content/white/module.svg\"\n                                            class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n                                            *ngIf=\"content.mimeType === 'application/offline'\">\n                                        <ng-container *ngIf=\"content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                content?.maxQuestions }} {{ 'playerbrief.questions' | translate |\n                                                titlecase}}</span>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!(content.primaryCategory === primaryCategory.FINAL_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.COMP_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT ||\n                            content.primaryCategory === primaryCategory.PRACTICE_RESOURCE)\">\n                                            <span class=\"resourceDuration ws-mat-white-text nodtranslate\">{{\n                                                (content?.duration||\n                                                hierarchyMapData[content?.identifier]?.expectedDuration || 0)|\n                                                pipeDurationTransform:\n                                                'hms'\n                                                }}</span>\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </a>\n                        <!-- <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Resource</span>\n                        </div>\n                        <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Module</span>\n                        </div>\n                        <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                            <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                            <span class=\"nodtranslate\">Course</span>\n                        </div> -->\n                    </div>\n\n                </div>\n                <!-- For course progress to be shown -->\n                <ng-container>\n                    <ng-container\n                        *ngIf=\"!forPreview && content?.identifier && getCompletionPercentage(content?.identifier)\">\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) == 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full \">\n                                        <span class=\"mat-body-2 nodtranslate \">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                            <!-- <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\"\n                                [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\"\n                                [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\"\n                                [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                                [outerStrokeLinecap]=\"'butt'\">\n                            </circle-progress> -->\n                        </ng-container>\n                        <ng-container *ngIf=\"getCompletionStatus(content?.identifier) < 2\">\n                            <div class=\"flex flex-1\">\n                                <div class=\"mt-2 mr-4  flex flex-1 flex-col  progress-container\">\n                                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                                        <span class=\"mat-body-2  ws-mat-black-text nodtranslate\">\n                                            {{getCompletionPercentage(content?.identifier)}}%</span>\n                                    </div>\n\n                                    <ws-widget-content-progress [contentId]=\"content?.progress\"\n                                        [progress]=\"getCompletionPercentage(content?.identifier)\"\n                                        [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                    </ws-widget-content-progress>\n                                </div>\n                                <ng-container *ngIf=\"content?.issuedCertificatesId\">\n                                    <a class=\"ml-5 certificate-btn\"\n                                        [ngClass]=\"{'disable-btn': downloadCertificateLoading || content?.issuedCertificatesId}\"\n                                        (click)=\"!downloadCertificateLoading && downloadCertificate(content?.issuedCertificatesId);$event.stopPropagation()\">\n                                        <!-- <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\"> -->\n                                        <span class=\"nodtranslate\">Certificate</span>\n                                        <mat-icon *ngIf=\"!downloadCertificateLoading\"\n                                            class=\"ml-2\">arrow_downward</mat-icon>\n                                        <div class=\"center flex flex-middle certificate-loader\"\n                                            *ngIf=\"downloadCertificateLoading\">\n                                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\"\n                                                [diameter]=\"16\"></mat-spinner>\n                                        </div>\n                                    </a>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <!-- <div class=\"see-all-container\">\n                    <a href=\"javascript:void(0)\" role=\"button\"\n                        (click)=\"content.viewChildren = !content.viewChildren; expandActive = false\"\n                        class=\"see-all-btn tab custom-chevron customicon\" mat-button>\n                        <mat-icon *ngIf=\"!content.viewChildren && !isModule\">keyboard_arrow_down</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && !isModule\">keyboard_arrow_up</mat-icon>\n                        <mat-icon *ngIf=\"!content.viewChildren && isModule\">add</mat-icon>\n                        <mat-icon *ngIf=\"content.viewChildren && isModule\">remove</mat-icon>\n                    </a>\n                </div> -->\n            </div>\n        </div>\n    </div>\n\n</ng-container>", styles: [".customicon{position:absolute;top:-.5em;right:0}.customicon .mat-icon{color:#1a4ca1}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container{display:flex;align-items:flex-start;flex-direction:column}.resource-container .resource{padding:16px 16px 16px 0;width:100%}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.completed-icon{color:#1a4ca1}.collection-wrapper{padding:1rem}.collection-wrapper.course.content-active{background-color:#1a4ca1;color:#fff}.collection-wrapper.course.content-active .period{background:#fff}.collection-wrapper.course.content-active .text-active,.collection-wrapper.course.content-active .icon-color,.collection-wrapper.course.content-active .customicon .mat-icon{color:#fff}.collection-wrapper.course.content-active .progress-container span{color:#fff!important}.collection-wrapper.course.content-active .milestone-description,.collection-wrapper.course.content-active .milestone-progress-text{color:#fff}.text-active{color:#1a4ca1}.text-active.font-bold{font-weight:600}.activeResource{background-color:#1a4ca1;color:#fff;padding-top:1rem!important;padding-bottom:1rem!important}.activeResource .text-active{color:#fff}.activeResource .text-active.font-bold{font-weight:600}.activeResource .resourceDuration,.activeResource .completed-icon{color:#fff}.collection-wrapper.open{border-bottom:1px solid rgba(0,0,0,.16)}.collection-wrapper.close{border:none}.child-wrapper.open{border-radius:0 0 8px 8px}.children-container .mat-subheading-1{font:500 16px/24px Lato!important}.children-container .resource-container{margin-bottom:16px}.children-container .resource-container .resource{padding:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.first.resourceCard:nth-child(1) .resource{margin-top:16px!important}.first.resourceCard:nth-child(1) .activeResource{margin-top:0!important}.children-container .resourceCard:last-child .resource-container:has(.activeResource){margin-bottom:0!important}.moduleCard:not(:last-child)>.collection-wrapper.close.module{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.moduleCard:not(:last-child)>.collection-wrapper.open.module+.child-wrapper.open{border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.course+.child-wrapper.open .collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-bottom:4px solid rgba(0,0,0,.08);border-radius:0}.collection-wrapper.open.module+.child-wrapper.open{background-color:#eff3f9;border-radius:0;padding-bottom:8px}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{height:16px;width:16px;font-size:16px;vertical-align:middle}.time-icon.icon-color{color:#0009}.period{width:3px;height:3px;background:#0009;border-radius:4px}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:16px;top:24px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-btn{height:24px;background:#1a4ca1;display:flex;justify-content:center;align-items:center;padding:4px 11px;color:#fff;border-radius:20px;border:1px solid white;font:400 12px/16px Lato;cursor:pointer}.certificate-btn .mat-icon{fill:#fff;color:#fff;font-size:16px;height:auto;width:auto}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}.collection-wrapper.course,.collection-wrapper.module,.resource-container .resource{padding-left:16px;box-sizing:border-box;width:100%;overflow:hidden}.children-container.module .resource-container .resource,.course .collection-wrapper.module{padding-left:24px;box-sizing:border-box;width:100%}.course .children-container.module .resource-container .resource{padding-left:32px;box-sizing:border-box;width:100%}.course .resource-container .resource{padding-left:24px}::ng-deep .white-spinner{stroke:#fff!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.lock-message{background:#fff4ec;color:#d13924;padding:10px;border-radius:4px;display:block!important;width:100%}.content-locking{padding:8px 12px;margin-top:8px;margin-left:0;margin-right:0;border-radius:4px;background:#fff4ec;display:flex!important;align-items:center;gap:8px;width:100%;box-sizing:border-box}.lock-icon{color:#f3962f;font-size:20px;flex-shrink:0}.unlock-message{background:#efffec;color:#0c9600;padding:10px}.unlock-icon{color:#0c9600}.download-btn{padding:4px 12px;text-underline-position:from-font;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;cursor:pointer;border-radius:40px;color:#1b4ca1;font-weight:700;border:1px solid #1B4CA1;display:inline-block;pointer-events:auto;position:relative;z-index:1}.activeResource .download-btn.active{color:#fff;border:1px solid #fff}.milestone-badge{display:inline-block;background-color:#fefaf4;border:1px solid #EF951E;border-radius:16px;padding:2px 12px}.milestone-badge-text{font-size:12px;font-weight:500;color:#212121}.milestone-description{font-size:14px;line-height:1.5;color:#000000b3;margin:0;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:break-word!important;white-space:normal!important;max-width:100%!important}.milestone-progress{display:flex;align-items:center}.milestone-progress-text{font-size:14px;font-weight:500;color:#0009}.milestone-locked-message{display:flex;align-items:center;padding:8px 12px;background-color:#f3962f1a;border-left:3px solid #F3962F;border-radius:4px}.locked-criteria-text{font-size:13px;font-weight:400;color:#000000b3;line-height:1.4}.locked-text{font-size:14px;font-weight:500;color:#f3962f}.mandatory-text{color:#d13924!important}.view-achievement-container{display:flex;align-items:center}.view-achievement-btn{background-color:transparent;border:1.5px solid #1a4ca1;color:#1a4ca1;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;min-width:150px}.view-achievement-btn:hover:not(:disabled){background-color:#1a4ca1;color:#fff}.view-achievement-btn:disabled{opacity:.6;cursor:not-allowed}.view-achievement-btn .inline-spinner{display:inline-block}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$1.EventService }, { type: i1$3.MatLegacyDialog }, { type: i0.Renderer2 }, { type: CertificateService }, { type: AppTocService }, { type: i5.ContentLanguageService }, { type: ResourceDownloadHelperService }, { type: i2$1.ConfigurationsService }, { type: i7.MatLegacySnackBar }]; }, propDecorators: { content: [{
                 type: Input
             }], expandAll: [{
@@ -7815,12 +7923,22 @@ class AppTocContentComponent {
         }
         return false;
     }
+    /**
+     * Check if multi-line text is truncated (has ellipsis)
+     * @param element The HTMLElement to check
+     * @returns true if text is truncated, false otherwise
+     */
+    isMultiLineTruncated(element) {
+        if (!element)
+            return false;
+        return element.scrollHeight > element.clientHeight;
+    }
     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 *ngIf=\"content?.courseCategory === 'Learning Pathway' &&  componentName !== 'viewer'\">\n    <!-- Milestone / Learning Path UI -->\n    <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n        <!-- Learning Path Header -->\n        <div class=\"learning-path-header\">\n            <h3 class=\"learning-path-title\">Learning Path</h3>\n            <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n        </div>\n        <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n            <ul class=\"milestone-list\">\n                <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n                    [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n                    <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n                        <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n                            class=\"milestone-checkmark\" alt=\"Completed\" />\n                        <span *ngIf=\"m?.completionStatus !== 2 || getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n                    </div>\n                    <div class=\"milestone-label\">{{ m?.name }} {{getMilestoneCompletedOrNot(m?.identifier)}}</div>\n                </li>\n            </ul>\n        </ng-container>\n        <ng-template #fallbackMilestones>\n            <ul class=\"milestone-list\">\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">Pre Assessment</div>\n                </li>\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n                        <span class=\"milestone-index\">4</span>\n                    </div>\n                    <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n</div>\n<div class=\"bggrey\">\n    <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n        <div class=\"main-container flex flex-col gap-4\">\n            <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <div class=\"padding-left-m flex gap-4 tab-list\">\n                    <ng-container *ngFor=\"let type of typesOfContent\">\n                        <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n                            [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n                            <span>{{type.name}}</span>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n                    [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n                </ws-widget-app-app-toc-sessions-new>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <!-- {{pathSet|json}} -->\n    <ng-template #contentBlock>\n        <ng-container *ngIf=\"!contentLoader\">\n            <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n                <div class=\"content-card \"\n                    *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n                    [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                    <!-- {{card|json}} -->\n                    <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                        [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                        [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n                        [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                        [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n                </div>\n            </ng-container>\n            <ng-template #noChildren>\n                <div *ngIf=\"!isPlayable\"\n                    class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n                    The preview for this type of content is unavailable. Please click on Start button above to view.\n                </div>\n                <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"contentLoader\">\n            <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n        </ng-container>\n    </ng-template>\n    <div *ngIf=\"isPreAssessment\">\n        <div class=\"content-card \"\n            *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n            [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n            <!-- {{card|json}} -->\n            <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n                [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n                [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n        </div>\n    </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;max-width:140px;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "component", type: AppTocSessionsNewComponent, selector: "ws-widget-app-app-toc-sessions-new", inputs: ["batchData", "content", "forPreview", "config", "batchId", "rootId", "rootContentType", "pathSet"] }, { kind: "component", type: AppTocContentCardV2SkeletonComponent, selector: "ws-widget-app-toc-content-card-v2-skeleton" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentComponent, selector: "ws-widget-app-toc-content", inputs: { batchId: "batchId", content: "content", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData", skeletonLoader: "skeletonLoader", tocStructure: "tocStructure", config: "config", hierarchyMapData: "hierarchyMapData", pathSet: "pathSet", componentName: "componentName", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", contentReadData: "contentReadData" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' &&  componentName !== 'viewer'\">\n    <!-- Milestone / Learning Path UI -->\n    <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n        <!-- Learning Path Header -->\n        <div class=\"learning-path-header\">\n            <h3 class=\"learning-path-title\">Learning Path</h3>\n            <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n        </div>\n        <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n            <ul class=\"milestone-list\">\n                <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n                    [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n                    <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n                        <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n                            class=\"milestone-checkmark\" alt=\"Completed\" />\n                        <span *ngIf=\"m?.completionStatus !== 2 || getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n                    </div>\n                    <div class=\"milestone-label\">\n                        <p class=\"mb-0 leading-none\">\n                            <span *ngIf=\"m?.contextCategory\">{{m?.contextCategory}}</span>\n                            <span *ngIf=\"m?.courseCategory\">{{m?.courseCategory}} {{ i}}</span>\n                        </p>\n                        <p #milestoneNameRef class=\"milestone-name-text leading-none\"\n                            [matTooltip]=\"isMultiLineTruncated(milestoneNameRef) ? m?.name : ''\"\n                            matTooltipPosition=\"above\"\n                            matTooltipClass=\"multiline-tooltip\">\n                            {{ m?.name }}\n                        </p>\n                    </div>\n                </li>\n            </ul>\n        </ng-container>\n        <ng-template #fallbackMilestones>\n            <ul class=\"milestone-list\">\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">Pre Assessment</div>\n                </li>\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n                        <span class=\"milestone-index\">4</span>\n                    </div>\n                    <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n</div>\n<div class=\"bggrey\">\n    <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n        <div class=\"main-container flex flex-col gap-4\">\n            <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <div class=\"padding-left-m flex gap-4 tab-list\">\n                    <ng-container *ngFor=\"let type of typesOfContent\">\n                        <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n                            [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n                            <span>{{type.name}}</span>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n                    [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n                </ws-widget-app-app-toc-sessions-new>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <!-- {{pathSet|json}} -->\n    <ng-template #contentBlock>\n        <ng-container *ngIf=\"!contentLoader\">\n            <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n                <div class=\"content-card \"\n                    *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n                    [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                    <!-- {{card|json}} -->\n                    <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                        [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                        [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n                        [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                        [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n                </div>\n            </ng-container>\n            <ng-template #noChildren>\n                <div *ngIf=\"!isPlayable\"\n                    class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n                    The preview for this type of content is unavailable. Please click on Start button above to view.\n                </div>\n                <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"contentLoader\">\n            <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n        </ng-container>\n    </ng-template>\n    <div *ngIf=\"isPreAssessment\">\n        <div class=\"content-card \"\n            *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n            [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n            <!-- {{card|json}} -->\n            <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n                [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n                [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n        </div>\n    </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}.milestone-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;word-break:break-word}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "component", type: AppTocSessionsNewComponent, selector: "ws-widget-app-app-toc-sessions-new", inputs: ["batchData", "content", "forPreview", "config", "batchId", "rootId", "rootContentType", "pathSet"] }, { kind: "component", type: AppTocContentCardV2SkeletonComponent, selector: "ws-widget-app-toc-content-card-v2-skeleton" }] }); }
 }
 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 *ngIf=\"content?.courseCategory === 'Learning Pathway' &&  componentName !== 'viewer'\">\n    <!-- Milestone / Learning Path UI -->\n    <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n        <!-- Learning Path Header -->\n        <div class=\"learning-path-header\">\n            <h3 class=\"learning-path-title\">Learning Path</h3>\n            <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n        </div>\n        <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n            <ul class=\"milestone-list\">\n                <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n                    [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n                    <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n                        <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n                            class=\"milestone-checkmark\" alt=\"Completed\" />\n                        <span *ngIf=\"m?.completionStatus !== 2 || getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n                    </div>\n                    <div class=\"milestone-label\">{{ m?.name }} {{getMilestoneCompletedOrNot(m?.identifier)}}</div>\n                </li>\n            </ul>\n        </ng-container>\n        <ng-template #fallbackMilestones>\n            <ul class=\"milestone-list\">\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">Pre Assessment</div>\n                </li>\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n                        <span class=\"milestone-index\">4</span>\n                    </div>\n                    <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n</div>\n<div class=\"bggrey\">\n    <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n        <div class=\"main-container flex flex-col gap-4\">\n            <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <div class=\"padding-left-m flex gap-4 tab-list\">\n                    <ng-container *ngFor=\"let type of typesOfContent\">\n                        <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n                            [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n                            <span>{{type.name}}</span>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n                    [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n                </ws-widget-app-app-toc-sessions-new>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <!-- {{pathSet|json}} -->\n    <ng-template #contentBlock>\n        <ng-container *ngIf=\"!contentLoader\">\n            <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n                <div class=\"content-card \"\n                    *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n                    [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                    <!-- {{card|json}} -->\n                    <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                        [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                        [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n                        [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                        [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n                </div>\n            </ng-container>\n            <ng-template #noChildren>\n                <div *ngIf=\"!isPlayable\"\n                    class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n                    The preview for this type of content is unavailable. Please click on Start button above to view.\n                </div>\n                <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"contentLoader\">\n            <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n        </ng-container>\n    </ng-template>\n    <div *ngIf=\"isPreAssessment\">\n        <div class=\"content-card \"\n            *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n            [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n            <!-- {{card|json}} -->\n            <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n                [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n                [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n        </div>\n    </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;max-width:140px;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}\n"] }]
+            args: [{ selector: 'ws-widget-app-toc-content', template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' &&  componentName !== 'viewer'\">\n    <!-- Milestone / Learning Path UI -->\n    <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n        <!-- Learning Path Header -->\n        <div class=\"learning-path-header\">\n            <h3 class=\"learning-path-title\">Learning Path</h3>\n            <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n        </div>\n        <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n            <ul class=\"milestone-list\">\n                <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n                    [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n                    <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n                        <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n                            class=\"milestone-checkmark\" alt=\"Completed\" />\n                        <span *ngIf=\"m?.completionStatus !== 2 || getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n                    </div>\n                    <div class=\"milestone-label\">\n                        <p class=\"mb-0 leading-none\">\n                            <span *ngIf=\"m?.contextCategory\">{{m?.contextCategory}}</span>\n                            <span *ngIf=\"m?.courseCategory\">{{m?.courseCategory}} {{ i}}</span>\n                        </p>\n                        <p #milestoneNameRef class=\"milestone-name-text leading-none\"\n                            [matTooltip]=\"isMultiLineTruncated(milestoneNameRef) ? m?.name : ''\"\n                            matTooltipPosition=\"above\"\n                            matTooltipClass=\"multiline-tooltip\">\n                            {{ m?.name }}\n                        </p>\n                    </div>\n                </li>\n            </ul>\n        </ng-container>\n        <ng-template #fallbackMilestones>\n            <ul class=\"milestone-list\">\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">Pre Assessment</div>\n                </li>\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n                        <span class=\"milestone-index\">4</span>\n                    </div>\n                    <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n</div>\n<div class=\"bggrey\">\n    <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n        <div class=\"main-container flex flex-col gap-4\">\n            <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <div class=\"padding-left-m flex gap-4 tab-list\">\n                    <ng-container *ngFor=\"let type of typesOfContent\">\n                        <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n                            [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n                            <span>{{type.name}}</span>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n                    [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n                </ws-widget-app-app-toc-sessions-new>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <!-- {{pathSet|json}} -->\n    <ng-template #contentBlock>\n        <ng-container *ngIf=\"!contentLoader\">\n            <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n                <div class=\"content-card \"\n                    *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n                    [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                    <!-- {{card|json}} -->\n                    <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                        [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                        [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n                        [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                        [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n                </div>\n            </ng-container>\n            <ng-template #noChildren>\n                <div *ngIf=\"!isPlayable\"\n                    class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n                    The preview for this type of content is unavailable. Please click on Start button above to view.\n                </div>\n                <!-- <ng-container *ngIf=\"isPlayable\" [wsResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"contentLoader\">\n            <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n        </ng-container>\n    </ng-template>\n    <div *ngIf=\"isPreAssessment\">\n        <div class=\"content-card \"\n            *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n            [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n            <!-- {{card|json}} -->\n            <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n                [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n                [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n        </div>\n    </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}.milestone-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;word-break:break-word}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: AppTocService }, { type: i2$1.ConfigurationsService }]; }, propDecorators: { batchId: [{
                 type: Input
             }], content: [{
@@ -8419,13 +8537,13 @@ class AssignmentViewerV2Component {
             URL.revokeObjectURL(this.fileUrl);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerV2Component, deps: [{ token: i1$1.Router }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: i5$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$3.MatLegacyDialog }, { token: i7.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerV2Component, deps: [{ token: i1$1.Router }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: i5$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$3.MatLegacyDialog }, { token: i7.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssignmentViewerV2Component, selector: "ws-widget-app-assignment-viewerV2", ngImport: i0, template: "<div class=\"document-viewer-container\">\n  <div *ngIf=\"isLoading\" class=\"loading-container\">\n    <mat-spinner diameter=\"40\"></mat-spinner>\n    <p class=\"loading-text\">Loading document...</p>\n  </div>\n  <div *ngIf=\"error\" class=\"error-container\">\n    <mat-icon class=\"error-icon\">error_outline</mat-icon>\n    <p class=\"error-message\">{{ errorMessage }}</p>\n  </div>\n  <div class=\"flex\">\n    <div class=\"left-div\" style=\"width: 100%; height: calc(100vh - 107px);\">\n      <div class=\"left-title font-bold p-5 mb-5 flex flex-row justify-between\">\n        <div>Post Assignment Preview</div>\n        <div class=\"flex gap-4\">\n          <button mat-button class=\"discard-btn cursor-pointer\" (click)=\"handleClose()\">\n            {{ 'userAssignments.discard' | translate }}\n          </button>\n          <button mat-button class=\"submit-btn cursor-pointer\" (click)=\"handleSubmitAssignment()\">\n            {{ 'userAssignments.submit' | translate }}\n          </button>\n        </div>\n      </div>\n      <div class=\"loaders\" *ngIf=\"isLoading\">\n        <mat-spinner diameter=\"40\" class=\"blue-spinner m-auto\"></mat-spinner>\n      </div>\n      <div *ngIf=\"showPdfViewer && !isLoading && !error\" class=\"iframe-container pl-4\">\n        <iframe title=\"PDF Document Viewer\" [src]=\"safeSrc\" height=\"600px\" style=\"border: none;\" (load)=\"onIframeLoad()\"\n          (error)=\"onIframeError()\">\n        </iframe>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".document-viewer-container{position:relative;background-color:transparent;border-radius:4px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;z-index:99999}.loading-container .loading-text{margin-top:16px;color:#0009}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;min-height:200px}.error-container .error-icon{font-size:48px;height:48px;width:48px;color:#f44336;margin-bottom:16px}.error-container .error-message{font-size:18px;color:#000000de;margin-bottom:16px}.error-container .error-details{font-size:14px;color:#0009;text-align:left;margin-bottom:16px;background-color:#f5f5f5;padding:12px;border-radius:4px;border-left:4px solid #f44336}.error-container .error-details p{margin:4px 0;word-break:break-all}.error-container .error-details strong{color:#000000de}.error-container .retry-btn{margin-top:8px}.iframe-container{width:735px;height:740px}.iframe-container iframe{border:none;width:735px;height:100%}.unsupported-container{display:flex;align-items:center;justify-content:center;height:600px;width:100%}.unsupported-container .unsupported-message{text-align:center;padding:32px;max-width:500px}.unsupported-container .unsupported-message .file-icon{font-size:64px;height:64px;width:64px;color:#1b4ca1;margin-bottom:16px}.unsupported-container .unsupported-message h3{font-size:24px;color:#000000de;margin-bottom:16px;font-weight:500}.unsupported-container .unsupported-message p{font-size:16px;color:#0009;margin-bottom:8px;line-height:1.5}.unsupported-container .unsupported-message .action-buttons{margin-top:24px}.unsupported-container .unsupported-message .action-buttons .download-btn{padding:12px 24px;font-size:16px;font-weight:500}.unsupported-container .unsupported-message .action-buttons .download-btn mat-icon{margin-right:8px}.unsupported-container .unsupported-message .info-note{margin-top:24px;padding:16px;background-color:#f5f5f5;border-radius:8px;display:flex;align-items:center;gap:8px}.unsupported-container .unsupported-message .info-note .info-icon{color:#1b4ca1;font-size:18px;height:18px;width:18px}.unsupported-container .unsupported-message .info-note small{color:#0009;font-size:14px;line-height:1.4}.download-container{display:flex;align-items:center;justify-content:center;height:100px;width:100%}.download-container .download-btn{padding:12px 24px;font-size:16px;font-weight:500}.download-container .download-btn mat-icon{margin-right:8px}.title-div{font-size:24px;font-weight:500;font-family:Lato;border-bottom:2px solid #c3c3c3}.left-title{border-bottom:1px solid #c3c3c3}.discard-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.submit-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.loaders{position:absolute;top:50%;left:50%}.loaders .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loaders .blue-spinner ::ng-deep .mat-progress-spinner circle,.loaders .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerV2Component, decorators: [{
             type: Component,
             args: [{ selector: 'ws-widget-app-assignment-viewerV2', template: "<div class=\"document-viewer-container\">\n  <div *ngIf=\"isLoading\" class=\"loading-container\">\n    <mat-spinner diameter=\"40\"></mat-spinner>\n    <p class=\"loading-text\">Loading document...</p>\n  </div>\n  <div *ngIf=\"error\" class=\"error-container\">\n    <mat-icon class=\"error-icon\">error_outline</mat-icon>\n    <p class=\"error-message\">{{ errorMessage }}</p>\n  </div>\n  <div class=\"flex\">\n    <div class=\"left-div\" style=\"width: 100%; height: calc(100vh - 107px);\">\n      <div class=\"left-title font-bold p-5 mb-5 flex flex-row justify-between\">\n        <div>Post Assignment Preview</div>\n        <div class=\"flex gap-4\">\n          <button mat-button class=\"discard-btn cursor-pointer\" (click)=\"handleClose()\">\n            {{ 'userAssignments.discard' | translate }}\n          </button>\n          <button mat-button class=\"submit-btn cursor-pointer\" (click)=\"handleSubmitAssignment()\">\n            {{ 'userAssignments.submit' | translate }}\n          </button>\n        </div>\n      </div>\n      <div class=\"loaders\" *ngIf=\"isLoading\">\n        <mat-spinner diameter=\"40\" class=\"blue-spinner m-auto\"></mat-spinner>\n      </div>\n      <div *ngIf=\"showPdfViewer && !isLoading && !error\" class=\"iframe-container pl-4\">\n        <iframe title=\"PDF Document Viewer\" [src]=\"safeSrc\" height=\"600px\" style=\"border: none;\" (load)=\"onIframeLoad()\"\n          (error)=\"onIframeError()\">\n        </iframe>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".document-viewer-container{position:relative;background-color:transparent;border-radius:4px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;z-index:99999}.loading-container .loading-text{margin-top:16px;color:#0009}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;min-height:200px}.error-container .error-icon{font-size:48px;height:48px;width:48px;color:#f44336;margin-bottom:16px}.error-container .error-message{font-size:18px;color:#000000de;margin-bottom:16px}.error-container .error-details{font-size:14px;color:#0009;text-align:left;margin-bottom:16px;background-color:#f5f5f5;padding:12px;border-radius:4px;border-left:4px solid #f44336}.error-container .error-details p{margin:4px 0;word-break:break-all}.error-container .error-details strong{color:#000000de}.error-container .retry-btn{margin-top:8px}.iframe-container{width:735px;height:740px}.iframe-container iframe{border:none;width:735px;height:100%}.unsupported-container{display:flex;align-items:center;justify-content:center;height:600px;width:100%}.unsupported-container .unsupported-message{text-align:center;padding:32px;max-width:500px}.unsupported-container .unsupported-message .file-icon{font-size:64px;height:64px;width:64px;color:#1b4ca1;margin-bottom:16px}.unsupported-container .unsupported-message h3{font-size:24px;color:#000000de;margin-bottom:16px;font-weight:500}.unsupported-container .unsupported-message p{font-size:16px;color:#0009;margin-bottom:8px;line-height:1.5}.unsupported-container .unsupported-message .action-buttons{margin-top:24px}.unsupported-container .unsupported-message .action-buttons .download-btn{padding:12px 24px;font-size:16px;font-weight:500}.unsupported-container .unsupported-message .action-buttons .download-btn mat-icon{margin-right:8px}.unsupported-container .unsupported-message .info-note{margin-top:24px;padding:16px;background-color:#f5f5f5;border-radius:8px;display:flex;align-items:center;gap:8px}.unsupported-container .unsupported-message .info-note .info-icon{color:#1b4ca1;font-size:18px;height:18px;width:18px}.unsupported-container .unsupported-message .info-note small{color:#0009;font-size:14px;line-height:1.4}.download-container{display:flex;align-items:center;justify-content:center;height:100px;width:100%}.download-container .download-btn{padding:12px 24px;font-size:16px;font-weight:500}.download-container .download-btn mat-icon{margin-right:8px}.title-div{font-size:24px;font-weight:500;font-family:Lato;border-bottom:2px solid #c3c3c3}.left-title{border-bottom:1px solid #c3c3c3}.discard-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.submit-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.loaders{position:absolute;top:50%;left:50%}.loaders .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loaders .blue-spinner ::ng-deep .mat-progress-spinner circle,.loaders .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i1$5.DomSanitizer }, { type: i5$3.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i1$5.DomSanitizer }, { type: i5$4.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i1$3.MatLegacyDialog }, { type: i7.MatLegacySnackBar }]; } });
@@ -8702,13 +8820,13 @@ class AppTocBatchAssignmentsComponent {
             return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBatchAssignmentsComponent, deps: [{ token: i1$1.Router }, { token: i7.MatLegacySnackBar }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i5$3.MatDialog }, { token: i1$3.MatLegacyDialog }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBatchAssignmentsComponent, deps: [{ token: i1$1.Router }, { token: i7.MatLegacySnackBar }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i5$4.MatDialog }, { token: i1$3.MatLegacyDialog }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocBatchAssignmentsComponent, selector: "ws-widget-app-batch-assignments", inputs: { content: "content" }, ngImport: i0, template: "<div class=\"guide-container\">\n  <div class=\"flex flex row\">\n    <div class=\"info-banner info-banner-warning flex flex-row itm-center\">\n      <mat-icon class=\"info-icon margin-right-s assignment-note-icon\">info</mat-icon>\n      <span class=\"assignment-note\"> {{ 'userAssignments.note' | translate }}</span>\n    </div>\n  </div>\n  <ng-container *ngFor=\"let assignment of assignments; index as i\">\n    <div class=\"guide-card\">\n      <div class=\"content flex gap-4 justify-between flex-middle\">\n        <div class=\"note-title\">{{i + 1}}. {{assignment.title}} </div>\n        <div class=\"flex flex-middle gap-3\" *ngIf=\"!assignment.expand\">\n          <button mat-button class=\"download-btn cursor-pointer flex align-center justify-center\"\n            (click)=\"downloadFile(assignment)\" [disabled]=\"assignment.downloading\">\n            <span *ngIf=\"assignment.downloading\" class=\"white-spinner\">\n              <mat-spinner diameter=\"16\" class=\"mr-2\" [style.color]=\"'white'\" strokeWidth=\"2\"></mat-spinner>Download\n            </span>\n            <span *ngIf=\"!assignment.downloading\">\n              {{ 'userAssignments.download' | translate }}\n            </span>\n          </button>\n          <ng-container *ngIf=\"assignment.status === 'DRAFT'\">\n            <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n              (click)=\"triggerFileUpload(assignment)\">\n              {{ 'userAssignments.upload' | translate }}\n            </button>\n          </ng-container>\n          <ng-container *ngIf=\"assignment.status !== 'DRAFT'\">\n            <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n              (click)=\"triggerFileUpload(assignment)\"\n              [disabled]=\"assignment.status === 'SUBMITTED' || assignment.status === 'EVALUATED' || !assignment.enableDownload\">\n              {{ 'userAssignments.upload' | translate }}\n            </button>\n          </ng-container>\n          <!-- <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n            (click)=\"triggerFileUpload(assignment)\" [disabled]=\"!assignment.enableDownload\">\n            Upload\n          </button> -->\n          <input #resourceFile type=\"file\" name=\"sResourceFile\" id=\"sResourceFile\" class=\"hidden\"\n            (change)=\"fileInputEmit(resourceFile.files)\">\n          <ng-container *ngIf=\"assignment.status === 'SUBMITTED'\">\n            <button mat-button class=\"view-btn cursor-pointer flex align-center justify-center\"\n              (click)=\"handleViewFeedback(assignment)\" [disabled]=\"true\">{{ 'userAssignments.viewFeedback' | translate\n              }}</button>\n          </ng-container>\n          <ng-container *ngIf=\"assignment.status === 'EVALUATED'\">\n            <button mat-button class=\"view-btn cursor-pointer flex align-center justify-center\"\n              (click)=\"handleViewFeedback(assignment)\">{{ 'userAssignments.viewFeedback' | translate }}</button>\n          </ng-container>\n\n        </div>\n        <mat-icon class=\"cursor-pointer c-icon\" *ngIf=\"assignment.expand\"\n          (click)=\"assignment.expand = !assignment.expand\">\n          close\n        </mat-icon>\n      </div>\n      <div class=\"flex justify-between flex-col mt-4 feedback-container\"\n        *ngIf=\"assignment.expand && assignment?.submissionMeta?.marksGiven\">\n        <div class=\"font-bold font-style\">\n          <div>\n            {{ 'userAssignments.marksObtained' | translate }} - {{getMarks(assignment?.submissionMeta)}}\n          </div>\n        </div>\n        <div class=\"font-bold font-style\">{{ 'userAssignments.instructorFeedback' | translate }}</div>\n        <div class=\"font-style\">\n          {{assignment?.submissionMeta?.instructorFeedback}}\n        </div>\n      </div>\n\n    </div>\n  </ng-container>\n</div>\n<div class=\"flex justify-center items-center mt-4 loader\" *ngIf=\"isLoading\">\n  <mat-spinner strokeWidth=\"3\" [diameter]=\"50\" [style.stroke]=\"'#1B4CA1'\" class=\"blue-spinner\"></mat-spinner>\n</div>\n\n\n<!-- No teachers resources message -->\n<div *ngIf=\"assignments?.length === 0\" class=\"no-resources-message mt-4\">\n  {{ 'userAssignments.noAssignments' | translate }}\n</div>", styles: [".download-btn,.view-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.view-btn:disabled{cursor:not-allowed;opacity:.6}.c-icon{color:#1b4ca1!important;font-size:14px;height:14px;width:14px;font-weight:600;border:1px solid #1B4CA1;border-radius:11px;padding:2px}.upload-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.font-style{font-size:14px;font-family:Lato}.note-title{font-family:Lato;font-weight:500;font-style:Medium;font-size:16px;line-height:100%;letter-spacing:0%}.guide-card{border-radius:8px;background-color:#fff;padding:16px;margin:16px 0}.download-btn,.download-link{cursor:pointer;transition:opacity .2s ease}.download-btn:disabled,.download-link:disabled{opacity:.6;cursor:not-allowed}.upload-btn:disabled{cursor:not-allowed;border:1px solid #858181!important;color:#858181}mat-spinner{display:inline-block;vertical-align:middle;margin-right:8px}.download-btn .white-spinner ::ng-deep .mat-progress-spinner circle,.download-btn .white-spinner ::ng-deep .mat-spinner circle{stroke:#fff!important}.loader{position:absolute;top:50%;left:50%}.loader .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loader .blue-spinner ::ng-deep .mat-progress-spinner circle,.loader .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}.feedback-container{background:#f4f8ff;padding:15px;border-radius:10px}.assignment-note{font-family:Lato;color:#1b4ca1}.assignment-note-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#f0aa6b!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBatchAssignmentsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ws-widget-app-batch-assignments', template: "<div class=\"guide-container\">\n  <div class=\"flex flex row\">\n    <div class=\"info-banner info-banner-warning flex flex-row itm-center\">\n      <mat-icon class=\"info-icon margin-right-s assignment-note-icon\">info</mat-icon>\n      <span class=\"assignment-note\"> {{ 'userAssignments.note' | translate }}</span>\n    </div>\n  </div>\n  <ng-container *ngFor=\"let assignment of assignments; index as i\">\n    <div class=\"guide-card\">\n      <div class=\"content flex gap-4 justify-between flex-middle\">\n        <div class=\"note-title\">{{i + 1}}. {{assignment.title}} </div>\n        <div class=\"flex flex-middle gap-3\" *ngIf=\"!assignment.expand\">\n          <button mat-button class=\"download-btn cursor-pointer flex align-center justify-center\"\n            (click)=\"downloadFile(assignment)\" [disabled]=\"assignment.downloading\">\n            <span *ngIf=\"assignment.downloading\" class=\"white-spinner\">\n              <mat-spinner diameter=\"16\" class=\"mr-2\" [style.color]=\"'white'\" strokeWidth=\"2\"></mat-spinner>Download\n            </span>\n            <span *ngIf=\"!assignment.downloading\">\n              {{ 'userAssignments.download' | translate }}\n            </span>\n          </button>\n          <ng-container *ngIf=\"assignment.status === 'DRAFT'\">\n            <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n              (click)=\"triggerFileUpload(assignment)\">\n              {{ 'userAssignments.upload' | translate }}\n            </button>\n          </ng-container>\n          <ng-container *ngIf=\"assignment.status !== 'DRAFT'\">\n            <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n              (click)=\"triggerFileUpload(assignment)\"\n              [disabled]=\"assignment.status === 'SUBMITTED' || assignment.status === 'EVALUATED' || !assignment.enableDownload\">\n              {{ 'userAssignments.upload' | translate }}\n            </button>\n          </ng-container>\n          <!-- <button mat-button class=\"upload-btn cursor-pointer flex align-center justify-center\"\n            (click)=\"triggerFileUpload(assignment)\" [disabled]=\"!assignment.enableDownload\">\n            Upload\n          </button> -->\n          <input #resourceFile type=\"file\" name=\"sResourceFile\" id=\"sResourceFile\" class=\"hidden\"\n            (change)=\"fileInputEmit(resourceFile.files)\">\n          <ng-container *ngIf=\"assignment.status === 'SUBMITTED'\">\n            <button mat-button class=\"view-btn cursor-pointer flex align-center justify-center\"\n              (click)=\"handleViewFeedback(assignment)\" [disabled]=\"true\">{{ 'userAssignments.viewFeedback' | translate\n              }}</button>\n          </ng-container>\n          <ng-container *ngIf=\"assignment.status === 'EVALUATED'\">\n            <button mat-button class=\"view-btn cursor-pointer flex align-center justify-center\"\n              (click)=\"handleViewFeedback(assignment)\">{{ 'userAssignments.viewFeedback' | translate }}</button>\n          </ng-container>\n\n        </div>\n        <mat-icon class=\"cursor-pointer c-icon\" *ngIf=\"assignment.expand\"\n          (click)=\"assignment.expand = !assignment.expand\">\n          close\n        </mat-icon>\n      </div>\n      <div class=\"flex justify-between flex-col mt-4 feedback-container\"\n        *ngIf=\"assignment.expand && assignment?.submissionMeta?.marksGiven\">\n        <div class=\"font-bold font-style\">\n          <div>\n            {{ 'userAssignments.marksObtained' | translate }} - {{getMarks(assignment?.submissionMeta)}}\n          </div>\n        </div>\n        <div class=\"font-bold font-style\">{{ 'userAssignments.instructorFeedback' | translate }}</div>\n        <div class=\"font-style\">\n          {{assignment?.submissionMeta?.instructorFeedback}}\n        </div>\n      </div>\n\n    </div>\n  </ng-container>\n</div>\n<div class=\"flex justify-center items-center mt-4 loader\" *ngIf=\"isLoading\">\n  <mat-spinner strokeWidth=\"3\" [diameter]=\"50\" [style.stroke]=\"'#1B4CA1'\" class=\"blue-spinner\"></mat-spinner>\n</div>\n\n\n<!-- No teachers resources message -->\n<div *ngIf=\"assignments?.length === 0\" class=\"no-resources-message mt-4\">\n  {{ 'userAssignments.noAssignments' | translate }}\n</div>", styles: [".download-btn,.view-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.view-btn:disabled{cursor:not-allowed;opacity:.6}.c-icon{color:#1b4ca1!important;font-size:14px;height:14px;width:14px;font-weight:600;border:1px solid #1B4CA1;border-radius:11px;padding:2px}.upload-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.font-style{font-size:14px;font-family:Lato}.note-title{font-family:Lato;font-weight:500;font-style:Medium;font-size:16px;line-height:100%;letter-spacing:0%}.guide-card{border-radius:8px;background-color:#fff;padding:16px;margin:16px 0}.download-btn,.download-link{cursor:pointer;transition:opacity .2s ease}.download-btn:disabled,.download-link:disabled{opacity:.6;cursor:not-allowed}.upload-btn:disabled{cursor:not-allowed;border:1px solid #858181!important;color:#858181}mat-spinner{display:inline-block;vertical-align:middle;margin-right:8px}.download-btn .white-spinner ::ng-deep .mat-progress-spinner circle,.download-btn .white-spinner ::ng-deep .mat-spinner circle{stroke:#fff!important}.loader{position:absolute;top:50%;left:50%}.loader .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loader .blue-spinner ::ng-deep .mat-progress-spinner circle,.loader .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}.feedback-container{background:#f4f8ff;padding:15px;border-radius:10px}.assignment-note{font-family:Lato;color:#1b4ca1}.assignment-note-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#f0aa6b!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i7.MatLegacySnackBar }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i5$3.MatDialog }, { type: i1$3.MatLegacyDialog }, { type: i1$1.ActivatedRoute }]; }, propDecorators: { content: [{
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i7.MatLegacySnackBar }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i5$4.MatDialog }, { type: i1$3.MatLegacyDialog }, { type: i1$1.ActivatedRoute }]; }, propDecorators: { content: [{
                 type: Input
             }] } });
 
@@ -9838,13 +9956,13 @@ class AssignmentViewerComponent {
             duration,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerComponent, deps: [{ token: i1$1.Router }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: i5$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$3.MatLegacyDialog }, { token: i7.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerComponent, deps: [{ token: i1$1.Router }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: i5$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$3.MatLegacyDialog }, { token: i7.MatLegacySnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssignmentViewerComponent, selector: "ws-widget-app-assignment-viewer", viewQueries: [{ propertyName: "docIframe", first: true, predicate: ["docIframe"], descendants: true }], ngImport: i0, template: "<div class=\"document-viewer-container\">\n  <!-- Loading spinner -->\n  <div *ngIf=\"loading\" class=\"loading-container\">\n    <mat-spinner diameter=\"40\"></mat-spinner>\n    <p class=\"loading-text\">Loading document...</p>\n  </div>\n\n  <!-- Error message -->\n  <div *ngIf=\"error\" class=\"error-container\">\n    <mat-icon class=\"error-icon\">error_outline</mat-icon>\n    <p class=\"error-message\">{{ errorMessage }}</p>\n    <p class=\"error-url\">URL: {{ documentUrl }}</p>\n  </div>\n\n\n  <div class=\"flex\">\n    <div class=\"left-div\" style=\"width: 100%; height: calc(100vh - 107px);\">\n      <div class=\"left-title font-bold p-5 mb-5 flex flex-row justify-between\">\n        <div>Post Assignment Preview</div>\n        <div class=\"flex gap-4\">\n          <button mat-button class=\"discard-btn cursor-pointer\" (click)=\"handleClose()\">\n            {{ 'userAssignments.discard' | translate }}\n          </button>\n          <button mat-button class=\"submit-btn cursor-pointer\" (click)=\"handleSubmitAssignment()\">\n            {{ 'userAssignments.submit' | translate }}\n          </button>\n        </div>\n      </div>\n      <div class=\"loaders\" *ngIf=\"loading\">\n        <mat-spinner diameter=\"40\" class=\"blue-spinner m-auto\"></mat-spinner>\n      </div>\n      <div *ngIf=\"!loading && !error\">\n        <div *ngIf=\"!error\" class=\"iframe-container  pb-4\" [ngStyle]=\"{ 'height': height, 'width': '100%' }\">\n          <iframe *ngIf=\"safeSrc\" [src]=\"safeSrc\" [ngStyle]=\"{ 'width': '100%', 'height': '100%' }\" frameborder=\"1\"\n            (load)=\"onIframeLoad()\" (error)=\"onIframeError()\">\n          </iframe>\n        </div>\n      </div>\n    </div>\n  </div>", styles: [".document-viewer-container{position:relative;background-color:transparent;border-radius:4px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;z-index:99999}.loading-container .loading-text{margin-top:16px;color:#0009}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;min-height:200px}.error-container .error-icon{font-size:48px;height:48px;width:48px;color:#f44336;margin-bottom:16px}.error-container .error-message{font-size:18px;color:#000000de;margin-bottom:8px}.error-container .error-url{font-size:14px;color:#0009;word-break:break-all;max-width:100%}.iframe-container{width:800px}.iframe-container iframe{border:none;width:800px;height:100%}.title-div{font-size:24px;font-weight:500;font-family:Lato;border-bottom:2px solid #c3c3c3}.left-title{border-bottom:1px solid #c3c3c3}.discard-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.submit-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.loaders{position:absolute;top:50%;left:50%}.loaders .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loaders .blue-spinner ::ng-deep .mat-progress-spinner circle,.loaders .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ws-widget-app-assignment-viewer', template: "<div class=\"document-viewer-container\">\n  <!-- Loading spinner -->\n  <div *ngIf=\"loading\" class=\"loading-container\">\n    <mat-spinner diameter=\"40\"></mat-spinner>\n    <p class=\"loading-text\">Loading document...</p>\n  </div>\n\n  <!-- Error message -->\n  <div *ngIf=\"error\" class=\"error-container\">\n    <mat-icon class=\"error-icon\">error_outline</mat-icon>\n    <p class=\"error-message\">{{ errorMessage }}</p>\n    <p class=\"error-url\">URL: {{ documentUrl }}</p>\n  </div>\n\n\n  <div class=\"flex\">\n    <div class=\"left-div\" style=\"width: 100%; height: calc(100vh - 107px);\">\n      <div class=\"left-title font-bold p-5 mb-5 flex flex-row justify-between\">\n        <div>Post Assignment Preview</div>\n        <div class=\"flex gap-4\">\n          <button mat-button class=\"discard-btn cursor-pointer\" (click)=\"handleClose()\">\n            {{ 'userAssignments.discard' | translate }}\n          </button>\n          <button mat-button class=\"submit-btn cursor-pointer\" (click)=\"handleSubmitAssignment()\">\n            {{ 'userAssignments.submit' | translate }}\n          </button>\n        </div>\n      </div>\n      <div class=\"loaders\" *ngIf=\"loading\">\n        <mat-spinner diameter=\"40\" class=\"blue-spinner m-auto\"></mat-spinner>\n      </div>\n      <div *ngIf=\"!loading && !error\">\n        <div *ngIf=\"!error\" class=\"iframe-container  pb-4\" [ngStyle]=\"{ 'height': height, 'width': '100%' }\">\n          <iframe *ngIf=\"safeSrc\" [src]=\"safeSrc\" [ngStyle]=\"{ 'width': '100%', 'height': '100%' }\" frameborder=\"1\"\n            (load)=\"onIframeLoad()\" (error)=\"onIframeError()\">\n          </iframe>\n        </div>\n      </div>\n    </div>\n  </div>", styles: [".document-viewer-container{position:relative;background-color:transparent;border-radius:4px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;z-index:99999}.loading-container .loading-text{margin-top:16px;color:#0009}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;min-height:200px}.error-container .error-icon{font-size:48px;height:48px;width:48px;color:#f44336;margin-bottom:16px}.error-container .error-message{font-size:18px;color:#000000de;margin-bottom:8px}.error-container .error-url{font-size:14px;color:#0009;word-break:break-all;max-width:100%}.iframe-container{width:800px}.iframe-container iframe{border:none;width:800px;height:100%}.title-div{font-size:24px;font-weight:500;font-family:Lato;border-bottom:2px solid #c3c3c3}.left-title{border-bottom:1px solid #c3c3c3}.discard-btn{background-color:#fff;border:1px solid #1B4CA1!important;border-radius:16px;padding:6px 16px;color:#1b4ca1;font-weight:600;font-size:14px;font-family:Lato}.submit-btn{background-color:#1b4ca1;border-radius:16px;padding:6px 16px;color:#fff;font-size:14px;font-weight:600;border:none!important;font-family:Lato}.loaders{position:absolute;top:50%;left:50%}.loaders .blue-spinner{transform:translate(-50%,-50%);z-index:1000}.loaders .blue-spinner ::ng-deep .mat-progress-spinner circle,.loaders .blue-spinner ::ng-deep .mat-spinner circle{stroke:#1b4ca1!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i1$5.DomSanitizer }, { type: i5$3.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: AppTocService }, { type: i2$1.ConfigurationsService }, { type: i1$5.DomSanitizer }, { type: i5$4.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i1$3.MatLegacyDialog }, { type: i7.MatLegacySnackBar }]; }, propDecorators: { docIframe: [{
@@ -14838,7 +14956,7 @@ class EnrollLanguageDialogueComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnrollLanguageDialogueComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EnrollLanguageDialogueComponent, selector: "ws-app-enroll-language-dialogue", ngImport: i0, template: "<mat-dialog-content>\n    <div class=\"dialog-header text-left flex flex-col justify-between align-items-center\">\n        <p class=\"mat-subheading-1 text-center\">Choose Your Preferred Language</p>\n        <p class=\"mat-body-2 text-center\">This course is available in multiple languages. You can select one to begin.</p>\n    </div>\n    <div class=\"lang-msg-wrapper\">\n        <mat-form-field appearance=\"outline\" class=\"lang-select-wrapper\">\n            <mat-select [(ngModel)]=\"selectedLanguage\" (ngModelChange)=\"onLanguageChange($event)\" class=\"mat-body-1\">\n                <mat-option *ngFor=\"let lang of languageList\" [value]=\"lang\">\n                    {{ lang.name }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n\n        <div class=\"flex items-center justify-center\">\n            <a (click)=\"this.dialogRef.close()\" class=\"cursor-pointer mat-stroked-button custom-rounded margin-right-m\">Cancel</a>\n            <a (click)=\"onSubmit()\" class=\"cursor-pointer action-button\">Confirm & Start Course</a>\n        </div>\n    </div>\n</mat-dialog-content>\n", styles: [".lang-radio-btn{width:100%;margin-bottom:16px}.mat-form-field{width:100%}.custom-rounded{border:1px solid #1a4ca1!important;border-radius:50px;padding:8px 16px;height:40px;display:flex;align-items:center;justify-content:center;color:#1a4ca1!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLegacyDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EnrollLanguageDialogueComponent, selector: "ws-app-enroll-language-dialogue", ngImport: i0, template: "<mat-dialog-content>\n    <div class=\"dialog-header text-left flex flex-col justify-between align-items-center\">\n        <p class=\"mat-subheading-1 text-center\">Choose Your Preferred Language</p>\n        <p class=\"mat-body-2 text-center\">This course is available in multiple languages. You can select one to begin.</p>\n    </div>\n    <div class=\"lang-msg-wrapper\">\n        <mat-form-field appearance=\"outline\" class=\"lang-select-wrapper\">\n            <mat-select [(ngModel)]=\"selectedLanguage\" (ngModelChange)=\"onLanguageChange($event)\" class=\"mat-body-1\">\n                <mat-option *ngFor=\"let lang of languageList\" [value]=\"lang\">\n                    {{ lang.name }}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n\n        <div class=\"flex items-center justify-center\">\n            <a (click)=\"this.dialogRef.close()\" class=\"cursor-pointer mat-stroked-button custom-rounded margin-right-m\">Cancel</a>\n            <a (click)=\"onSubmit()\" class=\"cursor-pointer action-button\">Confirm & Start Course</a>\n        </div>\n    </div>\n</mat-dialog-content>\n", styles: [".lang-radio-btn{width:100%;margin-bottom:16px}.mat-form-field{width:100%}.custom-rounded{border:1px solid #1a4ca1!important;border-radius:50px;padding:8px 16px;height:40px;display:flex;align-items:center;justify-content:center;color:#1a4ca1!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLegacyDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnrollLanguageDialogueComponent, decorators: [{
             type: Component,
@@ -14930,7 +15048,7 @@ class SurveyFormQuestionComponent {
         this.questionValues.emit(answerDetails);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurveyFormQuestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SurveyFormQuestionComponent, isStandalone: true, selector: "ws-app-survey-form-question", inputs: { questionForm: "questionForm", fieldDetails: "fieldDetails" }, outputs: { questionValues: "questionValues" }, ngImport: i0, template: "<form [formGroup]=\"questionForm\" class=\"pb-2 q-element mb-4 question-container\">\n    <div class=\"flex items-start\">\n        <div class=\"font-semibold margin-remove flex\"\n            [ngClass]=\"{'required' : fieldDetails.isRequired, 'pb-3': otherFieldType.includes(fieldDetails.fieldType)}\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{questionForm.value?.question}}\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"fieldDetails.fieldType\">\n        <ng-container *ngSwitchCase=\"'dropdown'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select placeholder=\"Select...\" formControlName=\"answer\">\n                    <mat-option value=\"{{obj.value}}\"\n                        *ngFor=\" let obj of fieldDetails?.values\">{{obj?.key}}</mat-option>\n                </mat-select>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'phone number'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" maxlength=\"10\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'date'\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [matDatepicker]=\"picker\" formControlName=\"answer\">\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'boolean'\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"answer\">\n                <mat-radio-button [value]=\"true\" class=\"pr-10 pb-2\">True</mat-radio-button>\n                <mat-radio-button [value]=\"false\" class=\"pr-10 pb-2\">False</mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'email'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.invalidEmail' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'rating'\">\n            <div class=\"rating-container\">\n                <mat-icon *ngFor=\"let star of stars; index as i\" class=\"stat-mat-icon\"\n                    [ngClass]=\"{ 'filled': i < questionForm.controls.answer.value }\" (click)=\"setRating(i + 1)\">\n                    star\n                </mat-icon>\n            </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'text'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'textarea'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <textarea matInput i18n-placeholder placeholder=\"Type here...\" rows=\"4\" cols=\"5\"\n                    formControlName=\"answer\"></textarea>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n            <mat-radio-group class=\"pt-2 custom\" formControlName=\"answer\">\n                <mat-radio-button *ngFor=\"let obj of fieldDetails?.values\" [value]=\"obj.value\" class=\"pr-5 pb-2\">\n                    {{ obj.key }}\n                </mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'numeric'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" type=\"text\"\n                    maxlength=\"18\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <section class=\"pt-2\">\n                <ng-container *ngFor=\"let objct of fieldDetails?.values; let i = index\">\n                    <mat-checkbox [checked]=\"objct.checked\" [value]=\"objct.value\" class=\"pr-5 pb-2 custom\"\n                        (change)=\"checkboxClicked($event, i)\">\n                        {{ objct.key }}\n                    </mat-checkbox>\n                </ng-container>\n            </section>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"fieldDetails.notApplicable\">\n        <div class=\"mt-2\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"isNA\" (change)=\"sectionChange()\">\n                <mat-radio-button class=\"pr-10 pb-2 my-raido\" value=\"true\">N/A</mat-radio-button>\n            </mat-radio-group>\n        </div>\n    </ng-container>\n</form>", styles: [".drag-icon{font-size:20px;color:#000}.q-element{padding:16px;background:#fff;border-radius:8px}.rating-container{display:flex;gap:5px}.stat-mat-icon{font-size:30px;cursor:pointer;color:#ccc;width:30px;height:30px}.stat-mat-icon.filled{color:#ffca28}:host ::ng-deep .question-container .mat-form-field-wrapper{padding:0!important}:host ::ng-deep .question-container .mat-radio-checked{background-color:#fff!important}:host ::ng-deep .question-container .mat-radio-label-content{font-size:14px!important;font-family:Montserrat}:host ::ng-deep .custom .mat-checkbox-layout,:host ::ng-deep .custom .mat-radio-label{white-space:normal!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatLegacyInputModule }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "ngmodule", type: MatLegacyRadioModule }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatLegacySelectModule }, { kind: "component", type: i5$4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatLegacyCheckboxModule }, { kind: "component", type: i13$2.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatLegacyFormFieldModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SurveyFormQuestionComponent, isStandalone: true, selector: "ws-app-survey-form-question", inputs: { questionForm: "questionForm", fieldDetails: "fieldDetails" }, outputs: { questionValues: "questionValues" }, ngImport: i0, template: "<form [formGroup]=\"questionForm\" class=\"pb-2 q-element mb-4 question-container\">\n    <div class=\"flex items-start\">\n        <div class=\"font-semibold margin-remove flex\"\n            [ngClass]=\"{'required' : fieldDetails.isRequired, 'pb-3': otherFieldType.includes(fieldDetails.fieldType)}\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{questionForm.value?.question}}\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"fieldDetails.fieldType\">\n        <ng-container *ngSwitchCase=\"'dropdown'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select placeholder=\"Select...\" formControlName=\"answer\">\n                    <mat-option value=\"{{obj.value}}\"\n                        *ngFor=\" let obj of fieldDetails?.values\">{{obj?.key}}</mat-option>\n                </mat-select>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'phone number'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" maxlength=\"10\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'date'\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [matDatepicker]=\"picker\" formControlName=\"answer\">\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'boolean'\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"answer\">\n                <mat-radio-button [value]=\"true\" class=\"pr-10 pb-2\">True</mat-radio-button>\n                <mat-radio-button [value]=\"false\" class=\"pr-10 pb-2\">False</mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'email'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.invalidEmail' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'rating'\">\n            <div class=\"rating-container\">\n                <mat-icon *ngFor=\"let star of stars; index as i\" class=\"stat-mat-icon\"\n                    [ngClass]=\"{ 'filled': i < questionForm.controls.answer.value }\" (click)=\"setRating(i + 1)\">\n                    star\n                </mat-icon>\n            </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'text'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'textarea'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <textarea matInput i18n-placeholder placeholder=\"Type here...\" rows=\"4\" cols=\"5\"\n                    formControlName=\"answer\"></textarea>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n            <mat-radio-group class=\"pt-2 custom\" formControlName=\"answer\">\n                <mat-radio-button *ngFor=\"let obj of fieldDetails?.values\" [value]=\"obj.value\" class=\"pr-5 pb-2\">\n                    {{ obj.key }}\n                </mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'numeric'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" type=\"text\"\n                    maxlength=\"18\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <section class=\"pt-2\">\n                <ng-container *ngFor=\"let objct of fieldDetails?.values; let i = index\">\n                    <mat-checkbox [checked]=\"objct.checked\" [value]=\"objct.value\" class=\"pr-5 pb-2 custom\"\n                        (change)=\"checkboxClicked($event, i)\">\n                        {{ objct.key }}\n                    </mat-checkbox>\n                </ng-container>\n            </section>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"fieldDetails.notApplicable\">\n        <div class=\"mt-2\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"isNA\" (change)=\"sectionChange()\">\n                <mat-radio-button class=\"pr-10 pb-2 my-raido\" value=\"true\">N/A</mat-radio-button>\n            </mat-radio-group>\n        </div>\n    </ng-container>\n</form>", styles: [".drag-icon{font-size:20px;color:#000}.q-element{padding:16px;background:#fff;border-radius:8px}.rating-container{display:flex;gap:5px}.stat-mat-icon{font-size:30px;cursor:pointer;color:#ccc;width:30px;height:30px}.stat-mat-icon.filled{color:#ffca28}:host ::ng-deep .question-container .mat-form-field-wrapper{padding:0!important}:host ::ng-deep .question-container .mat-radio-checked{background-color:#fff!important}:host ::ng-deep .question-container .mat-radio-label-content{font-size:14px!important;font-family:Montserrat}:host ::ng-deep .custom .mat-checkbox-layout,:host ::ng-deep .custom .mat-radio-label{white-space:normal!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatLegacyInputModule }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "ngmodule", type: MatLegacyRadioModule }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatLegacySelectModule }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatLegacyCheckboxModule }, { kind: "component", type: i13$2.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatLegacyFormFieldModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurveyFormQuestionComponent, decorators: [{
             type: Component,
@@ -15483,7 +15601,7 @@ class AppTocV2Service {
                 "identifier": milestone.id,
                 "description": milestone.description,
                 "mimeType": "application/vnd.ekstep.content-collection",
-                "duration": "3600",
+                "duration": "0",
                 "primaryCategory": "Milestone",
                 "courseCategory": "Milestone",
                 "createdBy": "25311a4f-fa42-4cf7-882a-5e79198edfcb",
@@ -15509,6 +15627,7 @@ class AppTocV2Service {
                     // Set parent reference for courses inside milestone
                     mileStoneCourse.parent = milestone.id;
                     mileStoneCourse['moduleCount'] = 0;
+                    mileStoneData['duration'] = String(Number(mileStoneData['duration']) + Number(mileStoneCourse?.duration || 0));
                     this.tocSvc.mapModuleCount(mileStoneCourse);
                     if (mileStoneCourse && mileStoneCourse?.leafNodes && mileStoneCourse?.leafNodes?.length) {
                         leafNodes = [...leafNodes, ...mileStoneCourse.leafNodes];
@@ -15531,7 +15650,7 @@ class AppTocV2Service {
             milestoneIndex++;
         });
         contentHeirarchy['leafNodes'] = [...leafNodes];
-        console.log('content Heirarchy', contentHeirarchy);
+        contentHeirarchy['leafNodesCount'] = leafNodes.length;
         return contentHeirarchy;
     }
     mapModuleCount(content) {
@@ -15547,9 +15666,6 @@ class AppTocV2Service {
         }
     }
     mapContentHierarchyProgressUpdate(contentHeirarchyData, enrollmentListData) {
-        console.log('=== mapContentHierarchyProgressUpdate ===');
-        console.log('Content hierarchy:', contentHeirarchyData?.name, contentHeirarchyData?.identifier);
-        console.log('Enrollment list data:', enrollmentListData);
         if (contentHeirarchyData && contentHeirarchyData.children) {
             let totalLeafNodes = 0;
             let totalCompletedLeafNodes = 0;
@@ -15666,13 +15782,6 @@ class AppTocV2Service {
         }
         // Try both contentId and collectionId as the API response may use either field
         const nodeEnrollData = enrollment?.contentList?.find((ele) => ele?.contentId === node.identifier || ele?.collectionId === node.identifier);
-        console.log(`Updating node progress for ${node.identifier} (${node.name}):`, {
-            hasEnrollment: !!enrollment,
-            hasNodeEnrollData: !!nodeEnrollData,
-            nodeEnrollData,
-            currentCompletionStatus: node.completionStatus,
-            currentCompletionPercentage: node.completionPercentage
-        });
         if (enrollment && nodeEnrollData && nodeEnrollData.status < 2) {
             node.completionPercentage = nodeEnrollData.completionPercentage || nodeEnrollData.progress || 0;
             node.completionStatus = Number(nodeEnrollData.status) || 0;
@@ -17962,7 +18071,7 @@ class EnrollProfileFormComponent {
         this.checkCurrentDesignationPresent();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnrollProfileFormComponent, deps: [{ token: i7.MatLegacySnackBar }, { token: i1$3.MatLegacyDialogRef }, { token: UserProfileService }, { token: i2$1.ConfigurationsService }, { token: ProfileV2Service }, { token: OtpService }, { token: NPSGridService }, { token: i1$2.TranslateService }, { token: i2.DatePipe }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EnrollProfileFormComponent, selector: "ws-app-enroll-profile-form", host: { listeners: { "document:click": "handleClickOutside($event)" } }, viewQueries: [{ propertyName: "timerDiv", first: true, predicate: ["timerDiv"], descendants: true }, { propertyName: "emailTimerDiv", first: true, predicate: ["emailTimerDiv"], descendants: true }, { propertyName: "textBox", first: true, predicate: ["textBox"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "languageTextBox", first: true, predicate: ["languageTextBox"], descendants: true }, { propertyName: "languageDropdown", first: true, predicate: ["languageDropdown"], descendants: true }], ngImport: i0, template: "<div #fullScreenContainer>\n    <div class=\"dialog-header text-right mb-2\">\n        <mat-icon class=\"mat-icon notranslate material-icons close-icon cursor-pointer\" matprefix=\"\" role=\"img\" aria-hidden=\"true\" [mat-dialog-close]=\"false\">close</mat-icon>\n    </div>\n    <h1> {{data?.courseName}} </h1>\n    <div class=\"w-full\" *ngIf=\"!isLoading\">\n      <form [formGroup]=\"userDetailsForm\" class=\"userDetailsForm\">\n          <div class=\"w-full\" *ngIf=\"canShowName\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.name' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"name\" placeholder=\"Name\"/>\n            </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowOrg\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ (showDoptChanges ? 'profileInfo.presentOrganisation' : 'profileInfo.organisation') | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"organisation\" placeholder=\"Organisation\"/>\n            </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowEmail\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.email' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"primaryEmail\" placeholder=\"Enter email\" (keyup)=\"handleEmpty('primaryEmail')\"/>\n            </mat-form-field>\n            <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm.get('primaryEmail').hasError('required') || userDetailsForm.get('primaryEmail').hasError('pattern')\">\n              {{ 'profileInfo.invalidEmail' | translate }}\n            </mat-error>\n            <div class=\"flex justify-end\" *ngIf=\"verifyEmail && !otpSent && !eVerified\">\n              <span class=\"get-otp\" (click)=\"handleGenerateEmailOTP('email')\">{{ 'profileInfo.getOTP' | translate\n                }}</span>\n            </div>\n            <div *ngIf=\"emailOtpSent\">\n              <form [formGroup]=\"emailOtpForm\">\n                <div class=\"w-full\">\n                  <div class=\"flex enter-otp\">\n                    <div class=\"font-semibold required\"\n                      i18n=\"Title label|Label which explains the user to enter title\">\n                      {{ 'profileInfo.enterOTP' | translate }}\n                    </div>\n                    <div class=\"mb-3\">Time Remaining: <span #emailTimerDiv></span></div>\n                  </div>\n                  <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n                    <input type=\"text\" matInput formControlName=\"eOtp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n                  </mat-form-field>\n                </div>\n                <div class=\"w-full\">\n                  <div class=\"flex justify-center\" *ngIf=\"showEmailResendOTP\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n                        <div class=\"resend-otp\" (click)=\"handleResendEmailOTP()\">&nbsp;&nbsp;{{ 'profileInfo.resentOTP' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"w-full mb-4\">\n                  <div class=\"flex flex-row justify-between\">\n                    <button class=\"save-button\" (click)=\"verifyEmailOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowGroup\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.group' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select formControlName=\"group\" placeholder=\"{{ 'profileInfo.chooseAGroup' | translate }}\">\n                  <mat-option *ngFor=\"let group of groupData\" value=\"{{group}}\">{{ group }}</mat-option>\n                </mat-select>\n            </mat-form-field>\n            <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n              {{'profileInfo.groupNote' | translate}}\n            </div>\n        </div>\n        <div class=\"w-full relative\" *ngIf=\"canShowDesignation\">\n          <div class=\"font-semibold margin-0 required\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{ 'profileInfo.designation' | translate }}\n          </div>\n          <!-- <mat-form-field appearance=\"outline\" class=\"w-full\">\n            <div class=\"flex flex-row auto-complete-row relative\">\n              <input type=\"text\" class=\"input-text high-zindex\" matInput formControlName=\"designation\"\n                (input)=\"filterdesignation($event.target.value)\" (focus)=\"onDesignationsFocus()\" #textBox\n                placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\">\n              <mat-icon class=\"disagnation-caret\">arrow_drop_down</mat-icon>\n            </div>\n          </mat-form-field> -->\n          <div class=\"custom-select-container\">\n            <mat-form-field appearance=\"outline\" class=\"fixed-height-select\">\n              <mat-select placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\" formControlName=\"designation\"  (closed)=\"onDesignationDropdownClosed()\" (openedChange)=\"setupScrollListener($event)\"  panelClass=\"search-panel\">\n                <!-- Sticky search input container -->\n                <div class=\"sticky-search-container\" (click)=\"$event.stopPropagation()\">\n                  <div class=\"search-input-wrapper\">\n                    <input \n                                type=\"text\" \n                                placeholder=\"Search designation\" \n                                formControlName=\"searchDesignation\" \n                                class=\"search-input\"\n                                (keydown)=\"$event.stopPropagation()\"\n                                (click)=\"$event.stopPropagation()\"\n                                autocomplete=\"off\">\n                    <button \n                                *ngIf=\"searchDesignation?.value\" \n                                type=\"button\" \n                                class=\"clear-button\" \n                                (click)=\"searchDesignation?.setValue('')\">\n                                \u2715\n                    </button>\n                  </div>\n                </div>\n                <!-- Options list -->\n                <mat-option *ngFor=\"let option of designationsMeta \" [value]=\"option?.name\" (click)=\"selectDesignation(option?.name)\">\n                        {{ option?.name }}\n                </mat-option>\n                 <!-- Loading indicator -->\n                  <div *ngIf=\"isLoadingMoreDesignations\" class=\"loading-indicator\">\n                    Loading more...\n                  </div>\n                <!-- No results message -->\n                <mat-option *ngIf=\"(designationsMeta )?.length === 0\" disabled>\n                        No matches found\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <mat-error *ngIf=\"userDetailsForm?.controls['designation']?.invalid && userDetailsForm?.controls['designation']?.touched\"\n                class=\"mat-error\">\n                Please select a valid designation.\n            </mat-error>\n          <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n            {{'profileInfo.designationNote' | translate}}\n          </div>\n          <!-- <div class=\"auto-list flex flex-col ignore-blur\" #dropdown\n            *ngIf=\"openDesignationDropdown && filterDesignationsMeta.length\">\n            <div (mousedown)=\"preventBlur($event)\"\n              class=\"item {{userDetailsForm.controls['designation']?.value?.toLowerCase() === designation?.name?.toLowerCase() ? 'item-active' : ''}}\"\n              *ngFor=\"let designation of filterDesignationsMeta\" (click)=\"selectDesignation(designation.name)\">\n              {{ designation?.name }}\n            </div>\n          </div> -->\n        </div>\n        <div class=\"w-full relative\" *ngIf=\"canShowDesignation && canShowOtherDesignation\">\n          <div class=\"font-semibold margin-0 required\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{ 'profileInfo.otherDesignation' | translate }}\n          </div>\n          <div *ngIf=\"canShowOtherDesignation\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <input type=\"text\" class=\"input-text\" matInput formControlName=\"otherDesignation\" placeholder=\"{{ 'profileInfo.enterDesignation' | translate }}\"/>\n            </mat-form-field>\n          </div>\n        </div>\n          <div class=\"w-full\" *ngIf=\"canShowEmployeeCode\">\n              <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'profileInfo.employeeId' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input type=\"text\" class=\"input-text\" matInput formControlName=\"employeeCode\" placeholder=\"Enter employee code\"/>\n              </mat-form-field>    \n              <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('employeeCode')?.hasError('pattern')\">\n                Please enter an Alpha-numeric value only\n            </mat-error>                \n          </div>\n          <div class=\"w-full\" *ngIf=\"canshowMobile\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.mobileNumber' | translate }}\n            </div>\n            <div class=\"flex flex-row gap-4\">\n              <div class=\"country-code flex justify-center items-center\" appearance=\"outline\">\n                +91\n              </div>\n              <div class=\"flex-1\">\n                <div class=\"flex flex-col\">\n                  <mat-form-field appearance=\"outline\" class=\"mobile-num\">\n                    <input type=\"text\" class=\"input-text mobile-text relative\" maxlength=\"10\" (keyup)=\"handleEmpty('mobile')\"\n                      matInput formControlName=\"mobile\" placeholder=\"Enter mobile number\"/>\n                      <mat-icon class=\"verified-check\" *ngIf=\"mVerified\">check_circle</mat-icon>\n                  </mat-form-field>\n                  <mat-error class=\"mat-error\"\n                      *ngIf=\"userDetailsForm.get('mobile').hasError('required') || userDetailsForm.get('mobile').hasError('pattern')\">\n                        {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n                    </mat-error>\n                </div>\n                <div class=\"flex justify-end\" *ngIf=\"verifyMobile && !otpSent && !mVerified\">\n                  <span class=\"get-otp sm:mr-4\" (click)=\"handleGenerateOTP('phone')\">{{ 'profileInfo.getOTP' |\n                    translate }}</span>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"otpSent\">             \n              <form [formGroup]=\"otpForm\">\n                <div class=\"w-full\">\n                  <div class=\"flex enter-otp\">\n                    <div class=\"font-semibold required\"\n                      i18n=\"Title label|Label which explains the user to enter title\">\n                      {{ 'profileInfo.enterOTP' | translate }}\n                    </div>\n                    <div class=\"mb-3\">Time Remaining: <span #timerDiv></span></div>\n                  </div>\n                  <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n                    <input type=\"text\" matInput formControlName=\"otp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n                  </mat-form-field>\n                </div>\n                <div class=\"w-full\">\n                  <div class=\"flex justify-center\" *ngIf=\"showResendOTP\">  \n                    <div class=\"flex flex-row\">\n                        <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n                        <div class=\"resend-otp\" (click)=\"handleResendOTP()\">&nbsp;&nbsp;{{ 'profileInfo.resentOTP' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"w-full mb-4\">\n                  <div class=\"flex flex-row justify-between\">\n                    <button class=\"save-button\" (click)=\"verifyMobileOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n        <div class=\"w-full\" *ngIf=\"canShowGender\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.gender' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select formControlName=\"gender\" placeholder=\"Select gender\">\n                    <mat-option *ngFor=\"let _gender of eUserGender\" value=\"{{ _gender }}\">{{\n                      handleTranslateTo(_gender.toLowerCase()) }}</mat-option>\n                </mat-select>\n            </mat-form-field>\n          </div>\n            <div class=\"w-full\" *ngIf=\"canShowDob\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.dob' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input matInput class=\"input-text icon-include-input\" [max]=\"currentDate\" [matDatepicker]=\"picker\" [(ngModel)]=\"selectedDate\"\n                formControlName=\"dob\" placeholder=\"Select date of birth\" />\n                  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                  <mat-datepicker #picker></mat-datepicker>\n              </mat-form-field>\n          </div>\n          <div class=\"w-full relative\" *ngIf=\"canShowDomicileMedium\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.motherTongue' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <div class=\"flex flex-row auto-complete-row relative\">\n                <input type=\"text\" class=\"input-text high-zindex\" aria-label=\"Domicile Medium (Mother Tongue)\" matInput\n                  formControlName=\"domicileMedium\" placeholder=\"Select mother tongue\"\n                  (input)=\"filterLanguage($event.target.value)\" (focus)=\"onLanguageFocus()\" #languageTextBox/>\n                <mat-icon class=\"mother-toungue-caret\">arrow_drop_down</mat-icon>\n              </div>\n            </mat-form-field>\n            <mat-error *ngIf=\"userDetailsForm.controls['domicileMedium'].invalid && userDetailsForm.controls['domicileMedium'].touched\"\n                class=\"mat-error\">\n                  Please select a valid mother tongue.\n              </mat-error>\n            <div class=\"auto-language-list flex flex-col ignore-blur\" #languageDropdown\n              *ngIf=\"openLanguageDropdown && masterLanguages?.length\">\n              <div (mousedown)=\"preventLanguageBlur($event)\"\n                class=\"language-item {{userDetailsForm.controls['domicileMedium']?.value?.toLowerCase() === language?.name?.toLowerCase() ? 'language-item-active' : ''}}\"\n                *ngFor=\"let language of masterLanguages\" (click)=\"selectLanguage(language.name)\">\n                {{ language?.name }}\n              </div>\n            </div>\n          </div>\n            <div class=\"w-full\" *ngIf=\"canShowCategory\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.category' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <mat-select formControlName=\"category\" placeholder=\"Select category\">\n                    <mat-option *ngFor=\"let category of eCategory\" value=\"{{ category }}\">{{\n                      handleTranslateTo(category?.toLowerCase()) }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowpinCode\">\n              <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'userProfile.officePinCode' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input type=\"email\" class=\"input-text\" matInput maxlength=\"6\" formControlName=\"pinCode\" placeholder=\"Enter pincode\"/>\n              </mat-form-field>\n              <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('pinCode')?.hasError('pattern')\">\n                {{ 'profileInfo.invalidPinCode' | translate }}\n                </mat-error>          \n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails  && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.fromGovOrganization' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"isCadre\" (selectionChange)=\"getIsCadreStatus($event.value)\" placeholder=\"Select cadre\">\n                    <mat-option [value]=\"true\">Yes</mat-option>\n                    <mat-option [value]=\"false\">No</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && isCadreStatus  && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.typeOfCivilService' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"typeOfCivilService\" (selectionChange)=\"getService($event.value)\"  placeholder=\"Select type of civil service\">\n                    <mat-option *ngFor=\"let service of civilServiceTypes\" [value]=\"service\">{{ service }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('typeOfCivilService').value && userDetailsForm.get('isCadre').value && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.serviceType' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"serviceType\" (selectionChange)=\"onServiceSelect($event)\" placeholder=\"Select service\">\n                      <mat-option *ngFor=\"let service of serviceName\" [value]=\"service\">{{ service }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType').value && \n              userDetailsForm.get('isCadre').value \n              && userDetailsForm.get('typeOfCivilService').value && (\n                  userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n                  userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n                  userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n                ) && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.cadre' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"cadreName\" (selectionChange)=\"onCadreSelect($event.value)\" placeholder=\"Select cadre\">\n                      <mat-option *ngFor=\"let state of cadre\" [value]=\"state\">{{ state }}</mat-option>\n                    </mat-select>\n                </mat-form-field>\n          </div>\n          <ng-container *ngIf=\"!showDoptChanges\">\n            <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType') && (userDetailsForm.get('serviceType').value && \n            userDetailsForm.get('isCadre').value && userDetailsForm.get('typeOfCivilService').value && (\n                userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n                userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n                userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n            ) && userDetailsForm.get('cadreName').value)  ? true : ((userDetailsForm.get('serviceType').value && \n                userDetailsForm.get('isCadre').value \n            && userDetailsForm.get('typeOfCivilService').value && (\n                userDetailsForm.get('serviceType').value !== 'Indian Administrative Service (IAS)' && \n                userDetailsForm.get('serviceType').value !== 'Indian Police Service (IPS)' && \n                userDetailsForm.get('serviceType').value !== 'Indian Forest Service (IFoS)' \n            ))) ? true : false\">\n                <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'profileInfo.batch' | translate }}\n                </div>\n                <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                    <mat-select formControlName=\"cadreBatch\" placeholder=\"Select batch\">\n                        <mat-option *ngFor=\"let year of yearArray\" [value]=\"year\">{{ year }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n            </div>\n          </ng-container>\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('isCadre').value &&  userDetailsForm.get('cadreBatch').value && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required mb-3\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.cadreControllingAuthority' | translate }}\n              </div>\n              <span class=\"cadreControl-name\">{{cadreControllingAuthority}}</span>\n          </div>\n          <ng-container>\n            <div class=\"w-full flex flex-row gap-4 justify-end margin-top-m\">\n              <button\n                class=\"save-button\"\n                [disabled]=\"userDetailsForm?.invalid || !mVerified || !eVerified\"\n                (click)=\"onSubmitForm(userDetailsForm)\">\n                {{ 'profileInfo.saveChanges' | translate }}\n              </button>\n            </div>\n          </ng-container>\n      </form>\n    </div>\n    <ng-container *ngIf=\"addLoader > 0\" >\n      <div class=\"text-center my-2 loader flex justify-center items-center\">\n        <mat-spinner class=\"inline-block\"></mat-spinner>\n      </div>\n    </ng-container>\n</div>\n", styles: ["::ng-deep .course-survey .main-container{width:auto!important;overflow-y:auto!important;max-height:auto!important}.high-zindex{z-index:9999}.auto-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-list .item{padding:5px 15px}.auto-list .item:hover{background-color:#f3f3f3;cursor:pointer}.auto-list .item-active{background-color:#1b4ca1!important;color:#fff!important}.auto-language-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-language-list .language-item{padding:5px 15px}.auto-language-list .language-item:hover{background-color:#f3f3f3;cursor:pointer}.auto-language-list .language-item-active{background-color:#1b4ca1!important;color:#fff!important}::ng-deep .mat-calendar-body-active{background:#1b4ca1!important;border-radius:100%!important}::ng-deep .course-survey .lib-container{height:100%!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container{padding-left:0!important;padding-right:0!important;padding-bottom:1rem!important}}.disagnation-caret,.mother-toungue-caret{position:absolute;right:0;bottom:0}::ng-deep .userDetailsForm .mat-form-field-appearance-outline .mat-form-field-infix{padding:.5rem 0 .8rem}input[disabled]+mat-icon.disagnation-caret{opacity:.5}input[disabled]+mat-icon.mother-toungue-caret{opacity:.5}::ng-deep .course-survey .lib-container-2{height:auto;min-height:unset!important;padding:0!important;box-shadow:none!important;margin-bottom:2rem!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container-2{padding-left:0!important;padding-right:0!important}}.profile-form-field .mat-select{border:none}.customForm{padding-right:0!important;padding-bottom:1rem!important;padding:1rem 3rem}.cadreControl-name{background:#c3c3c3;padding:10px}.country-code{margin-top:5px;text-align:center;width:50px;height:46px;border:1px solid #d6d5d5;border-radius:5px}.get-otp{color:#1b4ca1;font-weight:700;cursor:pointer;font-size:14px}.enter-otp{align-items:center;justify-content:space-between}.custom-size{width:96%}.resend-otp{color:#1b4ca1;font-weight:700;cursor:pointer}.verified-check{position:absolute;right:3px;color:#5fa800;font-size:18px;width:18px;height:18px}.save-button:disabled{opacity:.6!important}.loader{position:absolute;top:0;left:0;z-index:1000;height:100vh;width:100vw;background-color:#80808045}.mat-error{margin:-10px 0 5px}:host ::ng-deep .userDetailsForm .mat-form-field-wrapper{padding-bottom:8px!important}.custom-select-container,.fixed-height-select{width:100%}.fixed-height-select ::ng-deep .mat-form-field-flex{height:48px!important;min-height:45px!important;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-infix{padding:0!important;border-top:0!important;height:45px!important;display:flex;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.fixed-height-select ::ng-deep .mat-select-arrow-wrapper{transform:translateY(0)!important}.fixed-height-select ::ng-deep .mat-form-field-label-wrapper{top:-1.1em}::ng-deep .search-panel{max-height:350px}::ng-deep .search-panel .sticky-search-container{position:sticky;top:0;z-index:2;background:#fff;padding:8px;border-bottom:1px solid rgba(0,0,0,.12);box-shadow:0 2px 4px #00000014}::ng-deep .search-panel .search-input-wrapper{position:relative;width:100%}::ng-deep .search-panel .search-input{width:100%;height:35px;padding:0 30px 0 12px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;box-sizing:border-box}::ng-deep .search-panel .search-input:focus{outline:none;border-color:#f3962f;box-shadow:0 0 0 1px #f3962f33}::ng-deep .search-panel .clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#00000080;font-size:14px;padding:4px;display:flex;align-items:center;justify-content:center}::ng-deep .search-panel .clear-button:hover{color:#000c}::ng-deep .search-panel .mat-option.mat-option-disabled{color:#00000061;font-style:italic}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-text-field-wrapper{height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-flex{min-height:45px!important;height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-infix{min-height:45px!important;height:45px!important;padding-top:0!important;padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5$4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EnrollProfileFormComponent, selector: "ws-app-enroll-profile-form", host: { listeners: { "document:click": "handleClickOutside($event)" } }, viewQueries: [{ propertyName: "timerDiv", first: true, predicate: ["timerDiv"], descendants: true }, { propertyName: "emailTimerDiv", first: true, predicate: ["emailTimerDiv"], descendants: true }, { propertyName: "textBox", first: true, predicate: ["textBox"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "languageTextBox", first: true, predicate: ["languageTextBox"], descendants: true }, { propertyName: "languageDropdown", first: true, predicate: ["languageDropdown"], descendants: true }], ngImport: i0, template: "<div #fullScreenContainer>\n    <div class=\"dialog-header text-right mb-2\">\n        <mat-icon class=\"mat-icon notranslate material-icons close-icon cursor-pointer\" matprefix=\"\" role=\"img\" aria-hidden=\"true\" [mat-dialog-close]=\"false\">close</mat-icon>\n    </div>\n    <h1> {{data?.courseName}} </h1>\n    <div class=\"w-full\" *ngIf=\"!isLoading\">\n      <form [formGroup]=\"userDetailsForm\" class=\"userDetailsForm\">\n          <div class=\"w-full\" *ngIf=\"canShowName\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.name' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"name\" placeholder=\"Name\"/>\n            </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowOrg\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ (showDoptChanges ? 'profileInfo.presentOrganisation' : 'profileInfo.organisation') | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"organisation\" placeholder=\"Organisation\"/>\n            </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowEmail\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.email' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"primaryEmail\" placeholder=\"Enter email\" (keyup)=\"handleEmpty('primaryEmail')\"/>\n            </mat-form-field>\n            <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm.get('primaryEmail').hasError('required') || userDetailsForm.get('primaryEmail').hasError('pattern')\">\n              {{ 'profileInfo.invalidEmail' | translate }}\n            </mat-error>\n            <div class=\"flex justify-end\" *ngIf=\"verifyEmail && !otpSent && !eVerified\">\n              <span class=\"get-otp\" (click)=\"handleGenerateEmailOTP('email')\">{{ 'profileInfo.getOTP' | translate\n                }}</span>\n            </div>\n            <div *ngIf=\"emailOtpSent\">\n              <form [formGroup]=\"emailOtpForm\">\n                <div class=\"w-full\">\n                  <div class=\"flex enter-otp\">\n                    <div class=\"font-semibold required\"\n                      i18n=\"Title label|Label which explains the user to enter title\">\n                      {{ 'profileInfo.enterOTP' | translate }}\n                    </div>\n                    <div class=\"mb-3\">Time Remaining: <span #emailTimerDiv></span></div>\n                  </div>\n                  <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n                    <input type=\"text\" matInput formControlName=\"eOtp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n                  </mat-form-field>\n                </div>\n                <div class=\"w-full\">\n                  <div class=\"flex justify-center\" *ngIf=\"showEmailResendOTP\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n                        <div class=\"resend-otp\" (click)=\"handleResendEmailOTP()\">&nbsp;&nbsp;{{ 'profileInfo.resentOTP' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"w-full mb-4\">\n                  <div class=\"flex flex-row justify-between\">\n                    <button class=\"save-button\" (click)=\"verifyEmailOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowGroup\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.group' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select formControlName=\"group\" placeholder=\"{{ 'profileInfo.chooseAGroup' | translate }}\">\n                  <mat-option *ngFor=\"let group of groupData\" value=\"{{group}}\">{{ group }}</mat-option>\n                </mat-select>\n            </mat-form-field>\n            <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n              {{'profileInfo.groupNote' | translate}}\n            </div>\n        </div>\n        <div class=\"w-full relative\" *ngIf=\"canShowDesignation\">\n          <div class=\"font-semibold margin-0 required\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{ 'profileInfo.designation' | translate }}\n          </div>\n          <!-- <mat-form-field appearance=\"outline\" class=\"w-full\">\n            <div class=\"flex flex-row auto-complete-row relative\">\n              <input type=\"text\" class=\"input-text high-zindex\" matInput formControlName=\"designation\"\n                (input)=\"filterdesignation($event.target.value)\" (focus)=\"onDesignationsFocus()\" #textBox\n                placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\">\n              <mat-icon class=\"disagnation-caret\">arrow_drop_down</mat-icon>\n            </div>\n          </mat-form-field> -->\n          <div class=\"custom-select-container\">\n            <mat-form-field appearance=\"outline\" class=\"fixed-height-select\">\n              <mat-select placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\" formControlName=\"designation\"  (closed)=\"onDesignationDropdownClosed()\" (openedChange)=\"setupScrollListener($event)\"  panelClass=\"search-panel\">\n                <!-- Sticky search input container -->\n                <div class=\"sticky-search-container\" (click)=\"$event.stopPropagation()\">\n                  <div class=\"search-input-wrapper\">\n                    <input \n                                type=\"text\" \n                                placeholder=\"Search designation\" \n                                formControlName=\"searchDesignation\" \n                                class=\"search-input\"\n                                (keydown)=\"$event.stopPropagation()\"\n                                (click)=\"$event.stopPropagation()\"\n                                autocomplete=\"off\">\n                    <button \n                                *ngIf=\"searchDesignation?.value\" \n                                type=\"button\" \n                                class=\"clear-button\" \n                                (click)=\"searchDesignation?.setValue('')\">\n                                \u2715\n                    </button>\n                  </div>\n                </div>\n                <!-- Options list -->\n                <mat-option *ngFor=\"let option of designationsMeta \" [value]=\"option?.name\" (click)=\"selectDesignation(option?.name)\">\n                        {{ option?.name }}\n                </mat-option>\n                 <!-- Loading indicator -->\n                  <div *ngIf=\"isLoadingMoreDesignations\" class=\"loading-indicator\">\n                    Loading more...\n                  </div>\n                <!-- No results message -->\n                <mat-option *ngIf=\"(designationsMeta )?.length === 0\" disabled>\n                        No matches found\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <mat-error *ngIf=\"userDetailsForm?.controls['designation']?.invalid && userDetailsForm?.controls['designation']?.touched\"\n                class=\"mat-error\">\n                Please select a valid designation.\n            </mat-error>\n          <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n            {{'profileInfo.designationNote' | translate}}\n          </div>\n          <!-- <div class=\"auto-list flex flex-col ignore-blur\" #dropdown\n            *ngIf=\"openDesignationDropdown && filterDesignationsMeta.length\">\n            <div (mousedown)=\"preventBlur($event)\"\n              class=\"item {{userDetailsForm.controls['designation']?.value?.toLowerCase() === designation?.name?.toLowerCase() ? 'item-active' : ''}}\"\n              *ngFor=\"let designation of filterDesignationsMeta\" (click)=\"selectDesignation(designation.name)\">\n              {{ designation?.name }}\n            </div>\n          </div> -->\n        </div>\n        <div class=\"w-full relative\" *ngIf=\"canShowDesignation && canShowOtherDesignation\">\n          <div class=\"font-semibold margin-0 required\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{ 'profileInfo.otherDesignation' | translate }}\n          </div>\n          <div *ngIf=\"canShowOtherDesignation\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <input type=\"text\" class=\"input-text\" matInput formControlName=\"otherDesignation\" placeholder=\"{{ 'profileInfo.enterDesignation' | translate }}\"/>\n            </mat-form-field>\n          </div>\n        </div>\n          <div class=\"w-full\" *ngIf=\"canShowEmployeeCode\">\n              <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'profileInfo.employeeId' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input type=\"text\" class=\"input-text\" matInput formControlName=\"employeeCode\" placeholder=\"Enter employee code\"/>\n              </mat-form-field>    \n              <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('employeeCode')?.hasError('pattern')\">\n                Please enter an Alpha-numeric value only\n            </mat-error>                \n          </div>\n          <div class=\"w-full\" *ngIf=\"canshowMobile\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.mobileNumber' | translate }}\n            </div>\n            <div class=\"flex flex-row gap-4\">\n              <div class=\"country-code flex justify-center items-center\" appearance=\"outline\">\n                +91\n              </div>\n              <div class=\"flex-1\">\n                <div class=\"flex flex-col\">\n                  <mat-form-field appearance=\"outline\" class=\"mobile-num\">\n                    <input type=\"text\" class=\"input-text mobile-text relative\" maxlength=\"10\" (keyup)=\"handleEmpty('mobile')\"\n                      matInput formControlName=\"mobile\" placeholder=\"Enter mobile number\"/>\n                      <mat-icon class=\"verified-check\" *ngIf=\"mVerified\">check_circle</mat-icon>\n                  </mat-form-field>\n                  <mat-error class=\"mat-error\"\n                      *ngIf=\"userDetailsForm.get('mobile').hasError('required') || userDetailsForm.get('mobile').hasError('pattern')\">\n                        {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n                    </mat-error>\n                </div>\n                <div class=\"flex justify-end\" *ngIf=\"verifyMobile && !otpSent && !mVerified\">\n                  <span class=\"get-otp sm:mr-4\" (click)=\"handleGenerateOTP('phone')\">{{ 'profileInfo.getOTP' |\n                    translate }}</span>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"otpSent\">             \n              <form [formGroup]=\"otpForm\">\n                <div class=\"w-full\">\n                  <div class=\"flex enter-otp\">\n                    <div class=\"font-semibold required\"\n                      i18n=\"Title label|Label which explains the user to enter title\">\n                      {{ 'profileInfo.enterOTP' | translate }}\n                    </div>\n                    <div class=\"mb-3\">Time Remaining: <span #timerDiv></span></div>\n                  </div>\n                  <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n                    <input type=\"text\" matInput formControlName=\"otp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n                  </mat-form-field>\n                </div>\n                <div class=\"w-full\">\n                  <div class=\"flex justify-center\" *ngIf=\"showResendOTP\">  \n                    <div class=\"flex flex-row\">\n                        <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n                        <div class=\"resend-otp\" (click)=\"handleResendOTP()\">&nbsp;&nbsp;{{ 'profileInfo.resentOTP' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"w-full mb-4\">\n                  <div class=\"flex flex-row justify-between\">\n                    <button class=\"save-button\" (click)=\"verifyMobileOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n        <div class=\"w-full\" *ngIf=\"canShowGender\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.gender' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select formControlName=\"gender\" placeholder=\"Select gender\">\n                    <mat-option *ngFor=\"let _gender of eUserGender\" value=\"{{ _gender }}\">{{\n                      handleTranslateTo(_gender.toLowerCase()) }}</mat-option>\n                </mat-select>\n            </mat-form-field>\n          </div>\n            <div class=\"w-full\" *ngIf=\"canShowDob\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.dob' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input matInput class=\"input-text icon-include-input\" [max]=\"currentDate\" [matDatepicker]=\"picker\" [(ngModel)]=\"selectedDate\"\n                formControlName=\"dob\" placeholder=\"Select date of birth\" />\n                  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                  <mat-datepicker #picker></mat-datepicker>\n              </mat-form-field>\n          </div>\n          <div class=\"w-full relative\" *ngIf=\"canShowDomicileMedium\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.motherTongue' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <div class=\"flex flex-row auto-complete-row relative\">\n                <input type=\"text\" class=\"input-text high-zindex\" aria-label=\"Domicile Medium (Mother Tongue)\" matInput\n                  formControlName=\"domicileMedium\" placeholder=\"Select mother tongue\"\n                  (input)=\"filterLanguage($event.target.value)\" (focus)=\"onLanguageFocus()\" #languageTextBox/>\n                <mat-icon class=\"mother-toungue-caret\">arrow_drop_down</mat-icon>\n              </div>\n            </mat-form-field>\n            <mat-error *ngIf=\"userDetailsForm.controls['domicileMedium'].invalid && userDetailsForm.controls['domicileMedium'].touched\"\n                class=\"mat-error\">\n                  Please select a valid mother tongue.\n              </mat-error>\n            <div class=\"auto-language-list flex flex-col ignore-blur\" #languageDropdown\n              *ngIf=\"openLanguageDropdown && masterLanguages?.length\">\n              <div (mousedown)=\"preventLanguageBlur($event)\"\n                class=\"language-item {{userDetailsForm.controls['domicileMedium']?.value?.toLowerCase() === language?.name?.toLowerCase() ? 'language-item-active' : ''}}\"\n                *ngFor=\"let language of masterLanguages\" (click)=\"selectLanguage(language.name)\">\n                {{ language?.name }}\n              </div>\n            </div>\n          </div>\n            <div class=\"w-full\" *ngIf=\"canShowCategory\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.category' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <mat-select formControlName=\"category\" placeholder=\"Select category\">\n                    <mat-option *ngFor=\"let category of eCategory\" value=\"{{ category }}\">{{\n                      handleTranslateTo(category?.toLowerCase()) }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowpinCode\">\n              <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'userProfile.officePinCode' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input type=\"email\" class=\"input-text\" matInput maxlength=\"6\" formControlName=\"pinCode\" placeholder=\"Enter pincode\"/>\n              </mat-form-field>\n              <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('pinCode')?.hasError('pattern')\">\n                {{ 'profileInfo.invalidPinCode' | translate }}\n                </mat-error>          \n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails  && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.fromGovOrganization' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"isCadre\" (selectionChange)=\"getIsCadreStatus($event.value)\" placeholder=\"Select cadre\">\n                    <mat-option [value]=\"true\">Yes</mat-option>\n                    <mat-option [value]=\"false\">No</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && isCadreStatus  && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.typeOfCivilService' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"typeOfCivilService\" (selectionChange)=\"getService($event.value)\"  placeholder=\"Select type of civil service\">\n                    <mat-option *ngFor=\"let service of civilServiceTypes\" [value]=\"service\">{{ service }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('typeOfCivilService').value && userDetailsForm.get('isCadre').value && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.serviceType' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"serviceType\" (selectionChange)=\"onServiceSelect($event)\" placeholder=\"Select service\">\n                      <mat-option *ngFor=\"let service of serviceName\" [value]=\"service\">{{ service }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType').value && \n              userDetailsForm.get('isCadre').value \n              && userDetailsForm.get('typeOfCivilService').value && (\n                  userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n                  userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n                  userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n                ) && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.cadre' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"cadreName\" (selectionChange)=\"onCadreSelect($event.value)\" placeholder=\"Select cadre\">\n                      <mat-option *ngFor=\"let state of cadre\" [value]=\"state\">{{ state }}</mat-option>\n                    </mat-select>\n                </mat-form-field>\n          </div>\n          <ng-container *ngIf=\"!showDoptChanges\">\n            <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType') && (userDetailsForm.get('serviceType').value && \n            userDetailsForm.get('isCadre').value && userDetailsForm.get('typeOfCivilService').value && (\n                userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n                userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n                userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n            ) && userDetailsForm.get('cadreName').value)  ? true : ((userDetailsForm.get('serviceType').value && \n                userDetailsForm.get('isCadre').value \n            && userDetailsForm.get('typeOfCivilService').value && (\n                userDetailsForm.get('serviceType').value !== 'Indian Administrative Service (IAS)' && \n                userDetailsForm.get('serviceType').value !== 'Indian Police Service (IPS)' && \n                userDetailsForm.get('serviceType').value !== 'Indian Forest Service (IFoS)' \n            ))) ? true : false\">\n                <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'profileInfo.batch' | translate }}\n                </div>\n                <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                    <mat-select formControlName=\"cadreBatch\" placeholder=\"Select batch\">\n                        <mat-option *ngFor=\"let year of yearArray\" [value]=\"year\">{{ year }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n            </div>\n          </ng-container>\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('isCadre').value &&  userDetailsForm.get('cadreBatch').value && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required mb-3\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.cadreControllingAuthority' | translate }}\n              </div>\n              <span class=\"cadreControl-name\">{{cadreControllingAuthority}}</span>\n          </div>\n          <ng-container>\n            <div class=\"w-full flex flex-row gap-4 justify-end margin-top-m\">\n              <button\n                class=\"save-button\"\n                [disabled]=\"userDetailsForm?.invalid || !mVerified || !eVerified\"\n                (click)=\"onSubmitForm(userDetailsForm)\">\n                {{ 'profileInfo.saveChanges' | translate }}\n              </button>\n            </div>\n          </ng-container>\n      </form>\n    </div>\n    <ng-container *ngIf=\"addLoader > 0\" >\n      <div class=\"text-center my-2 loader flex justify-center items-center\">\n        <mat-spinner class=\"inline-block\"></mat-spinner>\n      </div>\n    </ng-container>\n</div>\n", styles: ["::ng-deep .course-survey .main-container{width:auto!important;overflow-y:auto!important;max-height:auto!important}.high-zindex{z-index:9999}.auto-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-list .item{padding:5px 15px}.auto-list .item:hover{background-color:#f3f3f3;cursor:pointer}.auto-list .item-active{background-color:#1b4ca1!important;color:#fff!important}.auto-language-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-language-list .language-item{padding:5px 15px}.auto-language-list .language-item:hover{background-color:#f3f3f3;cursor:pointer}.auto-language-list .language-item-active{background-color:#1b4ca1!important;color:#fff!important}::ng-deep .mat-calendar-body-active{background:#1b4ca1!important;border-radius:100%!important}::ng-deep .course-survey .lib-container{height:100%!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container{padding-left:0!important;padding-right:0!important;padding-bottom:1rem!important}}.disagnation-caret,.mother-toungue-caret{position:absolute;right:0;bottom:0}::ng-deep .userDetailsForm .mat-form-field-appearance-outline .mat-form-field-infix{padding:.5rem 0 .8rem}input[disabled]+mat-icon.disagnation-caret{opacity:.5}input[disabled]+mat-icon.mother-toungue-caret{opacity:.5}::ng-deep .course-survey .lib-container-2{height:auto;min-height:unset!important;padding:0!important;box-shadow:none!important;margin-bottom:2rem!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container-2{padding-left:0!important;padding-right:0!important}}.profile-form-field .mat-select{border:none}.customForm{padding-right:0!important;padding-bottom:1rem!important;padding:1rem 3rem}.cadreControl-name{background:#c3c3c3;padding:10px}.country-code{margin-top:5px;text-align:center;width:50px;height:46px;border:1px solid #d6d5d5;border-radius:5px}.get-otp{color:#1b4ca1;font-weight:700;cursor:pointer;font-size:14px}.enter-otp{align-items:center;justify-content:space-between}.custom-size{width:96%}.resend-otp{color:#1b4ca1;font-weight:700;cursor:pointer}.verified-check{position:absolute;right:3px;color:#5fa800;font-size:18px;width:18px;height:18px}.save-button:disabled{opacity:.6!important}.loader{position:absolute;top:0;left:0;z-index:1000;height:100vh;width:100vw;background-color:#80808045}.mat-error{margin:-10px 0 5px}:host ::ng-deep .userDetailsForm .mat-form-field-wrapper{padding-bottom:8px!important}.custom-select-container,.fixed-height-select{width:100%}.fixed-height-select ::ng-deep .mat-form-field-flex{height:48px!important;min-height:45px!important;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-infix{padding:0!important;border-top:0!important;height:45px!important;display:flex;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.fixed-height-select ::ng-deep .mat-select-arrow-wrapper{transform:translateY(0)!important}.fixed-height-select ::ng-deep .mat-form-field-label-wrapper{top:-1.1em}::ng-deep .search-panel{max-height:350px}::ng-deep .search-panel .sticky-search-container{position:sticky;top:0;z-index:2;background:#fff;padding:8px;border-bottom:1px solid rgba(0,0,0,.12);box-shadow:0 2px 4px #00000014}::ng-deep .search-panel .search-input-wrapper{position:relative;width:100%}::ng-deep .search-panel .search-input{width:100%;height:35px;padding:0 30px 0 12px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;box-sizing:border-box}::ng-deep .search-panel .search-input:focus{outline:none;border-color:#f3962f;box-shadow:0 0 0 1px #f3962f33}::ng-deep .search-panel .clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#00000080;font-size:14px;padding:4px;display:flex;align-items:center;justify-content:center}::ng-deep .search-panel .clear-button:hover{color:#000c}::ng-deep .search-panel .mat-option.mat-option-disabled{color:#00000061;font-style:italic}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-text-field-wrapper{height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-flex{min-height:45px!important;height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-infix{min-height:45px!important;height:45px!important;padding-top:0!important;padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnrollProfileFormComponent, decorators: [{
             type: Component,
@@ -19421,7 +19530,7 @@ class AppTocBannerComponent {
         return this.langtranslations.translateLabel(label, type, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBannerComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i1$3.MatLegacyDialog }, { token: AppTocService }, { token: WidgetContentService }, { token: i2$1.UtilityService }, { token: MobileAppsService }, { token: i7.MatLegacySnackBar }, { token: i2$1.ConfigurationsService }, { token: TitleTagService }, { token: ActionService }, { token: i2$1.LoggerService }, { token: i2.DatePipe }, { token: i1$2.TranslateService }, { token: UserAutocompleteService }, { token: i2$1.EventService }, { token: i2$1.MultilingualTranslationsService }, { token: TimerService }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: { banners: "banners", content: "content", resumeData: "resumeData", analytics: "analytics", forPreview: "forPreview", batchData: "batchData", userEnrollmentList: "userEnrollmentList", contentReadData: "contentReadData", clickToShare: "clickToShare" }, outputs: { withdrawOrEnroll: "withdrawOrEnroll", programEnrollCall: "programEnrollCall" }, providers: [AccessControlService, DatePipe], viewQueries: [{ propertyName: "userInput", first: true, predicate: ["userInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header-synopsis fixed-width margin-top-xl\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\"\n  *ngIf=\"show\">\n  <div class=\"flex flex-row\">\n    <div class=\"flex-auto\">\n      <div class=\"header-title flex-col sm:flex-row\">\n        <!-- image -->\n        <div *ngIf=\"content?.posterImage\" class=\"float-left\">\n          <img [src]=\"content?.posterImage | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n            [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n        </div>\n        <div *ngIf=\"!content?.posterImage\" class=\"float-left\">\n          <ng-container *ngIf=\"content?.appIcon; else defaultImg\">\n            <img [src]=\"content?.appIcon | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n              [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n          </ng-container>\n          <ng-template #defaultImg>\n            <img src=\"/assets/instances/eagle/app_logos/default.png\" [id]=\"'source_' + content.identifier\"\n              class=\"app-icon\" [alt]=\"content.sourceName || iGOT\" />\n          </ng-template>\n        </div>\n        <div class=\"sm:ml-5 flex flex-auto\" [id]=\"'m-c-'+ content.identifier\">\n          <div class=\"sm:ml-5 flex flex-col flex-auto\">\n            <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs hidden sm:block\"\n              [title]=\"contentReadData?.name\">\n              {{ contentReadData?.name }}\n              <div class=\"float-right cursor-pointer flex\" (click)=\"onClickOfShare()\" *ngIf=\"canShare\">\n                <mat-icon class=\"ws-mat-accent-text padding-top-xs\">share</mat-icon>\n              </div>\n            </h1>\n            <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs block sm:hidden\"\n              [title]=\"contentReadData?.name\">\n              {{ contentReadData?.name }}\n            </h1>\n            <span *ngIf=\"contentProgress === 1\" class=\"margin-left-s\">\n              <mat-icon class=\"ws-mat-accent-text\">check_circle</mat-icon>\n            </span>\n            <div *ngIf=\"content?.primaryCategory\" class=\"apIcon float-left mb-4\">\n              <img src=\"/assets/icons/content/course.svg\" [id]=\"'source_' + content.identifier\" class=\"source-icon\"\n                [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n              <span>{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</span>\n            </div>\n            <div *ngIf=\"content?.appIcon\" class=\"apIcon float-left mb-4\">\n              <img [src]=\"content?.creatorLogo | pipePublicURL\" [id]=\"'source_' + content.identifier\"\n                class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n            </div>\n            <div [ngSwitch]=\"routePath\" class=\"header-meta\" [ngClass]=\"{ 'header-meta-banner': bannerUrl }\">\n              <!-- Overview Section -->\n              <div class=\"banner-overview-container\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n                *ngSwitchCase=\"'overview'\">\n                <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n                  {{ content?.source | pipeLimitTo: 250 }}\n                </h3>\n                <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n                  {{ content?.instructions | pipeLimitTo: 450 }}\n                </p>\n                <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n                  [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n                  <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n                </div>\n              </div>\n              <!-- Toc Section -->\n              <div *ngSwitchCase=\"'contents'\">\n                <!-- Contents Banner -->\n              </div>\n              <!-- Analytics Section -->\n              <div class=\"banner-overview-container mat-body-1\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n                *ngSwitchCase=\"'analytics'\">\n                <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n                  {{ content?.purpose | pipeLimitTo: 250 }}\n                </h3>\n                <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n                  {{ content?.instructions | pipeLimitTo: 450 }}\n                </p>\n                <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n                  [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n                  <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n              <span class=\"rating-number mat-body-2\">{{ content?.averageRating }}&nbsp;</span>\n              <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                {{ getRatingIcon(rating) }}</mat-icon>\n              <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"content?.totalRating\">\n                ( {{ content?.totalRating | pipeCountTransform }} )</span>\n            </div>\n            <div *ngIf=\"!content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n              <span class=\"rating-number mat-body-2\"> 0.0 &nbsp;</span>\n              <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                {{ getRatingIcon(rating) }}</mat-icon>\n              <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"!content?.totalRating\">\n                ( {{ 0 | pipeCountTransform }} )</span>\n            </div>\n            <!-- tags -->\n            <div class=\"tags margin-bottom-s\" *ngIf=\"content?.keywords && content?.keywords?.length > 0\">\n              <span *ngFor=\"let tag of content.keywords\" class=\"tag\">\n                {{tag}}\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n  <div class=\"batch-div\">\n    <div class=\"request-block\">\n      <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n      <ng-container\n        *ngIf=\"batchData && !batchData?.enrolled  && batchData?.workFlow?.wfInitiated &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REJECTED) && (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REMOVED) &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.WITHDRAWN) &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.APPROVED) && batchData?.content?.length\">\n        <p class=\"margin-remove-bottom mat-body-1 padding-m bg-white\">\n          {{batchData?.workFlow?.batch?.name}} - ({{batchData?.workFlow?.batch?.startDate | date: 'dd-MM-yyyy'}} -\n          {{batchData?.workFlow?.batch?.endDate | date: 'dd-MM-yyyy' || 'present'}})\n        </p>\n        <ng-container>\n          <button class=\"withdraw-batch\" (click)=\"!disableWithdrawnBtn && requestToWithdrawDialog()\"\n            [disabled]=\"disableWithdrawnBtn\" [ngClass]=\"{ 'disable-btn': disableWithdrawnBtn }\">\n            <ng-container> {{ 'apptocbanner.withDrawYourRequest' | translate }} </ng-container>\n          </button>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"batchData && batchData?.enrolled && batchData?.content?.length\">\n        <h3 class=\"margin-remove-bottom p-4 bg-white mat-body-1\" *ngFor=\"let batch of batchData.content\">\n          {{batch?.name}} ({{batch?.startDate | date: 'dd-MM-yyyy' }} - {{batch?.endDate | date: 'dd-MM-yyyy' ||\n          'present'}})\n        </h3>\n        <ng-container [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"batchData && !batchData?.enrolled && !batchData?.content?.length\">\n        <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n          No batches\n        </h3>\n      </ng-container>\n    </div>\n    <!-- <ng-container *ngIf=\"batchData && batchData?.content?.length && batchData?.content[0]?.batchAttributes?.batchLocationDetails\">\n      <div class=\"flex items-center location-wrapper\">\n        <div>\n          <mat-icon class=\"location-icon\">\n            location_on</mat-icon>\n        </div>\n        <div class=\"loc-details\">\n            {{batchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n        </div>\n      </div>\n    </ng-container> -->\n  </div>\n  <ng-container *ngIf=\"batchData && !batchData?.enrolled && batchData?.content?.length\"\n    [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"content?.courseCategory === nsContent.ECourseCategory.MODERATED_PROGRAM\">\n  <div class=\"request-batch\">\n    <div class=\"batch-div\">\n      <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n<!-- <div class=\"header-synopsis fixed-width margin-top-l\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\" *ngIf=\"content && batchControl?.value?.batchAttributes?.batchLocationDetails\">\n  <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n    <h2>{{'apptocbanner.batchLocation' | translate}}</h2>\n    <p>{{batchControl?.value?.batchAttributes?.batchLocationDetails}}</p>\n  </ng-container>\n</div> -->\n\n<mat-menu #actionMenu=\"matMenu\">\n  <div mat-menu-item>\n    <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"actions\"></ng-container>\n  </div>\n</mat-menu>\n\n<ng-template #actions>\n  <a i18n-aria-label aria-label=\"Take Action\" mat-icon-button *ngIf=\"reviewButton\"\n    [routerLink]=\"['/author/editor/' + content?.identifier]\">\n    <mat-icon>publish</mat-icon>\n  </a>\n  <ws-widget-btn-content-download id=\"prevfordownload\" [forPreview]=\"forPreview\"\n    [widgetData]=\"content | pipePartialContent : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal', 'artifactUrl']\">\n  </ws-widget-btn-content-download>\n  <ws-widget-btn-content-share id=\"prevforshare\" [forPreview]=\"forPreview\" [widgetData]=\"content\">\n  </ws-widget-btn-content-share>\n  <ws-widget-btn-kb [forPreview]=\"forPreview\" id=\"prev\" [contentId]=\"content?.identifier\"\n    [contentName]=\"contentReadData?.name\" [contentType]=\"content?.contentType\" [status]=\"content?.status\">\n  </ws-widget-btn-kb>\n  <ws-widget-btn-goals [forPreview]=\"forPreview\" id=\"goalsforprev\" *ngIf=\"isGoalsEnabled && btnGoalsConfig\"\n    [widgetData]=\"btnGoalsConfig\">\n  </ws-widget-btn-goals>\n  <ws-widget-btn-playlist [forPreview]=\"forPreview\" id=\"playlistforprev\" *ngIf=\"btnPlaylistConfig\"\n    [widgetData]=\"btnPlaylistConfig\">\n  </ws-widget-btn-playlist>\n  <ws-widget-btn-content-feedback-v2 [forPreview]=\"forPreview\" id=\"feedbackforprev\"\n    [widgetData]=\"content | pipePartialContent: ['identifier', 'name']\">\n  </ws-widget-btn-content-feedback-v2>\n</ng-template>\n<ng-template #authView>{{'apptocbanner.view' | translate}}</ng-template>\n<ng-template #statusMsg>\n  <div class=\"status-container mt-2 mb-2\"\n    *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && batchData?.workFlow?.wfInitiated\">\n    <div class=\"flex\" *ngIf=\"showMsg\">\n      <ng-container *ngIf=\"showIcon\">\n        <mat-icon class=\"mr-4\" [ngClass]=\"iconColor\" *ngIf=\"WFIcon === 'circle'\">check_circle</mat-icon>\n        <mat-icon class=\"mr-4 ws-mat-red-text visibility-show\" style=\"transform: rotate(180deg);\"\n          *ngIf=\"WFIcon === 'info'\">info</mat-icon>\n      </ng-container>\n      <div class=\"mat-body-1\">{{ getWFMsg }}</div>\n    </div>\n  </div>\n  <div class=\"status-container mt-5\"\n    *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && showDisableMsg && !showMsg && findMessage.length > 0\">\n    <div class=\"flex\">\n      <ng-container>\n        <mat-icon class=\"mr-3 ws-mat-red-text\" style=\"transform: rotate(180deg);\">info</mat-icon>\n      </ng-container>\n      <div class=\"mat-body-1\">\n        <p class=\"margin-remove-bottom \">{{findMessage}}</p>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"share-container\" *ngIf=\"enableShare\">\n  <div *ngIf=\"showLoader\" class=\"text-center my-2 loader\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div>\n  <div class=\"cursor-pointer close-share-dialog\"><mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon></div>\n  <div class=\"share-modal\">\n    <div class=\"karmasahayogi-icon\"><img alt=\"karmasahayogi-icon\" src=\"/assets/icons/KarmaSahayogi.svg\"></div>\n    <div class=\"content-div\">\n      <div class=\"triangle-left hidden md:block\"></div>\n      <div class=\"contnet\">\n        <section class=\"w-full flex align-center justify-between \">\n          <div class=\"mb-2\">\n            <h2 class=\"mat-headline margin-remove-bottom ws-mat-black-text\">{{'contentSharing.header' | translate}}</h2>\n          </div>\n        </section>\n        <form [formGroup]=\"shareForm\">\n          <div class=\"mat-body-2\">\n            <div class=\"md-5\">\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-chip-list #chipList aria-label=\"user selection\" appearance=\"outline\">\n                  <mat-chip *ngFor=\"let user of users\" [selectable]=\"selectable\" [removable]=\"removable\"\n                    (removed)=\"remove(user)\">\n                    {{user}}\n                    <mat-icon matChipRemove *ngIf=\"removable\">close</mat-icon>\n                  </mat-chip>\n                  <input tabindex=\"-1\" class=\"inputTextBox\"\n                    placeholder=\"{{users.length === 0 ? translateLabels('placehoderText', 'contentSharing') : ''}}\"\n                    #userInput formControlName=\"review\" [formControl]=\"userCtrl\" [matAutocomplete]=\"auto\"\n                    [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    [matChipInputAddOnBlur]=\"addOnBlur\" (matChipInputTokenEnd)=\"add($event)\">\n                </mat-chip-list>\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n                  <mat-option *ngFor=\"let user of filteredUsers\" [value]=\"user.name\">\n                    <div class=\"flex\">\n                      <div class=\"iconDiv\">\n                        <span class=\"iconText\">{{user.iconText.substring(0,2)}}</span>\n                      </div>\n                      <div>\n                        <div>{{user.name}}</div>\n                        <div class=\"emailText\">{{user.maskedEmail}}</div>\n                      </div>\n                    </div>\n                  </mat-option>\n                </mat-autocomplete>\n                <mat-hint align=\"start\" class=\"left-over-emails\">{{'contentSharing.note' | translate}}</mat-hint>\n                <mat-hint align=\"end\" class=\"left-over-emails\">{{ users.length }} /{{maxEmailsLimit}}\n                  {{'contentSharing.remaingEmails' | translate}}</mat-hint>\n              </mat-form-field>\n            </div>\n            <div class=\"flex mt-5\">\n              <div class=\"flex flex-1 flex-end\">\n                <span class=\"copy-link-btn cursor-pointer\" (click)=\"copyToClipboard()\">{{'contentSharing.copyLink' |\n                  translate}} &nbsp;&nbsp;<mat-icon>link</mat-icon></span>\n                <button mat-stroked-button type=\"submit\"\n                  [ngClass]=\"{'disable-send-btn': users.length === 0 || users.length}\"\n                  class=\"text-white ws-mat-primary-background flex-auto-display send-btn\"\n                  [disabled]=\"userCtrl.value.length || users.length === 0 || users.length > maxEmailsLimit\"\n                  (click)=\"submitSharing()\">\n                  {{'contentSharing.send' | translate}} &nbsp; <mat-icon>send</mat-icon>\n                </button>\n              </div>\n            </div>\n\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #batchDropdown>\n  <form class=\"flex flex-col gap-4\">\n    <ng-container *ngIf=\"batchData && !batchData?.enrolled\n      && (!batchData.workFlow?.wfInitiated || (batchData.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||  batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED))\n      && batchData?.content?.length\">\n      <mat-form-field appearance=\"outline\" class=\"w-full batch-form-field\">\n        <mat-select #batchControlData [formControl]=\"batchControl\" required autoSelctFirstOption\n          (selectionChange)=\"batchChange($event)\" panelClass=\"batch-dropdown\">\n          <mat-option *ngFor=\"let batch of batchData.content; let i=index\" [value]=\"batch\" selected=\"index === 0\"\n            [disabled]=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn \">\n            <div class=\"flex flex-row items-center gap-2\">\n              <div class=\"flex-1 text-sm batch-timings\">\n                {{ batch.name }} ( {{ batch.startDate | date: 'd MMM, yyyy' }} - {{ batch.endDate | date: 'd MMM, yyyy'\n                || 'present' }} )\n              </div>\n              <div class=\"expired\" *ngIf=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn\">\n                Expired\n              </div>\n            </div>\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf=\"batchControl.hasError('required')\">Please choose a batch to start course</mat-error>\n      </mat-form-field>\n      <div class=\"flex flex-wrap gap-3\">\n        <ng-container *ngIf=\"!showRejected\">\n          <div class=\"flex-1\">\n            <div class=\"flex flex-col gap-1\" *ngIf=\"selectedBatch && selectedBatch.enrollmentEndDate \">\n              <p class=\"text-xs leading-4 mb-0\">Last enroll date</p>\n              <p class=\"font-bold mb-0\">{{ selectedBatch.enrollmentEndDate | date: 'd MMM, y' }}</p>\n            </div>\n          </div>\n          <div class=\"flex flex-row justify-center items-center\">\n            <button class=\"enroll-button\"\n              [ngClass]=\"{ 'disable-btn': disableEnrollBtn || batchControl.hasError('required') || !handleEnrollmentEndDate(selectedBatch) }\"\n              [disabled]=\"disableEnrollBtn || batchControl.hasError('required')|| !handleEnrollmentEndDate(selectedBatch)\"\n              (click)=\"requestToEnrollDialog()\">\n              <ng-container>\n                Request to enroll\n              </ng-container>\n            </button>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"showRejected && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n          <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n            Your enrollment request is {{batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED\n            ?'removed':'rejected'}}.</h3>\n        </ng-container>\n      </div>\n    </ng-container>\n  </form>\n</ng-template>", styles: [".button,.batch-div .enroll-button,.batch-div .withdraw-batch{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}.batch-div{border-radius:8px;background-color:#fdead5;max-width:400px;margin:0 auto}.batch-div .request-block{padding:16px}.batch-div .batch-details{padding:16px;border:1px solid #FF9800;border-radius:8px;background-color:#fff;cursor:pointer}.batch-div .batch-enrolled{font-weight:700;color:#4caf50;font-size:.75rem}.batch-div .withdraw-batch{color:#000000de;border:1px solid rgba(0,0,0,.8705882353);background-color:#fff;width:100%;margin-top:16px}.batch-div .enroll-button{color:#fff;background-color:#ff9800;border:1px solid #FF9800}::ng-deep .batch-dropdown{margin-top:3rem!important}::ng-deep .batch-dropdown .mat-option{height:fit-content!important;padding:12px 16px!important}::ng-deep .batch-form-field{height:64px}::ng-deep .batch-form-field .mat-form-field-wrapper{margin:0;padding-bottom:0;height:inherit}::ng-deep .batch-form-field .mat-form-field-wrapper .mat-form-field-flex{height:inherit}::ng-deep .batch-form-field .mat-form-field-outline{border-radius:8px;height:inherit}::ng-deep .batch-form-field .mat-form-field-infix{display:flex;align-items:center;font-size:14px;border-top:.35rem solid transparent;padding:8px 0;height:44px}::ng-deep .batch-form-field .mat-form-field-infix .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:translateY(0)!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper{padding:8px 4px!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper .mat-error{margin-top:6px}::ng-deep .batch-form-field .mat-select-value-text{white-space:pre-line!important;line-height:21px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.disable-btn{opacity:.5}.mb-0{margin-bottom:0!important}.batch-timings{text-transform:uppercase;line-height:20px}.header-synopsis{padding:32px 64px}@media only screen and (max-width: 599px){.header-synopsis{padding:32px 24px}}.app-icon{height:180px;width:280px;border-radius:4px}.banner-container{position:relative;background-repeat:no-repeat;background-position:center;background-size:cover}.header-synopsis-gradient{background:inherit}.category-text{margin-left:8px}.fixed-width{max-width:1230px;display:block;margin:0 auto;padding:0!important}@media only screen and (min-width: 600px) and (max-width: 959px){.fixed-width{padding:0 15px!important}}@media only screen and (max-width: 599px){.fixed-width{padding:0 15px!important}}.fluid-width{width:100%}.header-synopsis{box-sizing:border-box}.header-synopsis .apIcon{background-color:#fff;margin-right:16px;padding:4px 8px;border-radius:16px;display:flex;align-items:center;justify-content:flex-start}.header-synopsis .apIcon img{height:15px;object-fit:contain}.header-synopsis .apIcon span{opacity:1;color:#0009;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.header-synopsis .header-title{display:flex}.header-synopsis .header-title .text-truncate-title{max-width:100%;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.header-synopsis .rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px}.header-synopsis .rating .rating-number{letter-spacing:0px;color:#f69953}.header-synopsis .rating .rating-count{letter-spacing:.36px;color:#f69953}.header-synopsis .rating .rating mat-icon{color:#f69953}.header-synopsis .header-meta{line-height:1.5}.header-synopsis .resumeButton{height:52px;min-width:160px;display:flex;align-items:center;justify-content:center;background:#34d6a4 0% 0% no-repeat padding-box;box-shadow:0 10px 30px #9993;color:#fff!important}.header-synopsis .resumeButton ::ng-deep .mat-button-wrapper{letter-spacing:0px;color:#fff;text-transform:capitalize}.header-synopsis .header-actions{display:flex}.header-synopsis .header-actions .custom-button{background:#0074b6 0% 0% no-repeat padding-box;border-radius:4px}.header-synopsis .header-actions.top{margin-top:0;margin-bottom:40px}.header-synopsis .header-actions .action-btns{margin-left:auto;order:2}.banner-overview-container{display:flex;justify-content:space-between}.banner-overview-container .overview-description{flex:1;min-width:1px;margin-right:24px;margin-bottom:12px;opacity:1;color:#000000de;font-size:16px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:24px}@media only screen and (max-width: 599px){.banner-overview-container .overview-description{margin-right:0}}.banner-overview-container .overview-intro{width:240px;height:135px;border:1px solid;box-sizing:border-box;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;position:relative}.banner-overview-container .overview-intro .overview-intro-overlay{cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;width:48px;height:48px;font-size:48px;background-color:#00000080;border-radius:50%;padding:8px}.banner-overview-container .overview-intro .overview-intro-overlay:active{background-color:#000000b3}@media only screen and (max-width: 599px){.banner-overview-container .overview-intro{display:none}}.analytics-meta{font-weight:500;margin-bottom:12px;line-height:1.2}.hidden-block-xs{display:block}@media only screen and (max-width: 599px){.hidden-block-xs{display:none}}.visible-block-xs{display:none}@media only screen and (max-width: 599px){.visible-block-xs{display:block}}.hidden-block-s{display:block}@media only screen and (min-width: 600px) and (max-width: 959px){.hidden-block-s{display:none}}.visible-block-s{display:none}@media only screen and (min-width: 600px) and (max-width: 959px){.visible-block-s{display:block}}.info-msg{color:#fff!important}.info-msg mat-icon{color:#fff!important}.tags{display:flex;flex:1;flex-direction:row;flex-wrap:wrap;position:relative;z-index:1}.tags .tag{display:inline-block;border-radius:100px 4px 4px 100px;padding:1px 12px;width:auto;justify-content:space-between;margin:0 8px 8px 0;background-color:#0000000a;border:1px solid rgba(0,0,0,.08);box-sizing:border-box}.batch-container{max-width:435px;border-radius:4px;width:40%}.custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px;max-width:auto!important;height:42px!important}.sticky-banner{z-index:999;position:sticky;top:128px}.sticky-banner .header-title h1{font:normal normal 300 24px/35px}.sticky-banner .overview-description{font:normal normal 300 14px/21px}.batch-wrapper{display:flex;justify-content:space-between;gap:25px;width:100%}.batch-timer{width:60%;background-color:#fff;align-items:center}.batch-timer .timer-title{opacity:1;color:#0006;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.batch-timer .time-wrapper div p.count{border-radius:4px;background-color:#000000de;opacity:1;color:#fff;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:center;line-height:48px;width:67px;height:47px;margin-bottom:4px}.batch-timer .time-wrapper div p.time-label{opacity:1;color:#000000de;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:center;line-height:12px}.batch-timer .time-wrapper span{padding:8px;font-size:36px}.batch-timer .help{width:100%}.batch-timer .help .batch-duration-wrap{padding:0 24px}.batch-timer .help .batch-duration-wrap .duration-days{opacity:1;color:#000000de;font-family:Montserrat-SemiBold;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:left;line-height:48px;padding-bottom:16px}.batch-info{opacity:1;color:#000000de;font-size:14px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px;padding:26px}.disable-send-btn[disabled]{background-color:#000!important}@media (max-width: 768px){.batch-wrapper{flex-wrap:wrap}.batch-timer{width:100%;flex-wrap:wrap;justify-content:center}.batch-container{width:100%}}.share-container{position:fixed;height:100vh;background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.share-modal{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit}.karmasahayogi-icon{position:absolute;bottom:-5px;left:calc(50% - 464px)}.triangle-left{transform:translateY(100%);position:absolute;bottom:28%;left:-24px;width:0;height:0;border-top:24px solid transparent;border-right:48px solid #ffffff;border-bottom:24px solid transparent}.contnet{background-color:#fff;width:612px;border-radius:12px;padding:16px}.content-div{position:relative}.copy-link-btn{display:flex;align-items:center;margin-right:20px;color:red;color:#0074b6!important;font-weight:600}.copy-link-btn:hover{background-color:none!important}.send-btn{border-radius:20px}.send-btn .mat-icon{margin-bottom:2.5px}::ng-deep .mat-chip-list-wrapper{height:100px;overflow:auto;display:block!important;scroll-behavior:smooth}.iconText{border-radius:50%;background-color:#000;color:#fff;width:30px;display:inline-block;text-align:center;height:30px;display:flex;align-items:center;justify-content:center}.iconDiv{margin-right:8px}.emailText{opacity:.6}button:disabled{pointer-events:none;opacity:.5;color:#000}::ng-deep .mat-autocomplete-panel{z-index:99999}::ng-deep .cdk-overlay-pane{z-index:9999!important}::ng-deep .close-icon{background-color:#000;color:#fff;border-radius:16px;padding:4px}::ng-deep .mat-chip-input{padding-bottom:8px!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip{color:#0074b6!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip mat-icon{color:#0074b6!important}::ng-deep .inputTextBox{width:95%!important;overflow-x:hidden}.close-share-dialog{position:absolute;right:30px;top:30px}.left-over-emails{font-weight:600}.loader{position:absolute;top:42%;left:45%;z-index:1000}@media (max-width: 768px){.content-div{width:100%}.contnet{width:unset;margin-bottom:18%}.left-over-emails{display:none}.karmasahayogi-icon{left:8%;bottom:20%}.share-modal{align-items:self-end}}@media only screen and (min-device-width: 820px) and (max-device-width: 1180px){.karmasahayogi-icon{left:calc(50% - 387px)}.content{width:500px}}@media only screen and (min-device-width: 768px) and (max-device-width: 819px){.triangle-left{display:none}}.location-wrapper{padding:16px;border-top:1px solid rgba(0,0,0,.16)}.location-wrapper .location-icon{color:#1b4ca1;height:32px;width:32px;font-size:32px;padding-right:8px}.location-wrapper .loc-details{opacity:1;color:#000000de;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:Bold;letter-spacing:.25px;text-align:left;line-height:20px}.visibility-show{overflow:visible!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i10$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatLegacyChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatLegacyChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$1.DefaultThumbnailDirective, selector: "[wsUtilsDefaultThumbnail]", inputs: ["wsUtilsDefaultThumbnail", "src"] }, { kind: "component", type: i13.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i13.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeLimitToPipe, name: "pipeLimitTo" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i2$1.PipePartialContentPipe, name: "pipePartialContent" }, { kind: "pipe", type: i2$1.PipePublicURL, name: "pipePublicURL" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: { banners: "banners", content: "content", resumeData: "resumeData", analytics: "analytics", forPreview: "forPreview", batchData: "batchData", userEnrollmentList: "userEnrollmentList", contentReadData: "contentReadData", clickToShare: "clickToShare" }, outputs: { withdrawOrEnroll: "withdrawOrEnroll", programEnrollCall: "programEnrollCall" }, providers: [AccessControlService, DatePipe], viewQueries: [{ propertyName: "userInput", first: true, predicate: ["userInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header-synopsis fixed-width margin-top-xl\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\"\n  *ngIf=\"show\">\n  <div class=\"flex flex-row\">\n    <div class=\"flex-auto\">\n      <div class=\"header-title flex-col sm:flex-row\">\n        <!-- image -->\n        <div *ngIf=\"content?.posterImage\" class=\"float-left\">\n          <img [src]=\"content?.posterImage | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n            [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n        </div>\n        <div *ngIf=\"!content?.posterImage\" class=\"float-left\">\n          <ng-container *ngIf=\"content?.appIcon; else defaultImg\">\n            <img [src]=\"content?.appIcon | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n              [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n          </ng-container>\n          <ng-template #defaultImg>\n            <img src=\"/assets/instances/eagle/app_logos/default.png\" [id]=\"'source_' + content.identifier\"\n              class=\"app-icon\" [alt]=\"content.sourceName || iGOT\" />\n          </ng-template>\n        </div>\n        <div class=\"sm:ml-5 flex flex-auto\" [id]=\"'m-c-'+ content.identifier\">\n          <div class=\"sm:ml-5 flex flex-col flex-auto\">\n            <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs hidden sm:block\"\n              [title]=\"contentReadData?.name\">\n              {{ contentReadData?.name }}\n              <div class=\"float-right cursor-pointer flex\" (click)=\"onClickOfShare()\" *ngIf=\"canShare\">\n                <mat-icon class=\"ws-mat-accent-text padding-top-xs\">share</mat-icon>\n              </div>\n            </h1>\n            <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs block sm:hidden\"\n              [title]=\"contentReadData?.name\">\n              {{ contentReadData?.name }}\n            </h1>\n            <span *ngIf=\"contentProgress === 1\" class=\"margin-left-s\">\n              <mat-icon class=\"ws-mat-accent-text\">check_circle</mat-icon>\n            </span>\n            <div *ngIf=\"content?.primaryCategory\" class=\"apIcon float-left mb-4\">\n              <img src=\"/assets/icons/content/course.svg\" [id]=\"'source_' + content.identifier\" class=\"source-icon\"\n                [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n              <span>{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</span>\n            </div>\n            <div *ngIf=\"content?.appIcon\" class=\"apIcon float-left mb-4\">\n              <img [src]=\"content?.creatorLogo | pipePublicURL\" [id]=\"'source_' + content.identifier\"\n                class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n            </div>\n            <div [ngSwitch]=\"routePath\" class=\"header-meta\" [ngClass]=\"{ 'header-meta-banner': bannerUrl }\">\n              <!-- Overview Section -->\n              <div class=\"banner-overview-container\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n                *ngSwitchCase=\"'overview'\">\n                <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n                  {{ content?.source | pipeLimitTo: 250 }}\n                </h3>\n                <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n                  {{ content?.instructions | pipeLimitTo: 450 }}\n                </p>\n                <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n                  [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n                  <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n                </div>\n              </div>\n              <!-- Toc Section -->\n              <div *ngSwitchCase=\"'contents'\">\n                <!-- Contents Banner -->\n              </div>\n              <!-- Analytics Section -->\n              <div class=\"banner-overview-container mat-body-1\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n                *ngSwitchCase=\"'analytics'\">\n                <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n                  {{ content?.purpose | pipeLimitTo: 250 }}\n                </h3>\n                <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n                  {{ content?.instructions | pipeLimitTo: 450 }}\n                </p>\n                <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n                  [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n                  <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n              <span class=\"rating-number mat-body-2\">{{ content?.averageRating }}&nbsp;</span>\n              <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                {{ getRatingIcon(rating) }}</mat-icon>\n              <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"content?.totalRating\">\n                ( {{ content?.totalRating | pipeCountTransform }} )</span>\n            </div>\n            <div *ngIf=\"!content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n              <span class=\"rating-number mat-body-2\"> 0.0 &nbsp;</span>\n              <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                {{ getRatingIcon(rating) }}</mat-icon>\n              <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"!content?.totalRating\">\n                ( {{ 0 | pipeCountTransform }} )</span>\n            </div>\n            <!-- tags -->\n            <div class=\"tags margin-bottom-s\" *ngIf=\"content?.keywords && content?.keywords?.length > 0\">\n              <span *ngFor=\"let tag of content.keywords\" class=\"tag\">\n                {{tag}}\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n  <div class=\"batch-div\">\n    <div class=\"request-block\">\n      <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n      <ng-container\n        *ngIf=\"batchData && !batchData?.enrolled  && batchData?.workFlow?.wfInitiated &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REJECTED) && (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REMOVED) &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.WITHDRAWN) &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.APPROVED) && batchData?.content?.length\">\n        <p class=\"margin-remove-bottom mat-body-1 padding-m bg-white\">\n          {{batchData?.workFlow?.batch?.name}} - ({{batchData?.workFlow?.batch?.startDate | date: 'dd-MM-yyyy'}} -\n          {{batchData?.workFlow?.batch?.endDate | date: 'dd-MM-yyyy' || 'present'}})\n        </p>\n        <ng-container>\n          <button class=\"withdraw-batch\" (click)=\"!disableWithdrawnBtn && requestToWithdrawDialog()\"\n            [disabled]=\"disableWithdrawnBtn\" [ngClass]=\"{ 'disable-btn': disableWithdrawnBtn }\">\n            <ng-container> {{ 'apptocbanner.withDrawYourRequest' | translate }} </ng-container>\n          </button>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"batchData && batchData?.enrolled && batchData?.content?.length\">\n        <h3 class=\"margin-remove-bottom p-4 bg-white mat-body-1\" *ngFor=\"let batch of batchData.content\">\n          {{batch?.name}} ({{batch?.startDate | date: 'dd-MM-yyyy' }} - {{batch?.endDate | date: 'dd-MM-yyyy' ||\n          'present'}})\n        </h3>\n        <ng-container [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"batchData && !batchData?.enrolled && !batchData?.content?.length\">\n        <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n          No batches\n        </h3>\n      </ng-container>\n    </div>\n    <!-- <ng-container *ngIf=\"batchData && batchData?.content?.length && batchData?.content[0]?.batchAttributes?.batchLocationDetails\">\n      <div class=\"flex items-center location-wrapper\">\n        <div>\n          <mat-icon class=\"location-icon\">\n            location_on</mat-icon>\n        </div>\n        <div class=\"loc-details\">\n            {{batchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n        </div>\n      </div>\n    </ng-container> -->\n  </div>\n  <ng-container *ngIf=\"batchData && !batchData?.enrolled && batchData?.content?.length\"\n    [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"content?.courseCategory === nsContent.ECourseCategory.MODERATED_PROGRAM\">\n  <div class=\"request-batch\">\n    <div class=\"batch-div\">\n      <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n<!-- <div class=\"header-synopsis fixed-width margin-top-l\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\" *ngIf=\"content && batchControl?.value?.batchAttributes?.batchLocationDetails\">\n  <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n    <h2>{{'apptocbanner.batchLocation' | translate}}</h2>\n    <p>{{batchControl?.value?.batchAttributes?.batchLocationDetails}}</p>\n  </ng-container>\n</div> -->\n\n<mat-menu #actionMenu=\"matMenu\">\n  <div mat-menu-item>\n    <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"actions\"></ng-container>\n  </div>\n</mat-menu>\n\n<ng-template #actions>\n  <a i18n-aria-label aria-label=\"Take Action\" mat-icon-button *ngIf=\"reviewButton\"\n    [routerLink]=\"['/author/editor/' + content?.identifier]\">\n    <mat-icon>publish</mat-icon>\n  </a>\n  <ws-widget-btn-content-download id=\"prevfordownload\" [forPreview]=\"forPreview\"\n    [widgetData]=\"content | pipePartialContent : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal', 'artifactUrl']\">\n  </ws-widget-btn-content-download>\n  <ws-widget-btn-content-share id=\"prevforshare\" [forPreview]=\"forPreview\" [widgetData]=\"content\">\n  </ws-widget-btn-content-share>\n  <ws-widget-btn-kb [forPreview]=\"forPreview\" id=\"prev\" [contentId]=\"content?.identifier\"\n    [contentName]=\"contentReadData?.name\" [contentType]=\"content?.contentType\" [status]=\"content?.status\">\n  </ws-widget-btn-kb>\n  <ws-widget-btn-goals [forPreview]=\"forPreview\" id=\"goalsforprev\" *ngIf=\"isGoalsEnabled && btnGoalsConfig\"\n    [widgetData]=\"btnGoalsConfig\">\n  </ws-widget-btn-goals>\n  <ws-widget-btn-playlist [forPreview]=\"forPreview\" id=\"playlistforprev\" *ngIf=\"btnPlaylistConfig\"\n    [widgetData]=\"btnPlaylistConfig\">\n  </ws-widget-btn-playlist>\n  <ws-widget-btn-content-feedback-v2 [forPreview]=\"forPreview\" id=\"feedbackforprev\"\n    [widgetData]=\"content | pipePartialContent: ['identifier', 'name']\">\n  </ws-widget-btn-content-feedback-v2>\n</ng-template>\n<ng-template #authView>{{'apptocbanner.view' | translate}}</ng-template>\n<ng-template #statusMsg>\n  <div class=\"status-container mt-2 mb-2\"\n    *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && batchData?.workFlow?.wfInitiated\">\n    <div class=\"flex\" *ngIf=\"showMsg\">\n      <ng-container *ngIf=\"showIcon\">\n        <mat-icon class=\"mr-4\" [ngClass]=\"iconColor\" *ngIf=\"WFIcon === 'circle'\">check_circle</mat-icon>\n        <mat-icon class=\"mr-4 ws-mat-red-text visibility-show\" style=\"transform: rotate(180deg);\"\n          *ngIf=\"WFIcon === 'info'\">info</mat-icon>\n      </ng-container>\n      <div class=\"mat-body-1\">{{ getWFMsg }}</div>\n    </div>\n  </div>\n  <div class=\"status-container mt-5\"\n    *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && showDisableMsg && !showMsg && findMessage.length > 0\">\n    <div class=\"flex\">\n      <ng-container>\n        <mat-icon class=\"mr-3 ws-mat-red-text\" style=\"transform: rotate(180deg);\">info</mat-icon>\n      </ng-container>\n      <div class=\"mat-body-1\">\n        <p class=\"margin-remove-bottom \">{{findMessage}}</p>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"share-container\" *ngIf=\"enableShare\">\n  <div *ngIf=\"showLoader\" class=\"text-center my-2 loader\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div>\n  <div class=\"cursor-pointer close-share-dialog\"><mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon></div>\n  <div class=\"share-modal\">\n    <div class=\"karmasahayogi-icon\"><img alt=\"karmasahayogi-icon\" src=\"/assets/icons/KarmaSahayogi.svg\"></div>\n    <div class=\"content-div\">\n      <div class=\"triangle-left hidden md:block\"></div>\n      <div class=\"contnet\">\n        <section class=\"w-full flex align-center justify-between \">\n          <div class=\"mb-2\">\n            <h2 class=\"mat-headline margin-remove-bottom ws-mat-black-text\">{{'contentSharing.header' | translate}}</h2>\n          </div>\n        </section>\n        <form [formGroup]=\"shareForm\">\n          <div class=\"mat-body-2\">\n            <div class=\"md-5\">\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-chip-list #chipList aria-label=\"user selection\" appearance=\"outline\">\n                  <mat-chip *ngFor=\"let user of users\" [selectable]=\"selectable\" [removable]=\"removable\"\n                    (removed)=\"remove(user)\">\n                    {{user}}\n                    <mat-icon matChipRemove *ngIf=\"removable\">close</mat-icon>\n                  </mat-chip>\n                  <input tabindex=\"-1\" class=\"inputTextBox\"\n                    placeholder=\"{{users.length === 0 ? translateLabels('placehoderText', 'contentSharing') : ''}}\"\n                    #userInput formControlName=\"review\" [formControl]=\"userCtrl\" [matAutocomplete]=\"auto\"\n                    [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    [matChipInputAddOnBlur]=\"addOnBlur\" (matChipInputTokenEnd)=\"add($event)\">\n                </mat-chip-list>\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n                  <mat-option *ngFor=\"let user of filteredUsers\" [value]=\"user.name\">\n                    <div class=\"flex\">\n                      <div class=\"iconDiv\">\n                        <span class=\"iconText\">{{user.iconText.substring(0,2)}}</span>\n                      </div>\n                      <div>\n                        <div>{{user.name}}</div>\n                        <div class=\"emailText\">{{user.maskedEmail}}</div>\n                      </div>\n                    </div>\n                  </mat-option>\n                </mat-autocomplete>\n                <mat-hint align=\"start\" class=\"left-over-emails\">{{'contentSharing.note' | translate}}</mat-hint>\n                <mat-hint align=\"end\" class=\"left-over-emails\">{{ users.length }} /{{maxEmailsLimit}}\n                  {{'contentSharing.remaingEmails' | translate}}</mat-hint>\n              </mat-form-field>\n            </div>\n            <div class=\"flex mt-5\">\n              <div class=\"flex flex-1 flex-end\">\n                <span class=\"copy-link-btn cursor-pointer\" (click)=\"copyToClipboard()\">{{'contentSharing.copyLink' |\n                  translate}} &nbsp;&nbsp;<mat-icon>link</mat-icon></span>\n                <button mat-stroked-button type=\"submit\"\n                  [ngClass]=\"{'disable-send-btn': users.length === 0 || users.length}\"\n                  class=\"text-white ws-mat-primary-background flex-auto-display send-btn\"\n                  [disabled]=\"userCtrl.value.length || users.length === 0 || users.length > maxEmailsLimit\"\n                  (click)=\"submitSharing()\">\n                  {{'contentSharing.send' | translate}} &nbsp; <mat-icon>send</mat-icon>\n                </button>\n              </div>\n            </div>\n\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #batchDropdown>\n  <form class=\"flex flex-col gap-4\">\n    <ng-container *ngIf=\"batchData && !batchData?.enrolled\n      && (!batchData.workFlow?.wfInitiated || (batchData.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||  batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED))\n      && batchData?.content?.length\">\n      <mat-form-field appearance=\"outline\" class=\"w-full batch-form-field\">\n        <mat-select #batchControlData [formControl]=\"batchControl\" required autoSelctFirstOption\n          (selectionChange)=\"batchChange($event)\" panelClass=\"batch-dropdown\">\n          <mat-option *ngFor=\"let batch of batchData.content; let i=index\" [value]=\"batch\" selected=\"index === 0\"\n            [disabled]=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn \">\n            <div class=\"flex flex-row items-center gap-2\">\n              <div class=\"flex-1 text-sm batch-timings\">\n                {{ batch.name }} ( {{ batch.startDate | date: 'd MMM, yyyy' }} - {{ batch.endDate | date: 'd MMM, yyyy'\n                || 'present' }} )\n              </div>\n              <div class=\"expired\" *ngIf=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn\">\n                Expired\n              </div>\n            </div>\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf=\"batchControl.hasError('required')\">Please choose a batch to start course</mat-error>\n      </mat-form-field>\n      <div class=\"flex flex-wrap gap-3\">\n        <ng-container *ngIf=\"!showRejected\">\n          <div class=\"flex-1\">\n            <div class=\"flex flex-col gap-1\" *ngIf=\"selectedBatch && selectedBatch.enrollmentEndDate \">\n              <p class=\"text-xs leading-4 mb-0\">Last enroll date</p>\n              <p class=\"font-bold mb-0\">{{ selectedBatch.enrollmentEndDate | date: 'd MMM, y' }}</p>\n            </div>\n          </div>\n          <div class=\"flex flex-row justify-center items-center\">\n            <button class=\"enroll-button\"\n              [ngClass]=\"{ 'disable-btn': disableEnrollBtn || batchControl.hasError('required') || !handleEnrollmentEndDate(selectedBatch) }\"\n              [disabled]=\"disableEnrollBtn || batchControl.hasError('required')|| !handleEnrollmentEndDate(selectedBatch)\"\n              (click)=\"requestToEnrollDialog()\">\n              <ng-container>\n                Request to enroll\n              </ng-container>\n            </button>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"showRejected && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n          <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n            Your enrollment request is {{batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED\n            ?'removed':'rejected'}}.</h3>\n        </ng-container>\n      </div>\n    </ng-container>\n  </form>\n</ng-template>", styles: [".button,.batch-div .enroll-button,.batch-div .withdraw-batch{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}.batch-div{border-radius:8px;background-color:#fdead5;max-width:400px;margin:0 auto}.batch-div .request-block{padding:16px}.batch-div .batch-details{padding:16px;border:1px solid #FF9800;border-radius:8px;background-color:#fff;cursor:pointer}.batch-div .batch-enrolled{font-weight:700;color:#4caf50;font-size:.75rem}.batch-div .withdraw-batch{color:#000000de;border:1px solid rgba(0,0,0,.8705882353);background-color:#fff;width:100%;margin-top:16px}.batch-div .enroll-button{color:#fff;background-color:#ff9800;border:1px solid #FF9800}::ng-deep .batch-dropdown{margin-top:3rem!important}::ng-deep .batch-dropdown .mat-option{height:fit-content!important;padding:12px 16px!important}::ng-deep .batch-form-field{height:64px}::ng-deep .batch-form-field .mat-form-field-wrapper{margin:0;padding-bottom:0;height:inherit}::ng-deep .batch-form-field .mat-form-field-wrapper .mat-form-field-flex{height:inherit}::ng-deep .batch-form-field .mat-form-field-outline{border-radius:8px;height:inherit}::ng-deep .batch-form-field .mat-form-field-infix{display:flex;align-items:center;font-size:14px;border-top:.35rem solid transparent;padding:8px 0;height:44px}::ng-deep .batch-form-field .mat-form-field-infix .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:translateY(0)!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper{padding:8px 4px!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper .mat-error{margin-top:6px}::ng-deep .batch-form-field .mat-select-value-text{white-space:pre-line!important;line-height:21px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.disable-btn{opacity:.5}.mb-0{margin-bottom:0!important}.batch-timings{text-transform:uppercase;line-height:20px}.header-synopsis{padding:32px 64px}@media only screen and (max-width: 599px){.header-synopsis{padding:32px 24px}}.app-icon{height:180px;width:280px;border-radius:4px}.banner-container{position:relative;background-repeat:no-repeat;background-position:center;background-size:cover}.header-synopsis-gradient{background:inherit}.category-text{margin-left:8px}.fixed-width{max-width:1230px;display:block;margin:0 auto;padding:0!important}@media only screen and (min-width: 600px) and (max-width: 959px){.fixed-width{padding:0 15px!important}}@media only screen and (max-width: 599px){.fixed-width{padding:0 15px!important}}.fluid-width{width:100%}.header-synopsis{box-sizing:border-box}.header-synopsis .apIcon{background-color:#fff;margin-right:16px;padding:4px 8px;border-radius:16px;display:flex;align-items:center;justify-content:flex-start}.header-synopsis .apIcon img{height:15px;object-fit:contain}.header-synopsis .apIcon span{opacity:1;color:#0009;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.header-synopsis .header-title{display:flex}.header-synopsis .header-title .text-truncate-title{max-width:100%;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.header-synopsis .rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px}.header-synopsis .rating .rating-number{letter-spacing:0px;color:#f69953}.header-synopsis .rating .rating-count{letter-spacing:.36px;color:#f69953}.header-synopsis .rating .rating mat-icon{color:#f69953}.header-synopsis .header-meta{line-height:1.5}.header-synopsis .resumeButton{height:52px;min-width:160px;display:flex;align-items:center;justify-content:center;background:#34d6a4 0% 0% no-repeat padding-box;box-shadow:0 10px 30px #9993;color:#fff!important}.header-synopsis .resumeButton ::ng-deep .mat-button-wrapper{letter-spacing:0px;color:#fff;text-transform:capitalize}.header-synopsis .header-actions{display:flex}.header-synopsis .header-actions .custom-button{background:#0074b6 0% 0% no-repeat padding-box;border-radius:4px}.header-synopsis .header-actions.top{margin-top:0;margin-bottom:40px}.header-synopsis .header-actions .action-btns{margin-left:auto;order:2}.banner-overview-container{display:flex;justify-content:space-between}.banner-overview-container .overview-description{flex:1;min-width:1px;margin-right:24px;margin-bottom:12px;opacity:1;color:#000000de;font-size:16px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:24px}@media only screen and (max-width: 599px){.banner-overview-container .overview-description{margin-right:0}}.banner-overview-container .overview-intro{width:240px;height:135px;border:1px solid;box-sizing:border-box;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;position:relative}.banner-overview-container .overview-intro .overview-intro-overlay{cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;width:48px;height:48px;font-size:48px;background-color:#00000080;border-radius:50%;padding:8px}.banner-overview-container .overview-intro .overview-intro-overlay:active{background-color:#000000b3}@media only screen and (max-width: 599px){.banner-overview-container .overview-intro{display:none}}.analytics-meta{font-weight:500;margin-bottom:12px;line-height:1.2}.hidden-block-xs{display:block}@media only screen and (max-width: 599px){.hidden-block-xs{display:none}}.visible-block-xs{display:none}@media only screen and (max-width: 599px){.visible-block-xs{display:block}}.hidden-block-s{display:block}@media only screen and (min-width: 600px) and (max-width: 959px){.hidden-block-s{display:none}}.visible-block-s{display:none}@media only screen and (min-width: 600px) and (max-width: 959px){.visible-block-s{display:block}}.info-msg{color:#fff!important}.info-msg mat-icon{color:#fff!important}.tags{display:flex;flex:1;flex-direction:row;flex-wrap:wrap;position:relative;z-index:1}.tags .tag{display:inline-block;border-radius:100px 4px 4px 100px;padding:1px 12px;width:auto;justify-content:space-between;margin:0 8px 8px 0;background-color:#0000000a;border:1px solid rgba(0,0,0,.08);box-sizing:border-box}.batch-container{max-width:435px;border-radius:4px;width:40%}.custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px;max-width:auto!important;height:42px!important}.sticky-banner{z-index:999;position:sticky;top:128px}.sticky-banner .header-title h1{font:normal normal 300 24px/35px}.sticky-banner .overview-description{font:normal normal 300 14px/21px}.batch-wrapper{display:flex;justify-content:space-between;gap:25px;width:100%}.batch-timer{width:60%;background-color:#fff;align-items:center}.batch-timer .timer-title{opacity:1;color:#0006;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.batch-timer .time-wrapper div p.count{border-radius:4px;background-color:#000000de;opacity:1;color:#fff;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:center;line-height:48px;width:67px;height:47px;margin-bottom:4px}.batch-timer .time-wrapper div p.time-label{opacity:1;color:#000000de;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:center;line-height:12px}.batch-timer .time-wrapper span{padding:8px;font-size:36px}.batch-timer .help{width:100%}.batch-timer .help .batch-duration-wrap{padding:0 24px}.batch-timer .help .batch-duration-wrap .duration-days{opacity:1;color:#000000de;font-family:Montserrat-SemiBold;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:left;line-height:48px;padding-bottom:16px}.batch-info{opacity:1;color:#000000de;font-size:14px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px;padding:26px}.disable-send-btn[disabled]{background-color:#000!important}@media (max-width: 768px){.batch-wrapper{flex-wrap:wrap}.batch-timer{width:100%;flex-wrap:wrap;justify-content:center}.batch-container{width:100%}}.share-container{position:fixed;height:100vh;background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.share-modal{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit}.karmasahayogi-icon{position:absolute;bottom:-5px;left:calc(50% - 464px)}.triangle-left{transform:translateY(100%);position:absolute;bottom:28%;left:-24px;width:0;height:0;border-top:24px solid transparent;border-right:48px solid #ffffff;border-bottom:24px solid transparent}.contnet{background-color:#fff;width:612px;border-radius:12px;padding:16px}.content-div{position:relative}.copy-link-btn{display:flex;align-items:center;margin-right:20px;color:red;color:#0074b6!important;font-weight:600}.copy-link-btn:hover{background-color:none!important}.send-btn{border-radius:20px}.send-btn .mat-icon{margin-bottom:2.5px}::ng-deep .mat-chip-list-wrapper{height:100px;overflow:auto;display:block!important;scroll-behavior:smooth}.iconText{border-radius:50%;background-color:#000;color:#fff;width:30px;display:inline-block;text-align:center;height:30px;display:flex;align-items:center;justify-content:center}.iconDiv{margin-right:8px}.emailText{opacity:.6}button:disabled{pointer-events:none;opacity:.5;color:#000}::ng-deep .mat-autocomplete-panel{z-index:99999}::ng-deep .cdk-overlay-pane{z-index:9999!important}::ng-deep .close-icon{background-color:#000;color:#fff;border-radius:16px;padding:4px}::ng-deep .mat-chip-input{padding-bottom:8px!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip{color:#0074b6!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip mat-icon{color:#0074b6!important}::ng-deep .inputTextBox{width:95%!important;overflow-x:hidden}.close-share-dialog{position:absolute;right:30px;top:30px}.left-over-emails{font-weight:600}.loader{position:absolute;top:42%;left:45%;z-index:1000}@media (max-width: 768px){.content-div{width:100%}.contnet{width:unset;margin-bottom:18%}.left-over-emails{display:none}.karmasahayogi-icon{left:8%;bottom:20%}.share-modal{align-items:self-end}}@media only screen and (min-device-width: 820px) and (max-device-width: 1180px){.karmasahayogi-icon{left:calc(50% - 387px)}.content{width:500px}}@media only screen and (min-device-width: 768px) and (max-device-width: 819px){.triangle-left{display:none}}.location-wrapper{padding:16px;border-top:1px solid rgba(0,0,0,.16)}.location-wrapper .location-icon{color:#1b4ca1;height:32px;width:32px;font-size:32px;padding-right:8px}.location-wrapper .loc-details{opacity:1;color:#000000de;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:Bold;letter-spacing:.25px;text-align:left;line-height:20px}.visibility-show{overflow:visible!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i10$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatLegacyChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatLegacyChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$1.DefaultThumbnailDirective, selector: "[wsUtilsDefaultThumbnail]", inputs: ["wsUtilsDefaultThumbnail", "src"] }, { kind: "component", type: i13.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i13.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeLimitToPipe, name: "pipeLimitTo" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i2$1.PipePartialContentPipe, name: "pipePartialContent" }, { kind: "pipe", type: i2$1.PipePublicURL, name: "pipePublicURL" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBannerComponent, decorators: [{
             type: Component,
@@ -20806,7 +20915,6 @@ class AppTocHomeV2Component {
                     }
                 }
                 if (this.baseContentReadData?.courseCategory === 'Learning Pathway') {
-                    console.log('User enrolled in LP - computing milestone locks with isEnrolled=true');
                     this.tocSvc.callHirarchyProgressHashmap(this.content);
                     this.tocSvc.computeMilestoneLockingStatus(true);
                     this.syncMilestoneLockStatus();
@@ -20839,7 +20947,6 @@ class AppTocHomeV2Component {
                 this.tocSvc.callHirarchyProgressHashmap(this.content);
                 // For Learning Pathways, compute milestone locking when not enrolled (all locked)
                 if (this.baseContentReadData?.courseCategory === 'Learning Pathway') {
-                    console.log('User not enrolled - computing milestone locks');
                     this.tocSvc.computeMilestoneLockingStatus(false);
                     this.syncMilestoneLockStatus();
                 }
@@ -21473,7 +21580,6 @@ class AppTocHomeV2Component {
         this.hashmapUpdatedSubscription = this.tocSvc.hashmapUpdated$.subscribe((update) => {
             if (update && this.baseContentReadData?.courseCategory === 'Learning Pathway') {
                 const isEnrolled = this.userEnrollmentList && this.userEnrollmentList.length > 0;
-                console.log('Hashmap updated at:', update.timestamp, 'Enrolled:', isEnrolled, 'Syncing milestone lock status...');
                 // Sync content tree's isLocked with the updated hashmap values
                 this.syncMilestoneLockStatus();
             }
@@ -21505,7 +21611,7 @@ class AppTocHomeV2Component {
                 this.dataTransferSvc.setEnrollData(this.userEnrollmentList);
                 // in case of back from player we need to check recent language and load
                 if (!this.contentLibSvc?.oneStepResumeEnable && this.baseContentReadData?.identifier === this.contentReadData?.identifier) {
-                    let lang = this.baseContentReadData?.language.length ? this.baseContentReadData?.language[0] : '';
+                    let lang = this.baseContentReadData?.language?.length ? this.baseContentReadData?.language[0] : '';
                     let baseContentFromEnrollData = this.userEnrollmentList.find((el) => el.collectionId === this.baseContentReadData?.identifier);
                     if (lang && baseContentFromEnrollData && baseContentFromEnrollData?.recent_language?.toLowerCase() !== lang) {
                         let localLang = this.contentLangSvc.getRequiredLanguageDetails(this.baseContentReadData, baseContentFromEnrollData?.recent_language);
@@ -21597,18 +21703,17 @@ class AppTocHomeV2Component {
         if (this.baseContentReadData?.courseCategory === 'Learning Pathway') {
             return new Promise((resolve) => {
                 const content = this.baseContentReadData;
+                // STEP 1: Construct hierarchy structure
                 this.content = this.appTocV2Svc.constructHeirarchyData(content);
-                // Update progress with latest enrollment data
+                // STEP 2: Update progress with latest enrollment data
                 this.appTocV2Svc.mapContentHierarchyProgressUpdate(this.content, this.userEnrollmentList);
-                // Create hashmap and compute milestone locking after progress is updated
+                // STEP 3: Create hashmap from updated hierarchy (this should preserve completion status)
                 this.tocSvc.callHirarchyProgressHashmap(this.content);
-                console.log('Learning Pathway hashmap updated:', this.tocSvc.hashmap);
                 // Check if user is enrolled
                 const isEnrolled = this.userEnrollmentList && this.userEnrollmentList.length > 0;
-                // Compute milestone locking status with enrollment status and updated progress data
+                // STEP 4: Compute milestone locking status with enrollment status and updated progress data
                 this.tocSvc.computeMilestoneLockingStatus(isEnrolled);
-                console.log('Milestone locking recomputed. Enrolled:', isEnrolled);
-                // Sync content tree's isLocked with computed values
+                // STEP 5: Sync content tree's isLocked with computed values
                 this.syncMilestoneLockStatus();
                 this.getOrgIdForShare();
                 this.getTocStructure();
@@ -21692,7 +21797,6 @@ class AppTocHomeV2Component {
                     if (oldLocked !== child.isLocked) {
                         hasChanges = true;
                     }
-                    console.log(`Synced lock status for ${child.name} (${child.identifier}): isLocked=${child.isLocked}`);
                 }
             }
         });
@@ -21707,7 +21811,6 @@ class AppTocHomeV2Component {
             return;
         }
         try {
-            console.log('🔄 Refreshing milestone locks from hashmap...');
             // Check if user is enrolled
             const isEnrolled = this.userEnrollmentList && this.userEnrollmentList.length > 0;
             // Recompute milestone locking status from existing hashmap
@@ -22806,7 +22909,7 @@ class AppTocContentCardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardComponent, deps: [{ token: i2$1.EventService }, { token: i1$3.MatLegacyDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content\">\n  <ng-container *ngIf=\"isCollection\">\n    <div class=\"flex flex-col position-relative\">\n      <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n        <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n          (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n        <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n          <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren\">\n            <div class=\"flex flex-col sm:flex-row flex-wrap\">\n              <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n                {{ content?.name }} \n              </p>\n              <ng-container *ngIf=\"content.issuedCertificatesSVG\">\n                <a class=\"certificate-txt\" (click)=\"openCertificateDialog(content.issuedCertificatesSVG)\">\n                  <span class=\"view-certificate-wrapper\">\n                    <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                    <span>{{'apptoccontentcard.viewCertificate' | translate}}</span>\n                  </span>\n                </a>\n              </ng-container>\n              <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.resource' | translate}}</span>\n              </div>\n              <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.module' | translate}}</span>\n              </div>\n              <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.course' | translate}}</span>\n              </div>\n            </div>\n            <div>\n              <!-- <span class=\"mat-body-strong content-type\">{{ content?.displayContentType }}</span> -->\n              <!-- <span class=\"ml-5\"> -->\n              <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n              <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n              <span class=\"text-lowercase ws-mat-black60-text\">{{ content?.duration | pipeDurationTransform: 'hms'\n                }}</span>\n              <!-- </span> -->\n            </div>\n          </div>\n          <button *ngIf=\"content?.artifactUrl && isAllowed && !isEnabled\" type=\"button\" mat-icon-button\n            [matMenuTriggerFor]=\"buttonMenu\">\n            <mat-icon>more_vertical</mat-icon>\n          </button>\n          <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage && content.primaryCategory !== 'Course'\">\n            <ng-container *ngIf=\"content?.completionStatus == 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n                [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n                [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionStatus < 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\"\n                [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\"\n                [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n                [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                [backgroundStrokeWidth]=\"3\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n          </ng-container>\n\n          <!-- <div *ngIf=\"hasContentStructure\" class=\"child-meta-container\">\n            <div class=\"child-structure\"> -->\n          <!-- <mat-icon class=\"structure-icon\">import_contacts</mat-icon> -->\n          <!-- <span class=\"oval-white\" *ngIf=\"contentStructure?.course > 0\">\n                <ng-container>{{ contentStructure?.course }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course === 1\" > Course</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course > 1\" > Courses</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.learningModule > 0\">\n                <ng-container> {{ contentStructure?.learningModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule === 1\" > Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule > 1\" > Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.video > 0\">\n                <ng-container> {{ contentStructure?.video }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video === 1\" > Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video > 1\" > Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.interactiveVideo > 0\">\n                <ng-container> {{ contentStructure?.interactiveVideo }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo === 1\" >\n                  Interactive Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo > 1\" >\n                  Interactive Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.youtube > 0\">\n                <ng-container> {{ contentStructure?.youtube }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube === 1\" > Youtube Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube > 1\" > Youtube Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.pdf > 0\">\n                <ng-container> {{ contentStructure?.pdf }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf === 1\" > PDF</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf > 1\" > PDFs</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.podcast > 0\">\n                <ng-container> {{ contentStructure?.podcast }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast === 1\" > Podcast</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast > 1\" > Podcasts</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webModule > 0\">\n                <ng-container> {{ contentStructure?.webModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule === 1\" > Web Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule > 1\" > Web Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webPage > 0\">\n                <ng-container> {{ contentStructure?.webPage }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage === 1\" > Web Page</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage > 1\" > Web Pages</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.quiz > 0\">\n                <ng-container *ngIf=\"contentStructure?.webPage > 0\">, </ng-container>\n                <ng-container>{{ contentStructure?.quiz }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz === 1\" > Quiz</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz > 1\" > Quizzes</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.assessment > 0\">\n                <ng-container> {{ contentStructure?.assessment }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment === 1\" > Assessment</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment > 1\" > Assessments</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.other > 0\">\n                <ng-container>{{ contentStructure?.other }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other === 1\" > Other item</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other > 1\" > Other Items</ng-container>\n              </span>\n            </div>\n          </div> -->\n          <div class=\"see-all-container\">\n            <a href=\"javascript:void(0)\" role=\"button\" (click)=\"viewChildren = !viewChildren\"\n              class=\"margin-left-m see-all-btn tab custom-chevron customicon\" mat-button>\n              <!-- <ng-container *ngIf=\"!viewChildren\" >See All</ng-container>\n              <ng-container *ngIf=\"viewChildren\" >See Less</ng-container> -->\n              <mat-icon *ngIf=\"!viewChildren\">keyboard_arrow_down</mat-icon>\n              <mat-icon *ngIf=\"viewChildren\">keyboard_arrow_up</mat-icon>\n            </a>\n          </div>\n        </div>\n      </div>\n      <!-- <div class=\"w-100\" *ngIf=\"content?.identifier && content?.completionPercentage\">\n        <ng-container *ngIf=\"content?.completionStatus == 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n        <ng-container *ngIf=\"content?.completionStatus < 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n      </div> -->\n    </div>\n\n    <div class=\"children-container margin-left-l margin-top-s margin-bottom-s\" [hidden]=\"!viewChildren\">\n      <ws-app-toc-content-card [forPreview]=\"forPreview\" [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\"\n        [batchId]=\"batchId\" [rootContentType]=\"rootContentType\"\n        *ngFor=\"let child of content?.children; trackBy: contentTrackBy\">\n      </ws-app-toc-content-card>\n    </div>\n  </ng-container>\n  <div *ngIf=\"isResource\" class=\"resource-container\">\n    <!-- <ws-widget-display-content-type-icon class=\"flex\" [displayContentType]=\"content?.displayContentType\">\n    </ws-widget-display-content-type-icon> -->\n    <!-- <div class=\"img-container\"> -->\n    <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n    <!-- <ng-container *ngIf=\"content?.completionStatus == 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\" [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container>\n    <ng-container *ngIf=\"content?.completionStatus < 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n        [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container> -->\n    <!-- </div> -->\n\n    <div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n      <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n      <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\" [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n        [queryParams]=\"(isAllowed && !forPreview && !isEnabled)  ? resourceLink.queryParams : null\">\n        <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n          <div class=\"flex flex-col sm:flex-row flex-wrap\">\n            <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n              <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n              {{ content?.name }}\n            </p>\n            <span class=\"content-type optional-span\" *ngIf=\"content?.optionalReading\">{{'apptoccontentcard.optional' | translate}}</span>\n            <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n          </div>\n          <div class=\"resicons ws-mat-black60-text\">\n            <!-- <span class=\"mat-body-strong content-type ws-mat-default-text\">{{ content?.contentType }}</span> -->\n            <!-- <span class=\"ml-5\"> -->\n            <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n            <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\" class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                content?.mimeType ==='application/x-mpegURL'\">\n            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/pdf'\">\n            <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n              *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n              *ngIf=\"content.mimeType === 'application/offline' || content?.mimeType === 'application/survey'\">\n            <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n            <!-- </span> -->\n          </div>\n        </div>\n      </a>\n      <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n        <!-- <div class=\"type-container resource\" *ngIf=\"content?.contentType === 'Resource'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Resource</span>\n        </div>\n        <div class=\"type-container module\" *ngIf=\"content?.contentType === 'Collection'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Module</span>\n        </div>\n        <div class=\"type-container course\" *ngIf=\"content?.contentType === 'Course'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Course</span>\n        </div> -->\n        <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\" mat-icon-button\n          class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n          <mat-icon>more_vertical</mat-icon>\n        </button>\n        <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage ; else elseBlock\">\n        \n          <ng-container *ngIf=\"content?.completionStatus == 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n              [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.completed' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionStatus < 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\" [radius]=\"12\"\n              [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor2()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.inProgress' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n              [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n              [progressType]=\"'percentage'\">\n            </ws-widget-content-progress> -->\n          </ng-container>\n          \n        </ng-container>\n        <ng-template #elseBlock>\n        <circle-progress  class=\"flex items-center progress\"\n          [percent]=\"0\"\n          [radius]=\"12\"\n          [outerStrokeWidth]=\"3\"\n          [innerStrokeWidth]=\"3\"\n          [outerStrokeColor]=\"'#808080'\"\n          [innerStrokeColor]=\"'#808080'\"\n          [animation]=\"true\"\n          [space]=\"-3\"\n          [showUnits]=\"false\"\n          [animationDuration]=\"300\"\n          [showTitle]=\"false\"\n          [backgroundPadding]=\"0\"\n          [backgroundPadding]=\"-9\"\n          [outerStrokeLinecap]=\"'butt'\"\n          matTooltip=\"{{'apptoccontentcard.notStarted' | translate}}\"\n          [showSubtitle]=\"false\" \n          [showInnerStroke]=\"true\" \n          [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"></circle-progress>\n        <!-- <p>no data</p> -->\n        </ng-template>\n      </div>\n\n      \n\n      <!-- <button *ngIf=\"content?.artifactUrl\" type=\"button\" mat-icon-button [matMenuTriggerFor]=\"buttonMenu\">\n        <mat-icon>more_vertical</mat-icon>\n      </button> -->\n    </div>\n    <!-- <div class=\"resource-meta width-expand\">\n      <a [routerLink]=\"resourceLink.url\" [queryParams]=\"resourceLink.queryParams\">\n        <h3 *ngIf=\"content?.displayContentType !== enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h3>\n        <h1 *ngIf=\"content?.displayContentType === enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h1>\n      </a>\n      <span class=\"mat-body-strong margin-left-xs\">{{ content?.duration | pipeDurationTransform: 'time24' }}\n      </span>\n    </div> -->\n  </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n  <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n    class=\"flex flex-middle\">\n    <mat-icon>toc</mat-icon>\n    <h3 class=\"margin-remove\" >\n      {{'apptoccontentcard.viewDetails' | translate}}\n    </h3>\n  </a>\n  <!-- TODO: Hiding this from here for now, as the functionalities are not working -->\n  <!-- <div mat-menu-item>\n    <ws-widget-btn-content-download [widgetData]=\"\n        content\n          | pipePartialContent\n            : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal']\n      \"></ws-widget-btn-content-download>\n    <ws-widget-btn-content-like [widgetData]=\"content | pipePartialContent: ['identifier']\">\n    </ws-widget-btn-content-like>\n    <ws-widget-btn-content-share [widgetData]=\"content\"></ws-widget-btn-content-share>\n    <ws-widget-btn-goals></ws-widget-btn-goals>\n    <ws-widget-btn-playlist></ws-widget-btn-playlist>\n  </div> -->\n</mat-menu>\n", styles: [".customicon{position:absolute;top:-.5em;right:-4px}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-txt{padding:0 20px;color:#0273b6;font-weight:700}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId"] }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content\">\n  <ng-container *ngIf=\"isCollection\">\n    <div class=\"flex flex-col position-relative\">\n      <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n        <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n          (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n        <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n          <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren\">\n            <div class=\"flex flex-col sm:flex-row flex-wrap\">\n              <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n                {{ content?.name }} \n              </p>\n              <ng-container *ngIf=\"content.issuedCertificatesSVG\">\n                <a class=\"certificate-txt\" (click)=\"openCertificateDialog(content.issuedCertificatesSVG)\">\n                  <span class=\"view-certificate-wrapper\">\n                    <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                    <span>{{'apptoccontentcard.viewCertificate' | translate}}</span>\n                  </span>\n                </a>\n              </ng-container>\n              <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.resource' | translate}}</span>\n              </div>\n              <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.module' | translate}}</span>\n              </div>\n              <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.course' | translate}}</span>\n              </div>\n            </div>\n            <div>\n              <!-- <span class=\"mat-body-strong content-type\">{{ content?.displayContentType }}</span> -->\n              <!-- <span class=\"ml-5\"> -->\n              <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n              <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n              <span class=\"text-lowercase ws-mat-black60-text\">{{ content?.duration | pipeDurationTransform: 'hms'\n                }}</span>\n              <!-- </span> -->\n            </div>\n          </div>\n          <button *ngIf=\"content?.artifactUrl && isAllowed && !isEnabled\" type=\"button\" mat-icon-button\n            [matMenuTriggerFor]=\"buttonMenu\">\n            <mat-icon>more_vertical</mat-icon>\n          </button>\n          <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage && content.primaryCategory !== 'Course'\">\n            <ng-container *ngIf=\"content?.completionStatus == 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n                [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n                [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionStatus < 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\"\n                [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\"\n                [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n                [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                [backgroundStrokeWidth]=\"3\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n          </ng-container>\n\n          <!-- <div *ngIf=\"hasContentStructure\" class=\"child-meta-container\">\n            <div class=\"child-structure\"> -->\n          <!-- <mat-icon class=\"structure-icon\">import_contacts</mat-icon> -->\n          <!-- <span class=\"oval-white\" *ngIf=\"contentStructure?.course > 0\">\n                <ng-container>{{ contentStructure?.course }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course === 1\" > Course</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course > 1\" > Courses</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.learningModule > 0\">\n                <ng-container> {{ contentStructure?.learningModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule === 1\" > Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule > 1\" > Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.video > 0\">\n                <ng-container> {{ contentStructure?.video }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video === 1\" > Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video > 1\" > Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.interactiveVideo > 0\">\n                <ng-container> {{ contentStructure?.interactiveVideo }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo === 1\" >\n                  Interactive Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo > 1\" >\n                  Interactive Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.youtube > 0\">\n                <ng-container> {{ contentStructure?.youtube }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube === 1\" > Youtube Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube > 1\" > Youtube Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.pdf > 0\">\n                <ng-container> {{ contentStructure?.pdf }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf === 1\" > PDF</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf > 1\" > PDFs</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.podcast > 0\">\n                <ng-container> {{ contentStructure?.podcast }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast === 1\" > Podcast</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast > 1\" > Podcasts</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webModule > 0\">\n                <ng-container> {{ contentStructure?.webModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule === 1\" > Web Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule > 1\" > Web Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webPage > 0\">\n                <ng-container> {{ contentStructure?.webPage }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage === 1\" > Web Page</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage > 1\" > Web Pages</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.quiz > 0\">\n                <ng-container *ngIf=\"contentStructure?.webPage > 0\">, </ng-container>\n                <ng-container>{{ contentStructure?.quiz }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz === 1\" > Quiz</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz > 1\" > Quizzes</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.assessment > 0\">\n                <ng-container> {{ contentStructure?.assessment }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment === 1\" > Assessment</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment > 1\" > Assessments</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.other > 0\">\n                <ng-container>{{ contentStructure?.other }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other === 1\" > Other item</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other > 1\" > Other Items</ng-container>\n              </span>\n            </div>\n          </div> -->\n          <div class=\"see-all-container\">\n            <a href=\"javascript:void(0)\" role=\"button\" (click)=\"viewChildren = !viewChildren\"\n              class=\"margin-left-m see-all-btn tab custom-chevron customicon\" mat-button>\n              <!-- <ng-container *ngIf=\"!viewChildren\" >See All</ng-container>\n              <ng-container *ngIf=\"viewChildren\" >See Less</ng-container> -->\n              <mat-icon *ngIf=\"!viewChildren\">keyboard_arrow_down</mat-icon>\n              <mat-icon *ngIf=\"viewChildren\">keyboard_arrow_up</mat-icon>\n            </a>\n          </div>\n        </div>\n      </div>\n      <!-- <div class=\"w-100\" *ngIf=\"content?.identifier && content?.completionPercentage\">\n        <ng-container *ngIf=\"content?.completionStatus == 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n        <ng-container *ngIf=\"content?.completionStatus < 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n      </div> -->\n    </div>\n\n    <div class=\"children-container margin-left-l margin-top-s margin-bottom-s\" [hidden]=\"!viewChildren\">\n      <ws-app-toc-content-card [forPreview]=\"forPreview\" [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\"\n        [batchId]=\"batchId\" [rootContentType]=\"rootContentType\"\n        *ngFor=\"let child of content?.children; trackBy: contentTrackBy\">\n      </ws-app-toc-content-card>\n    </div>\n  </ng-container>\n  <div *ngIf=\"isResource\" class=\"resource-container\">\n    <!-- <ws-widget-display-content-type-icon class=\"flex\" [displayContentType]=\"content?.displayContentType\">\n    </ws-widget-display-content-type-icon> -->\n    <!-- <div class=\"img-container\"> -->\n    <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n    <!-- <ng-container *ngIf=\"content?.completionStatus == 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\" [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container>\n    <ng-container *ngIf=\"content?.completionStatus < 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n        [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container> -->\n    <!-- </div> -->\n\n    <div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n      <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n      <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\" [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n        [queryParams]=\"(isAllowed && !forPreview && !isEnabled)  ? resourceLink.queryParams : null\">\n        <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n          <div class=\"flex flex-col sm:flex-row flex-wrap\">\n            <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n              <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n              {{ content?.name }}\n            </p>\n            <span class=\"content-type optional-span\" *ngIf=\"content?.optionalReading\">{{'apptoccontentcard.optional' | translate}}</span>\n            <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n          </div>\n          <div class=\"resicons ws-mat-black60-text\">\n            <!-- <span class=\"mat-body-strong content-type ws-mat-default-text\">{{ content?.contentType }}</span> -->\n            <!-- <span class=\"ml-5\"> -->\n            <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n            <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\" class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                content?.mimeType ==='application/x-mpegURL'\">\n            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/pdf'\">\n            <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n              *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n              *ngIf=\"content.mimeType === 'application/offline' || content?.mimeType === 'application/survey'\">\n            <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n            <!-- </span> -->\n          </div>\n        </div>\n      </a>\n      <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n        <!-- <div class=\"type-container resource\" *ngIf=\"content?.contentType === 'Resource'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Resource</span>\n        </div>\n        <div class=\"type-container module\" *ngIf=\"content?.contentType === 'Collection'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Module</span>\n        </div>\n        <div class=\"type-container course\" *ngIf=\"content?.contentType === 'Course'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Course</span>\n        </div> -->\n        <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\" mat-icon-button\n          class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n          <mat-icon>more_vertical</mat-icon>\n        </button>\n        <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage ; else elseBlock\">\n        \n          <ng-container *ngIf=\"content?.completionStatus == 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n              [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.completed' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionStatus < 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\" [radius]=\"12\"\n              [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor2()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.inProgress' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n              [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n              [progressType]=\"'percentage'\">\n            </ws-widget-content-progress> -->\n          </ng-container>\n          \n        </ng-container>\n        <ng-template #elseBlock>\n        <circle-progress  class=\"flex items-center progress\"\n          [percent]=\"0\"\n          [radius]=\"12\"\n          [outerStrokeWidth]=\"3\"\n          [innerStrokeWidth]=\"3\"\n          [outerStrokeColor]=\"'#808080'\"\n          [innerStrokeColor]=\"'#808080'\"\n          [animation]=\"true\"\n          [space]=\"-3\"\n          [showUnits]=\"false\"\n          [animationDuration]=\"300\"\n          [showTitle]=\"false\"\n          [backgroundPadding]=\"0\"\n          [backgroundPadding]=\"-9\"\n          [outerStrokeLinecap]=\"'butt'\"\n          matTooltip=\"{{'apptoccontentcard.notStarted' | translate}}\"\n          [showSubtitle]=\"false\" \n          [showInnerStroke]=\"true\" \n          [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"></circle-progress>\n        <!-- <p>no data</p> -->\n        </ng-template>\n      </div>\n\n      \n\n      <!-- <button *ngIf=\"content?.artifactUrl\" type=\"button\" mat-icon-button [matMenuTriggerFor]=\"buttonMenu\">\n        <mat-icon>more_vertical</mat-icon>\n      </button> -->\n    </div>\n    <!-- <div class=\"resource-meta width-expand\">\n      <a [routerLink]=\"resourceLink.url\" [queryParams]=\"resourceLink.queryParams\">\n        <h3 *ngIf=\"content?.displayContentType !== enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h3>\n        <h1 *ngIf=\"content?.displayContentType === enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h1>\n      </a>\n      <span class=\"mat-body-strong margin-left-xs\">{{ content?.duration | pipeDurationTransform: 'time24' }}\n      </span>\n    </div> -->\n  </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n  <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n    class=\"flex flex-middle\">\n    <mat-icon>toc</mat-icon>\n    <h3 class=\"margin-remove\" >\n      {{'apptoccontentcard.viewDetails' | translate}}\n    </h3>\n  </a>\n  <!-- TODO: Hiding this from here for now, as the functionalities are not working -->\n  <!-- <div mat-menu-item>\n    <ws-widget-btn-content-download [widgetData]=\"\n        content\n          | pipePartialContent\n            : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal']\n      \"></ws-widget-btn-content-download>\n    <ws-widget-btn-content-like [widgetData]=\"content | pipePartialContent: ['identifier']\">\n    </ws-widget-btn-content-like>\n    <ws-widget-btn-content-share [widgetData]=\"content\"></ws-widget-btn-content-share>\n    <ws-widget-btn-goals></ws-widget-btn-goals>\n    <ws-widget-btn-playlist></ws-widget-btn-playlist>\n  </div> -->\n</mat-menu>\n", styles: [".customicon{position:absolute;top:-.5em;right:-4px}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-txt{padding:0 20px;color:#0273b6;font-weight:700}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId"] }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardComponent, decorators: [{
             type: Component,
@@ -23231,7 +23334,7 @@ class CreateBatchDialogComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateBatchDialogComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: AppTocService }, { token: i7.MatLegacySnackBar }, { token: i2$1.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateBatchDialogComponent, selector: "ws-app-create-batch-dialog", providers: [
             { provide: DateAdapter, useClass: NativeDateAdapter },
-        ], viewQueries: [{ propertyName: "toastSuccess", first: true, predicate: ["toastSuccess"], descendants: true, static: true }, { propertyName: "toastError", first: true, predicate: ["toastError"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"createBatchForm\">\n    <!-- <h2 mat-dialog-title>Install Angular</h2> -->\n    <mat-dialog-content class=\"mat-typography pad-fix\">\n        <div class=\"flex flex-1 custom\">\n            <div class=\"flex flex-4 flex-column margin-right-l\">\n\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"name\" class=\" margin-remove-bottom form-label required\"\n                            i18n=\"Name label|Label which explains the user to enter name\" i18n-aria-label\n                            aria-label=\"Name label\">\n                            Name\n                        </label>\n                        <input id=\"name\" matInput #name formControlName=\"name\" i18n-placeholder\n                            placeholder=\"Enter Name\" i18n-aria-label aria-label=\"Name input\" />\n                        <mat-error [hidden]=\"false\" i18n=\"Name Error|Explains name is required\" i18n-aria-label\n                            aria-label=\"Name Error|Explains name is required \"\n                            *ngIf=\"createBatchForm?.controls['name'].errors?.required\">\n                            Name is mandatory\n                        </mat-error>\n                        <mat-error [hidden]=\"false\" *ngIf=\"createBatchForm?.controls['name'].errors?.pattern\"\n                            i18n-aria-label\n                            aria-label=\"Name Error|Name fields cannot contain numbers and special characters \">\n                            Name fields cannot contain numbers and special characters  '\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"description\" class=\" margin-remove-bottom form-label\"\n                            i18n=\"description label|Label which explains the user to enter description\" i18n-aria-label\n                            aria-label=\"description label\">\n                            Description\n                        </label>\n                        <input id=\"description\" matInput #description formControlName=\"description\" i18n-placeholder\n                            placeholder=\"Enter Description\" i18n-aria-label aria-label=\"Description input\" />\n                        <mat-error [hidden]=\"false\" i18n=\"Description Error|Explains description is required\" i18n-aria-label\n                            aria-label=\"Description Error|Explains description is required \"\n                            *ngIf=\"createBatchForm?.controls['description'].errors?.required\">\n                            Description is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"enrollmentType\" class=\" margin-remove-bottom form-label required\"\n                            i18n=\"enrollmentType label|Label which explains the user to enter enrollmentType\" i18n-aria-label\n                            aria-label=\"enrollmentType label\">\n                            Enrollment Type\n                        </label>\n                        <mat-select matInput formControlName=\"enrollmentType\" #enrollmentType >\n                            <mat-option [value]=\"c\" *ngFor=\"let c of enrollmentTypes\" [innerHTML]=\"c\"></mat-option>\n                        </mat-select>\n                        <mat-error [hidden]=\"false\" i18n=\"enrollmentType Error|Explains enrollmentType is required\" i18n-aria-label\n                            aria-label=\"enrollmentType Error|Explains enrollmentType is required \"\n                            *ngIf=\"createBatchForm?.controls['enrollmentType'].errors?.required\">\n                            Enrollment Type is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"startDate\" matInput #startDate formControlName=\"startDate\" [matDatepicker]=\"picker\"\n                          i18n-placeholder (focus)=\"picker.open()\" placeholder=\"Choose startDate(dd-mm-yyyy)\"\n                          [min]=\"today\"  readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                        <mat-datepicker #picker (closed)=\"startDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"Start date Error|Explains name is required\">\n                          Start date is mandatory\n                        </mat-error>\n                      </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"endDate\" matInput #endDate formControlName=\"endDate\" [matDatepicker]=\"endpicker\"\n                          i18n-placeholder (focus)=\"endpicker.open()\" placeholder=\"Choose endDate(dd-mm-yyyy)\"\n                          [min]=\"today\" readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"endpicker\"></mat-datepicker-toggle>\n                        <mat-datepicker #endpicker (closed)=\"endDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n                          End date is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"enrollmentEndDate\" matInput #enrollmentEndDate formControlName=\"enrollmentEndDate\" [matDatepicker]=\"enrollmentEndPicker\"\n                          i18n-placeholder (focus)=\"enrollmentEndPicker.open()\" placeholder=\"Choose enrollmentEndDate(dd-mm-yyyy)\"\n                          [min]=\"today\"  readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"enrollmentEndPicker\"></mat-datepicker-toggle>\n                        <mat-datepicker #enrollmentEndPicker (closed)=\"enrollmentEndDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n                          End date is mandatory\n                        </mat-error>\n                      </mat-form-field>\n                </div>\n                <mat-dialog-actions align=\"end\" class=\"mb-0-imp\">\n                    <button mat-raised-button type=\"button\" [mat-dialog-close]=\"true\"\n                      class=\"ws-mat-accent-border flex-auto-display\">\n                      <span class=\"ws-mat-default-text\" >Discard</span>\n                    </button>\n                    <button mat-raised-button type=\"submit\"\n                    class=\"text-white ws-mat-primary-background flex-auto-display\" \n                    [disabled]=\"uploadSaveData || createBatchForm?.invalid\" (click)=\"createBatchSubmit(createBatchForm)\">\n                    <span class=\"text-white\" >Create</span>\n                  </button>\n                  <span *ngIf=\"uploadSaveData\" class=\"px-4 flex items-center justify-center\">\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\n                  </span>\n                  </mat-dialog-actions>\n            </div>\n\n        </div>\n    </mat-dialog-content>\n</form>\n\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"Batch created successfully\"\n  value=\"Batch created successfully!\" #toastSuccess />\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"unable to create batch\"\n  value=\"Error in creating batch!\" #toastError />", styles: [".start-card{min-width:80px;margin:0 30px 30px;font-size:16px}.start-card mat-card-content{margin-top:10px}@media only screen and (max-width: 599px){.flex-auto-display{flex:auto;margin-left:0!important;margin-top:1rem}}@media only screen and (min-width: 600px) and (max-width: 959px){.flex-auto-display{flex:auto}}.similar{display:none!important}@media only screen and (max-width: 599px){.similar{display:none!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.similar{display:none!important}}@media only screen and (max-width: 599px){.mob{margin-left:0!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.mob{margin-left:0!important}}.custom{flex-direction:row}@media only screen and (max-width: 599px){.custom{flex-direction:column}}@media only screen and (min-width: 600px) and (max-width: 959px){.custom{flex-direction:column}}.pad-fix{padding:0 0 0 24px}.flex-4{flex:4}.flex-3{flex:3}.flex-2{flex:2}.mb-0-imp{margin-bottom:0!important}.w-full-imp{width:100%!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatLegacyDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatLegacyDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+        ], viewQueries: [{ propertyName: "toastSuccess", first: true, predicate: ["toastSuccess"], descendants: true, static: true }, { propertyName: "toastError", first: true, predicate: ["toastError"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"createBatchForm\">\n    <!-- <h2 mat-dialog-title>Install Angular</h2> -->\n    <mat-dialog-content class=\"mat-typography pad-fix\">\n        <div class=\"flex flex-1 custom\">\n            <div class=\"flex flex-4 flex-column margin-right-l\">\n\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"name\" class=\" margin-remove-bottom form-label required\"\n                            i18n=\"Name label|Label which explains the user to enter name\" i18n-aria-label\n                            aria-label=\"Name label\">\n                            Name\n                        </label>\n                        <input id=\"name\" matInput #name formControlName=\"name\" i18n-placeholder\n                            placeholder=\"Enter Name\" i18n-aria-label aria-label=\"Name input\" />\n                        <mat-error [hidden]=\"false\" i18n=\"Name Error|Explains name is required\" i18n-aria-label\n                            aria-label=\"Name Error|Explains name is required \"\n                            *ngIf=\"createBatchForm?.controls['name'].errors?.required\">\n                            Name is mandatory\n                        </mat-error>\n                        <mat-error [hidden]=\"false\" *ngIf=\"createBatchForm?.controls['name'].errors?.pattern\"\n                            i18n-aria-label\n                            aria-label=\"Name Error|Name fields cannot contain numbers and special characters \">\n                            Name fields cannot contain numbers and special characters  '\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"description\" class=\" margin-remove-bottom form-label\"\n                            i18n=\"description label|Label which explains the user to enter description\" i18n-aria-label\n                            aria-label=\"description label\">\n                            Description\n                        </label>\n                        <input id=\"description\" matInput #description formControlName=\"description\" i18n-placeholder\n                            placeholder=\"Enter Description\" i18n-aria-label aria-label=\"Description input\" />\n                        <mat-error [hidden]=\"false\" i18n=\"Description Error|Explains description is required\" i18n-aria-label\n                            aria-label=\"Description Error|Explains description is required \"\n                            *ngIf=\"createBatchForm?.controls['description'].errors?.required\">\n                            Description is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"enrollmentType\" class=\" margin-remove-bottom form-label required\"\n                            i18n=\"enrollmentType label|Label which explains the user to enter enrollmentType\" i18n-aria-label\n                            aria-label=\"enrollmentType label\">\n                            Enrollment Type\n                        </label>\n                        <mat-select matInput formControlName=\"enrollmentType\" #enrollmentType >\n                            <mat-option [value]=\"c\" *ngFor=\"let c of enrollmentTypes\" [innerHTML]=\"c\"></mat-option>\n                        </mat-select>\n                        <mat-error [hidden]=\"false\" i18n=\"enrollmentType Error|Explains enrollmentType is required\" i18n-aria-label\n                            aria-label=\"enrollmentType Error|Explains enrollmentType is required \"\n                            *ngIf=\"createBatchForm?.controls['enrollmentType'].errors?.required\">\n                            Enrollment Type is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"startDate\" matInput #startDate formControlName=\"startDate\" [matDatepicker]=\"picker\"\n                          i18n-placeholder (focus)=\"picker.open()\" placeholder=\"Choose startDate(dd-mm-yyyy)\"\n                          [min]=\"today\"  readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                        <mat-datepicker #picker (closed)=\"startDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"Start date Error|Explains name is required\">\n                          Start date is mandatory\n                        </mat-error>\n                      </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"endDate\" matInput #endDate formControlName=\"endDate\" [matDatepicker]=\"endpicker\"\n                          i18n-placeholder (focus)=\"endpicker.open()\" placeholder=\"Choose endDate(dd-mm-yyyy)\"\n                          [min]=\"today\" readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"endpicker\"></mat-datepicker-toggle>\n                        <mat-datepicker #endpicker (closed)=\"endDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n                          End date is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"enrollmentEndDate\" matInput #enrollmentEndDate formControlName=\"enrollmentEndDate\" [matDatepicker]=\"enrollmentEndPicker\"\n                          i18n-placeholder (focus)=\"enrollmentEndPicker.open()\" placeholder=\"Choose enrollmentEndDate(dd-mm-yyyy)\"\n                          [min]=\"today\"  readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"enrollmentEndPicker\"></mat-datepicker-toggle>\n                        <mat-datepicker #enrollmentEndPicker (closed)=\"enrollmentEndDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n                          End date is mandatory\n                        </mat-error>\n                      </mat-form-field>\n                </div>\n                <mat-dialog-actions align=\"end\" class=\"mb-0-imp\">\n                    <button mat-raised-button type=\"button\" [mat-dialog-close]=\"true\"\n                      class=\"ws-mat-accent-border flex-auto-display\">\n                      <span class=\"ws-mat-default-text\" >Discard</span>\n                    </button>\n                    <button mat-raised-button type=\"submit\"\n                    class=\"text-white ws-mat-primary-background flex-auto-display\" \n                    [disabled]=\"uploadSaveData || createBatchForm?.invalid\" (click)=\"createBatchSubmit(createBatchForm)\">\n                    <span class=\"text-white\" >Create</span>\n                  </button>\n                  <span *ngIf=\"uploadSaveData\" class=\"px-4 flex items-center justify-center\">\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\n                  </span>\n                  </mat-dialog-actions>\n            </div>\n\n        </div>\n    </mat-dialog-content>\n</form>\n\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"Batch created successfully\"\n  value=\"Batch created successfully!\" #toastSuccess />\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"unable to create batch\"\n  value=\"Error in creating batch!\" #toastError />", styles: [".start-card{min-width:80px;margin:0 30px 30px;font-size:16px}.start-card mat-card-content{margin-top:10px}@media only screen and (max-width: 599px){.flex-auto-display{flex:auto;margin-left:0!important;margin-top:1rem}}@media only screen and (min-width: 600px) and (max-width: 959px){.flex-auto-display{flex:auto}}.similar{display:none!important}@media only screen and (max-width: 599px){.similar{display:none!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.similar{display:none!important}}@media only screen and (max-width: 599px){.mob{margin-left:0!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.mob{margin-left:0!important}}.custom{flex-direction:row}@media only screen and (max-width: 599px){.custom{flex-direction:column}}@media only screen and (min-width: 600px) and (max-width: 959px){.custom{flex-direction:column}}.pad-fix{padding:0 0 0 24px}.flex-4{flex:4}.flex-3{flex:3}.flex-2{flex:2}.mb-0-imp{margin-bottom:0!important}.w-full-imp{width:100%!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatLegacyDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatLegacyDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateBatchDialogComponent, decorators: [{
             type: Component,
@@ -23268,7 +23371,7 @@ class AppTocSessionCardComponent {
         return '#f27d00';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSessionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocSessionCardComponent, selector: "ws-app-toc-session-card", inputs: { session: "session", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchData: "batchData", config: "config" }, ngImport: i0, template: "<div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n    <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\"\n        [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n        [queryParams]=\"(isAllowed && !forPreview && !isEnabled)  ? resourceLink.queryParams : null\">\n        <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n            (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n            <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n                    <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                    {{ session?.title }}\n                </p>\n\n                <span class=\"content-type optional-span\" *ngIf=\"session?.optionalReading\">{{'apptocsessionscards.optional' | translate }} </span>\n                <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n\n\n            </div>\n            <div class=\"mat-body-2 ws-mat-black60-text\">\n                <div class=\"flex flex-1 flex-row\">\n                    <div class=\"flex margin-right-s capitalize\">{{session?.sessionType || ''}}</div>\n                    <div class=\"flex margin-right-s bullet-span\">{{session?.startDate | date: 'dd-MM-yyyy' }}</div>\n                    <div class=\"flex bullet-span\">{{session?.sessionDuration || '_'}}, {{session?.startTime || '_' }} -\n                      {{session?.endTime || '_'}}\n                    </div>\n                </div>\n                <!-- <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span> -->\n                <!-- </span> -->\n            </div>\n        </div>\n    </a>\n    <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n        <ng-container *ngIf=\"!forPreview && session?.sessionId && session?.completionPercentage; else elseBlock\">\n            <ng-container *ngIf=\"session?.completionStatus == 2\">\n                <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                    [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n                    [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\"\n                    [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                    [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                    matTooltip=\"Completed\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                    [outerStrokeLinecap]=\"'butt'\">\n                </circle-progress>\n            </ng-container>\n            <ng-container *ngIf=\"session?.completionStatus < 2\">\n                <circle-progress class=\"flex items-center progress\" [percent]=\"session?.completionPercentage\"\n                    [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                    [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                    [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n                    [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                    [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                    [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"24\"\n                    [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                </circle-progress>\n            </ng-container>\n\n        </ng-container>\n        <ng-template #elseBlock>\n            <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                [innerStrokeWidth]=\"3\" [outerStrokeColor]=\"'#808080'\" [innerStrokeColor]=\"'#808080'\" [animation]=\"true\"\n                [space]=\"-3\" [showUnits]=\"false\" [animationDuration]=\"300\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\" [showSubtitle]=\"false\"\n                [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\"\n                [showBackground]=\"false\"></circle-progress>\n            <!-- <p>no data</p> -->\n        </ng-template>\n    </div>\n</div>\n<ng-container *ngIf=\"batchData?.enrolled\">\n    <div *ngIf=\"session?.sessionHandouts?.length > 0\">\n        <p class=\" font-bold mat-body-1 margin-bottom-xs  ws-mat-black60-text\">{{'apptocsessionscards.sessionHandouts' | translate }}</p>\n        <div class=\"flex flex-col flex-wrapped margin-bottom-s width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n            <ng-container *ngFor=\"let handout of session?.sessionHandouts\">\n                <div class=\"\">\n                    <span class=\"mr-4\">{{handout.title}}</span>\n                    <a class=\"download-link\" target=\u201D_blank\u201D download href=\"{{handout.url}}\">{{'apptocsessionscards.download' | translate }}</a>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n<ng-container>\n    <ws-widget-attendance-card [session]=\"session\" [config]=\"config\"></ws-widget-attendance-card>\n</ng-container>", styles: ["@charset \"UTF-8\";.customicon{position:absolute;top:-.5em;right:0}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:8px}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.bullet-span:before{content:\"\\2022\";padding-right:12px}.download-link{opacity:1;color:#0074b6;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;line-height:20px;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AttendanceCardComponent, selector: "ws-widget-attendance-card", inputs: ["session", "status", "config", "showInfo"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocSessionCardComponent, selector: "ws-app-toc-session-card", inputs: { session: "session", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchData: "batchData", config: "config" }, ngImport: i0, template: "<div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n    <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\"\n        [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n        [queryParams]=\"(isAllowed && !forPreview && !isEnabled)  ? resourceLink.queryParams : null\">\n        <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\"\n            (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n            <div class=\"flex flex-col sm:flex-row flex-wrap\">\n                <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n                    <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n                    {{ session?.title }}\n                </p>\n\n                <span class=\"content-type optional-span\" *ngIf=\"session?.optionalReading\">{{'apptocsessionscards.optional' | translate }} </span>\n                <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n\n\n            </div>\n            <div class=\"mat-body-2 ws-mat-black60-text\">\n                <div class=\"flex flex-1 flex-row\">\n                    <div class=\"flex margin-right-s capitalize\">{{session?.sessionType || ''}}</div>\n                    <div class=\"flex margin-right-s bullet-span\">{{session?.startDate | date: 'dd-MM-yyyy' }}</div>\n                    <div class=\"flex bullet-span\">{{session?.sessionDuration || '_'}}, {{session?.startTime || '_' }} -\n                      {{session?.endTime || '_'}}\n                    </div>\n                </div>\n                <!-- <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span> -->\n                <!-- </span> -->\n            </div>\n        </div>\n    </a>\n    <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n        <ng-container *ngIf=\"!forPreview && session?.sessionId && session?.completionPercentage; else elseBlock\">\n            <ng-container *ngIf=\"session?.completionStatus == 2\">\n                <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                    [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n                    [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\"\n                    [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\"\n                    [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                    matTooltip=\"Completed\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                    [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                    [outerStrokeLinecap]=\"'butt'\">\n                </circle-progress>\n            </ng-container>\n            <ng-container *ngIf=\"session?.completionStatus < 2\">\n                <circle-progress class=\"flex items-center progress\" [percent]=\"session?.completionPercentage\"\n                    [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                    [outerStrokeColor]=\"progressColor2()\" [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\"\n                    [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n                    [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                    [backgroundStrokeWidth]=\"3\" matTooltip=\"In progress\" [showZeroOuterStroke]=false\n                    [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\" [imageHeight]=\"24\"\n                    [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n                </circle-progress>\n            </ng-container>\n\n        </ng-container>\n        <ng-template #elseBlock>\n            <circle-progress class=\"flex items-center progress\" [percent]=\"0\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                [innerStrokeWidth]=\"3\" [outerStrokeColor]=\"'#808080'\" [innerStrokeColor]=\"'#808080'\" [animation]=\"true\"\n                [space]=\"-3\" [showUnits]=\"false\" [animationDuration]=\"300\" [showTitle]=\"false\" [backgroundPadding]=\"0\"\n                [backgroundPadding]=\"-9\" [outerStrokeLinecap]=\"'butt'\" matTooltip=\"Not started\" [showSubtitle]=\"false\"\n                [showInnerStroke]=\"true\" [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\"\n                [showBackground]=\"false\"></circle-progress>\n            <!-- <p>no data</p> -->\n        </ng-template>\n    </div>\n</div>\n<ng-container *ngIf=\"batchData?.enrolled\">\n    <div *ngIf=\"session?.sessionHandouts?.length > 0\">\n        <p class=\" font-bold mat-body-1 margin-bottom-xs  ws-mat-black60-text\">{{'apptocsessionscards.sessionHandouts' | translate }}</p>\n        <div class=\"flex flex-col flex-wrapped margin-bottom-s width-expand pr-0 w-100 sm:pr-4 sm:w-auto mb-4\">\n            <ng-container *ngFor=\"let handout of session?.sessionHandouts\">\n                <div class=\"\">\n                    <span class=\"mr-4\">{{handout.title}}</span>\n                    <a class=\"download-link\" target=\u201D_blank\u201D download href=\"{{handout.url}}\">{{'apptocsessionscards.download' | translate }}</a>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n<ng-container>\n    <ws-widget-attendance-card [session]=\"session\" [config]=\"config\"></ws-widget-attendance-card>\n</ng-container>", styles: ["@charset \"UTF-8\";.customicon{position:absolute;top:-.5em;right:0}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:8px}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.bullet-span:before{content:\"\\2022\";padding-right:12px}.download-link{opacity:1;color:#0074b6;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;line-height:20px;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AttendanceCardComponent, selector: "ws-widget-attendance-card", inputs: ["session", "status", "config", "showInfo"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSessionCardComponent, decorators: [{
             type: Component,
@@ -24036,7 +24139,7 @@ class AppTocSinglePageComponent {
         return this.langtranslations.translateLabelWithoutspace(label, type, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSinglePageComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: AppTocService }, { token: i1$5.DomSanitizer }, { token: AccessControlService }, { token: i2$1.LoggerService }, { token: TitleTagService }, { token: i1$3.MatLegacyDialog }, { token: MobileAppsService }, { token: i2$1.ConfigurationsService }, { token: ConnectionHoverService }, { token: i2$1.EventService }, { token: RatingService }, { token: i1$2.TranslateService }, { token: i2$1.MultilingualTranslationsService }, { token: 'environment', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocSinglePageComponent, selector: "ws-app-app-toc-single-page", inputs: { content: "content", initialrouteData: "initialrouteData", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData" }, usesOnChanges: true, ngImport: i0, template: "<mat-tab-group [selectedIndex]=\"tabSelectedIndex\" class=\"custom-tabgroup\" (selectedTabChange)=\"tabClicked($event)\">\n    <mat-tab label=\"{{'apptocsinglepage.overview' | translate}}\">\n        <ng-template matTabContent>\n            <section id=\"overview\">\n                <div class=\"fixed-width flex flex-wrap\">\n                    <div class=\"meta-section\">\n                        <!-- Description : Conditional : If not shown here, will be shown over banner -->\n                        <mat-card *ngIf=\"\n                        tocConfig?.overview?.description?.enabled &&\n                        showDescription &&\n                        showSubtitleOnBanner &&\n                        content?.description\n                        \" class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ translateLabels(tocConfig?.overview?.description?.displayName, 'apptocsinglepage') }}</h2>\n                            <mat-card-content>\n                                <div class=\"section-content mat-body-1\" [innerHTML]=\"sanitize(content?.description)\">\n                                </div>\n                            </mat-card-content>\n                        </mat-card>\n                        <!-- Content Body -->\n                        <mat-card *ngIf=\"tocConfig?.overview?.body?.enabled && content?.instructions\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ translateLabels(tocConfig?.overview?.body?.displayName, 'apptocsinglepage') }}\n                            </h2>\n                            <mat-card-content>\n                                <div class=\"section-content mat-body-1\" [innerHTML]=\"sanitize(content?.instructions)\">\n                                </div>\n                            </mat-card-content>\n                        </mat-card>\n                        <!-- Learning objective -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.learningObjective?.enabled && content?.learningObjective\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.learningObjective?.displayName }}</h2>\n                            <mat-card-content>\n                                <p class=\"section-content mat-subheading-1\" [innerHTML]=\"content?.learningObjective\"></p>\n                            </mat-card-content>\n                        </mat-card> -->\n\n                        <!-- Registration instructions -->\n                        <!-- <mat-card *ngIf=\"\n            tocConfig?.overview?.registrationInstructions?.enabled &&\n            content?.registrationInstructions?.length\n            \" class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.registrationInstructions?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"section-content mat-subheading-1 break-words\"\n                                    [innerHTML]=\"content?.registrationInstructions\"></div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.preContents?.enabled && content?.preContents?.length\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.preContents?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let preContent of content?.preContents\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + preContent.identifier\"\n                                    [queryParams]=\"{primaryCategory: preContent?.primaryCategory}\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ preContent.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.postContents?.enabled && content?.postContents?.length\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.postContents?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let postContent of content?.postContents\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + postContent.identifier + '?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ postContent.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.certificationList?.enabled && content?.certificationList?.length\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.certificationList?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let certification of content?.certificationList\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + certification.identifier + '?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ certification.name }}\n                                        </p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.studyMaterials?.enabled && content?.studyMaterials?.length\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.studyMaterials?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let studyitem of content?.studyMaterials\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + studyitem.identifier + '?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ studyitem.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"\n            tocConfig?.overview?.playgroundResources?.enabled && content?.playgroundResources?.length\n            \" class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.playgroundResources?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let playgroundResource of content?.playgroundResources\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + playgroundResource.identifier + '?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n                                            {{ playgroundResource.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.kArtifacts?.enabled && content?.kArtifacts?.length\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.kArtifacts?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let kArtifact of content?.kArtifacts\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + kArtifact.identifier + '?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ kArtifact.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"\n            tocConfig?.overview?.equivalentCertifications?.enabled &&\n            content?.equivalentCertifications?.length\n            \" class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.equivalentCertifications?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let equivalentCertification of content?.equivalentCertifications\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + equivalentCertification.identifier +'?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n                                            {{ equivalentCertification.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"\n            tocConfig?.overview?.softwareRequirements?.enabled && content?.softwareRequirements?.length\n            \" class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.softwareRequirements?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let softwareRequirement of content?.softwareRequirements\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [href]=\"softwareRequirement.url\" target=\"blank\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n                                            {{ softwareRequirement.title }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- Skills -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.skills?.enabled && content?.skills?.length\"\n                            class=\"unit-meta-item mat-app-background\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.skills?.displayName }}</h2>\n                            <mat-chip-list>\n                                <mat-chip class=\"section-content\" *ngFor=\"let skill of content?.skills\">{{ skill.name }}</mat-chip>\n                            </mat-chip-list>\n                        </mat-card> -->\n                        <!-- Requirements -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.preRequisites?.enabled && content?.preRequisites\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.preRequisites?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"mat-subheading-1\" [innerHTML]=\"content?.preRequisites\"></div>\n                                <div class=\"margin-top-s\" *ngIf=\"content?.softwareRequirements?.length\">\n                                    <h3 class=\"mat-h3 margin-bottom-xs\" >Software Requirements</h3>\n                                    <ng-container *ngFor=\"let requirement of content?.softwareRequirements\">\n                                        <a *ngIf=\"requirement.url\" class=\"margin-right-s\" mat-stroked-button target=\"_blank\"\n                                            [href]=\"requirement.url\">\n                                            {{ requirement.title }}\n                                        </a>\n                                        <a mat-stroked-button class=\"margin-right-s\"\n                                            *ngIf=\"!requirement?.url\">{{ requirement.title }}\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n\n                        <!-- Training (LHub) -->\n                        <!-- <mat-card *ngIf=\"trainingLHubEnabled && trainingLHubCount$ | async as trainingLHubCount\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\" >Trainings</h2>\n                            <h4 class=\"mat-h4\">\n                                <ng-container>{{ trainingLHubCount }}</ng-container>\n                                <ng-container i18n=\"x trainings available\" *ngIf=\"trainingLHubCount > 1\">\n                                    trainings available</ng-container>\n                                <ng-container i18n=\"1 training available\" *ngIf=\"trainingLHubCount === 1\">\n                                    training available</ng-container>\n                            </h4>\n                            <div>\n\n                            </div>\n                        </mat-card> -->\n\n                        <!-- Related Topics -->\n                        <!-- <mat-card class=\"unit-meta-item\" *ngIf=\"tocConfig?.overview?.topics?.enabled && content?.topics?.length\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.topics?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex flex-between flex-wrapped\">\n                                    <a mat-stroked-button class=\"topic-button text-truncate\"\n                                        *ngFor=\"let topic of content?.topics | pipeLimitTo: (viewMoreRelatedTopics ? 24 : 6)\"\n                                        [title]=\"topic?.name\" [routerLink]=\"'/app/concept-graph/' + topic.identifier\">\n                                        {{ topic?.name }}\n                                    </a>\n                                </div>\n                                <div *ngIf=\"content?.topics?.length > 6\" class=\"text-right margin-top-xs\">\n                                    <a mat-button (click)=\"viewMoreRelatedTopics = !viewMoreRelatedTopics\">\n                                        <span *ngIf=\"!viewMoreRelatedTopics\" >View More</span>\n                                        <span *ngIf=\"viewMoreRelatedTopics\" >View Less</span>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card>\n                        <div class=\"margin-bottom-m\" *ngIf=\"objKeys(contentParents).length\">\n                            <mat-card>\n                                <h2 >This content is part of</h2>\n                            </mat-card>\n                            <mat-accordion>\n                                <ng-container *ngFor=\"let key of objKeys(contentParents)\">\n                                    <mat-expansion-panel>\n                                        <mat-expansion-panel-header>\n                                            {{ key }}\n                                        </mat-expansion-panel-header>\n                                        <div class=\"flex mb-1\" *ngFor=\"let content of contentParents[key]\">\n                                            <span class=\"mr-1\">\n                                                <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                            </span>\n                                            <a class=\"ws-mat-primary-text\" [routerLink]=\"\n                    content.status !== 'Live'\n                    ? '/author' + '/toc/' + content.identifier +'?primaryCategory='+ item.primaryCategory\n                    : '/app' + '/toc/' + content.identifier + '?primaryCategory='+ item.primaryCategory\n                \">\n                                                <p class=\"margin-remove-bottom mat-subheading-1\">{{ content.name }}</p>\n                                            </a>\n                                        </div>\n                                    </mat-expansion-panel>\n                                </ng-container>\n                            </mat-accordion>\n                        </div> -->\n                    </div>\n                </div>\n            </section>\n            <section id=\"authors\" *ngIf=\"(content?.creatorDetails && content?.creatorDetails.length > 0) || (content?.creatorContacts && content?.creatorContacts.length > 0)  ||\n                (cohortResults[cohortTypesEnum.AUTHORS] && cohortResults[cohortTypesEnum.AUTHORS].length > 0)\">\n                <div class=\"fluid-width contacts-container\">\n                    <div class=\"fixed-width flex flex-col flex-wrap\">\n                        <h2 _ngcontent-qml-c28=\"\" class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.authorsAndCurators' | translate}}</h2>\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 col-gap-4\">\n                            <!-- authors -->\n                            <div *ngFor=\"let author of parseJsonData(content?.creatorDetails)\"\n                                class=\"unit-cohort sm:pr-8 md:pr-10\">\n                                <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"author.name || ''\"\n                                    [email]=\"author.email\" [imageUrl]=\"author.photo || ''\"></ws-widget-user-image> -->\n                                <ws-widget-avatar-photo class=\"float-left margin-right-s \" [randomColor]=\"true\"\n                                    [datalen]=\"1\"\n                                    [size]=\"'round-m'\" [photoUrl]=\"author.photo || ''\" [name]=\"author.name\" >\n                                </ws-widget-avatar-photo>\n                                <div class=\"margin-left-xl\">\n                                    <div class=\"user-name\">{{ author.name }}</div>\n                                    <p class=\"mat-body-2  mb-0  ws-mat-black60-text\">{{'apptocsinglepage.author' | translate}}</p>\n                                </div>\n                            </div>\n                            <!-- curators -->\n                            <div *ngFor=\"let author of parseJsonData(content?.creatorContacts)\"\n                            class=\"unit-cohort user-card sm:pr-8 md:pr-10\">\n                            <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"author.name || ''\"\n                                [email]=\"author.email\" [imageUrl]=\"author.photo || ''\"></ws-widget-user-image> -->\n                            <ws-widget-avatar-photo class=\"float-left margin-right-s\" [randomColor]=\"true\"\n                            [datalen]=\"1\"\n                                [size]=\"'round-m'\" [photoUrl]=\"author.photo || ''\" [name]=\"author.name\" >\n                            </ws-widget-avatar-photo>\n                            <div class=\"\">\n                                <div class=\"user-name\">{{ author.name }}</div>\n                                <p class=\"mat-body-2 mb-0 ws-mat-black60-text\">{{'apptocsinglepage.curator' | translate}}</p>\n                            </div>\n                        </div>\n                            <!-- <div *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS]\">\n                                 <h3 *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS].hasError\" class=\"mat-error text-center\" >\n                                    Failed to fetch curators\n                                </h3>\n                                <h3 *ngIf=\"\n                                    !cohortResults[cohortTypesEnum.AUTHORS].hasError &&\n                                    !cohortResults[cohortTypesEnum.AUTHORS].contents.length\n                                    \" class=\"text-center\" >\n                                    None\n                                </h3>\n                                <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.AUTHORS].contents\"\n                                    [ngTemplateOutlet]=\"unitCohortNew1\" [ngTemplateOutletContext]=\"{ user: cohort }\">\n                                </ng-container>\n                            </div> -->\n                        </div>\n                    </div>\n                </div>\n            </section>\n            <section id=\"director\" *ngIf=\"checkForFacilitators.length\">\n                <div class=\"fluid-width contacts-container\">\n                    <div class=\"fixed-width flex flex-col flex-wrap\">\n                        <h2 _ngcontent-qml-c28=\"\" class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.programDirectorFacilitators' | translate}}</h2>\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 col-gap-4\">\n                            <!-- <ng-container *ngFor=\"let sessionDetails of selectedBatchData?.content[0]?.batchAttributes?.sessionDetails_v2\"> -->\n                                <ng-container *ngFor=\"let facilitator of checkForFacilitators\">\n                                    <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n                                        <ws-widget-avatar-photo class=\"float-left margin-right-s \" [randomColor]=\"true\"\n                                        [datalen]=\"1\"\n                                        [size]=\"'round-m'\" [photoUrl]=\"facilitator.photo || ''\" [name]=\"facilitator.name\">\n                                        </ws-widget-avatar-photo>\n                                        <div class=\"margin-left-xl\">\n                                            <div class=\"user-name\">{{ facilitator.name }}</div>\n                                            <p class=\"mat-body-2  mb-0  ws-mat-black60-text\">{{'apptocsinglepage.facilitator' | translate}}</p>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            <!-- </ng-container> -->\n                        </div>\n                    </div>\n                </div>\n            </section>\n            <section id=\"competencies\"\n                *ngIf=\"content[compentencyKey] && competencies.length\">\n                <div class=\"fluid-width contacts-container mb-10\">\n                    <div class=\"fixed-width flex flex-col flex-wrap\">\n                        <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.competencies' | translate}}</h2>\n                    </div>\n                    <div>\n                        <table class=\"compt-table width-1-1 text-left\">\n                            <tr>\n                                <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.subTheme' | translate}}</th>\n                                <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.theme' | translate}} </th>\n                                <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.area' | translate}}</th>\n                            </tr>\n                            <tr *ngFor=\"let comp of competencies\">\n                                <td class=\"padding-xs mat-body-1\">{{comp.competencySubTheme}}</td>\n                                <td class=\"padding-xs mat-body-1\">{{comp.competencyTheme}}</td>\n                                <td class=\"padding-xs mat-body-1\">{{comp.competencyArea}}</td>\n                            </tr>\n                        </table>\n                    </div>\n                </div>\n            </section>\n            <!-- <section id=\"competencies\"\n                *ngIf=\"((!content?.test_competencies_v4 && content?.competencies_v3) &&\n                    (competencies.length) || (content?.competencies && competencies.length))\">\n                <div class=\"fluid-width contacts-container mb-10\">\n                    <div class=\"fixed-width flex flex-col flex-wrap\">\n                        <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.competencies' | translate}}</h2>\n                    </div>\n                    <div>\n                        <table class=\"compt-table width-1-1 text-left\">\n                            <tr>\n                                <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.competency' | translate}}</th>\n                                <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.type' | translate}}</th>\n                            </tr>\n                            <tr *ngFor=\"let comp of competencies\">\n                                <td class=\"padding-xs mat-body-1\">{{comp.name}}</td>\n                                <td class=\"padding-xs mat-body-1\">{{comp.competencyType}}</td>\n                            </tr>\n                        </table>\n                    </div>\n                </div>\n            </section> -->\n            <section id=\"rating\" *ngIf=\"!forPreview\">\n                <div class=\"fluid-width contacts-container mb-10\">\n                    <div class=\"fixed-width flex flex-col flex-wrap\">\n                        <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.ratingsReviews' | translate}}</h2>\n                    </div>\n                    <!-- <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary> -->\n\n                    <div class=\"search\">\n                        <form [formGroup]=\"searchForm\">\n                            <div class=\"flex top_search_box\">\n                                <div class=\"flex-1 search_box_inner\">\n                                    <div class=\"flex flex-1 flex-column margin-fix search search_box_main\">\n                                        <mat-form-field appearance=\"outline\"\n                                            class=\"autocomplete-form search_form margin-right-s\" color=\"primary\">\n                                            <mat-icon matPrefix\n                                                class=\"flex items-center justify-center mr-2\">search\n                                            </mat-icon>\n                                            <!-- <mat-label>Search</mat-label> -->\n                                            <input type=\"search\" name=\"searchKey\" #searchKey class=\"ml-2\" i18-aria-label\n                                                aria-label=\"Search\" formControlName=\"searchKey\"\n                                                i18n-placeholder=\"search\" [placeholder]=\"'apptocsinglepage.search' | translate\" matInput  maxlength=\"50\"/>\n                                            <!-- (input)=\"updateQuery(searchKey.value)\" -->\n                                        </mat-form-field>\n                                    </div>\n                                </div>\n                                <div class=\"item_dropdown_box\">\n                                    <div class=\"flex flex-1 flex-wrap section-input\">\n                                        <div class=\"item\">\n                                            <mat-form-field class=\"\" appearance=\"outline\">\n                                                <mat-select #sortBySelect formControlName=\"sortByControl\"\n                                                    i18n-placeholder placeholder=\"Sort by\">\n                                                    <mat-option [value]=\"'topReviews'\" slected>{{'apptocsinglepage.topReviews' | translate}}\n                                                    </mat-option>\n                                                    <mat-option [value]=\"'latestReviews'\">{{'apptocsinglepage.latestReviews' | translate}}</mat-option>\n                                                </mat-select>\n                                            </mat-form-field>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </form>\n                    </div>\n\n                    <!-- <div class=\"rating-comments\">\n                        <ng-container *ngFor=\"let c of ratingReviews|\n                        pipeFilterV3:{ 'user_id': searchKey.value, 'review': searchKey.value } : false |\n                        slice:0:ratingViewCount; let i= index; let last = last\">\n                            <ws-widget-card-rating-comment [review]=\"c\"></ws-widget-card-rating-comment>\n\n                            <div class=\"flex items-center justify-center mb-2 mt-8 ws-mat-accent-text view-all\"\n                            *ngIf=\"ratingReviews?.length > 3 && ratingViewCount <=3 && i>=2 && last\">\n                                <a mat-button class=\"padding-top-xs padding-bottom-xs w-full \"\n                                (click)=\"showALLReviews(ratingReviews?.length)\">\n                                    <span >SEE ALL {{ratingReviews?.length}} REVIEWS</span>\n                                </a>\n                            </div>\n                            <div class=\"flex items-center justify-center mb-2 mt-8 ws-mat-accent-text view-all\"\n                            *ngIf=\"ratingReviews?.length > 3 && ratingViewCount > 3 && i>=2 && last\">\n                                <a mat-button class=\"padding-top-xs padding-bottom-xs w-full \" (click)=\"showALLReviews(3)\">\n                                    <span >SEE LESS REVIEWS</span>\n                                </a>\n                            </div>\n                        </ng-container>\n                    </div> -->\n\n                    <div class=\"rating-comments\" *ngIf=\"ratingReviews\">\n                        <div infiniteScroll\n                        [infiniteScrollDistance]=\"1\"\n                        [infiniteScrollThrottle]=\"150\"\n                        [infiniteScrollContainer]=\"'.rating-comments'\"\n                        [fromRoot]=\"true\"\n                        [scrollWindow]=\"false\"\n                        (scrolled)=\"loadMore()\">\n                            <ng-container *ngFor=\"let c of ratingReviews|\n                            pipeFilterV3:{ 'firstName': searchKey.value, 'review': searchKey.value } : false; let i= index; let last = last\">\n                                <ws-widget-card-rating-comment [review]=\"authReplies[c.userId]\" [contentid]=\"content?.identifier\"></ws-widget-card-rating-comment>\n                            </ng-container>\n                        </div>\n                        <div *ngIf=\"displayLoader\" class=\"mt-5 pr-4 flex items-center justify-center spinner-border\">\n                            <mat-spinner [diameter]=\"30\"></mat-spinner>\n                        </div>\n                        <h4 *ngIf=\"(ratingReviews | pipeFilterV3:{ 'firstName': searchKey.value, 'review': searchKey.value } : false)?.length <=0\n                        && (displayLoader  === false)\" class=\"w-full text-left ws-mat-black60-text \">\n                        {{'apptocsinglepage.noReviewsFound' | translate}}\n                         </h4>\n                    </div>\n                </div>\n            </section>\n        </ng-template>\n    </mat-tab>\n    <mat-tab label=\"{{'apptocsinglepage.content' | translate}}\" *ngIf=\"content?.children?.length\">\n        <ng-template matTabContent>\n            <section id=\"content\">\n                <div class=\"fixed-width\">\n                    <ws-app-app-toc-contents [batchId]=\"batchId\" [content]=\"content\" [forPreview]=\"forPreview\">\n                    </ws-app-app-toc-contents>\n                </div>\n            </section>\n        </ng-template>\n    </mat-tab>\n    <mat-tab label=\"{{'apptocsinglepage.sessions' | translate}}\" *ngIf=\"content?.children?.length && (content?.primaryCategory === primaryCategory.BLENDED_PROGRAM)\">\n        <ng-template matTabContent>\n            <section id=\"content\">\n                <div class=\"fixed-width\">\n                    <ws-app-app-toc-sessions [batchData]=\"selectedBatchData\"  [content]=\"content\" [forPreview]=\"forPreview\" [config]=\"tocConfig\">\n                    </ws-app-app-toc-sessions>\n                </div>\n            </section>\n        </ng-template>\n    </mat-tab>\n    <mat-tab label=\"{{'apptocsinglepage.discussion' | translate}}\" *ngIf=\"!forPreview\">\n        <ng-template matTabContent>\n            <section id=\"discussion-forum\">\n                <div class=\"fixed-width toc-discussion-container\">\n                    <!-- <ws-app-toc-discussion [content]=\"content\" class=\"discussion\"></ws-app-toc-discussion> -->\n                    <all-discussion-widget style=' width: 100%;' [config]=\"discussionConfig\"></all-discussion-widget>\n                </div>\n            </section>\n        </ng-template>\n    </mat-tab>\n</mat-tab-group>\n\n<!-- <section id=\"cohorts\">\n    <div class=\"fixed-width toc-discussion-container\">\n        <ws-app-toc-cohorts [content]=\"content\" class=\"cohorts\"></ws-app-toc-cohorts>\n    </div>\n</section> -->\n\n<ng-template #unitCohortNew1 let-user=\"user\">\n    <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n        <ws-widget-avatar-photo class=\"float-left margin-right-s\" [size]=\"'round-m'\" [photoUrl]=\"user.photo || ''\"\n            [name]=\"getUserFullName(user)\">\n        </ws-widget-avatar-photo>\n        <div class=\"margin-left-l\">\n            <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n                class=\"width-expand padding-left-xs\">\n                <div class=\"mat-body-1 cohorts-name\">\n                    {{\n                    { firstName: user.first_name, email: user.email }\n                    | pipeNameTransform\n                    }}\n                </div>\n                <p class=\"mat-body-2 ws-mat-black60-text\">{{'apptocsinglepage.curator' | translate}}</p>\n            </div>\n        </div>\n    </div>\n</ng-template>\n<ng-template #unitCohortNew let-user=\"user\">\n    <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n        <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"getUserFullName(user)\"\n        [imageSize]=\"'small'\" [email]=\"user.email\" [imageUrl]=\"user.photo || ''\"></ws-widget-user-image> -->\n        <ws-widget-avatar-photo class=\"float-left margin-right-s\" [size]=\"'round-m'\" [photoUrl]=\"user.photo || ''\"\n            [name]=\"getUserFullName(user)\">\n        </ws-widget-avatar-photo>\n        <div class=\"margin-left-l\">\n            <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n                class=\"width-expand padding-left-xs\">\n                <!-- <div class=\"mat-body-1 cohorts-name\">\n                {{\n                    { firstName: user.first_name, lastName: user.last_name, email: user.email }\n                    | pipeNameTransform\n                }}\n            </div> -->\n                <ws-widget-connection-name\n                    [hoverUser]=\"{firstName: user.first_name, id:user.uid,designation: user.designation,department:user.department}\">\n                </ws-widget-connection-name>\n                <!-- {{user | json}} -->\n                <p class=\"mat-body-2 ws-mat-black60-text\">{{user.designation}}</p>\n                <!-- <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n            </div>\n            <div class=\"width-auto user-action-container\">\n            <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email], user: user }\">\n            </ws-widget-btn-mail-user>\n            <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n                    userName:\n                    {\n                        firstName: user.first_name,\n                        lastName: user.last_name,\n                        email: user.email\n                    } | pipeNameTransform,\n                    userPhone: user.phone_No\n                }\"></ws-widget-btn-call> -->\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [".fixed-width{max-width:1200px;display:block;margin:0 auto;padding:0 15px!important}.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.toc-body{padding-bottom:30px}.toc-body .toc-links{position:sticky;top:0;width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links ::ng-deep .mat-tab-links{margin:24px 0 0}.toc-body .toc-links .mat-tab-link{color:#5f5f5f;text-align:left;padding-left:0;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#00a9f4!important;border-bottom:none!important;font-weight:400!important}.section-content{word-break:break-word}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:24px;box-shadow:none;padding:0!important;background:transparent!important}@media only screen and (max-width: 599px){.meta-section{width:100%}}.info-section{width:28%;padding:0 8px;min-width:250px;margin-left:24px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0}}.info-section .glance-container .info-container{margin-bottom:24px}.info-section .glance-container .info-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-container .info-item{display:flex;align-items:center;padding:8px 0;box-sizing:border-box}.info-section .glance-container .info-container .info-item h3{margin:0}.info-section .glance-container .info-container .info-item .item-heading{width:40%;min-width:80px;max-width:140px;text-align:left;letter-spacing:0px}.info-section .glance-container .info-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px;outline:none;cursor:pointer}.divider-transparent{border-top-color:transparent!important}.section-heading,.section-content{letter-spacing:0px;color:#222}.resumeButton{height:52px;min-width:160px;display:flex;align-items:center;justify-content:center;background:#34d6a4 0% 0% no-repeat padding-box!important;box-shadow:0 10px 30px #9993;color:#fff!important}.resumeButton ::ng-deep .mat-button-wrapper{letter-spacing:0px;color:#fff;text-transform:capitalize}.compt-table{border-spacing:0px 6px!important}.compt-table th{background:#0000000a;font-weight:700!important}.compt-table td{background:#fff}.custom-tabgroup .fixed-width{padding:0!important}.custom-tabgroup .unit-cohort{background:#e7eaeb;margin:10px 0;padding:22px 15px;border-radius:4px;align-self:center}.custom-tabgroup .unit-cohort .circle-l-xs,.custom-tabgroup .unit-cohort .circle-l-s,.custom-tabgroup .unit-cohort .circle-l,.custom-tabgroup .unit-cohort .circle-xl,.custom-tabgroup .unit-cohort .circle-m,.custom-tabgroup .unit-cohort .circle-xxl{width:56px!important;height:56px!important}::ng-deep .custom-tabgroup .mat-tab-header{border:0!important}::ng-deep .custom-tabgroup .mat-tab-body{padding:15px 0 220px!important;box-sizing:border-box;overflow-y:initial!important}@media (min-width: 767px) and (max-width: 1050px){::ng-deep .custom-tabgroup .mat-tab-body.mat-tab-body-active{overflow-x:initial!important}}::ng-deep .custom-tabgroup .mat-tab-body-wrapper{overflow:inherit!important}::ng-deep .custom-tabgroup .mat-tab-label{border-bottom:2px solid rgba(0,0,0,.1);margin-right:3%}::ng-deep .custom-tabgroup .mat-tab-label .mat-tab-label-content{text-transform:uppercase}::ng-deep .custom-tabgroup .mat-tab-label-active .mat-tab-label-content{font-weight:700!important}.rating-comments{height:auto;max-height:400px;padding:0 15px 0 0;overflow-y:auto;box-sizing:border-box}.view-all{border:1px solid #d3d3d3}.rating-progress{width:100%;max-width:298px}.bold-imp{font-weight:700!important}.mb-0{margin-bottom:0!important}.user-card{display:flex;align-items:center;justify-content:flex-start}.spinner-border{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i18.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i18.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "directive", type: i18.MatLegacyTabContent, selector: "[matTabContent]" }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$4.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ConnectionNameComponent, selector: "ws-widget-connection-name", inputs: ["hoverUser", "showBadge"] }, { kind: "component", type: CardRatingCommentComponent, selector: "ws-widget-card-rating-comment", inputs: ["review", "contentid"] }, { kind: "directive", type: i9$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: AppTocSessionsComponent, selector: "ws-app-app-toc-sessions", inputs: ["batchData", "content", "forPreview", "config"] }, { kind: "pipe", type: i2$1.PipeNameTransformPipe, name: "pipeNameTransform" }, { kind: "pipe", type: i2$1.PipeFilterV3Pipe, name: "pipeFilterV3" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocSinglePageComponent, selector: "ws-app-app-toc-single-page", inputs: { content: "content", initialrouteData: "initialrouteData", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData" }, usesOnChanges: true, ngImport: i0, template: "<mat-tab-group [selectedIndex]=\"tabSelectedIndex\" class=\"custom-tabgroup\" (selectedTabChange)=\"tabClicked($event)\">\n    <mat-tab label=\"{{'apptocsinglepage.overview' | translate}}\">\n        <ng-template matTabContent>\n            <section id=\"overview\">\n                <div class=\"fixed-width flex flex-wrap\">\n                    <div class=\"meta-section\">\n                        <!-- Description : Conditional : If not shown here, will be shown over banner -->\n                        <mat-card *ngIf=\"\n                        tocConfig?.overview?.description?.enabled &&\n                        showDescription &&\n                        showSubtitleOnBanner &&\n                        content?.description\n                        \" class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ translateLabels(tocConfig?.overview?.description?.displayName, 'apptocsinglepage') }}</h2>\n                            <mat-card-content>\n                                <div class=\"section-content mat-body-1\" [innerHTML]=\"sanitize(content?.description)\">\n                                </div>\n                            </mat-card-content>\n                        </mat-card>\n                        <!-- Content Body -->\n                        <mat-card *ngIf=\"tocConfig?.overview?.body?.enabled && content?.instructions\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ translateLabels(tocConfig?.overview?.body?.displayName, 'apptocsinglepage') }}\n                            </h2>\n                            <mat-card-content>\n                                <div class=\"section-content mat-body-1\" [innerHTML]=\"sanitize(content?.instructions)\">\n                                </div>\n                            </mat-card-content>\n                        </mat-card>\n                        <!-- Learning objective -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.learningObjective?.enabled && content?.learningObjective\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.learningObjective?.displayName }}</h2>\n                            <mat-card-content>\n                                <p class=\"section-content mat-subheading-1\" [innerHTML]=\"content?.learningObjective\"></p>\n                            </mat-card-content>\n                        </mat-card> -->\n\n                        <!-- Registration instructions -->\n                        <!-- <mat-card *ngIf=\"\n            tocConfig?.overview?.registrationInstructions?.enabled &&\n            content?.registrationInstructions?.length\n            \" class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.registrationInstructions?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"section-content mat-subheading-1 break-words\"\n                                    [innerHTML]=\"content?.registrationInstructions\"></div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.preContents?.enabled && content?.preContents?.length\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.preContents?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let preContent of content?.preContents\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + preContent.identifier\"\n                                    [queryParams]=\"{primaryCategory: preContent?.primaryCategory}\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ preContent.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.postContents?.enabled && content?.postContents?.length\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.postContents?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let postContent of content?.postContents\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + postContent.identifier + '?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ postContent.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.certificationList?.enabled && content?.certificationList?.length\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.certificationList?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let certification of content?.certificationList\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + certification.identifier + '?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ certification.name }}\n                                        </p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.studyMaterials?.enabled && content?.studyMaterials?.length\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.studyMaterials?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let studyitem of content?.studyMaterials\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + studyitem.identifier + '?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ studyitem.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"\n            tocConfig?.overview?.playgroundResources?.enabled && content?.playgroundResources?.length\n            \" class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.playgroundResources?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let playgroundResource of content?.playgroundResources\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + playgroundResource.identifier + '?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n                                            {{ playgroundResource.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.kArtifacts?.enabled && content?.kArtifacts?.length\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.kArtifacts?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let kArtifact of content?.kArtifacts\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + kArtifact.identifier + '?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">{{ kArtifact.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"\n            tocConfig?.overview?.equivalentCertifications?.enabled &&\n            content?.equivalentCertifications?.length\n            \" class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.equivalentCertifications?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let equivalentCertification of content?.equivalentCertifications\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + equivalentCertification.identifier +'?primaryCategory='+ item.primaryCategory\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n                                            {{ equivalentCertification.name }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- <mat-card *ngIf=\"\n            tocConfig?.overview?.softwareRequirements?.enabled && content?.softwareRequirements?.length\n            \" class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.softwareRequirements?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex mb-1\" *ngFor=\"let softwareRequirement of content?.softwareRequirements\">\n                                    <span class=\"mr-1\">\n                                        <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                    </span>\n                                    <a class=\"ws-mat-primary-text\" [href]=\"softwareRequirement.url\" target=\"blank\">\n                                        <p class=\"section-content margin-remove-bottom mat-subheading-1\">\n                                            {{ softwareRequirement.title }}</p>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n                        <!-- Skills -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.skills?.enabled && content?.skills?.length\"\n                            class=\"unit-meta-item mat-app-background\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.skills?.displayName }}</h2>\n                            <mat-chip-list>\n                                <mat-chip class=\"section-content\" *ngFor=\"let skill of content?.skills\">{{ skill.name }}</mat-chip>\n                            </mat-chip-list>\n                        </mat-card> -->\n                        <!-- Requirements -->\n                        <!-- <mat-card *ngIf=\"tocConfig?.overview?.preRequisites?.enabled && content?.preRequisites\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.preRequisites?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"mat-subheading-1\" [innerHTML]=\"content?.preRequisites\"></div>\n                                <div class=\"margin-top-s\" *ngIf=\"content?.softwareRequirements?.length\">\n                                    <h3 class=\"mat-h3 margin-bottom-xs\" >Software Requirements</h3>\n                                    <ng-container *ngFor=\"let requirement of content?.softwareRequirements\">\n                                        <a *ngIf=\"requirement.url\" class=\"margin-right-s\" mat-stroked-button target=\"_blank\"\n                                            [href]=\"requirement.url\">\n                                            {{ requirement.title }}\n                                        </a>\n                                        <a mat-stroked-button class=\"margin-right-s\"\n                                            *ngIf=\"!requirement?.url\">{{ requirement.title }}\n                                        </a>\n                                    </ng-container>\n                                </div>\n                            </mat-card-content>\n                        </mat-card> -->\n\n                        <!-- Training (LHub) -->\n                        <!-- <mat-card *ngIf=\"trainingLHubEnabled && trainingLHubCount$ | async as trainingLHubCount\"\n                            class=\"unit-meta-item\">\n                            <h2 class=\"section-heading\" >Trainings</h2>\n                            <h4 class=\"mat-h4\">\n                                <ng-container>{{ trainingLHubCount }}</ng-container>\n                                <ng-container i18n=\"x trainings available\" *ngIf=\"trainingLHubCount > 1\">\n                                    trainings available</ng-container>\n                                <ng-container i18n=\"1 training available\" *ngIf=\"trainingLHubCount === 1\">\n                                    training available</ng-container>\n                            </h4>\n                            <div>\n\n                            </div>\n                        </mat-card> -->\n\n                        <!-- Related Topics -->\n                        <!-- <mat-card class=\"unit-meta-item\" *ngIf=\"tocConfig?.overview?.topics?.enabled && content?.topics?.length\">\n                            <h2 class=\"section-heading\">{{ tocConfig?.overview?.topics?.displayName }}</h2>\n                            <mat-card-content>\n                                <div class=\"flex flex-between flex-wrapped\">\n                                    <a mat-stroked-button class=\"topic-button text-truncate\"\n                                        *ngFor=\"let topic of content?.topics | pipeLimitTo: (viewMoreRelatedTopics ? 24 : 6)\"\n                                        [title]=\"topic?.name\" [routerLink]=\"'/app/concept-graph/' + topic.identifier\">\n                                        {{ topic?.name }}\n                                    </a>\n                                </div>\n                                <div *ngIf=\"content?.topics?.length > 6\" class=\"text-right margin-top-xs\">\n                                    <a mat-button (click)=\"viewMoreRelatedTopics = !viewMoreRelatedTopics\">\n                                        <span *ngIf=\"!viewMoreRelatedTopics\" >View More</span>\n                                        <span *ngIf=\"viewMoreRelatedTopics\" >View Less</span>\n                                    </a>\n                                </div>\n                            </mat-card-content>\n                        </mat-card>\n                        <div class=\"margin-bottom-m\" *ngIf=\"objKeys(contentParents).length\">\n                            <mat-card>\n                                <h2 >This content is part of</h2>\n                            </mat-card>\n                            <mat-accordion>\n                                <ng-container *ngFor=\"let key of objKeys(contentParents)\">\n                                    <mat-expansion-panel>\n                                        <mat-expansion-panel-header>\n                                            {{ key }}\n                                        </mat-expansion-panel-header>\n                                        <div class=\"flex mb-1\" *ngFor=\"let content of contentParents[key]\">\n                                            <span class=\"mr-1\">\n                                                <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n                                            </span>\n                                            <a class=\"ws-mat-primary-text\" [routerLink]=\"\n                    content.status !== 'Live'\n                    ? '/author' + '/toc/' + content.identifier +'?primaryCategory='+ item.primaryCategory\n                    : '/app' + '/toc/' + content.identifier + '?primaryCategory='+ item.primaryCategory\n                \">\n                                                <p class=\"margin-remove-bottom mat-subheading-1\">{{ content.name }}</p>\n                                            </a>\n                                        </div>\n                                    </mat-expansion-panel>\n                                </ng-container>\n                            </mat-accordion>\n                        </div> -->\n                    </div>\n                </div>\n            </section>\n            <section id=\"authors\" *ngIf=\"(content?.creatorDetails && content?.creatorDetails.length > 0) || (content?.creatorContacts && content?.creatorContacts.length > 0)  ||\n                (cohortResults[cohortTypesEnum.AUTHORS] && cohortResults[cohortTypesEnum.AUTHORS].length > 0)\">\n                <div class=\"fluid-width contacts-container\">\n                    <div class=\"fixed-width flex flex-col flex-wrap\">\n                        <h2 _ngcontent-qml-c28=\"\" class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.authorsAndCurators' | translate}}</h2>\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 col-gap-4\">\n                            <!-- authors -->\n                            <div *ngFor=\"let author of parseJsonData(content?.creatorDetails)\"\n                                class=\"unit-cohort sm:pr-8 md:pr-10\">\n                                <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"author.name || ''\"\n                                    [email]=\"author.email\" [imageUrl]=\"author.photo || ''\"></ws-widget-user-image> -->\n                                <ws-widget-avatar-photo class=\"float-left margin-right-s \" [randomColor]=\"true\"\n                                    [datalen]=\"1\"\n                                    [size]=\"'round-m'\" [photoUrl]=\"author.photo || ''\" [name]=\"author.name\" >\n                                </ws-widget-avatar-photo>\n                                <div class=\"margin-left-xl\">\n                                    <div class=\"user-name\">{{ author.name }}</div>\n                                    <p class=\"mat-body-2  mb-0  ws-mat-black60-text\">{{'apptocsinglepage.author' | translate}}</p>\n                                </div>\n                            </div>\n                            <!-- curators -->\n                            <div *ngFor=\"let author of parseJsonData(content?.creatorContacts)\"\n                            class=\"unit-cohort user-card sm:pr-8 md:pr-10\">\n                            <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"author.name || ''\"\n                                [email]=\"author.email\" [imageUrl]=\"author.photo || ''\"></ws-widget-user-image> -->\n                            <ws-widget-avatar-photo class=\"float-left margin-right-s\" [randomColor]=\"true\"\n                            [datalen]=\"1\"\n                                [size]=\"'round-m'\" [photoUrl]=\"author.photo || ''\" [name]=\"author.name\" >\n                            </ws-widget-avatar-photo>\n                            <div class=\"\">\n                                <div class=\"user-name\">{{ author.name }}</div>\n                                <p class=\"mat-body-2 mb-0 ws-mat-black60-text\">{{'apptocsinglepage.curator' | translate}}</p>\n                            </div>\n                        </div>\n                            <!-- <div *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS]\">\n                                 <h3 *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS].hasError\" class=\"mat-error text-center\" >\n                                    Failed to fetch curators\n                                </h3>\n                                <h3 *ngIf=\"\n                                    !cohortResults[cohortTypesEnum.AUTHORS].hasError &&\n                                    !cohortResults[cohortTypesEnum.AUTHORS].contents.length\n                                    \" class=\"text-center\" >\n                                    None\n                                </h3>\n                                <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.AUTHORS].contents\"\n                                    [ngTemplateOutlet]=\"unitCohortNew1\" [ngTemplateOutletContext]=\"{ user: cohort }\">\n                                </ng-container>\n                            </div> -->\n                        </div>\n                    </div>\n                </div>\n            </section>\n            <section id=\"director\" *ngIf=\"checkForFacilitators.length\">\n                <div class=\"fluid-width contacts-container\">\n                    <div class=\"fixed-width flex flex-col flex-wrap\">\n                        <h2 _ngcontent-qml-c28=\"\" class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.programDirectorFacilitators' | translate}}</h2>\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 col-gap-4\">\n                            <!-- <ng-container *ngFor=\"let sessionDetails of selectedBatchData?.content[0]?.batchAttributes?.sessionDetails_v2\"> -->\n                                <ng-container *ngFor=\"let facilitator of checkForFacilitators\">\n                                    <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n                                        <ws-widget-avatar-photo class=\"float-left margin-right-s \" [randomColor]=\"true\"\n                                        [datalen]=\"1\"\n                                        [size]=\"'round-m'\" [photoUrl]=\"facilitator.photo || ''\" [name]=\"facilitator.name\">\n                                        </ws-widget-avatar-photo>\n                                        <div class=\"margin-left-xl\">\n                                            <div class=\"user-name\">{{ facilitator.name }}</div>\n                                            <p class=\"mat-body-2  mb-0  ws-mat-black60-text\">{{'apptocsinglepage.facilitator' | translate}}</p>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            <!-- </ng-container> -->\n                        </div>\n                    </div>\n                </div>\n            </section>\n            <section id=\"competencies\"\n                *ngIf=\"content[compentencyKey] && competencies.length\">\n                <div class=\"fluid-width contacts-container mb-10\">\n                    <div class=\"fixed-width flex flex-col flex-wrap\">\n                        <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.competencies' | translate}}</h2>\n                    </div>\n                    <div>\n                        <table class=\"compt-table width-1-1 text-left\">\n                            <tr>\n                                <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.subTheme' | translate}}</th>\n                                <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.theme' | translate}} </th>\n                                <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.area' | translate}}</th>\n                            </tr>\n                            <tr *ngFor=\"let comp of competencies\">\n                                <td class=\"padding-xs mat-body-1\">{{comp.competencySubTheme}}</td>\n                                <td class=\"padding-xs mat-body-1\">{{comp.competencyTheme}}</td>\n                                <td class=\"padding-xs mat-body-1\">{{comp.competencyArea}}</td>\n                            </tr>\n                        </table>\n                    </div>\n                </div>\n            </section>\n            <!-- <section id=\"competencies\"\n                *ngIf=\"((!content?.test_competencies_v4 && content?.competencies_v3) &&\n                    (competencies.length) || (content?.competencies && competencies.length))\">\n                <div class=\"fluid-width contacts-container mb-10\">\n                    <div class=\"fixed-width flex flex-col flex-wrap\">\n                        <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.competencies' | translate}}</h2>\n                    </div>\n                    <div>\n                        <table class=\"compt-table width-1-1 text-left\">\n                            <tr>\n                                <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.competency' | translate}}</th>\n                                <th class=\"padding-xs ws-mat-black60-text mat-body-1\">{{'apptocsinglepage.type' | translate}}</th>\n                            </tr>\n                            <tr *ngFor=\"let comp of competencies\">\n                                <td class=\"padding-xs mat-body-1\">{{comp.name}}</td>\n                                <td class=\"padding-xs mat-body-1\">{{comp.competencyType}}</td>\n                            </tr>\n                        </table>\n                    </div>\n                </div>\n            </section> -->\n            <section id=\"rating\" *ngIf=\"!forPreview\">\n                <div class=\"fluid-width contacts-container mb-10\">\n                    <div class=\"fixed-width flex flex-col flex-wrap\">\n                        <h2 class=\"mat-toolbar contacts-head\">{{'apptocsinglepage.ratingsReviews' | translate}}</h2>\n                    </div>\n                    <!-- <ws-widget-rating-summary [ratingSummary]=\"ratingSummaryProcessed\"></ws-widget-rating-summary> -->\n\n                    <div class=\"search\">\n                        <form [formGroup]=\"searchForm\">\n                            <div class=\"flex top_search_box\">\n                                <div class=\"flex-1 search_box_inner\">\n                                    <div class=\"flex flex-1 flex-column margin-fix search search_box_main\">\n                                        <mat-form-field appearance=\"outline\"\n                                            class=\"autocomplete-form search_form margin-right-s\" color=\"primary\">\n                                            <mat-icon matPrefix\n                                                class=\"flex items-center justify-center mr-2\">search\n                                            </mat-icon>\n                                            <!-- <mat-label>Search</mat-label> -->\n                                            <input type=\"search\" name=\"searchKey\" #searchKey class=\"ml-2\" i18-aria-label\n                                                aria-label=\"Search\" formControlName=\"searchKey\"\n                                                i18n-placeholder=\"search\" [placeholder]=\"'apptocsinglepage.search' | translate\" matInput  maxlength=\"50\"/>\n                                            <!-- (input)=\"updateQuery(searchKey.value)\" -->\n                                        </mat-form-field>\n                                    </div>\n                                </div>\n                                <div class=\"item_dropdown_box\">\n                                    <div class=\"flex flex-1 flex-wrap section-input\">\n                                        <div class=\"item\">\n                                            <mat-form-field class=\"\" appearance=\"outline\">\n                                                <mat-select #sortBySelect formControlName=\"sortByControl\"\n                                                    i18n-placeholder placeholder=\"Sort by\">\n                                                    <mat-option [value]=\"'topReviews'\" slected>{{'apptocsinglepage.topReviews' | translate}}\n                                                    </mat-option>\n                                                    <mat-option [value]=\"'latestReviews'\">{{'apptocsinglepage.latestReviews' | translate}}</mat-option>\n                                                </mat-select>\n                                            </mat-form-field>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </form>\n                    </div>\n\n                    <!-- <div class=\"rating-comments\">\n                        <ng-container *ngFor=\"let c of ratingReviews|\n                        pipeFilterV3:{ 'user_id': searchKey.value, 'review': searchKey.value } : false |\n                        slice:0:ratingViewCount; let i= index; let last = last\">\n                            <ws-widget-card-rating-comment [review]=\"c\"></ws-widget-card-rating-comment>\n\n                            <div class=\"flex items-center justify-center mb-2 mt-8 ws-mat-accent-text view-all\"\n                            *ngIf=\"ratingReviews?.length > 3 && ratingViewCount <=3 && i>=2 && last\">\n                                <a mat-button class=\"padding-top-xs padding-bottom-xs w-full \"\n                                (click)=\"showALLReviews(ratingReviews?.length)\">\n                                    <span >SEE ALL {{ratingReviews?.length}} REVIEWS</span>\n                                </a>\n                            </div>\n                            <div class=\"flex items-center justify-center mb-2 mt-8 ws-mat-accent-text view-all\"\n                            *ngIf=\"ratingReviews?.length > 3 && ratingViewCount > 3 && i>=2 && last\">\n                                <a mat-button class=\"padding-top-xs padding-bottom-xs w-full \" (click)=\"showALLReviews(3)\">\n                                    <span >SEE LESS REVIEWS</span>\n                                </a>\n                            </div>\n                        </ng-container>\n                    </div> -->\n\n                    <div class=\"rating-comments\" *ngIf=\"ratingReviews\">\n                        <div infiniteScroll\n                        [infiniteScrollDistance]=\"1\"\n                        [infiniteScrollThrottle]=\"150\"\n                        [infiniteScrollContainer]=\"'.rating-comments'\"\n                        [fromRoot]=\"true\"\n                        [scrollWindow]=\"false\"\n                        (scrolled)=\"loadMore()\">\n                            <ng-container *ngFor=\"let c of ratingReviews|\n                            pipeFilterV3:{ 'firstName': searchKey.value, 'review': searchKey.value } : false; let i= index; let last = last\">\n                                <ws-widget-card-rating-comment [review]=\"authReplies[c.userId]\" [contentid]=\"content?.identifier\"></ws-widget-card-rating-comment>\n                            </ng-container>\n                        </div>\n                        <div *ngIf=\"displayLoader\" class=\"mt-5 pr-4 flex items-center justify-center spinner-border\">\n                            <mat-spinner [diameter]=\"30\"></mat-spinner>\n                        </div>\n                        <h4 *ngIf=\"(ratingReviews | pipeFilterV3:{ 'firstName': searchKey.value, 'review': searchKey.value } : false)?.length <=0\n                        && (displayLoader  === false)\" class=\"w-full text-left ws-mat-black60-text \">\n                        {{'apptocsinglepage.noReviewsFound' | translate}}\n                         </h4>\n                    </div>\n                </div>\n            </section>\n        </ng-template>\n    </mat-tab>\n    <mat-tab label=\"{{'apptocsinglepage.content' | translate}}\" *ngIf=\"content?.children?.length\">\n        <ng-template matTabContent>\n            <section id=\"content\">\n                <div class=\"fixed-width\">\n                    <ws-app-app-toc-contents [batchId]=\"batchId\" [content]=\"content\" [forPreview]=\"forPreview\">\n                    </ws-app-app-toc-contents>\n                </div>\n            </section>\n        </ng-template>\n    </mat-tab>\n    <mat-tab label=\"{{'apptocsinglepage.sessions' | translate}}\" *ngIf=\"content?.children?.length && (content?.primaryCategory === primaryCategory.BLENDED_PROGRAM)\">\n        <ng-template matTabContent>\n            <section id=\"content\">\n                <div class=\"fixed-width\">\n                    <ws-app-app-toc-sessions [batchData]=\"selectedBatchData\"  [content]=\"content\" [forPreview]=\"forPreview\" [config]=\"tocConfig\">\n                    </ws-app-app-toc-sessions>\n                </div>\n            </section>\n        </ng-template>\n    </mat-tab>\n    <mat-tab label=\"{{'apptocsinglepage.discussion' | translate}}\" *ngIf=\"!forPreview\">\n        <ng-template matTabContent>\n            <section id=\"discussion-forum\">\n                <div class=\"fixed-width toc-discussion-container\">\n                    <!-- <ws-app-toc-discussion [content]=\"content\" class=\"discussion\"></ws-app-toc-discussion> -->\n                    <all-discussion-widget style=' width: 100%;' [config]=\"discussionConfig\"></all-discussion-widget>\n                </div>\n            </section>\n        </ng-template>\n    </mat-tab>\n</mat-tab-group>\n\n<!-- <section id=\"cohorts\">\n    <div class=\"fixed-width toc-discussion-container\">\n        <ws-app-toc-cohorts [content]=\"content\" class=\"cohorts\"></ws-app-toc-cohorts>\n    </div>\n</section> -->\n\n<ng-template #unitCohortNew1 let-user=\"user\">\n    <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n        <ws-widget-avatar-photo class=\"float-left margin-right-s\" [size]=\"'round-m'\" [photoUrl]=\"user.photo || ''\"\n            [name]=\"getUserFullName(user)\">\n        </ws-widget-avatar-photo>\n        <div class=\"margin-left-l\">\n            <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n                class=\"width-expand padding-left-xs\">\n                <div class=\"mat-body-1 cohorts-name\">\n                    {{\n                    { firstName: user.first_name, email: user.email }\n                    | pipeNameTransform\n                    }}\n                </div>\n                <p class=\"mat-body-2 ws-mat-black60-text\">{{'apptocsinglepage.curator' | translate}}</p>\n            </div>\n        </div>\n    </div>\n</ng-template>\n<ng-template #unitCohortNew let-user=\"user\">\n    <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n        <!-- <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"getUserFullName(user)\"\n        [imageSize]=\"'small'\" [email]=\"user.email\" [imageUrl]=\"user.photo || ''\"></ws-widget-user-image> -->\n        <ws-widget-avatar-photo class=\"float-left margin-right-s\" [size]=\"'round-m'\" [photoUrl]=\"user.photo || ''\"\n            [name]=\"getUserFullName(user)\">\n        </ws-widget-avatar-photo>\n        <div class=\"margin-left-l\">\n            <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n                class=\"width-expand padding-left-xs\">\n                <!-- <div class=\"mat-body-1 cohorts-name\">\n                {{\n                    { firstName: user.first_name, lastName: user.last_name, email: user.email }\n                    | pipeNameTransform\n                }}\n            </div> -->\n                <ws-widget-connection-name\n                    [hoverUser]=\"{firstName: user.first_name, id:user.uid,designation: user.designation,department:user.department}\">\n                </ws-widget-connection-name>\n                <!-- {{user | json}} -->\n                <p class=\"mat-body-2 ws-mat-black60-text\">{{user.designation}}</p>\n                <!-- <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n            </div>\n            <div class=\"width-auto user-action-container\">\n            <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email], user: user }\">\n            </ws-widget-btn-mail-user>\n            <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n                    userName:\n                    {\n                        firstName: user.first_name,\n                        lastName: user.last_name,\n                        email: user.email\n                    } | pipeNameTransform,\n                    userPhone: user.phone_No\n                }\"></ws-widget-btn-call> -->\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [".fixed-width{max-width:1200px;display:block;margin:0 auto;padding:0 15px!important}.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.toc-body{padding-bottom:30px}.toc-body .toc-links{position:sticky;top:0;width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links ::ng-deep .mat-tab-links{margin:24px 0 0}.toc-body .toc-links .mat-tab-link{color:#5f5f5f;text-align:left;padding-left:0;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#00a9f4!important;border-bottom:none!important;font-weight:400!important}.section-content{word-break:break-word}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:24px;box-shadow:none;padding:0!important;background:transparent!important}@media only screen and (max-width: 599px){.meta-section{width:100%}}.info-section{width:28%;padding:0 8px;min-width:250px;margin-left:24px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0}}.info-section .glance-container .info-container{margin-bottom:24px}.info-section .glance-container .info-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-container .info-item{display:flex;align-items:center;padding:8px 0;box-sizing:border-box}.info-section .glance-container .info-container .info-item h3{margin:0}.info-section .glance-container .info-container .info-item .item-heading{width:40%;min-width:80px;max-width:140px;text-align:left;letter-spacing:0px}.info-section .glance-container .info-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px;outline:none;cursor:pointer}.divider-transparent{border-top-color:transparent!important}.section-heading,.section-content{letter-spacing:0px;color:#222}.resumeButton{height:52px;min-width:160px;display:flex;align-items:center;justify-content:center;background:#34d6a4 0% 0% no-repeat padding-box!important;box-shadow:0 10px 30px #9993;color:#fff!important}.resumeButton ::ng-deep .mat-button-wrapper{letter-spacing:0px;color:#fff;text-transform:capitalize}.compt-table{border-spacing:0px 6px!important}.compt-table th{background:#0000000a;font-weight:700!important}.compt-table td{background:#fff}.custom-tabgroup .fixed-width{padding:0!important}.custom-tabgroup .unit-cohort{background:#e7eaeb;margin:10px 0;padding:22px 15px;border-radius:4px;align-self:center}.custom-tabgroup .unit-cohort .circle-l-xs,.custom-tabgroup .unit-cohort .circle-l-s,.custom-tabgroup .unit-cohort .circle-l,.custom-tabgroup .unit-cohort .circle-xl,.custom-tabgroup .unit-cohort .circle-m,.custom-tabgroup .unit-cohort .circle-xxl{width:56px!important;height:56px!important}::ng-deep .custom-tabgroup .mat-tab-header{border:0!important}::ng-deep .custom-tabgroup .mat-tab-body{padding:15px 0 220px!important;box-sizing:border-box;overflow-y:initial!important}@media (min-width: 767px) and (max-width: 1050px){::ng-deep .custom-tabgroup .mat-tab-body.mat-tab-body-active{overflow-x:initial!important}}::ng-deep .custom-tabgroup .mat-tab-body-wrapper{overflow:inherit!important}::ng-deep .custom-tabgroup .mat-tab-label{border-bottom:2px solid rgba(0,0,0,.1);margin-right:3%}::ng-deep .custom-tabgroup .mat-tab-label .mat-tab-label-content{text-transform:uppercase}::ng-deep .custom-tabgroup .mat-tab-label-active .mat-tab-label-content{font-weight:700!important}.rating-comments{height:auto;max-height:400px;padding:0 15px 0 0;overflow-y:auto;box-sizing:border-box}.view-all{border:1px solid #d3d3d3}.rating-progress{width:100%;max-width:298px}.bold-imp{font-weight:700!important}.mb-0{margin-bottom:0!important}.user-card{display:flex;align-items:center;justify-content:flex-start}.spinner-border{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i12$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i18.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i18.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "directive", type: i18.MatLegacyTabContent, selector: "[matTabContent]" }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ConnectionNameComponent, selector: "ws-widget-connection-name", inputs: ["hoverUser", "showBadge"] }, { kind: "component", type: CardRatingCommentComponent, selector: "ws-widget-card-rating-comment", inputs: ["review", "contentid"] }, { kind: "directive", type: i9$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: AppTocSessionsComponent, selector: "ws-app-app-toc-sessions", inputs: ["batchData", "content", "forPreview", "config"] }, { kind: "pipe", type: i2$1.PipeNameTransformPipe, name: "pipeNameTransform" }, { kind: "pipe", type: i2$1.PipeFilterV3Pipe, name: "pipeFilterV3" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocSinglePageComponent, decorators: [{
             type: Component,
@@ -24158,7 +24261,7 @@ class ConsentDialogComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConsentDialogComponent, deps: [{ token: i5$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$5.DomSanitizer }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConsentDialogComponent, deps: [{ token: i5$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$5.DomSanitizer }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConsentDialogComponent, selector: "ws-app-consent-dialog", ngImport: i0, template: `
     <div class="consent-dialog-wrapper">
       <div *ngIf="loading" class="loading-container">
@@ -24186,7 +24289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       </div>
     </div>
   `, styles: [".consent-dialog-wrapper{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;padding:0;margin:0;background:#fff}.loading-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#fff}.consent-content{width:100%;flex:1;overflow-y:auto;padding:20px;background:#fff}.consent-buttons{display:flex;gap:12px;padding:20px;background:#fff;border-top:1px solid #e0e0e0;justify-content:center;align-items:center}.btn-disagree{padding:10px 24px;border:2px solid #1B4CA1;background:#fff;color:#1b4ca1;border-radius:4px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-disagree:hover{background:#f5f5f5}.btn-agree{padding:12px 24px;border:none;background:#1b4ca1;color:#fff;border-radius:4px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-agree:hover{background:#1b4ca1}\n"] }]
-        }], ctorParameters: function () { return [{ type: i5$3.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i5$4.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i1$5.DomSanitizer }, { type: i1.HttpClient }]; } });
@@ -24656,13 +24759,13 @@ class AppTocCiosHomeComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i5.CommonMethodsService }, { token: i1$2.TranslateService }, { token: i2$1.ConfigurationsService }, { token: i2$1.EventService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.WidgetContentService }, { token: CertificateService }, { token: LoaderService }, { token: i5$3.MatDialog }, { token: i7.MatLegacySnackBar }, { token: NetCoreService }, { token: 'environment', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i5.CommonMethodsService }, { token: i1$2.TranslateService }, { token: i2$1.ConfigurationsService }, { token: i2$1.EventService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.WidgetContentService }, { token: CertificateService }, { token: LoaderService }, { token: i5$4.MatDialog }, { token: i7.MatLegacySnackBar }, { token: NetCoreService }, { token: 'environment', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCiosHomeComponent, selector: "ws-app-app-toc-cios-home", host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"extContentAvailable\">\n    <div class=\"toc-banner\">\n        <div class=\"flex flex-row gap-6 fixed-width\">\n            <div class=\"banner-details toc-content\" #bannerDetails>\n                <div class=\"flex flex-col gap-4\">\n                    <div class=\"flex items-center justify-between gap-4\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <!-- <div class=\"flex flex-row gap-2\">\n                    <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                    <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n                     <ng-container *ngIf=\"content?.courseCategory\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"extContentReadData?.topic\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n                    </ng-container>\n                    </div>\n                </div> -->\n                        </ng-container>\n\n                        <div class=\"flex items-center text-white mob-share\">\n                            <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n                        </div>\n                    </div>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- Knowledge level block -->\n                        <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n                            class=\"knowledge-level-container\">\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n                                class=\"level-badge beginner\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                                    <path\n                                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                                        fill=\"#49C951\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n                                class=\"level-badge intermediate\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                                    <path\n                                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                                        fill=\"#1B4CA1\" />\n                                    <path\n                                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n                                class=\"level-badge advanced\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <g clip-path=\"url(#clip0)\">\n                                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                                        <path\n                                            d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                                            fill=\"#FF8268\" />\n                                        <path\n                                            d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                        <path\n                                            d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip0\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                        </div>\n                    </ng-container>\n                    <div class=\"flex flex-col gap-2\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n                                handleCapitalize(extContentReadData?.name) }}</div>\n                            <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n                                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                                {{ 'cardcontentv2.by' | translate }}\n                                <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n                                    <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n                                        {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n                                    </span>\n                                    <ng-template #contentPartnerName>\n                                        {{extContentReadData?.contentPartner?.contentPartnerName }}\n                                    </ng-template>\n                                </span>\n                                <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n                                    'common.karmayogiBharat' | translate }}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n                    <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                    <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                        <mat-icon>grade</mat-icon>\n                        <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                    </div>\n                    <div class=\"separator\"></div>\n                    <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n                    </div>\n                    <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                    <div class=\"most-enrolled-chip text-xs leading-3\">\n                        <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n                        <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n                    </div>\n                    </div>\n                </div> -->\n                    </ng-container>\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n                        <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n                            extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-container *ngIf=\"!forPreview\">\n\n        <div *ngIf=\"isMobile\">\n            <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length ===  0\n            && userExtCourseEnroll?.progress <= 100\">\n                <div class=\"no-certificate-found mt-6 mb-4 mx-2\">\n                    <div>\n                        <span>Progress and certificates for {{ extContentReadData?.contentPartner?.contentPartnerName }}\n                            courses are visible only after you complete the course and pass the assessment.</span>\n                    </div>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                        <span class=\"mat-body-2  ws-mat-black-text\">\n                            {{userExtCourseEnroll?.progress}}%</span>\n                    </div>\n                    <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                [progress]=\"userExtCourseEnroll?.progress\"\n                                                [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                            </ws-widget-content-progress>\n                  </ng-container>   -->\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                        (click)=\"enRollToExtCourse(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.enroll' | translate }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n                <ng-container *ngIf=\"enrollValidationLoading\">\n                    <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                    <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                        [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.redirect' | translate }}\n                            <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                    && userExtCourseEnroll?.progress === 100\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                         <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                        <span>Certificate</span>\n                        <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                        <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                          </div>\n                    </button>\n                </ng-container>  -->\n            </div>\n            <div>\n                <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                    <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                    <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"flex flex-row gap-6 fixed-width\">\n        <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n            <mat-tab-group>\n                <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n                    <ng-template matTabContent>\n                        <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                <div class=\"flex flex-col gap-2 mt-4\">\n                                    <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n                                    [baseContentReadData]=\"extContentReadData\"\n                                    [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length >  0 && userExtCourseEnroll?.progress === 100\"\n                                    [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n                                    [skeletonLoader]=\"skeletonLoader\">\n                                </ws-widget-app-toc-about>\n                            </ng-container>\n                        </div>\n                    </ng-template>\n                </mat-tab>\n\n                <ng-container *ngIf=\"config?.commentsTab\">\n                    <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n                        <!-- <ng-template matTabContent> -->\n                        <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n                            <ng-container *ngIf=\"!commentId\">\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n                            </ng-container>\n                            <ng-container *ngIf=\"commentId\">\n                                <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n                                    <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n                                    Back to all comments\n                                </div>\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n                                    [skeletonLoader]></d-v2-widget-comment>\n                            </ng-container>\n\n                        </div>\n                        <!-- </ng-template> -->\n                    </mat-tab>\n                </ng-container>\n            </mat-tab-group>\n\n        </div>\n        <div class=\"right-container\">\n            <div class=\"right-content\" #rightContainer>\n                <ng-container *ngIf=\"skeletonLoader\">\n                    <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"!skeletonLoader\">\n                    <div class=\"flex flex-col image-div\"\n                        [ngStyle]=\"{\n            'background-image': 'url(' + extContentReadData?.appIcon + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n                        [ngClass]=\"{'image-backdrop': scrolled}\">\n                        <div class=\"flex flex-col justify-between text-container\">\n                            <div class=\"flex items-center gap-4 justify-end\">\n                                <div (click)=\"onClickOfShare()\"\n                                    class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n                                    <mat-icon>share</mat-icon>\n                                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                                <div class=\"text-xl leading-6 text-white font-bold text-scrol-custom\">{{\n                                    handleCapitalize(extContentReadData?.name) }}\n                                </div>\n                                <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                        {{ 'cardcontentv2.by' | translate }}\n                        <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n                        <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n                    </div> -->\n                            </div>\n                        </div>\n\n\n                    </div>\n\n\n                </ng-container>\n\n                <ng-container *ngIf=\"!forPreview\">\n                    <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                            <span class=\"mat-body-2  ws-mat-black-text\">\n                                {{userExtCourseEnroll?.progress}}%</span>\n                        </div>\n                        <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                    [progress]=\"userExtCourseEnroll?.progress\"\n                                                    [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                                </ws-widget-content-progress>\n                    </ng-container>   -->\n\n                        <ng-container\n                            *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                            <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                                (click)=\"enRollToExtCourse(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.enroll' | translate }}\n                                </ng-container>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"enrollValidationLoading\">\n                            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                            <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                                [href]=\"extContentReadData?.redirectUrl\"\n                                (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.redirect' | translate }}\n                                    <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                        <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length ===  0\n                        && userExtCourseEnroll?.progress <= 100 && widgetData && widgetData.sliderData?.length\">\n                            <div class=\"no-certificate-found\">\n                                <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n                            </div>\n                        </ng-container>\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                        && userExtCourseEnroll?.progress === 100\">\n                        <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                            <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                            <span>Certificate</span>\n                            <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                            <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                            </div>\n                        </button>\n                    </ng-container>  -->\n                    </div>\n                </ng-container>\n                <div>\n                    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                        <div class=\"text-xs\">\n                            {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n    (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i18.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i18.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "directive", type: i18.MatLegacyTabContent, selector: "[matTabContent]" }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: ["condition", "kparray", "content", "contentReadData", "baseContentReadData", "skeletonLoader", "sticky", "tocStructure", "pathSet", "config", "resumeData", "forPreview", "showReviews", "batchData", "fromViewer", "selectedBatchData", "selectedTabValue", "fromMarketPlace", "showMarketPlaceCertificate", "languageList", "lockCertificate"], outputs: ["trigerCompletionSurveyForm"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: i12.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ws-app-app-toc-cios-home', template: "<ng-container *ngIf=\"extContentAvailable\">\n    <div class=\"toc-banner\">\n        <div class=\"flex flex-row gap-6 fixed-width\">\n            <div class=\"banner-details toc-content\" #bannerDetails>\n                <div class=\"flex flex-col gap-4\">\n                    <div class=\"flex items-center justify-between gap-4\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <!-- <div class=\"flex flex-row gap-2\">\n                    <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                    <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n                     <ng-container *ngIf=\"content?.courseCategory\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"extContentReadData?.topic\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n                    </ng-container>\n                    </div>\n                </div> -->\n                        </ng-container>\n\n                        <div class=\"flex items-center text-white mob-share\">\n                            <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n                        </div>\n                    </div>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- Knowledge level block -->\n                        <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n                            class=\"knowledge-level-container\">\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n                                class=\"level-badge beginner\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                                    <path\n                                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                                        fill=\"#49C951\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n                                class=\"level-badge intermediate\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                                    <path\n                                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                                        fill=\"#1B4CA1\" />\n                                    <path\n                                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n                                class=\"level-badge advanced\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <g clip-path=\"url(#clip0)\">\n                                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                                        <path\n                                            d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                                            fill=\"#FF8268\" />\n                                        <path\n                                            d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                        <path\n                                            d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip0\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                        </div>\n                    </ng-container>\n                    <div class=\"flex flex-col gap-2\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n                                handleCapitalize(extContentReadData?.name) }}</div>\n                            <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n                                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                                {{ 'cardcontentv2.by' | translate }}\n                                <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n                                    <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n                                        {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n                                    </span>\n                                    <ng-template #contentPartnerName>\n                                        {{extContentReadData?.contentPartner?.contentPartnerName }}\n                                    </ng-template>\n                                </span>\n                                <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n                                    'common.karmayogiBharat' | translate }}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n                    <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                    <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                        <mat-icon>grade</mat-icon>\n                        <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                    </div>\n                    <div class=\"separator\"></div>\n                    <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n                    </div>\n                    <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                    <div class=\"most-enrolled-chip text-xs leading-3\">\n                        <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n                        <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n                    </div>\n                    </div>\n                </div> -->\n                    </ng-container>\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n                        <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n                            extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-container *ngIf=\"!forPreview\">\n\n        <div *ngIf=\"isMobile\">\n            <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length ===  0\n            && userExtCourseEnroll?.progress <= 100\">\n                <div class=\"no-certificate-found mt-6 mb-4 mx-2\">\n                    <div>\n                        <span>Progress and certificates for {{ extContentReadData?.contentPartner?.contentPartnerName }}\n                            courses are visible only after you complete the course and pass the assessment.</span>\n                    </div>\n                </div>\n            </ng-container>\n            <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                        <span class=\"mat-body-2  ws-mat-black-text\">\n                            {{userExtCourseEnroll?.progress}}%</span>\n                    </div>\n                    <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                [progress]=\"userExtCourseEnroll?.progress\"\n                                                [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                            </ws-widget-content-progress>\n                  </ng-container>   -->\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                        (click)=\"enRollToExtCourse(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.enroll' | translate }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n                <ng-container *ngIf=\"enrollValidationLoading\">\n                    <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                        [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                    <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                        [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.redirect' | translate }}\n                            <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                    && userExtCourseEnroll?.progress === 100\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                         <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                        <span>Certificate</span>\n                        <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                        <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                          </div>\n                    </button>\n                </ng-container>  -->\n            </div>\n            <div>\n                <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                    <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                    <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"flex flex-row gap-6 fixed-width\">\n        <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n            <mat-tab-group>\n                <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n                    <ng-template matTabContent>\n                        <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                <div class=\"flex flex-col gap-2 mt-4\">\n                                    <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n                                    [baseContentReadData]=\"extContentReadData\"\n                                    [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length >  0 && userExtCourseEnroll?.progress === 100\"\n                                    [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n                                    [skeletonLoader]=\"skeletonLoader\">\n                                </ws-widget-app-toc-about>\n                            </ng-container>\n                        </div>\n                    </ng-template>\n                </mat-tab>\n\n                <ng-container *ngIf=\"config?.commentsTab\">\n                    <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n                        <!-- <ng-template matTabContent> -->\n                        <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n                            <ng-container *ngIf=\"!commentId\">\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n                            </ng-container>\n                            <ng-container *ngIf=\"commentId\">\n                                <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n                                    <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n                                    Back to all comments\n                                </div>\n                                <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n                                    [skeletonLoader]></d-v2-widget-comment>\n                            </ng-container>\n\n                        </div>\n                        <!-- </ng-template> -->\n                    </mat-tab>\n                </ng-container>\n            </mat-tab-group>\n\n        </div>\n        <div class=\"right-container\">\n            <div class=\"right-content\" #rightContainer>\n                <ng-container *ngIf=\"skeletonLoader\">\n                    <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </ng-container>\n                <ng-container *ngIf=\"!skeletonLoader\">\n                    <div class=\"flex flex-col image-div\"\n                        [ngStyle]=\"{\n            'background-image': 'url(' + extContentReadData?.appIcon + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n                        [ngClass]=\"{'image-backdrop': scrolled}\">\n                        <div class=\"flex flex-col justify-between text-container\">\n                            <div class=\"flex items-center gap-4 justify-end\">\n                                <div (click)=\"onClickOfShare()\"\n                                    class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n                                    <mat-icon>share</mat-icon>\n                                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                                <div class=\"text-xl leading-6 text-white font-bold text-scrol-custom\">{{\n                                    handleCapitalize(extContentReadData?.name) }}\n                                </div>\n                                <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                        {{ 'cardcontentv2.by' | translate }}\n                        <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n                        <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n                    </div> -->\n                            </div>\n                        </div>\n\n\n                    </div>\n\n\n                </ng-container>\n\n                <ng-container *ngIf=\"!forPreview\">\n                    <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                        <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                            <span class=\"mat-body-2  ws-mat-black-text\">\n                                {{userExtCourseEnroll?.progress}}%</span>\n                        </div>\n                        <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                    [progress]=\"userExtCourseEnroll?.progress\"\n                                                    [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                                </ws-widget-content-progress>\n                    </ng-container>   -->\n\n                        <ng-container\n                            *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n                            <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n                                (click)=\"enRollToExtCourse(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.enroll' | translate }}\n                                </ng-container>\n                            </button>\n                        </ng-container>\n                        <ng-container *ngIf=\"enrollValidationLoading\">\n                            <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n                            <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                                [href]=\"extContentReadData?.redirectUrl\"\n                                (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.redirect' | translate }}\n                                    <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                        <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length ===  0\n                        && userExtCourseEnroll?.progress <= 100 && widgetData && widgetData.sliderData?.length\">\n                            <div class=\"no-certificate-found\">\n                                <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n                            </div>\n                        </ng-container>\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                        && userExtCourseEnroll?.progress === 100\">\n                        <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                            <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                            <span>Certificate</span>\n                            <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                            <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                            </div>\n                        </button>\n                    </ng-container>  -->\n                    </div>\n                </ng-container>\n                <div>\n                    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                        <div class=\"text-xs\">\n                            {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n    (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i5.CommonMethodsService }, { type: i1$2.TranslateService }, { type: i2$1.ConfigurationsService }, { type: i2$1.EventService }, { type: i2$1.MultilingualTranslationsService }, { type: i2$1.WidgetContentService }, { type: CertificateService }, { type: LoaderService }, { type: i5$3.MatDialog }, { type: i7.MatLegacySnackBar }, { type: NetCoreService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i5.CommonMethodsService }, { type: i1$2.TranslateService }, { type: i2$1.ConfigurationsService }, { type: i2$1.EventService }, { type: i2$1.MultilingualTranslationsService }, { type: i2$1.WidgetContentService }, { type: CertificateService }, { type: LoaderService }, { type: i5$4.MatDialog }, { type: i7.MatLegacySnackBar }, { type: NetCoreService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['environment']
                 }, {