@sunbird-cb/toc 0.0.23 → 0.0.25

package/fesm2022/sunbird-cb-toc.mjs

@@ -49,14 +49,14 @@ import * as i15 from '@angular/material/core';
 import { MatNativeDateModule, MatRippleModule, DateAdapter, NativeDateAdapter } from '@angular/material/core';
 import * as i8$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i6$2 from '@angular/material/divider';
+import * as i6$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i6$3 from '@angular/material/expansion';
+import * as i6$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i12$1 from '@angular/material/legacy-input';
 import { MatLegacyInputModule } from '@angular/material/legacy-input';
 import { MatLegacyListModule } from '@angular/material/legacy-list';
-import * as i6$1 from '@angular/material/legacy-menu';
+import * as i7$1 from '@angular/material/legacy-menu';
 import { MatLegacyMenuModule } from '@angular/material/legacy-menu';
 import * as i3$1 from '@angular/material/legacy-progress-bar';
 import { MatLegacyProgressBarModule } from '@angular/material/legacy-progress-bar';
@@ -3214,8 +3214,12 @@ class CertificateDialogComponent {
     }
     ngOnInit() {
         this.url = this.data.cet;
+        // Determine the certificate URL based on whether it's an achievement/milestone certificate
+        const certDownloadUrl = this.data?.isAchievement
+            ? `${this.environment.contentHost}/apis/public/v8/milestone/cert/download/${this.data.certId}`
+            : `${this.environment.contentHost}/apis/public/v8/cert/download/${this.data.certId}`;
         // tslint:disable-next-line:max-line-length
-        this.navUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${this.environment.contentHost}/apis/public/v8/cert/download/${this.data.certId}`;
+        this.navUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(certDownloadUrl)}`;
     }
     downloadCert() {
         this.raiseIntreactTelemetry('svg');
@@ -3274,10 +3278,106 @@ class CertificateDialogComponent {
             }
         };
     }
+    getCertificateUrl() {
+        return this.data?.isAchievement
+            ? `${this.environment.contentHost}/apis/public/v8/milestone/cert/download/${this.data.certId}`
+            : `${this.environment.contentHost}/apis/public/v8/cert/download/${this.data.certId}`;
+    }
     shareCert() {
         this.raiseShareIntreactTelemetry('share');
         return window.open(this.navUrl, '_blank');
     }
