@sunbird-cb/toc 0.35.5 → 0.35.7

package/fesm2022/sunbird-cb-toc.mjs

@@ -157,10 +157,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 // TODO: move this in some common place
-const PROTECTED_SLAG_V8$2 = '/apis/protected/v8';
-const API_END_POINTS$7 = {
-    AUTOCOMPLETE: (query) => `${PROTECTED_SLAG_V8$2}/user/autocomplete/${query}`,
-    AUTOCOMPLETE_BY_DEPARTMENT: (query) => `${PROTECTED_SLAG_V8$2}/user/autocomplete/department/${query}`,
+const PROTECTED_SLAG_V8$3 = '/apis/protected/v8';
+const API_END_POINTS$a = {
+    AUTOCOMPLETE: (query) => `${PROTECTED_SLAG_V8$3}/user/autocomplete/${query}`,
+    AUTOCOMPLETE_BY_DEPARTMENT: (query) => `${PROTECTED_SLAG_V8$3}/user/autocomplete/department/${query}`,
     SEARCH_USERS: '/apis/proxies/v8/user/v1/search',
 };
 class UserAutocompleteService {
@@ -169,7 +169,7 @@ class UserAutocompleteService {
         this.configSvc = configSvc;
     }
     fetchAutoComplete(query) {
-        let url = API_END_POINTS$7.AUTOCOMPLETE(query);
+        let url = API_END_POINTS$a.AUTOCOMPLETE(query);
         const stringifiedQueryParams = getStringifiedQueryParams({
             dealerCode: this.configSvc.userProfile && this.configSvc.userProfile.dealerCode ? this.configSvc.userProfile.dealerCode : undefined,
             sourceFields: this.configSvc.instanceConfig && this.configSvc.instanceConfig.sourceFieldsUserAutocomplete
@@ -180,7 +180,7 @@ class UserAutocompleteService {
         return this.http.get(url);
     }
     fetchAutoCompleteByDept(query, departments) {
-        let url = API_END_POINTS$7.AUTOCOMPLETE_BY_DEPARTMENT(query);
+        let url = API_END_POINTS$a.AUTOCOMPLETE_BY_DEPARTMENT(query);
         const stringifiedQueryParams = getStringifiedQueryParams({
             dealerCode: this.configSvc.userProfile && this.configSvc.userProfile.dealerCode ? this.configSvc.userProfile.dealerCode : undefined,
             sourceFields: this.configSvc.instanceConfig && this.configSvc.instanceConfig.sourceFieldsUserAutocomplete
@@ -200,7 +200,7 @@ class UserAutocompleteService {
                 },
             },
         };
-        return this.http.post(`${API_END_POINTS$7.SEARCH_USERS}`, reqBody);
+        return this.http.post(`${API_END_POINTS$a.SEARCH_USERS}`, reqBody);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserAutocompleteService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserAutocompleteService, providedIn: 'root' }); }
@@ -626,41 +626,41 @@ function viewerRouteGenerator(id, mimeType, collectionId, collectionType, forPre
 
 // tslint:enable
 // TODO: move this in some common place
-const PROTECTED_SLAG_V8$1 = '/apis/protected/v8';
-const API_END_POINTS$6 = {
-    CONTENT: `${PROTECTED_SLAG_V8$1}/content`,
+const PROTECTED_SLAG_V8$2 = '/apis/protected/v8';
+const API_END_POINTS$9 = {
+    CONTENT: `${PROTECTED_SLAG_V8$2}/content`,
     AUTHORING_CONTENT: `/api/course/v1/hierarchy`,
-    CONTENT_LIKES: `${PROTECTED_SLAG_V8$1}/content/likeCount`,
-    SET_S3_COOKIE: `${PROTECTED_SLAG_V8$1}/content/setCookie`,
-    SET_S3_IMAGE_COOKIE: `${PROTECTED_SLAG_V8$1}/content/setImageCookie`,
-    FETCH_MANIFEST: `${PROTECTED_SLAG_V8$1}/content/getWebModuleManifest`,
-    FETCH_WEB_MODULE_FILES: `${PROTECTED_SLAG_V8$1}/content/getWebModuleFiles`,
-    MULTIPLE_CONTENT: `${PROTECTED_SLAG_V8$1}/content/multiple`,
-    CONTENT_SEARCH_V5: `${PROTECTED_SLAG_V8$1}/content/searchV5`,
+    CONTENT_LIKES: `${PROTECTED_SLAG_V8$2}/content/likeCount`,
+    SET_S3_COOKIE: `${PROTECTED_SLAG_V8$2}/content/setCookie`,
+    SET_S3_IMAGE_COOKIE: `${PROTECTED_SLAG_V8$2}/content/setImageCookie`,
+    FETCH_MANIFEST: `${PROTECTED_SLAG_V8$2}/content/getWebModuleManifest`,
+    FETCH_WEB_MODULE_FILES: `${PROTECTED_SLAG_V8$2}/content/getWebModuleFiles`,
+    MULTIPLE_CONTENT: `${PROTECTED_SLAG_V8$2}/content/multiple`,
+    CONTENT_SEARCH_V5: `${PROTECTED_SLAG_V8$2}/content/searchV5`,
     CONTENT_SEARCH_V6: `/apis/proxies/v8/sunbirdigot/search`,
     TRENDING_CONTENT_SEARCH: `apis/proxies/v8/trending/content/search`,
     CONTENT_SEARCH_RELATED_CBP_V6: `/apis/proxies/v8/sunbirdigot/search`,
-    CONTENT_SEARCH_REGION_RECOMMENDATION: `${PROTECTED_SLAG_V8$1}/content/searchRegionRecommendation`,
-    CONTENT_HISTORY: `${PROTECTED_SLAG_V8$1}/user/history`,
+    CONTENT_SEARCH_REGION_RECOMMENDATION: `${PROTECTED_SLAG_V8$2}/content/searchRegionRecommendation`,
+    CONTENT_HISTORY: `${PROTECTED_SLAG_V8$2}/user/history`,
     CONTENT_HISTORYV2: `/apis/proxies/v8/read/content-progres`,
     COURSE_BATCH_LIST: `/apis/proxies/v8/learner/course/v1/batch/list`,
     COURSE_BATCH: `/apis/proxies/v8/course/v1/batch/read`,
     AUTO_ASSIGN_BATCH: `/apis/protected/v8/cohorts/user/autoenrollment/`,
     AUTO_ASSIGN_CURATED_BATCH: `/apis/proxies/v8/curatedprogram/v1/enrol`,
     AUTO_ASSIGN_OPEN_PROGRAM: `/apis/proxies/v8/openprogram/v1/enrol`,
-    USER_CONTINUE_LEARNING: `${PROTECTED_SLAG_V8$1}/user/history/continue`,
-    CONTENT_RATING: `${PROTECTED_SLAG_V8$1}/user/rating`,
-    COLLECTION_HIERARCHY: (type, id) => `${PROTECTED_SLAG_V8$1}/content/collection/${type}/${id}`,
-    REGISTRATION_STATUS: `${PROTECTED_SLAG_V8$1}/admin/userRegistration/checkUserRegistrationContent`,
-    MARK_AS_COMPLETE_META: (contentId) => `${PROTECTED_SLAG_V8$1}/user/progress/${contentId}`,
+    USER_CONTINUE_LEARNING: `${PROTECTED_SLAG_V8$2}/user/history/continue`,
+    CONTENT_RATING: `${PROTECTED_SLAG_V8$2}/user/rating`,
+    COLLECTION_HIERARCHY: (type, id) => `${PROTECTED_SLAG_V8$2}/content/collection/${type}/${id}`,
+    REGISTRATION_STATUS: `${PROTECTED_SLAG_V8$2}/admin/userRegistration/checkUserRegistrationContent`,
+    MARK_AS_COMPLETE_META: (contentId) => `${PROTECTED_SLAG_V8$2}/user/progress/${contentId}`,
     ENROLL_BATCH: `/apis/proxies/v8/learner/course/v1/enrol`,
     ENROLL_BATCH_WF: `/apis/proxies/v8/workflow/blendedprogram/enrol`,
     WITHDRAW_BATCH_WF: `/apis/proxies/v8/workflow/blendedprogram/unenrol`,
     BLENDED_USER_WF: `/apis/proxies/v8/workflow/blendedprogram/user/search`,
     BLENDED_USER_COUNT: `apis/proxies/v8/workflow/blendedprogram/enrol/status/count`,
-    CERT_ADD_TEMPLATE: `${PROTECTED_SLAG_V8$1}/cohorts/course/batch/cert/template/add`,
-    CERT_ISSUE: `${PROTECTED_SLAG_V8$1}/cohorts/course/batch/cert/issue`,
-    CERT_DOWNLOAD: (certId) => `${PROTECTED_SLAG_V8$1}/cohorts/course/batch/cert/download/${certId}`,
+    CERT_ADD_TEMPLATE: `${PROTECTED_SLAG_V8$2}/cohorts/course/batch/cert/template/add`,
+    CERT_ISSUE: `${PROTECTED_SLAG_V8$2}/cohorts/course/batch/cert/issue`,
+    CERT_DOWNLOAD: (certId) => `${PROTECTED_SLAG_V8$2}/cohorts/course/batch/cert/download/${certId}`,
     READ_KARMAPOINTS: `/apis/proxies/v8/karmapoints/read`,
     CONTENT_READ: (contentId) => `/apis/proxies/v8/extended/content/v1/read/${contentId}`,
     READ_COURSE_KARMAPOINTS: '/apis/proxies/v8/karmapoints/user/course/read',
@@ -696,7 +696,7 @@ class WidgetContentService {
     }
     fetchMarkAsCompleteMeta(identifier) {
         // tslint:disable-next-line
-        const url = API_END_POINTS$6.MARK_AS_COMPLETE_META(identifier);
+        const url = API_END_POINTS$9.MARK_AS_COMPLETE_META(identifier);
         // return this.http.get(url).toPromise()
         if (url) { }
         return of().toPromise();
@@ -755,66 +755,66 @@ class WidgetContentService {
             url = `/api/content/v1/read/${contentId}`;
         }
         else {
-            url = `${API_END_POINTS$6.AUTHORING_CONTENT}/${contentId}?hierarchyType=detail`;
+            url = `${API_END_POINTS$9.AUTHORING_CONTENT}/${contentId}?hierarchyType=detail`;
         }
         return this.http.get(url).pipe(shareReplay(1), r => r);
     }
     fetchMultipleContent(ids) {
-        return this.http.get(`${API_END_POINTS$6.MULTIPLE_CONTENT}/${ids.join(',')}`);
+        return this.http.get(`${API_END_POINTS$9.MULTIPLE_CONTENT}/${ids.join(',')}`);
     }
     fetchCollectionHierarchy(type, id, pageNumber = 0, pageSize = 1) {
-        return this.http.get(`${API_END_POINTS$6.COLLECTION_HIERARCHY(type, id)}?pageNumber=${pageNumber}&pageSize=${pageSize}`);
+        return this.http.get(`${API_END_POINTS$9.COLLECTION_HIERARCHY(type, id)}?pageNumber=${pageNumber}&pageSize=${pageSize}`);
     }
     fetchBlendedCourse() {
     }
     fetchCourseBatches(req) {
         return this.http
-            .post(API_END_POINTS$6.COURSE_BATCH_LIST, req)
+            .post(API_END_POINTS$9.COURSE_BATCH_LIST, req)
             .pipe(retry(1), map((data) => data.result.response));
     }
     // fetch individual batch
     fetchCourseBatch(batchId) {
-        return this.http.get(`${API_END_POINTS$6.COURSE_BATCH}/${batchId}`);
+        return this.http.get(`${API_END_POINTS$9.COURSE_BATCH}/${batchId}`);
     }
     autoAssignBatchApi(identifier, language) {
         let enrollLang = language?.langId || 'english';
-        return this.http.get(`${API_END_POINTS$6.AUTO_ASSIGN_BATCH}${identifier}?language=${enrollLang}`)
+        return this.http.get(`${API_END_POINTS$9.AUTO_ASSIGN_BATCH}${identifier}?language=${enrollLang}`)
             .pipe(retry(1), map((data) => data.result.response));
     }
     autoEnrollLP(identifier) {
-        return this.http.get(`${API_END_POINTS$6.LEARNER_PATHWAY_ENROLL(identifier)}`)
+        return this.http.get(`${API_END_POINTS$9.LEARNER_PATHWAY_ENROLL(identifier)}`)
             .pipe(retry(1), map((data) => data.result.response));
     }
     autoAssignCuratedBatchApi(request, programType) {
         const url = programType === NsContent.ECourseCategory.MODERATED_PROGRAM ?
-            API_END_POINTS$6.AUTO_ASSIGN_OPEN_PROGRAM : API_END_POINTS$6.AUTO_ASSIGN_CURATED_BATCH;
+            API_END_POINTS$9.AUTO_ASSIGN_OPEN_PROGRAM : API_END_POINTS$9.AUTO_ASSIGN_CURATED_BATCH;
         return this.http.post(`${url}`, request)
             .pipe(retry(1), map((data) => data.result.response));
     }
     enrollUserToBatch(req) {
         return this.http
-            .post(API_END_POINTS$6.ENROLL_BATCH, req)
+            .post(API_END_POINTS$9.ENROLL_BATCH, req)
             .toPromise();
     }
     enrollAndUnenrollUserToBatchWF(req, type) {
-        const url = type === 'WITHDRAW' ? API_END_POINTS$6.WITHDRAW_BATCH_WF : API_END_POINTS$6.ENROLL_BATCH_WF;
+        const url = type === 'WITHDRAW' ? API_END_POINTS$9.WITHDRAW_BATCH_WF : API_END_POINTS$9.ENROLL_BATCH_WF;
         return this.http
             .post(url, req)
             .toPromise();
     }
     fetchBlendedUserWF(req) {
         return this.http
-            .post(API_END_POINTS$6.BLENDED_USER_WF, req)
+            .post(API_END_POINTS$9.BLENDED_USER_WF, req)
             .toPromise();
     }
     fetchBlendedUserCOUNT(req) {
         return this.http
-            .post(API_END_POINTS$6.BLENDED_USER_COUNT, req)
+            .post(API_END_POINTS$9.BLENDED_USER_COUNT, req)
             .toPromise();
     }
     fetchContentLikes(contentIds) {
         return this.http
-            .post(API_END_POINTS$6.CONTENT_LIKES, contentIds)
+            .post(API_END_POINTS$9.CONTENT_LIKES, contentIds)
             .toPromise();
     }
     fetchContentRatings(contentIds) {
@@ -825,13 +825,13 @@ class WidgetContentService {
         return of().toPromise();
     }
     fetchContentHistory(contentId) {
-        return this.http.get(`${API_END_POINTS$6.CONTENT_HISTORY}/${contentId}`);
+        return this.http.get(`${API_END_POINTS$9.CONTENT_HISTORY}/${contentId}`);
     }
     fetchContentHistoryV2(req) {
         const isPreAssessment = this.activatedRoute.snapshot.queryParams.preAssessment;
         req.request.fields = ['progressdetails'];
         if (req.request.courseId && !isPreAssessment) {
-            const data = this.http.post(`${API_END_POINTS$6.CONTENT_HISTORYV2}/${req.request.courseId}`, req).pipe(map((rData) => {
+            const data = this.http.post(`${API_END_POINTS$9.CONTENT_HISTORYV2}/${req.request.courseId}`, req).pipe(map((rData) => {
                 this.languageMapProgress = rData?.result?.languageProgress || {};
                 return rData;
             }));
@@ -892,17 +892,17 @@ class WidgetContentService {
         return EMPTY;
     }
     setS3ImageCookie() {
-        return this.http.post(API_END_POINTS$6.SET_S3_IMAGE_COOKIE, {}).pipe(catchError(_err => of(true)));
+        return this.http.post(API_END_POINTS$9.SET_S3_IMAGE_COOKIE, {}).pipe(catchError(_err => of(true)));
     }
     fetchManifest(url) {
-        return this.http.post(API_END_POINTS$6.FETCH_MANIFEST, { url });
+        return this.http.post(API_END_POINTS$9.FETCH_MANIFEST, { url });
     }
     fetchWebModuleContent(url) {
-        return this.http.get(`${API_END_POINTS$6.FETCH_WEB_MODULE_FILES}?url=${encodeURIComponent(url)}`);
+        return this.http.get(`${API_END_POINTS$9.FETCH_WEB_MODULE_FILES}?url=${encodeURIComponent(url)}`);
     }
     search(req) {
         req.query = req.query || '';
-        return this.http.post(API_END_POINTS$6.CONTENT_SEARCH_V5, {
+        return this.http.post(API_END_POINTS$9.CONTENT_SEARCH_V5, {
             request: req,
         });
     }
@@ -915,7 +915,7 @@ class WidgetContentService {
             ...req.filters,
             labels: [req.preLabelValue || ''],
         };
-        return this.http.post(API_END_POINTS$6.CONTENT_SEARCH_REGION_RECOMMENDATION, { request: req });
+        return this.http.post(API_END_POINTS$9.CONTENT_SEARCH_REGION_RECOMMENDATION, { request: req });
     }
     searchV6(req) {
         const apiPath = ___default.get(req, 'api.path');
@@ -923,19 +923,19 @@ class WidgetContentService {
         if (apiPath) {
             return this.http.get(apiPath);
         }
-        return this.http.post(API_END_POINTS$6.CONTENT_SEARCH_V6, req);
+        return this.http.post(API_END_POINTS$9.CONTENT_SEARCH_V6, req);
     }
     searchRelatedCBPV6(req) {
-        return this.http.post(API_END_POINTS$6.CONTENT_SEARCH_RELATED_CBP_V6, req);
+        return this.http.post(API_END_POINTS$9.CONTENT_SEARCH_RELATED_CBP_V6, req);
     }
     fetchContentRating(contentId) {
-        return this.http.get(`${API_END_POINTS$6.CONTENT_RATING}/${contentId}`);
+        return this.http.get(`${API_END_POINTS$9.CONTENT_RATING}/${contentId}`);
     }
     deleteContentRating(contentId) {
-        return this.http.delete(`${API_END_POINTS$6.CONTENT_RATING}/${contentId}`);
+        return this.http.delete(`${API_END_POINTS$9.CONTENT_RATING}/${contentId}`);
     }
     addContentRating(contentId, data) {
-        return this.http.post(`${API_END_POINTS$6.CONTENT_RATING}/${contentId}`, data);
+        return this.http.post(`${API_END_POINTS$9.CONTENT_RATING}/${contentId}`, data);
     }
     getFirstChildInHierarchy(content) {
         if (!(content.children || []).length) {
@@ -966,32 +966,32 @@ class WidgetContentService {
         return resultContent;
     }
     getRegistrationStatus(source) {
-        return this.http.get(`${API_END_POINTS$6.REGISTRATION_STATUS}/${source}`).toPromise();
+        return this.http.get(`${API_END_POINTS$9.REGISTRATION_STATUS}/${source}`).toPromise();
     }
     fetchConfig(url) {
         return this.http.get(url);
     }
     addCertTemplate(body) {
-        return this.http.patch(`${API_END_POINTS$6.CERT_ADD_TEMPLATE}`, body);
+        return this.http.patch(`${API_END_POINTS$9.CERT_ADD_TEMPLATE}`, body);
     }
     issueCert(body) {
-        return this.http.post(`${API_END_POINTS$6.CERT_ISSUE}`, body);
+        return this.http.post(`${API_END_POINTS$9.CERT_ISSUE}`, body);
     }
     downloadCert(certId) {
-        return this.http.get(`${API_END_POINTS$6.CERT_DOWNLOAD(certId)}`);
+        return this.http.get(`${API_END_POINTS$9.CERT_DOWNLOAD(certId)}`);
     }
     trendingContentSearch(req) {
         req.query = req.query || '';
-        return this.http.post(API_END_POINTS$6.TRENDING_CONTENT_SEARCH, req);
+        return this.http.post(API_END_POINTS$9.TRENDING_CONTENT_SEARCH, req);
     }
     getKarmaPoitns(limit, offset) {
-        return this.http.post(API_END_POINTS$6.READ_KARMAPOINTS, { limit, offset }).pipe(catchError(_err => of(true)));
+        return this.http.post(API_END_POINTS$9.READ_KARMAPOINTS, { limit, offset }).pipe(catchError(_err => of(true)));
     }
     fetchProgramContent(contentId) {
         let url = '';
         const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
         if (!forPreview) {
-            return this.http.get(API_END_POINTS$6.CONTENT_READ(contentId));
+            return this.http.get(API_END_POINTS$9.CONTENT_READ(contentId));
         }
         if (window.location.href.includes('editMode=true')) {
             url = `/apis/proxies/v8/extended/content/v1/read/${contentId}`;
@@ -1003,25 +1003,25 @@ class WidgetContentService {
         // return this.http.get<NsContent.IContent[]>(API_END_POINTS.CONTENT_READ(contentId))
     }
     fetchExternalContent(contentId) {
-        return this.http.get(API_END_POINTS$6.EXT_CONTENT_READ(contentId));
+        return this.http.get(API_END_POINTS$9.EXT_CONTENT_READ(contentId));
     }
     fetchExternalPublicContent(partenerName, contentId) {
-        return this.http.get(API_END_POINTS$6.EXT_PUBLIC_CONTENT(partenerName, contentId));
+        return this.http.get(API_END_POINTS$9.EXT_PUBLIC_CONTENT(partenerName, contentId));
     }
     fetchExtUserContentEnroll(contentId) {
-        return this.http.get(API_END_POINTS$6.EXT_USER_COURSE_ENROLL(contentId));
+        return this.http.get(API_END_POINTS$9.EXT_USER_COURSE_ENROLL(contentId));
     }
     extContentEnroll(requestBody) {
-        return this.http.post(`${API_END_POINTS$6.EXT_CONTENT_EROLL}`, requestBody);
+        return this.http.post(`${API_END_POINTS$9.EXT_CONTENT_EROLL}`, requestBody);
     }
     getCourseKarmaPoints(request) {
-        return this.http.post(API_END_POINTS$6.READ_COURSE_KARMAPOINTS, request);
+        return this.http.post(API_END_POINTS$9.READ_COURSE_KARMAPOINTS, request);
     }
     claimKarmapoints(request) {
-        return this.http.post(API_END_POINTS$6.CLAIM_KARMAPOINTS, request);
+        return this.http.post(API_END_POINTS$9.CLAIM_KARMAPOINTS, request);
     }
     userKarmaPoints() {
-        return this.http.post(API_END_POINTS$6.USER_KARMA_POINTS, {});
+        return this.http.post(API_END_POINTS$9.USER_KARMA_POINTS, {});
     }
     getEnrolledData(doId) {
         const enrollmentMapData = JSON.parse(localStorage.getItem('enrollmentMapData') || '{}');
@@ -1178,7 +1178,7 @@ class WidgetContentService {
         let url = '';
         const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
         if (!forPreview) {
-            return this.http.get(API_END_POINTS$6.CONTENT_READ(contentId));
+            return this.http.get(API_END_POINTS$9.CONTENT_READ(contentId));
         }
         if (window.location.href.includes('editMode=true') && window.location.href.includes('_rc')) {
             url = `/apis/proxies/v8/extended/content/v1/read/${contentId}`;
@@ -1189,7 +1189,7 @@ class WidgetContentService {
         return this.http.get(url);
     }
     getUserEnrollmentData(userId, request) {
-        return this.http.post(API_END_POINTS$6.ENROLL_CONTENT_DATA(userId), request).pipe(map((rData) => {
+        return this.http.post(API_END_POINTS$9.ENROLL_CONTENT_DATA(userId), request).pipe(map((rData) => {
             const result = rData?.result ?? null;
             return { data: result, error: null };
         }), catchError((error) => {
@@ -1207,22 +1207,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2$1.ConfigurationsService }, { type: i1$1.ActivatedRoute }]; } });
 
 // TODO: move this in some common place
-const PROTECTED_SLAG_V8 = '/apis/protected/v8';
+const PROTECTED_SLAG_V8$1 = '/apis/protected/v8';
 const PROXY_SLAG_V8$1 = '/apis/proxies/v8';
-const API_END_POINTS$5 = {
+const API_END_POINTS$8 = {
     BATCH_CREATE: `${PROXY_SLAG_V8$1}/learner/course/v1/batch/create`,
-    CONTENT_PARENTS: `${PROTECTED_SLAG_V8}/content/parents`,
-    CONTENT_NEXT: `${PROTECTED_SLAG_V8}/content/next`,
+    CONTENT_PARENTS: `${PROTECTED_SLAG_V8$1}/content/parents`,
+    CONTENT_NEXT: `${PROTECTED_SLAG_V8$1}/content/next`,
     CONTENT_HISTORYV2: `/apis/proxies/v8/read/content-progres`,
-    CONTENT_PARENT: (contentId) => `${PROTECTED_SLAG_V8}/content/${contentId}/parent`,
+    CONTENT_PARENT: (contentId) => `${PROTECTED_SLAG_V8$1}/content/${contentId}/parent`,
     CONTENT_AUTH_PARENT: (contentId, rootOrg, org) => `/apis/authApi/action/content/parent/hierarchy/${contentId}?rootOrg=${rootOrg}&org=${org}`,
-    COHORTS: (cohortType, contentId) => `${PROTECTED_SLAG_V8}/cohorts/${cohortType}/${contentId}`,
-    EXTERNAL_CONTENT: (contentId) => `${PROTECTED_SLAG_V8}/content/external-access/${contentId}`,
-    COHORTS_GROUP_USER: (groupId) => `${PROTECTED_SLAG_V8}/cohorts/${groupId}`,
-    RELATED_RESOURCE: (contentId, contentType) => `${PROTECTED_SLAG_V8}/khub/fetchRelatedResources/${contentId}/${contentType}`,
-    POST_ASSESSMENT: (contentId) => `${PROTECTED_SLAG_V8}/user/evaluate/post-assessment/${contentId}`,
+    COHORTS: (cohortType, contentId) => `${PROTECTED_SLAG_V8$1}/cohorts/${cohortType}/${contentId}`,
+    EXTERNAL_CONTENT: (contentId) => `${PROTECTED_SLAG_V8$1}/content/external-access/${contentId}`,
+    COHORTS_GROUP_USER: (groupId) => `${PROTECTED_SLAG_V8$1}/cohorts/${groupId}`,
+    RELATED_RESOURCE: (contentId, contentType) => `${PROTECTED_SLAG_V8$1}/khub/fetchRelatedResources/${contentId}/${contentType}`,
+    POST_ASSESSMENT: (contentId) => `${PROTECTED_SLAG_V8$1}/user/evaluate/post-assessment/${contentId}`,
     GET_CONTENT: (contentId) => `${PROXY_SLAG_V8$1}/action/content/v3/read/${contentId}`,
-    CERT_DOWNLOAD: (certId) => `${PROTECTED_SLAG_V8}/cohorts/course/batch/cert/download/${certId}`,
+    CERT_DOWNLOAD: (certId) => `${PROTECTED_SLAG_V8$1}/cohorts/course/batch/cert/download/${certId}`,
     SERVER_DATE: 'apis/public/v8/systemDate',
     SHARE_CONTENT: '/apis/proxies/v8/user/v1/content/recommend',
     GET_FORM_BYID: (formId) => `apis/proxies/v8/forms/v2/getFormById?formId=${formId}`,
@@ -1659,38 +1659,38 @@ class AppTocService {
     }
     fetchContentWhatsNext(contentId, contentType) {
         if (contentType) {
-            return this.http.get(`${API_END_POINTS$5.CONTENT_NEXT}/${contentId}?contentType=${contentType}`);
+            return this.http.get(`${API_END_POINTS$8.CONTENT_NEXT}/${contentId}?contentType=${contentType}`);
         }
-        return this.http.get(`${API_END_POINTS$5.CONTENT_NEXT}/${contentId}?ts=${new Date().getTime()}`);
+        return this.http.get(`${API_END_POINTS$8.CONTENT_NEXT}/${contentId}?ts=${new Date().getTime()}`);
     }
     fetchMoreLikeThisPaid(contentId) {
-        return this.http.get(`${API_END_POINTS$5.CONTENT_NEXT}/${contentId}?exclusiveContent=true&ts=${new Date().getTime()}`);
+        return this.http.get(`${API_END_POINTS$8.CONTENT_NEXT}/${contentId}?exclusiveContent=true&ts=${new Date().getTime()}`);
     }
     fetchMoreLikeThisFree(contentId) {
-        return this.http.get(`${API_END_POINTS$5.CONTENT_NEXT}/${contentId}?exclusiveContent=false&ts=${new Date().getTime()}`);
+        return this.http.get(`${API_END_POINTS$8.CONTENT_NEXT}/${contentId}?exclusiveContent=false&ts=${new Date().getTime()}`);
     }
     fetchContentCohorts(cohortType, contentId) {
-        return this.http.get(API_END_POINTS$5.COHORTS(cohortType, contentId), {
+        return this.http.get(API_END_POINTS$8.COHORTS(cohortType, contentId), {
             headers: { rootOrg: this.configSvc.rootOrg || '', org: this.configSvc.org ? this.configSvc.org[0] : '' },
         });
     }
     fetchExternalContentAccess(contentId) {
-        return this.http.get(API_END_POINTS$5.EXTERNAL_CONTENT(contentId));
+        return this.http.get(API_END_POINTS$8.EXTERNAL_CONTENT(contentId));
     }
     fetchCohortGroupUsers(groupId) {
-        return this.http.get(API_END_POINTS$5.COHORTS_GROUP_USER(groupId));
+        return this.http.get(API_END_POINTS$8.COHORTS_GROUP_USER(groupId));
     }
     fetchMoreLikeThis(contentId, contentType) {
-        return this.http.get(API_END_POINTS$5.RELATED_RESOURCE(contentId, contentType));
+        return this.http.get(API_END_POINTS$8.RELATED_RESOURCE(contentId, contentType));
     }
     fetchPostAssessmentStatus(contentId) {
-        return this.http.get(API_END_POINTS$5.POST_ASSESSMENT(contentId));
+        return this.http.get(API_END_POINTS$8.POST_ASSESSMENT(contentId));
     }
     fetchGetContentData(contentId) {
         let url = '';
         const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
         if (!forPreview) {
-            return this.http.get(API_END_POINTS$5.GET_CONTENT(contentId));
+            return this.http.get(API_END_POINTS$8.GET_CONTENT(contentId));
         }
         if (window.location.href.includes('editMode=true') && window.location.href.includes('_rc')) {
             url = `/apis/proxies/v8/action/content/v3/read/${contentId}`;
@@ -1702,11 +1702,11 @@ class AppTocService {
     }
     fetchContentParent(contentId, data, forPreview = false) {
         return this.http.post(forPreview
-            ? API_END_POINTS$5.CONTENT_AUTH_PARENT(contentId, this.configSvc.rootOrg || '', this.configSvc.org ? this.configSvc.org[0] : '')
-            : API_END_POINTS$5.CONTENT_PARENT(contentId), data);
+            ? API_END_POINTS$8.CONTENT_AUTH_PARENT(contentId, this.configSvc.rootOrg || '', this.configSvc.org ? this.configSvc.org[0] : '')
+            : API_END_POINTS$8.CONTENT_PARENT(contentId), data);
     }
     createBatch(batchData) {
-        return this.http.post(API_END_POINTS$5.BATCH_CREATE, { request: batchData });
+        return this.http.post(API_END_POINTS$8.BATCH_CREATE, { request: batchData });
     }
     async mapCompletionPercentageProgram(content, enrolmentList, collectionId) {
         this.contentLoader.next(true);
@@ -2587,7 +2587,7 @@ class AppTocService {
     fetchContentHistoryV2(req) {
         req.request.fields = ['progressdetails'];
         if (req.request.courseId) {
-            const reslut = this.http.post(`${API_END_POINTS$5.CONTENT_HISTORYV2}/${req.request.courseId}`, req);
+            const reslut = this.http.post(`${API_END_POINTS$8.CONTENT_HISTORYV2}/${req.request.courseId}`, req);
             // data.subscribe((subscribeData: any) => {
             //       this.programChildCourseResumeData.next({ resumeData: subscribeData.result.contentList, courseId: req.request.courseId })
             //     })
@@ -2596,28 +2596,28 @@ class AppTocService {
         return of();
     }
     dowonloadCertificate(certId) {
-        return this.http.get(API_END_POINTS$5.CERT_DOWNLOAD(certId));
+        return this.http.get(API_END_POINTS$8.CERT_DOWNLOAD(certId));
     }
     getServerDate() {
-        return this.http.get(API_END_POINTS$5.SERVER_DATE);
+        return this.http.get(API_END_POINTS$8.SERVER_DATE);
     }
     getFormById(formId) {
-        return this.http.get(API_END_POINTS$5.GET_FORM_BYID(formId));
+        return this.http.get(API_END_POINTS$8.GET_FORM_BYID(formId));
     }
     submitForm(formData) {
-        return this.http.post(API_END_POINTS$5.SUBMIT_FORM, formData);
+        return this.http.post(API_END_POINTS$8.SUBMIT_FORM, formData);
     }
     getFormByIdPublic(formId) {
-        return this.http.get(API_END_POINTS$5.GET_FORM_BYID_PUBLIC(formId));
+        return this.http.get(API_END_POINTS$8.GET_FORM_BYID_PUBLIC(formId));
     }
     submitFormPublic(formData) {
-        return this.http.post(API_END_POINTS$5.SUBMIT_FORM_PUBLIC, formData);
+        return this.http.post(API_END_POINTS$8.SUBMIT_FORM_PUBLIC, formData);
     }
     getApllicationsById(formId, contextId) {
-        return this.http.get(API_END_POINTS$5.GET_APPLICATIONS_BY_ID(formId, contextId));
+        return this.http.get(API_END_POINTS$8.GET_APPLICATIONS_BY_ID(formId, contextId));
     }
     shareContent(reqBody) {
-        return this.http.post(`${API_END_POINTS$5.SHARE_CONTENT}`, reqBody);
+        return this.http.post(`${API_END_POINTS$8.SHARE_CONTENT}`, reqBody);
     }
     checkModuleWiseData(content) {
         if (content && content.children) {
@@ -2665,15 +2665,15 @@ class AppTocService {
         this.transriptionActiveLanguageDataObject.next(activeLang);
     }
     aiGetResourceVttFile(resourceID) {
-        return this.http.get(`${API_END_POINTS$5.AI_RESOURCE_VTT_FILE}?resource_id=${resourceID}`);
+        return this.http.get(`${API_END_POINTS$8.AI_RESOURCE_VTT_FILE}?resource_id=${resourceID}`);
     }
     readPreEnrollmentResourcesState(req) {
         return this.http
-            .post(`${API_END_POINTS$5.PRE_ENROLLMENT_STATE_READ}`, req);
+            .post(`${API_END_POINTS$8.PRE_ENROLLMENT_STATE_READ}`, req);
     }
     createContentV2(requestBody) {
         return this.http
-            .post(`${API_END_POINTS$5.CREATE_RESOURCE}`, requestBody)
+            .post(`${API_END_POINTS$8.CREATE_RESOURCE}`, requestBody)
             .pipe(map((data) => {
             return data.result.identifier;
         }));
@@ -2681,10 +2681,10 @@ class AppTocService {
     uploadAssignmentAnswer(contentId, batchId, assignmentId, file) {
         const formData = new FormData();
         formData.append('file', file, file.name);
-        return this.http.post(`${API_END_POINTS$5.UPLOAD_ASSIGNMENT}/${contentId}/${batchId}/${assignmentId}`, formData);
+        return this.http.post(`${API_END_POINTS$8.UPLOAD_ASSIGNMENT}/${contentId}/${batchId}/${assignmentId}`, formData);
     }
     readContentV2(id) {
-        return this.http.get(`${API_END_POINTS$5.READ_RESOURCE}read/${id}?mode=edit`).pipe(map((data) => {
+        return this.http.get(`${API_END_POINTS$8.READ_RESOURCE}read/${id}?mode=edit`).pipe(map((data) => {
             return data.result.content;
         }));
     }
@@ -2696,7 +2696,7 @@ class AppTocService {
         }
         const newFormData = new FormData();
         newFormData.append('data', file, fileName);
-        return this.http.post(`${API_END_POINTS$5.UPLOAD_FILE}upload/${contentData.contentId}`, newFormData, options);
+        return this.http.post(`${API_END_POINTS$8.UPLOAD_FILE}upload/${contentData.contentId}`, newFormData, options);
     }
     appendToFilename(filename) {
         const timeStamp = new Date().getTime();
@@ -2707,22 +2707,22 @@ class AppTocService {
         return filename.substring(0, dotIndex) + timeStamp + filename.substring(dotIndex);
     }
     updateContentWithFewFields(requestBody, identifier) {
-        return this.http.patch(`${API_END_POINTS$5.UPDATE_RESOURCE}/${identifier}`, requestBody);
+        return this.http.patch(`${API_END_POINTS$8.UPDATE_RESOURCE}/${identifier}`, requestBody);
     }
     searchAssignments(request) {
-        return this.http.post(API_END_POINTS$5.SEARCH, request);
+        return this.http.post(API_END_POINTS$8.SEARCH, request);
     }
     submitDraftAssignment(request) {
-        return this.http.put(API_END_POINTS$5.SUBMIT_DRAFT_ASSIGNMENT, request);
+        return this.http.put(API_END_POINTS$8.SUBMIT_DRAFT_ASSIGNMENT, request);
     }
     submitAssignment(request) {
-        return this.http.post(API_END_POINTS$5.SUBMIT_ASSIGNMENT, request);
+        return this.http.post(API_END_POINTS$8.SUBMIT_ASSIGNMENT, request);
     }
     notifyAssignmentSubmission(payload) {
-        return this.http.post(API_END_POINTS$5.NOTIFY_ASSIGNMENT_SUBMISSION, payload);
+        return this.http.post(API_END_POINTS$8.NOTIFY_ASSIGNMENT_SUBMISSION, payload);
     }
     getAssignmentStatus(request) {
-        return this.http.post(`${API_END_POINTS$5.ASSIGNMENT_STATUS}`, request);
+        return this.http.post(`${API_END_POINTS$8.ASSIGNMENT_STATUS}`, request);
     }
     readAssignmentFile(contentId, batchId, assignmentId, fileName) {
         // Properly encode the parameters to avoid malformed request errors
@@ -2732,7 +2732,7 @@ class AppTocService {
             formId: assignmentId || '',
             fileName: fileName || ''
         });
-        return this.http.get(`${API_END_POINTS$5.READ_ASSIGNMENT}?${encodedParams.toString()}`, {
+        return this.http.get(`${API_END_POINTS$8.READ_ASSIGNMENT}?${encodedParams.toString()}`, {
             responseType: 'blob',
             headers: {
                 'Accept': 'application/octet-stream, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document'
@@ -4508,7 +4508,7 @@ function HttpLoaderFactory(http) {
 }
 
 const PROXY_SLAG_V8 = '/apis/proxies/v8';
-const API_END_POINTS$4 = {
+const API_END_POINTS$7 = {
     GET_RATING: (contentId, contentType, userId) => `${PROXY_SLAG_V8}/ratings/v1/read/${contentId}/${contentType}/${userId}`,
     ADD_OR_UPDATE: `${PROXY_SLAG_V8}/ratings/v1/upsert`,
     GET_RATING_SUMMARY: (contentId, contentType) => `${PROXY_SLAG_V8}/ratings/v1/summary/${contentId}/${contentType}`,
@@ -4523,27 +4523,27 @@ class RatingService {
     getRating(contentId, contentType, userId) {
         const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
         if (!forPreview) {
-            return this.http.get(API_END_POINTS$4.GET_RATING(contentId, contentType, userId));
+            return this.http.get(API_END_POINTS$7.GET_RATING(contentId, contentType, userId));
         }
         return of({});
     }
     addOrUpdateRating(req) {
-        return this.http.post(API_END_POINTS$4.ADD_OR_UPDATE, req);
+        return this.http.post(API_END_POINTS$7.ADD_OR_UPDATE, req);
     }
     getRatingSummary(contentId, contentType) {
         const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
         if (!forPreview) {
-            return this.http.get(API_END_POINTS$4.GET_RATING_SUMMARY(contentId, contentType));
+            return this.http.get(API_END_POINTS$7.GET_RATING_SUMMARY(contentId, contentType));
         }
         return of({});
     }
     getRatingLookup(req) {
-        return this.http.post(API_END_POINTS$4.GET_RATING_LOOKUP, req);
+        return this.http.post(API_END_POINTS$7.GET_RATING_LOOKUP, req);
     }
     getRatingReply(req) {
         const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
         if (!forPreview) {
-            return this.http.post(API_END_POINTS$4.POST_AUTHOR_REPLY, req);
+            return this.http.post(API_END_POINTS$7.POST_AUTHOR_REPLY, req);
         }
         return of({});
     }
@@ -4580,7 +4580,7 @@ class RatingService {
         return false;
     }
     getAuthorReply(contentId, userID) {
-        return this.http.get(API_END_POINTS$4.GET_AUTHOR_REPLY(contentId, userID));
+        return this.http.get(API_END_POINTS$7.GET_AUTHOR_REPLY(contentId, userID));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RatingService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RatingService, providedIn: 'root' }); }
@@ -6227,7 +6227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // tslint:enable
 // const PROTECTED_SLAG_V8 = '/apis/protected/v8'
-const API_END_POINTS$3 = {
+const API_END_POINTS$6 = {
     // getUserdetailsV2FromRegistry: '/apis/protected/v8/user/profileRegistry/getUserRegistryByUser',
     getUserdetailsV2FromRegistry: '/apis/proxies/v8/api/user/v2/read',
 };
@@ -6236,7 +6236,7 @@ class ConnectionHoverService {
         this.http = http;
     }
     fetchProfile(userId) {
-        return this.http.get(`${API_END_POINTS$3.getUserdetailsV2FromRegistry}/${userId}`)
+        return this.http.get(`${API_END_POINTS$6.getUserdetailsV2FromRegistry}/${userId}`)
             .pipe(map((data) => {
             // tslint:disable-next-line: prefer-const
             let profile;
@@ -6374,51 +6374,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }]; } });
 
-/**
- * Discuss Utils Service
- * Handles discussion forum related utilities
- */
 class DiscussUtilsService {
-    constructor(http) {
-        this.http = http;
+    constructor() { }
+    /*Get color Hex code by passing a string*/
+    stringToColor(str) {
+        let hash = 0;
+        // tslint:disable-next-line: no-increment-decrement
+        for (let i = 0; i < str.length; i++) {
+            // tslint:disable-next-line: no-bitwise
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash % 360);
+        // tslint:disable-next-line: prefer-template
+        const colour = 'hsl(' + hue + ',100%,30%)';
+        // tslint:disable-next-line: prefer-template
+        // const colour = 'hsl(' + hue + ',100%,80%)'
+        return colour;
     }
-    /**
-     * Get discussion forum configuration
-     */
-    getDiscussionConfig() {
-        return {
-            enabled: true,
-            menuOptions: []
-        };
+    /*Get text contrast by passing background hex color*/
+    getContrast(_hexcolor) {
+        // right now going with harcoded approach
+        // const r = parseInt(hexcolor.substr(1, 2), 16)
+        // const g = parseInt(hexcolor.substr(3, 2), 16)
+        // const b = parseInt(hexcolor.substr(5, 2), 16)
+        // const color = ((r * 299) + (g * 587) + (b * 114)) / 1000
+        // return (color >= 160) ? '#000000' : '#ffffff'
+        return 'rgba(255, 255, 255, 80%)';
     }
-    /**
-     * Set discussion forum configuration
-     */
     setDiscussionConfig(config) {
-        // Stub implementation
-        console.log('DiscussUtilsService.setDiscussionConfig:', config);
-    }
-    /**
-     * Navigate to discussion forum
-     */
-    navigateToDiscussion(contentId) {
-        // Stub implementation
-        console.log('DiscussUtilsService.navigateToDiscussion:', contentId);
-    }
-    /**
-     * Get discussion count for content
-     */
-    getDiscussionCount(contentId) {
-        return of(0);
+        this.discussionCnfig = config;
     }
-    /**
-     * Set discussion configuration (alias)
-     */
-    setDiscussConfig(config) {
-        // Stub implementation
-        console.log('DiscussUtilsService.setDiscussConfig:', config);
+    getDiscussionConfig() {
+        return this.discussionCnfig;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussUtilsService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussUtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussUtilsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiscussUtilsService, decorators: [{
@@ -6426,7 +6415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+        }], ctorParameters: function () { return []; } });
 
 class BtnPageBackComponent extends WidgetBaseComponent {
     constructor(btnBackSvc, router, configSvc, discussUtilitySvc, translate, langtranslations, environment) {
@@ -6849,7 +6838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-const API_END_POINTS$2 = {
+const API_END_POINTS$5 = {
     SEARCH_V6: `/apis/proxies/v8/sunbirdigot/search`,
 };
 class SamuhikCharchaService {
@@ -6861,7 +6850,7 @@ class SamuhikCharchaService {
         return this.http.get(`${this.configSvc.sitePath}/feature/samuhik-charcha.json`).pipe();
     }
     getSearchV6Results(body) {
-        return this.http.post(API_END_POINTS$2.SEARCH_V6, body)
+        return this.http.post(API_END_POINTS$5.SEARCH_V6, body)
             .pipe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SamuhikCharchaService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -7780,7 +7769,7 @@ class AppTocAboutComponent {
     //           );
     //         }
     //       );
-    //     } else {debugger
+    //     } else {
     //     this.contentSvc.downloadCert(certId).subscribe(
     //       (response) => {
     //         if (this.content) {
@@ -8939,7 +8928,6 @@ class AppTocContentCardV2Component {
         }
     }
     downloadCertificate(certificateData) {
-        debugger;
         this.events.raiseInteractTelemetry({
             type: WsEvents.EnumInteractTypes.CLICK,
             id: 'view-certificate',
@@ -9231,7 +9219,6 @@ class AppTocContentCardV2Component {
      * View milestone achievement - calls the achievement API and shows the result
      */
     viewMilestoneAchievement(event, mileStoneData) {
-        debugger;
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -10840,7 +10827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$3.MatLegacyDialogRef }]; } });
 
 const PROXY_CREATE_V8$1 = '/apis/proxies/v8';
-const API_END_POINTS$1 = {
+const API_END_POINTS$4 = {
     CREATE_USER_API: `${PROXY_CREATE_V8$1}/discussion/user/v1/create`,
     LANGUAGES: '/api/faq/v1/assistant/available/language',
     CONFIG: '/api/faq/v1/assistant/configs/language',
@@ -10857,7 +10844,7 @@ class RootService {
         this.showNavbarDisplay$ = new BehaviorSubject(true);
     }
     createUser(request) {
-        return this.http.post(API_END_POINTS$1.CREATE_USER_API, request);
+        return this.http.post(API_END_POINTS$4.CREATE_USER_API, request);
     }
     setDiscussionConfig(config) {
         this.discussionCnfig = config;
@@ -10886,13 +10873,13 @@ class RootService {
         document.cookie = `${name}=${value}; ${expires}${cpath}`;
     }
     getChatData(tabType) {
-        return this.http.post(`${API_END_POINTS$1.CONFIG}`, tabType);
+        return this.http.post(`${API_END_POINTS$4.CONFIG}`, tabType);
     }
     getLangugages() {
-        return this.http.get(`${API_END_POINTS$1.LANGUAGES}`);
+        return this.http.get(`${API_END_POINTS$4.LANGUAGES}`);
     }
     aiGlobalSearch(requestBody, chatId, userID) {
-        return this.http.post(`${API_END_POINTS$1.AI_GLOBAL_SEARCH}?chatID=${chatId}&userID=${userID}`, requestBody).pipe(catchError(error => {
+        return this.http.post(`${API_END_POINTS$4.AI_GLOBAL_SEARCH}?chatID=${chatId}&userID=${userID}`, requestBody).pipe(catchError(error => {
             if (error.status === 502) {
                 console.error('502 Bad Gateway from aiGlobalSearch');
             }
@@ -10907,25 +10894,25 @@ class RootService {
     }
     saveAIChatPositiveContentRating(requestBody, chatId, userID) {
         console.log('chatId=', chatId, 'userID=', userID);
-        return this.http.post(`${API_END_POINTS$1.AI_CHAT_FEEDBACK}?chatID=${chatId}&userID=${userID}`, requestBody);
+        return this.http.post(`${API_END_POINTS$4.AI_CHAT_FEEDBACK}?chatID=${chatId}&userID=${userID}`, requestBody);
     }
     shareAIFeedback(requestBody, chatId, userID) {
-        return this.http.post(`${API_END_POINTS$1.AI_CHAT_FEEDBACK}?chatID=${chatId}&userID=${userID}`, requestBody);
+        return this.http.post(`${API_END_POINTS$4.AI_CHAT_FEEDBACK}?chatID=${chatId}&userID=${userID}`, requestBody);
     }
     aiGlobalSearchFromInternet(requestBody, chatId, userID) {
-        return this.http.post(`${API_END_POINTS$1.AI_GLOBAL_INTERNET_SEARCH}?chatID=${chatId}&user_id=${userID}`, requestBody);
+        return this.http.post(`${API_END_POINTS$4.AI_GLOBAL_INTERNET_SEARCH}?chatID=${chatId}&user_id=${userID}`, requestBody);
     }
     aiStartChathForSupport(requestBody, userID) {
         const headers = new HttpHeaders()
             .set('user-id', userID);
-        return this.http.post(`${API_END_POINTS$1.SUPPORT_AI_START_CHAT}`, requestBody, {
+        return this.http.post(`${API_END_POINTS$4.SUPPORT_AI_START_CHAT}`, requestBody, {
             headers
         });
     }
     aiSendChathForSupport(requestBody, userID) {
         const headers = new HttpHeaders()
             .set('user-id', userID);
-        return this.http.post(`${API_END_POINTS$1.SUPPORT_AI_SEND_CHAT}`, requestBody, {
+        return this.http.post(`${API_END_POINTS$4.SUPPORT_AI_SEND_CHAT}`, requestBody, {
             headers
         });
     }
@@ -10940,7 +10927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
 const PROXY_CREATE_V8 = '/apis/proxies/v8';
-const API_END_POINTS = {
+const API_END_POINTS$3 = {
     GET_JWT_TOCKEN: `${PROXY_CREATE_V8}/fetchUserToken`
 };
 class WebSocketService {
@@ -11043,7 +11030,7 @@ class WebSocketService {
     }
     getJWTToken() {
         // console.log('get token')
-        return this.http.get(`${API_END_POINTS.GET_JWT_TOCKEN}`);
+        return this.http.get(`${API_END_POINTS$3.GET_JWT_TOCKEN}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WebSocketService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WebSocketService, providedIn: 'root' }); }
@@ -12573,7 +12560,6 @@ class ContentTocComponent {
         }
     }
     showAiTutorConfirmPopup() {
-        debugger;
         this.raiseAIPopupStartTelemetry();
         if (this.isEnrolled) {
             this.fromAITutor = true;
@@ -14197,51 +14183,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     args: ['environment']
                 }] }]; } });
 
-/**
- * NetCore Service stub
- * Handles NetCore integration for analytics
- *
- * Note: This is a minimal stub. The consuming application should provide
- * a proper implementation if full functionality is needed.
- */
+const API_END_POINTS$2 = {
+    FORM_READ: `/apis/v1/form/read`,
+    ORG_READ: '/api/org/v1/read',
+};
 class NetCoreService {
-    constructor() { }
-    /**
-     * Track event
-     */
-    trackEvent(eventName, eventData) {
-        // Stub implementation
-        console.log('NetCoreService.trackEvent:', eventName, eventData);
+    constructor(http, configSvc) {
+        this.http = http;
+        this.configSvc = configSvc;
     }
-    /**
-     * Track page view
-     */
-    trackPageView(pageName, pageData) {
-        // Stub implementation
-        console.log('NetCoreService.trackPageView:', pageName, pageData);
+    getOrgReadData(organisationId) {
+        const request = {
+            request: {
+                organisationId,
+            },
+        };
+        return this.http.post(API_END_POINTS$2.ORG_READ, request).pipe(map((res) => {
+            return _.get(res, 'result.response');
+        }));
     }
-    /**
-     * Set user properties
-     */
-    setUserProperties(properties) {
-        // Stub implementation
-        console.log('NetCoreService.setUserProperties:', properties);
+    netCoreConfigReadData(payload) {
+        return this.formReadData(payload).pipe(map((rData) => {
+            const finalData = rData && rData.result.form.data;
+            return (finalData);
+        }), catchError((_error) => {
+            const baseUrl = this.configSvc.sitePath;
+            return this.http.get(`${baseUrl}/netcore.json`).pipe(map(data => (data)), catchError(err => of({ data: null, error: err })));
+        }));
     }
-    /**
-     * Log out user
-     */
-    logout() {
-        // Stub implementation
-        console.log('NetCoreService.logout');
+    formReadData(request) {
+        return this.http.post(API_END_POINTS$2.FORM_READ, request);
     }
-    /**
-     * Track event for content and event
-     */
-    trackEventForContentAndEvent(eventType, userId, payload) {
-        // Stub implementation
-        console.log('NetCoreService.trackEventForContentAndEvent:', eventType, userId, payload);
+    netCoreUserLoginSetup(payload) {
+        /* tslint:disable */
+        // console.log('this.configSvc.unMappedUser', payload)
+        /* tslint:enable */
+        smartech('contact', '', payload);
+    }
+    netCoreUserNameUpdate(payload) {
+        /* tslint:disable */
+        //  console.log('this.configSvc.unMappedUser', payload)
+        /* tslint:enable */
+        smartech('contact', '', payload);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NetCoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    netCoreUserProfilePhotoUpdate(payload) {
+        /* tslint:disable */
+        // console.log('this.configSvc.unMappedUser', payload)
+        /* tslint:enable */
+        smartech('contact', '', payload);
+    }
+    netCoreUserProfilepdate(payload) {
+        /* tslint:disable */
+        // console.log('this.configSvc.unMappedUser', payload)
+        /* tslint:enable */
+        smartech('contact', '', payload);
+    }
+    netCoreUserProfileUpdateEvent(payload, eventName, userIdentifier) {
+        /* tslint:disable */
+        // console.log('this.configSvc.unMappedUser', payload)
+        // console.log('eventName', eventName)
+        // console.log('userIdentifier', userIdentifier)
+        /* tslint:enable */
+        smartech('identify', userIdentifier);
+        smartech('dispatch', eventName, payload);
+    }
+    trackEvent(eventName, userIdentifier, userpayload) {
+        // Get the current time (server time)
+        let serverTime = moment();
+        serverTime = serverTime.add(5, 'hours').add(30, 'minutes');
+        // Display the server time
+        /* tslint:disable */
+        // console.log("Server Time: ", serverTime.format('YYYY-MM-DD HH:mm:ss'));
+        // console.log('eventName', eventName)
+        // console.log('userIdentifier', userIdentifier)
+        let payload = {
+            'action_time': serverTime.format('YYYY-MM-DD HH:mm:ss'),
+            'action_device': 'Desktop'
+        };
+        // console.log('payload', payload)
+        console.log('userpayload', userpayload);
+        if (userpayload && (typeof userpayload === 'object' || userpayload.length)) {
+            payload['profile_attribute_updated'] = userpayload.toString();
+        }
+        // console.log('payload', payload)
+        smartech('identify', userIdentifier);
+        smartech('dispatch', eventName, payload);
+    }
+    trackEventForContentAndEvent(eventName, userIdentifier, contentpayload) {
+        // Get the current time (server time)
+        let serverTime = moment();
+        serverTime = serverTime.add(5, 'hours').add(30, 'minutes');
+        // Display the server time
+        /* tslint:disable */
+        // console.log("Server Time: ", serverTime.format('YYYY-MM-DD HH:mm:ss'));
+        // console.log('eventName', eventName)
+        // console.log('userIdentifier', userIdentifier)
+        let payload = {
+            'action_time': serverTime.format('YYYY-MM-DD HH:mm:ss'),
+            'action_device': 'Desktop'
+        };
+        // console.log('payload', payload)
+        if (!Object.keys(contentpayload).length) {
+            contentpayload = {};
+        }
+        let mergedPayload = { ...payload, ...contentpayload };
+        // console.log('mergedPayload--', mergedPayload)
+        smartech('identify', userIdentifier);
+        smartech('dispatch', eventName, mergedPayload);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NetCoreService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NetCoreService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NetCoreService, decorators: [{
@@ -14249,7 +14299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2$1.ConfigurationsService }]; } });
 
 dayjs.extend(isSameOrBefore);
 var ErrorType$1;
@@ -17705,93 +17755,236 @@ var NsUserProfileDetails;
     })(ECategory = NsUserProfileDetails.ECategory || (NsUserProfileDetails.ECategory = {}));
 })(NsUserProfileDetails || (NsUserProfileDetails = {}));
 
-/**
- * User Profile Service stub
- * Handles user profile related operations
- */
-const ENDPOINT = {
-    UPDATE_PROFILE: '/apis/proxies/v8/user/profileDetails',
-    SEARCH_PROFILE: '/apis/proxies/v8/user/v1/search',
-    GET_GROUPS: '/api/user/v1/groups'
+// tslint:enable
+const API_ENDPOINTS$1 = {
+    updateProfileDetails: '/apis/protected/v8/user/profileDetails/updateUser',
+    getUserdetailsFromRegistry: '/apis/proxies/v8/api/user/v2/read',
+    getUserdetails: '/apis/protected/v8/user/details/detailV1',
+    getMasterNationality: '/apis/protected/v8/user/profileRegistry/getMasterNationalities',
+    getMasterCountries: '/apis/protected/v8/user/profileRegistry/getMasterCountries',
+    getMasterLanguages: '/apis/protected/v8/user/profileRegistry/getMasterLanguages',
+    getProfilePageMeta: '/apis/protected/v8/user/profileRegistry/getProfilePageMeta',
+    getAllDepartments: '/apis/protected/v8/portal/listDeptNames',
+    approveRequest: '/apis/protected/v8/workflowhandler/transition',
+    getPendingFields: '/apis/proxies/v8/workflow/v2/userWFApplicationFieldsSearch',
+    getApprovalPendingFields: '/apis/proxies/v8/workflow/v2/userWFApplicationFieldsSearch',
+    getDesignation: '/apis/proxies/v8/user/v1/positions',
+    GET_SEARCH_DESIGNATIONS: '/apis/proxies/v8/designation/search',
+    GET_SEARCH_PUBLIC_DESIGNATIONS: '/apis/public/v8/designation/search',
+    GET_SUNBIRD_IGOT_SEARCH: '/apis/proxies/v8/sunbirdigot/v4/search',
+    editProfileDetails: '/apis/proxies/v8/user/v1/extPatch',
+    updatePrimaryEmail: '/apis/proxies/v8/user/otp/v2/extPatch',
+    updateProfilePic: '/apis/proxies/v8/storage/profilePhotoUpload/profileImage',
+    GET_GROUPS: '/api/user/v1/groups',
+    getApprovalReqs: '/apis/protected/v8/workflowhandler/applicationsSearch',
+    ehrmsDataRequest: '/apis/proxies/v8/ehrms/details',
+    withDrawRequest: '/apis/protected/v8/workflowhandler/transition',
+    approvedDomains: 'apis/proxies/v8/user/v1/email/approvedDomains',
+    GET_DESIGNATION_V2: '/apis/proxies/v8/designation/search',
+    GET_ORGANIZATION_V1: '/apis/proxies/v8/org/v1/search',
+    ORG_CUSTOM_FIELDS: `apis/proxies/v8/customFields/v1/search`,
+    UPDATE_CUSTOM_FIELDS: `apis/proxies/v8/user/profile/v1/update/additionalFields`,
+    READ_CUSTOM_FIELDS_VALUES: `apis/proxies/v8/user/profile/v1/getAdditionalFields`,
+    READ_ORG_DETAILS: 'api/org/v1/read',
 };
 class UserProfileService {
-    constructor(http) {
+    constructor(http, translateService) {
         this.http = http;
+        this.translateService = translateService;
+        if (localStorage.getItem('websiteLanguage')) {
+            this.translateService.setDefaultLang('en');
+            const lang = localStorage.getItem('websiteLanguage');
+            this.translateService.use(lang);
+        }
     }
-    getUserProfile() {
-        return of({});
+    handleTranslateTo(menuName) {
+        // tslint:disable-next-line: prefer-template
+        const translationKey = 'profileInfo.' + menuName.replace(/\s/g, '');
+        return this.translateService.instant(translationKey);
+    }
+    editProfileDetails(data) {
+        return this.http.post(API_ENDPOINTS$1.editProfileDetails, data);
     }
-    updateUserProfile(data) {
-        return this.http.patch(ENDPOINT.UPDATE_PROFILE, data);
+    updatePrimaryEmailDetails(data) {
+        return this.http.post(API_ENDPOINTS$1.updatePrimaryEmail, data);
     }
-    searchProfile(data) {
-        return this.http.post(ENDPOINT.SEARCH_PROFILE, data);
+    updateProfileDetails(data) {
+        return this.http.patch(API_ENDPOINTS$1.updateProfileDetails, data);
     }
-    getWhiteListDomain() {
-        return of({ domains: [] });
+    getUserdetails(email) {
+        return this.http.post(API_ENDPOINTS$1.getUserdetails, { email });
+    }
+    getMasterLanguages() {
+        return this.http.get(API_ENDPOINTS$1.getMasterLanguages);
+    }
+    getMasterNationality() {
+        return this.http.get(API_ENDPOINTS$1.getMasterNationality);
+    }
+    getMasterCountries() {
+        return this.http.get(API_ENDPOINTS$1.getMasterCountries);
+    }
+    getProfilePageMeta() {
+        return this.http.get(API_ENDPOINTS$1.getProfilePageMeta);
+    }
+    getUserdetailsFromRegistry(wid) {
+        return this.http.get(`${API_ENDPOINTS$1.getUserdetailsFromRegistry}/${wid}`)
+            .pipe(map((res) => {
+            return res.result.response;
+        }));
+    }
+    getOrganizationData(request) {
+        return this.http.post(API_ENDPOINTS$1.GET_ORGANIZATION_V1, request);
+    }
+    readOrgData(request) {
+        return this.http.post(API_ENDPOINTS$1.READ_ORG_DETAILS, request);
+    }
+    getAllDepartments() {
+        return this.http.get(API_ENDPOINTS$1.getAllDepartments);
+    }
+    approveRequest(data) {
+        return this.http.post(API_ENDPOINTS$1.approveRequest, data);
+    }
+    listApprovalPendingFields() {
+        return this.http.post(API_ENDPOINTS$1.getPendingFields, {
+            serviceName: 'profile',
+            applicationStatus: 'SEND_FOR_APPROVAL',
+        });
+    }
+    fetchApprovalPendingFields() {
+        return this.http.post(API_ENDPOINTS$1.getApprovalPendingFields, {
+            serviceName: 'profile',
+            applicationStatus: 'SEND_FOR_APPROVAL',
+        });
+    }
+    fetchApprovedFields() {
+        return this.http.post(API_ENDPOINTS$1.getApprovalPendingFields, {
+            serviceName: 'profile',
+            applicationStatus: 'APPROVED',
+        });
+    }
+    listRejectedFields() {
+        return this.http.post(API_ENDPOINTS$1.getPendingFields, {
+            serviceName: 'profile',
+            applicationStatus: 'REJECTED',
+        });
+    }
+    getDesignations(_req) {
+        return this.http.get(API_ENDPOINTS$1.getDesignation);
+    }
+    searchDesignation(_req) {
+        return this.http.post(API_ENDPOINTS$1.GET_SEARCH_DESIGNATIONS, _req);
+    }
+    searchPublicDesignation(_req) {
+        return this.http.post(API_ENDPOINTS$1.GET_SEARCH_PUBLIC_DESIGNATIONS, _req);
+    }
+    searchIgotDesignation(_req) {
+        return this.http.post(API_ENDPOINTS$1.GET_SUNBIRD_IGOT_SEARCH, _req);
+    }
+    getDesignationV2(_req) {
+        return this.http.post(API_ENDPOINTS$1.GET_DESIGNATION_V2, _req);
+    }
+    uploadProfilePhoto(req) {
+        return this.http.post(`${API_ENDPOINTS$1.updateProfilePic}`, req);
     }
     getGroups() {
-        return this.http.get(ENDPOINT.GET_GROUPS);
+        return this.http.get(API_ENDPOINTS$1.GET_GROUPS);
     }
-    handleTranslateTo(key) {
-        return key;
+    getApprovalReqs(data) {
+        return this.http.post(API_ENDPOINTS$1.getApprovalReqs, data);
     }
-    searchIgotDesignation(query) {
-        return of({ designations: [] });
+    withDrawRequest(userId, wfId) {
+        const payload = {
+            'action': 'WITHDRAW',
+            'state': 'SEND_FOR_APPROVAL',
+            'userId': userId,
+            'applicationId': userId,
+            'actorUserId': userId,
+            'wfId': wfId,
+            'serviceName': 'profile',
+            'updateFieldValues': [],
+            'comment': '',
+        };
+        return this.http.post(API_ENDPOINTS$1.withDrawRequest, payload);
     }
-    searchDesignation(query) {
-        return of({ designations: [] });
+    fetchEhrmsDetails() {
+        return this.http
+            .get(API_ENDPOINTS$1.ehrmsDataRequest)
+            .pipe(map((result) => result));
     }
-    getMasterLanguages() {
-        return of({ languages: [] });
+    getWhiteListDomain() {
+        return this.http.get(API_ENDPOINTS$1.approvedDomains);
     }
-    editProfileDetails(data) {
-        return of({ success: true });
+    fetchCustomFields(requestBody) {
+        return this.http.post(API_ENDPOINTS$1.ORG_CUSTOM_FIELDS, requestBody);
     }
-    updatePrimaryEmailDetails(data) {
-        return of({ success: true });
+    updateCustomFields(requestBody) {
+        return this.http.post(API_ENDPOINTS$1.UPDATE_CUSTOM_FIELDS, requestBody);
+    }
+    readCustomattributeDetails(userId, orgId) {
+        return this.http.get(`${API_ENDPOINTS$1.READ_CUSTOM_FIELDS_VALUES}/${userId}/${orgId}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserProfileService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserProfileService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserProfileService, deps: [{ token: i1.HttpClient }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserProfileService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserProfileService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i1$2.TranslateService }]; } });
 
-/**
- * Profile V2 Service - Stub implementation
- * Provides profile management functionality
- */
-const ENDPOINTS = {
-    CADRE_CONFIG: '/apis/proxies/v8/data/v2/system/settings/get/cadreConfig'
+const PROTECTED_SLAG_V8 = '/apis/protected/v8';
+const API_END_POINTS$1 = {
+    DISCUSS_PROFILE: '/apis/protected/v8/discussionHub/users',
+    PROFILE_DETAIL: `${PROTECTED_SLAG_V8}/social/post/timeline`,
+    SOCIAL_VIEW_CONVERSATION: `${PROTECTED_SLAG_V8}/social/post/viewConversation`,
+    // getUserdetailsV2FromRegistry: '/apis/protected/v8/user/profileRegistry/getUserRegistryByUser',
+    getUserdetailsV2FromRegistry: '/apis/proxies/v8/api/user/v2/read',
+    getCadreDetails: '/apis/proxies/v8/data/v2/system/settings/get/cadreConfig',
+    approvalDetails: '/apis/proxies/v8/workflow/v2/userWFApplicationFieldsSearch',
+    withDrawRequest: '/apis/protected/v8/workflowhandler/transition',
+    getFormV2ByID: (id) => `/apis/proxies/v8/forms/v2/getFormById?formId=${id}`,
 };
 class ProfileV2Service {
     constructor(http) {
         this.http = http;
     }
-    getProfile(userId) {
-        return of(null);
+    fetchDiscussProfile(wid) {
+        return this.http.get(`${API_END_POINTS$1.DISCUSS_PROFILE}/${wid}`);
     }
-    updateProfile(profileData) {
-        return of({ success: true });
-    }
-    getProfileDetails(userId) {
-        return of(null);
+    fetchProfile(userId) {
+        return this.http.get(`${API_END_POINTS$1.getUserdetailsV2FromRegistry}/${userId}`)
+            .pipe(map(res => {
+            // const roles = _.map(_.get(res, 'result.response.roles'), 'role')
+            // _.set(res, 'result.response.roles', roles)
+            return res;
+        }));
     }
-    getFormV2ByID(formId) {
-        return of({ fields: [] });
+    fetchPost(request) {
+        return this.http.post(API_END_POINTS$1.SOCIAL_VIEW_CONVERSATION, request);
     }
     fetchCadre() {
-        return this.http.get(ENDPOINTS.CADRE_CONFIG);
+        return this.http.get(`${API_END_POINTS$1.getCadreDetails}`);
     }
-    fetchApprovalDetails(userId) {
-        return of({ approvals: [] });
+    fetchApprovalDetails() {
+        return this.http.post(API_END_POINTS$1.approvalDetails, {
+            serviceName: 'profile',
+            applicationStatus: 'SEND_FOR_APPROVAL',
+        });
     }
     withDrawApprovalRequest(userId, wfId) {
-        return of({ success: true });
+        const payload = {
+            'action': 'WITHDRAW',
+            'state': 'SEND_FOR_APPROVAL',
+            'userId': userId,
+            'applicationId': userId,
+            'actorUserId': userId,
+            'wfId': wfId,
+            'serviceName': 'profile',
+            'updateFieldValues': [],
+            'comment': '',
+        };
+        return this.http.post(API_END_POINTS$1.withDrawRequest, payload);
+    }
+    getFormV2ByID(formid) {
+        return this.http.get(API_END_POINTS$1.getFormV2ByID(formid));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProfileV2Service, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProfileV2Service, providedIn: 'root' }); }
@@ -17803,72 +17996,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
-/**
- * OTP Service - Stub implementation
- * Provides OTP generation and verification functionality
- */
+const API_ENDPOINTS = {
+    sendOtp: '/apis/proxies/v8/otp/v1/generate',
+    ReSendOtp: '/apis/proxies/v8/otp/v1/generate',
+    VerifyOtp: '/apis/proxies/v8/otp/v1/verify',
+    sendEmailOtp: '/apis/proxies/v8/otp/v3/generate',
+    VerifyEmailOtp: '/apis/proxies/v8/otp/v3/verify',
+};
 class OtpService {
     constructor(http) {
         this.http = http;
     }
-    generateOtp(mobileNumber) {
-        return of({ success: true });
-    }
-    verifyOtp(mobileNumber, otp) {
-        return of({ verified: true });
+    sendOtp(mob) {
+        const reqObj = {
+            request: {
+                type: 'phone',
+                key: `${mob}`,
+            },
+        };
+        return this.http.post(API_ENDPOINTS.sendOtp, reqObj);
     }
-    resendOtp(mobileNumber) {
-        return of({ success: true });
+    resendOtp(mob) {
+        const reqObj = {
+            request: {
+                type: 'phone',
+                key: `${mob}`,
+            },
+        };
+        return this.http.post(API_ENDPOINTS.ReSendOtp, reqObj);
     }
-    sendOtp(mobileNumber) {
-        return of({ success: true });
+    verifyOTP(otp, mob) {
+        const reqObj = {
+            request: {
+                otp,
+                type: 'phone',
+                key: `${mob}`,
+            },
+        };
+        return this.http.post(API_ENDPOINTS.VerifyOtp, reqObj);
     }
     sendEmailOtp(email) {
-        return of({ success: true });
+        const reqObj = {
+            request: {
+                type: 'email',
+                key: `${email}`,
+                contextType: 'extPatch',
+                context: ['profileDetails.personalDetails.primaryEmail'],
+            },
+        };
+        return this.http.post(API_ENDPOINTS.sendEmailOtp, reqObj);
     }
-    verifyEmailOTP(email, otp) {
-        return of({ verified: true });
+    reSendEmailOtp(email) {
+        const reqObj = {
+            request: {
+                type: 'email',
+                key: `${email}`,
+                contextType: 'extPatch',
+                context: ['profileDetails.personalDetails.primaryEmail'],
+            },
+        };
+        return this.http.post(API_ENDPOINTS.sendEmailOtp, reqObj);
     }
-    verifyOTP(mobileNumber, otp) {
-        return of({ verified: true });
+    verifyEmailOTP(otp, email) {
+        const reqObj = {
+            request: {
+                otp: otp.toString(),
+                type: 'email',
+                key: `${email}`,
+            },
+        };
+        return this.http.post(API_ENDPOINTS.VerifyEmailOtp, reqObj);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OtpService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OtpService, providedIn: 'root' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OtpService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OtpService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
-/**
- * NPS Grid Service - Stub implementation
- * Provides NPS grid/survey functionality
- */
+// tslint:enable
+const API_END_POINTS = {
+    readFeed: (id) => `/apis/proxies/v8/user/v1/feed/${id}`,
+    getFormID: (id) => `/apis/proxies/v8/forms/getFormById?id=${id}`,
+    submitForm: `/apis/proxies/v8/forms/v1/saveFormSubmit`,
+    SUBMIT_ENROLMENT_FORM: `apis/proxies/v8/forms/v2/saveFormSubmit`,
+    deleteFeed: `/apis/proxies/v8/user/feed/v1/delete`,
+};
 class NPSGridService {
-    constructor() { }
-    getGridData() {
-        return of([]);
+    constructor(http) {
+        this.http = http;
+        this.telemetryEvents = new BehaviorSubject(false);
+        this.updateTelemetryDataObservable = this.telemetryEvents.asObservable();
     }
-    submitGridResponse(data) {
-        return of({ success: true });
+    updateTelemetryData(state) {
+        this.telemetryEvents.next(state);
     }
-    getGridConfig() {
-        return of({});
+    getFeedStatus(id) {
+        return this.http.get(API_END_POINTS.readFeed(id));
     }
-    submitBpFormWithProfileDetails(formData, profileData) {
-        return of({ success: true });
+    getFormData(formid) {
+        return this.http.get(API_END_POINTS.getFormID(formid));
+    }
+    submitPlatformRating(req) {
+        return this.http.post(API_END_POINTS.submitForm, req);
+    }
+    deleteFeed(req) {
+        return this.http.post(API_END_POINTS.deleteFeed, req);
+    }
+    submitBpFormWithProfileDetails(req) {
+        return this.http.post(API_END_POINTS.SUBMIT_ENROLMENT_FORM, req);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NPSGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NPSGridService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NPSGridService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NPSGridService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NPSGridService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
 const MOBILE_PATTERN = /^[0]?[6789]\d{9}$/;
 const PIN_CODE_PATTERN = /^[1-9][0-9]{5}$/;
@@ -17943,6 +18186,8 @@ class EnrollProfileFormComponent {
         this.showDoptChanges = false;
         this.verifyEmail = false;
         this.approvedDomainList = [];
+        this.verifiedEmailOtp = '';
+        this.verifiedPhoneOtp = '';
         this.currentDate = new Date();
         this.openDesignationDropdown = false;
         this.openLanguageDropdown = false;
@@ -18259,6 +18504,7 @@ class EnrollProfileFormComponent {
             this.eVerified = true;
             this.emailOtpSent = false;
             this.contextToken = _res.result.contextToken;
+            this.verifiedEmailOtp = this.emailOtpForm.controls['eOtp'].value;
             this.emailOtpForm.reset();
         }, (error) => {
             if (!error.ok) {
@@ -18274,6 +18520,7 @@ class EnrollProfileFormComponent {
             this.verifyMobile = true;
             this.mVerified = true;
             this.otpSent = false;
+            this.verifiedPhoneOtp = this.otpForm.controls['otp'].value;
             this.otpForm.reset();
         }, (error) => {
             if (!error.ok) {
@@ -19165,6 +19412,12 @@ class EnrollProfileFormComponent {
         }
     }
     submitProfile(payload) {
+        if (this.eVerified && this.verifiedEmailOtp) {
+            payload['request']['emailOtp'] = this.verifiedEmailOtp;
+        }
+        if (this.mVerified && this.verifiedPhoneOtp) {
+            payload['request']['phoneOtp'] = this.verifiedPhoneOtp;
+        }
         if (payload && payload['request'] && payload['request']['profileDetails'] && payload['request']['profileDetails']['personalDetails'] && payload['request']['profileDetails']['personalDetails']['dob']) {
             let dobFormat = payload['request']['profileDetails']['personalDetails']['dob'];
             let dob = `${new Date(dobFormat).getDate()}-${new Date(dobFormat).getMonth() + 1}-${new Date(dobFormat).getFullYear()}`;
@@ -19173,6 +19426,7 @@ class EnrollProfileFormComponent {
         if (this.updateProfile) {
             this.addLoader = this.addLoader + 1;
             this.userProfileService.editProfileDetails(payload).subscribe((res) => {
+                debugger;
                 this.addLoader = this.addLoader - 1;
                 if (res.responseCode === 'OK') {
                     this.submitSurevy(true);
@@ -19181,7 +19435,7 @@ class EnrollProfileFormComponent {
                 this.addLoader = this.addLoader - 1;
                 /* tslint:disable */
                 console.log(error);
-                this.snackBar.open("something went wrong!");
+                this.snackBar.open(error?.error?.params?.errmsg || "Something went wrong!");
             });
         }
     }
@@ -24066,12 +24320,11 @@ class AppTocHomeV2Component {
         }
         const badge = badgeDetails[0];
         // If badgeEarningDateEnabled is false, don't show badge
-        if (!badge.badgeEarningDateEnabled) {
-            return false;
+        if (!badge?.badgeEarningDateEnabled) {
+            return true;
         }
         // If badgeEarningDateEnabled is true, show badge only if badgeEarningDateTime has passed
-        if (badge.badgeEarningDateEnabled && badge.badgeEarningDateTime) {
-            console.log(badge.badgeEarningDateTime, Date.now());
+        if (badge?.badgeEarningDateEnabled && badge?.badgeEarningDateTime) {
             return badge.badgeEarningDateTime > Date.now();
         }
         return false;
@@ -26443,6 +26696,23 @@ class AppTocCiosHomeComponent {
             });
         }
     }
+    showBadgeIcon() {
+        const badgeDetails = this.extContentReadData?.badgeDetails_v1;
+        if (!badgeDetails || !badgeDetails.length) {
+            return false;
+        }
+        const badge = badgeDetails[0];
+        // If badgeEarningDateEnabled is false, don't show badge
+        if (!badge.badgeEarningDateEnabled) {
+            return true;
+        }
+        // If badgeEarningDateEnabled is true, show badge only if badgeEarningDateTime has passed
+        if (badge?.badgeEarningDateEnabled && badge?.badgeEarningDateTime) {
+            console.log(badge.badgeEarningDateTime, Date.now());
+            return badge.badgeEarningDateTime > Date.now();
+        }
+        return false;
+    }
     get showEnroll() {
         return Object.keys(this.userExtCourseEnroll).length === 0 &&
             !this.enrollValidationLoading &&
@@ -26455,11 +26725,11 @@ class AppTocCiosHomeComponent {
             _.get(this.extContentReadData, 'contentPartner.isActive', false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i5.CommonMethodsService }, { token: i1$2.TranslateService }, { token: i2$1.ConfigurationsService }, { token: i2$1.EventService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.WidgetContentService }, { token: CertificateService }, { token: LoaderService }, { token: i5$4.MatDialog }, { token: i7.MatLegacySnackBar }, { token: NetCoreService }, { token: 'environment', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCiosHomeComponent, selector: "ws-app-app-toc-cios-home", host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"extContentAvailable\">\n    <div class=\"toc-banner\">\n        <div class=\"flex flex-row gap-6 fixed-width\">\n            <div class=\"banner-details toc-content\" #bannerDetails>\n                <div class=\"flex flex-col gap-4\">\n                    <div class=\"flex items-center justify-between gap-4\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <!-- <div class=\"flex flex-row gap-2\">\n                    <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                    <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n                     <ng-container *ngIf=\"content?.courseCategory\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"extContentReadData?.topic\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n                    </ng-container>\n                    </div>\n                </div> -->\n                        </ng-container>\n\n                        <div class=\"flex items-center text-white mob-share\">\n                            <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n                        </div>\n                    </div>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- Knowledge level block -->\n                        <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n                            class=\"knowledge-level-container\">\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n                                class=\"level-badge beginner\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                                    <path\n                                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                                        fill=\"#49C951\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n                                class=\"level-badge intermediate\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                                    <path\n                                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                                        fill=\"#1B4CA1\" />\n                                    <path\n                                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n                                class=\"level-badge advanced\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <g clip-path=\"url(#clip0)\">\n                                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                                        <path\n                                            d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                                            fill=\"#FF8268\" />\n                                        <path\n                                            d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                        <path\n                                            d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip0\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                        </div>\n                    </ng-container>\n                    <div class=\"flex flex-col gap-2\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n                                handleCapitalize(extContentReadData?.name) }}</div>\n                            <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n                                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                                {{ 'cardcontentv2.by' | translate }}\n                                <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n                                    <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n                                        {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n                                    </span>\n                                    <ng-template #contentPartnerName>\n                                        {{extContentReadData?.contentPartner?.contentPartnerName }}\n                                    </ng-template>\n                                </span>\n                                <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n                                    'common.karmayogiBharat' | translate }}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n                    <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                    <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                        <mat-icon>grade</mat-icon>\n                        <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                    </div>\n                    <div class=\"separator\"></div>\n                    <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n                    </div>\n                    <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                    <div class=\"most-enrolled-chip text-xs leading-3\">\n                        <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n                        <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n                    </div>\n                    </div>\n                </div> -->\n                    </ng-container>\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n                        <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n                            extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-container *ngIf=\"!forPreview\">\n\n        <div *ngIf=\"isMobile\">\n            <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                        <span class=\"mat-body-2  ws-mat-black-text\">\n                            {{userExtCourseEnroll?.progress}}%</span>\n                    </div>\n                    <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                [progress]=\"userExtCourseEnroll?.progress\"\n                                                [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                            </ws-widget-content-progress>\n                  </ng-container>   -->\n                <ng-container *ngIf=\"showEnroll\">\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=\"showRedirect\">\n                    <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                        [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.redirect' | translate }}\n                            <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                    && userExtCourseEnroll?.progress === 100\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                         <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                        <span>Certificate</span>\n                        <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                        <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                          </div>\n                    </button>\n                </ng-container>  -->\n            </div>\n\n             <div class=\"block md:hidden\">\n                <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n             </div>\n            <div>\n                <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                    <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                    <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"flex flex-row gap-6 fixed-width\">\n        <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n            <mat-tab-group>\n                <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n                    <ng-template matTabContent>\n                        <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                <div class=\"flex flex-col gap-2 mt-4\">\n                                    <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n                                    [baseContentReadData]=\"extContentReadData\"\n                                    [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length >  0 && userExtCourseEnroll?.progress === 100\"\n                                    [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n                                    [skeletonLoader]=\"skeletonLoader\"\n                                    [fromMDO]=\"fromMDO\">\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 *ngIf=\"showEnroll\">\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=\"showRedirect\">\n                            <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                                [href]=\"extContentReadData?.redirectUrl\"\n                                (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.redirect' | translate }}\n                                    <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                        && userExtCourseEnroll?.progress === 100\">\n                        <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                            <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                            <span>Certificate</span>\n                            <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                            <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                            </div>\n                        </button>\n                    </ng-container>  -->\n                    </div>\n                </ng-container>\n\n             <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n                <div>\n                    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                        <div class=\"text-xs\">\n                            {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n    (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n    <ng-container *ngIf=\"showProviderTips\">\n        <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n            <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n        </div>\n    </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i18.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i18.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "directive", type: i18.MatLegacyTabContent, selector: "[matTabContent]" }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: ["condition", "kparray", "content", "contentReadData", "baseContentReadData", "skeletonLoader", "sticky", "tocStructure", "pathSet", "config", "resumeData", "forPreview", "showReviews", "batchData", "fromViewer", "selectedBatchData", "selectedTabValue", "fromMarketPlace", "showMarketPlaceCertificate", "languageList", "lockCertificate", "fromMDO"], outputs: ["trigerCompletionSurveyForm"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: i12$2.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { kind: "component", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: ["widgetData", "baseContentReadData"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCiosHomeComponent, selector: "ws-app-app-toc-cios-home", host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"extContentAvailable\">\n    <div class=\"toc-banner\">\n        <div class=\"flex flex-row gap-6 fixed-width\">\n            <div class=\"banner-details toc-content\" #bannerDetails>\n                <div class=\"flex flex-col gap-4\">\n                    <div class=\"flex items-center justify-between gap-4\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <!-- <div class=\"flex flex-row gap-2\">\n                    <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                    <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n                     <ng-container *ngIf=\"content?.courseCategory\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"extContentReadData?.topic\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n                    </ng-container>\n                    </div>\n                </div> -->\n                        </ng-container>\n\n                        <div class=\"flex items-center text-white mob-share\">\n                            <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n                        </div>\n                    </div>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- Knowledge level block -->\n                        <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n                            class=\"knowledge-level-container\">\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n                                class=\"level-badge beginner\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                                    <path\n                                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                                        fill=\"#49C951\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n                                class=\"level-badge intermediate\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                                    <path\n                                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                                        fill=\"#1B4CA1\" />\n                                    <path\n                                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n                                class=\"level-badge advanced\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <g clip-path=\"url(#clip0)\">\n                                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                                        <path\n                                            d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                                            fill=\"#FF8268\" />\n                                        <path\n                                            d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                        <path\n                                            d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip0\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                        </div>\n                  \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) }}\n                         <!-- <div  class=\"knowledge-level-container badgediv\"> -->\n                  <span *ngIf=\"showBadgeIcon()\" class=\"custom-badge\">\n                    <img class=\"badge-img w-5 h-5\" src=\"{{ extContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\" srcset=\"\">\n                  </span>\n                <!-- </div> -->\n                            </div>\n        \n                            <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n                                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                                {{ 'cardcontentv2.by' | translate }}\n                                <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n                                    <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n                                        {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n                                    </span>\n                                    <ng-template #contentPartnerName>\n                                        {{extContentReadData?.contentPartner?.contentPartnerName }}\n                                    </ng-template>\n                                </span>\n                                <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n                                    'common.karmayogiBharat' | translate }}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n                    <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                    <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                        <mat-icon>grade</mat-icon>\n                        <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                    </div>\n                    <div class=\"separator\"></div>\n                    <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n                    </div>\n                    <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                    <div class=\"most-enrolled-chip text-xs leading-3\">\n                        <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n                        <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n                    </div>\n                    </div>\n                </div> -->\n                    </ng-container>\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n                        <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n                            extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-container *ngIf=\"!forPreview\">\n\n        <div *ngIf=\"isMobile\">\n            <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                        <span class=\"mat-body-2  ws-mat-black-text\">\n                            {{userExtCourseEnroll?.progress}}%</span>\n                    </div>\n                    <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                [progress]=\"userExtCourseEnroll?.progress\"\n                                                [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                            </ws-widget-content-progress>\n                  </ng-container>   -->\n                <ng-container *ngIf=\"showEnroll\">\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=\"showRedirect\">\n                    <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                        [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.redirect' | translate }}\n                            <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                    && userExtCourseEnroll?.progress === 100\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                         <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                        <span>Certificate</span>\n                        <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                        <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                          </div>\n                    </button>\n                </ng-container>  -->\n            </div>\n\n             <div class=\"block md:hidden\">\n                <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n             </div>\n            <div>\n                <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                    <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                    <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"flex flex-row gap-6 fixed-width\">\n        <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n            <mat-tab-group>\n                <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n                    <ng-template matTabContent>\n                        <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                <div class=\"flex flex-col gap-2 mt-4\">\n                                    <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n                                    [baseContentReadData]=\"extContentReadData\"\n                                    [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length >  0 && userExtCourseEnroll?.progress === 100\"\n                                    [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n                                    [skeletonLoader]=\"skeletonLoader\"\n                                    [fromMDO]=\"fromMDO\">\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 *ngIf=\"showEnroll\">\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=\"showRedirect\">\n                            <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                                [href]=\"extContentReadData?.redirectUrl\"\n                                (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.redirect' | translate }}\n                                    <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                        && userExtCourseEnroll?.progress === 100\">\n                        <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                            <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                            <span>Certificate</span>\n                            <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                            <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                            </div>\n                        </button>\n                    </ng-container>  -->\n                    </div>\n                </ng-container>\n\n             <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n                <div>\n                    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                        <div class=\"text-xs\">\n                            {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n    (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n    <ng-container *ngIf=\"showProviderTips\">\n        <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n            <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n        </div>\n    </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i18.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i18.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "directive", type: i18.MatLegacyTabContent, selector: "[matTabContent]" }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: ["condition", "kparray", "content", "contentReadData", "baseContentReadData", "skeletonLoader", "sticky", "tocStructure", "pathSet", "config", "resumeData", "forPreview", "showReviews", "batchData", "fromViewer", "selectedBatchData", "selectedTabValue", "fromMarketPlace", "showMarketPlaceCertificate", "languageList", "lockCertificate", "fromMDO"], outputs: ["trigerCompletionSurveyForm"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: i12$2.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { kind: "component", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: ["widgetData", "baseContentReadData"] }, { 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: 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: AppTocCiosHomeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ws-app-app-toc-cios-home', template: "<ng-container *ngIf=\"extContentAvailable\">\n    <div class=\"toc-banner\">\n        <div class=\"flex flex-row gap-6 fixed-width\">\n            <div class=\"banner-details toc-content\" #bannerDetails>\n                <div class=\"flex flex-col gap-4\">\n                    <div class=\"flex items-center justify-between gap-4\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <!-- <div class=\"flex flex-row gap-2\">\n                    <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                    <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n                     <ng-container *ngIf=\"content?.courseCategory\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"extContentReadData?.topic\">\n                        <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n                    </ng-container>\n                    </div>\n                </div> -->\n                        </ng-container>\n\n                        <div class=\"flex items-center text-white mob-share\">\n                            <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n                        </div>\n                    </div>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- Knowledge level block -->\n                        <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n                            class=\"knowledge-level-container\">\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n                                class=\"level-badge beginner\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                                    <path\n                                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                                        fill=\"#49C951\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n                                class=\"level-badge intermediate\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                                    <path\n                                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                                        fill=\"#1B4CA1\" />\n                                    <path\n                                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                            <span\n                                *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n                                class=\"level-badge advanced\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                                    <g clip-path=\"url(#clip0)\">\n                                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                                        <path\n                                            d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                                            fill=\"#FF8268\" />\n                                        <path\n                                            d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                        <path\n                                            d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                                            fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                                    </g>\n                                    <defs>\n                                        <clipPath id=\"clip0\">\n                                            <rect width=\"16\" height=\"16\" fill=\"white\" />\n                                        </clipPath>\n                                    </defs>\n                                </svg>\n                                {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n                            </span>\n                        </div>\n                    </ng-container>\n                    <div class=\"flex flex-col gap-2\">\n                        <ng-container *ngIf=\"skeletonLoader\">\n                            <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                            <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        </ng-container>\n                        <ng-container *ngIf=\"!skeletonLoader\">\n                            <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n                                handleCapitalize(extContentReadData?.name) }}</div>\n                            <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n                                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                                {{ 'cardcontentv2.by' | translate }}\n                                <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n                                    <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n                                        {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n                                    </span>\n                                    <ng-template #contentPartnerName>\n                                        {{extContentReadData?.contentPartner?.contentPartnerName }}\n                                    </ng-template>\n                                </span>\n                                <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n                                    'common.karmayogiBharat' | translate }}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n                    <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                    <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                        <mat-icon>grade</mat-icon>\n                        <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                    </div>\n                    <div class=\"separator\"></div>\n                    <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n                    </div>\n                    <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                    <div class=\"most-enrolled-chip text-xs leading-3\">\n                        <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n                        <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n                    </div>\n                    </div>\n                </div> -->\n                    </ng-container>\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n                        <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n                            extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-container *ngIf=\"!forPreview\">\n\n        <div *ngIf=\"isMobile\">\n            <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                        <span class=\"mat-body-2  ws-mat-black-text\">\n                            {{userExtCourseEnroll?.progress}}%</span>\n                    </div>\n                    <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                [progress]=\"userExtCourseEnroll?.progress\"\n                                                [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                            </ws-widget-content-progress>\n                  </ng-container>   -->\n                <ng-container *ngIf=\"showEnroll\">\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=\"showRedirect\">\n                    <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                        [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.redirect' | translate }}\n                            <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                    && userExtCourseEnroll?.progress === 100\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                         <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                        <span>Certificate</span>\n                        <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                        <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                          </div>\n                    </button>\n                </ng-container>  -->\n            </div>\n\n             <div class=\"block md:hidden\">\n                <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n             </div>\n            <div>\n                <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                    <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                    <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"flex flex-row gap-6 fixed-width\">\n        <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n            <mat-tab-group>\n                <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n                    <ng-template matTabContent>\n                        <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                <div class=\"flex flex-col gap-2 mt-4\">\n                                    <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n                                    [baseContentReadData]=\"extContentReadData\"\n                                    [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length >  0 && userExtCourseEnroll?.progress === 100\"\n                                    [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n                                    [skeletonLoader]=\"skeletonLoader\"\n                                    [fromMDO]=\"fromMDO\">\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 *ngIf=\"showEnroll\">\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=\"showRedirect\">\n                            <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                                [href]=\"extContentReadData?.redirectUrl\"\n                                (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.redirect' | translate }}\n                                    <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                        && userExtCourseEnroll?.progress === 100\">\n                        <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                            <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                            <span>Certificate</span>\n                            <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                            <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                            </div>\n                        </button>\n                    </ng-container>  -->\n                    </div>\n                </ng-container>\n\n             <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n                <div>\n                    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                        <div class=\"text-xs\">\n                            {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n    (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n    <ng-container *ngIf=\"showProviderTips\">\n        <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n            <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n        </div>\n    </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"] }]
+            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                  \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) }}\n                         <!-- <div  class=\"knowledge-level-container badgediv\"> -->\n                  <span *ngIf=\"showBadgeIcon()\" class=\"custom-badge\">\n                    <img class=\"badge-img w-5 h-5\" src=\"{{ extContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\" srcset=\"\">\n                  </span>\n                <!-- </div> -->\n                            </div>\n        \n                            <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n                                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n                                {{ 'cardcontentv2.by' | translate }}\n                                <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n                                    <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n                                        {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n                                    </span>\n                                    <ng-template #contentPartnerName>\n                                        {{extContentReadData?.contentPartner?.contentPartnerName }}\n                                    </ng-template>\n                                </span>\n                                <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n                                    'common.karmayogiBharat' | translate }}</span>\n                            </div>\n                        </ng-container>\n                    </div>\n\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                        <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader\">\n                        <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n                    <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                    <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                        <mat-icon>grade</mat-icon>\n                        <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                    </div>\n                    <div class=\"separator\"></div>\n                    <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n                    </div>\n                    <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                    <div class=\"most-enrolled-chip text-xs leading-3\">\n                        <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n                        <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n                    </div>\n                    </div>\n                </div> -->\n                    </ng-container>\n                    <ng-container *ngIf=\"skeletonLoader\">\n                        <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n                            [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n                    </ng-container>\n                    <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n                        <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n                            extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-container *ngIf=\"!forPreview\">\n\n        <div *ngIf=\"isMobile\">\n            <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n                    <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n                        <span class=\"mat-body-2  ws-mat-black-text\">\n                            {{userExtCourseEnroll?.progress}}%</span>\n                    </div>\n                    <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n                                                [progress]=\"userExtCourseEnroll?.progress\"\n                                                [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n                                            </ws-widget-content-progress>\n                  </ng-container>   -->\n                <ng-container *ngIf=\"showEnroll\">\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=\"showRedirect\">\n                    <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                        [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                        <ng-container>{{ 'apptochome.redirect' | translate }}\n                            <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                        </ng-container>\n                    </a>\n                </ng-container>\n                <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                    && userExtCourseEnroll?.progress === 100\">\n                    <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                         <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                        <span>Certificate</span>\n                        <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                        <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                            <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                          </div>\n                    </button>\n                </ng-container>  -->\n            </div>\n\n             <div class=\"block md:hidden\">\n                <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n             </div>\n            <div>\n                <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                    <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                    <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"flex flex-row gap-6 fixed-width\">\n        <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n            <mat-tab-group>\n                <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n                    <ng-template matTabContent>\n                        <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n                            <ng-container *ngIf=\"skeletonLoader\">\n                                <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n                                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                <div class=\"flex flex-col gap-2 mt-4\">\n                                    <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                    <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n                                        [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"!skeletonLoader\">\n                                <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n                                    [baseContentReadData]=\"extContentReadData\"\n                                    [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length >  0 && userExtCourseEnroll?.progress === 100\"\n                                    [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n                                    [skeletonLoader]=\"skeletonLoader\"\n                                    [fromMDO]=\"fromMDO\">\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 *ngIf=\"showEnroll\">\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=\"showRedirect\">\n                            <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n                                [href]=\"extContentReadData?.redirectUrl\"\n                                (click)=\"captureRedirectTelemetry(extContentReadData)\">\n                                <ng-container>{{ 'apptochome.redirect' | translate }}\n                                    <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                        <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n                        && userExtCourseEnroll?.progress === 100\">\n                        <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n                            <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                            <span>Certificate</span>\n                            <mat-icon  *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n                            <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n                                <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n                            </div>\n                        </button>\n                    </ng-container>  -->\n                    </div>\n                </ng-container>\n\n             <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n                <div>\n                    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n                        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n                        <div class=\"text-xs\">\n                            {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n    (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n    <ng-container *ngIf=\"showProviderTips\">\n        <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n            <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n        </div>\n    </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i5.CommonMethodsService }, { type: i1$2.TranslateService }, { type: i2$1.ConfigurationsService }, { type: i2$1.EventService }, { type: i2$1.MultilingualTranslationsService }, { type: i2$1.WidgetContentService }, { type: CertificateService }, { type: LoaderService }, { type: i5$4.MatDialog }, { type: i7.MatLegacySnackBar }, { type: NetCoreService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['environment']
@@ -26658,8 +26928,9 @@ class AppTocLibModule {
             ActionService,
             MultilingualTranslationsService,
             CommonMethodsService,
-            // UserProfileService, // TODO: Import from @sunbird-cb/user-profile when available
-            // OtpService, // TODO: Import from @sunbird-cb/user-profile when available
+            UserProfileService,
+            NPSGridService,
+            OtpService,
             ContentLanguageService,
             TOCMultiLingualDialogModule,
             DatePipe,
@@ -26879,8 +27150,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ActionService,
                         MultilingualTranslationsService,
                         CommonMethodsService,
-                        // UserProfileService, // TODO: Import from @sunbird-cb/user-profile when available
-                        // OtpService, // TODO: Import from @sunbird-cb/user-profile when available
+                        UserProfileService,
+                        NPSGridService,
+                        OtpService,
                         ContentLanguageService,
                         TOCMultiLingualDialogModule,
                         DatePipe,
@@ -27189,5 +27461,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccessControlService, ActionService, AppTocAboutComponent, AppTocAnalyticsTilesComponent, AppTocBannerComponent, AppTocBatchAssignmentsComponent, AppTocCiosHomeComponent, AppTocCiosResolverService, AppTocCiosUserEnrollResolverService, AppTocCohortsComponent, AppTocContentCardComponent, AppTocContentComponent, AppTocContentReadResolverService, AppTocDialogIntroVideoComponent, AppTocDiscussionComponent, AppTocExtPublicResolverService, AppTocHomeComponent, AppTocHomeV2Component, AppTocLibModule, AppTocOverviewComponent, AppTocResolverService, AppTocService, AppTocSessionCardComponent, AppTocSessionsComponent, AppTocSinglePageComponent, AppTocTeachersNotesComponent, AppTocV2Service, CardCompetencyComponent, CardCompetencyModule, CompletionSurveyFormComponent, ConfigResolverService, ContentTocComponent, ContentTocModule, CreateBatchDialogComponent, EnrollLanguageDialogueComponent, EnrollProfileFormComponent, EnrollQuestionnaireComponent, ErrorType, KarmaPointsComponent, KarmaPointsModule, KnowledgeArtifactDetailsComponent, LoadCheckService, MetaTag, NsAppToc, NsCohorts, NsDiscussionForum, ProfileResolverService, PublicSurveyFormComponent, ROOT_WIDGET_CONFIG, ResetRatingsService, RestrictedFeaturesResolverService, ReviewsContentComponent, ShareTocComponent, ShareTocModule, SurveyFormQuestionComponent, SurveyFormSectionComponent, TimerService, TitleTagService, TocKpiValuesComponent, TocKpiValuesModule, ViewerDataService, ViewerUtilService, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_TOC_LIB_CONFIG, WidgetContentService };
+export { AccessControlService, ActionService, AppTocAboutComponent, AppTocAnalyticsTilesComponent, AppTocBannerComponent, AppTocBatchAssignmentsComponent, AppTocCiosHomeComponent, AppTocCiosResolverService, AppTocCiosUserEnrollResolverService, AppTocCohortsComponent, AppTocContentCardComponent, AppTocContentComponent, AppTocContentReadResolverService, AppTocDialogIntroVideoComponent, AppTocDiscussionComponent, AppTocExtPublicResolverService, AppTocHomeComponent, AppTocHomeV2Component, AppTocLibModule, AppTocOverviewComponent, AppTocResolverService, AppTocService, AppTocSessionCardComponent, AppTocSessionsComponent, AppTocSinglePageComponent, AppTocTeachersNotesComponent, AppTocV2Service, CardCompetencyComponent, CardCompetencyModule, CompletionSurveyFormComponent, ConfigResolverService, ContentTocComponent, ContentTocModule, CreateBatchDialogComponent, EnrollLanguageDialogueComponent, EnrollProfileFormComponent, EnrollQuestionnaireComponent, ErrorType, KarmaPointsComponent, KarmaPointsModule, KnowledgeArtifactDetailsComponent, LoadCheckService, MetaTag, NsAppToc, NsCohorts, NsDiscussionForum, ProfileResolverService, PublicSurveyFormComponent, ROOT_WIDGET_CONFIG, ResetRatingsService, RestrictedFeaturesResolverService, ReviewsContentComponent, ShareTocComponent, ShareTocModule, SurveyFormQuestionComponent, SurveyFormSectionComponent, TimerService, TitleTagService, TocKpiValuesComponent, TocKpiValuesModule, UserProfileService, ViewerDataService, ViewerUtilService, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_TOC_LIB_CONFIG, WidgetContentService };
 //# sourceMappingURL=sunbird-cb-toc.mjs.map