npm - @sunbird-cb/toc - Versions diffs - 0.0.4-mauritius → 0.0.5-mauritius - Mend

@sunbird-cb/toc 0.0.4-mauritius → 0.0.5-mauritius

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/fesm2022/sunbird-cb-toc.mjs CHANGED Viewed

@@ -47,7 +47,7 @@ import * as i13$1 from '@angular/material/legacy-checkbox';
 import { MatLegacyCheckboxModule } from '@angular/material/legacy-checkbox';
 import * as i13$2 from '@angular/material/core';
 import { MatNativeDateModule, MatRippleModule, DateAdapter, NativeDateAdapter } from '@angular/material/core';
-import * as i8$1 from '@angular/material/datepicker';
+import * as i8$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i6$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
@@ -56,7 +56,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import * as i12 from '@angular/material/legacy-input';
 import { MatLegacyInputModule } from '@angular/material/legacy-input';
 import { MatLegacyListModule } from '@angular/material/legacy-list';
-import * as i7$1 from '@angular/material/legacy-menu';
+import * as i8$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';
@@ -78,7 +78,7 @@ import { SbUiResolverModule, WidgetBaseComponent } from '@sunbird-cb/resolver-v2
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i12$2 from '@sunbird-cb/discussion-v2';
 import { WidgetCommentModule } from '@sunbird-cb/discussion-v2';
-import * as i8$2 from '@angular/material/toolbar';
+import * as i8$3 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { VttFile } from '@polyflix/vtt-parser';
 import * as i11$2 from '@angular/material/tabs';