+    shareOnLinkedIn() {
+        this.raiseShareIntreactTelemetry('share', 'linkedin');
+        const certDownloadUrl = this.getCertificateUrl();
+        // LinkedIn's current sharing endpoint
+        // Note: LinkedIn requires the URL to be publicly accessible
+        const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(certDownloadUrl)}`;
+        // Open LinkedIn share dialog
+        const popup = window.open(linkedInUrl, '_blank', 'width=600,height=600,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1');
+        // Check if popup was blocked
+        if (!popup || popup.closed || typeof popup.closed === 'undefined') {
+            // Fallback: try opening in same tab
+            window.open(linkedInUrl, '_blank');
+        }
+    }
+    shareOnFacebook() {
+        this.raiseShareIntreactTelemetry('share', 'facebook');
+        const certDownloadUrl = this.getCertificateUrl();
+        const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(certDownloadUrl)}`;
+        window.open(facebookUrl, '_blank', 'width=600,height=600');
+    }
+    shareOnTwitter() {
+        this.raiseShareIntreactTelemetry('share', 'twitter');
+        const certDownloadUrl = this.getCertificateUrl();
+        const text = this.data?.isAchievement
+            ? 'I have achieved a milestone! Check out my certificate.'
+            : 'I have completed a course! Check out my certificate.';
+        const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(certDownloadUrl)}&text=${encodeURIComponent(text)}`;
+        window.open(twitterUrl, '_blank', 'width=600,height=600');
+    }
+    shareOnWhatsApp() {
+        this.raiseShareIntreactTelemetry('share', 'whatsapp');
+        const certDownloadUrl = this.getCertificateUrl();
+        const text = this.data?.isAchievement
+            ? 'I have achieved a milestone! Check out my certificate: '
+            : `I have completed a course! Check out my certificate: `;
+        const whatsappUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(text + certDownloadUrl)}`;
+        window.open(whatsappUrl, '_blank');
+    }
+    shareViaEmail() {
+        this.raiseShareIntreactTelemetry('share', 'email');
+        const certDownloadUrl = this.getCertificateUrl();
+        const subject = this.data?.isAchievement
+            ? 'Milestone Achievement Certificate'
+            : 'Course Completion Certificate';
+        const body = this.data?.isAchievement
+            ? `I have achieved a milestone! You can view my certificate here: ${certDownloadUrl}`
+            : `I have completed a course! You can view my certificate here: ${certDownloadUrl}`;
+        const mailtoUrl = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+        window.location.href = mailtoUrl;
+    }
+    copyCertificateLink() {
+        this.raiseShareIntreactTelemetry('share', 'copy');
+        const certDownloadUrl = this.getCertificateUrl();
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(certDownloadUrl).then(() => {
+                console.log('Certificate link copied to clipboard');
+                // You can add a snackbar notification here if needed
+            }).catch(err => {
+                console.error('Failed to copy certificate link:', err);
+                this.fallbackCopyTextToClipboard(certDownloadUrl);
+            });
+        }
+        else {
+            this.fallbackCopyTextToClipboard(certDownloadUrl);
+        }
+    }
+    fallbackCopyTextToClipboard(text) {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.position = 'fixed';
+        textArea.style.top = '0';
+        textArea.style.left = '0';
+        textArea.style.width = '2em';
+        textArea.style.height = '2em';
+        textArea.style.padding = '0';
+        textArea.style.border = 'none';
+        textArea.style.outline = 'none';
+        textArea.style.boxShadow = 'none';
+        textArea.style.background = 'transparent';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+            document.execCommand('copy');
+            console.log('Certificate link copied to clipboard (fallback)');
+        }
+        catch (err) {
+            console.error('Fallback: Failed to copy', err);
+        }
+        document.body.removeChild(textArea);
+    }
     raiseShareIntreactTelemetry(type, action) {
         this.events.raiseInteractTelemetry({
             type: WsEvents.EnumInteractTypes.CLICK,
@@ -3299,11 +3399,11 @@ class CertificateDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CertificateDialogComponent, deps: [{ token: i2$1.EventService }, { token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CertificateDialogComponent, selector: "ws-widget-certificate-dialog", host: { classAttribute: "certificate-inner-dialog-panel" }, ngImport: i0, template: "<mat-card class=\"no-shadow certificate-img-box\">\n    <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"true\">\n        <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n    </button>\n    <!-- <mat-card-title>\n\n    </mat-card-title> -->\n    <mat-card-content class=\"certificate-img-content\">\n        <img #certificate [src]=\"url| pipeSafeSanitizer: 'url'\" alt=\"Certificate\" role=\"image\" class=\"certificate-banner-image\">\n    </mat-card-content>\n    <mat-card-actions class=\"flex flex-row-reverse gap-4\">\n        <!-- <ws-widget-svg-to-pdf></ws-widget-svg-to-pdf> -->\n        <a mat-button (click)=\"shareCert()\" class=\"ws-mat-accent-border-active mat-accent btn-custom\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">share</mat-icon>\n            Share\n        </a>\n        <a mat-button [matMenuTriggerFor]=\"menu\" class=\"ws-mat-accent-border-active mat-accent btn-custom\" (click)=\"raiseIntreactTelemetry()\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">cloud_download</mat-icon>\n            {{'certificatedialog.download' | translate}}\n        </a>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item (click)='downloadCertPdf()'>\n                <mat-icon>picture_as_pdf</mat-icon>\n                <span>{{'certificatedialog.pdf' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCertPng()'>\n                <mat-icon>photo</mat-icon>\n                <span>{{'certificatedialog.png' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCert()'>\n                <mat-icon>photo_size_select_actual</mat-icon>\n                <span>{{'certificatedialog.svg' | translate}}</span>\n            </button>\n        </mat-menu>\n    </mat-card-actions>\n</mat-card>\n", styles: [".no-shadow{box-shadow:none!important}.certificate-banner-image{height:30rem;display:flex;width:auto;margin:0 auto}@media only screen and (max-width: 1279px){.certificate-banner-image{width:100%;height:auto;flex:1}}.certificate-img-box{max-height:35rem;overflow-y:auto;overflow-x:hidden}.certificate-img-content{overflow:hidden}a.download_btn{background-color:#f0f0f0;border-radius:4px;float:right;height:40px;padding:0 16px;text-align:center;line-height:40px;text-decoration:none;color:#0009;font-size:14px;font-weight:600;margin-top:16px;margin-right:0}.download_icon{font-size:16px;vertical-align:text-top}::ng-deep .close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important}::ng-deep .close-icon{transition:1s ease-in-out;color:#fff!important}::ng-deep .close-icon:hover{transform:rotate(180deg)}::ng-deep .icon-outside .close-button{float:right;position:absolute;top:19px;right:18px}::ng-deep .icon-outside .mat-dialog-container{overflow:unset}::ng-deep .cdk-overlay-pane{max-height:96%!important;overflow-y:auto!important}.certificate-banner-image svg{width:500;height:500}@media only screen and (max-width: 1279px){.certificate-banner-image svg{width:auto;height:auto;flex:1}}.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.close-button{position:absolute!important;top:19px!important;right:18px!important}@media screen and (max-width: 1200px){.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 8px;border-radius:4px;overflow:visible}.gap-4{grid-gap:0rem;gap:0rem}}\n"], dependencies: [{ kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i5$1.MatLegacyCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i2$1.PipeSafeSanitizerPipe, name: "pipeSafeSanitizer" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CertificateDialogComponent, selector: "ws-widget-certificate-dialog", host: { classAttribute: "certificate-inner-dialog-panel" }, ngImport: i0, template: "<mat-card class=\"no-shadow certificate-img-box\">\n    <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"true\">\n        <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n    </button>\n    <!-- <mat-card-title>\n\n    </mat-card-title> -->\n    <mat-card-content class=\"certificate-img-content\">\n        <img #certificate [src]=\"url| pipeSafeSanitizer: 'url'\" alt=\"Certificate\" role=\"image\" class=\"certificate-banner-image\">\n    </mat-card-content>\n    <mat-card-actions class=\"flex flex-row-reverse gap-4\">\n        <!-- <ws-widget-svg-to-pdf></ws-widget-svg-to-pdf> -->\n        <a mat-button [matMenuTriggerFor]=\"shareMenu\" class=\"ws-mat-accent-border-active mat-accent btn-custom\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">share</mat-icon>\n            Share\n        </a>\n        <mat-menu #shareMenu=\"matMenu\">\n            <button mat-menu-item (click)='shareOnLinkedIn()'>\n                <mat-icon>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n                        <path fill=\"currentColor\" d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z\"/>\n                    </svg>\n                </mat-icon>\n                <span>LinkedIn</span>\n            </button>\n            <button mat-menu-item (click)='shareOnFacebook()'>\n                <mat-icon>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n                        <path fill=\"currentColor\" d=\"M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z\"/>\n                    </svg>\n                </mat-icon>\n                <span>Facebook</span>\n            </button>\n            <button mat-menu-item (click)='shareOnTwitter()'>\n                <mat-icon>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n                        <path fill=\"currentColor\" d=\"M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.70,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z\"/>\n                    </svg>\n                </mat-icon>\n                <span>Twitter</span>\n            </button>\n            <button mat-menu-item (click)='shareOnWhatsApp()'>\n                <mat-icon>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n                        <path fill=\"currentColor\" d=\"M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z\"/>\n                    </svg>\n                </mat-icon>\n                <span>WhatsApp</span>\n            </button>\n            <button mat-menu-item (click)='shareViaEmail()'>\n                <mat-icon>email</mat-icon>\n                <span>Email</span>\n            </button>\n            <mat-divider></mat-divider>\n            <button mat-menu-item (click)='copyCertificateLink()'>\n                <mat-icon>content_copy</mat-icon>\n                <span>Copy Link</span>\n            </button>\n        </mat-menu>\n        <a mat-button [matMenuTriggerFor]=\"menu\" class=\"ws-mat-accent-border-active mat-accent btn-custom\" (click)=\"raiseIntreactTelemetry()\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">cloud_download</mat-icon>\n            {{'certificatedialog.download' | translate}}\n        </a>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item (click)='downloadCertPdf()'>\n                <mat-icon>picture_as_pdf</mat-icon>\n                <span>{{'certificatedialog.pdf' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCertPng()'>\n                <mat-icon>photo</mat-icon>\n                <span>{{'certificatedialog.png' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCert()'>\n                <mat-icon>photo_size_select_actual</mat-icon>\n                <span>{{'certificatedialog.svg' | translate}}</span>\n            </button>\n        </mat-menu>\n    </mat-card-actions>\n</mat-card>\n", styles: [".no-shadow{box-shadow:none!important}.certificate-banner-image{height:30rem;display:flex;width:auto;margin:0 auto}@media only screen and (max-width: 1279px){.certificate-banner-image{width:100%;height:auto;flex:1}}.certificate-img-box{max-height:35rem;overflow-y:auto;overflow-x:hidden}.certificate-img-content{overflow:hidden}a.download_btn{background-color:#f0f0f0;border-radius:4px;float:right;height:40px;padding:0 16px;text-align:center;line-height:40px;text-decoration:none;color:#0009;font-size:14px;font-weight:600;margin-top:16px;margin-right:0}.download_icon{font-size:16px;vertical-align:text-top}::ng-deep .close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important}::ng-deep .close-icon{transition:1s ease-in-out;color:#fff!important}::ng-deep .close-icon:hover{transform:rotate(180deg)}::ng-deep .icon-outside .close-button{float:right;position:absolute;top:19px;right:18px}::ng-deep .icon-outside .mat-dialog-container{overflow:unset}::ng-deep .cdk-overlay-pane{max-height:96%!important;overflow-y:auto!important}.certificate-banner-image svg{width:500;height:500}@media only screen and (max-width: 1279px){.certificate-banner-image svg{width:auto;height:auto;flex:1}}.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.close-button{position:absolute!important;top:19px!important;right:18px!important}@media screen and (max-width: 1200px){.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 8px;border-radius:4px;overflow:visible}.gap-4{grid-gap:0rem;gap:0rem}}\n"], dependencies: [{ kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i5$1.MatLegacyCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i7$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i2$1.PipeSafeSanitizerPipe, name: "pipeSafeSanitizer" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CertificateDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ws-widget-certificate-dialog', host: { class: 'certificate-inner-dialog-panel' }, template: "<mat-card class=\"no-shadow certificate-img-box\">\n    <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"true\">\n        <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n    </button>\n    <!-- <mat-card-title>\n\n    </mat-card-title> -->\n    <mat-card-content class=\"certificate-img-content\">\n        <img #certificate [src]=\"url| pipeSafeSanitizer: 'url'\" alt=\"Certificate\" role=\"image\" class=\"certificate-banner-image\">\n    </mat-card-content>\n    <mat-card-actions class=\"flex flex-row-reverse gap-4\">\n        <!-- <ws-widget-svg-to-pdf></ws-widget-svg-to-pdf> -->\n        <a mat-button (click)=\"shareCert()\" class=\"ws-mat-accent-border-active mat-accent btn-custom\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">share</mat-icon>\n            Share\n        </a>\n        <a mat-button [matMenuTriggerFor]=\"menu\" class=\"ws-mat-accent-border-active mat-accent btn-custom\" (click)=\"raiseIntreactTelemetry()\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">cloud_download</mat-icon>\n            {{'certificatedialog.download' | translate}}\n        </a>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item (click)='downloadCertPdf()'>\n                <mat-icon>picture_as_pdf</mat-icon>\n                <span>{{'certificatedialog.pdf' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCertPng()'>\n                <mat-icon>photo</mat-icon>\n                <span>{{'certificatedialog.png' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCert()'>\n                <mat-icon>photo_size_select_actual</mat-icon>\n                <span>{{'certificatedialog.svg' | translate}}</span>\n            </button>\n        </mat-menu>\n    </mat-card-actions>\n</mat-card>\n", styles: [".no-shadow{box-shadow:none!important}.certificate-banner-image{height:30rem;display:flex;width:auto;margin:0 auto}@media only screen and (max-width: 1279px){.certificate-banner-image{width:100%;height:auto;flex:1}}.certificate-img-box{max-height:35rem;overflow-y:auto;overflow-x:hidden}.certificate-img-content{overflow:hidden}a.download_btn{background-color:#f0f0f0;border-radius:4px;float:right;height:40px;padding:0 16px;text-align:center;line-height:40px;text-decoration:none;color:#0009;font-size:14px;font-weight:600;margin-top:16px;margin-right:0}.download_icon{font-size:16px;vertical-align:text-top}::ng-deep .close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important}::ng-deep .close-icon{transition:1s ease-in-out;color:#fff!important}::ng-deep .close-icon:hover{transform:rotate(180deg)}::ng-deep .icon-outside .close-button{float:right;position:absolute;top:19px;right:18px}::ng-deep .icon-outside .mat-dialog-container{overflow:unset}::ng-deep .cdk-overlay-pane{max-height:96%!important;overflow-y:auto!important}.certificate-banner-image svg{width:500;height:500}@media only screen and (max-width: 1279px){.certificate-banner-image svg{width:auto;height:auto;flex:1}}.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.close-button{position:absolute!important;top:19px!important;right:18px!important}@media screen and (max-width: 1200px){.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 8px;border-radius:4px;overflow:visible}.gap-4{grid-gap:0rem;gap:0rem}}\n"] }]
+            args: [{ selector: 'ws-widget-certificate-dialog', host: { class: 'certificate-inner-dialog-panel' }, template: "<mat-card class=\"no-shadow certificate-img-box\">\n    <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"true\">\n        <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n    </button>\n    <!-- <mat-card-title>\n\n    </mat-card-title> -->\n    <mat-card-content class=\"certificate-img-content\">\n        <img #certificate [src]=\"url| pipeSafeSanitizer: 'url'\" alt=\"Certificate\" role=\"image\" class=\"certificate-banner-image\">\n    </mat-card-content>\n    <mat-card-actions class=\"flex flex-row-reverse gap-4\">\n        <!-- <ws-widget-svg-to-pdf></ws-widget-svg-to-pdf> -->\n        <a mat-button [matMenuTriggerFor]=\"shareMenu\" class=\"ws-mat-accent-border-active mat-accent btn-custom\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">share</mat-icon>\n            Share\n        </a>\n        <mat-menu #shareMenu=\"matMenu\">\n            <button mat-menu-item (click)='shareOnLinkedIn()'>\n                <mat-icon>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n                        <path fill=\"currentColor\" d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z\"/>\n                    </svg>\n                </mat-icon>\n                <span>LinkedIn</span>\n            </button>\n            <button mat-menu-item (click)='shareOnFacebook()'>\n                <mat-icon>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n                        <path fill=\"currentColor\" d=\"M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z\"/>\n                    </svg>\n                </mat-icon>\n                <span>Facebook</span>\n            </button>\n            <button mat-menu-item (click)='shareOnTwitter()'>\n                <mat-icon>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n                        <path fill=\"currentColor\" d=\"M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.70,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z\"/>\n                    </svg>\n                </mat-icon>\n                <span>Twitter</span>\n            </button>\n            <button mat-menu-item (click)='shareOnWhatsApp()'>\n                <mat-icon>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n                        <path fill=\"currentColor\" d=\"M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z\"/>\n                    </svg>\n                </mat-icon>\n                <span>WhatsApp</span>\n            </button>\n            <button mat-menu-item (click)='shareViaEmail()'>\n                <mat-icon>email</mat-icon>\n                <span>Email</span>\n            </button>\n            <mat-divider></mat-divider>\n            <button mat-menu-item (click)='copyCertificateLink()'>\n                <mat-icon>content_copy</mat-icon>\n                <span>Copy Link</span>\n            </button>\n        </mat-menu>\n        <a mat-button [matMenuTriggerFor]=\"menu\" class=\"ws-mat-accent-border-active mat-accent btn-custom\" (click)=\"raiseIntreactTelemetry()\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">cloud_download</mat-icon>\n            {{'certificatedialog.download' | translate}}\n        </a>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item (click)='downloadCertPdf()'>\n                <mat-icon>picture_as_pdf</mat-icon>\n                <span>{{'certificatedialog.pdf' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCertPng()'>\n                <mat-icon>photo</mat-icon>\n                <span>{{'certificatedialog.png' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCert()'>\n                <mat-icon>photo_size_select_actual</mat-icon>\n                <span>{{'certificatedialog.svg' | translate}}</span>\n            </button>\n        </mat-menu>\n    </mat-card-actions>\n</mat-card>\n", styles: [".no-shadow{box-shadow:none!important}.certificate-banner-image{height:30rem;display:flex;width:auto;margin:0 auto}@media only screen and (max-width: 1279px){.certificate-banner-image{width:100%;height:auto;flex:1}}.certificate-img-box{max-height:35rem;overflow-y:auto;overflow-x:hidden}.certificate-img-content{overflow:hidden}a.download_btn{background-color:#f0f0f0;border-radius:4px;float:right;height:40px;padding:0 16px;text-align:center;line-height:40px;text-decoration:none;color:#0009;font-size:14px;font-weight:600;margin-top:16px;margin-right:0}.download_icon{font-size:16px;vertical-align:text-top}::ng-deep .close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important}::ng-deep .close-icon{transition:1s ease-in-out;color:#fff!important}::ng-deep .close-icon:hover{transform:rotate(180deg)}::ng-deep .icon-outside .close-button{float:right;position:absolute;top:19px;right:18px}::ng-deep .icon-outside .mat-dialog-container{overflow:unset}::ng-deep .cdk-overlay-pane{max-height:96%!important;overflow-y:auto!important}.certificate-banner-image svg{width:500;height:500}@media only screen and (max-width: 1279px){.certificate-banner-image svg{width:auto;height:auto;flex:1}}.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.close-button{position:absolute!important;top:19px!important;right:18px!important}@media screen and (max-width: 1200px){.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 8px;border-radius:4px;overflow:visible}.gap-4{grid-gap:0rem;gap:0rem}}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$1.EventService }, { type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_LEGACY_DIALOG_DATA]
@@ -3365,6 +3465,7 @@ class CertificateDialogModule {
             ReactiveFormsModule,
             MatLegacyButtonModule,
             MatLegacyCardModule,
+            MatDividerModule,
             MatIconModule,
             MatLegacyTooltipModule,
             MatLegacyDialogModule,
@@ -3379,6 +3480,7 @@ class CertificateDialogModule {
             ReactiveFormsModule,
             MatLegacyButtonModule,
             MatLegacyCardModule,
+            MatDividerModule,
             MatIconModule,
             MatLegacyTooltipModule,
             MatLegacyDialogModule,
@@ -3406,6 +3508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ReactiveFormsModule,
                         MatLegacyButtonModule,
                         MatLegacyCardModule,
+                        MatDividerModule,
                         MatIconModule,
                         MatLegacyTooltipModule,
                         MatLegacyDialogModule,
@@ -7026,6 +7129,7 @@ class AppTocContentCardV2Component {
         }
     }
     downloadCertificate(certificateData) {
+        debugger;
         this.events.raiseInteractTelemetry({
             type: WsEvents.EnumInteractTypes.CLICK,
             id: 'view-certificate',
@@ -7036,13 +7140,13 @@ class AppTocContentCardV2Component {
         });
         if (certificateData) {
             this.downloadCertificateLoading = true;
-            let certData = certificateData;
+            let certData = certificateData || certificateData.identifier;
             this.certificateService.downloadCertificate_v3(certData).subscribe((res) => {
                 this.downloadCertificateLoading = false;
                 const cet = res.result.printUri;
                 this.dialog.open(CertificateDialogComponent, {
                     width: '1300px',
-                    data: { cet, certId: certData.identifier },
+                    data: { cet, certId: certData },
                 });
             });
         }
@@ -7317,6 +7421,7 @@ class AppTocContentCardV2Component {
      * View milestone achievement - calls the achievement API and shows the result
      */
     viewMilestoneAchievement(event, mileStoneData) {
+        debugger;
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -10822,7 +10927,7 @@ class MarkAsCompleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarkAsCompleteComponent, deps: [{ token: i1$3.MatLegacyDialog }, { token: WidgetContentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MarkAsCompleteComponent, selector: "ws-widget-mark-as-complete", inputs: { content: "content", forPreview: "forPreview" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content?.progress?.progressSupported && showStart.show\">\n  <mat-card class=\"mb-4 block\">\n    <h2 class=\"margin-remove-bottom\"><span >Learning Progress </span>\n      <a i18n-aria-label aria-label=\"Learning Progress FAQ\" [routerLink]=\"'/app/info/faq'\"\n        [queryParams]=\"{tab: 'mark_as_complete'}\">\n        <mat-icon class=\"align-text-top ws-mat-primary-text\">help</mat-icon>\n      </a>\n    </h2>\n    <h3><span >Status: </span>\n      <ng-container *ngIf=\"content?.progress?.progressStatus; let status\">\n        <span *ngIf=\"status === 'open'\">Open</span>\n        <span *ngIf=\"status === 'started'\">Started</span>\n        <span *ngIf=\"status === 'completed'\">Completed</span>\n      </ng-container>\n    </h3>\n    <ng-container *ngIf=\"content?.progress?.markAsCompleteReason !== 'not.supported'\">\n      <mat-divider></mat-divider>\n      <!-- <ng-container *ngIf=\"content?.progress?.showMarkAsComplete\">\n        <h4 class=\"pt-3\">I confirm that I have gone through this content and want to mark it as complete.</h4>\n        <div class=\"flex justify-center\">\n          <button mat-raised-button color=\"primary\" (click)=\"confirm()\">Mark as Complete</button>\n        </div>\n      </ng-container> -->\n      <ng-container *ngIf=\"!content?.progress?.showMarkAsComplete\">\n        <h4 class=\"pt-3\" *ngIf=\"content?.progress?.markAsCompleteReason; let msg\">\n          <span *ngIf=\"msg === 'pass.required'\">Content will be marked as complete once you pass this\n            assessment.</span>\n          <span *ngIf=\"msg === 'submission.required'\">Content will be marked as complete once you submit this\n            quiz/exercise.</span>\n          <span i18n\n            *ngIf=\"msg === 'external.vendor.provided' && content?.progress?.progressStatus !== 'completed'\">Your\n            learning progress for this content is captured externally and will be updated in this portal once it is\n            received.</span>\n          <span i18n\n            *ngIf=\"msg === 'external.vendor.provided' && content?.progress?.progressStatus === 'completed'\">Your\n            progress was automatically captured from its source.</span>\n          <span *ngIf=\"msg === 'has.children'\">This content is hierarchical. Progress will be calculated on the\n            basis\n            of children resources</span>\n          <span *ngIf=\"msg === 'already.completed'\">Completed</span>\n          <span *ngIf=\"msg === 'instructor.led'\">Progress will be calculated based on your classroom\n            attendance.</span>\n        </h4>\n      </ng-container>\n    </ng-container>\n  </mat-card>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MarkAsCompleteComponent, selector: "ws-widget-mark-as-complete", inputs: { content: "content", forPreview: "forPreview" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content?.progress?.progressSupported && showStart.show\">\n  <mat-card class=\"mb-4 block\">\n    <h2 class=\"margin-remove-bottom\"><span >Learning Progress </span>\n      <a i18n-aria-label aria-label=\"Learning Progress FAQ\" [routerLink]=\"'/app/info/faq'\"\n        [queryParams]=\"{tab: 'mark_as_complete'}\">\n        <mat-icon class=\"align-text-top ws-mat-primary-text\">help</mat-icon>\n      </a>\n    </h2>\n    <h3><span >Status: </span>\n      <ng-container *ngIf=\"content?.progress?.progressStatus; let status\">\n        <span *ngIf=\"status === 'open'\">Open</span>\n        <span *ngIf=\"status === 'started'\">Started</span>\n        <span *ngIf=\"status === 'completed'\">Completed</span>\n      </ng-container>\n    </h3>\n    <ng-container *ngIf=\"content?.progress?.markAsCompleteReason !== 'not.supported'\">\n      <mat-divider></mat-divider>\n      <!-- <ng-container *ngIf=\"content?.progress?.showMarkAsComplete\">\n        <h4 class=\"pt-3\">I confirm that I have gone through this content and want to mark it as complete.</h4>\n        <div class=\"flex justify-center\">\n          <button mat-raised-button color=\"primary\" (click)=\"confirm()\">Mark as Complete</button>\n        </div>\n      </ng-container> -->\n      <ng-container *ngIf=\"!content?.progress?.showMarkAsComplete\">\n        <h4 class=\"pt-3\" *ngIf=\"content?.progress?.markAsCompleteReason; let msg\">\n          <span *ngIf=\"msg === 'pass.required'\">Content will be marked as complete once you pass this\n            assessment.</span>\n          <span *ngIf=\"msg === 'submission.required'\">Content will be marked as complete once you submit this\n            quiz/exercise.</span>\n          <span i18n\n            *ngIf=\"msg === 'external.vendor.provided' && content?.progress?.progressStatus !== 'completed'\">Your\n            learning progress for this content is captured externally and will be updated in this portal once it is\n            received.</span>\n          <span i18n\n            *ngIf=\"msg === 'external.vendor.provided' && content?.progress?.progressStatus === 'completed'\">Your\n            progress was automatically captured from its source.</span>\n          <span *ngIf=\"msg === 'has.children'\">This content is hierarchical. Progress will be calculated on the\n            basis\n            of children resources</span>\n          <span *ngIf=\"msg === 'already.completed'\">Completed</span>\n          <span *ngIf=\"msg === 'instructor.led'\">Progress will be calculated based on your classroom\n            attendance.</span>\n        </h4>\n      </ng-container>\n    </ng-container>\n  </mat-card>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarkAsCompleteComponent, decorators: [{
             type: Component,
@@ -10985,7 +11090,7 @@ class PlayerBriefComponent {
         return this.langtranslations.translateLabel(label, type, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlayerBriefComponent, deps: [{ token: i2$1.ConfigurationsService }, { token: i2$1.UtilityService }, { token: i1$1.Router }, { token: WidgetContentService }, { token: i2$1.MultilingualTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PlayerBriefComponent, selector: "ws-widget-player-brief", inputs: { content: "content", hasTocStructure: "hasTocStructure", tocStructure: "tocStructure", isPreviewMode: "isPreviewMode", forPreview: "forPreview", askAuthorEnabled: "askAuthorEnabled" }, ngImport: i0, template: "<div class=\"md:px-2\">\n  <ws-widget-mark-as-complete [forPreview]=\"forPreview\" [content]=\"content\"></ws-widget-mark-as-complete>\n  <ng-container *ngIf=\"content && isDownloadable\">\n    <mat-card class=\"mb-4\">\n      <button mat-button color=\"primary\" (click)=\"download()\">\n        <mat-icon>cloud_download</mat-icon>\n        <span class=\"px-2\">{{ 'apptochome.download' | translate }}</span>\n      </button>\n    </mat-card>\n  </ng-container>\n  <mat-card class=\"ws-mat-primary-lite-background-on-day ws-mat-primary-border-top-bolder info-container\">\n    <h2 >{{ 'apptochome.atGlance' | translate }}</h2>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.displayContentType?.enabled && content?.displayContentType\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.displayContentType?.displayName, 'apptoc') }}</h3>\n      <ws-widget-display-content-type *ngIf=\"content?.contentType !== contentTypes.RESOURCE\"\n        class=\"ws-mat-accent-text width-expand mat-body-strong\" [displayContentType]=\"content?.displayContentType\">\n      </ws-widget-display-content-type>\n      <div *ngIf=\"content?.contentType === contentTypes.RESOURCE\"\n        class=\"ws-mat-accent-text width-expand mat-body-strong\">\n        {{ content?.resourceType }}\n      </div>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.displayContentType?.enabled && content?.displayContentType\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.complexityLevel?.enabled && content?.complexityLevel\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.complexityLevel?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.complexityLevel }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.complexityLevel?.enabled && content?.complexityLevel\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.duration?.enabled && content?.duration\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.duration?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.duration | pipeDurationTransform: 'hms' }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.duration?.enabled && content?.duration\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.cost?.enabled\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.cost?.displayName, 'apptoc') }}</h3>\n      <h3 *ngIf=\"content?.exclusiveContent\" class=\"ws-mat-accent-text width-expand\">{{'apptochome.paidContent' | translate}}</h3>\n      <h3 *ngIf=\"!content?.exclusiveContent\" class=\"ws-mat-accent-text width-expand\">{{'apptochome.free' | translate}}</h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.cost?.enabled\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.viewCount?.enabled && content?.viewCount && configSvc?.rootOrg\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.viewCount?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ getViewCount(content) | pipeCountTransform }}\n        <ng-container *ngIf=\"content?.uniqueLearners\">\n          ({{ content?.uniqueLearners | pipeCountTransform }}\n          <ng-container >Unique)</ng-container>\n        </ng-container>\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.viewCount?.enabled && content?.viewCount && configSvc?.rootOrg\">\n    </mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.sourceShortName?.enabled && content?.sourceShortName\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.sourceShortName?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.sourceShortName }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.sourceShortName?.enabled && content?.sourceShortName\"></mat-divider>\n    <!-- Structure -->\n    <div class=\"info-item\"\n      *ngIf=\"tocConfig?.atAGlance?.structure?.enabled && hasTocStructure && content?.children?.length\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.structure?.displayName, 'apptoc') }}</h3>\n      <div class=\"ws-mat-accent-text width-expand\">\n        <h3 *ngIf=\"tocStructure?.course > 0\">\n          <ng-container>{{ tocStructure?.course }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.course === 1\" > {{'apptochome.course1' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.course > 1\" > {{'apptochome.courses1' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.learningModule > 0\">\n          <ng-container>{{ tocStructure?.learningModule }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.learningModule === 1\" > {{'apptochome.module' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.learningModule > 1\" > {{'apptochome.modules' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.video > 0\">\n          <ng-container>{{ tocStructure?.video }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.video === 1\" > {{'apptochome.video' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.video > 1\" > {{'apptochome.videos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.interactiveVideo > 0\">\n          <ng-container>{{ tocStructure?.interactiveVideo }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.interactiveVideo === 1\" >\n            {{'playerbrief.interactiveVideo' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.interactiveVideo > 1\" >\n            {{'playerbrief.interactiveVideos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.youtube > 0\">\n          <ng-container>{{ tocStructure?.youtube }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.youtube === 1\" > {{'playerbrief.youtubeVideo' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.youtube > 1\" > {{'playerbrief.youtubeVideos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.pdf > 0\">\n          <ng-container>{{ tocStructure?.pdf }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.pdf === 1\" > {{'apptochome.pdf' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.pdf > 1\" > {{'apptochome.pdfs' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.podcast > 0\">\n          <ng-container>{{ tocStructure?.podcast }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.podcast === 1\" > {{'playerbrief.podcast' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.podcast > 1\" > {{'playerbrief.podcasts' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.webModule > 0\">\n          <ng-container>{{ tocStructure?.webModule }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webModule === 1\" > {{'playerbrief.webModule' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webModule > 1\" > {{'playerbrief.webModules' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.webPage > 0\">\n          <ng-container>{{ tocStructure?.webPage }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webPage === 1\" > {{'apptochome.webPage' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webPage > 1\" > {{'apptochome.webPages' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.quiz > 0\">\n          <ng-container>{{ tocStructure?.quiz }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.quiz === 1\" > {{'playerbrief.quiz' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.quiz > 1\" > {{'playerbrief.quizzes' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.assessment > 0\">\n          <ng-container>{{ tocStructure?.assessment }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.assessment === 1\" > {{'apptochome.assessment' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.assessment > 1\" > {{'apptochome.assessments' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.other > 0\">\n          <ng-container>{{ tocStructure?.other }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.other === 1\" > {{'apptochome.otherItem' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.other > 1\" > {{'apptochome.otherItems' | translate}}</ng-container>\n        </h3>\n      </div>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.structure?.enabled && hasTocStructure && content?.children?.length\">\n    </mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.lastUpdatedOn?.enabled && content?.lastUpdatedOn\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.lastUpdatedOn?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.lastUpdatedOn | date }}\n      </h3>\n    </div>\n    <ng-container *ngIf=\"showMoreGlance\">\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.lastUpdatedOn?.enabled && content?.lastUpdatedOn\"></mat-divider>\n      <div class=\"info-item\"\n        *ngIf=\"tocConfig?.atAGlance?.expiryDate?.enabled && content?.expiryDate && content?.expiryDate?.startsWith('20')\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.expiryDate?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.expiryDate | date }}\n        </h3>\n      </div>\n      <mat-divider\n        *ngIf=\"tocConfig?.atAGlance?.expiryDate?.enabled && content?.expiryDate && content?.expiryDate?.startsWith('20')\">\n      </mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.learningMode?.enabled && content?.learningMode\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.learningMode?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.learningMode }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.learningMode?.enabled && content?.learningMode\"></mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.region?.enabled && content?.region?.length\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.region?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.region }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.region?.enabled && content?.region?.length\"></mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.locale?.enabled && content?.locale\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.locale?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.locale | uppercase }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.locale?.enabled && content?.locale\"></mat-divider>\n      <div class=\"info-item\"\n        *ngIf=\"tocConfig?.atAGlance?.hasTranslations?.enabled && (content?.hasTranslations?.length || content?.isTranslationOf?.length)\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.hasTranslations?.displayName}}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          <span class=\"cursor-pointer\" (click)=\"goToContent(trans?.identifier)\"\n            *ngFor=\"let trans of content?.hasTranslations || content?.isTranslationOf\">{{ trans.locale | uppercase }}\n          </span>\n        </h3>\n      </div>\n      <mat-divider\n        *ngIf=\"tocConfig?.atAGlance?.hasTranslations?.enabled && (content?.hasTranslations?.length || content?.isTranslationOf?.length)\">\n      </mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.keywords?.enabled && content?.keywords?.length\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.keywords?.displayName}}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.keywords?.join(', ') }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.keywords?.enabled && content?.keywords?.length\"></mat-divider>\n      <ng-container *ngFor=\"let item of content?.collections\">\n        <div class=\"info-item\"\n          *ngIf=\"tocConfig?.atAGlance?.curatedInKB?.enabled && item.contentType === 'Knowledge Board' && item.status === 'Live'\">\n          <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.curatedInKB?.displayName}}</h3>\n          <mat-chip-list>\n            <mat-chip>\n              <h3 class=\"ws-mat-accent-text width-expand\">\n                <ng-container *ngIf=\"item.contentType === 'Knowledge Board' && item.status === 'Live'\">\n                  <a [href]=\"'/app/toc/' + item.identifier + '/overview?primaryCategory='+ item.primaryCategory \"> {{\n                    item.name }} </a>\n                </ng-container>\n              </h3>\n            </mat-chip>\n          </mat-chip-list>\n        </div>\n      </ng-container>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <div class=\"text-right mt-2\">\n      <button mat-button (click)=\"showMoreGlance = !showMoreGlance\">\n        <mat-icon>{{ !showMoreGlance ? 'arrow_drop_down' : 'arrow_drop_up' }}</mat-icon>\n        <ng-container *ngIf=\"!showMoreGlance\">{{'playerbrief.showMore' | translate}}</ng-container>\n        <ng-container *ngIf=\"showMoreGlance\">{{'playerbrief.showLess' | translate}}</ng-container>\n      </button>\n    </div>\n  </mat-card>\n  <!-- <ws-widget-user-content-rating class=\"mb-4 block\" *ngIf=\"content?.identifier\" [contentId]=\"content?.identifier\"\n    [isDisabled]=\"isPreviewMode\" [forPreview]=\"forPreview\">\n  </ws-widget-user-content-rating> -->\n  <div class=\"hidden sm:block margin-bottom-m\" *ngIf=\"content?.creatorDetails?.length\">\n    <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n        authors: content?.creatorDetails,\n        title: 'AUTHOR'\n      }\">\n    </ng-container>\n  </div>\n  <div class=\"hidden sm:block margin-bottom-m\" *ngIf=\"content?.creatorContacts?.length\">\n    <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n        authors: content?.creatorContacts,\n        title: 'CONTACT'\n      }\">\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #creators let-authors=\"authors\" let-title=\"title\">\n  <mat-card>\n    <h2 *ngIf=\"title === 'AUTHOR'\">{{'playerbrief.authors' | translate}}</h2>\n    <h2 *ngIf=\"title === 'CONTACT'\">{{'playerbrief.curatorcontact' | translate}}</h2>\n    <mat-divider></mat-divider>\n    <div *ngFor=\"let author of parseJsonData(authors)\" class=\"author\">\n      <ws-widget-user-image class=\"author-image\" [imageType]=\"'name-initial'\" [userName]=\"author.name || ''\"\n        [email]=\"author.email\"></ws-widget-user-image>\n      <div class=\"width-expand flex flex-middle flex-between\">\n        <h3 class=\"margin-remove\">{{ author.name }}</h3>\n        <ws-widget-btn-mail-user *ngIf=\"askAuthorEnabled\" [widgetData]=\"{ content: content, emails: [author.email] }\">\n        </ws-widget-btn-mail-user>\n      </div>\n    </div>\n  </mat-card>\n</ng-template>", styles: [".info-container{padding:12px 16px;margin-bottom:16px}.info-container .info-item{display:flex;align-items:center;padding:8px 0;box-sizing:border-box}.info-container .info-item h3{margin:0}.info-container .info-item .item-heading{width:40%;min-width:80px;max-width:140px}.info-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.author{padding:12px 0;display:flex}.author .author-image{margin-right:12px;height:44px;width:44px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DisplayContentTypeComponent, selector: "ws-widget-display-content-type", inputs: ["displayContentType"] }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: UserImageComponent, selector: "ws-widget-user-image", inputs: ["email", "userId", "userName", "imageType", "imageUrl", "imageSize"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MarkAsCompleteComponent, selector: "ws-widget-mark-as-complete", inputs: ["content", "forPreview"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { 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: PlayerBriefComponent, selector: "ws-widget-player-brief", inputs: { content: "content", hasTocStructure: "hasTocStructure", tocStructure: "tocStructure", isPreviewMode: "isPreviewMode", forPreview: "forPreview", askAuthorEnabled: "askAuthorEnabled" }, ngImport: i0, template: "<div class=\"md:px-2\">\n  <ws-widget-mark-as-complete [forPreview]=\"forPreview\" [content]=\"content\"></ws-widget-mark-as-complete>\n  <ng-container *ngIf=\"content && isDownloadable\">\n    <mat-card class=\"mb-4\">\n      <button mat-button color=\"primary\" (click)=\"download()\">\n        <mat-icon>cloud_download</mat-icon>\n        <span class=\"px-2\">{{ 'apptochome.download' | translate }}</span>\n      </button>\n    </mat-card>\n  </ng-container>\n  <mat-card class=\"ws-mat-primary-lite-background-on-day ws-mat-primary-border-top-bolder info-container\">\n    <h2 >{{ 'apptochome.atGlance' | translate }}</h2>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.displayContentType?.enabled && content?.displayContentType\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.displayContentType?.displayName, 'apptoc') }}</h3>\n      <ws-widget-display-content-type *ngIf=\"content?.contentType !== contentTypes.RESOURCE\"\n        class=\"ws-mat-accent-text width-expand mat-body-strong\" [displayContentType]=\"content?.displayContentType\">\n      </ws-widget-display-content-type>\n      <div *ngIf=\"content?.contentType === contentTypes.RESOURCE\"\n        class=\"ws-mat-accent-text width-expand mat-body-strong\">\n        {{ content?.resourceType }}\n      </div>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.displayContentType?.enabled && content?.displayContentType\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.complexityLevel?.enabled && content?.complexityLevel\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.complexityLevel?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.complexityLevel }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.complexityLevel?.enabled && content?.complexityLevel\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.duration?.enabled && content?.duration\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.duration?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.duration | pipeDurationTransform: 'hms' }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.duration?.enabled && content?.duration\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.cost?.enabled\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.cost?.displayName, 'apptoc') }}</h3>\n      <h3 *ngIf=\"content?.exclusiveContent\" class=\"ws-mat-accent-text width-expand\">{{'apptochome.paidContent' | translate}}</h3>\n      <h3 *ngIf=\"!content?.exclusiveContent\" class=\"ws-mat-accent-text width-expand\">{{'apptochome.free' | translate}}</h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.cost?.enabled\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.viewCount?.enabled && content?.viewCount && configSvc?.rootOrg\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.viewCount?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ getViewCount(content) | pipeCountTransform }}\n        <ng-container *ngIf=\"content?.uniqueLearners\">\n          ({{ content?.uniqueLearners | pipeCountTransform }}\n          <ng-container >Unique)</ng-container>\n        </ng-container>\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.viewCount?.enabled && content?.viewCount && configSvc?.rootOrg\">\n    </mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.sourceShortName?.enabled && content?.sourceShortName\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.sourceShortName?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.sourceShortName }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.sourceShortName?.enabled && content?.sourceShortName\"></mat-divider>\n    <!-- Structure -->\n    <div class=\"info-item\"\n      *ngIf=\"tocConfig?.atAGlance?.structure?.enabled && hasTocStructure && content?.children?.length\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.structure?.displayName, 'apptoc') }}</h3>\n      <div class=\"ws-mat-accent-text width-expand\">\n        <h3 *ngIf=\"tocStructure?.course > 0\">\n          <ng-container>{{ tocStructure?.course }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.course === 1\" > {{'apptochome.course1' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.course > 1\" > {{'apptochome.courses1' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.learningModule > 0\">\n          <ng-container>{{ tocStructure?.learningModule }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.learningModule === 1\" > {{'apptochome.module' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.learningModule > 1\" > {{'apptochome.modules' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.video > 0\">\n          <ng-container>{{ tocStructure?.video }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.video === 1\" > {{'apptochome.video' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.video > 1\" > {{'apptochome.videos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.interactiveVideo > 0\">\n          <ng-container>{{ tocStructure?.interactiveVideo }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.interactiveVideo === 1\" >\n            {{'playerbrief.interactiveVideo' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.interactiveVideo > 1\" >\n            {{'playerbrief.interactiveVideos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.youtube > 0\">\n          <ng-container>{{ tocStructure?.youtube }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.youtube === 1\" > {{'playerbrief.youtubeVideo' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.youtube > 1\" > {{'playerbrief.youtubeVideos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.pdf > 0\">\n          <ng-container>{{ tocStructure?.pdf }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.pdf === 1\" > {{'apptochome.pdf' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.pdf > 1\" > {{'apptochome.pdfs' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.podcast > 0\">\n          <ng-container>{{ tocStructure?.podcast }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.podcast === 1\" > {{'playerbrief.podcast' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.podcast > 1\" > {{'playerbrief.podcasts' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.webModule > 0\">\n          <ng-container>{{ tocStructure?.webModule }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webModule === 1\" > {{'playerbrief.webModule' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webModule > 1\" > {{'playerbrief.webModules' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.webPage > 0\">\n          <ng-container>{{ tocStructure?.webPage }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webPage === 1\" > {{'apptochome.webPage' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webPage > 1\" > {{'apptochome.webPages' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.quiz > 0\">\n          <ng-container>{{ tocStructure?.quiz }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.quiz === 1\" > {{'playerbrief.quiz' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.quiz > 1\" > {{'playerbrief.quizzes' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.assessment > 0\">\n          <ng-container>{{ tocStructure?.assessment }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.assessment === 1\" > {{'apptochome.assessment' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.assessment > 1\" > {{'apptochome.assessments' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.other > 0\">\n          <ng-container>{{ tocStructure?.other }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.other === 1\" > {{'apptochome.otherItem' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.other > 1\" > {{'apptochome.otherItems' | translate}}</ng-container>\n        </h3>\n      </div>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.structure?.enabled && hasTocStructure && content?.children?.length\">\n    </mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.lastUpdatedOn?.enabled && content?.lastUpdatedOn\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.lastUpdatedOn?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.lastUpdatedOn | date }}\n      </h3>\n    </div>\n    <ng-container *ngIf=\"showMoreGlance\">\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.lastUpdatedOn?.enabled && content?.lastUpdatedOn\"></mat-divider>\n      <div class=\"info-item\"\n        *ngIf=\"tocConfig?.atAGlance?.expiryDate?.enabled && content?.expiryDate && content?.expiryDate?.startsWith('20')\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.expiryDate?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.expiryDate | date }}\n        </h3>\n      </div>\n      <mat-divider\n        *ngIf=\"tocConfig?.atAGlance?.expiryDate?.enabled && content?.expiryDate && content?.expiryDate?.startsWith('20')\">\n      </mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.learningMode?.enabled && content?.learningMode\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.learningMode?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.learningMode }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.learningMode?.enabled && content?.learningMode\"></mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.region?.enabled && content?.region?.length\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.region?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.region }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.region?.enabled && content?.region?.length\"></mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.locale?.enabled && content?.locale\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.locale?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.locale | uppercase }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.locale?.enabled && content?.locale\"></mat-divider>\n      <div class=\"info-item\"\n        *ngIf=\"tocConfig?.atAGlance?.hasTranslations?.enabled && (content?.hasTranslations?.length || content?.isTranslationOf?.length)\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.hasTranslations?.displayName}}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          <span class=\"cursor-pointer\" (click)=\"goToContent(trans?.identifier)\"\n            *ngFor=\"let trans of content?.hasTranslations || content?.isTranslationOf\">{{ trans.locale | uppercase }}\n          </span>\n        </h3>\n      </div>\n      <mat-divider\n        *ngIf=\"tocConfig?.atAGlance?.hasTranslations?.enabled && (content?.hasTranslations?.length || content?.isTranslationOf?.length)\">\n      </mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.keywords?.enabled && content?.keywords?.length\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.keywords?.displayName}}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.keywords?.join(', ') }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.keywords?.enabled && content?.keywords?.length\"></mat-divider>\n      <ng-container *ngFor=\"let item of content?.collections\">\n        <div class=\"info-item\"\n          *ngIf=\"tocConfig?.atAGlance?.curatedInKB?.enabled && item.contentType === 'Knowledge Board' && item.status === 'Live'\">\n          <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.curatedInKB?.displayName}}</h3>\n          <mat-chip-list>\n            <mat-chip>\n              <h3 class=\"ws-mat-accent-text width-expand\">\n                <ng-container *ngIf=\"item.contentType === 'Knowledge Board' && item.status === 'Live'\">\n                  <a [href]=\"'/app/toc/' + item.identifier + '/overview?primaryCategory='+ item.primaryCategory \"> {{\n                    item.name }} </a>\n                </ng-container>\n              </h3>\n            </mat-chip>\n          </mat-chip-list>\n        </div>\n      </ng-container>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <div class=\"text-right mt-2\">\n      <button mat-button (click)=\"showMoreGlance = !showMoreGlance\">\n        <mat-icon>{{ !showMoreGlance ? 'arrow_drop_down' : 'arrow_drop_up' }}</mat-icon>\n        <ng-container *ngIf=\"!showMoreGlance\">{{'playerbrief.showMore' | translate}}</ng-container>\n        <ng-container *ngIf=\"showMoreGlance\">{{'playerbrief.showLess' | translate}}</ng-container>\n      </button>\n    </div>\n  </mat-card>\n  <!-- <ws-widget-user-content-rating class=\"mb-4 block\" *ngIf=\"content?.identifier\" [contentId]=\"content?.identifier\"\n    [isDisabled]=\"isPreviewMode\" [forPreview]=\"forPreview\">\n  </ws-widget-user-content-rating> -->\n  <div class=\"hidden sm:block margin-bottom-m\" *ngIf=\"content?.creatorDetails?.length\">\n    <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n        authors: content?.creatorDetails,\n        title: 'AUTHOR'\n      }\">\n    </ng-container>\n  </div>\n  <div class=\"hidden sm:block margin-bottom-m\" *ngIf=\"content?.creatorContacts?.length\">\n    <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n        authors: content?.creatorContacts,\n        title: 'CONTACT'\n      }\">\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #creators let-authors=\"authors\" let-title=\"title\">\n  <mat-card>\n    <h2 *ngIf=\"title === 'AUTHOR'\">{{'playerbrief.authors' | translate}}</h2>\n    <h2 *ngIf=\"title === 'CONTACT'\">{{'playerbrief.curatorcontact' | translate}}</h2>\n    <mat-divider></mat-divider>\n    <div *ngFor=\"let author of parseJsonData(authors)\" class=\"author\">\n      <ws-widget-user-image class=\"author-image\" [imageType]=\"'name-initial'\" [userName]=\"author.name || ''\"\n        [email]=\"author.email\"></ws-widget-user-image>\n      <div class=\"width-expand flex flex-middle flex-between\">\n        <h3 class=\"margin-remove\">{{ author.name }}</h3>\n        <ws-widget-btn-mail-user *ngIf=\"askAuthorEnabled\" [widgetData]=\"{ content: content, emails: [author.email] }\">\n        </ws-widget-btn-mail-user>\n      </div>\n    </div>\n  </mat-card>\n</ng-template>", styles: [".info-container{padding:12px 16px;margin-bottom:16px}.info-container .info-item{display:flex;align-items:center;padding:8px 0;box-sizing:border-box}.info-container .info-item h3{margin:0}.info-container .info-item .item-heading{width:40%;min-width:80px;max-width:140px}.info-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.author{padding:12px 0;display:flex}.author .author-image{margin-right:12px;height:44px;width:44px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DisplayContentTypeComponent, selector: "ws-widget-display-content-type", inputs: ["displayContentType"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: UserImageComponent, selector: "ws-widget-user-image", inputs: ["email", "userId", "userName", "imageType", "imageUrl", "imageSize"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MarkAsCompleteComponent, selector: "ws-widget-mark-as-complete", inputs: ["content", "forPreview"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlayerBriefComponent, decorators: [{
             type: Component,
@@ -19541,7 +19646,7 @@ class AppTocBannerComponent {
         return this.langtranslations.translateLabel(label, type, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBannerComponent, deps: [{ token: i1$5.DomSanitizer }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i1$3.MatLegacyDialog }, { token: AppTocService }, { token: WidgetContentService }, { token: i2$1.UtilityService }, { token: MobileAppsService }, { token: i7.MatLegacySnackBar }, { token: i2$1.ConfigurationsService }, { token: TitleTagService }, { token: ActionService }, { token: i2$1.LoggerService }, { token: i2.DatePipe }, { token: i1$2.TranslateService }, { token: UserAutocompleteService }, { token: i2$1.EventService }, { token: i2$1.MultilingualTranslationsService }, { token: TimerService }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: { banners: "banners", content: "content", resumeData: "resumeData", analytics: "analytics", forPreview: "forPreview", batchData: "batchData", userEnrollmentList: "userEnrollmentList", contentReadData: "contentReadData", clickToShare: "clickToShare" }, outputs: { withdrawOrEnroll: "withdrawOrEnroll", programEnrollCall: "programEnrollCall" }, providers: [AccessControlService, DatePipe], viewQueries: [{ propertyName: "userInput", first: true, predicate: ["userInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header-synopsis fixed-width margin-top-xl\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\"\n  *ngIf=\"show\">\n  <div class=\"flex flex-row\">\n    <div class=\"flex-auto\">\n      <div class=\"header-title flex-col sm:flex-row\">\n        <!-- image -->\n        <div *ngIf=\"content?.posterImage\" class=\"float-left\">\n          <img [src]=\"content?.posterImage | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n            [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n        </div>\n        <div *ngIf=\"!content?.posterImage\" class=\"float-left\">\n          <ng-container *ngIf=\"content?.appIcon; else defaultImg\">\n            <img [src]=\"content?.appIcon | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n              [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n          </ng-container>\n          <ng-template #defaultImg>\n            <img src=\"/assets/instances/eagle/app_logos/default.png\" [id]=\"'source_' + content.identifier\"\n              class=\"app-icon\" [alt]=\"content.sourceName || iGOT\" />\n          </ng-template>\n        </div>\n        <div class=\"sm:ml-5 flex flex-auto\" [id]=\"'m-c-'+ content.identifier\">\n          <div class=\"sm:ml-5 flex flex-col flex-auto\">\n            <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs hidden sm:block\"\n              [title]=\"contentReadData?.name\">\n              {{ contentReadData?.name }}\n              <div class=\"float-right cursor-pointer flex\" (click)=\"onClickOfShare()\" *ngIf=\"canShare\">\n                <mat-icon class=\"ws-mat-accent-text padding-top-xs\">share</mat-icon>\n              </div>\n            </h1>\n            <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs block sm:hidden\"\n              [title]=\"contentReadData?.name\">\n              {{ contentReadData?.name }}\n            </h1>\n            <span *ngIf=\"contentProgress === 1\" class=\"margin-left-s\">\n              <mat-icon class=\"ws-mat-accent-text\">check_circle</mat-icon>\n            </span>\n            <div *ngIf=\"content?.primaryCategory\" class=\"apIcon float-left mb-4\">\n              <img src=\"/assets/icons/content/course.svg\" [id]=\"'source_' + content.identifier\" class=\"source-icon\"\n                [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n              <span>{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</span>\n            </div>\n            <div *ngIf=\"content?.appIcon\" class=\"apIcon float-left mb-4\">\n              <img [src]=\"content?.creatorLogo | pipePublicURL\" [id]=\"'source_' + content.identifier\"\n                class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n            </div>\n            <div [ngSwitch]=\"routePath\" class=\"header-meta\" [ngClass]=\"{ 'header-meta-banner': bannerUrl }\">\n              <!-- Overview Section -->\n              <div class=\"banner-overview-container\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n                *ngSwitchCase=\"'overview'\">\n                <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n                  {{ content?.source | pipeLimitTo: 250 }}\n                </h3>\n                <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n                  {{ content?.instructions | pipeLimitTo: 450 }}\n                </p>\n                <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n                  [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n                  <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n                </div>\n              </div>\n              <!-- Toc Section -->\n              <div *ngSwitchCase=\"'contents'\">\n                <!-- Contents Banner -->\n              </div>\n              <!-- Analytics Section -->\n              <div class=\"banner-overview-container mat-body-1\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n                *ngSwitchCase=\"'analytics'\">\n                <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n                  {{ content?.purpose | pipeLimitTo: 250 }}\n                </h3>\n                <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n                  {{ content?.instructions | pipeLimitTo: 450 }}\n                </p>\n                <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n                  [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n                  <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n              <span class=\"rating-number mat-body-2\">{{ content?.averageRating }}&nbsp;</span>\n              <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                {{ getRatingIcon(rating) }}</mat-icon>\n              <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"content?.totalRating\">\n                ( {{ content?.totalRating | pipeCountTransform }} )</span>\n            </div>\n            <div *ngIf=\"!content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n              <span class=\"rating-number mat-body-2\"> 0.0 &nbsp;</span>\n              <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                {{ getRatingIcon(rating) }}</mat-icon>\n              <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"!content?.totalRating\">\n                ( {{ 0 | pipeCountTransform }} )</span>\n            </div>\n            <!-- tags -->\n            <div class=\"tags margin-bottom-s\" *ngIf=\"content?.keywords && content?.keywords?.length > 0\">\n              <span *ngFor=\"let tag of content.keywords\" class=\"tag\">\n                {{tag}}\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n  <div class=\"batch-div\">\n    <div class=\"request-block\">\n      <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n      <ng-container\n        *ngIf=\"batchData && !batchData?.enrolled  && batchData?.workFlow?.wfInitiated &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REJECTED) && (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REMOVED) &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.WITHDRAWN) &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.APPROVED) && batchData?.content?.length\">\n        <p class=\"margin-remove-bottom mat-body-1 padding-m bg-white\">\n          {{batchData?.workFlow?.batch?.name}} - ({{batchData?.workFlow?.batch?.startDate | date: 'dd-MM-yyyy'}} -\n          {{batchData?.workFlow?.batch?.endDate | date: 'dd-MM-yyyy' || 'present'}})\n        </p>\n        <ng-container>\n          <button class=\"withdraw-batch\" (click)=\"!disableWithdrawnBtn && requestToWithdrawDialog()\"\n            [disabled]=\"disableWithdrawnBtn\" [ngClass]=\"{ 'disable-btn': disableWithdrawnBtn }\">\n            <ng-container> {{ 'apptocbanner.withDrawYourRequest' | translate }} </ng-container>\n          </button>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"batchData && batchData?.enrolled && batchData?.content?.length\">\n        <h3 class=\"margin-remove-bottom p-4 bg-white mat-body-1\" *ngFor=\"let batch of batchData.content\">\n          {{batch?.name}} ({{batch?.startDate | date: 'dd-MM-yyyy' }} - {{batch?.endDate | date: 'dd-MM-yyyy' ||\n          'present'}})\n        </h3>\n        <ng-container [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"batchData && !batchData?.enrolled && !batchData?.content?.length\">\n        <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n          No batches\n        </h3>\n      </ng-container>\n    </div>\n    <!-- <ng-container *ngIf=\"batchData && batchData?.content?.length && batchData?.content[0]?.batchAttributes?.batchLocationDetails\">\n      <div class=\"flex items-center location-wrapper\">\n        <div>\n          <mat-icon class=\"location-icon\">\n            location_on</mat-icon>\n        </div>\n        <div class=\"loc-details\">\n            {{batchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n        </div>\n      </div>\n    </ng-container> -->\n  </div>\n  <ng-container *ngIf=\"batchData && !batchData?.enrolled && batchData?.content?.length\"\n    [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"content?.courseCategory === nsContent.ECourseCategory.MODERATED_PROGRAM\">\n  <div class=\"request-batch\">\n    <div class=\"batch-div\">\n      <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n<!-- <div class=\"header-synopsis fixed-width margin-top-l\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\" *ngIf=\"content && batchControl?.value?.batchAttributes?.batchLocationDetails\">\n  <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n    <h2>{{'apptocbanner.batchLocation' | translate}}</h2>\n    <p>{{batchControl?.value?.batchAttributes?.batchLocationDetails}}</p>\n  </ng-container>\n</div> -->\n\n<mat-menu #actionMenu=\"matMenu\">\n  <div mat-menu-item>\n    <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"actions\"></ng-container>\n  </div>\n</mat-menu>\n\n<ng-template #actions>\n  <a i18n-aria-label aria-label=\"Take Action\" mat-icon-button *ngIf=\"reviewButton\"\n    [routerLink]=\"['/author/editor/' + content?.identifier]\">\n    <mat-icon>publish</mat-icon>\n  </a>\n  <ws-widget-btn-content-download id=\"prevfordownload\" [forPreview]=\"forPreview\"\n    [widgetData]=\"content | pipePartialContent : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal', 'artifactUrl']\">\n  </ws-widget-btn-content-download>\n  <ws-widget-btn-content-share id=\"prevforshare\" [forPreview]=\"forPreview\" [widgetData]=\"content\">\n  </ws-widget-btn-content-share>\n  <ws-widget-btn-kb [forPreview]=\"forPreview\" id=\"prev\" [contentId]=\"content?.identifier\"\n    [contentName]=\"contentReadData?.name\" [contentType]=\"content?.contentType\" [status]=\"content?.status\">\n  </ws-widget-btn-kb>\n  <ws-widget-btn-goals [forPreview]=\"forPreview\" id=\"goalsforprev\" *ngIf=\"isGoalsEnabled && btnGoalsConfig\"\n    [widgetData]=\"btnGoalsConfig\">\n  </ws-widget-btn-goals>\n  <ws-widget-btn-playlist [forPreview]=\"forPreview\" id=\"playlistforprev\" *ngIf=\"btnPlaylistConfig\"\n    [widgetData]=\"btnPlaylistConfig\">\n  </ws-widget-btn-playlist>\n  <ws-widget-btn-content-feedback-v2 [forPreview]=\"forPreview\" id=\"feedbackforprev\"\n    [widgetData]=\"content | pipePartialContent: ['identifier', 'name']\">\n  </ws-widget-btn-content-feedback-v2>\n</ng-template>\n<ng-template #authView>{{'apptocbanner.view' | translate}}</ng-template>\n<ng-template #statusMsg>\n  <div class=\"status-container mt-2 mb-2\"\n    *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && batchData?.workFlow?.wfInitiated\">\n    <div class=\"flex\" *ngIf=\"showMsg\">\n      <ng-container *ngIf=\"showIcon\">\n        <mat-icon class=\"mr-4\" [ngClass]=\"iconColor\" *ngIf=\"WFIcon === 'circle'\">check_circle</mat-icon>\n        <mat-icon class=\"mr-4 ws-mat-red-text visibility-show\" style=\"transform: rotate(180deg);\"\n          *ngIf=\"WFIcon === 'info'\">info</mat-icon>\n      </ng-container>\n      <div class=\"mat-body-1\">{{ getWFMsg }}</div>\n    </div>\n  </div>\n  <div class=\"status-container mt-5\"\n    *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && showDisableMsg && !showMsg && findMessage.length > 0\">\n    <div class=\"flex\">\n      <ng-container>\n        <mat-icon class=\"mr-3 ws-mat-red-text\" style=\"transform: rotate(180deg);\">info</mat-icon>\n      </ng-container>\n      <div class=\"mat-body-1\">\n        <p class=\"margin-remove-bottom \">{{findMessage}}</p>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"share-container\" *ngIf=\"enableShare\">\n  <div *ngIf=\"showLoader\" class=\"text-center my-2 loader\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div>\n  <div class=\"cursor-pointer close-share-dialog\"><mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon></div>\n  <div class=\"share-modal\">\n    <div class=\"karmasahayogi-icon\"><img alt=\"karmasahayogi-icon\" src=\"/assets/icons/KarmaSahayogi.svg\"></div>\n    <div class=\"content-div\">\n      <div class=\"triangle-left hidden md:block\"></div>\n      <div class=\"contnet\">\n        <section class=\"w-full flex align-center justify-between \">\n          <div class=\"mb-2\">\n            <h2 class=\"mat-headline margin-remove-bottom ws-mat-black-text\">{{'contentSharing.header' | translate}}</h2>\n          </div>\n        </section>\n        <form [formGroup]=\"shareForm\">\n          <div class=\"mat-body-2\">\n            <div class=\"md-5\">\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-chip-list #chipList aria-label=\"user selection\" appearance=\"outline\">\n                  <mat-chip *ngFor=\"let user of users\" [selectable]=\"selectable\" [removable]=\"removable\"\n                    (removed)=\"remove(user)\">\n                    {{user}}\n                    <mat-icon matChipRemove *ngIf=\"removable\">close</mat-icon>\n                  </mat-chip>\n                  <input tabindex=\"-1\" class=\"inputTextBox\"\n                    placeholder=\"{{users.length === 0 ? translateLabels('placehoderText', 'contentSharing') : ''}}\"\n                    #userInput formControlName=\"review\" [formControl]=\"userCtrl\" [matAutocomplete]=\"auto\"\n                    [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    [matChipInputAddOnBlur]=\"addOnBlur\" (matChipInputTokenEnd)=\"add($event)\">\n                </mat-chip-list>\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n                  <mat-option *ngFor=\"let user of filteredUsers\" [value]=\"user.name\">\n                    <div class=\"flex\">\n                      <div class=\"iconDiv\">\n                        <span class=\"iconText\">{{user.iconText.substring(0,2)}}</span>\n                      </div>\n                      <div>\n                        <div>{{user.name}}</div>\n                        <div class=\"emailText\">{{user.maskedEmail}}</div>\n                      </div>\n                    </div>\n                  </mat-option>\n                </mat-autocomplete>\n                <mat-hint align=\"start\" class=\"left-over-emails\">{{'contentSharing.note' | translate}}</mat-hint>\n                <mat-hint align=\"end\" class=\"left-over-emails\">{{ users.length }} /{{maxEmailsLimit}}\n                  {{'contentSharing.remaingEmails' | translate}}</mat-hint>\n              </mat-form-field>\n            </div>\n            <div class=\"flex mt-5\">\n              <div class=\"flex flex-1 flex-end\">\n                <span class=\"copy-link-btn cursor-pointer\" (click)=\"copyToClipboard()\">{{'contentSharing.copyLink' |\n                  translate}} &nbsp;&nbsp;<mat-icon>link</mat-icon></span>\n                <button mat-stroked-button type=\"submit\"\n                  [ngClass]=\"{'disable-send-btn': users.length === 0 || users.length}\"\n                  class=\"text-white ws-mat-primary-background flex-auto-display send-btn\"\n                  [disabled]=\"userCtrl.value.length || users.length === 0 || users.length > maxEmailsLimit\"\n                  (click)=\"submitSharing()\">\n                  {{'contentSharing.send' | translate}} &nbsp; <mat-icon>send</mat-icon>\n                </button>\n              </div>\n            </div>\n\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #batchDropdown>\n  <form class=\"flex flex-col gap-4\">\n    <ng-container *ngIf=\"batchData && !batchData?.enrolled\n      && (!batchData.workFlow?.wfInitiated || (batchData.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||  batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED))\n      && batchData?.content?.length\">\n      <mat-form-field appearance=\"outline\" class=\"w-full batch-form-field\">\n        <mat-select #batchControlData [formControl]=\"batchControl\" required autoSelctFirstOption\n          (selectionChange)=\"batchChange($event)\" panelClass=\"batch-dropdown\">\n          <mat-option *ngFor=\"let batch of batchData.content; let i=index\" [value]=\"batch\" selected=\"index === 0\"\n            [disabled]=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn \">\n            <div class=\"flex flex-row items-center gap-2\">\n              <div class=\"flex-1 text-sm batch-timings\">\n                {{ batch.name }} ( {{ batch.startDate | date: 'd MMM, yyyy' }} - {{ batch.endDate | date: 'd MMM, yyyy'\n                || 'present' }} )\n              </div>\n              <div class=\"expired\" *ngIf=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn\">\n                Expired\n              </div>\n            </div>\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf=\"batchControl.hasError('required')\">Please choose a batch to start course</mat-error>\n      </mat-form-field>\n      <div class=\"flex flex-wrap gap-3\">\n        <ng-container *ngIf=\"!showRejected\">\n          <div class=\"flex-1\">\n            <div class=\"flex flex-col gap-1\" *ngIf=\"selectedBatch && selectedBatch.enrollmentEndDate \">\n              <p class=\"text-xs leading-4 mb-0\">Last enroll date</p>\n              <p class=\"font-bold mb-0\">{{ selectedBatch.enrollmentEndDate | date: 'd MMM, y' }}</p>\n            </div>\n          </div>\n          <div class=\"flex flex-row justify-center items-center\">\n            <button class=\"enroll-button\"\n              [ngClass]=\"{ 'disable-btn': disableEnrollBtn || batchControl.hasError('required') || !handleEnrollmentEndDate(selectedBatch) }\"\n              [disabled]=\"disableEnrollBtn || batchControl.hasError('required')|| !handleEnrollmentEndDate(selectedBatch)\"\n              (click)=\"requestToEnrollDialog()\">\n              <ng-container>\n                Request to enroll\n              </ng-container>\n            </button>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"showRejected && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n          <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n            Your enrollment request is {{batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED\n            ?'removed':'rejected'}}.</h3>\n        </ng-container>\n      </div>\n    </ng-container>\n  </form>\n</ng-template>", styles: [".button,.batch-div .enroll-button,.batch-div .withdraw-batch{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}.batch-div{border-radius:8px;background-color:#fdead5;max-width:400px;margin:0 auto}.batch-div .request-block{padding:16px}.batch-div .batch-details{padding:16px;border:1px solid #FF9800;border-radius:8px;background-color:#fff;cursor:pointer}.batch-div .batch-enrolled{font-weight:700;color:#4caf50;font-size:.75rem}.batch-div .withdraw-batch{color:#000000de;border:1px solid rgba(0,0,0,.8705882353);background-color:#fff;width:100%;margin-top:16px}.batch-div .enroll-button{color:#fff;background-color:#ff9800;border:1px solid #FF9800}::ng-deep .batch-dropdown{margin-top:3rem!important}::ng-deep .batch-dropdown .mat-option{height:fit-content!important;padding:12px 16px!important}::ng-deep .batch-form-field{height:64px}::ng-deep .batch-form-field .mat-form-field-wrapper{margin:0;padding-bottom:0;height:inherit}::ng-deep .batch-form-field .mat-form-field-wrapper .mat-form-field-flex{height:inherit}::ng-deep .batch-form-field .mat-form-field-outline{border-radius:8px;height:inherit}::ng-deep .batch-form-field .mat-form-field-infix{display:flex;align-items:center;font-size:14px;border-top:.35rem solid transparent;padding:8px 0;height:44px}::ng-deep .batch-form-field .mat-form-field-infix .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:translateY(0)!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper{padding:8px 4px!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper .mat-error{margin-top:6px}::ng-deep .batch-form-field .mat-select-value-text{white-space:pre-line!important;line-height:21px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.disable-btn{opacity:.5}.mb-0{margin-bottom:0!important}.batch-timings{text-transform:uppercase;line-height:20px}.header-synopsis{padding:32px 64px}@media only screen and (max-width: 599px){.header-synopsis{padding:32px 24px}}.app-icon{height:180px;width:280px;border-radius:4px}.banner-container{position:relative;background-repeat:no-repeat;background-position:center;background-size:cover}.header-synopsis-gradient{background:inherit}.category-text{margin-left:8px}.fixed-width{max-width:1230px;display:block;margin:0 auto;padding:0!important}@media only screen and (min-width: 600px) and (max-width: 959px){.fixed-width{padding:0 15px!important}}@media only screen and (max-width: 599px){.fixed-width{padding:0 15px!important}}.fluid-width{width:100%}.header-synopsis{box-sizing:border-box}.header-synopsis .apIcon{background-color:#fff;margin-right:16px;padding:4px 8px;border-radius:16px;display:flex;align-items:center;justify-content:flex-start}.header-synopsis .apIcon img{height:15px;object-fit:contain}.header-synopsis .apIcon span{opacity:1;color:#0009;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.header-synopsis .header-title{display:flex}.header-synopsis .header-title .text-truncate-title{max-width:100%;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.header-synopsis .rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px}.header-synopsis .rating .rating-number{letter-spacing:0px;color:#f69953}.header-synopsis .rating .rating-count{letter-spacing:.36px;color:#f69953}.header-synopsis .rating .rating mat-icon{color:#f69953}.header-synopsis .header-meta{line-height:1.5}.header-synopsis .resumeButton{height:52px;min-width:160px;display:flex;align-items:center;justify-content:center;background:#34d6a4 0% 0% no-repeat padding-box;box-shadow:0 10px 30px #9993;color:#fff!important}.header-synopsis .resumeButton ::ng-deep .mat-button-wrapper{letter-spacing:0px;color:#fff;text-transform:capitalize}.header-synopsis .header-actions{display:flex}.header-synopsis .header-actions .custom-button{background:#0074b6 0% 0% no-repeat padding-box;border-radius:4px}.header-synopsis .header-actions.top{margin-top:0;margin-bottom:40px}.header-synopsis .header-actions .action-btns{margin-left:auto;order:2}.banner-overview-container{display:flex;justify-content:space-between}.banner-overview-container .overview-description{flex:1;min-width:1px;margin-right:24px;margin-bottom:12px;opacity:1;color:#000000de;font-size:16px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:24px}@media only screen and (max-width: 599px){.banner-overview-container .overview-description{margin-right:0}}.banner-overview-container .overview-intro{width:240px;height:135px;border:1px solid;box-sizing:border-box;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;position:relative}.banner-overview-container .overview-intro .overview-intro-overlay{cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;width:48px;height:48px;font-size:48px;background-color:#00000080;border-radius:50%;padding:8px}.banner-overview-container .overview-intro .overview-intro-overlay:active{background-color:#000000b3}@media only screen and (max-width: 599px){.banner-overview-container .overview-intro{display:none}}.analytics-meta{font-weight:500;margin-bottom:12px;line-height:1.2}.hidden-block-xs{display:block}@media only screen and (max-width: 599px){.hidden-block-xs{display:none}}.visible-block-xs{display:none}@media only screen and (max-width: 599px){.visible-block-xs{display:block}}.hidden-block-s{display:block}@media only screen and (min-width: 600px) and (max-width: 959px){.hidden-block-s{display:none}}.visible-block-s{display:none}@media only screen and (min-width: 600px) and (max-width: 959px){.visible-block-s{display:block}}.info-msg{color:#fff!important}.info-msg mat-icon{color:#fff!important}.tags{display:flex;flex:1;flex-direction:row;flex-wrap:wrap;position:relative;z-index:1}.tags .tag{display:inline-block;border-radius:100px 4px 4px 100px;padding:1px 12px;width:auto;justify-content:space-between;margin:0 8px 8px 0;background-color:#0000000a;border:1px solid rgba(0,0,0,.08);box-sizing:border-box}.batch-container{max-width:435px;border-radius:4px;width:40%}.custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px;max-width:auto!important;height:42px!important}.sticky-banner{z-index:999;position:sticky;top:128px}.sticky-banner .header-title h1{font:normal normal 300 24px/35px}.sticky-banner .overview-description{font:normal normal 300 14px/21px}.batch-wrapper{display:flex;justify-content:space-between;gap:25px;width:100%}.batch-timer{width:60%;background-color:#fff;align-items:center}.batch-timer .timer-title{opacity:1;color:#0006;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.batch-timer .time-wrapper div p.count{border-radius:4px;background-color:#000000de;opacity:1;color:#fff;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:center;line-height:48px;width:67px;height:47px;margin-bottom:4px}.batch-timer .time-wrapper div p.time-label{opacity:1;color:#000000de;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:center;line-height:12px}.batch-timer .time-wrapper span{padding:8px;font-size:36px}.batch-timer .help{width:100%}.batch-timer .help .batch-duration-wrap{padding:0 24px}.batch-timer .help .batch-duration-wrap .duration-days{opacity:1;color:#000000de;font-family:Montserrat-SemiBold;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:left;line-height:48px;padding-bottom:16px}.batch-info{opacity:1;color:#000000de;font-size:14px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px;padding:26px}.disable-send-btn[disabled]{background-color:#000!important}@media (max-width: 768px){.batch-wrapper{flex-wrap:wrap}.batch-timer{width:100%;flex-wrap:wrap;justify-content:center}.batch-container{width:100%}}.share-container{position:fixed;height:100vh;background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.share-modal{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit}.karmasahayogi-icon{position:absolute;bottom:-5px;left:calc(50% - 464px)}.triangle-left{transform:translateY(100%);position:absolute;bottom:28%;left:-24px;width:0;height:0;border-top:24px solid transparent;border-right:48px solid #ffffff;border-bottom:24px solid transparent}.contnet{background-color:#fff;width:612px;border-radius:12px;padding:16px}.content-div{position:relative}.copy-link-btn{display:flex;align-items:center;margin-right:20px;color:red;color:#0074b6!important;font-weight:600}.copy-link-btn:hover{background-color:none!important}.send-btn{border-radius:20px}.send-btn .mat-icon{margin-bottom:2.5px}::ng-deep .mat-chip-list-wrapper{height:100px;overflow:auto;display:block!important;scroll-behavior:smooth}.iconText{border-radius:50%;background-color:#000;color:#fff;width:30px;display:inline-block;text-align:center;height:30px;display:flex;align-items:center;justify-content:center}.iconDiv{margin-right:8px}.emailText{opacity:.6}button:disabled{pointer-events:none;opacity:.5;color:#000}::ng-deep .mat-autocomplete-panel{z-index:99999}::ng-deep .cdk-overlay-pane{z-index:9999!important}::ng-deep .close-icon{background-color:#000;color:#fff;border-radius:16px;padding:4px}::ng-deep .mat-chip-input{padding-bottom:8px!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip{color:#0074b6!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip mat-icon{color:#0074b6!important}::ng-deep .inputTextBox{width:95%!important;overflow-x:hidden}.close-share-dialog{position:absolute;right:30px;top:30px}.left-over-emails{font-weight:600}.loader{position:absolute;top:42%;left:45%;z-index:1000}@media (max-width: 768px){.content-div{width:100%}.contnet{width:unset;margin-bottom:18%}.left-over-emails{display:none}.karmasahayogi-icon{left:8%;bottom:20%}.share-modal{align-items:self-end}}@media only screen and (min-device-width: 820px) and (max-device-width: 1180px){.karmasahayogi-icon{left:calc(50% - 387px)}.content{width:500px}}@media only screen and (min-device-width: 768px) and (max-device-width: 819px){.triangle-left{display:none}}.location-wrapper{padding:16px;border-top:1px solid rgba(0,0,0,.16)}.location-wrapper .location-icon{color:#1b4ca1;height:32px;width:32px;font-size:32px;padding-right:8px}.location-wrapper .loc-details{opacity:1;color:#000000de;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:Bold;letter-spacing:.25px;text-align:left;line-height:20px}.visibility-show{overflow:visible!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i10$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatLegacyChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatLegacyChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$1.DefaultThumbnailDirective, selector: "[wsUtilsDefaultThumbnail]", inputs: ["wsUtilsDefaultThumbnail", "src"] }, { kind: "component", type: i13.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i13.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeLimitToPipe, name: "pipeLimitTo" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i2$1.PipePartialContentPipe, name: "pipePartialContent" }, { kind: "pipe", type: i2$1.PipePublicURL, name: "pipePublicURL" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: { banners: "banners", content: "content", resumeData: "resumeData", analytics: "analytics", forPreview: "forPreview", batchData: "batchData", userEnrollmentList: "userEnrollmentList", contentReadData: "contentReadData", clickToShare: "clickToShare" }, outputs: { withdrawOrEnroll: "withdrawOrEnroll", programEnrollCall: "programEnrollCall" }, providers: [AccessControlService, DatePipe], viewQueries: [{ propertyName: "userInput", first: true, predicate: ["userInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header-synopsis fixed-width margin-top-xl\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\"\n  *ngIf=\"show\">\n  <div class=\"flex flex-row\">\n    <div class=\"flex-auto\">\n      <div class=\"header-title flex-col sm:flex-row\">\n        <!-- image -->\n        <div *ngIf=\"content?.posterImage\" class=\"float-left\">\n          <img [src]=\"content?.posterImage | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n            [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n        </div>\n        <div *ngIf=\"!content?.posterImage\" class=\"float-left\">\n          <ng-container *ngIf=\"content?.appIcon; else defaultImg\">\n            <img [src]=\"content?.appIcon | pipePublicURL\" [id]=\"'source_' + content.identifier\" class=\"app-icon\"\n              [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n          </ng-container>\n          <ng-template #defaultImg>\n            <img src=\"/assets/instances/eagle/app_logos/default.png\" [id]=\"'source_' + content.identifier\"\n              class=\"app-icon\" [alt]=\"content.sourceName || iGOT\" />\n          </ng-template>\n        </div>\n        <div class=\"sm:ml-5 flex flex-auto\" [id]=\"'m-c-'+ content.identifier\">\n          <div class=\"sm:ml-5 flex flex-col flex-auto\">\n            <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs hidden sm:block\"\n              [title]=\"contentReadData?.name\">\n              {{ contentReadData?.name }}\n              <div class=\"float-right cursor-pointer flex\" (click)=\"onClickOfShare()\" *ngIf=\"canShare\">\n                <mat-icon class=\"ws-mat-accent-text padding-top-xs\">share</mat-icon>\n              </div>\n            </h1>\n            <h1 class=\"mat-headline margin-remove-bottom padding-bottom-xs block sm:hidden\"\n              [title]=\"contentReadData?.name\">\n              {{ contentReadData?.name }}\n            </h1>\n            <span *ngIf=\"contentProgress === 1\" class=\"margin-left-s\">\n              <mat-icon class=\"ws-mat-accent-text\">check_circle</mat-icon>\n            </span>\n            <div *ngIf=\"content?.primaryCategory\" class=\"apIcon float-left mb-4\">\n              <img src=\"/assets/icons/content/course.svg\" [id]=\"'source_' + content.identifier\" class=\"source-icon\"\n                [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n              <span>{{ translateLabel(content?.primaryCategory, 'searchfilters') }}</span>\n            </div>\n            <div *ngIf=\"content?.appIcon\" class=\"apIcon float-left mb-4\">\n              <img [src]=\"content?.creatorLogo | pipePublicURL\" [id]=\"'source_' + content.identifier\"\n                class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\" [alt]=\"content.sourceName || iGOT\" />\n            </div>\n            <div [ngSwitch]=\"routePath\" class=\"header-meta\" [ngClass]=\"{ 'header-meta-banner': bannerUrl }\">\n              <!-- Overview Section -->\n              <div class=\"banner-overview-container\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n                *ngSwitchCase=\"'overview'\">\n                <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n                  {{ content?.source | pipeLimitTo: 250 }}\n                </h3>\n                <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n                  {{ content?.instructions | pipeLimitTo: 450 }}\n                </p>\n                <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n                  [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n                  <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n                </div>\n              </div>\n              <!-- Toc Section -->\n              <div *ngSwitchCase=\"'contents'\">\n                <!-- Contents Banner -->\n              </div>\n              <!-- Analytics Section -->\n              <div class=\"banner-overview-container mat-body-1\" [hidden]=\"!content?.purpose && showSubtitleOnBanner\"\n                *ngSwitchCase=\"'analytics'\">\n                <h3 class=\"overview-description mat-body-1\" *ngIf=\"showSubtitleOnBanner\" i18n-title title=\"Subtitle\">\n                  {{ content?.purpose | pipeLimitTo: 250 }}\n                </h3>\n                <p class=\"overview-description mat-body-1\" *ngIf=\"!showSubtitleOnBanner\" i18n-title title=\"Description\">\n                  {{ content?.instructions | pipeLimitTo: 450 }}\n                </p>\n                <div *ngIf=\"sanitizedIntroductoryVideoIcon\" class=\"overview-intro ws-mat-primary-lite-background\"\n                  [style.backgroundImage]=\"sanitizedIntroductoryVideoIcon\" role=\"button\" (click)=\"playIntroVideo()\">\n                  <mat-icon role=\"button\" class=\"overview-intro-overlay\">play_arrow</mat-icon>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n              <span class=\"rating-number mat-body-2\">{{ content?.averageRating }}&nbsp;</span>\n              <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                {{ getRatingIcon(rating) }}</mat-icon>\n              <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"content?.totalRating\">\n                ( {{ content?.totalRating | pipeCountTransform }} )</span>\n            </div>\n            <div *ngIf=\"!content?.averageRating\" class=\"flex items-center rating margin-bottom-m\">\n              <span class=\"rating-number mat-body-2\"> 0.0 &nbsp;</span>\n              <mat-icon class=\"mat-icon material-icons\" *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                {{ getRatingIcon(rating) }}</mat-icon>\n              <span class=\"margin-left-xs rating-count mat-body-2\" *ngIf=\"!content?.totalRating\">\n                ( {{ 0 | pipeCountTransform }} )</span>\n            </div>\n            <!-- tags -->\n            <div class=\"tags margin-bottom-s\" *ngIf=\"content?.keywords && content?.keywords?.length > 0\">\n              <span *ngFor=\"let tag of content.keywords\" class=\"tag\">\n                {{tag}}\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n  <div class=\"batch-div\">\n    <div class=\"request-block\">\n      <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n      <ng-container\n        *ngIf=\"batchData && !batchData?.enrolled  && batchData?.workFlow?.wfInitiated &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REJECTED) && (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.REMOVED) &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.WITHDRAWN) &&\n        (batchData?.workFlow?.wfItem?.currentStatus !== WFBlendedProgramStatus.APPROVED) && batchData?.content?.length\">\n        <p class=\"margin-remove-bottom mat-body-1 padding-m bg-white\">\n          {{batchData?.workFlow?.batch?.name}} - ({{batchData?.workFlow?.batch?.startDate | date: 'dd-MM-yyyy'}} -\n          {{batchData?.workFlow?.batch?.endDate | date: 'dd-MM-yyyy' || 'present'}})\n        </p>\n        <ng-container>\n          <button class=\"withdraw-batch\" (click)=\"!disableWithdrawnBtn && requestToWithdrawDialog()\"\n            [disabled]=\"disableWithdrawnBtn\" [ngClass]=\"{ 'disable-btn': disableWithdrawnBtn }\">\n            <ng-container> {{ 'apptocbanner.withDrawYourRequest' | translate }} </ng-container>\n          </button>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"batchData && batchData?.enrolled && batchData?.content?.length\">\n        <h3 class=\"margin-remove-bottom p-4 bg-white mat-body-1\" *ngFor=\"let batch of batchData.content\">\n          {{batch?.name}} ({{batch?.startDate | date: 'dd-MM-yyyy' }} - {{batch?.endDate | date: 'dd-MM-yyyy' ||\n          'present'}})\n        </h3>\n        <ng-container [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"batchData && !batchData?.enrolled && !batchData?.content?.length\">\n        <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n          No batches\n        </h3>\n      </ng-container>\n    </div>\n    <!-- <ng-container *ngIf=\"batchData && batchData?.content?.length && batchData?.content[0]?.batchAttributes?.batchLocationDetails\">\n      <div class=\"flex items-center location-wrapper\">\n        <div>\n          <mat-icon class=\"location-icon\">\n            location_on</mat-icon>\n        </div>\n        <div class=\"loc-details\">\n            {{batchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n        </div>\n      </div>\n    </ng-container> -->\n  </div>\n  <ng-container *ngIf=\"batchData && !batchData?.enrolled && batchData?.content?.length\"\n    [ngTemplateOutlet]=\"statusMsg\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"content?.courseCategory === nsContent.ECourseCategory.MODERATED_PROGRAM\">\n  <div class=\"request-batch\">\n    <div class=\"batch-div\">\n      <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"batchDropdown\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n<!-- <div class=\"header-synopsis fixed-width margin-top-l\" [ngClass]=\"{ 'header-synopsis-gradient': bannerUrl }\" *ngIf=\"content && batchControl?.value?.batchAttributes?.batchLocationDetails\">\n  <ng-container *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n    <h2>{{'apptocbanner.batchLocation' | translate}}</h2>\n    <p>{{batchControl?.value?.batchAttributes?.batchLocationDetails}}</p>\n  </ng-container>\n</div> -->\n\n<mat-menu #actionMenu=\"matMenu\">\n  <div mat-menu-item>\n    <ng-container *ngIf=\"content\" [ngTemplateOutlet]=\"actions\"></ng-container>\n  </div>\n</mat-menu>\n\n<ng-template #actions>\n  <a i18n-aria-label aria-label=\"Take Action\" mat-icon-button *ngIf=\"reviewButton\"\n    [routerLink]=\"['/author/editor/' + content?.identifier]\">\n    <mat-icon>publish</mat-icon>\n  </a>\n  <ws-widget-btn-content-download id=\"prevfordownload\" [forPreview]=\"forPreview\"\n    [widgetData]=\"content | pipePartialContent : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal', 'artifactUrl']\">\n  </ws-widget-btn-content-download>\n  <ws-widget-btn-content-share id=\"prevforshare\" [forPreview]=\"forPreview\" [widgetData]=\"content\">\n  </ws-widget-btn-content-share>\n  <ws-widget-btn-kb [forPreview]=\"forPreview\" id=\"prev\" [contentId]=\"content?.identifier\"\n    [contentName]=\"contentReadData?.name\" [contentType]=\"content?.contentType\" [status]=\"content?.status\">\n  </ws-widget-btn-kb>\n  <ws-widget-btn-goals [forPreview]=\"forPreview\" id=\"goalsforprev\" *ngIf=\"isGoalsEnabled && btnGoalsConfig\"\n    [widgetData]=\"btnGoalsConfig\">\n  </ws-widget-btn-goals>\n  <ws-widget-btn-playlist [forPreview]=\"forPreview\" id=\"playlistforprev\" *ngIf=\"btnPlaylistConfig\"\n    [widgetData]=\"btnPlaylistConfig\">\n  </ws-widget-btn-playlist>\n  <ws-widget-btn-content-feedback-v2 [forPreview]=\"forPreview\" id=\"feedbackforprev\"\n    [widgetData]=\"content | pipePartialContent: ['identifier', 'name']\">\n  </ws-widget-btn-content-feedback-v2>\n</ng-template>\n<ng-template #authView>{{'apptocbanner.view' | translate}}</ng-template>\n<ng-template #statusMsg>\n  <div class=\"status-container mt-2 mb-2\"\n    *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && batchData?.workFlow?.wfInitiated\">\n    <div class=\"flex\" *ngIf=\"showMsg\">\n      <ng-container *ngIf=\"showIcon\">\n        <mat-icon class=\"mr-4\" [ngClass]=\"iconColor\" *ngIf=\"WFIcon === 'circle'\">check_circle</mat-icon>\n        <mat-icon class=\"mr-4 ws-mat-red-text visibility-show\" style=\"transform: rotate(180deg);\"\n          *ngIf=\"WFIcon === 'info'\">info</mat-icon>\n      </ng-container>\n      <div class=\"mat-body-1\">{{ getWFMsg }}</div>\n    </div>\n  </div>\n  <div class=\"status-container mt-5\"\n    *ngIf=\"content?.primaryCategory === primaryCategory.BLENDED_PROGRAM && showDisableMsg && !showMsg && findMessage.length > 0\">\n    <div class=\"flex\">\n      <ng-container>\n        <mat-icon class=\"mr-3 ws-mat-red-text\" style=\"transform: rotate(180deg);\">info</mat-icon>\n      </ng-container>\n      <div class=\"mat-body-1\">\n        <p class=\"margin-remove-bottom \">{{findMessage}}</p>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"share-container\" *ngIf=\"enableShare\">\n  <div *ngIf=\"showLoader\" class=\"text-center my-2 loader\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div>\n  <div class=\"cursor-pointer close-share-dialog\"><mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon></div>\n  <div class=\"share-modal\">\n    <div class=\"karmasahayogi-icon\"><img alt=\"karmasahayogi-icon\" src=\"/assets/icons/KarmaSahayogi.svg\"></div>\n    <div class=\"content-div\">\n      <div class=\"triangle-left hidden md:block\"></div>\n      <div class=\"contnet\">\n        <section class=\"w-full flex align-center justify-between \">\n          <div class=\"mb-2\">\n            <h2 class=\"mat-headline margin-remove-bottom ws-mat-black-text\">{{'contentSharing.header' | translate}}</h2>\n          </div>\n        </section>\n        <form [formGroup]=\"shareForm\">\n          <div class=\"mat-body-2\">\n            <div class=\"md-5\">\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-chip-list #chipList aria-label=\"user selection\" appearance=\"outline\">\n                  <mat-chip *ngFor=\"let user of users\" [selectable]=\"selectable\" [removable]=\"removable\"\n                    (removed)=\"remove(user)\">\n                    {{user}}\n                    <mat-icon matChipRemove *ngIf=\"removable\">close</mat-icon>\n                  </mat-chip>\n                  <input tabindex=\"-1\" class=\"inputTextBox\"\n                    placeholder=\"{{users.length === 0 ? translateLabels('placehoderText', 'contentSharing') : ''}}\"\n                    #userInput formControlName=\"review\" [formControl]=\"userCtrl\" [matAutocomplete]=\"auto\"\n                    [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                    [matChipInputAddOnBlur]=\"addOnBlur\" (matChipInputTokenEnd)=\"add($event)\">\n                </mat-chip-list>\n                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n                  <mat-option *ngFor=\"let user of filteredUsers\" [value]=\"user.name\">\n                    <div class=\"flex\">\n                      <div class=\"iconDiv\">\n                        <span class=\"iconText\">{{user.iconText.substring(0,2)}}</span>\n                      </div>\n                      <div>\n                        <div>{{user.name}}</div>\n                        <div class=\"emailText\">{{user.maskedEmail}}</div>\n                      </div>\n                    </div>\n                  </mat-option>\n                </mat-autocomplete>\n                <mat-hint align=\"start\" class=\"left-over-emails\">{{'contentSharing.note' | translate}}</mat-hint>\n                <mat-hint align=\"end\" class=\"left-over-emails\">{{ users.length }} /{{maxEmailsLimit}}\n                  {{'contentSharing.remaingEmails' | translate}}</mat-hint>\n              </mat-form-field>\n            </div>\n            <div class=\"flex mt-5\">\n              <div class=\"flex flex-1 flex-end\">\n                <span class=\"copy-link-btn cursor-pointer\" (click)=\"copyToClipboard()\">{{'contentSharing.copyLink' |\n                  translate}} &nbsp;&nbsp;<mat-icon>link</mat-icon></span>\n                <button mat-stroked-button type=\"submit\"\n                  [ngClass]=\"{'disable-send-btn': users.length === 0 || users.length}\"\n                  class=\"text-white ws-mat-primary-background flex-auto-display send-btn\"\n                  [disabled]=\"userCtrl.value.length || users.length === 0 || users.length > maxEmailsLimit\"\n                  (click)=\"submitSharing()\">\n                  {{'contentSharing.send' | translate}} &nbsp; <mat-icon>send</mat-icon>\n                </button>\n              </div>\n            </div>\n\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #batchDropdown>\n  <form class=\"flex flex-col gap-4\">\n    <ng-container *ngIf=\"batchData && !batchData?.enrolled\n      && (!batchData.workFlow?.wfInitiated || (batchData.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||  batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN || batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED))\n      && batchData?.content?.length\">\n      <mat-form-field appearance=\"outline\" class=\"w-full batch-form-field\">\n        <mat-select #batchControlData [formControl]=\"batchControl\" required autoSelctFirstOption\n          (selectionChange)=\"batchChange($event)\" panelClass=\"batch-dropdown\">\n          <mat-option *ngFor=\"let batch of batchData.content; let i=index\" [value]=\"batch\" selected=\"index === 0\"\n            [disabled]=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn \">\n            <div class=\"flex flex-row items-center gap-2\">\n              <div class=\"flex-1 text-sm batch-timings\">\n                {{ batch.name }} ( {{ batch.startDate | date: 'd MMM, yyyy' }} - {{ batch.endDate | date: 'd MMM, yyyy'\n                || 'present' }} )\n              </div>\n              <div class=\"expired\" *ngIf=\"!handleEnrollmentEndDate(batch) || disableEnrollBtn\">\n                Expired\n              </div>\n            </div>\n          </mat-option>\n        </mat-select>\n        <mat-error *ngIf=\"batchControl.hasError('required')\">Please choose a batch to start course</mat-error>\n      </mat-form-field>\n      <div class=\"flex flex-wrap gap-3\">\n        <ng-container *ngIf=\"!showRejected\">\n          <div class=\"flex-1\">\n            <div class=\"flex flex-col gap-1\" *ngIf=\"selectedBatch && selectedBatch.enrollmentEndDate \">\n              <p class=\"text-xs leading-4 mb-0\">Last enroll date</p>\n              <p class=\"font-bold mb-0\">{{ selectedBatch.enrollmentEndDate | date: 'd MMM, y' }}</p>\n            </div>\n          </div>\n          <div class=\"flex flex-row justify-center items-center\">\n            <button class=\"enroll-button\"\n              [ngClass]=\"{ 'disable-btn': disableEnrollBtn || batchControl.hasError('required') || !handleEnrollmentEndDate(selectedBatch) }\"\n              [disabled]=\"disableEnrollBtn || batchControl.hasError('required')|| !handleEnrollmentEndDate(selectedBatch)\"\n              (click)=\"requestToEnrollDialog()\">\n              <ng-container>\n                Request to enroll\n              </ng-container>\n            </button>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"showRejected && content?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n          <h3 class=\"margin-remove-bottom mat-body-2 ws-default-text\">\n            Your enrollment request is {{batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED\n            ?'removed':'rejected'}}.</h3>\n        </ng-container>\n      </div>\n    </ng-container>\n  </form>\n</ng-template>", styles: [".button,.batch-div .enroll-button,.batch-div .withdraw-batch{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}.batch-div{border-radius:8px;background-color:#fdead5;max-width:400px;margin:0 auto}.batch-div .request-block{padding:16px}.batch-div .batch-details{padding:16px;border:1px solid #FF9800;border-radius:8px;background-color:#fff;cursor:pointer}.batch-div .batch-enrolled{font-weight:700;color:#4caf50;font-size:.75rem}.batch-div .withdraw-batch{color:#000000de;border:1px solid rgba(0,0,0,.8705882353);background-color:#fff;width:100%;margin-top:16px}.batch-div .enroll-button{color:#fff;background-color:#ff9800;border:1px solid #FF9800}::ng-deep .batch-dropdown{margin-top:3rem!important}::ng-deep .batch-dropdown .mat-option{height:fit-content!important;padding:12px 16px!important}::ng-deep .batch-form-field{height:64px}::ng-deep .batch-form-field .mat-form-field-wrapper{margin:0;padding-bottom:0;height:inherit}::ng-deep .batch-form-field .mat-form-field-wrapper .mat-form-field-flex{height:inherit}::ng-deep .batch-form-field .mat-form-field-outline{border-radius:8px;height:inherit}::ng-deep .batch-form-field .mat-form-field-infix{display:flex;align-items:center;font-size:14px;border-top:.35rem solid transparent;padding:8px 0;height:44px}::ng-deep .batch-form-field .mat-form-field-infix .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:translateY(0)!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper{padding:8px 4px!important}::ng-deep .batch-form-field .mat-form-field-subscript-wrapper .mat-error{margin-top:6px}::ng-deep .batch-form-field .mat-select-value-text{white-space:pre-line!important;line-height:21px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.disable-btn{opacity:.5}.mb-0{margin-bottom:0!important}.batch-timings{text-transform:uppercase;line-height:20px}.header-synopsis{padding:32px 64px}@media only screen and (max-width: 599px){.header-synopsis{padding:32px 24px}}.app-icon{height:180px;width:280px;border-radius:4px}.banner-container{position:relative;background-repeat:no-repeat;background-position:center;background-size:cover}.header-synopsis-gradient{background:inherit}.category-text{margin-left:8px}.fixed-width{max-width:1230px;display:block;margin:0 auto;padding:0!important}@media only screen and (min-width: 600px) and (max-width: 959px){.fixed-width{padding:0 15px!important}}@media only screen and (max-width: 599px){.fixed-width{padding:0 15px!important}}.fluid-width{width:100%}.header-synopsis{box-sizing:border-box}.header-synopsis .apIcon{background-color:#fff;margin-right:16px;padding:4px 8px;border-radius:16px;display:flex;align-items:center;justify-content:flex-start}.header-synopsis .apIcon img{height:15px;object-fit:contain}.header-synopsis .apIcon span{opacity:1;color:#0009;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.header-synopsis .header-title{display:flex}.header-synopsis .header-title .text-truncate-title{max-width:100%;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.header-synopsis .rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px}.header-synopsis .rating .rating-number{letter-spacing:0px;color:#f69953}.header-synopsis .rating .rating-count{letter-spacing:.36px;color:#f69953}.header-synopsis .rating .rating mat-icon{color:#f69953}.header-synopsis .header-meta{line-height:1.5}.header-synopsis .resumeButton{height:52px;min-width:160px;display:flex;align-items:center;justify-content:center;background:#34d6a4 0% 0% no-repeat padding-box;box-shadow:0 10px 30px #9993;color:#fff!important}.header-synopsis .resumeButton ::ng-deep .mat-button-wrapper{letter-spacing:0px;color:#fff;text-transform:capitalize}.header-synopsis .header-actions{display:flex}.header-synopsis .header-actions .custom-button{background:#0074b6 0% 0% no-repeat padding-box;border-radius:4px}.header-synopsis .header-actions.top{margin-top:0;margin-bottom:40px}.header-synopsis .header-actions .action-btns{margin-left:auto;order:2}.banner-overview-container{display:flex;justify-content:space-between}.banner-overview-container .overview-description{flex:1;min-width:1px;margin-right:24px;margin-bottom:12px;opacity:1;color:#000000de;font-size:16px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:24px}@media only screen and (max-width: 599px){.banner-overview-container .overview-description{margin-right:0}}.banner-overview-container .overview-intro{width:240px;height:135px;border:1px solid;box-sizing:border-box;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;position:relative}.banner-overview-container .overview-intro .overview-intro-overlay{cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;width:48px;height:48px;font-size:48px;background-color:#00000080;border-radius:50%;padding:8px}.banner-overview-container .overview-intro .overview-intro-overlay:active{background-color:#000000b3}@media only screen and (max-width: 599px){.banner-overview-container .overview-intro{display:none}}.analytics-meta{font-weight:500;margin-bottom:12px;line-height:1.2}.hidden-block-xs{display:block}@media only screen and (max-width: 599px){.hidden-block-xs{display:none}}.visible-block-xs{display:none}@media only screen and (max-width: 599px){.visible-block-xs{display:block}}.hidden-block-s{display:block}@media only screen and (min-width: 600px) and (max-width: 959px){.hidden-block-s{display:none}}.visible-block-s{display:none}@media only screen and (min-width: 600px) and (max-width: 959px){.visible-block-s{display:block}}.info-msg{color:#fff!important}.info-msg mat-icon{color:#fff!important}.tags{display:flex;flex:1;flex-direction:row;flex-wrap:wrap;position:relative;z-index:1}.tags .tag{display:inline-block;border-radius:100px 4px 4px 100px;padding:1px 12px;width:auto;justify-content:space-between;margin:0 8px 8px 0;background-color:#0000000a;border:1px solid rgba(0,0,0,.08);box-sizing:border-box}.batch-container{max-width:435px;border-radius:4px;width:40%}.custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px;max-width:auto!important;height:42px!important}.sticky-banner{z-index:999;position:sticky;top:128px}.sticky-banner .header-title h1{font:normal normal 300 24px/35px}.sticky-banner .overview-description{font:normal normal 300 14px/21px}.batch-wrapper{display:flex;justify-content:space-between;gap:25px;width:100%}.batch-timer{width:60%;background-color:#fff;align-items:center}.batch-timer .timer-title{opacity:1;color:#0006;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px}.batch-timer .time-wrapper div p.count{border-radius:4px;background-color:#000000de;opacity:1;color:#fff;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:center;line-height:48px;width:67px;height:47px;margin-bottom:4px}.batch-timer .time-wrapper div p.time-label{opacity:1;color:#000000de;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:center;line-height:12px}.batch-timer .time-wrapper span{padding:8px;font-size:36px}.batch-timer .help{width:100%}.batch-timer .help .batch-duration-wrap{padding:0 24px}.batch-timer .help .batch-duration-wrap .duration-days{opacity:1;color:#000000de;font-family:Montserrat-SemiBold;font-size:36px;font-weight:600;font-style:normal;letter-spacing:-.2px;text-align:left;line-height:48px;padding-bottom:16px}.batch-info{opacity:1;color:#000000de;font-size:14px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:20px;padding:26px}.disable-send-btn[disabled]{background-color:#000!important}@media (max-width: 768px){.batch-wrapper{flex-wrap:wrap}.batch-timer{width:100%;flex-wrap:wrap;justify-content:center}.batch-container{width:100%}}.share-container{position:fixed;height:100vh;background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.share-modal{display:flex;align-items:center;justify-content:center;height:inherit;width:inherit}.karmasahayogi-icon{position:absolute;bottom:-5px;left:calc(50% - 464px)}.triangle-left{transform:translateY(100%);position:absolute;bottom:28%;left:-24px;width:0;height:0;border-top:24px solid transparent;border-right:48px solid #ffffff;border-bottom:24px solid transparent}.contnet{background-color:#fff;width:612px;border-radius:12px;padding:16px}.content-div{position:relative}.copy-link-btn{display:flex;align-items:center;margin-right:20px;color:red;color:#0074b6!important;font-weight:600}.copy-link-btn:hover{background-color:none!important}.send-btn{border-radius:20px}.send-btn .mat-icon{margin-bottom:2.5px}::ng-deep .mat-chip-list-wrapper{height:100px;overflow:auto;display:block!important;scroll-behavior:smooth}.iconText{border-radius:50%;background-color:#000;color:#fff;width:30px;display:inline-block;text-align:center;height:30px;display:flex;align-items:center;justify-content:center}.iconDiv{margin-right:8px}.emailText{opacity:.6}button:disabled{pointer-events:none;opacity:.5;color:#000}::ng-deep .mat-autocomplete-panel{z-index:99999}::ng-deep .cdk-overlay-pane{z-index:9999!important}::ng-deep .close-icon{background-color:#000;color:#fff;border-radius:16px;padding:4px}::ng-deep .mat-chip-input{padding-bottom:8px!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip{color:#0074b6!important}::ng-deep .theme-igot.day-mode .mat-chip.mat-standard-chip mat-icon{color:#0074b6!important}::ng-deep .inputTextBox{width:95%!important;overflow-x:hidden}.close-share-dialog{position:absolute;right:30px;top:30px}.left-over-emails{font-weight:600}.loader{position:absolute;top:42%;left:45%;z-index:1000}@media (max-width: 768px){.content-div{width:100%}.contnet{width:unset;margin-bottom:18%}.left-over-emails{display:none}.karmasahayogi-icon{left:8%;bottom:20%}.share-modal{align-items:self-end}}@media only screen and (min-device-width: 820px) and (max-device-width: 1180px){.karmasahayogi-icon{left:calc(50% - 387px)}.content{width:500px}}@media only screen and (min-device-width: 768px) and (max-device-width: 819px){.triangle-left{display:none}}.location-wrapper{padding:16px;border-top:1px solid rgba(0,0,0,.16)}.location-wrapper .location-icon{color:#1b4ca1;height:32px;width:32px;font-size:32px;padding-right:8px}.location-wrapper .loc-details{opacity:1;color:#000000de;font-family:Lato-Bold;font-size:14px;font-weight:700;font-style:Bold;letter-spacing:.25px;text-align:left;line-height:20px}.visibility-show{overflow:visible!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i10$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i7$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i9.MatLegacyChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatLegacyChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$1.DefaultThumbnailDirective, selector: "[wsUtilsDefaultThumbnail]", inputs: ["wsUtilsDefaultThumbnail", "src"] }, { kind: "component", type: i13.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i13.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeLimitToPipe, name: "pipeLimitTo" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i2$1.PipePartialContentPipe, name: "pipePartialContent" }, { kind: "pipe", type: i2$1.PipePublicURL, name: "pipePublicURL" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocBannerComponent, decorators: [{
             type: Component,
@@ -22466,7 +22571,7 @@ class AppTocHomeV2Component {
         this.location.back();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeV2Component, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: WidgetContentService }, { token: AppTocService }, { token: i2$1.LoggerService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: i7.MatLegacySnackBar }, { token: i1$3.MatLegacyDialog }, { token: MobileAppsService }, { token: i2$1.UtilityService }, { token: i5.ContentLanguageService }, { token: ActionService }, { token: ViewerUtilService }, { token: RatingService }, { token: i2$1.TelemetryService }, { token: i1$2.TranslateService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.EventService }, { token: LoadCheckService }, { token: HandleClaimService }, { token: ResetRatingsService }, { token: TimerService }, { token: i2$1.WidgetEnrollService }, { token: i5.WidgetContentLibService }, { token: i2$1.DataTransferService }, { token: i19$1.MatSnackBar }, { token: i5.WidgetUserServiceLib }, { token: NetCoreService }, { token: AppTocV2Service }, { token: i2.Location }, { token: 'environment' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeV2Component, selector: "ws-app-app-toc-home-v2", inputs: { forPreview: "forPreview", inputContent: "inputContent", displayViewBtn: "displayViewBtn" }, host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "menuElement", first: true, predicate: ["stickyMenu"], descendants: true, static: true }, { propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "bannerElem", first: true, predicate: ["bannerDetails"], descendants: true, static: true }, { propertyName: "contentSource", first: true, predicate: ["contentSource"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n  <ng-template #enrollFunctionality>\n    <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n      <!-- Course block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n                    contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n        <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n                      !content?.artifactUrl?.length) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n          <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n            [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n            class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ translateLabels('resume', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </a>\n\n          <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n              }}</ng-container>\n          </button>\n\n          <!-- <div\n            *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n            <ng-container *ngIf=\"isAcbpClaim\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n            <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n          </div> -->\n\n          <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n            <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n          </div> -->\n\n          <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n            <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n          </div> -->\n        </ng-container>\n\n        <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n          <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE  && !enrollBtnLoading\">\n            <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n              (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n              <ng-container>\n                {{ 'apptochome.enroll' | translate }}\n              </ng-container>\n            </a>\n            <!-- <ng-container *ngIf=\"isAcbpCourse\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n            <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n              <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n\n      <!-- PRogram & mandatory course block -->\n      <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n        <ng-container\n          *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n            <ng-container\n              *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n              <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{'apptochome.enroll' | translate}}\n                </ng-container>\n              </a>\n              <!-- <ng-container *ngIf=\"isAcbpCourse\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n                <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container> -->\n            </ng-container>\n            <ng-container *ngIf=\"!forPreview || isInIFrame\">\n              <ng-container\n                *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n                <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                  [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n                  (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                  [contentReadData]=\"contentReadData\">\n                </ws-app-toc-banner>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n            No Batches\n          </ng-container>\n          <ng-container\n            *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container\n              *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"isBatchInProgress &&\n                        ( actionBtnStatus === 'grant' &&\n                          !(isMobile && content?.isInIntranet) &&\n                          (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n                          (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n                        )\">\n            <a *ngIf=\"showStart.show && !isPostAssessment\"\n              [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n              [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                    translateLabels('resume', 'apptochome') :\n                    translateLabels('start', 'apptochome') }}\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"content?.completionPercentage === 100\">\n                {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n              </ng-container>\n            </a>\n            <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n                }}</ng-container>\n            </a>\n            <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n              <ng-container *ngIf=\"isAcbpClaim\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n            </div> -->\n            <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n              <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                  (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n            </div>\n            <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n              <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-container\n        *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n        <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n          [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n          [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n          class=\"flex action-button justify-center resume\">\n          <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n              {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                translateLabels('resume', 'apptochome') :\n                translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">\n            {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n            translateLabels('resume', 'apptochome') }}\n          </ng-container>\n        </a>\n      </ng-container>\n\n      <ng-container *ngIf=\"enrollBtnLoading\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n          [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n      </ng-container>\n\n      <!-- Curated program block -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n        <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n          (click)=\"handleEnrollment()\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- STANDALONE_ASSESSMENT black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n          *ngIf=\"!forPreview || isInIFrame\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n        <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n          <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n          </span>\n        </ng-container>\n      </ng-container>\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n          {{getStartDate}}!</span>\n      </ng-container>\n\n      <!-- STANDALONE_ASSESSMENT enrolled black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <!-- BLENDED_PROGRAM block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n        <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n                      !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n          <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n            <p class=\"margin-remove-bottom font-bold\">\n              {{ 'apptochome.requestUnderReview' | translate }}\n            </p>\n          </div>\n        </ng-container>\n        <ng-container>\n          <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n            [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n            (click)=\"raiseTelemetryForPublic()\"\n            [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n            class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                  translateLabels('resume', 'apptochome') :\n                  translateLabels('start', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('start', 'apptochome') }}\n            </ng-container>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n        <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n          'apptochome.register' | translate }}</a>\n      </ng-container>\n\n    </div>\n  </ng-template>\n\n  <ng-template #progressFunctionality>\n    <div class=\"flex flex-row gap-4\">\n      <div class=\"flex-1\">\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"flex flex-row gap-4 text-sm\">\n            <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n            <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n          </div>\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n            [customClassName]=\"'content-progress'\">\n          </ws-widget-content-progress>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n        <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n          (click)=\"openFeedbackDialog(content)\">\n          <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n          <ng-container *ngIf=\"!userRating\">\n            <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n          </ng-container>\n          <ng-container *ngIf=\"userRating\">\n            <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n          </ng-container>\n        </button>\n      </ng-container>\n    </div>\n  </ng-template>\n\n  <div class=\"toc-banner\">\n    <div class=\"flex flex-row gap-6 fixed-width\">\n      <div class=\"banner-details toc-content\" #bannerDetails>\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n            <mat-icon class=\"text-white\">arrow_back</mat-icon>\n          </div>\n          <div class=\"flex items-center justify-between gap-4\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-row gap-2\">\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                  <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                  <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                  <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                </div>\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n                  *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n                  <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n                  <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                    'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n                </div>\n                <!-- Knowledge level block for search box -->\n                <!-- {{content?.difficultyLevel}} -->\n                <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container\">\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n                    class=\"level-badge beginner\">\n                    <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                      <path\n                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                        fill=\"#49C951\" />\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n                    class=\"level-badge intermediate\">\n                    <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                      <path\n                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                        fill=\"#1B4CA1\" />\n                      <path\n                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n                    class=\"level-badge advanced\">\n                    <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <g clip-path=\"url(#clip0)\">\n                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                        <path\n                          d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                          fill=\"#FF8268\" />\n                        <path\n                          d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                          fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                        <path\n                          d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                          fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                      </g>\n                      <defs>\n                        <clipPath id=\"clip0\">\n                          <rect width=\"16\" height=\"16\" fill=\"white\" />\n                        </clipPath>\n                      </defs>\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                </div>\n\n                <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n                  <div class=\"flex items-center due-tag text-xs leading-3\"\n                    [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n                    {{ 'common.dueBy' | translate }} - &nbsp;<span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n                      MMM,y'}}</span>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n              <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n                (keydown)=\"navigateToNewVersion()\">\n                <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n              </div>\n            </ng-container>\n            <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n              <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-2\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n                handleCapitalize(contentReadData?.name) }}</div>\n              <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n                | translate }} {{ contentReadData?.source }}</div>\n            </ng-container>\n          </div>\n\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex gap-4 items-center\">\n              <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n                (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                  <mat-icon class=\"nodtranslate\">grade</mat-icon>\n                  <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                </div>\n                <div class=\"separator\"></div>\n                <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n                </div>\n              </div>\n              <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                <div class=\"most-enrolled-chip text-xs leading-3\">\n                  <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n                    translate }}</span>\n                  <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n                    translate }}</span>\n                </div>\n              </div>\n              <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n                <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n                  <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n                </div>\n                <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n                  <span>{{ 'apptoc.retired' | translate }}</span>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n            <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n              contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n          </ng-container>\n          <ng-container>\n            <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n              <mat-chip-list class=\"lang-chips\">\n                <!-- Show up to 6 chips -->\n                <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n                  <mat-chip class=\"matchip-custom\" selectable=\"true\"\n                    [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n                    {{ lang.name || lang.value }}\n                  </mat-chip>\n                </ng-container>\n\n                <!-- \"More\" chip if there are more than 6 languages -->\n                <ng-container *ngIf=\"languageList.length > 5\">\n                  <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n                    [selected]=\"isSelectedInMoreDropdown()\">\n                    More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n                  </mat-chip>\n                  <mat-menu #moreLanguagesMenu=\"matMenu\">\n                    <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n                      <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n                        [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n                        {{ lang.displayName || lang.name || lang }}\n                      </mat-radio-button>\n                    </mat-radio-group>\n                  </mat-menu>\n                </ng-container>\n              </mat-chip-list>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex flex-row gap-6 fixed-width\">\n    <div class=\"toc-content\">\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n        selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n        selectedBatchData?.content[0]?.enrollmentEndDate\">\n        <div class=\"location-details mt-6\">\n          <div class=\"flex items-center gap-4 pb-3\">\n            <mat-icon class=\"location-icon nodtranslate\">\n              location_on\n            </mat-icon>\n            <div class=\"loc-desc\">\n              {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n            </div>\n          </div>\n          <div class=\"flex items-center gap-4\">\n            <mat-icon class=\"event-icon nodtranslate\">\n              event</mat-icon>\n            <div class=\"loc-desc\">\n              Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n        <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n          <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n            <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n            <div class=\"relevent-info\">\n              <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n                }}</span>\n              <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n                }}</span>\n            </div>\n            <div class=\"flex flex-middle relevant-container\">\n              <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n                (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n                (click)=\"handleAcceptRelevent()\">\n                <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n                  alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n                <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n              </div>\n\n              <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n                <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n                <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <div class=\"pb-4 lg:py-4\"\n        *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n        <!-- Overall progress functionality -->\n        <div class=\"mobile-progress\">\n          <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n        </div>\n        <!-- Overall progress functionality -->\n        <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n          [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n          [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n          [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n          [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n          [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n          [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n          [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n          (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n        <div class=\"mob-tip-for-learner\">\n          <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n            <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n          </div>\n        </div>\n      </div>\n    </div>\n\n\n    <div class=\"right-container\">\n\n      <!-- if needed sticky of right container add this to below div => #rightContainer -->\n      <div class=\"right-content\">\n        <div class=\"right-content-inner\">\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n              [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-col image-div\"\n              [ngStyle]=\"{\n        'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n              [ngClass]=\"{'image-backdrop': scrolled}\">\n              <div class=\"flex flex-col justify-between text-container\">\n                <div class=\"flex items-center gap-4 justify-between\"\n                  [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n                  <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n                    <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                    <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                  </div>\n                  <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n                    *ngIf=\"canShare && !forPreview\">\n                    <mat-icon class=\"nodtranslate\">share</mat-icon>\n                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                  <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n                  </div>\n                  <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n                    [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n                    'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n\n          <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n            <div class=\"flex flex-col gap-1  cursor-pointer switch-version\"\n              *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n              (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n              <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n            </div>\n\n            <div class=\"flex flex-col gap-4\"\n              *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n              <div class=\"flex flex-row gap-3 justify-around\">\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n                    || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n                </div>\n              </div>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n                <a class=\"flex action-button enroll-btn justify-center resume\"\n                  *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n                  <ng-container>\n                    {{ 'apptochome.preEnroll' | translate }}\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n                <a class=\"flex preenrolldone-btn justify-center resume\">\n                  <ng-container>\n                    {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n                      class=\"tick-icon\">\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n                <div class=\"flex flex-col gap-6 batch-timer\">\n                  <div class=\"flex flex-row\">\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                    <div class=\"flex\">\n                      <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                    </div>\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                  </div>\n                  <div class=\"flex flex-row gap-4 justify-center\">\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                      </div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n                <ng-container *ngIf=\"!mobile1200 && (\n         !contentReadData?.preEnrolmentResources?.length ||\n         (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus ||  !preAssessmentRequiredFlag))\n       )\">\n\n                  <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                    [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n                    [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                    [contentReadData]=\"contentReadData\">\n                  </ws-app-toc-banner>\n                </ng-container>\n              </ng-container>\n            </div>\n\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>\n                  <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n                </div>\n                <div *ngIf=\"showBtn\">\n                  <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n                    {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n                </div>\n\n                <!-- Overall progress functionality -->\n                <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n                  <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n                </ng-container>\n                <!-- Overall progress functionality -->\n\n                <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n                <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n                <!-- </div> -->\n\n                <!-- <div *ngIf=\"resumeData && userRating\">\n                <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n              </div> -->\n\n                <ng-container\n                  *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n                  <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n                </ng-container>\n              </div>\n\n              <div class=\"karma-points-div\">\n                <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n                  [content]=\"content\"\n                  [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-wrap gap-6\">\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n                [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n            </ng-container>\n          </div>\n\n          <div class=\"flex flex-col gap-8 p-5\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                  [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                  <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                    [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                  <div class=\"flex flex-col gap-2\">\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\"\n                *ngIf=\"contentReadData?.source  && (contentCreatorData && contentCreatorData?.length)\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n                  <div class=\"flex provider-logo-div\">\n                    <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n                      src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                  </div>\n                  <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n                    (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n                    [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n                    {{ handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                  <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n                    handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n          <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n        </div>\n      </div>\n\n\n\n    </div>\n  </div>\n  <div class=\"mobile-enroll-div\"\n    [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n    <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n      <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n        <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n          [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n          [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n        </ws-app-toc-banner>\n      </div>\n    </ng-container>\n    <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n  </div>\n\n  <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n    (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n  <div\n    class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n    <div class=\"error-logo\">\n      <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n        The page you requested cannot be found\n      </div>\n    </div>\n    <!-- <div class=\"error-support\">\n      <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n      <div class=\"support-message\" >You might want to:</div>\n    </div> -->\n  </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n  <ng-container *ngIf=\"displayViewBtn\">\n    <a (click)=\"raiseTelemetryForPublic($event)\"\n    [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n    [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n    class=\"flex action-button justify-center\">\n    {{'apptochome.view' | translate}}\n  </a>\n  </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n  <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n    <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n      [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n      <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n    </a>\n  </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.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%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ContentTocComponent, selector: "ws-widget-content-toc", inputs: ["content", "contentReadData", "initialRouteData", "changeTab", "baseContentReadData", "forPreview", "contentTabFlag", "resumeData", "batchData", "skeletonLoader", "tocStructure", "pathSet", "fromViewer", "hierarchyMapData", "condition", "kparray", "selectedBatchData", "config", "componentName", "isEnrolled", "playResourceId", "sideNavBarOpened", "languageList", "lockCertificate"], outputs: ["playResumeForAI", "enrollUserToAI", "trigerCompletionSurveyForm", "resumeContent"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "component", type: TipsForLearnerCardComponent, selector: "ws-widget-tips-for-learner-card", inputs: ["learnAdvisoryData"] }, { kind: "component", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: ["banners", "content", "resumeData", "analytics", "forPreview", "batchData", "userEnrollmentList", "contentReadData", "clickToShare"], outputs: ["withdrawOrEnroll", "programEnrollCall"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocHomeV2Component, selector: "ws-app-app-toc-home-v2", inputs: { forPreview: "forPreview", inputContent: "inputContent", displayViewBtn: "displayViewBtn" }, host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "menuElement", first: true, predicate: ["stickyMenu"], descendants: true, static: true }, { propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "bannerElem", first: true, predicate: ["bannerDetails"], descendants: true, static: true }, { propertyName: "contentSource", first: true, predicate: ["contentSource"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"courseID else noDataFound\">\n  <ng-template #enrollFunctionality>\n    <div [hidden]=\"isResource && !content?.artifactUrl?.length\" class=\"flex flex-col gap-4 text-center\">\n      <!-- Course block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.CURATED_PROGRAM\n                    && contentReadData?.primaryCategory !== primaryCategory.STANDALONE_ASSESSMENT &&\n                    contentReadData?.primaryCategory !== primaryCategory.BLENDED_PROGRAM\">\n        <ng-container *ngIf=\"(actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 &&\n                      !content?.artifactUrl?.length) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.COURSE && !batchData?.enrolled) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId)\">\n          <a *ngIf=\"showStart.show && !isPostAssessment && !forPreview\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"(resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url\"\n            [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\"\n            class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ translateLabels('resume', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ content?.completionPercentage >= 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </a>\n\n          <button *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" (click)=\"raiseTelemetryForPublic()\"\n            [routerLink]=\"firstResourceLink?.url\" class=\"flex action-button justify-center\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">{{ 'apptochome.takeAssessment' | translate\n              }}</ng-container>\n          </button>\n\n          <!-- <div\n            *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n            <ng-container *ngIf=\"isAcbpClaim\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n            <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container>\n          </div> -->\n\n          <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100 || certData)\">\n            <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n            <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n              <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div>\n          </div> -->\n\n          <!-- <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n            <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n          </div> -->\n        </ng-container>\n\n        <ng-container *ngIf=\" (actionBtnStatus === 'grant' && !(isMobile && content?.isInIntranet) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && content?.children.length === 0 && !content?.artifactUrl?.length ) &&\n                      !( contentReadData?.primaryCategory === primaryCategory.COURSE && batchData?.enrolled ) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.RESOURCE && !content?.artifactUrl)) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.PROGRAM) &&\n                      !(contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL)\">\n          <ng-container *ngIf=\"contentReadData?.primaryCategory !== primaryCategory.RESOURCE  && !enrollBtnLoading\">\n            <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n              (click)=\"handleEnrollment()\" [ngClass]=\"{'disable-start-btn': !canEnroll()}\">\n              <ng-container>\n                {{ 'apptochome.enroll' | translate }}\n              </ng-container>\n            </a>\n            <!-- <ng-container *ngIf=\"isAcbpCourse\">\n              <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n            <!-- <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n              <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </ng-container> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n\n      <!-- PRogram & mandatory course block -->\n      <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n        <ng-container\n          *ngIf=\"contentReadData?.primaryCategory === primaryCategory.PROGRAM || contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL\">\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && (contentReadData?.batches && !batchData?.enrolled)\">\n            <ng-container\n              *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && !contentReadData?.batches[0].endDate\">\n              <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{'apptochome.enroll' | translate}}\n                </ng-container>\n              </a>\n              <!-- <ng-container *ngIf=\"isAcbpCourse\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpCourse && !monthlyCapExceed && userEnrollmentList && !userEnrollmentList.length\">\n                <ws-app-karmapoints-panel [btntype]=\"'Enroll'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container> -->\n            </ng-container>\n            <ng-container *ngIf=\"!forPreview || isInIFrame\">\n              <ng-container\n                *ngIf=\"((contentReadData?.primaryCategory !== primaryCategory.RESOURCE)  && !enrollBtnLoading) && contentReadData?.batches[0].endDate\">\n                <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                  [userEnrollmentList]=\"userEnrollmentList\" [analytics]=\"analytics\"\n                  (programEnrollCall)=\"programEnrollCall($event)\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                  [contentReadData]=\"contentReadData\">\n                </ws-app-toc-banner>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"(courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory) && !contentReadData?.batches && !batchData?.enrolled && !enrollBtnLoading\">\n            No Batches\n          </ng-container>\n          <ng-container\n            *ngIf=\"courseCategory?.MODERATED_PROGRAM !== contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container\n              *ngIf=\"!(contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) && contentReadData?.primaryCategory !== primaryCategory.MANDATORY_COURSE_GOAL\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvited' | translate }} </span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container\n            *ngIf=\"!isBatchInProgress && courseCategory?.MODERATED_PROGRAM === contentReadData?.courseCategory && !enrollBtnLoading\">\n            <ng-container *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA'\">\n              <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n                {{getStartDate}}!</span>\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"isBatchInProgress &&\n                        ( actionBtnStatus === 'grant' &&\n                          !(isMobile && content?.isInIntranet) &&\n                          (contentReadData?.primaryCategory === primaryCategory.PROGRAM && currentCourseBatchId) ||\n                          (contentReadData?.primaryCategory === primaryCategory.MANDATORY_COURSE_GOAL && currentCourseBatchId)\n                        )\">\n            <a *ngIf=\"showStart.show && !isPostAssessment\"\n              [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n              [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n                <ng-container *ngIf=\"!forPreview || isInIFrame\">\n                  {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                    translateLabels('resume', 'apptochome') :\n                    translateLabels('start', 'apptochome') }}\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"content?.completionPercentage === 100\">\n                {{ (resumeData) || content?.completionPercentage === 100 ? \"Start again\" : \"Start\" }}\n              </ng-container>\n            </a>\n            <a *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\" [routerLink]=\"firstResourceLink?.url\"\n              class=\"flex action-button justify-center resume\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame\">{{ 'apptochome.takeAssessment' | translate\n                }}</ng-container>\n            </a>\n            <!-- <div *ngIf=\"!isPostAssessment && (!content?.completionPercentage || content?.completionPercentage < 100)\">\n              <ng-container *ngIf=\"isAcbpClaim\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n              <ng-container *ngIf=\"!isAcbpClaim && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Resume'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </ng-container>\n            </div> -->\n            <!-- <div *ngIf=\"!isPostAssessment && (content?.completionPercentage === 100)\">\n              <div *ngIf=\"isAcbpCourse && isAcbpClaim && !isClaimed\">\n                <ws-app-karmapoints-panel [btntype]=\"'ACBP CLAIM'\" [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating}\" [data]=\"kparray\" [btnCategory]=\"'claim'\"\n                  (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && !monthlyCapExceed\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n              <div *ngIf=\"!isAcbpCourse && monthlyCapExceed && !isCompletedThisMonth\">\n                <ws-app-karmapoints-panel [btntype]=\"'Start again'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n              </div>\n            </div>\n            <div *ngIf=\"isPostAssessment && showTakeAssessment?.post_assessment\">\n              <ws-app-karmapoints-panel [btntype]=\"'Take Assessment'\" [data]=\"kparray\"></ws-app-karmapoints-panel>\n            </div> -->\n          </ng-container>\n        </ng-container>\n      </ng-container>\n\n      <ng-container\n        *ngIf=\"isBatchInProgress && (contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && batchData?.enrolled) && !enrollBtnLoading\">\n        <a *ngIf=\"showStart.show && !isPostAssessment\" (click)=\"raiseTelemetryForPublic()\"\n          [routerLink]=\"resumeData ? resumeDataLink?.url : firstResourceLink?.url\"\n          [queryParams]=\"resumeData ? generateQuery('RESUME') : generateQuery('START')\"\n          class=\"flex action-button justify-center resume\">\n          <ng-container *ngIf=\"!content?.completionPercentage || content?.completionPercentage < 100\">\n            <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n              {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                translateLabels('resume', 'apptochome') :\n                translateLabels('resume', 'apptochome') }}\n            </ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">\n            {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n            translateLabels('resume', 'apptochome') }}\n          </ng-container>\n        </a>\n      </ng-container>\n\n      <ng-container *ngIf=\"enrollBtnLoading\">\n        <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'36px'\"\n          [bindingClass]=\"'flex rounded h-8'\"></ws-widget-skeleton-loader>\n      </ng-container>\n\n      <!-- Curated program block -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.CURATED_PROGRAM && !batchData?.enrolled && !enrollBtnLoading\">\n        <a class=\"flex action-button justify-center resume\" *ngIf=\"!forPreview || isInIFrame\"\n          (click)=\"handleEnrollment()\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- STANDALONE_ASSESSMENT black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" (click)=\"handleEnrollment()\"\n          *ngIf=\"!forPreview || isInIFrame\">\n          <ng-container>\n            {{ 'apptochome.enroll' | translate }}\n          </ng-container>\n        </a>\n      </ng-container>\n      <!-- INVITE ONLY STANDALONE ASSESSMENT block-->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && !batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n\n        <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewForInviteOnlyAssessment\">\n          <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.youAreNotInvitedForAssessment' | translate }}\n          </span>\n        </ng-container>\n      </ng-container>\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && isBatchInProgress && !enrollBtnLoading && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && !!currentCourseBatchId && getStartDate === 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.noActiveBatches' | translate }}</span>\n      </ng-container>\n      <ng-container\n        *ngIf=\"!isBatchInProgress && currentCourseBatchId && getStartDate !== 'NA' && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n        <span class=\"font-bold shadow-lg text-info-div\">{{ 'apptochome.batchWillStart' | translate }}\n          {{getStartDate}}!</span>\n      </ng-container>\n\n      <!-- STANDALONE_ASSESSMENT enrolled black -->\n      <ng-container\n        *ngIf=\"contentReadData?.primaryCategory === primaryCategory.STANDALONE_ASSESSMENT && batchData?.enrolled && !enrollBtnLoading && contentReadData?.courseCategory !== 'Invite-Only Assessment'\">\n        <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n          [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n          <ng-container *ngIf=\"content?.completionPercentage === 100\">{{ 'apptochome.takeTestAgain' | translate\n            }}</ng-container>\n          <ng-container *ngIf=\"content?.completionPercentage < 100\">{{ 'apptochome.takeTest' | translate\n            }}</ng-container>\n        </a>\n      </ng-container>\n      <!-- BLENDED_PROGRAM block -->\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n\n        <ng-container *ngIf=\"batchData?.workFlow?.wfInitiated &&\n                      !(batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REJECTED ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.WITHDRAWN ||\n                      batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.REMOVED)\">\n          <div class=\"ws-mat-accent-text ws-mat-accent-light-bg flex items-center justify-center statusMsg\">\n            <p class=\"margin-remove-bottom font-bold\">\n              {{ 'apptochome.requestUnderReview' | translate }}\n            </p>\n          </div>\n        </ng-container>\n        <ng-container>\n          <a *ngIf=\"showStart.show && batchData?.workFlow?.wfInitiated && batchData?.workFlow?.wfItem?.currentStatus === WFBlendedProgramStatus.APPROVED\"\n            [routerLink]=\"isBatchInProgress? (resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url : '' \"\n            (click)=\"raiseTelemetryForPublic()\"\n            [queryParams]=\"isBatchInProgress ? (resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START') : '' \"\n            class=\"flex action-button justify-center resume\" [ngClass]=\"{'disable-start-btn': !isBatchInProgress}\">\n            <ng-container *ngIf=\"(!content?.completionPercentage || content?.completionPercentage < 100) && !certData\">\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authView\">\n                {{ resumeData && (content?.completionPercentage < 100 && content?.completionPercentage> 0) ?\n                  translateLabels('resume', 'apptochome') :\n                  translateLabels('start', 'apptochome') }}\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionPercentage === 100 || certData\">\n              {{ resumeData || content?.completionPercentage === 100 ? translateLabels('Start again', 'apptochome') :\n              translateLabels('start', 'apptochome') }}\n            </ng-container>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"actionBtnStatus == 'reject' && content?.registrationUrl\">\n        <a [href]=\"content?.registrationUrl\" target=\"_blank\" class=\"flex action-button justify-center\">{{\n          'apptochome.register' | translate }}</a>\n      </ng-container>\n\n    </div>\n  </ng-template>\n\n  <ng-template #progressFunctionality>\n    <div class=\"flex flex-row gap-4\">\n      <div class=\"flex-1\">\n        <div class=\"flex flex-col gap-2\">\n          <div class=\"flex flex-row gap-4 text-sm\">\n            <div class=\"flex-1 text-xs\">{{ 'apptocsinglepage.overallProgress' | translate }}</div>\n            <div class=\"text-xs\" *ngIf=\"content?.completionPercentage > 0\"> {{ content?.completionPercentage }} %</div>\n          </div>\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" [progress]=\"content?.completionPercentage\" [progressType]=\"'percentage'\"\n            [customClassName]=\"'content-progress'\">\n          </ws-widget-content-progress>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"contentCompletionPercent >= 50\">\n        <button mat-stroked-button color=\"accent\" type=\"button\" class=\"rate-button\"\n          (click)=\"openFeedbackDialog(content)\">\n          <mat-icon class=\"nodtranslate\">star_purple500</mat-icon>\n          <ng-container *ngIf=\"!userRating\">\n            <div>{{ 'apptocsinglepage.rateNow' | translate }}</div>\n          </ng-container>\n          <ng-container *ngIf=\"userRating\">\n            <div>{{ 'apptocsinglepage.editRating' | translate }}</div>\n          </ng-container>\n        </button>\n      </ng-container>\n    </div>\n  </ng-template>\n\n  <div class=\"toc-banner\">\n    <div class=\"flex flex-row gap-6 fixed-width\">\n      <div class=\"banner-details toc-content\" #bannerDetails>\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"mobile-back-btn\" (click)=\"goBack()\">\n            <mat-icon class=\"text-white\">arrow_back</mat-icon>\n          </div>\n          <div class=\"flex items-center justify-between gap-4\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-row gap-2\">\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n                  <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                  <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                  <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                    <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                      translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                  </ng-container>\n                </div>\n                <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\"\n                  *ngIf=\"contentReadData?.additionalTags?.includes('iGOT Specialization')\">\n                  <img class=\"approved-icon\" src=\"./assets/icons/approved.svg\" alt=\"approved\">\n                  <div class=\"text-xs font-bold text-white leading-3 nodtranslate\">{{\n                    'cardcontentv2.iGOTSpecializationProgram' | translate }}</div>\n                </div>\n                <!-- Knowledge level block for search box -->\n                <!-- {{content?.difficultyLevel}} -->\n                <div *ngIf=\"contentReadData?.difficultyLevel\" class=\"knowledge-level-container\">\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'beginner'\"\n                    class=\"level-badge beginner\">\n                    <!-- <span *ngIf=\"false\" class=\"level-badge beginner\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n                      <path\n                        d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n                        fill=\"#49C951\" />\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'intermediate'\"\n                    class=\"level-badge intermediate\">\n                    <!-- <span *ngIf=\"true\" class=\"level-badge intermediate\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n                      <path\n                        d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n                        fill=\"#1B4CA1\" />\n                      <path\n                        d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n                        fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                  <span *ngIf=\"contentReadData?.difficultyLevel?.toLowerCase() === 'advanced'\"\n                    class=\"level-badge advanced\">\n                    <!-- <span *ngIf=\"false\" class=\"level-badge advanced\"> -->\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n                      <g clip-path=\"url(#clip0)\">\n                        <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n                        <path\n                          d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n                          fill=\"#FF8268\" />\n                        <path\n                          d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n                          fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                        <path\n                          d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n                          fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n                      </g>\n                      <defs>\n                        <clipPath id=\"clip0\">\n                          <rect width=\"16\" height=\"16\" fill=\"white\" />\n                        </clipPath>\n                      </defs>\n                    </svg>\n                    {{contentReadData?.difficultyLevel}}\n                  </span>\n                </div>\n\n                <div class=\"flex items-center\" *ngIf=\"cbPlanEndDate\">\n                  <div class=\"flex items-center due-tag text-xs leading-3\"\n                    [ngClass]=\"{'due-warning': cbPlanDuration === nsCardContentData.UPCOMING, 'due-overdue': cbPlanDuration === nsCardContentData.OVERDUE, 'due-success': cbPlanDuration === nsCardContentData.SUCCESS}\">\n                    {{ 'common.dueBy' | translate }} - &nbsp;<span class=\"font-bold\">{{ cbPlanEndDate | date: 'd\n                      MMM,y'}}</span>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\">\n              <div class=\"new-version-chip rounded-2xl\" (click)=\"navigateToNewVersion()\"\n                (keydown)=\"navigateToNewVersion()\">\n                <span class=\"new-version-text nodtranslate\">{{ 'apptoc.newVersion' | translate }}</span>\n              </div>\n            </ng-container>\n            <div class=\"flex items-center text-white mob-share\" *ngIf=\"canShare\">\n              <mat-icon class=\"nodtranslate\" (click)=\"onClickOfShare()\">share</mat-icon>\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-2\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n                [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            </ng-container>\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold nodtranslate\">{{\n                handleCapitalize(contentReadData?.name) }}</div>\n              <div class=\"text-sm sm:text-base source-text font-semibold break-words nodtranslate\" #contentSource\n                [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{ 'cardcontentv2.by'\n                | translate }} {{ contentReadData?.source }}</div>\n            </ng-container>\n          </div>\n\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n            <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex gap-4 items-center\">\n              <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\"\n                (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n                <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n                  <mat-icon class=\"nodtranslate\">grade</mat-icon>\n                  <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n                </div>\n                <div class=\"separator\"></div>\n                <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}\n                </div>\n              </div>\n              <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n                <div class=\"most-enrolled-chip text-xs leading-3\">\n                  <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' |\n                    translate }}</span>\n                  <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' |\n                    translate }}</span>\n                </div>\n              </div>\n              <div class=\"flex items-center\" *ngIf=\"contentReadData?.retirementDate\">\n                <div class=\"new-version-pill text-xs leading-3\" *ngIf=\"contentReadData?.status !== 'Retired'\">\n                  <span>{{ 'apptoc.pendingRetirement' | translate }}</span>\n                </div>\n                <div class=\"new-version-retire-pill text-xs leading-3\" *ngIf=\"contentReadData?.status === 'Retired'\">\n                  <span>{{ 'apptoc.retired' | translate }}</span>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n              [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader && contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON\">\n            <div class=\"text-xs leading-4 source-text nodtranslate\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n              contentReadData?.sYS_INTERNAL_LAST_UPDATED_ON | date: 'MMM d, y' }})</div>\n          </ng-container>\n          <ng-container>\n            <div class=\"flex flex-row gap-2\" *ngIf=\"languageList?.length > 1\">\n              <mat-chip-list class=\"lang-chips\">\n                <!-- Show up to 6 chips -->\n                <ng-container *ngFor=\"let lang of languageList | slice:0:5; let i = index\">\n                  <mat-chip class=\"matchip-custom\" selectable=\"true\"\n                    [selected]=\"lang?.identifier === selectedLanguage?.identifier\" (click)=\"onLanguageSelect(lang)\">\n                    {{ lang.name || lang.value }}\n                  </mat-chip>\n                </ng-container>\n\n                <!-- \"More\" chip if there are more than 6 languages -->\n                <ng-container *ngIf=\"languageList.length > 5\">\n                  <mat-chip [matMenuTriggerFor]=\"moreLanguagesMenu\" selectable=\"false\" class=\"more-chip matchip-custom\"\n                    [selected]=\"isSelectedInMoreDropdown()\">\n                    More <mat-icon class=\"mat-icon\">keyboard_arrow_down</mat-icon>\n                  </mat-chip>\n                  <mat-menu #moreLanguagesMenu=\"matMenu\">\n                    <mat-radio-group class=\"mat-radio-group flex flex-col gap-2 p-3\" [value]=\"selectedLanguage\">\n                      <mat-radio-button *ngFor=\"let lang of languageList | slice:5\" [value]=\"lang\"\n                        [checked]=\"lang?.identifier === selectedLanguage?.identifier\" (change)=\"onLanguageSelect(lang)\">\n                        {{ lang.displayName || lang.name || lang }}\n                      </mat-radio-button>\n                    </mat-radio-group>\n                  </mat-menu>\n                </ng-container>\n              </mat-chip-list>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"flex flex-row gap-6 fixed-width\">\n    <div class=\"toc-content\">\n      <ng-container *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM &&\n        selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails &&\n        selectedBatchData?.content[0]?.enrollmentEndDate\">\n        <div class=\"location-details mt-6\">\n          <div class=\"flex items-center gap-4 pb-3\">\n            <mat-icon class=\"location-icon nodtranslate\">\n              location_on\n            </mat-icon>\n            <div class=\"loc-desc\">\n              {{selectedBatchData?.content[0]?.batchAttributes?.batchLocationDetails}}\n            </div>\n          </div>\n          <div class=\"flex items-center gap-4\">\n            <mat-icon class=\"event-icon nodtranslate\">\n              event</mat-icon>\n            <div class=\"loc-desc\">\n              Last date of enrollment - {{selectedBatchData?.content[0]?.enrollmentEndDate | date: 'dd/MM/yyyy'}}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"recommendedCoursesId && !feedbackGiven\">\n        <div class=\"px-4 py-3 mt-6 relevent-wrapper\">\n          <div class=\"flex gap-4 items-center flex-wrap flex justify-center md:justify-start\">\n            <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"56.89\" height=\"64\">\n            <div class=\"relevent-info\">\n              <span class=\"font-bolder text-sm relevent-heading block mb-1\">{{ 'home.tocReleventHeading' | translate\n                }}</span>\n              <span class=\"relevent-subinfo font-normal text-sm block\">{{ 'home.tocReleventSubHeading' | translate\n                }}</span>\n            </div>\n            <div class=\"flex flex-middle relevant-container\">\n              <div class=\"flex flex-middle relevent-normal relevent-btn py-2 px-4 relevant-box\"\n                (mouseenter)=\"isReleventBtnHovered = true\" (mouseleave)=\"isReleventBtnHovered = false\"\n                (click)=\"handleAcceptRelevent()\">\n                <img [src]=\"isReleventBtnHovered && !isRelevent ? SAKSHAMAI_ICON_LOADER : SAKSHAMAI_ICON_NORMAL\"\n                  alt=\"loader\" width=\"16\" height=\"16\" class=\"mr-2\">\n                <span class=\"text-relevent ff-lato text-sm font-bold\">{{ 'home.relevent' | translate }}</span>\n              </div>\n\n              <div class=\"flex flex-middle no-button ml-8\" (click)=\"handleDeclineRelevent()\">\n                <mat-icon class=\"mat-icon text-no mr-1 nodtranslate\">thumb_down</mat-icon>\n                <span class=\"text-no ff-lato text-sm font-bold\">{{ 'home.no' | translate }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <div class=\"pb-4 lg:py-4\"\n        *ngIf=\"contentReadData?.identifier && content?.identifier && baseContentReadData?.identifier\">\n        <!-- Overall progress functionality -->\n        <div class=\"mobile-progress\">\n          <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n        </div>\n        <!-- Overall progress functionality -->\n        <ws-widget-content-toc [content]=\"content\" [componentName]=\"'toc'\" [pathSet]=\"pathSet\"\n          [tocStructure]=\"tocStructure\" [forPreview]=\"forPreview\" [isEnrolled]=\"batchData?.enrolled\"\n          [resumeData]=\"resumeData\" [batchData]=\"selectedBatchData\" [skeletonLoader]=\"skeletonLoader\"\n          [changeTab]=\"changeTab\" [hierarchyMapData]=\"tocSvc?.hashmap\" [selectedBatchData]=\"selectedBatchData\"\n          [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"\n          [kparray]=\"kparray\" (playResumeForAI)=\"playResumeForAI()\" (enrollUserToAI)=\"enrollUserToAI()\"\n          [contentReadData]=\"contentReadData\" [baseContentReadData]=\"baseContentReadData\" [languageList]=\"languageList\"\n          [lockCertificate]=\"lockCertificate\" (trigerCompletionSurveyForm)=\"openSurveyFormPopup($event)\"\n          (resumeContent)=\"resumeContentData()\"></ws-widget-content-toc>\n        <div class=\"mob-tip-for-learner\">\n          <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n            <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n          </div>\n        </div>\n      </div>\n    </div>\n\n\n    <div class=\"right-container\">\n\n      <!-- if needed sticky of right container add this to below div => #rightContainer -->\n      <div class=\"right-content\">\n        <div class=\"right-content-inner\">\n          <ng-container *ngIf=\"skeletonLoader\">\n            <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n              [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n          </ng-container>\n          <ng-container *ngIf=\"!skeletonLoader\">\n            <div class=\"flex flex-col image-div\"\n              [ngStyle]=\"{\n        'background-image': 'url(' + contentReadData?.posterImage + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n              [ngClass]=\"{'image-backdrop': scrolled}\">\n              <div class=\"flex flex-col justify-between text-container\">\n                <div class=\"flex items-center gap-4 justify-between\"\n                  [ngClass]=\"{'justify-between': scrolled, 'justify-end': !scrolled}\">\n                  <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\" *ngIf=\"scrolled\">\n                    <mat-icon class=\"ws-mat-orange-text nodtranslate\">video_library</mat-icon>\n                    <ng-container *ngIf=\"contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.courseCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                    <ng-container *ngIf=\"!contentReadData?.courseCategory\">\n                      <div class=\"text-xs font-bold text-white leading-3\">{{\n                        translateLabel(contentReadData?.primaryCategory, 'searchfilters') }}</div>\n                    </ng-container>\n                  </div>\n                  <div (click)=\"onClickOfShare()\" class=\"flex flex-row items-center justify-end gap-2 share-tag\"\n                    *ngIf=\"canShare && !forPreview\">\n                    <mat-icon class=\"nodtranslate\">share</mat-icon>\n                    <div>{{ 'apptocsinglepage.share' | translate }}</div>\n                  </div>\n                </div>\n                <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n                  <div class=\"text-xl leading-6 text-white font-bold\">{{ handleCapitalize(contentReadData?.name) }}\n                  </div>\n                  <div class=\"text-sm source-text font-semibold break-words\" #contentSource\n                    [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{contentReadData?.source}}\">{{\n                    'cardcontentv2.by' | translate }} {{ contentReadData?.source }}</div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n\n          <div class=\"flex flex-col gap-4 p-5 border-bottom\">\n            <div class=\"flex flex-col gap-1  cursor-pointer switch-version\"\n              *ngIf=\"!skeletonLoader && contentReadData?.contentVersionInfo?.identifier\"\n              (click)=\"navigateToNewVersion()\" (keydown)=\"navigateToNewVersion()\">\n              <span class=\"btn-switch\">{{ 'apptoc.switchToNewVersion' | translate }}</span>\n            </div>\n\n            <div class=\"flex flex-col gap-4\"\n              *ngIf=\"contentReadData && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n              <div class=\"flex flex-row gap-3 justify-around\">\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.content[0]?.batchAttributes?.currentBatchSize\n                    || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.batchSize' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.totalApplied || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalApplied' | translate }}</div>\n                </div>\n                <div class=\"batch-info\">\n                  <div class=\"font-base font-bold\">{{ selectedBatchData?.userCount?.enrolled || '0' }}</div>\n                  <div class=\"batch-label\">{{ 'apptoc.totalEnrolled' | translate }}</div>\n                </div>\n              </div>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && !preAssessmentCompletionStatus\">\n                <a class=\"flex action-button enroll-btn justify-center resume\"\n                  *ngIf=\"contentReadData?.preEnrolmentResources?.length\" (click)=\"routeToPreAssessent()\">\n                  <ng-container>\n                    {{ 'apptochome.preEnroll' | translate }}\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM && preAssessmentCompletionStatus\">\n                <a class=\"flex preenrolldone-btn justify-center resume\">\n                  <ng-container>\n                    {{ 'apptochome.preEnrollDone' | translate }}<img src=\"/assets/icons/Accept_icon.png\" alt=\"tick\"\n                      class=\"tick-icon\">\n                  </ng-container>\n                </a>\n              </ng-container>\n              <ng-container\n                *ngIf=\"timer && timer.days >= 0 && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM\">\n                <div class=\"flex flex-col gap-6 batch-timer\">\n                  <div class=\"flex flex-row\">\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                    <div class=\"flex\">\n                      <div class=\"timer-label\">{{ 'apptocsinglepage.batchStartsIn' | translate }}</div>\n                    </div>\n                    <div class=\"flex-1\">\n                      <div class=\"flex underline\"></div>\n                    </div>\n                  </div>\n                  <div class=\"flex flex-row gap-4 justify-center\">\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.days || 0 }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.days' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? timer.hours + 1 : timer.hours }}\n                      </div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.hours' | translate }}</div>\n                    </div>\n                    <div class=\"flex items-center counter-label\">\n                      :\n                    </div>\n                    <div class=\"flex flex-row gap-1 items-center\">\n                      <div class=\"text-4xl leading-10 counter\">{{ timer.min === 60 ? 00 : timer.min }}</div>\n                      <div class=\"counter-label\">{{ 'apptocsinglepage.minutes' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"!forPreview || isInIFrame; else authViewBtn\">\n                <ng-container *ngIf=\"!mobile1200 && (\n         !contentReadData?.preEnrolmentResources?.length ||\n         (contentReadData?.preEnrolmentResources?.length && (preAssessmentCompletionStatus ||  !preAssessmentRequiredFlag))\n       )\">\n\n                  <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n                    [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n                    [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\"\n                    [contentReadData]=\"contentReadData\">\n                  </ws-app-toc-banner>\n                </ng-container>\n              </ng-container>\n            </div>\n\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'40px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n              <ws-widget-skeleton-loader [width]=\"'336px'\" [height]=\"'68px'\"\n                [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-4\">\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"content?.isInIntranet && showIntranetMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>\n                  <ng-container>{{ 'apptochome.viewedInIntranet' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showInstructorLedMsg\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.notAvailableOnline' | translate }}</ng-container>\n                </div>\n                <div class=\"flex flex-row items-center gap-2 info-div\" *ngIf=\"showStart.msg === 'youtubeForbidden'\">\n                  <mat-icon class=\"nodtranslate\">info</mat-icon>&nbsp;\n                  <ng-container>{{ 'apptochome.youtubeContentBlocked' | translate }}</ng-container>\n                </div>\n                <div *ngIf=\"showBtn\">\n                  <a href=\"{{ cscmsUrl }}\" target=\"_blank\" class=\"flex action-button justify-center\">\n                    {{ 'apptochome.applyForPhysicalTraining' | translate }}</a>\n                </div>\n\n                <!-- Overall progress functionality -->\n                <ng-container *ngIf=\"content?.completionStatus <= 2 && isBatchInProgress\">\n                  <ng-container [ngTemplateOutlet]=\"progressFunctionality\"></ng-container>\n                </ng-container>\n                <!-- Overall progress functionality -->\n\n                <!-- <div *ngIf=\"resumeData && !userRating\"> -->\n                <!-- <ws-app-karmapoints-panel [btntype]=\"'Rate this course'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel> -->\n                <!-- </div> -->\n\n                <!-- <div *ngIf=\"resumeData && userRating\">\n                <ws-app-karmapoints-panel [btntype]=\"'Edit rating'\" [data]=\"kparray\"\n                  [pCategory]=\"contentReadData?.primaryCategory\"></ws-app-karmapoints-panel>\n              </div> -->\n\n                <ng-container\n                  *ngIf=\"actionBtnStatus !== 'wait' && contentReadData?.status !== 'Deleted' && contentReadData?.status !== 'Expired'\">\n                  <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n                </ng-container>\n              </div>\n\n              <div class=\"karma-points-div\">\n                <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n                  [content]=\"content\"\n                  [condition]=\"{isPostAssessment: isPostAssessment, content: content, isAcbpCourse: isAcbpCourse, isClaimed: isClaimed, monthlyCapExceed: monthlyCapExceed, isCompletedThisMonth: isCompletedThisMonth, showTakeAssessment: showTakeAssessment, userEnrollmentList: userEnrollmentList, isCompletedThisMonth: isCompletedThisMonth, resumeData: resumeData, userRating: userRating, enrollBtnLoading: enrollBtnLoading, primaryCategory: primaryCategory, currentCourseBatchId: currentCourseBatchId, isAcbpClaim: isAcbpClaim}\"></ws-widget-karma-points>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-wrap gap-6\">\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n                <div class=\"flex flex-col items-center gap-2 kpi-loader-div\">\n                  <ws-widget-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'40px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  <ws-widget-skeleton-loader [width]=\"'48px'\" [height]=\"'8px'\"\n                    [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <ws-widget-toc-kpi-values [content]=\"content\" [tocStructure]=\"tocStructure\"\n                [showInstructorLedMsg]=\"showInstructorLedMsg\" [contentReadData]=\"contentReadData\"\n                [languageList]=\"languageList\"></ws-widget-toc-kpi-values>\n            </ng-container>\n          </div>\n\n          <div class=\"flex flex-col gap-8 p-5\">\n            <ng-container *ngIf=\"skeletonLoader\">\n              <div class=\"flex flex-col gap-4\" *ngFor=\"let i of [1, 2]\">\n                <ws-widget-skeleton-loader [width]=\"'72px'\" [height]=\"'20px'\"\n                  [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n\n                <div class=\"flex flex-row items-center gap-3\">\n                  <ws-widget-skeleton-loader [width]=\"'36px'\" [height]=\"'36px'\"\n                    [bindingClass]=\"'rounded-full'\"></ws-widget-skeleton-loader>\n                  <div class=\"flex flex-col gap-2\">\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'20px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                    <ws-widget-skeleton-loader [width]=\"'124px'\" [height]=\"'12px'\"\n                      [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"!skeletonLoader\">\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorDetails)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.authors' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let author of handleParseJsonData(contentReadData?.creatorDetails)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"author?.photo || ''\" [name]=\"author?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(author?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.author' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\" *ngIf=\"handleParseJsonData(contentReadData?.creatorContacts)?.length\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.creators' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\"\n                  *ngFor=\"let creeator of handleParseJsonData(contentReadData?.creatorContacts)\">\n                  <div class=\"flex items-center justify-center\">\n                    <ws-widget-avatar-photo [randomColor]=\"true\" [datalen]=\"1\" [size]=\"'round-m'\"\n                      [photoUrl]=\"creeator?.photo || ''\" [name]=\"creeator?.name\">\n                    </ws-widget-avatar-photo>\n                  </div>\n                  <div class=\"flex flex-col gap-1 justify-center\">\n                    <div class=\"font-bold\">{{ handleCapitalize(creeator?.name, 'name') }}</div>\n                    <div class=\"text-xs leading-3\">{{ 'apptocsinglepage.creator' | translate }}</div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex flex-col gap-3\"\n                *ngIf=\"contentReadData?.source  && (contentCreatorData && contentCreatorData?.length)\">\n                <div class=\"text-base font-bold\">{{ 'apptocsinglepage.provider' | translate }}</div>\n                <div class=\"flex flex-row gap-4 items-center\" *ngFor=\"let creator of contentCreatorData\">\n                  <div class=\"flex provider-logo-div\">\n                    <img *ngIf=\"contentReadData?.creatorLogo\" [src]=\"contentReadData?.creatorLogo\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                    <img *ngIf=\"!contentReadData?.creatorLogo\" class=\"mat-icon\"\n                      src=\"/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg\"\n                      alt=\"{{ 'apptocsinglepage.provider' | translate }}\" />\n                  </div>\n                  <div class=\"text-sm word-break cursor-pointer\" *ngIf=\"contentReadData?.createdFor?.length\"\n                    (click)=\"raiseTelemeteryForProvider(contentReadData?.source, contentReadData?.createdFor[0])\"\n                    [routerLink]=\"['/app/learn/browse-by/provider', contentReadData?.source, contentReadData?.createdFor[0], 'micro-sites']\">\n                    {{ handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                  <div class=\"text-sm word-break\" *ngIf=\"!contentReadData?.createdFor?.length\">{{\n                    handleCapitalize(contentReadData?.source, 'source') }}\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"learnAdvisoryData && learnAdvisoryData?.length\">\n          <ws-widget-tips-for-learner-card [learnAdvisoryData]=\"learnAdvisoryData\"></ws-widget-tips-for-learner-card>\n        </div>\n      </div>\n\n\n\n    </div>\n  </div>\n  <div class=\"mobile-enroll-div\"\n    [ngClass]=\"{'bg-white': contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM }\">\n    <ng-container *ngIf=\"content && contentReadData?.primaryCategory === primaryCategory.BLENDED_PROGRAM \">\n      <div class=\"mb-2\" *ngIf=\"mobile1200 && !forPreview || isInIFrame; else authViewBtn\">\n        <ws-app-toc-banner role=\"banner\" [banners]=\"banners\" [forPreview]=\"forPreview\" [content]=\"content\"\n          [userEnrollmentList]=\"userEnrollmentList\" (withdrawOrEnroll)=\"withdrawOrEnroll($event)\"\n          [analytics]=\"analytics\" [resumeData]=\"resumeData\" [batchData]=\"batchData\" [contentReadData]=\"contentReadData\">\n        </ws-app-toc-banner>\n      </div>\n    </ng-container>\n    <ng-container [ngTemplateOutlet]=\"enrollFunctionality\"></ng-container>\n  </div>\n\n  <ws-app-share-toc *ngIf=\"enableShare\" [rootOrgId]=\"rootOrgId\" [content]=\"content\"\n    (resetEnableShare)=\"resetEnableShare($event)\" [baseContentReadData]=\"baseContentReadData\"></ws-app-share-toc>\n</ng-container>\n<ng-template #noDataFound>\n  <div\n    class=\"error-not-found flex flex-wrapped margin-left-m margin-top-xl margin-right-m flex-col justify-center align-items-center text-center\">\n    <div class=\"error-logo\">\n      <div class=\"error-message ws-mat-primary-text font-weight-bold\">\n        The page you requested cannot be found\n      </div>\n    </div>\n    <!-- <div class=\"error-support\">\n      <div class=\"support-message\" >We have updated our web site and many URLs have changed.</div>\n      <div class=\"support-message\" >You might want to:</div>\n    </div> -->\n  </div>\n\n</ng-template>\n\n<ng-template #authView>{{'apptochome.view' | translate}}</ng-template>\n\n<ng-template #authViewBtn i18n>\n  <ng-container *ngIf=\"displayViewBtn\">\n    <a (click)=\"raiseTelemetryForPublic($event)\"\n    [routerLink]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? resumeDataLink?.url : firstResourceLink?.url)\"\n    [queryParams]=\"shouldShowSurveyPopup() ? null : ((resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START'))\"\n    class=\"flex action-button justify-center\">\n    {{'apptochome.view' | translate}}\n  </a>\n  </ng-container>\n</ng-template>\n<ng-template #authViewForInviteOnlyAssessment>\n  <ng-container *ngIf=\"forPreview && contentReadData?.courseCategory === 'Invite-Only Assessment'\">\n    <a class=\"flex action-button justify-center resume\" [routerLink]=\"firstResourceLink?.url\"\n      [queryParams]=\"(resumeData && !certData) ? generateQuery('RESUME') : generateQuery('START')\">\n      <ng-container>{{ 'apptochome.takeTest' | translate }}</ng-container>\n    </a>\n  </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.approved-icon{width:12px;height:12px}.preenrolldone-btn{opacity:1;color:#1d8923;font-family:Lato-Bold,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:2px solid #1D8923;cursor:pointer;height:40px;box-sizing:border-box}.preenrolldone-btn img{margin-left:8px;margin-top:-2px}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}@media screen and (max-width: 576px){.toc-banner .banner-details{padding-top:10px;padding-bottom:20px}}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.toc-banner .new-version-pill{background-color:#f9cb97;border:1px solid rgb(249,203,151);padding:4px;border-radius:2px}.toc-banner .new-version-retire-pill{background-color:#d13924;border:1px solid #d13924;padding:4px;color:#fff;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.mobile-back-btn{display:flex!important;align-items:center;justify-content:flex-start;cursor:pointer;padding:0;margin-bottom:8px;color:#fff!important}.mobile-back-btn mat-icon{font-size:24px!important;width:24px!important;height:24px!important}@media screen and (min-width: 577px){.mobile-back-btn{display:none!important}}.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%}@media (min-resolution: 1.5dppx){.toc-content{max-width:735px}}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{position:absolute;z-index:10;top:132px;padding-bottom:1rem}.right-container .right-content-inner{background-color:#fff;border-radius:12px;width:384px;margin-bottom:1rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.right-container .view-more:hover{background-color:#dcdfe5}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#1b4ca1;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.mob-tip-for-learner{display:none}@media screen and (max-width: 1000px){.mob-tip-for-learner{display:block;width:100%;padding:0 16px;overflow:hidden;box-sizing:border-box}}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto;box-sizing:border-box;height:40px;line-height:24px!important}.rate-button{color:#1b4ca1!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button,.mobile-enroll-div .preenrolldone-btn{min-width:320px;max-width:400px;margin:auto}@media only screen and (max-width: 768px){.new-version-text{font-size:12px!important}.new-version-chip{padding-top:0!important}}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}.location-details{background-color:#1b4ca114;padding:16px;border-radius:4px}.location-details .location-icon,.location-details .event-icon{color:#1b4ca1;height:20px;width:14px;font-size:22px}.location-details .loc-desc{font-family:Lato;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25}.location-details .mat-icon{overflow:visible!important}.batch-timer .underline{border-top:1.5px solid rgba(0,0,0,.16);margin:16px 0}.batch-timer .timer-label{font-size:12px;padding:4px 8px;border:1px solid rgba(0,0,0,.16);border-radius:16px;color:#000000de}.batch-timer .counter{color:#000000de}.batch-timer .counter-label{color:#0006;text-transform:uppercase;font-size:12px;line-height:16px}.relevent-wrapper{background:#1b4ca129;border-radius:12px}.relevent-wrapper .relevent-info{max-width:400px;margin-right:auto}.relevent-wrapper .relevent-info .relevent-heading{font-family:Montserrat;line-height:17.07px;font-weight:600;color:#000!important}.relevent-wrapper .relevent-info .relevent-subinfo{font-family:Lato;line-height:16.8px;color:#545454}.relevent-normal.relevent-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#276de5;background-color:#fff;border-radius:21px;text-decoration:none;overflow:hidden;transition:all .3s ease-in-out}.relevent-normal.relevent-btn:hover{box-shadow:0 1px 10px #276de599}.relevent-normal.relevent-btn{cursor:pointer}.relevent-normal.relevent-btn:before{content:\"\";position:absolute;inset:0;padding:2px 2.5px;border-radius:21px;background:linear-gradient(89.96deg,#f3962f .04%,#276de5 99.96%);-webkit-mask:linear-gradient(white,white) content-box,linear-gradient(white,white);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease-in-out;cursor:pointer}.relevent-normal.relevent-btn:hover:before{opacity:1}.relevant-container{width:max-content}.no-button{opacity:1;transform:scale(1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;color:#1b4ca1;cursor:pointer}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom{background:transparent;border:1px solid #fff;color:#fff!important;cursor:pointer;margin:0!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon{color:#fff!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom mat-icon:hover{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected{background:#fff!important;border:1px solid #fff;color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:hover mat-icon,.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom.mat-chip-selected mat-icon{color:#1b4ca1!important}.theme-igot.day-mode .lang-chips .mat-chip.matchip-custom:after{opacity:0!important;background:transparent}.new-version-chip{gap:10px;padding:2px 8px;background-color:#f3962f;cursor:pointer;position:relative;overflow:hidden}.new-version-chip:before{content:\"\";position:absolute;top:0;left:-100%;width:25%;height:100%;background:linear-gradient(314deg,transparent,rgba(213,210,210,.6),transparent);animation:shimmer 1s infinite}.new-version-chip .new-version-text{font-family:Lato;font-weight:400;font-size:20px;line-height:100%}.btn-switch{font-family:Lato,sans-serif;font-size:14px;font-weight:700;font-style:normal;letter-spacing:.5px;text-align:center;line-height:20px;background:#fff;border-radius:64px;padding:8px 16px;border:none;border:1px solid rgb(243,150,47);color:#f3962f;background:#ef951e29!important}@keyframes shimmer{0%{left:-100%}to{left:100%}}.knowledge-level-container{margin-left:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i7$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: ContentProgressComponent, selector: "ws-widget-content-progress", inputs: ["contentId", "progress", "progressType", "forPreview", "className", "customClassName"] }, { kind: "component", type: AvatarPhotoComponent, selector: "ws-widget-avatar-photo", inputs: ["datalen", "photoUrl", "name", "size", "randomColor", "initials", "showBadge"] }, { kind: "component", type: ContentTocComponent, selector: "ws-widget-content-toc", inputs: ["content", "contentReadData", "initialRouteData", "changeTab", "baseContentReadData", "forPreview", "contentTabFlag", "resumeData", "batchData", "skeletonLoader", "tocStructure", "pathSet", "fromViewer", "hierarchyMapData", "condition", "kparray", "selectedBatchData", "config", "componentName", "isEnrolled", "playResourceId", "sideNavBarOpened", "languageList", "lockCertificate"], outputs: ["playResumeForAI", "enrollUserToAI", "trigerCompletionSurveyForm", "resumeContent"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: ["tocStructure", "content", "contentReadData", "isMobile", "showInstructorLedMsg", "baseContentReadData", "languageList"] }, { kind: "component", type: KarmaPointsComponent, selector: "ws-widget-karma-points", inputs: ["content", "data", "pCategory", "condition", "btnCategory"], outputs: ["clickClaimKarmaPoints"] }, { kind: "component", type: TipsForLearnerCardComponent, selector: "ws-widget-tips-for-learner-card", inputs: ["learnAdvisoryData"] }, { kind: "component", type: AppTocBannerComponent, selector: "ws-app-toc-banner", inputs: ["banners", "content", "resumeData", "analytics", "forPreview", "batchData", "userEnrollmentList", "contentReadData", "clickToShare"], outputs: ["withdrawOrEnroll", "programEnrollCall"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocHomeV2Component, decorators: [{
             type: Component,
@@ -22672,7 +22777,7 @@ class AppTocOverviewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocOverviewComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: AccessControlService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocOverviewComponent, selector: "ws-app-app-toc-overview", inputs: { forPreview: "forPreview" }, ngImport: i0, template: "<div class=\"flex flex-between flex-wrapped mt-4\">\n  <div class=\"meta-section\">\n    <!-- Description : Conditional : If not shown here, will be shown over banner -->\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.description?.enabled &&\n        showDescription &&\n        showSubtitleOnBanner &&\n        content?.description\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.description?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1\" [innerHTML]=\"content?.description\"></div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Content Body -->\n    <mat-card *ngIf=\"tocConfig?.overview?.body?.enabled && content?.body\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.body?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"break-words\" [innerHTML]=\"body\"></div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Learning objective -->\n    <mat-card *ngIf=\"tocConfig?.overview?.learningObjective?.enabled && content?.learningObjective\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.learningObjective?.displayName }}</h2>\n      <mat-card-content>\n        <p class=\"mat-subheading-1\" [innerHTML]=\"content?.learningObjective\"></p>\n      </mat-card-content>\n    </mat-card>\n\n    <!-- Registration instructions -->\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.registrationInstructions?.enabled &&\n        content?.registrationInstructions?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.registrationInstructions?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1 break-words\" [innerHTML]=\"content?.registrationInstructions\"></div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.preContents?.enabled && content?.preContents?.length\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.preContents?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let preContent of content?.preContents\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + preContent.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ preContent.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.postContents?.enabled && content?.postContents?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.postContents?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let postContent of content?.postContents\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + postContent.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ postContent.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.certificationList?.enabled && content?.certificationList?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.certificationList?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let certification of content?.certificationList\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + certification.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ certification.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.studyMaterials?.enabled && content?.studyMaterials?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.studyMaterials?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let studyitem of content?.studyMaterials\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + studyitem.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ studyitem.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.playgroundResources?.enabled && content?.playgroundResources?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.playgroundResources?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let playgroundResource of content?.playgroundResources\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + playgroundResource.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ playgroundResource.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.kArtifacts?.enabled && content?.kArtifacts?.length\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.kArtifacts?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let kArtifact of content?.kArtifacts\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + kArtifact.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ kArtifact.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.equivalentCertifications?.enabled &&\n        content?.equivalentCertifications?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.equivalentCertifications?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let equivalentCertification of content?.equivalentCertifications\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + equivalentCertification.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ equivalentCertification.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.softwareRequirements?.enabled && content?.softwareRequirements?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.softwareRequirements?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let softwareRequirement of content?.softwareRequirements\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [href]=\"softwareRequirement.url\" target=\"blank\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ softwareRequirement.title }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Skills -->\n    <mat-card *ngIf=\"tocConfig?.overview?.skills?.enabled && content?.skills?.length\"\n      class=\"unit-meta-item mat-app-background\">\n      <h2>{{ tocConfig?.overview?.skills?.displayName }}</h2>\n      <mat-chip-list>\n        <mat-chip *ngFor=\"let skill of content?.skills\">{{ skill.name }}</mat-chip>\n      </mat-chip-list>\n    </mat-card>\n    <!-- Requirements -->\n    <mat-card *ngIf=\"tocConfig?.overview?.preRequisites?.enabled && content?.preRequisites\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.preRequisites?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1\" [innerHTML]=\"content?.preRequisites\"></div>\n        <div class=\"margin-top-s\" *ngIf=\"content?.softwareRequirements?.length\">\n          <h3 class=\"mat-h3 margin-bottom-xs\" >Software Requirements</h3>\n          <ng-container *ngFor=\"let requirement of content?.softwareRequirements\">\n            <a *ngIf=\"requirement.url\" class=\"margin-right-s\" mat-stroked-button target=\"_blank\"\n              [href]=\"requirement.url\">\n              {{ requirement.title }}\n            </a>\n            <a mat-stroked-button class=\"margin-right-s\" *ngIf=\"!requirement?.url\">{{ requirement.title }}\n            </a>\n          </ng-container>\n        </div>\n      </mat-card-content>\n    </mat-card>\n\n    <!-- Training (LHub) -->\n    <mat-card *ngIf=\"trainingLHubEnabled && trainingLHubCount$ | async as trainingLHubCount\" class=\"unit-meta-item\">\n      <h2 >Trainings</h2>\n      <h4 class=\"mat-h4\">\n        <ng-container>{{ trainingLHubCount }}</ng-container>\n        <ng-container i18n=\"x trainings available\" *ngIf=\"trainingLHubCount > 1\">\n          trainings available</ng-container>\n        <ng-container i18n=\"1 training available\" *ngIf=\"trainingLHubCount === 1\">\n          training available</ng-container>\n      </h4>\n      <div>\n        \n      </div>\n    </mat-card>\n\n    <!-- Related Topics -->\n    <mat-card class=\"unit-meta-item\" *ngIf=\"tocConfig?.overview?.topics?.enabled && content?.topics?.length\">\n      <h2>{{ tocConfig?.overview?.topics?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex flex-between flex-wrapped\">\n          <a mat-stroked-button class=\"topic-button text-truncate\"\n            *ngFor=\"let topic of content?.topics | pipeLimitTo: (viewMoreRelatedTopics ? 24 : 6)\" [title]=\"topic?.name\"\n            [routerLink]=\"'/app/concept-graph/' + topic.identifier\">\n            {{ topic?.name }}\n          </a>\n        </div>\n        <div *ngIf=\"content?.topics?.length > 6\" class=\"text-right margin-top-xs\">\n          <a mat-button (click)=\"viewMoreRelatedTopics = !viewMoreRelatedTopics\">\n            <span *ngIf=\"!viewMoreRelatedTopics\" >View More</span>\n            <span *ngIf=\"viewMoreRelatedTopics\" >View Less</span>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Authors on small screen -->\n    <div class=\"block sm:hidden margin-bottom-m\" *ngIf=\"content?.creatorDetails?.length\">\n      <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n          authors: content?.creatorDetails,\n          title: 'AUTHOR'\n        }\">\n      </ng-container>\n    </div>\n    <!-- Contacts on small screen -->\n    <div class=\"block sm:hidden margin-bottom-m\" *ngIf=\"content?.creatorContacts?.length\">\n      <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n          authors: content?.creatorContacts,\n          title: 'CONTACT'\n        }\">\n      </ng-container>\n    </div>\n    <div class=\"margin-bottom-m\" *ngIf=\"objKeys(contentParents).length\">\n      <mat-card>\n        <h2 >This content is part of</h2>\n      </mat-card>\n      <mat-accordion>\n        <ng-container *ngFor=\"let key of objKeys(contentParents)\">\n          <mat-expansion-panel>\n            <mat-expansion-panel-header>\n              {{ key }}\n            </mat-expansion-panel-header>\n            <div class=\"flex mb-1\" *ngFor=\"let content of contentParents[key]\">\n              <span class=\"mr-1\">\n                <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n              </span>\n              <a class=\"ws-mat-primary-text\" [routerLink]=\"\n                  content.status !== 'Live'\n                    ? '/author' + '/toc/' + content.identifier\n                    : '/app' + '/toc/' + content.identifier\n                \">\n                <p class=\"margin-remove-bottom mat-subheading-1\">{{ content.name }}</p>\n              </a>\n            </div>\n          </mat-expansion-panel>\n        </ng-container>\n      </mat-accordion>\n    </div>\n  </div>\n  <!-- At a glance section -->\n  <div class=\"info-section\">\n    <ws-widget-player-brief [forPreview]=\"forPreview\" [content]=\"content\" [hasTocStructure]=\"hasTocStructure\"\n      [tocStructure]=\"tocStructure\">\n    </ws-widget-player-brief>\n  </div>\n</div>\n\n<ng-template #creators let-authors=\"authors\" let-title=\"title\">\n  <mat-card>\n    <h2 *ngIf=\"title === 'AUTHOR'\">Authors</h2>\n    <h2 *ngIf=\"title === 'CONTACT'\">Curator/Contact</h2>\n    <mat-divider></mat-divider>\n    <div *ngFor=\"let author of authors\" class=\"author\">\n      <ws-widget-user-image class=\"author-image\" [imageType]=\"'name-initial'\" [userName]=\"author.name || ''\"\n        [email]=\"author.email\"></ws-widget-user-image>\n      <div class=\"width-expand flex flex-middle flex-between\">\n        <p class=\"margin-remove text-md font-normal\">{{ author.name }}</p>\n        <ws-widget-btn-mail-user *ngIf=\"askAuthorEnabled\" [widgetData]=\"{ content: content, emails: [author.email] }\">\n        </ws-widget-btn-mail-user>\n      </div>\n    </div>\n  </mat-card>\n</ng-template>\n", styles: [".meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px}@media only screen and (max-width: 599px){.meta-section{width:100%}}.topic-button{display:block;width:32%;margin:4px 0}@media only screen and (max-width: 599px){.topic-button{width:100%}}.info-section{width:28%;min-width:250px;margin-left:24px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0}}.info-section2{width:28%;min-width:250px;margin-right:24px}@media only screen and (max-width: 599px){.info-section2{width:100%;margin-right:0}}.info-container{padding:12px 16px;margin-bottom:16px}.info-container .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.author{padding:12px 0;display:flex}.author .author-image{margin-right:12px;height:44px;width:44px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: UserImageComponent, selector: "ws-widget-user-image", inputs: ["email", "userId", "userName", "imageType", "imageUrl", "imageSize"] }, { kind: "component", type: PlayerBriefComponent, selector: "ws-widget-player-brief", inputs: ["content", "hasTocStructure", "tocStructure", "isPreviewMode", "forPreview", "askAuthorEnabled"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PipeLimitToPipe, name: "pipeLimitTo" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocOverviewComponent, selector: "ws-app-app-toc-overview", inputs: { forPreview: "forPreview" }, ngImport: i0, template: "<div class=\"flex flex-between flex-wrapped mt-4\">\n  <div class=\"meta-section\">\n    <!-- Description : Conditional : If not shown here, will be shown over banner -->\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.description?.enabled &&\n        showDescription &&\n        showSubtitleOnBanner &&\n        content?.description\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.description?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1\" [innerHTML]=\"content?.description\"></div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Content Body -->\n    <mat-card *ngIf=\"tocConfig?.overview?.body?.enabled && content?.body\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.body?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"break-words\" [innerHTML]=\"body\"></div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Learning objective -->\n    <mat-card *ngIf=\"tocConfig?.overview?.learningObjective?.enabled && content?.learningObjective\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.learningObjective?.displayName }}</h2>\n      <mat-card-content>\n        <p class=\"mat-subheading-1\" [innerHTML]=\"content?.learningObjective\"></p>\n      </mat-card-content>\n    </mat-card>\n\n    <!-- Registration instructions -->\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.registrationInstructions?.enabled &&\n        content?.registrationInstructions?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.registrationInstructions?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1 break-words\" [innerHTML]=\"content?.registrationInstructions\"></div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.preContents?.enabled && content?.preContents?.length\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.preContents?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let preContent of content?.preContents\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + preContent.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ preContent.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.postContents?.enabled && content?.postContents?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.postContents?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let postContent of content?.postContents\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + postContent.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ postContent.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.certificationList?.enabled && content?.certificationList?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.certificationList?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let certification of content?.certificationList\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + certification.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ certification.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.studyMaterials?.enabled && content?.studyMaterials?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.studyMaterials?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let studyitem of content?.studyMaterials\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + studyitem.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ studyitem.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.playgroundResources?.enabled && content?.playgroundResources?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.playgroundResources?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let playgroundResource of content?.playgroundResources\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + playgroundResource.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ playgroundResource.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.kArtifacts?.enabled && content?.kArtifacts?.length\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.kArtifacts?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let kArtifact of content?.kArtifacts\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + kArtifact.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ kArtifact.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.equivalentCertifications?.enabled &&\n        content?.equivalentCertifications?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.equivalentCertifications?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let equivalentCertification of content?.equivalentCertifications\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + equivalentCertification.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ equivalentCertification.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.softwareRequirements?.enabled && content?.softwareRequirements?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.softwareRequirements?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let softwareRequirement of content?.softwareRequirements\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [href]=\"softwareRequirement.url\" target=\"blank\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ softwareRequirement.title }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Skills -->\n    <mat-card *ngIf=\"tocConfig?.overview?.skills?.enabled && content?.skills?.length\"\n      class=\"unit-meta-item mat-app-background\">\n      <h2>{{ tocConfig?.overview?.skills?.displayName }}</h2>\n      <mat-chip-list>\n        <mat-chip *ngFor=\"let skill of content?.skills\">{{ skill.name }}</mat-chip>\n      </mat-chip-list>\n    </mat-card>\n    <!-- Requirements -->\n    <mat-card *ngIf=\"tocConfig?.overview?.preRequisites?.enabled && content?.preRequisites\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.preRequisites?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1\" [innerHTML]=\"content?.preRequisites\"></div>\n        <div class=\"margin-top-s\" *ngIf=\"content?.softwareRequirements?.length\">\n          <h3 class=\"mat-h3 margin-bottom-xs\" >Software Requirements</h3>\n          <ng-container *ngFor=\"let requirement of content?.softwareRequirements\">\n            <a *ngIf=\"requirement.url\" class=\"margin-right-s\" mat-stroked-button target=\"_blank\"\n              [href]=\"requirement.url\">\n              {{ requirement.title }}\n            </a>\n            <a mat-stroked-button class=\"margin-right-s\" *ngIf=\"!requirement?.url\">{{ requirement.title }}\n            </a>\n          </ng-container>\n        </div>\n      </mat-card-content>\n    </mat-card>\n\n    <!-- Training (LHub) -->\n    <mat-card *ngIf=\"trainingLHubEnabled && trainingLHubCount$ | async as trainingLHubCount\" class=\"unit-meta-item\">\n      <h2 >Trainings</h2>\n      <h4 class=\"mat-h4\">\n        <ng-container>{{ trainingLHubCount }}</ng-container>\n        <ng-container i18n=\"x trainings available\" *ngIf=\"trainingLHubCount > 1\">\n          trainings available</ng-container>\n        <ng-container i18n=\"1 training available\" *ngIf=\"trainingLHubCount === 1\">\n          training available</ng-container>\n      </h4>\n      <div>\n        \n      </div>\n    </mat-card>\n\n    <!-- Related Topics -->\n    <mat-card class=\"unit-meta-item\" *ngIf=\"tocConfig?.overview?.topics?.enabled && content?.topics?.length\">\n      <h2>{{ tocConfig?.overview?.topics?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex flex-between flex-wrapped\">\n          <a mat-stroked-button class=\"topic-button text-truncate\"\n            *ngFor=\"let topic of content?.topics | pipeLimitTo: (viewMoreRelatedTopics ? 24 : 6)\" [title]=\"topic?.name\"\n            [routerLink]=\"'/app/concept-graph/' + topic.identifier\">\n            {{ topic?.name }}\n          </a>\n        </div>\n        <div *ngIf=\"content?.topics?.length > 6\" class=\"text-right margin-top-xs\">\n          <a mat-button (click)=\"viewMoreRelatedTopics = !viewMoreRelatedTopics\">\n            <span *ngIf=\"!viewMoreRelatedTopics\" >View More</span>\n            <span *ngIf=\"viewMoreRelatedTopics\" >View Less</span>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Authors on small screen -->\n    <div class=\"block sm:hidden margin-bottom-m\" *ngIf=\"content?.creatorDetails?.length\">\n      <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n          authors: content?.creatorDetails,\n          title: 'AUTHOR'\n        }\">\n      </ng-container>\n    </div>\n    <!-- Contacts on small screen -->\n    <div class=\"block sm:hidden margin-bottom-m\" *ngIf=\"content?.creatorContacts?.length\">\n      <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n          authors: content?.creatorContacts,\n          title: 'CONTACT'\n        }\">\n      </ng-container>\n    </div>\n    <div class=\"margin-bottom-m\" *ngIf=\"objKeys(contentParents).length\">\n      <mat-card>\n        <h2 >This content is part of</h2>\n      </mat-card>\n      <mat-accordion>\n        <ng-container *ngFor=\"let key of objKeys(contentParents)\">\n          <mat-expansion-panel>\n            <mat-expansion-panel-header>\n              {{ key }}\n            </mat-expansion-panel-header>\n            <div class=\"flex mb-1\" *ngFor=\"let content of contentParents[key]\">\n              <span class=\"mr-1\">\n                <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n              </span>\n              <a class=\"ws-mat-primary-text\" [routerLink]=\"\n                  content.status !== 'Live'\n                    ? '/author' + '/toc/' + content.identifier\n                    : '/app' + '/toc/' + content.identifier\n                \">\n                <p class=\"margin-remove-bottom mat-subheading-1\">{{ content.name }}</p>\n              </a>\n            </div>\n          </mat-expansion-panel>\n        </ng-container>\n      </mat-accordion>\n    </div>\n  </div>\n  <!-- At a glance section -->\n  <div class=\"info-section\">\n    <ws-widget-player-brief [forPreview]=\"forPreview\" [content]=\"content\" [hasTocStructure]=\"hasTocStructure\"\n      [tocStructure]=\"tocStructure\">\n    </ws-widget-player-brief>\n  </div>\n</div>\n\n<ng-template #creators let-authors=\"authors\" let-title=\"title\">\n  <mat-card>\n    <h2 *ngIf=\"title === 'AUTHOR'\">Authors</h2>\n    <h2 *ngIf=\"title === 'CONTACT'\">Curator/Contact</h2>\n    <mat-divider></mat-divider>\n    <div *ngFor=\"let author of authors\" class=\"author\">\n      <ws-widget-user-image class=\"author-image\" [imageType]=\"'name-initial'\" [userName]=\"author.name || ''\"\n        [email]=\"author.email\"></ws-widget-user-image>\n      <div class=\"width-expand flex flex-middle flex-between\">\n        <p class=\"margin-remove text-md font-normal\">{{ author.name }}</p>\n        <ws-widget-btn-mail-user *ngIf=\"askAuthorEnabled\" [widgetData]=\"{ content: content, emails: [author.email] }\">\n        </ws-widget-btn-mail-user>\n      </div>\n    </div>\n  </mat-card>\n</ng-template>\n", styles: [".meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px}@media only screen and (max-width: 599px){.meta-section{width:100%}}.topic-button{display:block;width:32%;margin:4px 0}@media only screen and (max-width: 599px){.topic-button{width:100%}}.info-section{width:28%;min-width:250px;margin-left:24px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0}}.info-section2{width:28%;min-width:250px;margin-right:24px}@media only screen and (max-width: 599px){.info-section2{width:100%;margin-right:0}}.info-container{padding:12px 16px;margin-bottom:16px}.info-container .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.author{padding:12px 0;display:flex}.author .author-image{margin-right:12px;height:44px;width:44px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i9.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: UserImageComponent, selector: "ws-widget-user-image", inputs: ["email", "userId", "userName", "imageType", "imageUrl", "imageSize"] }, { kind: "component", type: PlayerBriefComponent, selector: "ws-widget-player-brief", inputs: ["content", "hasTocStructure", "tocStructure", "isPreviewMode", "forPreview", "askAuthorEnabled"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PipeLimitToPipe, name: "pipeLimitTo" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocOverviewComponent, decorators: [{
             type: Component,
@@ -22740,7 +22845,7 @@ class AppTocCohortsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCohortsComponent, deps: [{ token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCohortsComponent, selector: "ws-app-toc-cohorts", inputs: { content: "content", forPreview: "forPreview" }, ngImport: i0, template: "<section *ngIf=\"enableFeature\">\n  <h2 class=\"mat-toolbar cohorts-head shadow\">Cohorts</h2>\n  <mat-accordion [multi]=\"false\">\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.ACTIVE_USERS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Learner</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.ACTIVE_USERS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.ACTIVE_USERS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch active users\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.ACTIVE_USERS].hasError &&\n              !cohortResults[cohortTypesEnum.ACTIVE_USERS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <!-- <div *ngFor=\"let cohort of cohortResults[cohortTypesEnum.ACTIVE_USERS].contents\"\n            [ngTemplateOutlet]=\"unitCohort\" [ngTemplateOutletContext]=\"{ user: cohort }\"></div> -->\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.ACTIVE_USERS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\">\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.ACTIVE_USERS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.TOP_PERFORMERS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Top performers</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.TOP_PERFORMERS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.TOP_PERFORMERS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch top performers\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.TOP_PERFORMERS].hasError &&\n              !cohortResults[cohortTypesEnum.TOP_PERFORMERS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.TOP_PERFORMERS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.TOP_PERFORMERS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <!-- <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.COMMON_GOALS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Shares same goal</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.COMMON_GOALS]\">\n          <h3\n            *ngIf=\"cohortResults[cohortTypesEnum.COMMON_GOALS].hasError\"\n            class=\"mat-error text-center\"\n            i18n\n          >\n            Failed to fetch users with same goals\n          </h3>\n          <h3\n            *ngIf=\"\n              !cohortResults[cohortTypesEnum.COMMON_GOALS].hasError &&\n              !cohortResults[cohortTypesEnum.COMMON_GOALS].contents.length\n            \"\n            class=\"text-center\"\n            i18n\n          >\n            None\n          </h3>\n          <div\n            *ngFor=\"let cohort of cohortResults[cohortTypesEnum.COMMON_GOALS].contents\"\n            [ngTemplateOutlet]=\"unitCohort\"\n            [ngTemplateOutletContext]=\"{ user: cohort }\"\n          ></div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.COMMON_GOALS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel> -->\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.AUTHORS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Curators</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch curators\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.AUTHORS].hasError &&\n              !cohortResults[cohortTypesEnum.AUTHORS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.AUTHORS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.AUTHORS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <!-- <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.EDUCATORS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title>Educators</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.EDUCATORS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.EDUCATORS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch educators\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.EDUCATORS].hasError &&\n              !cohortResults[cohortTypesEnum.EDUCATORS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div *ngFor=\"let cohort of cohortResults[cohortTypesEnum.EDUCATORS].contents\" [ngTemplateOutlet]=\"unitCohort\" [ngTemplateOutletContext]=\"{ user: cohort }\"></div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.EDUCATORS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel> -->\n  </mat-accordion>\n\n  <ng-template #unitCohort let-user=\"user\">\n    <div class=\"unit-cohort\">\n      <ws-widget-user-image class=\"cohort-image\" [email]=\"user.email\"></ws-widget-user-image>\n      <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n        class=\"width-expand padding-left-xs\">\n        <div class=\"mat-body-strong cohorts-name\">\n          {{\n            { firstName: user.first_name, lastName: user.last_name, email: user.email }\n              | pipeNameTransform\n          }}\n        </div>\n        <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n      </div>\n      <div class=\"width-auto\">\n        <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email] }\"></ws-widget-btn-mail-user>\n        <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n            userName:\n              {\n                firstName: user.first_name,\n                lastName: user.last_name,\n                email: user.email\n              } | pipeNameTransform,\n            userPhone: user.phone_No\n          }\"></ws-widget-btn-call>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #unitCohortNew let-user=\"user\">\n    <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n      <!-- <ws-widget-user-image class=\"cohort-image\" [email]=\"user.email\"></ws-widget-user-image> -->\n\n      <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"getUserFullName(user)\"\n        [imageSize]=\"'small'\" [email]=\"user.email\" [imageUrl]=\"user.photo || ''\"></ws-widget-user-image>\n      <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n        class=\"width-expand padding-left-xs\">\n        <div class=\"mat-body-strong cohorts-name\">\n          {{\n              { firstName: user.first_name, lastName: user.last_name, email: user.email }\n                | pipeNameTransform\n            }}\n        </div>\n        <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n      </div>\n      <div class=\"width-auto user-action-container\">\n        <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email], user: user }\">\n        </ws-widget-btn-mail-user>\n        <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n              userName:\n                {\n                  firstName: user.first_name,\n                  lastName: user.last_name,\n                  email: user.email\n                } | pipeNameTransform,\n              userPhone: user.phone_No\n            }\"></ws-widget-btn-call>\n      </div>\n    </div>\n    <!-- </div> -->\n\n  </ng-template>\n</section>\n", styles: [".cohorts-head{padding:8px 24px;margin:0;background:#fff!important;border-radius:8px 8px 0 0;color:#222!important}.unit-cohort{display:inline-flex;margin-bottom:24px}.unit-cohort .cohort-image{width:32px;height:32px;font-size:32px}.cohorts-name{letter-spacing:0px;color:#5f5f5f;font-size:.9rem;font-weight:400}.cohortSection{margin:50px auto;width:70%}.flex{display:flex}.chorotsBlock{background:#fff}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.user-action-container{color:#adadae}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i6$3.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: UserImageComponent, selector: "ws-widget-user-image", inputs: ["email", "userId", "userName", "imageType", "imageUrl", "imageSize"] }, { kind: "pipe", type: i2$1.PipeNameTransformPipe, name: "pipeNameTransform" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCohortsComponent, selector: "ws-app-toc-cohorts", inputs: { content: "content", forPreview: "forPreview" }, ngImport: i0, template: "<section *ngIf=\"enableFeature\">\n  <h2 class=\"mat-toolbar cohorts-head shadow\">Cohorts</h2>\n  <mat-accordion [multi]=\"false\">\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.ACTIVE_USERS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Learner</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.ACTIVE_USERS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.ACTIVE_USERS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch active users\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.ACTIVE_USERS].hasError &&\n              !cohortResults[cohortTypesEnum.ACTIVE_USERS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <!-- <div *ngFor=\"let cohort of cohortResults[cohortTypesEnum.ACTIVE_USERS].contents\"\n            [ngTemplateOutlet]=\"unitCohort\" [ngTemplateOutletContext]=\"{ user: cohort }\"></div> -->\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.ACTIVE_USERS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\">\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.ACTIVE_USERS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.TOP_PERFORMERS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Top performers</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.TOP_PERFORMERS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.TOP_PERFORMERS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch top performers\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.TOP_PERFORMERS].hasError &&\n              !cohortResults[cohortTypesEnum.TOP_PERFORMERS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.TOP_PERFORMERS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.TOP_PERFORMERS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <!-- <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.COMMON_GOALS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Shares same goal</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.COMMON_GOALS]\">\n          <h3\n            *ngIf=\"cohortResults[cohortTypesEnum.COMMON_GOALS].hasError\"\n            class=\"mat-error text-center\"\n            i18n\n          >\n            Failed to fetch users with same goals\n          </h3>\n          <h3\n            *ngIf=\"\n              !cohortResults[cohortTypesEnum.COMMON_GOALS].hasError &&\n              !cohortResults[cohortTypesEnum.COMMON_GOALS].contents.length\n            \"\n            class=\"text-center\"\n            i18n\n          >\n            None\n          </h3>\n          <div\n            *ngFor=\"let cohort of cohortResults[cohortTypesEnum.COMMON_GOALS].contents\"\n            [ngTemplateOutlet]=\"unitCohort\"\n            [ngTemplateOutletContext]=\"{ user: cohort }\"\n          ></div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.COMMON_GOALS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel> -->\n    <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.AUTHORS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title >Curators</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.AUTHORS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch curators\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.AUTHORS].hasError &&\n              !cohortResults[cohortTypesEnum.AUTHORS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 col-gap-4\">\n            <ng-container *ngFor=\"let cohort of cohortResults[cohortTypesEnum.AUTHORS].contents\"\n              [ngTemplateOutlet]=\"unitCohortNew\" [ngTemplateOutletContext]=\"{ user: cohort }\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.AUTHORS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n    <!-- <mat-expansion-panel class=\"mat-elevation-z\" (opened)=\"fetchCohorts(cohortTypesEnum.EDUCATORS)\">\n      <mat-expansion-panel-header>\n        <mat-panel-title>Educators</mat-panel-title>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <div *ngIf=\"cohortResults[cohortTypesEnum.EDUCATORS]\">\n          <h3 *ngIf=\"cohortResults[cohortTypesEnum.EDUCATORS].hasError\" class=\"mat-error text-center\" >\n            Failed to fetch educators\n          </h3>\n          <h3 *ngIf=\"\n              !cohortResults[cohortTypesEnum.EDUCATORS].hasError &&\n              !cohortResults[cohortTypesEnum.EDUCATORS].contents.length\n            \" class=\"text-center\" >\n            None\n          </h3>\n          <div *ngFor=\"let cohort of cohortResults[cohortTypesEnum.EDUCATORS].contents\" [ngTemplateOutlet]=\"unitCohort\" [ngTemplateOutletContext]=\"{ user: cohort }\"></div>\n        </div>\n        <div *ngIf=\"!cohortResults[cohortTypesEnum.EDUCATORS]\" class=\"text-center\">\n          <mat-spinner [strokeWidth]=\"3\" [diameter]=\"40\" class=\"display-inline-block\"></mat-spinner>\n        </div>\n      </ng-template>\n    </mat-expansion-panel> -->\n  </mat-accordion>\n\n  <ng-template #unitCohort let-user=\"user\">\n    <div class=\"unit-cohort\">\n      <ws-widget-user-image class=\"cohort-image\" [email]=\"user.email\"></ws-widget-user-image>\n      <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n        class=\"width-expand padding-left-xs\">\n        <div class=\"mat-body-strong cohorts-name\">\n          {{\n            { firstName: user.first_name, lastName: user.last_name, email: user.email }\n              | pipeNameTransform\n          }}\n        </div>\n        <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n      </div>\n      <div class=\"width-auto\">\n        <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email] }\"></ws-widget-btn-mail-user>\n        <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n            userName:\n              {\n                firstName: user.first_name,\n                lastName: user.last_name,\n                email: user.email\n              } | pipeNameTransform,\n            userPhone: user.phone_No\n          }\"></ws-widget-btn-call>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #unitCohortNew let-user=\"user\">\n    <div class=\"unit-cohort sm:pr-8 md:pr-10\">\n      <!-- <ws-widget-user-image class=\"cohort-image\" [email]=\"user.email\"></ws-widget-user-image> -->\n\n      <ws-widget-user-image class=\"user-image\" [imageType]=\"'user-photo'\" [userName]=\"getUserFullName(user)\"\n        [imageSize]=\"'small'\" [email]=\"user.email\" [imageUrl]=\"user.photo || ''\"></ws-widget-user-image>\n      <div (click)=\"goToUserProfile(user)\" [ngClass]=\"{'cursor-pointer': enablePeopleSearch}\"\n        class=\"width-expand padding-left-xs\">\n        <div class=\"mat-body-strong cohorts-name\">\n          {{\n              { firstName: user.first_name, lastName: user.last_name, email: user.email }\n                | pipeNameTransform\n            }}\n        </div>\n        <div class=\"mat-caption cohorts-desc\">{{ user.desc }}</div>\n      </div>\n      <div class=\"width-auto user-action-container\">\n        <ws-widget-btn-mail-user [widgetData]=\"{ content: content, emails: [user.email], user: user }\">\n        </ws-widget-btn-mail-user>\n        <ws-widget-btn-call *ngIf=\"user.phone_No !== '0'\" [widgetData]=\"{\n              userName:\n                {\n                  firstName: user.first_name,\n                  lastName: user.last_name,\n                  email: user.email\n                } | pipeNameTransform,\n              userPhone: user.phone_No\n            }\"></ws-widget-btn-call>\n      </div>\n    </div>\n    <!-- </div> -->\n\n  </ng-template>\n</section>\n", styles: [".cohorts-head{padding:8px 24px;margin:0;background:#fff!important;border-radius:8px 8px 0 0;color:#222!important}.unit-cohort{display:inline-flex;margin-bottom:24px}.unit-cohort .cohort-image{width:32px;height:32px;font-size:32px}.cohorts-name{letter-spacing:0px;color:#5f5f5f;font-size:.9rem;font-weight:400}.cohortSection{margin:50px auto;width:70%}.flex{display:flex}.chorotsBlock{background:#fff}.mat-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.user-action-container{color:#adadae}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i6$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i6$2.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: UserImageComponent, selector: "ws-widget-user-image", inputs: ["email", "userId", "userName", "imageType", "imageUrl", "imageSize"] }, { kind: "pipe", type: i2$1.PipeNameTransformPipe, name: "pipeNameTransform" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCohortsComponent, decorators: [{
             type: Component,
@@ -22964,7 +23069,7 @@ class AppTocContentCardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardComponent, deps: [{ token: i2$1.EventService }, { token: i1$3.MatLegacyDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content\">\n  <ng-container *ngIf=\"isCollection\">\n    <div class=\"flex flex-col position-relative\">\n      <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n        <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n          (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n        <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n          <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren\">\n            <div class=\"flex flex-col sm:flex-row flex-wrap\">\n              <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n                {{ content?.name }} \n              </p>\n              <ng-container *ngIf=\"content.issuedCertificatesSVG\">\n                <a class=\"certificate-txt\" (click)=\"openCertificateDialog(content.issuedCertificatesSVG)\">\n                  <span class=\"view-certificate-wrapper\">\n                    <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                    <span>{{'apptoccontentcard.viewCertificate' | translate}}</span>\n                  </span>\n                </a>\n              </ng-container>\n              <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.resource' | translate}}</span>\n              </div>\n              <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.module' | translate}}</span>\n              </div>\n              <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.course' | translate}}</span>\n              </div>\n            </div>\n            <div>\n              <!-- <span class=\"mat-body-strong content-type\">{{ content?.displayContentType }}</span> -->\n              <!-- <span class=\"ml-5\"> -->\n              <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n              <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n              <span class=\"text-lowercase ws-mat-black60-text\">{{ content?.duration | pipeDurationTransform: 'hms'\n                }}</span>\n              <!-- </span> -->\n            </div>\n          </div>\n          <button *ngIf=\"content?.artifactUrl && isAllowed && !isEnabled\" type=\"button\" mat-icon-button\n            [matMenuTriggerFor]=\"buttonMenu\">\n            <mat-icon>more_vertical</mat-icon>\n          </button>\n          <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage && content.primaryCategory !== 'Course'\">\n            <ng-container *ngIf=\"content?.completionStatus == 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n                [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n                [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionStatus < 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\"\n                [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\"\n                [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n                [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                [backgroundStrokeWidth]=\"3\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n          </ng-container>\n\n          <!-- <div *ngIf=\"hasContentStructure\" class=\"child-meta-container\">\n            <div class=\"child-structure\"> -->\n          <!-- <mat-icon class=\"structure-icon\">import_contacts</mat-icon> -->\n          <!-- <span class=\"oval-white\" *ngIf=\"contentStructure?.course > 0\">\n                <ng-container>{{ contentStructure?.course }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course === 1\" > Course</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course > 1\" > Courses</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.learningModule > 0\">\n                <ng-container> {{ contentStructure?.learningModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule === 1\" > Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule > 1\" > Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.video > 0\">\n                <ng-container> {{ contentStructure?.video }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video === 1\" > Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video > 1\" > Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.interactiveVideo > 0\">\n                <ng-container> {{ contentStructure?.interactiveVideo }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo === 1\" >\n                  Interactive Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo > 1\" >\n                  Interactive Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.youtube > 0\">\n                <ng-container> {{ contentStructure?.youtube }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube === 1\" > Youtube Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube > 1\" > Youtube Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.pdf > 0\">\n                <ng-container> {{ contentStructure?.pdf }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf === 1\" > PDF</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf > 1\" > PDFs</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.podcast > 0\">\n                <ng-container> {{ contentStructure?.podcast }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast === 1\" > Podcast</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast > 1\" > Podcasts</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webModule > 0\">\n                <ng-container> {{ contentStructure?.webModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule === 1\" > Web Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule > 1\" > Web Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webPage > 0\">\n                <ng-container> {{ contentStructure?.webPage }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage === 1\" > Web Page</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage > 1\" > Web Pages</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.quiz > 0\">\n                <ng-container *ngIf=\"contentStructure?.webPage > 0\">, </ng-container>\n                <ng-container>{{ contentStructure?.quiz }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz === 1\" > Quiz</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz > 1\" > Quizzes</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.assessment > 0\">\n                <ng-container> {{ contentStructure?.assessment }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment === 1\" > Assessment</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment > 1\" > Assessments</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.other > 0\">\n                <ng-container>{{ contentStructure?.other }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other === 1\" > Other item</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other > 1\" > Other Items</ng-container>\n              </span>\n            </div>\n          </div> -->\n          <div class=\"see-all-container\">\n            <a href=\"javascript:void(0)\" role=\"button\" (click)=\"viewChildren = !viewChildren\"\n              class=\"margin-left-m see-all-btn tab custom-chevron customicon\" mat-button>\n              <!-- <ng-container *ngIf=\"!viewChildren\" >See All</ng-container>\n              <ng-container *ngIf=\"viewChildren\" >See Less</ng-container> -->\n              <mat-icon *ngIf=\"!viewChildren\">keyboard_arrow_down</mat-icon>\n              <mat-icon *ngIf=\"viewChildren\">keyboard_arrow_up</mat-icon>\n            </a>\n          </div>\n        </div>\n      </div>\n      <!-- <div class=\"w-100\" *ngIf=\"content?.identifier && content?.completionPercentage\">\n        <ng-container *ngIf=\"content?.completionStatus == 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n        <ng-container *ngIf=\"content?.completionStatus < 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n      </div> -->\n    </div>\n\n    <div class=\"children-container margin-left-l margin-top-s margin-bottom-s\" [hidden]=\"!viewChildren\">\n      <ws-app-toc-content-card [forPreview]=\"forPreview\" [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\"\n        [batchId]=\"batchId\" [rootContentType]=\"rootContentType\"\n        *ngFor=\"let child of content?.children; trackBy: contentTrackBy\">\n      </ws-app-toc-content-card>\n    </div>\n  </ng-container>\n  <div *ngIf=\"isResource\" class=\"resource-container\">\n    <!-- <ws-widget-display-content-type-icon class=\"flex\" [displayContentType]=\"content?.displayContentType\">\n    </ws-widget-display-content-type-icon> -->\n    <!-- <div class=\"img-container\"> -->\n    <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n    <!-- <ng-container *ngIf=\"content?.completionStatus == 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\" [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container>\n    <ng-container *ngIf=\"content?.completionStatus < 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n        [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container> -->\n    <!-- </div> -->\n\n    <div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n      <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n      <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\" [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n        [queryParams]=\"(isAllowed && !forPreview && !isEnabled)  ? resourceLink.queryParams : null\">\n        <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n          <div class=\"flex flex-col sm:flex-row flex-wrap\">\n            <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n              <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n              {{ content?.name }}\n            </p>\n            <span class=\"content-type optional-span\" *ngIf=\"content?.optionalReading\">{{'apptoccontentcard.optional' | translate}}</span>\n            <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n          </div>\n          <div class=\"resicons ws-mat-black60-text\">\n            <!-- <span class=\"mat-body-strong content-type ws-mat-default-text\">{{ content?.contentType }}</span> -->\n            <!-- <span class=\"ml-5\"> -->\n            <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n            <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\" class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                content?.mimeType ==='application/x-mpegURL'\">\n            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/pdf'\">\n            <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n              *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n              *ngIf=\"content.mimeType === 'application/offline' || content?.mimeType === 'application/survey'\">\n            <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n            <!-- </span> -->\n          </div>\n        </div>\n      </a>\n      <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n        <!-- <div class=\"type-container resource\" *ngIf=\"content?.contentType === 'Resource'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Resource</span>\n        </div>\n        <div class=\"type-container module\" *ngIf=\"content?.contentType === 'Collection'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Module</span>\n        </div>\n        <div class=\"type-container course\" *ngIf=\"content?.contentType === 'Course'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Course</span>\n        </div> -->\n        <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\" mat-icon-button\n          class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n          <mat-icon>more_vertical</mat-icon>\n        </button>\n        <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage ; else elseBlock\">\n        \n          <ng-container *ngIf=\"content?.completionStatus == 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n              [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.completed' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionStatus < 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\" [radius]=\"12\"\n              [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor2()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.inProgress' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n              [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n              [progressType]=\"'percentage'\">\n            </ws-widget-content-progress> -->\n          </ng-container>\n          \n        </ng-container>\n        <ng-template #elseBlock>\n        <circle-progress  class=\"flex items-center progress\"\n          [percent]=\"0\"\n          [radius]=\"12\"\n          [outerStrokeWidth]=\"3\"\n          [innerStrokeWidth]=\"3\"\n          [outerStrokeColor]=\"'#808080'\"\n          [innerStrokeColor]=\"'#808080'\"\n          [animation]=\"true\"\n          [space]=\"-3\"\n          [showUnits]=\"false\"\n          [animationDuration]=\"300\"\n          [showTitle]=\"false\"\n          [backgroundPadding]=\"0\"\n          [backgroundPadding]=\"-9\"\n          [outerStrokeLinecap]=\"'butt'\"\n          matTooltip=\"{{'apptoccontentcard.notStarted' | translate}}\"\n          [showSubtitle]=\"false\" \n          [showInnerStroke]=\"true\" \n          [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"></circle-progress>\n        <!-- <p>no data</p> -->\n        </ng-template>\n      </div>\n\n      \n\n      <!-- <button *ngIf=\"content?.artifactUrl\" type=\"button\" mat-icon-button [matMenuTriggerFor]=\"buttonMenu\">\n        <mat-icon>more_vertical</mat-icon>\n      </button> -->\n    </div>\n    <!-- <div class=\"resource-meta width-expand\">\n      <a [routerLink]=\"resourceLink.url\" [queryParams]=\"resourceLink.queryParams\">\n        <h3 *ngIf=\"content?.displayContentType !== enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h3>\n        <h1 *ngIf=\"content?.displayContentType === enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h1>\n      </a>\n      <span class=\"mat-body-strong margin-left-xs\">{{ content?.duration | pipeDurationTransform: 'time24' }}\n      </span>\n    </div> -->\n  </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n  <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n    class=\"flex flex-middle\">\n    <mat-icon>toc</mat-icon>\n    <h3 class=\"margin-remove\" >\n      {{'apptoccontentcard.viewDetails' | translate}}\n    </h3>\n  </a>\n  <!-- TODO: Hiding this from here for now, as the functionalities are not working -->\n  <!-- <div mat-menu-item>\n    <ws-widget-btn-content-download [widgetData]=\"\n        content\n          | pipePartialContent\n            : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal']\n      \"></ws-widget-btn-content-download>\n    <ws-widget-btn-content-like [widgetData]=\"content | pipePartialContent: ['identifier']\">\n    </ws-widget-btn-content-like>\n    <ws-widget-btn-content-share [widgetData]=\"content\"></ws-widget-btn-content-share>\n    <ws-widget-btn-goals></ws-widget-btn-goals>\n    <ws-widget-btn-playlist></ws-widget-btn-playlist>\n  </div> -->\n</mat-menu>\n", styles: [".customicon{position:absolute;top:-.5em;right:-4px}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-txt{padding:0 20px;color:#0273b6;font-weight:700}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId"] }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content\">\n  <ng-container *ngIf=\"isCollection\">\n    <div class=\"flex flex-col position-relative\">\n      <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n        <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n          (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n        <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n          <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren\">\n            <div class=\"flex flex-col sm:flex-row flex-wrap\">\n              <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n                {{ content?.name }} \n              </p>\n              <ng-container *ngIf=\"content.issuedCertificatesSVG\">\n                <a class=\"certificate-txt\" (click)=\"openCertificateDialog(content.issuedCertificatesSVG)\">\n                  <span class=\"view-certificate-wrapper\">\n                    <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                    <span>{{'apptoccontentcard.viewCertificate' | translate}}</span>\n                  </span>\n                </a>\n              </ng-container>\n              <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.resource' | translate}}</span>\n              </div>\n              <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.module' | translate}}</span>\n              </div>\n              <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.course' | translate}}</span>\n              </div>\n            </div>\n            <div>\n              <!-- <span class=\"mat-body-strong content-type\">{{ content?.displayContentType }}</span> -->\n              <!-- <span class=\"ml-5\"> -->\n              <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n              <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n              <span class=\"text-lowercase ws-mat-black60-text\">{{ content?.duration | pipeDurationTransform: 'hms'\n                }}</span>\n              <!-- </span> -->\n            </div>\n          </div>\n          <button *ngIf=\"content?.artifactUrl && isAllowed && !isEnabled\" type=\"button\" mat-icon-button\n            [matMenuTriggerFor]=\"buttonMenu\">\n            <mat-icon>more_vertical</mat-icon>\n          </button>\n          <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage && content.primaryCategory !== 'Course'\">\n            <ng-container *ngIf=\"content?.completionStatus == 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n                [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n                [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionStatus < 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\"\n                [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\"\n                [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n                [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                [backgroundStrokeWidth]=\"3\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n          </ng-container>\n\n          <!-- <div *ngIf=\"hasContentStructure\" class=\"child-meta-container\">\n            <div class=\"child-structure\"> -->\n          <!-- <mat-icon class=\"structure-icon\">import_contacts</mat-icon> -->\n          <!-- <span class=\"oval-white\" *ngIf=\"contentStructure?.course > 0\">\n                <ng-container>{{ contentStructure?.course }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course === 1\" > Course</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course > 1\" > Courses</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.learningModule > 0\">\n                <ng-container> {{ contentStructure?.learningModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule === 1\" > Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule > 1\" > Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.video > 0\">\n                <ng-container> {{ contentStructure?.video }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video === 1\" > Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video > 1\" > Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.interactiveVideo > 0\">\n                <ng-container> {{ contentStructure?.interactiveVideo }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo === 1\" >\n                  Interactive Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo > 1\" >\n                  Interactive Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.youtube > 0\">\n                <ng-container> {{ contentStructure?.youtube }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube === 1\" > Youtube Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube > 1\" > Youtube Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.pdf > 0\">\n                <ng-container> {{ contentStructure?.pdf }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf === 1\" > PDF</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf > 1\" > PDFs</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.podcast > 0\">\n                <ng-container> {{ contentStructure?.podcast }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast === 1\" > Podcast</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast > 1\" > Podcasts</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webModule > 0\">\n                <ng-container> {{ contentStructure?.webModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule === 1\" > Web Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule > 1\" > Web Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webPage > 0\">\n                <ng-container> {{ contentStructure?.webPage }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage === 1\" > Web Page</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage > 1\" > Web Pages</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.quiz > 0\">\n                <ng-container *ngIf=\"contentStructure?.webPage > 0\">, </ng-container>\n                <ng-container>{{ contentStructure?.quiz }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz === 1\" > Quiz</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz > 1\" > Quizzes</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.assessment > 0\">\n                <ng-container> {{ contentStructure?.assessment }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment === 1\" > Assessment</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment > 1\" > Assessments</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.other > 0\">\n                <ng-container>{{ contentStructure?.other }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other === 1\" > Other item</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other > 1\" > Other Items</ng-container>\n              </span>\n            </div>\n          </div> -->\n          <div class=\"see-all-container\">\n            <a href=\"javascript:void(0)\" role=\"button\" (click)=\"viewChildren = !viewChildren\"\n              class=\"margin-left-m see-all-btn tab custom-chevron customicon\" mat-button>\n              <!-- <ng-container *ngIf=\"!viewChildren\" >See All</ng-container>\n              <ng-container *ngIf=\"viewChildren\" >See Less</ng-container> -->\n              <mat-icon *ngIf=\"!viewChildren\">keyboard_arrow_down</mat-icon>\n              <mat-icon *ngIf=\"viewChildren\">keyboard_arrow_up</mat-icon>\n            </a>\n          </div>\n        </div>\n      </div>\n      <!-- <div class=\"w-100\" *ngIf=\"content?.identifier && content?.completionPercentage\">\n        <ng-container *ngIf=\"content?.completionStatus == 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n        <ng-container *ngIf=\"content?.completionStatus < 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n      </div> -->\n    </div>\n\n    <div class=\"children-container margin-left-l margin-top-s margin-bottom-s\" [hidden]=\"!viewChildren\">\n      <ws-app-toc-content-card [forPreview]=\"forPreview\" [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\"\n        [batchId]=\"batchId\" [rootContentType]=\"rootContentType\"\n        *ngFor=\"let child of content?.children; trackBy: contentTrackBy\">\n      </ws-app-toc-content-card>\n    </div>\n  </ng-container>\n  <div *ngIf=\"isResource\" class=\"resource-container\">\n    <!-- <ws-widget-display-content-type-icon class=\"flex\" [displayContentType]=\"content?.displayContentType\">\n    </ws-widget-display-content-type-icon> -->\n    <!-- <div class=\"img-container\"> -->\n    <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n    <!-- <ng-container *ngIf=\"content?.completionStatus == 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\" [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container>\n    <ng-container *ngIf=\"content?.completionStatus < 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n        [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container> -->\n    <!-- </div> -->\n\n    <div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n      <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n      <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\" [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n        [queryParams]=\"(isAllowed && !forPreview && !isEnabled)  ? resourceLink.queryParams : null\">\n        <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n          <div class=\"flex flex-col sm:flex-row flex-wrap\">\n            <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n              <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n              {{ content?.name }}\n            </p>\n            <span class=\"content-type optional-span\" *ngIf=\"content?.optionalReading\">{{'apptoccontentcard.optional' | translate}}</span>\n            <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n          </div>\n          <div class=\"resicons ws-mat-black60-text\">\n            <!-- <span class=\"mat-body-strong content-type ws-mat-default-text\">{{ content?.contentType }}</span> -->\n            <!-- <span class=\"ml-5\"> -->\n            <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n            <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\" class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                content?.mimeType ==='application/x-mpegURL'\">\n            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/pdf'\">\n            <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n              *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n              *ngIf=\"content.mimeType === 'application/offline' || content?.mimeType === 'application/survey'\">\n            <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n            <!-- </span> -->\n          </div>\n        </div>\n      </a>\n      <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n        <!-- <div class=\"type-container resource\" *ngIf=\"content?.contentType === 'Resource'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Resource</span>\n        </div>\n        <div class=\"type-container module\" *ngIf=\"content?.contentType === 'Collection'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Module</span>\n        </div>\n        <div class=\"type-container course\" *ngIf=\"content?.contentType === 'Course'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Course</span>\n        </div> -->\n        <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\" mat-icon-button\n          class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n          <mat-icon>more_vertical</mat-icon>\n        </button>\n        <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage ; else elseBlock\">\n        \n          <ng-container *ngIf=\"content?.completionStatus == 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n              [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.completed' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionStatus < 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\" [radius]=\"12\"\n              [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor2()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.inProgress' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n              [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n              [progressType]=\"'percentage'\">\n            </ws-widget-content-progress> -->\n          </ng-container>\n          \n        </ng-container>\n        <ng-template #elseBlock>\n        <circle-progress  class=\"flex items-center progress\"\n          [percent]=\"0\"\n          [radius]=\"12\"\n          [outerStrokeWidth]=\"3\"\n          [innerStrokeWidth]=\"3\"\n          [outerStrokeColor]=\"'#808080'\"\n          [innerStrokeColor]=\"'#808080'\"\n          [animation]=\"true\"\n          [space]=\"-3\"\n          [showUnits]=\"false\"\n          [animationDuration]=\"300\"\n          [showTitle]=\"false\"\n          [backgroundPadding]=\"0\"\n          [backgroundPadding]=\"-9\"\n          [outerStrokeLinecap]=\"'butt'\"\n          matTooltip=\"{{'apptoccontentcard.notStarted' | translate}}\"\n          [showSubtitle]=\"false\" \n          [showInnerStroke]=\"true\" \n          [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"></circle-progress>\n        <!-- <p>no data</p> -->\n        </ng-template>\n      </div>\n\n      \n\n      <!-- <button *ngIf=\"content?.artifactUrl\" type=\"button\" mat-icon-button [matMenuTriggerFor]=\"buttonMenu\">\n        <mat-icon>more_vertical</mat-icon>\n      </button> -->\n    </div>\n    <!-- <div class=\"resource-meta width-expand\">\n      <a [routerLink]=\"resourceLink.url\" [queryParams]=\"resourceLink.queryParams\">\n        <h3 *ngIf=\"content?.displayContentType !== enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h3>\n        <h1 *ngIf=\"content?.displayContentType === enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h1>\n      </a>\n      <span class=\"mat-body-strong margin-left-xs\">{{ content?.duration | pipeDurationTransform: 'time24' }}\n      </span>\n    </div> -->\n  </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n  <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n    class=\"flex flex-middle\">\n    <mat-icon>toc</mat-icon>\n    <h3 class=\"margin-remove\" >\n      {{'apptoccontentcard.viewDetails' | translate}}\n    </h3>\n  </a>\n  <!-- TODO: Hiding this from here for now, as the functionalities are not working -->\n  <!-- <div mat-menu-item>\n    <ws-widget-btn-content-download [widgetData]=\"\n        content\n          | pipePartialContent\n            : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal']\n      \"></ws-widget-btn-content-download>\n    <ws-widget-btn-content-like [widgetData]=\"content | pipePartialContent: ['identifier']\">\n    </ws-widget-btn-content-like>\n    <ws-widget-btn-content-share [widgetData]=\"content\"></ws-widget-btn-content-share>\n    <ws-widget-btn-goals></ws-widget-btn-goals>\n    <ws-widget-btn-playlist></ws-widget-btn-playlist>\n  </div> -->\n</mat-menu>\n", styles: [".customicon{position:absolute;top:-.5em;right:-4px}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-txt{padding:0 20px;color:#0273b6;font-weight:700}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$4.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId"] }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardComponent, decorators: [{
             type: Component,