@@ -3206,11 +3206,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 class CertificateDialogComponent {
-    constructor(events, dialogRef, data, environment) {
+    constructor(events, dialogRef, data, environment, domainConfService) {
         this.events = events;
         this.dialogRef = dialogRef;
         this.data = data;
         this.environment = environment;
+        this.domainConfService = domainConfService;
         this.navUrl = '';
     }
     ngOnInit() {
@@ -3399,19 +3400,19 @@ class CertificateDialogComponent {
             type: WsEvents.EnumInteractSubTypes.CERTIFICATE,
         });
     }
-    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 [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" }] }); }
+    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' }, { token: i2$1.DomainConfService }], 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 *ngIf=\"(domainConfService?.isFeatureByPageEnabled('toc','shareToc'))\" 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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i8$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$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 [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"] }]
+            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 *ngIf=\"(domainConfService?.isFeatureByPageEnabled('toc','shareToc'))\" 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]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['environment']
-                }] }]; } });
+                }] }, { type: i2$1.DomainConfService }]; } });
 // import { saveAs } from 'file-saver'
 class SvgToPdfComponent {
@@ -16636,7 +16637,7 @@ class SurveyFormQuestionComponent {
         this.questionValues.emit(answerDetails);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurveyFormQuestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SurveyFormQuestionComponent, isStandalone: true, selector: "ws-app-survey-form-question", inputs: { questionForm: "questionForm", fieldDetails: "fieldDetails" }, outputs: { questionValues: "questionValues" }, ngImport: i0, template: "<form [formGroup]=\"questionForm\" class=\"pb-2 q-element mb-4 question-container\">\n    <div class=\"flex items-start\">\n        <div class=\"font-semibold margin-remove flex\"\n            [ngClass]=\"{'required' : fieldDetails.isRequired, 'pb-3': otherFieldType.includes(fieldDetails.fieldType)}\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{questionForm.value?.question}}\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"fieldDetails.fieldType\">\n        <ng-container *ngSwitchCase=\"'dropdown'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select placeholder=\"Select...\" formControlName=\"answer\">\n                    <mat-option value=\"{{obj.value}}\"\n                        *ngFor=\" let obj of fieldDetails?.values\">{{obj?.key}}</mat-option>\n                </mat-select>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'phone number'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" maxlength=\"10\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'date'\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [matDatepicker]=\"picker\" formControlName=\"answer\">\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'boolean'\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"answer\">\n                <mat-radio-button [value]=\"true\" class=\"pr-10 pb-2\">True</mat-radio-button>\n                <mat-radio-button [value]=\"false\" class=\"pr-10 pb-2\">False</mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'email'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.invalidEmail' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'rating'\">\n            <div class=\"rating-container\">\n                <mat-icon *ngFor=\"let star of stars; index as i\" class=\"stat-mat-icon\"\n                    [ngClass]=\"{ 'filled': i < questionForm.controls.answer.value }\" (click)=\"setRating(i + 1)\">\n                    star\n                </mat-icon>\n            </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'text'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'textarea'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <textarea matInput i18n-placeholder placeholder=\"Type here...\" rows=\"4\" cols=\"5\"\n                    formControlName=\"answer\"></textarea>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n            <mat-radio-group class=\"pt-2 custom\" formControlName=\"answer\">\n                <mat-radio-button *ngFor=\"let obj of fieldDetails?.values\" [value]=\"obj.value\" class=\"pr-5 pb-2\">\n                    {{ obj.key }}\n                </mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'numeric'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" type=\"text\"\n                    maxlength=\"18\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <section class=\"pt-2\">\n                <ng-container *ngFor=\"let objct of fieldDetails?.values; let i = index\">\n                    <mat-checkbox [checked]=\"objct.checked\" [value]=\"objct.value\" class=\"pr-5 pb-2 custom\"\n                        (change)=\"checkboxClicked($event, i)\">\n                        {{ objct.key }}\n                    </mat-checkbox>\n                </ng-container>\n            </section>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"fieldDetails.notApplicable\">\n        <div class=\"mt-2\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"isNA\" (change)=\"sectionChange()\">\n                <mat-radio-button class=\"pr-10 pb-2 my-raido\" value=\"true\">N/A</mat-radio-button>\n            </mat-radio-group>\n        </div>\n    </ng-container>\n</form>", styles: [".drag-icon{font-size:20px;color:#000}.q-element{padding:16px;background:#fff;border-radius:8px}.rating-container{display:flex;gap:5px}.stat-mat-icon{font-size:30px;cursor:pointer;color:#ccc;width:30px;height:30px}.stat-mat-icon.filled{color:#ffca28}:host ::ng-deep .question-container .mat-form-field-wrapper{padding:0!important}:host ::ng-deep .question-container .mat-radio-checked{background-color:#fff!important}:host ::ng-deep .question-container .mat-radio-label-content{font-size:14px!important;font-family:Montserrat}:host ::ng-deep .custom .mat-checkbox-layout,:host ::ng-deep .custom .mat-radio-label{white-space:normal!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatLegacyInputModule }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "ngmodule", type: MatLegacyRadioModule }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatLegacySelectModule }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatLegacyCheckboxModule }, { kind: "component", type: i13$1.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatLegacyFormFieldModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SurveyFormQuestionComponent, isStandalone: true, selector: "ws-app-survey-form-question", inputs: { questionForm: "questionForm", fieldDetails: "fieldDetails" }, outputs: { questionValues: "questionValues" }, ngImport: i0, template: "<form [formGroup]=\"questionForm\" class=\"pb-2 q-element mb-4 question-container\">\n    <div class=\"flex items-start\">\n        <div class=\"font-semibold margin-remove flex\"\n            [ngClass]=\"{'required' : fieldDetails.isRequired, 'pb-3': otherFieldType.includes(fieldDetails.fieldType)}\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{questionForm.value?.question}}\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"fieldDetails.fieldType\">\n        <ng-container *ngSwitchCase=\"'dropdown'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select placeholder=\"Select...\" formControlName=\"answer\">\n                    <mat-option value=\"{{obj.value}}\"\n                        *ngFor=\" let obj of fieldDetails?.values\">{{obj?.key}}</mat-option>\n                </mat-select>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'phone number'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" maxlength=\"10\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'date'\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [matDatepicker]=\"picker\" formControlName=\"answer\">\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'boolean'\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"answer\">\n                <mat-radio-button [value]=\"true\" class=\"pr-10 pb-2\">True</mat-radio-button>\n                <mat-radio-button [value]=\"false\" class=\"pr-10 pb-2\">False</mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'email'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.invalidEmail' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'rating'\">\n            <div class=\"rating-container\">\n                <mat-icon *ngFor=\"let star of stars; index as i\" class=\"stat-mat-icon\"\n                    [ngClass]=\"{ 'filled': i < questionForm.controls.answer.value }\" (click)=\"setRating(i + 1)\">\n                    star\n                </mat-icon>\n            </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'text'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'textarea'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <textarea matInput i18n-placeholder placeholder=\"Type here...\" rows=\"4\" cols=\"5\"\n                    formControlName=\"answer\"></textarea>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n            <mat-radio-group class=\"pt-2 custom\" formControlName=\"answer\">\n                <mat-radio-button *ngFor=\"let obj of fieldDetails?.values\" [value]=\"obj.value\" class=\"pr-5 pb-2\">\n                    {{ obj.key }}\n                </mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'numeric'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" type=\"text\"\n                    maxlength=\"18\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <section class=\"pt-2\">\n                <ng-container *ngFor=\"let objct of fieldDetails?.values; let i = index\">\n                    <mat-checkbox [checked]=\"objct.checked\" [value]=\"objct.value\" class=\"pr-5 pb-2 custom\"\n                        (change)=\"checkboxClicked($event, i)\">\n                        {{ objct.key }}\n                    </mat-checkbox>\n                </ng-container>\n            </section>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"fieldDetails.notApplicable\">\n        <div class=\"mt-2\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"isNA\" (change)=\"sectionChange()\">\n                <mat-radio-button class=\"pr-10 pb-2 my-raido\" value=\"true\">N/A</mat-radio-button>\n            </mat-radio-group>\n        </div>\n    </ng-container>\n</form>", styles: [".drag-icon{font-size:20px;color:#000}.q-element{padding:16px;background:#fff;border-radius:8px}.rating-container{display:flex;gap:5px}.stat-mat-icon{font-size:30px;cursor:pointer;color:#ccc;width:30px;height:30px}.stat-mat-icon.filled{color:#ffca28}:host ::ng-deep .question-container .mat-form-field-wrapper{padding:0!important}:host ::ng-deep .question-container .mat-radio-checked{background-color:#fff!important}:host ::ng-deep .question-container .mat-radio-label-content{font-size:14px!important;font-family:Montserrat}:host ::ng-deep .custom .mat-checkbox-layout,:host ::ng-deep .custom .mat-radio-label{white-space:normal!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatLegacyInputModule }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "ngmodule", type: MatLegacyRadioModule }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatLegacySelectModule }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatLegacyCheckboxModule }, { kind: "component", type: i13$1.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatLegacyFormFieldModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurveyFormQuestionComponent, decorators: [{
             type: Component,
@@ -19923,7 +19924,7 @@ class EnrollProfileFormComponent {
         this.checkCurrentDesignationPresent();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnrollProfileFormComponent, deps: [{ token: i7.MatLegacySnackBar }, { token: i1$3.MatLegacyDialogRef }, { token: UserProfileService }, { token: i2$1.ConfigurationsService }, { token: ProfileV2Service }, { token: OtpService }, { token: NPSGridService }, { token: i1$2.TranslateService }, { token: i2.DatePipe }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EnrollProfileFormComponent, selector: "ws-app-enroll-profile-form", host: { listeners: { "document:click": "handleClickOutside($event)" } }, viewQueries: [{ propertyName: "timerDiv", first: true, predicate: ["timerDiv"], descendants: true }, { propertyName: "emailTimerDiv", first: true, predicate: ["emailTimerDiv"], descendants: true }, { propertyName: "textBox", first: true, predicate: ["textBox"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "languageTextBox", first: true, predicate: ["languageTextBox"], descendants: true }, { propertyName: "languageDropdown", first: true, predicate: ["languageDropdown"], descendants: true }], ngImport: i0, template: "<div #fullScreenContainer>\n    <div class=\"dialog-header text-right mb-2\">\n        <mat-icon class=\"mat-icon notranslate material-icons close-icon cursor-pointer\" matprefix=\"\" role=\"img\" aria-hidden=\"true\" [mat-dialog-close]=\"false\">close</mat-icon>\n    </div>\n    <h1> {{data?.courseName}} </h1>\n    <div class=\"w-full\" *ngIf=\"!isLoading\">\n      <form [formGroup]=\"userDetailsForm\" class=\"userDetailsForm\">\n          <div class=\"w-full\" *ngIf=\"canShowName\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.name' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"name\" placeholder=\"Name\"/>\n            </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowOrg\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ (showDoptChanges ? 'profileInfo.presentOrganisation' : 'profileInfo.organisation') | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"organisation\" placeholder=\"Organisation\"/>\n            </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowEmail\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.email' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"primaryEmail\" placeholder=\"Enter email\" (keyup)=\"handleEmpty('primaryEmail')\"/>\n            </mat-form-field>\n            <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm.get('primaryEmail').hasError('required') || userDetailsForm.get('primaryEmail').hasError('pattern')\">\n              {{ 'profileInfo.invalidEmail' | translate }}\n            </mat-error>\n            <div class=\"flex justify-end\" *ngIf=\"verifyEmail && !otpSent && !eVerified\">\n              <span class=\"get-otp\" (click)=\"handleGenerateEmailOTP('email')\">{{ 'profileInfo.getOTP' | translate\n                }}</span>\n            </div>\n            <div *ngIf=\"emailOtpSent\">\n              <form [formGroup]=\"emailOtpForm\">\n                <div class=\"w-full\">\n                  <div class=\"flex enter-otp\">\n                    <div class=\"font-semibold required\"\n                      i18n=\"Title label|Label which explains the user to enter title\">\n                      {{ 'profileInfo.enterOTP' | translate }}\n                    </div>\n                    <div class=\"mb-3\">Time Remaining: <span #emailTimerDiv></span></div>\n                  </div>\n                  <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n                    <input type=\"text\" matInput formControlName=\"eOtp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n                  </mat-form-field>\n                </div>\n                <div class=\"w-full\">\n                  <div class=\"flex justify-center\" *ngIf=\"showEmailResendOTP\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n                        <div class=\"resend-otp\" (click)=\"handleResendEmailOTP()\">&nbsp;&nbsp;{{ 'profileInfo.resentOTP' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"w-full mb-4\">\n                  <div class=\"flex flex-row justify-between\">\n                    <button class=\"save-button\" (click)=\"verifyEmailOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowGroup\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.group' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select formControlName=\"group\" placeholder=\"{{ 'profileInfo.chooseAGroup' | translate }}\">\n                  <mat-option *ngFor=\"let group of groupData\" value=\"{{group}}\">{{ group }}</mat-option>\n                </mat-select>\n            </mat-form-field>\n            <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n              {{'profileInfo.groupNote' | translate}}\n            </div>\n        </div>\n        <div class=\"w-full relative\" *ngIf=\"canShowDesignation\">\n          <div class=\"font-semibold margin-0 required\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{ 'profileInfo.designation' | translate }}\n          </div>\n          <!-- <mat-form-field appearance=\"outline\" class=\"w-full\">\n            <div class=\"flex flex-row auto-complete-row relative\">\n              <input type=\"text\" class=\"input-text high-zindex\" matInput formControlName=\"designation\"\n                (input)=\"filterdesignation($event.target.value)\" (focus)=\"onDesignationsFocus()\" #textBox\n                placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\">\n              <mat-icon class=\"disagnation-caret\">arrow_drop_down</mat-icon>\n            </div>\n          </mat-form-field> -->\n          <div class=\"custom-select-container\">\n            <mat-form-field appearance=\"outline\" class=\"fixed-height-select\">\n              <mat-select placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\" formControlName=\"designation\"  (closed)=\"onDesignationDropdownClosed()\" (openedChange)=\"setupScrollListener($event)\"  panelClass=\"search-panel\">\n                <!-- Sticky search input container -->\n                <div class=\"sticky-search-container\" (click)=\"$event.stopPropagation()\">\n                  <div class=\"search-input-wrapper\">\n                    <input \n                                type=\"text\" \n                                placeholder=\"Search designation\" \n                                formControlName=\"searchDesignation\" \n                                class=\"search-input\"\n                                (keydown)=\"$event.stopPropagation()\"\n                                (click)=\"$event.stopPropagation()\"\n                                autocomplete=\"off\">\n                    <button \n                                *ngIf=\"searchDesignation?.value\" \n                                type=\"button\" \n                                class=\"clear-button\" \n                                (click)=\"searchDesignation?.setValue('')\">\n                                \u2715\n                    </button>\n                  </div>\n                </div>\n                <!-- Options list -->\n                <mat-option *ngFor=\"let option of designationsMeta \" [value]=\"option?.name\" (click)=\"selectDesignation(option?.name)\">\n                        {{ option?.name }}\n                </mat-option>\n                 <!-- Loading indicator -->\n                  <div *ngIf=\"isLoadingMoreDesignations\" class=\"loading-indicator\">\n                    Loading more...\n                  </div>\n                <!-- No results message -->\n                <mat-option *ngIf=\"(designationsMeta )?.length === 0\" disabled>\n                        No matches found\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <mat-error *ngIf=\"userDetailsForm?.controls['designation']?.invalid && userDetailsForm?.controls['designation']?.touched\"\n                class=\"mat-error\">\n                Please select a valid designation.\n            </mat-error>\n          <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n            {{'profileInfo.designationNote' | translate}}\n          </div>\n          <!-- <div class=\"auto-list flex flex-col ignore-blur\" #dropdown\n            *ngIf=\"openDesignationDropdown && filterDesignationsMeta.length\">\n            <div (mousedown)=\"preventBlur($event)\"\n              class=\"item {{userDetailsForm.controls['designation']?.value?.toLowerCase() === designation?.name?.toLowerCase() ? 'item-active' : ''}}\"\n              *ngFor=\"let designation of filterDesignationsMeta\" (click)=\"selectDesignation(designation.name)\">\n              {{ designation?.name }}\n            </div>\n          </div> -->\n        </div>\n        <div class=\"w-full relative\" *ngIf=\"canShowDesignation && canShowOtherDesignation\">\n          <div class=\"font-semibold margin-0 required\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{ 'profileInfo.otherDesignation' | translate }}\n          </div>\n          <div *ngIf=\"canShowOtherDesignation\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <input type=\"text\" class=\"input-text\" matInput formControlName=\"otherDesignation\" placeholder=\"{{ 'profileInfo.enterDesignation' | translate }}\"/>\n            </mat-form-field>\n          </div>\n        </div>\n          <div class=\"w-full\" *ngIf=\"canShowEmployeeCode\">\n              <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'profileInfo.employeeId' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input type=\"text\" class=\"input-text\" matInput formControlName=\"employeeCode\" placeholder=\"Enter employee code\"/>\n              </mat-form-field>    \n              <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('employeeCode')?.hasError('pattern')\">\n                Please enter an Alpha-numeric value only\n            </mat-error>                \n          </div>\n          <div class=\"w-full\" *ngIf=\"canshowMobile\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.mobileNumber' | translate }}\n            </div>\n            <div class=\"flex flex-row gap-4\">\n              <div class=\"country-code flex justify-center items-center\" appearance=\"outline\">\n                +91\n              </div>\n              <div class=\"flex-1\">\n                <div class=\"flex flex-col\">\n                  <mat-form-field appearance=\"outline\" class=\"mobile-num\">\n                    <input type=\"text\" class=\"input-text mobile-text relative\" maxlength=\"10\" (keyup)=\"handleEmpty('mobile')\"\n                      matInput formControlName=\"mobile\" placeholder=\"Enter mobile number\"/>\n                      <mat-icon class=\"verified-check\" *ngIf=\"mVerified\">check_circle</mat-icon>\n                  </mat-form-field>\n                  <mat-error class=\"mat-error\"\n                      *ngIf=\"userDetailsForm.get('mobile').hasError('required') || userDetailsForm.get('mobile').hasError('pattern')\">\n                        {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n                    </mat-error>\n                </div>\n                <div class=\"flex justify-end\" *ngIf=\"verifyMobile && !otpSent && !mVerified\">\n                  <span class=\"get-otp sm:mr-4\" (click)=\"handleGenerateOTP('phone')\">{{ 'profileInfo.getOTP' |\n                    translate }}</span>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"otpSent\">             \n              <form [formGroup]=\"otpForm\">\n                <div class=\"w-full\">\n                  <div class=\"flex enter-otp\">\n                    <div class=\"font-semibold required\"\n                      i18n=\"Title label|Label which explains the user to enter title\">\n                      {{ 'profileInfo.enterOTP' | translate }}\n                    </div>\n                    <div class=\"mb-3\">Time Remaining: <span #timerDiv></span></div>\n                  </div>\n                  <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n                    <input type=\"text\" matInput formControlName=\"otp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n                  </mat-form-field>\n                </div>\n                <div class=\"w-full\">\n                  <div class=\"flex justify-center\" *ngIf=\"showResendOTP\">  \n                    <div class=\"flex flex-row\">\n                        <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n                        <div class=\"resend-otp\" (click)=\"handleResendOTP()\">&nbsp;&nbsp;{{ 'profileInfo.resentOTP' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"w-full mb-4\">\n                  <div class=\"flex flex-row justify-between\">\n                    <button class=\"save-button\" (click)=\"verifyMobileOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n        <div class=\"w-full\" *ngIf=\"canShowGender\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.gender' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select formControlName=\"gender\" placeholder=\"Select gender\">\n                    <mat-option *ngFor=\"let _gender of eUserGender\" value=\"{{ _gender }}\">{{\n                      handleTranslateTo(_gender.toLowerCase()) }}</mat-option>\n                </mat-select>\n            </mat-form-field>\n          </div>\n            <div class=\"w-full\" *ngIf=\"canShowDob\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.dob' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input matInput class=\"input-text icon-include-input\" [max]=\"currentDate\" [matDatepicker]=\"picker\" [(ngModel)]=\"selectedDate\"\n                formControlName=\"dob\" placeholder=\"Select date of birth\" />\n                  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                  <mat-datepicker #picker></mat-datepicker>\n              </mat-form-field>\n          </div>\n          <div class=\"w-full relative\" *ngIf=\"canShowDomicileMedium\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.motherTongue' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <div class=\"flex flex-row auto-complete-row relative\">\n                <input type=\"text\" class=\"input-text high-zindex\" aria-label=\"Domicile Medium (Mother Tongue)\" matInput\n                  formControlName=\"domicileMedium\" placeholder=\"Select mother tongue\"\n                  (input)=\"filterLanguage($event.target.value)\" (focus)=\"onLanguageFocus()\" #languageTextBox/>\n                <mat-icon class=\"mother-toungue-caret\">arrow_drop_down</mat-icon>\n              </div>\n            </mat-form-field>\n            <mat-error *ngIf=\"userDetailsForm.controls['domicileMedium'].invalid && userDetailsForm.controls['domicileMedium'].touched\"\n                class=\"mat-error\">\n                  Please select a valid mother tongue.\n              </mat-error>\n            <div class=\"auto-language-list flex flex-col ignore-blur\" #languageDropdown\n              *ngIf=\"openLanguageDropdown && masterLanguages?.length\">\n              <div (mousedown)=\"preventLanguageBlur($event)\"\n                class=\"language-item {{userDetailsForm.controls['domicileMedium']?.value?.toLowerCase() === language?.name?.toLowerCase() ? 'language-item-active' : ''}}\"\n                *ngFor=\"let language of masterLanguages\" (click)=\"selectLanguage(language.name)\">\n                {{ language?.name }}\n              </div>\n            </div>\n          </div>\n            <div class=\"w-full\" *ngIf=\"canShowCategory\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.category' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <mat-select formControlName=\"category\" placeholder=\"Select category\">\n                    <mat-option *ngFor=\"let category of eCategory\" value=\"{{ category }}\">{{\n                      handleTranslateTo(category?.toLowerCase()) }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowpinCode\">\n              <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'userProfile.officePinCode' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input type=\"email\" class=\"input-text\" matInput maxlength=\"6\" formControlName=\"pinCode\" placeholder=\"Enter pincode\"/>\n              </mat-form-field>\n              <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('pinCode')?.hasError('pattern')\">\n                {{ 'profileInfo.invalidPinCode' | translate }}\n                </mat-error>          \n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails  && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.fromGovOrganization' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"isCadre\" (selectionChange)=\"getIsCadreStatus($event.value)\" placeholder=\"Select cadre\">\n                    <mat-option [value]=\"true\">Yes</mat-option>\n                    <mat-option [value]=\"false\">No</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && isCadreStatus  && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.typeOfCivilService' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"typeOfCivilService\" (selectionChange)=\"getService($event.value)\"  placeholder=\"Select type of civil service\">\n                    <mat-option *ngFor=\"let service of civilServiceTypes\" [value]=\"service\">{{ service }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('typeOfCivilService').value && userDetailsForm.get('isCadre').value && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.serviceType' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"serviceType\" (selectionChange)=\"onServiceSelect($event)\" placeholder=\"Select service\">\n                      <mat-option *ngFor=\"let service of serviceName\" [value]=\"service\">{{ service }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType').value && \n              userDetailsForm.get('isCadre').value \n              && userDetailsForm.get('typeOfCivilService').value && (\n                  userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n                  userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n                  userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n                ) && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.cadre' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"cadreName\" (selectionChange)=\"onCadreSelect($event.value)\" placeholder=\"Select cadre\">\n                      <mat-option *ngFor=\"let state of cadre\" [value]=\"state\">{{ state }}</mat-option>\n                    </mat-select>\n                </mat-form-field>\n          </div>\n          <ng-container *ngIf=\"!showDoptChanges\">\n            <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType') && (userDetailsForm.get('serviceType').value && \n            userDetailsForm.get('isCadre').value && userDetailsForm.get('typeOfCivilService').value && (\n                userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n                userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n                userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n            ) && userDetailsForm.get('cadreName').value)  ? true : ((userDetailsForm.get('serviceType').value && \n                userDetailsForm.get('isCadre').value \n            && userDetailsForm.get('typeOfCivilService').value && (\n                userDetailsForm.get('serviceType').value !== 'Indian Administrative Service (IAS)' && \n                userDetailsForm.get('serviceType').value !== 'Indian Police Service (IPS)' && \n                userDetailsForm.get('serviceType').value !== 'Indian Forest Service (IFoS)' \n            ))) ? true : false\">\n                <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'profileInfo.batch' | translate }}\n                </div>\n                <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                    <mat-select formControlName=\"cadreBatch\" placeholder=\"Select batch\">\n                        <mat-option *ngFor=\"let year of yearArray\" [value]=\"year\">{{ year }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n            </div>\n          </ng-container>\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('isCadre').value &&  userDetailsForm.get('cadreBatch').value && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required mb-3\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.cadreControllingAuthority' | translate }}\n              </div>\n              <span class=\"cadreControl-name\">{{cadreControllingAuthority}}</span>\n          </div>\n          <ng-container>\n            <div class=\"w-full flex flex-row gap-4 justify-end margin-top-m\">\n              <button\n                class=\"save-button\"\n                [disabled]=\"userDetailsForm?.invalid || !mVerified || !eVerified\"\n                (click)=\"onSubmitForm(userDetailsForm)\">\n                {{ 'profileInfo.saveChanges' | translate }}\n              </button>\n            </div>\n          </ng-container>\n      </form>\n    </div>\n    <ng-container *ngIf=\"addLoader > 0\" >\n      <div class=\"text-center my-2 loader flex justify-center items-center\">\n        <mat-spinner class=\"inline-block\"></mat-spinner>\n      </div>\n    </ng-container>\n</div>\n", styles: ["::ng-deep .course-survey .main-container{width:auto!important;overflow-y:auto!important;max-height:auto!important}.high-zindex{z-index:9999}.auto-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-list .item{padding:5px 15px}.auto-list .item:hover{background-color:#f3f3f3;cursor:pointer}.auto-list .item-active{background-color:#1b4ca1!important;color:#fff!important}.auto-language-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-language-list .language-item{padding:5px 15px}.auto-language-list .language-item:hover{background-color:#f3f3f3;cursor:pointer}.auto-language-list .language-item-active{background-color:#1b4ca1!important;color:#fff!important}::ng-deep .mat-calendar-body-active{background:#1b4ca1!important;border-radius:100%!important}::ng-deep .course-survey .lib-container{height:100%!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container{padding-left:0!important;padding-right:0!important;padding-bottom:1rem!important}}.disagnation-caret,.mother-toungue-caret{position:absolute;right:0;bottom:0}::ng-deep .userDetailsForm .mat-form-field-appearance-outline .mat-form-field-infix{padding:.5rem 0 .8rem}input[disabled]+mat-icon.disagnation-caret{opacity:.5}input[disabled]+mat-icon.mother-toungue-caret{opacity:.5}::ng-deep .course-survey .lib-container-2{height:auto;min-height:unset!important;padding:0!important;box-shadow:none!important;margin-bottom:2rem!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container-2{padding-left:0!important;padding-right:0!important}}.profile-form-field .mat-select{border:none}.customForm{padding-right:0!important;padding-bottom:1rem!important;padding:1rem 3rem}.cadreControl-name{background:#c3c3c3;padding:10px}.country-code{margin-top:5px;text-align:center;width:50px;height:46px;border:1px solid #d6d5d5;border-radius:5px}.get-otp{color:#1b4ca1;font-weight:700;cursor:pointer;font-size:14px}.enter-otp{align-items:center;justify-content:space-between}.custom-size{width:96%}.resend-otp{color:#1b4ca1;font-weight:700;cursor:pointer}.verified-check{position:absolute;right:3px;color:#5fa800;font-size:18px;width:18px;height:18px}.save-button:disabled{opacity:.6!important}.loader{position:absolute;top:0;left:0;z-index:1000;height:100vh;width:100vw;background-color:#80808045}.mat-error{margin:-10px 0 5px}:host ::ng-deep .userDetailsForm .mat-form-field-wrapper{padding-bottom:8px!important}.custom-select-container,.fixed-height-select{width:100%}.fixed-height-select ::ng-deep .mat-form-field-flex{height:48px!important;min-height:45px!important;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-infix{padding:0!important;border-top:0!important;height:45px!important;display:flex;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.fixed-height-select ::ng-deep .mat-select-arrow-wrapper{transform:translateY(0)!important}.fixed-height-select ::ng-deep .mat-form-field-label-wrapper{top:-1.1em}::ng-deep .search-panel{max-height:350px}::ng-deep .search-panel .sticky-search-container{position:sticky;top:0;z-index:2;background:#fff;padding:8px;border-bottom:1px solid rgba(0,0,0,.12);box-shadow:0 2px 4px #00000014}::ng-deep .search-panel .search-input-wrapper{position:relative;width:100%}::ng-deep .search-panel .search-input{width:100%;height:35px;padding:0 30px 0 12px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;box-sizing:border-box}::ng-deep .search-panel .search-input:focus{outline:none;border-color:#f3962f;box-shadow:0 0 0 1px #f3962f33}::ng-deep .search-panel .clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#00000080;font-size:14px;padding:4px;display:flex;align-items:center;justify-content:center}::ng-deep .search-panel .clear-button:hover{color:#000c}::ng-deep .search-panel .mat-option.mat-option-disabled{color:#00000061;font-style:italic}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-text-field-wrapper{height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-flex{min-height:45px!important;height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-infix{min-height:45px!important;height:45px!important;padding-top:0!important;padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EnrollProfileFormComponent, selector: "ws-app-enroll-profile-form", host: { listeners: { "document:click": "handleClickOutside($event)" } }, viewQueries: [{ propertyName: "timerDiv", first: true, predicate: ["timerDiv"], descendants: true }, { propertyName: "emailTimerDiv", first: true, predicate: ["emailTimerDiv"], descendants: true }, { propertyName: "textBox", first: true, predicate: ["textBox"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "languageTextBox", first: true, predicate: ["languageTextBox"], descendants: true }, { propertyName: "languageDropdown", first: true, predicate: ["languageDropdown"], descendants: true }], ngImport: i0, template: "<div #fullScreenContainer>\n    <div class=\"dialog-header text-right mb-2\">\n        <mat-icon class=\"mat-icon notranslate material-icons close-icon cursor-pointer\" matprefix=\"\" role=\"img\" aria-hidden=\"true\" [mat-dialog-close]=\"false\">close</mat-icon>\n    </div>\n    <h1> {{data?.courseName}} </h1>\n    <div class=\"w-full\" *ngIf=\"!isLoading\">\n      <form [formGroup]=\"userDetailsForm\" class=\"userDetailsForm\">\n          <div class=\"w-full\" *ngIf=\"canShowName\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.name' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"name\" placeholder=\"Name\"/>\n            </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowOrg\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ (showDoptChanges ? 'profileInfo.presentOrganisation' : 'profileInfo.organisation') | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"organisation\" placeholder=\"Organisation\"/>\n            </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowEmail\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.email' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input type=\"text\" class=\"input-text\" matInput formControlName=\"primaryEmail\" placeholder=\"Enter email\" (keyup)=\"handleEmpty('primaryEmail')\"/>\n            </mat-form-field>\n            <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm.get('primaryEmail').hasError('required') || userDetailsForm.get('primaryEmail').hasError('pattern')\">\n              {{ 'profileInfo.invalidEmail' | translate }}\n            </mat-error>\n            <div class=\"flex justify-end\" *ngIf=\"verifyEmail && !otpSent && !eVerified\">\n              <span class=\"get-otp\" (click)=\"handleGenerateEmailOTP('email')\">{{ 'profileInfo.getOTP' | translate\n                }}</span>\n            </div>\n            <div *ngIf=\"emailOtpSent\">\n              <form [formGroup]=\"emailOtpForm\">\n                <div class=\"w-full\">\n                  <div class=\"flex enter-otp\">\n                    <div class=\"font-semibold required\"\n                      i18n=\"Title label|Label which explains the user to enter title\">\n                      {{ 'profileInfo.enterOTP' | translate }}\n                    </div>\n                    <div class=\"mb-3\">Time Remaining: <span #emailTimerDiv></span></div>\n                  </div>\n                  <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n                    <input type=\"text\" matInput formControlName=\"eOtp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n                  </mat-form-field>\n                </div>\n                <div class=\"w-full\">\n                  <div class=\"flex justify-center\" *ngIf=\"showEmailResendOTP\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n                        <div class=\"resend-otp\" (click)=\"handleResendEmailOTP()\">&nbsp;&nbsp;{{ 'profileInfo.resentOTP' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"w-full mb-4\">\n                  <div class=\"flex flex-row justify-between\">\n                    <button class=\"save-button\" (click)=\"verifyEmailOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowGroup\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.group' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select formControlName=\"group\" placeholder=\"{{ 'profileInfo.chooseAGroup' | translate }}\">\n                  <mat-option *ngFor=\"let group of groupData\" value=\"{{group}}\">{{ group }}</mat-option>\n                </mat-select>\n            </mat-form-field>\n            <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n              {{'profileInfo.groupNote' | translate}}\n            </div>\n        </div>\n        <div class=\"w-full relative\" *ngIf=\"canShowDesignation\">\n          <div class=\"font-semibold margin-0 required\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{ 'profileInfo.designation' | translate }}\n          </div>\n          <!-- <mat-form-field appearance=\"outline\" class=\"w-full\">\n            <div class=\"flex flex-row auto-complete-row relative\">\n              <input type=\"text\" class=\"input-text high-zindex\" matInput formControlName=\"designation\"\n                (input)=\"filterdesignation($event.target.value)\" (focus)=\"onDesignationsFocus()\" #textBox\n                placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\">\n              <mat-icon class=\"disagnation-caret\">arrow_drop_down</mat-icon>\n            </div>\n          </mat-form-field> -->\n          <div class=\"custom-select-container\">\n            <mat-form-field appearance=\"outline\" class=\"fixed-height-select\">\n              <mat-select placeholder=\"{{ 'profileInfo.chooseADesignation' | translate }}\" formControlName=\"designation\"  (closed)=\"onDesignationDropdownClosed()\" (openedChange)=\"setupScrollListener($event)\"  panelClass=\"search-panel\">\n                <!-- Sticky search input container -->\n                <div class=\"sticky-search-container\" (click)=\"$event.stopPropagation()\">\n                  <div class=\"search-input-wrapper\">\n                    <input \n                                type=\"text\" \n                                placeholder=\"Search designation\" \n                                formControlName=\"searchDesignation\" \n                                class=\"search-input\"\n                                (keydown)=\"$event.stopPropagation()\"\n                                (click)=\"$event.stopPropagation()\"\n                                autocomplete=\"off\">\n                    <button \n                                *ngIf=\"searchDesignation?.value\" \n                                type=\"button\" \n                                class=\"clear-button\" \n                                (click)=\"searchDesignation?.setValue('')\">\n                                \u2715\n                    </button>\n                  </div>\n                </div>\n                <!-- Options list -->\n                <mat-option *ngFor=\"let option of designationsMeta \" [value]=\"option?.name\" (click)=\"selectDesignation(option?.name)\">\n                        {{ option?.name }}\n                </mat-option>\n                 <!-- Loading indicator -->\n                  <div *ngIf=\"isLoadingMoreDesignations\" class=\"loading-indicator\">\n                    Loading more...\n                  </div>\n                <!-- No results message -->\n                <mat-option *ngIf=\"(designationsMeta )?.length === 0\" disabled>\n                        No matches found\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <mat-error *ngIf=\"userDetailsForm?.controls['designation']?.invalid && userDetailsForm?.controls['designation']?.touched\"\n                class=\"mat-error\">\n                Please select a valid designation.\n            </mat-error>\n          <div class=\"text-xs mb-2\" *ngIf=\"showDoptChanges\">\n            {{'profileInfo.designationNote' | translate}}\n          </div>\n          <!-- <div class=\"auto-list flex flex-col ignore-blur\" #dropdown\n            *ngIf=\"openDesignationDropdown && filterDesignationsMeta.length\">\n            <div (mousedown)=\"preventBlur($event)\"\n              class=\"item {{userDetailsForm.controls['designation']?.value?.toLowerCase() === designation?.name?.toLowerCase() ? 'item-active' : ''}}\"\n              *ngFor=\"let designation of filterDesignationsMeta\" (click)=\"selectDesignation(designation.name)\">\n              {{ designation?.name }}\n            </div>\n          </div> -->\n        </div>\n        <div class=\"w-full relative\" *ngIf=\"canShowDesignation && canShowOtherDesignation\">\n          <div class=\"font-semibold margin-0 required\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{ 'profileInfo.otherDesignation' | translate }}\n          </div>\n          <div *ngIf=\"canShowOtherDesignation\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <input type=\"text\" class=\"input-text\" matInput formControlName=\"otherDesignation\" placeholder=\"{{ 'profileInfo.enterDesignation' | translate }}\"/>\n            </mat-form-field>\n          </div>\n        </div>\n          <div class=\"w-full\" *ngIf=\"canShowEmployeeCode\">\n              <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'profileInfo.employeeId' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input type=\"text\" class=\"input-text\" matInput formControlName=\"employeeCode\" placeholder=\"Enter employee code\"/>\n              </mat-form-field>    \n              <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('employeeCode')?.hasError('pattern')\">\n                Please enter an Alpha-numeric value only\n            </mat-error>                \n          </div>\n          <div class=\"w-full\" *ngIf=\"canshowMobile\">\n            <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.mobileNumber' | translate }}\n            </div>\n            <div class=\"flex flex-row gap-4\">\n              <div class=\"country-code flex justify-center items-center\" appearance=\"outline\">\n                +91\n              </div>\n              <div class=\"flex-1\">\n                <div class=\"flex flex-col\">\n                  <mat-form-field appearance=\"outline\" class=\"mobile-num\">\n                    <input type=\"text\" class=\"input-text mobile-text relative\" maxlength=\"10\" (keyup)=\"handleEmpty('mobile')\"\n                      matInput formControlName=\"mobile\" placeholder=\"Enter mobile number\"/>\n                      <mat-icon class=\"verified-check\" *ngIf=\"mVerified\">check_circle</mat-icon>\n                  </mat-form-field>\n                  <mat-error class=\"mat-error\"\n                      *ngIf=\"userDetailsForm.get('mobile').hasError('required') || userDetailsForm.get('mobile').hasError('pattern')\">\n                        {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n                    </mat-error>\n                </div>\n                <div class=\"flex justify-end\" *ngIf=\"verifyMobile && !otpSent && !mVerified\">\n                  <span class=\"get-otp sm:mr-4\" (click)=\"handleGenerateOTP('phone')\">{{ 'profileInfo.getOTP' |\n                    translate }}</span>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"otpSent\">             \n              <form [formGroup]=\"otpForm\">\n                <div class=\"w-full\">\n                  <div class=\"flex enter-otp\">\n                    <div class=\"font-semibold required\"\n                      i18n=\"Title label|Label which explains the user to enter title\">\n                      {{ 'profileInfo.enterOTP' | translate }}\n                    </div>\n                    <div class=\"mb-3\">Time Remaining: <span #timerDiv></span></div>\n                  </div>\n                  <mat-form-field appearance=\"outline\" class=\"profile-form-field mobile-num\">\n                    <input type=\"text\" matInput formControlName=\"otp\" class=\"input-text custom-size\" placeholder=\"{{ 'profileInfo.enterTheOTP' | translate }}\" maxlength=\"6\" />\n                  </mat-form-field>\n                </div>\n                <div class=\"w-full\">\n                  <div class=\"flex justify-center\" *ngIf=\"showResendOTP\">  \n                    <div class=\"flex flex-row\">\n                        <div class=\"timer\">{{ 'profileInfo.didNotReceiveOTP' | translate }}</div>\n                        <div class=\"resend-otp\" (click)=\"handleResendOTP()\">&nbsp;&nbsp;{{ 'profileInfo.resentOTP' | translate }}</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"w-full mb-4\">\n                  <div class=\"flex flex-row justify-between\">\n                    <button class=\"save-button\" (click)=\"verifyMobileOTP()\">{{ 'profileInfo.submit' | translate }}</button>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n        <div class=\"w-full\" *ngIf=\"canShowGender\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.gender' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select formControlName=\"gender\" placeholder=\"Select gender\">\n                    <mat-option *ngFor=\"let _gender of eUserGender\" value=\"{{ _gender }}\">{{\n                      handleTranslateTo(_gender.toLowerCase()) }}</mat-option>\n                </mat-select>\n            </mat-form-field>\n          </div>\n            <div class=\"w-full\" *ngIf=\"canShowDob\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.dob' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input matInput class=\"input-text icon-include-input\" [max]=\"currentDate\" [matDatepicker]=\"picker\" [(ngModel)]=\"selectedDate\"\n                formControlName=\"dob\" placeholder=\"Select date of birth\" />\n                  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                  <mat-datepicker #picker></mat-datepicker>\n              </mat-form-field>\n          </div>\n          <div class=\"w-full relative\" *ngIf=\"canShowDomicileMedium\">\n            <div class=\"font-semibold margin-0 required\"\n              i18n=\"Title label|Label which explains the user to enter title\">\n              {{ 'profileInfo.motherTongue' | translate }}\n            </div>\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <div class=\"flex flex-row auto-complete-row relative\">\n                <input type=\"text\" class=\"input-text high-zindex\" aria-label=\"Domicile Medium (Mother Tongue)\" matInput\n                  formControlName=\"domicileMedium\" placeholder=\"Select mother tongue\"\n                  (input)=\"filterLanguage($event.target.value)\" (focus)=\"onLanguageFocus()\" #languageTextBox/>\n                <mat-icon class=\"mother-toungue-caret\">arrow_drop_down</mat-icon>\n              </div>\n            </mat-form-field>\n            <mat-error *ngIf=\"userDetailsForm.controls['domicileMedium'].invalid && userDetailsForm.controls['domicileMedium'].touched\"\n                class=\"mat-error\">\n                  Please select a valid mother tongue.\n              </mat-error>\n            <div class=\"auto-language-list flex flex-col ignore-blur\" #languageDropdown\n              *ngIf=\"openLanguageDropdown && masterLanguages?.length\">\n              <div (mousedown)=\"preventLanguageBlur($event)\"\n                class=\"language-item {{userDetailsForm.controls['domicileMedium']?.value?.toLowerCase() === language?.name?.toLowerCase() ? 'language-item-active' : ''}}\"\n                *ngFor=\"let language of masterLanguages\" (click)=\"selectLanguage(language.name)\">\n                {{ language?.name }}\n              </div>\n            </div>\n          </div>\n            <div class=\"w-full\" *ngIf=\"canShowCategory\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.category' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <mat-select formControlName=\"category\" placeholder=\"Select category\">\n                    <mat-option *ngFor=\"let category of eCategory\" value=\"{{ category }}\">{{\n                      handleTranslateTo(category?.toLowerCase()) }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowpinCode\">\n              <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'userProfile.officePinCode' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                  <input type=\"email\" class=\"input-text\" matInput maxlength=\"6\" formControlName=\"pinCode\" placeholder=\"Enter pincode\"/>\n              </mat-form-field>\n              <mat-error class=\"mat-error\" *ngIf=\"userDetailsForm?.get('pinCode')?.hasError('pattern')\">\n                {{ 'profileInfo.invalidPinCode' | translate }}\n                </mat-error>          \n          </div>\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails  && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.fromGovOrganization' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"isCadre\" (selectionChange)=\"getIsCadreStatus($event.value)\" placeholder=\"Select cadre\">\n                    <mat-option [value]=\"true\">Yes</mat-option>\n                    <mat-option [value]=\"false\">No</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && isCadreStatus  && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.typeOfCivilService' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"typeOfCivilService\" (selectionChange)=\"getService($event.value)\"  placeholder=\"Select type of civil service\">\n                    <mat-option *ngFor=\"let service of civilServiceTypes\" [value]=\"service\">{{ service }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('typeOfCivilService').value && userDetailsForm.get('isCadre').value && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.serviceType' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"serviceType\" (selectionChange)=\"onServiceSelect($event)\" placeholder=\"Select service\">\n                      <mat-option *ngFor=\"let service of serviceName\" [value]=\"service\">{{ service }}</mat-option>\n                  </mat-select>\n              </mat-form-field>\n          </div>\n\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType').value && \n              userDetailsForm.get('isCadre').value \n              && userDetailsForm.get('typeOfCivilService').value && (\n                  userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n                  userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n                  userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n                ) && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.cadre' | translate }}\n              </div>\n              <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                  <mat-select formControlName=\"cadreName\" (selectionChange)=\"onCadreSelect($event.value)\" placeholder=\"Select cadre\">\n                      <mat-option *ngFor=\"let state of cadre\" [value]=\"state\">{{ state }}</mat-option>\n                    </mat-select>\n                </mat-form-field>\n          </div>\n          <ng-container *ngIf=\"!showDoptChanges\">\n            <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('serviceType') && (userDetailsForm.get('serviceType').value && \n            userDetailsForm.get('isCadre').value && userDetailsForm.get('typeOfCivilService').value && (\n                userDetailsForm.get('serviceType').value === 'Indian Administrative Service (IAS)' || \n                userDetailsForm.get('serviceType').value === 'Indian Police Service (IPS)' || \n                userDetailsForm.get('serviceType').value === 'Indian Forest Service (IFoS)' \n            ) && userDetailsForm.get('cadreName').value)  ? true : ((userDetailsForm.get('serviceType').value && \n                userDetailsForm.get('isCadre').value \n            && userDetailsForm.get('typeOfCivilService').value && (\n                userDetailsForm.get('serviceType').value !== 'Indian Administrative Service (IAS)' && \n                userDetailsForm.get('serviceType').value !== 'Indian Police Service (IPS)' && \n                userDetailsForm.get('serviceType').value !== 'Indian Forest Service (IFoS)' \n            ))) ? true : false\">\n                <div class=\"font-semibold margin-0 required\"\n                  i18n=\"Title label|Label which explains the user to enter title\">\n                  {{ 'profileInfo.batch' | translate }}\n                </div>\n                <mat-form-field appearance=\"outline\" class=\"profile-form-field\">\n                    <mat-select formControlName=\"cadreBatch\" placeholder=\"Select batch\">\n                        <mat-option *ngFor=\"let year of yearArray\" [value]=\"year\">{{ year }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n            </div>\n          </ng-container>\n          <div class=\"w-full\" *ngIf=\"canShowshowCadreDetails && userDetailsForm.get('isCadre').value &&  userDetailsForm.get('cadreBatch').value && !showDoptChanges\">\n              <div class=\"font-semibold margin-0 required mb-3\"\n                i18n=\"Title label|Label which explains the user to enter title\">\n                {{ 'profileInfo.cadreControllingAuthority' | translate }}\n              </div>\n              <span class=\"cadreControl-name\">{{cadreControllingAuthority}}</span>\n          </div>\n          <ng-container>\n            <div class=\"w-full flex flex-row gap-4 justify-end margin-top-m\">\n              <button\n                class=\"save-button\"\n                [disabled]=\"userDetailsForm?.invalid || !mVerified || !eVerified\"\n                (click)=\"onSubmitForm(userDetailsForm)\">\n                {{ 'profileInfo.saveChanges' | translate }}\n              </button>\n            </div>\n          </ng-container>\n      </form>\n    </div>\n    <ng-container *ngIf=\"addLoader > 0\" >\n      <div class=\"text-center my-2 loader flex justify-center items-center\">\n        <mat-spinner class=\"inline-block\"></mat-spinner>\n      </div>\n    </ng-container>\n</div>\n", styles: ["::ng-deep .course-survey .main-container{width:auto!important;overflow-y:auto!important;max-height:auto!important}.high-zindex{z-index:9999}.auto-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-list .item{padding:5px 15px}.auto-list .item:hover{background-color:#f3f3f3;cursor:pointer}.auto-list .item-active{background-color:#1b4ca1!important;color:#fff!important}.auto-language-list{display:flex;border:1px solid #e3dede;padding:15px 0;border-radius:7px;max-height:200px;overflow:auto;position:absolute;background:#fff;z-index:99;width:100%}.auto-language-list .language-item{padding:5px 15px}.auto-language-list .language-item:hover{background-color:#f3f3f3;cursor:pointer}.auto-language-list .language-item-active{background-color:#1b4ca1!important;color:#fff!important}::ng-deep .mat-calendar-body-active{background:#1b4ca1!important;border-radius:100%!important}::ng-deep .course-survey .lib-container{height:100%!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container{padding-left:0!important;padding-right:0!important;padding-bottom:1rem!important}}.disagnation-caret,.mother-toungue-caret{position:absolute;right:0;bottom:0}::ng-deep .userDetailsForm .mat-form-field-appearance-outline .mat-form-field-infix{padding:.5rem 0 .8rem}input[disabled]+mat-icon.disagnation-caret{opacity:.5}input[disabled]+mat-icon.mother-toungue-caret{opacity:.5}::ng-deep .course-survey .lib-container-2{height:auto;min-height:unset!important;padding:0!important;box-shadow:none!important;margin-bottom:2rem!important}@media screen and (max-width: 430px){::ng-deep .course-survey .lib-container-2{padding-left:0!important;padding-right:0!important}}.profile-form-field .mat-select{border:none}.customForm{padding-right:0!important;padding-bottom:1rem!important;padding:1rem 3rem}.cadreControl-name{background:#c3c3c3;padding:10px}.country-code{margin-top:5px;text-align:center;width:50px;height:46px;border:1px solid #d6d5d5;border-radius:5px}.get-otp{color:#1b4ca1;font-weight:700;cursor:pointer;font-size:14px}.enter-otp{align-items:center;justify-content:space-between}.custom-size{width:96%}.resend-otp{color:#1b4ca1;font-weight:700;cursor:pointer}.verified-check{position:absolute;right:3px;color:#5fa800;font-size:18px;width:18px;height:18px}.save-button:disabled{opacity:.6!important}.loader{position:absolute;top:0;left:0;z-index:1000;height:100vh;width:100vw;background-color:#80808045}.mat-error{margin:-10px 0 5px}:host ::ng-deep .userDetailsForm .mat-form-field-wrapper{padding-bottom:8px!important}.custom-select-container,.fixed-height-select{width:100%}.fixed-height-select ::ng-deep .mat-form-field-flex{height:48px!important;min-height:45px!important;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-infix{padding:0!important;border-top:0!important;height:45px!important;display:flex;align-items:center}.fixed-height-select ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.fixed-height-select ::ng-deep .mat-select-arrow-wrapper{transform:translateY(0)!important}.fixed-height-select ::ng-deep .mat-form-field-label-wrapper{top:-1.1em}::ng-deep .search-panel{max-height:350px}::ng-deep .search-panel .sticky-search-container{position:sticky;top:0;z-index:2;background:#fff;padding:8px;border-bottom:1px solid rgba(0,0,0,.12);box-shadow:0 2px 4px #00000014}::ng-deep .search-panel .search-input-wrapper{position:relative;width:100%}::ng-deep .search-panel .search-input{width:100%;height:35px;padding:0 30px 0 12px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;box-sizing:border-box}::ng-deep .search-panel .search-input:focus{outline:none;border-color:#f3962f;box-shadow:0 0 0 1px #f3962f33}::ng-deep .search-panel .clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#00000080;font-size:14px;padding:4px;display:flex;align-items:center;justify-content:center}::ng-deep .search-panel .clear-button:hover{color:#000c}::ng-deep .search-panel .mat-option.mat-option-disabled{color:#00000061;font-style:italic}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-text-field-wrapper{height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-flex{min-height:45px!important;height:45px!important}::ng-deep .mat-mdc-form-field.fixed-height-select .mat-mdc-form-field-infix{min-height:45px!important;height:45px!important;padding-top:0!important;padding-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EnrollProfileFormComponent, decorators: [{
             type: Component,
@@ -21382,7 +21383,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: 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" }] }); }
+    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: i8$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$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,
@@ -24348,7 +24349,7 @@ class AppTocHomeV2Component {
         return false;
     }
     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: i6$2.MatSnackBar }, { token: i5.WidgetUserServiceLib }, { token: NetCoreService }, { token: AppTocV2Service }, { token: i2.Location }, { token: i2$1.DomainConfService }, { 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 items-center\">\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-container6\">\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                <div class=\"knowledge-level-container badgediv\" *ngIf=\"(domainConfService?.isFeatureByPageEnabled('toc','badge')) && showBadgeIcon(baseContentReadData?.badgeDetails_v1)\">\n                  <span class=\"custom-badge\">\n                    <img class=\"badge-img bg-transparent\"\n                      src=\"{{ baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\"\n                      srcset=\"\">\n                  </span>\n                </div>\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 && (domainConfService?.isFeatureByPageEnabled('toc','shareToc'))\">\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\" *ngIf=\"(preAssessmentCompletionStatus ||  !preAssessmentRequiredFlag)\">\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\" *ngIf=\"domainConfService?.isFeatureByPageEnabled('toc','karmaPoints')\">\n                <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n                  [content]=\"content\" [baseContentReadData]=\"baseContentReadData\"\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%}}.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}.badgediv{width:25px;height:25px}.badge-img{width:100%;height:100%}\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", "fromMDO"], 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", "baseContentReadData", "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: i2$1.PipePublicURL, name: "pipePublicURL" }, { 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 items-center\">\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-container6\">\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                <div class=\"knowledge-level-container badgediv\" *ngIf=\"(domainConfService?.isFeatureByPageEnabled('toc','badge')) && showBadgeIcon(baseContentReadData?.badgeDetails_v1)\">\n                  <span class=\"custom-badge\">\n                    <img class=\"badge-img bg-transparent\"\n                      src=\"{{ baseContentReadData?.badgeDetails_v1?.[0]?.badgeTemplate | pipePublicURL }}\" alt=\"\"\n                      srcset=\"\">\n                  </span>\n                </div>\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 && (domainConfService?.isFeatureByPageEnabled('toc','shareToc'))\">\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\" *ngIf=\"(preAssessmentCompletionStatus ||  !preAssessmentRequiredFlag)\">\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\" *ngIf=\"domainConfService?.isFeatureByPageEnabled('toc','karmaPoints')\">\n                <ws-widget-karma-points [data]=\"kparray\" (clickClaimKarmaPoints)=\"onClickOfClaim($event)\"\n                  [content]=\"content\" [baseContentReadData]=\"baseContentReadData\"\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%}}.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}.badgediv{width:25px;height:25px}.badge-img{width:100%;height:100%}\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: i8$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i8$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", "fromMDO"], 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", "baseContentReadData", "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: i2$1.PipePublicURL, name: "pipePublicURL" }, { 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,
@@ -24846,7 +24847,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: 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" }] }); }
+    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: i8$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$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,
@@ -25184,7 +25185,7 @@ class KnowledgeArtifactDetailsComponent {
         return;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KnowledgeArtifactDetailsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: AppTocService }, { token: i2$1.ConfigurationsService }, { token: i1$5.DomSanitizer }, { token: WidgetContentService }, { token: EditorService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: KnowledgeArtifactDetailsComponent, selector: "ws-app-knowledge-artifact-details", ngImport: i0, template: "<mat-toolbar class=\"detailBar\" [color]=\"pageNavbar.color\" [ngStyle]=\"pageNavbar?.styles\">\n  <!-- <a *ngIf=\"isAuthor\" [routerLink]=\"'/author/editor/' + content?.identifier\" mat-button>\n    <mat-icon>create</mat-icon>\n    <span class=\"ml-2\">Edit</span>\n  </a> -->\n  <ws-widget-btn-page-back [widgetData]=\"{ url: 'home',titles:[{title:'Resource detail',url:'none'}] }\">\n  </ws-widget-btn-page-back>\n  <!-- <span class=\"margin-left-xs text-truncate\">\n    <span >Resource Detail</span>\n  </span> -->\n  <span class=\"spacer\"></span>\n  <!-- <a *ngIf=\"isAuthor\" [routerLink]=\"'/author/editor/' + content?.identifier\" mat-button>\n    <mat-icon>create</mat-icon>\n    <span class=\"ml-2\">Edit</span>\n  </a> -->\n  <mat-spinner [diameter]=\"30\" *ngIf=\"deletingContent\"></mat-spinner>\n  <a [disabled]=\"deletingContent\" *ngIf=\"isAuthor\" (click)=\"deleteContent()\" mat-button>\n    <mat-icon>delete</mat-icon>\n    <span class=\"ml-2\">Delete</span>\n  </a>\n\n</mat-toolbar>\n\n<section class=\"toc-body\">\n  <div class=\"flex flex-between flex-wrapped mt-4\">\n    <div class=\"meta-section\">\n      <div class=\"unit-meta-item pr-8\">\n        <div *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 *ngIf=\"content?.name\" class=\"mt-6\">\n          <p class=\"ws-mat-primary-text text-4xl font-bold break-words\" style=\"line-height: initial;\">\n            {{ content?.name | uppercase }}\n          </p>\n        </div>\n        <div *ngIf=\"content?.body\" class=\"unit-meta-item pt-4 py-2\">\n          <p class=\"item-heading text-xl font-medium ws-mat-primary-text\" >\n            Resource Description\n          </p>\n          <div class=\"break-words\" class=\"resDescription\" [innerHTML]=\"content?.body\"></div>\n        </div>\n        <div *ngIf=\"showDescription && content?.description\" class=\"unit-meta-item pt-4 py-2\">\n          <p class=\"item-heading font-medium text-xl ws-mat-primary-text\" >\n            Resource Description\n          </p>\n          <p class=\"mat-subheading-1 text-base font-small\" class=\"resDescription\" [innerHTML]=\"content?.description\">\n          </p>\n        </div>\n      </div>\n\n      <!--Share & Download-->\n      <div class=\"flex mt-8 mr-4\"\n        [ngClass]=\"{ greyOut: content?.status === 'Deleted' || 'Expired' && !isLiveOrMarkForDeletion }\">\n        <!-- *ngIf=\"content && isDownloadable\" -->\n        <div class=\"mr-4\" *ngIf=\"content && isDownloadable\">\n          <button style=\"height: 40px;\" mat-raised-button mat-warn class=\"ws-mat-accent-background text-white\"\n            (click)=\"download()\">\n            <mat-icon class=\"text-white\">cloud_download</mat-icon>\n            <span class=\"px-2 text-lg font-medium text-white\">Download</span>\n          </button>\n        </div>\n        <div color=\"primary\" class=\"shareBtn ws-mat-primary-text ws-mat-primary-border-bold\">\n          <ws-widget-btn-content-share [widgetData]=\"content\" [showText]=\"true\"></ws-widget-btn-content-share>\n        </div>\n      </div>\n      <!-- <p *ngIf=\"content?.mimeType\">{{content.mimeType}}</p>\n      <p *ngIf=\"content?.size\">{{content?.size}}</p> -->\n\n      <!--Discussion forum-->\n      <div class=\"toc-discussion-container my-8\">\n        <p class=\"ws-mat-primary-text text-xl font-medium py-2\" >Comments</p>\n        <ws-app-toc-discussion [content]=\"content\" class=\"discussion\"></ws-app-toc-discussion>\n      </div>\n    </div>\n    <!--SIDEBAR-->\n    <div class=\"info-section\">\n      <div class=\"my-4\">\n        <p class=\"text-xl pb-2 font-medium ws-mat-primary-text\" >Resources Details</p>\n        <div *ngIf=\"content?.resourceType\">\n          <p class=\"item-heading ws-mat-primary-text text-lg font-medium mb-2\" >\n            Resource Type\n          </p>\n          <p class=\"width-expand font-medium\">{{ content?.resourceType }}</p>\n        </div>\n        <div *ngIf=\"content?.complexityLevel\">\n          <p class=\"item-heading text-lg ws-mat-primary-text font-medium mb-2\" >\n            Grade Level\n          </p>\n          <p class=\"width-expand font-medium\">{{ content?.complexityLevel }}</p>\n        </div>\n      </div>\n      <!--Discussion forum-->\n      <div class=\"toc-discussion-container-sm my-8\">\n        <p class=\"ws-mat-primary-text text-xl font-medium py-2\">Comments</p>\n        <ws-app-toc-discussion [content]=\"content\" class=\"discussion\"></ws-app-toc-discussion>\n      </div>\n      <div class=\"mt-8\">\n        <p class=\"text-xl font-medium ws-mat-primary-text\" >Related Resources</p>\n        <div *ngIf=\"relatedResource && relatedResource?.length > 0 && !fetchingRelatedResources\"\n          class=\"flex flex-wrap relatedRes-lg mt-8\">\n          <div *ngFor=\"let content of relatedResource\" class=\"mb-8\">\n            <ws-widget-card-content [widgetData]=\"{\n                  content: content,\n                  cardSubType: 'card-user-details'\n                }\"></ws-widget-card-content>\n          </div>\n        </div>\n        <!-- <ws-utils-horizontal-scroller class=\"padding-xl relatedRes-sm block\" [loadStatus]=\"'done'\">\n          <div *ngIf=\"relatedResource && relatedResource?.length > 0 && !fetchingRelatedResources\" class=\"flex mt-8\">\n            <div *ngFor=\"let content of relatedResource\" class=\"mb-8\">\n              <ws-widget-card-content [widgetData]=\"{\n                                          content: content,\n                                          cardSubType: 'card-user-details'\n                                        }\"></ws-widget-card-content>\n            </div>\n          </div>\n        </ws-utils-horizontal-scroller> -->\n        <div *ngIf=\"relatedResource && relatedResource?.length === 0 && !fetchingRelatedResources\">\n          <p class=\"font-medium\" >There are no related resources</p>\n        </div>\n        <div *ngIf=\"fetchingRelatedResources\" class=\"text-center\">\n          <mat-spinner [diameter]=\"30\"></mat-spinner>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<ng-template #creators let-authors=\"authors\" let-title=\"title\">\n  <div *ngFor=\"let author of authors\" class=\"author\">\n    <ws-widget-user-image class=\"author-image\" [userId]=\"author?.id\" [userName]=\"author.name\"\n      [imageType]=\"'name-initial'\"></ws-widget-user-image>\n    <div class=\"width-expand flex flex-middle flex-between\">\n      <div class=\"item-heading font-medium text-base ws-mat-primary-text\">{{ author.name }}</div>\n    </div>\n  </div>\n</ng-template>", styles: [".toc-body{padding:32px 64px}@media only screen and (max-width: 599px){.toc-body{padding:16px 24px}}.toc-body{padding-top:0!important;background-color:#fafafa}.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%}}.resDescription{font-size:16px;line-height:23px}.topic-button{display:block;width:32%;margin:4px 0}@media only screen and (max-width: 599px){.topic-button{width:100%}}.shareBtn{border-radius:6px}.info-section{width:28%;min-width:250px;margin-left:24px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0}}.author{padding:12px 0;display:flex}.author .author-image{margin-right:12px;height:44px;width:44px}@media only screen and (min-width: 600px){.toc-discussion-container-sm{display:none}.info-section{padding-left:50px}}@media only screen and (max-width: 599px){.toc-discussion-container{display:none}.info-section{padding-top:30px}}.greyOut{filter:grayscale(1);opacity:.7;cursor:auto!important;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i8$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: BtnPageBackComponent, selector: "ws-widget-btn-page-back", inputs: ["widgetData"] }, { kind: "component", type: UserImageComponent, selector: "ws-widget-user-image", inputs: ["email", "userId", "userName", "imageType", "imageUrl", "imageSize"] }, { kind: "component", type: AppTocDiscussionComponent, selector: "ws-app-toc-discussion", inputs: ["content", "forPreview"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: KnowledgeArtifactDetailsComponent, selector: "ws-app-knowledge-artifact-details", ngImport: i0, template: "<mat-toolbar class=\"detailBar\" [color]=\"pageNavbar.color\" [ngStyle]=\"pageNavbar?.styles\">\n  <!-- <a *ngIf=\"isAuthor\" [routerLink]=\"'/author/editor/' + content?.identifier\" mat-button>\n    <mat-icon>create</mat-icon>\n    <span class=\"ml-2\">Edit</span>\n  </a> -->\n  <ws-widget-btn-page-back [widgetData]=\"{ url: 'home',titles:[{title:'Resource detail',url:'none'}] }\">\n  </ws-widget-btn-page-back>\n  <!-- <span class=\"margin-left-xs text-truncate\">\n    <span >Resource Detail</span>\n  </span> -->\n  <span class=\"spacer\"></span>\n  <!-- <a *ngIf=\"isAuthor\" [routerLink]=\"'/author/editor/' + content?.identifier\" mat-button>\n    <mat-icon>create</mat-icon>\n    <span class=\"ml-2\">Edit</span>\n  </a> -->\n  <mat-spinner [diameter]=\"30\" *ngIf=\"deletingContent\"></mat-spinner>\n  <a [disabled]=\"deletingContent\" *ngIf=\"isAuthor\" (click)=\"deleteContent()\" mat-button>\n    <mat-icon>delete</mat-icon>\n    <span class=\"ml-2\">Delete</span>\n  </a>\n\n</mat-toolbar>\n\n<section class=\"toc-body\">\n  <div class=\"flex flex-between flex-wrapped mt-4\">\n    <div class=\"meta-section\">\n      <div class=\"unit-meta-item pr-8\">\n        <div *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 *ngIf=\"content?.name\" class=\"mt-6\">\n          <p class=\"ws-mat-primary-text text-4xl font-bold break-words\" style=\"line-height: initial;\">\n            {{ content?.name | uppercase }}\n          </p>\n        </div>\n        <div *ngIf=\"content?.body\" class=\"unit-meta-item pt-4 py-2\">\n          <p class=\"item-heading text-xl font-medium ws-mat-primary-text\" >\n            Resource Description\n          </p>\n          <div class=\"break-words\" class=\"resDescription\" [innerHTML]=\"content?.body\"></div>\n        </div>\n        <div *ngIf=\"showDescription && content?.description\" class=\"unit-meta-item pt-4 py-2\">\n          <p class=\"item-heading font-medium text-xl ws-mat-primary-text\" >\n            Resource Description\n          </p>\n          <p class=\"mat-subheading-1 text-base font-small\" class=\"resDescription\" [innerHTML]=\"content?.description\">\n          </p>\n        </div>\n      </div>\n\n      <!--Share & Download-->\n      <div class=\"flex mt-8 mr-4\"\n        [ngClass]=\"{ greyOut: content?.status === 'Deleted' || 'Expired' && !isLiveOrMarkForDeletion }\">\n        <!-- *ngIf=\"content && isDownloadable\" -->\n        <div class=\"mr-4\" *ngIf=\"content && isDownloadable\">\n          <button style=\"height: 40px;\" mat-raised-button mat-warn class=\"ws-mat-accent-background text-white\"\n            (click)=\"download()\">\n            <mat-icon class=\"text-white\">cloud_download</mat-icon>\n            <span class=\"px-2 text-lg font-medium text-white\">Download</span>\n          </button>\n        </div>\n        <div color=\"primary\" class=\"shareBtn ws-mat-primary-text ws-mat-primary-border-bold\">\n          <ws-widget-btn-content-share [widgetData]=\"content\" [showText]=\"true\"></ws-widget-btn-content-share>\n        </div>\n      </div>\n      <!-- <p *ngIf=\"content?.mimeType\">{{content.mimeType}}</p>\n      <p *ngIf=\"content?.size\">{{content?.size}}</p> -->\n\n      <!--Discussion forum-->\n      <div class=\"toc-discussion-container my-8\">\n        <p class=\"ws-mat-primary-text text-xl font-medium py-2\" >Comments</p>\n        <ws-app-toc-discussion [content]=\"content\" class=\"discussion\"></ws-app-toc-discussion>\n      </div>\n    </div>\n    <!--SIDEBAR-->\n    <div class=\"info-section\">\n      <div class=\"my-4\">\n        <p class=\"text-xl pb-2 font-medium ws-mat-primary-text\" >Resources Details</p>\n        <div *ngIf=\"content?.resourceType\">\n          <p class=\"item-heading ws-mat-primary-text text-lg font-medium mb-2\" >\n            Resource Type\n          </p>\n          <p class=\"width-expand font-medium\">{{ content?.resourceType }}</p>\n        </div>\n        <div *ngIf=\"content?.complexityLevel\">\n          <p class=\"item-heading text-lg ws-mat-primary-text font-medium mb-2\" >\n            Grade Level\n          </p>\n          <p class=\"width-expand font-medium\">{{ content?.complexityLevel }}</p>\n        </div>\n      </div>\n      <!--Discussion forum-->\n      <div class=\"toc-discussion-container-sm my-8\">\n        <p class=\"ws-mat-primary-text text-xl font-medium py-2\">Comments</p>\n        <ws-app-toc-discussion [content]=\"content\" class=\"discussion\"></ws-app-toc-discussion>\n      </div>\n      <div class=\"mt-8\">\n        <p class=\"text-xl font-medium ws-mat-primary-text\" >Related Resources</p>\n        <div *ngIf=\"relatedResource && relatedResource?.length > 0 && !fetchingRelatedResources\"\n          class=\"flex flex-wrap relatedRes-lg mt-8\">\n          <div *ngFor=\"let content of relatedResource\" class=\"mb-8\">\n            <ws-widget-card-content [widgetData]=\"{\n                  content: content,\n                  cardSubType: 'card-user-details'\n                }\"></ws-widget-card-content>\n          </div>\n        </div>\n        <!-- <ws-utils-horizontal-scroller class=\"padding-xl relatedRes-sm block\" [loadStatus]=\"'done'\">\n          <div *ngIf=\"relatedResource && relatedResource?.length > 0 && !fetchingRelatedResources\" class=\"flex mt-8\">\n            <div *ngFor=\"let content of relatedResource\" class=\"mb-8\">\n              <ws-widget-card-content [widgetData]=\"{\n                                          content: content,\n                                          cardSubType: 'card-user-details'\n                                        }\"></ws-widget-card-content>\n            </div>\n          </div>\n        </ws-utils-horizontal-scroller> -->\n        <div *ngIf=\"relatedResource && relatedResource?.length === 0 && !fetchingRelatedResources\">\n          <p class=\"font-medium\" >There are no related resources</p>\n        </div>\n        <div *ngIf=\"fetchingRelatedResources\" class=\"text-center\">\n          <mat-spinner [diameter]=\"30\"></mat-spinner>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<ng-template #creators let-authors=\"authors\" let-title=\"title\">\n  <div *ngFor=\"let author of authors\" class=\"author\">\n    <ws-widget-user-image class=\"author-image\" [userId]=\"author?.id\" [userName]=\"author.name\"\n      [imageType]=\"'name-initial'\"></ws-widget-user-image>\n    <div class=\"width-expand flex flex-middle flex-between\">\n      <div class=\"item-heading font-medium text-base ws-mat-primary-text\">{{ author.name }}</div>\n    </div>\n  </div>\n</ng-template>", styles: [".toc-body{padding:32px 64px}@media only screen and (max-width: 599px){.toc-body{padding:16px 24px}}.toc-body{padding-top:0!important;background-color:#fafafa}.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%}}.resDescription{font-size:16px;line-height:23px}.topic-button{display:block;width:32%;margin:4px 0}@media only screen and (max-width: 599px){.topic-button{width:100%}}.shareBtn{border-radius:6px}.info-section{width:28%;min-width:250px;margin-left:24px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0}}.author{padding:12px 0;display:flex}.author .author-image{margin-right:12px;height:44px;width:44px}@media only screen and (min-width: 600px){.toc-discussion-container-sm{display:none}.info-section{padding-left:50px}}@media only screen and (max-width: 599px){.toc-discussion-container{display:none}.info-section{padding-top:30px}}.greyOut{filter:grayscale(1);opacity:.7;cursor:auto!important;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i8$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: BtnPageBackComponent, selector: "ws-widget-btn-page-back", inputs: ["widgetData"] }, { kind: "component", type: UserImageComponent, selector: "ws-widget-user-image", inputs: ["email", "userId", "userName", "imageType", "imageUrl", "imageSize"] }, { kind: "component", type: AppTocDiscussionComponent, selector: "ws-app-toc-discussion", inputs: ["content", "forPreview"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KnowledgeArtifactDetailsComponent, decorators: [{
             type: Component,
@@ -25271,7 +25272,7 @@ class CreateBatchDialogComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateBatchDialogComponent, deps: [{ token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }, { token: AppTocService }, { token: i7.MatLegacySnackBar }, { token: i2$1.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateBatchDialogComponent, selector: "ws-app-create-batch-dialog", providers: [
             { provide: DateAdapter, useClass: NativeDateAdapter },
-        ], viewQueries: [{ propertyName: "toastSuccess", first: true, predicate: ["toastSuccess"], descendants: true, static: true }, { propertyName: "toastError", first: true, predicate: ["toastError"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"createBatchForm\">\n    <!-- <h2 mat-dialog-title>Install Angular</h2> -->\n    <mat-dialog-content class=\"mat-typography pad-fix\">\n        <div class=\"flex flex-1 custom\">\n            <div class=\"flex flex-4 flex-column margin-right-l\">\n\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"name\" class=\" margin-remove-bottom form-label required\"\n                            i18n=\"Name label|Label which explains the user to enter name\" i18n-aria-label\n                            aria-label=\"Name label\">\n                            Name\n                        </label>\n                        <input id=\"name\" matInput #name formControlName=\"name\" i18n-placeholder\n                            placeholder=\"Enter Name\" i18n-aria-label aria-label=\"Name input\" />\n                        <mat-error [hidden]=\"false\" i18n=\"Name Error|Explains name is required\" i18n-aria-label\n                            aria-label=\"Name Error|Explains name is required \"\n                            *ngIf=\"createBatchForm?.controls['name'].errors?.required\">\n                            Name is mandatory\n                        </mat-error>\n                        <mat-error [hidden]=\"false\" *ngIf=\"createBatchForm?.controls['name'].errors?.pattern\"\n                            i18n-aria-label\n                            aria-label=\"Name Error|Name fields cannot contain numbers and special characters \">\n                            Name fields cannot contain numbers and special characters  '\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"description\" class=\" margin-remove-bottom form-label\"\n                            i18n=\"description label|Label which explains the user to enter description\" i18n-aria-label\n                            aria-label=\"description label\">\n                            Description\n                        </label>\n                        <input id=\"description\" matInput #description formControlName=\"description\" i18n-placeholder\n                            placeholder=\"Enter Description\" i18n-aria-label aria-label=\"Description input\" />\n                        <mat-error [hidden]=\"false\" i18n=\"Description Error|Explains description is required\" i18n-aria-label\n                            aria-label=\"Description Error|Explains description is required \"\n                            *ngIf=\"createBatchForm?.controls['description'].errors?.required\">\n                            Description is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"enrollmentType\" class=\" margin-remove-bottom form-label required\"\n                            i18n=\"enrollmentType label|Label which explains the user to enter enrollmentType\" i18n-aria-label\n                            aria-label=\"enrollmentType label\">\n                            Enrollment Type\n                        </label>\n                        <mat-select matInput formControlName=\"enrollmentType\" #enrollmentType >\n                            <mat-option [value]=\"c\" *ngFor=\"let c of enrollmentTypes\" [innerHTML]=\"c\"></mat-option>\n                        </mat-select>\n                        <mat-error [hidden]=\"false\" i18n=\"enrollmentType Error|Explains enrollmentType is required\" i18n-aria-label\n                            aria-label=\"enrollmentType Error|Explains enrollmentType is required \"\n                            *ngIf=\"createBatchForm?.controls['enrollmentType'].errors?.required\">\n                            Enrollment Type is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"startDate\" matInput #startDate formControlName=\"startDate\" [matDatepicker]=\"picker\"\n                          i18n-placeholder (focus)=\"picker.open()\" placeholder=\"Choose startDate(dd-mm-yyyy)\"\n                          [min]=\"today\"  readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                        <mat-datepicker #picker (closed)=\"startDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"Start date Error|Explains name is required\">\n                          Start date is mandatory\n                        </mat-error>\n                      </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"endDate\" matInput #endDate formControlName=\"endDate\" [matDatepicker]=\"endpicker\"\n                          i18n-placeholder (focus)=\"endpicker.open()\" placeholder=\"Choose endDate(dd-mm-yyyy)\"\n                          [min]=\"today\" readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"endpicker\"></mat-datepicker-toggle>\n                        <mat-datepicker #endpicker (closed)=\"endDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n                          End date is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"enrollmentEndDate\" matInput #enrollmentEndDate formControlName=\"enrollmentEndDate\" [matDatepicker]=\"enrollmentEndPicker\"\n                          i18n-placeholder (focus)=\"enrollmentEndPicker.open()\" placeholder=\"Choose enrollmentEndDate(dd-mm-yyyy)\"\n                          [min]=\"today\"  readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"enrollmentEndPicker\"></mat-datepicker-toggle>\n                        <mat-datepicker #enrollmentEndPicker (closed)=\"enrollmentEndDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n                          End date is mandatory\n                        </mat-error>\n                      </mat-form-field>\n                </div>\n                <mat-dialog-actions align=\"end\" class=\"mb-0-imp\">\n                    <button mat-raised-button type=\"button\" [mat-dialog-close]=\"true\"\n                      class=\"ws-mat-accent-border flex-auto-display\">\n                      <span class=\"ws-mat-default-text\" >Discard</span>\n                    </button>\n                    <button mat-raised-button type=\"submit\"\n                    class=\"text-white ws-mat-primary-background flex-auto-display\" \n                    [disabled]=\"uploadSaveData || createBatchForm?.invalid\" (click)=\"createBatchSubmit(createBatchForm)\">\n                    <span class=\"text-white\" >Create</span>\n                  </button>\n                  <span *ngIf=\"uploadSaveData\" class=\"px-4 flex items-center justify-center\">\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\n                  </span>\n                  </mat-dialog-actions>\n            </div>\n\n        </div>\n    </mat-dialog-content>\n</form>\n\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"Batch created successfully\"\n  value=\"Batch created successfully!\" #toastSuccess />\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"unable to create batch\"\n  value=\"Error in creating batch!\" #toastError />", styles: [".start-card{min-width:80px;margin:0 30px 30px;font-size:16px}.start-card mat-card-content{margin-top:10px}@media only screen and (max-width: 599px){.flex-auto-display{flex:auto;margin-left:0!important;margin-top:1rem}}@media only screen and (min-width: 600px) and (max-width: 959px){.flex-auto-display{flex:auto}}.similar{display:none!important}@media only screen and (max-width: 599px){.similar{display:none!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.similar{display:none!important}}@media only screen and (max-width: 599px){.mob{margin-left:0!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.mob{margin-left:0!important}}.custom{flex-direction:row}@media only screen and (max-width: 599px){.custom{flex-direction:column}}@media only screen and (min-width: 600px) and (max-width: 959px){.custom{flex-direction:column}}.pad-fix{padding:0 0 0 24px}.flex-4{flex:4}.flex-3{flex:3}.flex-2{flex:2}.mb-0-imp{margin-bottom:0!important}.w-full-imp{width:100%!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatLegacyDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatLegacyDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+        ], viewQueries: [{ propertyName: "toastSuccess", first: true, predicate: ["toastSuccess"], descendants: true, static: true }, { propertyName: "toastError", first: true, predicate: ["toastError"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"createBatchForm\">\n    <!-- <h2 mat-dialog-title>Install Angular</h2> -->\n    <mat-dialog-content class=\"mat-typography pad-fix\">\n        <div class=\"flex flex-1 custom\">\n            <div class=\"flex flex-4 flex-column margin-right-l\">\n\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"name\" class=\" margin-remove-bottom form-label required\"\n                            i18n=\"Name label|Label which explains the user to enter name\" i18n-aria-label\n                            aria-label=\"Name label\">\n                            Name\n                        </label>\n                        <input id=\"name\" matInput #name formControlName=\"name\" i18n-placeholder\n                            placeholder=\"Enter Name\" i18n-aria-label aria-label=\"Name input\" />\n                        <mat-error [hidden]=\"false\" i18n=\"Name Error|Explains name is required\" i18n-aria-label\n                            aria-label=\"Name Error|Explains name is required \"\n                            *ngIf=\"createBatchForm?.controls['name'].errors?.required\">\n                            Name is mandatory\n                        </mat-error>\n                        <mat-error [hidden]=\"false\" *ngIf=\"createBatchForm?.controls['name'].errors?.pattern\"\n                            i18n-aria-label\n                            aria-label=\"Name Error|Name fields cannot contain numbers and special characters \">\n                            Name fields cannot contain numbers and special characters  '\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"description\" class=\" margin-remove-bottom form-label\"\n                            i18n=\"description label|Label which explains the user to enter description\" i18n-aria-label\n                            aria-label=\"description label\">\n                            Description\n                        </label>\n                        <input id=\"description\" matInput #description formControlName=\"description\" i18n-placeholder\n                            placeholder=\"Enter Description\" i18n-aria-label aria-label=\"Description input\" />\n                        <mat-error [hidden]=\"false\" i18n=\"Description Error|Explains description is required\" i18n-aria-label\n                            aria-label=\"Description Error|Explains description is required \"\n                            *ngIf=\"createBatchForm?.controls['description'].errors?.required\">\n                            Description is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <label for=\"enrollmentType\" class=\" margin-remove-bottom form-label required\"\n                            i18n=\"enrollmentType label|Label which explains the user to enter enrollmentType\" i18n-aria-label\n                            aria-label=\"enrollmentType label\">\n                            Enrollment Type\n                        </label>\n                        <mat-select matInput formControlName=\"enrollmentType\" #enrollmentType >\n                            <mat-option [value]=\"c\" *ngFor=\"let c of enrollmentTypes\" [innerHTML]=\"c\"></mat-option>\n                        </mat-select>\n                        <mat-error [hidden]=\"false\" i18n=\"enrollmentType Error|Explains enrollmentType is required\" i18n-aria-label\n                            aria-label=\"enrollmentType Error|Explains enrollmentType is required \"\n                            *ngIf=\"createBatchForm?.controls['enrollmentType'].errors?.required\">\n                            Enrollment Type is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"startDate\" matInput #startDate formControlName=\"startDate\" [matDatepicker]=\"picker\"\n                          i18n-placeholder (focus)=\"picker.open()\" placeholder=\"Choose startDate(dd-mm-yyyy)\"\n                          [min]=\"today\"  readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                        <mat-datepicker #picker (closed)=\"startDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"Start date Error|Explains name is required\">\n                          Start date is mandatory\n                        </mat-error>\n                      </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"endDate\" matInput #endDate formControlName=\"endDate\" [matDatepicker]=\"endpicker\"\n                          i18n-placeholder (focus)=\"endpicker.open()\" placeholder=\"Choose endDate(dd-mm-yyyy)\"\n                          [min]=\"today\" readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"endpicker\"></mat-datepicker-toggle>\n                        <mat-datepicker #endpicker (closed)=\"endDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n                          End date is mandatory\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"flex flex-1\">\n                    <mat-form-field appearance=\"outline\" class=\"w-full\">\n                        <input id=\"enrollmentEndDate\" matInput #enrollmentEndDate formControlName=\"enrollmentEndDate\" [matDatepicker]=\"enrollmentEndPicker\"\n                          i18n-placeholder (focus)=\"enrollmentEndPicker.open()\" placeholder=\"Choose enrollmentEndDate(dd-mm-yyyy)\"\n                          [min]=\"today\"  readonly>\n                        <mat-datepicker-toggle matSuffix [for]=\"enrollmentEndPicker\"></mat-datepicker-toggle>\n                        <mat-datepicker #enrollmentEndPicker (closed)=\"enrollmentEndDate.blur()\" i18n-aria-label aria-label=\"Date picker\">\n                        </mat-datepicker>\n                        <mat-error [hidden]=\"false\" i18n=\"End date Error|Explains name is required\">\n                          End date is mandatory\n                        </mat-error>\n                      </mat-form-field>\n                </div>\n                <mat-dialog-actions align=\"end\" class=\"mb-0-imp\">\n                    <button mat-raised-button type=\"button\" [mat-dialog-close]=\"true\"\n                      class=\"ws-mat-accent-border flex-auto-display\">\n                      <span class=\"ws-mat-default-text\" >Discard</span>\n                    </button>\n                    <button mat-raised-button type=\"submit\"\n                    class=\"text-white ws-mat-primary-background flex-auto-display\" \n                    [disabled]=\"uploadSaveData || createBatchForm?.invalid\" (click)=\"createBatchSubmit(createBatchForm)\">\n                    <span class=\"text-white\" >Create</span>\n                  </button>\n                  <span *ngIf=\"uploadSaveData\" class=\"px-4 flex items-center justify-center\">\n                    <mat-spinner [diameter]=\"30\"></mat-spinner>\n                  </span>\n                  </mat-dialog-actions>\n            </div>\n\n        </div>\n    </mat-dialog-content>\n</form>\n\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"Batch created successfully\"\n  value=\"Batch created successfully!\" #toastSuccess />\n<input type=\"hidden\" i18-value i18-aria-value aria-value=\"unable to create batch\"\n  value=\"Error in creating batch!\" #toastError />", styles: [".start-card{min-width:80px;margin:0 30px 30px;font-size:16px}.start-card mat-card-content{margin-top:10px}@media only screen and (max-width: 599px){.flex-auto-display{flex:auto;margin-left:0!important;margin-top:1rem}}@media only screen and (min-width: 600px) and (max-width: 959px){.flex-auto-display{flex:auto}}.similar{display:none!important}@media only screen and (max-width: 599px){.similar{display:none!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.similar{display:none!important}}@media only screen and (max-width: 599px){.mob{margin-left:0!important}}@media only screen and (min-width: 600px) and (max-width: 959px){.mob{margin-left:0!important}}.custom{flex-direction:row}@media only screen and (max-width: 599px){.custom{flex-direction:column}}@media only screen and (min-width: 600px) and (max-width: 959px){.custom{flex-direction:column}}.pad-fix{padding:0 0 0 24px}.flex-4{flex:4}.flex-3{flex:3}.flex-2{flex:2}.mb-0-imp{margin-bottom:0!important}.w-full-imp{width:100%!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i10$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i10.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i10.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i12.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatLegacyDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatLegacyDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateBatchDialogComponent, decorators: [{
             type: Component,