@sunbird-cb/toc 0.0.26 → 0.0.28
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.
- package/esm2022/lib/_collection/_common/ai-tutor/ai-tutor.component.mjs +3 -3
- package/esm2022/lib/components/app-toc-cios-home/app-toc-cios-home.component.mjs +12 -8
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/sunbird-cb-toc.mjs +14 -10
- package/fesm2022/sunbird-cb-toc.mjs.map +1 -1
- package/lib/components/app-toc-cios-home/app-toc-cios-home.component.d.ts +1 -0
- package/lib/components/app-toc-cios-home/app-toc-cios-home.component.d.ts.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/public-api.d.ts.map +1 -1
|
@@ -12112,11 +12112,11 @@ class AiTutorComponent {
|
|
|
12112
12112
|
this.maximize = true;
|
|
12113
12113
|
}
|
|
12114
12114
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AiTutorComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.ConfigurationsService }, { token: i2$1.EventService }, { token: i0.Renderer2 }, { token: RootService }, { token: WebSocketService }, { token: i1$3.MatLegacyDialog }, { token: i6$2.MatSnackBar }, { token: i2$1.UtilityService }, { token: "environment" }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12115
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AiTutorComponent, selector: "ws-widget-ai-tutor", inputs: { from: "from", content: "content", userJourney: "userJourney" }, outputs: { closeAIPopup: "closeAIPopup" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["autoResizeTextarea"], descendants: true }], ngImport: i0, template: "<!-- <div class=\"tutor-container\">\n<div class=\"learning-type-container\">\n <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\" >\n <option value=\"\">Select learning type here </option>\n <option value=\"\">None</option>\n <option value=\"\">Socratic</option>\n <option value=\"\">Story Telling</option>\n <option value=\"\">Summarisation</option>\n </select>\n </mat-form-field>\n</div>\n<div [ngClass]=\"from === 'chatbot' ? 'ai-tutor-container-chatbot':'ai-tutor-container'\" #scrollMe>\n <div class=\"message-container\" #scrollMe>\n <div class=\"start-chat\" *ngIf=\"aiTutorResultArr?.length === 0\">\n <h2 class=\"hey\">Hey<span *ngIf=\"userInfo?.firstName\">, {{userInfo?.firstName}}</span> </h2>\n <p>Welcome to Ai Tutor,\u2028Get instant explanations, step-by-step learning guidance, and customised learning tailored just for you.</p>\n </div>\n <ng-container *ngFor=\"let chat of aiTutorResultArr; let i =index\">\n <ng-container *ngIf=\"chat.type === 'incoming'\">\n <ng-container *ngIf=\"chat?.answer\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/chatbot-ai-new.svg\"></div>\n \n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\" [innerHTML]=\"chat.answer\">\n </div>\n <div class=\"system-msg padding-xs\">\n <div *ngIf=\"chat?.wordsCount > 30\" [innerHTML]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></div>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"!chat?.showLess\" (click)=\"toggleShow(i, 'less')\">Show Less</a>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"chat?.showLess\" (click)=\"toggleShow(i, 'more')\">Show More</a>\n </div>\n \n\n </div>\n <ng-container *ngFor=\"let item of chat?.result; let ci=index\">\n <div class=\"system-msg-mimetype flex flex-col\" *ngIf=\"item?.contentType === 'Resource'\">\n <ng-container *ngIf=\"item?.mimeType === 'application/pdf'\">\n <div class=\"resource-icon\"><a [href]=\"item?.resourceLink\" target=\"_blank\"><img src=\"/assets/icons/ai-pdf-icon.jpg\"></a></div>\n <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Open Resource Link</a>\n </div>\n </ng-container>\n <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n \n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img src=\"/assets/icons/ai-video-icon.jpg\">\n\n </div>\n <div class=\"content-duration\" *ngIf=\"item?.contentStart || item?.contentEnd\">\n <span *ngIf=\"item?.contentStart\">{{item?.contentStart}}</span>\n <span *ngIf=\"item?.contentEnd\">:{{item?.contentEnd}}</span>\n </div>\n </div>\n <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Open Resource Link</a>\n </div>\n </ng-container>\n </div>\n <div class=\"recommended-question my-5px\" [ngClass]=\"{'margin-left-5': item?.message }\">\n <div class=\"my-5px mr-2\">\n <ng-container *ngIf=\"item?.contentType !== 'Resource'\">\n <div class=\"btn-default\" (click)=\"redirectToToc(item)\">{{item?.title}}\n <mat-icon class=\"vertical-middle\">navigate_next</mat-icon>\n </div>\n <div>\n {{item?.description | slice : 0:50}}\n </div>\n </ng-container>\n </div>\n <div class=\"flex flex-row font-12\">\n <div class=\"cursor-pointer\" (click)=\"copyPath(item, ci)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <div class=\"ml-2 mr-2\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are AI generated results</div>\n </div>\n </div>\n </ng-container>\n \n \n </ng-container>\n <ng-container *ngIf=\"!chat?.answer\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/chatbot-ai-new.svg\"></div>\n <div class=\"loading-bar-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/loading_bar.gif\"></div>\n </div>\n \n </ng-container>\n </ng-container>\n \n <ng-container *ngIf=\"chat.type === 'sendMsg'\">\n <div class=\"flex width-1-1 row-end padding-top-l padding-bottom-m\">\n <div class=\"user-seleted-question padding-xs\">\n {{chat?.question}}\n </div>\n <div class=\"user-icon\" *ngIf=\"userIcon\">\n <img alt=\"ai-icon\" src=\"{{userIcon}}\">\n </div>\n <div class=\"circle-s user-icon\" *ngIf=\"!userIcon\" [ngStyle]=\"{'background-color': circleColor }\">\n <div class=\"initials\" i18n-aria-label>\n {{ userInitials }} \n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div> \n</div>\n<div class=\"control-container\">\n <div class=\"border-gradient-rounded\">\n <div class=\"flex flex-row mx-5 justify-between\">\n\n <div class=\"query-box\">\n <input class=\"width-500\" type=\"text\" placeholder=\"Ask anything...\" [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery()\"/>\n \n </div>\n\n <div>\n <button type=\"button\" class=\"flex-auto-display send-btn\" (click)=\"submitSearchQuery()\" [disabled]=\"!searchQueryAItutor\">\n <mat-icon class=\"send-btn-icon\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n</div>\n</div> -->\n\n<div class=\"overflow-y-hidden\" [ngClass]=\"(isMobile && !maximize ? 'ai-tutor-popup-minimize' : (isMobile ? 'ai-tutor-popup': ''))\">\n<div *ngIf=\"isMobile\">\n <div class=\"flex flex-row ai-tutor-mobile-header\">\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span class=\"font-bold\">AI Tutor</span>\n </div> \n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n <div class=\"flex flex-row justify-end\">\n <div *ngIf=\"maximize\" (click)=\"minimizeAITutor()\">\n <mat-icon>minimize</mat-icon>\n </div>\n <div *ngIf=\"!maximize\" (click)=\"maximizeAITutor()\">\n <mat-icon>maximize</mat-icon>\n </div>\n <div (click)=\"closeAITutorPopup()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n \n \n </div>\n</div>\n<div [hidden]=\"!maximize\">\n<div class=\"header\">\n <!-- <mat-form-field appearance=\"none\" style=\"width:100%\">\n <select matNativeControl required class=\"section-dd\" >\n <option value=\"\">You can also choose a learning style that suits you best from here.</option>\n <option value=\"\">None</option>\n <option value=\"\">Socratic</option>\n <option value=\"\">Story Telling</option>\n <option value=\"\">Summarisation</option>\n </select>\n </mat-form-field> -->\n <mat-form-field class=\"multiline-select\" appearance=\"fill\" style=\"width: 100%; height: 80px;\" floatLabel=\"never\">\n <mat-select class=\"multiline-select-box\" required [(value)]=\"selectedLearningStyle\" (selectionChange)=\"getLearningStyle()\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"option-content\">\n <div class=\"title\">{{ selectedLearningStyle?.title }}</div>\n <div class=\"subtitle\">{{ selectedLearningStyle?.subtitle }}</div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\" *ngFor=\"let item of learningStyle\" [value]=\"item\">\n <div class=\"option-content\">\n <div class=\"title\">{{item?.title}}</div>\n <div class=\"subtitle\">{{item?.subtitle}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n \n</div>\n\n<div class=\"container-none\" id=\"container-none\">\n <div [ngClass]=\"from === 'chatbot' ? 'ai-tutor-container-chatbot':'ai-tutor-container'\">\n <div class=\"message-container\" #scrollMe>\n <div class=\"start-chat\" *ngIf=\"aiTutorResultArr?.length === 0\">\n <h2 class=\"hey\">Hey<span *ngIf=\"userInfo?.firstName\">, {{userInfo?.firstName}}</span> </h2>\n <p>Welcome to AI Tutor,\u2028Get instant explanations, step-by-step learning guidance, and customised learning tailored just for you.</p>\n </div>\n <ng-container *ngFor=\"let chat of aiTutorResultArr; let i =index\">\n <ng-container *ngIf=\"chat.type === 'incoming'\">\n <ng-container *ngIf=\"chat?.answer || chat?.showFromInternet\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.answer\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/bot-chat-small.svg\"></div>\n \n <!-- <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\" [innerHTML]=\"chat.answer\">\n </div> -->\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.showFromInternet\">\n <div class=\"system-msg padding-xs mx-10\">\n I couldn\u2019t find any relevant results for your query. Would you like me to search outside the iGOT platform for more information?\n </div>\n \n </div>\n <ng-container *ngIf=\"chat?.answer\">\n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\">\n <markdown [data]=\"chat?.answer\"></markdown>\n </div>\n \n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount > 30\" >\n <!-- <div [innerHTML]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></div> -->\n <markdown [data]=\"chat?.answer\"></markdown>\n <!-- <markdown [data]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></markdown> -->\n <!-- <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"!chat?.showLess\" (click)=\"toggleShow(i, 'less')\">Show Less</a>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"chat?.showLess\" (click)=\"toggleShow(i, 'more')\">Show More</a> -->\n </div>\n </ng-container>\n \n \n </div>\n \n <div *ngIf=\"chat?.showFromInternet\">\n <div class=\"flex row my-2 justify-start mx-10 my-5\">\n <div (click)=\"callFromInternet(chat, i)\">\n <button type=\"button\" class=\"web-button px-4 cursor-pointer\">\n <mat-icon class=\"web-search-icon\">search </mat-icon><span class=\"blue-color\">Search the web</span>\n </button>\n </div>\n <div (click)=\"rejectFromInternet(i)\" class=\"mx-2\">\n <button type=\"button\" class=\"web-button py-2 px-4 cursor-pointer\">\n <mat-icon class=\"web-close-icon\">close</mat-icon><span class=\"blue-color\">No</span>\n </button>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let item of chat?.result; let ci=index\">\n <div class=\"system-msg-mimetype flex flex-col\" *ngIf=\"item?.contentType === 'Resource'\">\n <ng-container *ngIf=\"item?.mimeType === 'application/pdf'\">\n <!-- <div class=\"resource-icon\"><a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <img src=\"/assets/icons/ai-pdf-icon.jpg\"></a>\n </div> -->\n <div class=\"recommended-question-for-resource mx-10\" (click)=\"redirectToResource(item);raiseTelemetryForResource(item)\">\n <!-- <div class=\"resource-icon\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <img src=\"/assets/ai-tutor/pdf.svg\">\n </a>\n <p>{{item?.message}}</p>\n </div> -->\n <div class=\"btn-default mb-2\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">\n <img class=\"vertical-middle h-w-34\" src=\"/assets/ai-tutor/pdf.svg\">\n </a>\n {{item?.title}}\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n </div>\n <!-- <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Click to view</a>\n </div> -->\n </ng-container>\n <!-- <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n \n <div class=\"resource-icon\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img src=\"/assets/icons/ai-video-icon.jpg\">\n \n </div>\n <div class=\"content-duration flex\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </div>\n </div>\n \n \n </a>\n </div>\n </ng-container> -->\n <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n <div class=\"recommended-question-for-resource mx-10\" (click)=\"redirectToResource(item);raiseTelemetryForResource(item)\">\n \n <div class=\"btn-default mb-2\">\n <div class=\"flex flex-row\">\n <div>\n <a [href]=\"item?.resourceLink\" target=\"_blank\">\n <img class=\"vertical-middle h-w-34\" src=\"/assets/ai-tutor/video.svg\">\n </a>\n </div>\n <div class=\"ml-1\">\n <span>{{item?.title}} </span>\n </div>\n <div>\n <span class=\"content-duration flex ml-1\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </span> \n </div>\n <div>\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n </div>\n </div>\n <!-- <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img class=\"h-w-34\" src=\"/assets/ai-tutor/video.svg\">\n <p>{{item?.message}}</p>\n </div>\n <div class=\"content-duration flex\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </div>\n </div>\n \n \n </a> -->\n </div>\n </ng-container>\n <div class=\"flex flex-row cursor-pointer\">\n <!-- <div class=\"resource-link\" *ngIf=\"!(item?.fromInternet)\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Click to view</a>\n </div> -->\n <div class=\"cursor-pointer ml-10 mr-2 my-1\" (click)=\"copyPath(item, ci)\" *ngIf=\"item?.contentType === 'Resource' && !(item?.fromInternet)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <!-- <div class=\"feefback-section flex flex-row my-1\" *ngIf=\"(item?.feedback)\">\n <div *ngIf=\"item?.feedback !== 'down'\"\n class=\"cursor-pointer feedback-icon mt-1\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" class=\"ml-2 cursor-pointer feedback-icon\">\n <img src=\"/assets/ai-tutor/fill-down.svg\">\n </div>\n </div>\n <div class=\"feefback-section flex flex-row my-1\" *ngIf=\"item?.feedback === ''\">\n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item,i, ci)\"\n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img src=\"/assets/ai-tutor/down.svg\">\n </div>\n </div> -->\n <div class=\"feefback-section flex flex-row my-1\">\n <div (click)=\"sharePositiveContentRating(item,i, ci)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"item?.feedback !== 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback === 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"item?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"item?.feedback !== 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"item?.feedback === 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"item?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div>\n <!-- <div class=\"flex flex-row font-12 mt-1\">\n <div class=\"ml-2 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div> -->\n <!-- <div class=\"feefback-section flex flex-row\">\n \n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item,i, ci)\"\n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon\"><img src=\"/assets/ai-tutor/down.svg\"></div>\n </div> -->\n </div>\n \n </div>\n <div class=\"recommended-question\" [ngClass]=\"{'ml-10': item?.message }\">\n <div class=\"my-5px mr-2 w-92\">\n <ng-container *ngIf=\"item?.contentType !== 'Resource' && !(item?.fromInternet)\">\n <div class=\"btn-default\" (click)=\"redirectToToc(item)\">{{item?.title}}\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n <div class=\"recommended-question-desc\" *ngIf=\"!(item?.fromInternet)\">\n <!-- {{item?.description}} -->\n <markdown [data]=\"item?.description\"></markdown>\n </div>\n </ng-container>\n </div>\n <div class=\"flex flex-row font-12 mb-2\">\n <div class=\"cursor-pointer\" (click)=\"copyPath(item, ci)\" *ngIf=\"item?.contentType !== 'Resource' && !(item?.fromInternet)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <!-- <div class=\"feefback-section flex flex-row\" *ngIf=\"item?.contentType !== 'Resource'\">\n \n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item, i,ci)\" \n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item, i,ci)\" class=\"ml-2 cursor-pointer feedback-icon\"><img src=\"/assets/ai-tutor/down.svg\"></div>\n </div> -->\n <div class=\"feefback-section flex flex-row\" *ngIf=\"item?.contentType !== 'Resource'\">\n <div (click)=\"sharePositiveContentRating(item,i, ci)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"item?.feedback !== 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback === 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"item?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"item?.feedback !== 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"item?.feedback === 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"item?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div> \n </div>\n <!-- <div class=\"flex flex-row font-12 mt-1\" *ngIf=\"item?.contentType !== 'Resource'\">\n <div class=\"ml-2 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div> -->\n </div>\n </ng-container>\n <div class=\" flex flex-row ml-10\" *ngIf=\"chat?.answer && !(chat?.result?.length)\">\n <div (click)=\"sharePositiveContentRatingForAnswer(chat,i)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"chat?.feedback !== 'up' && !chat?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"chat?.feedback === 'up' && !chat?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"chat?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopupForAnswer(chat,i)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"chat?.feedback !== 'down' && !chat?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"chat?.feedback === 'down' && !chat?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"chat?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div> \n <div class=\"flex flex-row font-12 mt-1 mb-1 ai-generated-content-container\" *ngIf=\"chat?.result?.length\">\n <div class=\"ml-5 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div>\n \n </ng-container>\n <ng-container>\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.newMessage === '' && !resultFetch\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/bot-chat-small.svg\"></div>\n <div class=\"loading-bar-icon flex flex-row vertical-middle\">\n <div class=\"mt-2\"><span class=\"blue-color\">Retrieving Results</span></div>\n <div><img alt=\"ai-icon\" src=\"/assets/icons/loading_bar.gif\"></div>\n </div>\n </div>\n \n </ng-container>\n </ng-container>\n \n <ng-container *ngIf=\"chat.type === 'sendMsg'\">\n <div class=\"flex width-1-1 row-end padding-top-l padding-bottom-m\">\n <div class=\"user-seleted-question padding-xs\">\n {{chat?.question}}\n </div>\n <div class=\"user-icon\" *ngIf=\"userIcon\">\n <img alt=\"ai-icon\" src=\"{{userIcon}}\">\n </div>\n <div class=\"circle-s user-icon\" *ngIf=\"!userIcon\" [ngStyle]=\"{'background-color': circleColor }\">\n <div class=\"initials\" i18n-aria-label>\n {{ userInitials }} \n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div> \n </div>\n</div>\n\n<div class=\"footer\" [ngClass]=\"isMobile ? 'ai-popup-mobile-footer':''\">\n <div class=\"border-gradient-rounded\" [style.height.px]=\"containerHeight\">\n <div class=\"flex flex-row ml-5 mr-2 justify-between\">\n\n <div class=\"query-box\">\n <!-- <input class=\"width-500\" type=\"text\" placeholder=\"Ask anything...\" [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery()\"/> -->\n <textarea #autoResizeTextarea class=\"width-500\"\n placeholder=\"Ask Me Anything...\"\n (input)=\"resizeTextarea(autoResizeTextarea, 'fromInput')\"\n [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery(autoResizeTextarea, $event)\"\n rows=\"1\"\n >\n </textarea>\n \n </div>\n\n <div class=\"margin-top-2px\">\n <button type=\"button\" class=\"flex-auto-display send-btn\" (click)=\"submitSearchQuery('',$event)\" [disabled]=\"!searchQueryAItutor\">\n <mat-icon class=\"send-btn-icon\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n</div>\n</div>\n</div>", styles: [".hey{background:linear-gradient(90deg,#32b9dfde,#1b4ca1de);-webkit-background-clip:text;background-clip:text;color:transparent}.ai-generated-content{background:linear-gradient(90deg,#f3962f,#1b4ca1);-webkit-background-clip:text;background-clip:text;color:transparent}.ai-tutor-container .control-container{position:fixed;bottom:0;width:24%;z-index:2;background:#fff;height:40px}.ai-tutor-container-chatbot .control-container{position:fixed;bottom:100px;width:600px;margin:1%;z-index:2}.start-chat{text-align:center;padding-top:37.5%}.query-box{min-height:38px;transition:height .2s;width:100%}.query-box input{border:0;outline:0}.border-gradient-rounded{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:96%;min-height:36px;margin-left:1%;z-index:3}.send-btn{background-color:#fff!important;color:#1b4ca1!important;border:none!important;margin-left:14px}.ai-tutor-container-chatbot{background-image:url(/assets/ai-tutor/background.svg);height:90vh;width:525px}.message-container{z-index:2;position:relative;width:100%}.chatbot-icon-container{position:fixed;bottom:120px;right:0;cursor:pointer;height:90px;align-items:flex-start;display:flex;justify-content:center;width:auto;z-index:999999999}.chatbot-icon{position:absolute;right:30px;animation-delay:1s;transition:1s ease}.chatbot-icon-expanded{right:0}.expand-text{width:110px;display:flex;align-items:center;justify-content:center;background-color:#1b4ca1;color:#fff;font-size:18px;border-top:2px solid #fff;border-bottom:2px solid #fff;vertical-align:middle}.chatbot{width:610px;position:fixed;bottom:20px;right:50px;z-index:9999999999;border-radius:15px;background-color:#fff;box-shadow:0 6px 16px #0000003d;height:calc(100vh - 20%)}.cb-close{cursor:pointer}.cb-header{color:#fff!important;background-color:#1b4ca1;border-top-left-radius:15px;border-top-right-radius:15px;align-items:center;justify-content:space-between;position:absolute;width:100%;top:0}.cb-header .user-info-div{width:88%;justify-content:space-between}.cb-header .lang-select{height:32px;background-color:#fff;border-color:#00000029!important}.cb-header .user-name{padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:74%}.cb-content{background-color:#f0f3f4;overflow:auto}.cb-topics{padding:16px;background-color:#f5f5f5;overflow:auto}.cb-footer{border-bottom-left-radius:15px;border-bottom-right-radius:15px;background-color:#fff}.cb-footer .info{width:33%;padding:5px 0;align-items:center;display:flex;justify-content:center;flex-wrap:wrap;cursor:pointer}.cb-footer .info .info-text{font-size:10px;width:100%;text-align:center}.cb-footer .info .info-icon{height:24px}.br-br{border-bottom-right-radius:15px}.br-bl{border-bottom-left-radius:15px}.language{background-color:#0000000a}.active{background-color:#fbead1;border-top:3px solid rgb(239,149,30)}.active .mat-icon{color:#ef951e!important}.cat-list{margin:0;padding:0;width:100%;display:flex}.cat-item{padding:10px 16px;border-radius:21px;border:1px solid rgba(0,0,0,.16);background-color:#0000000a;opacity:1;color:#000000de;font-family:Lato-Regular,sans-serif;font-size:14px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:center;line-height:20px;width:fit-content;margin-right:12px;height:fit-content;cursor:pointer;white-space:nowrap}.lang-select{width:70px}.lang-select .mat-form-field-flex{background-color:#fff!important}.lang-select .mat-form-field-underline{background-color:transparent!important}.loader{position:absolute;left:50%;top:39%}.default-info .default-icon{width:60px;float:left;display:flex;flex-wrap:wrap}.default-info .default-msg{background-color:#0000000a;border:1px solid rgba(0,0,0,.16);border-radius:0 15px 15px;display:flex;flex-wrap:wrap}.chat-bot-icon{padding-top:8px}.row-start{justify-content:flex-start}.row-start .system-icon{padding-right:3px}.row-start .system-msg{background-color:#d1dbec;border:1px solid rgb(209,219,236);border-radius:0 15px 15px;display:flex;flex-wrap:wrap;min-width:auto;max-width:80%;height:100%;word-break:break-word}.row-start .system-msg ::ng-deep markdown *{margin:0}.recommended-question-desc ::ng-deep markdown *{margin:0;width:100%;word-wrap:break-word}.word-break{word-break:break-all;white-space:unset}.margin-left-5{margin-left:5%}.question-hint{font-weight:700}.recommended-question{display:flex;flex-wrap:wrap;height:fit-content}.recommended-question .rec-item{height:fit-content}.recommended-question .my-5px{margin-top:5px;margin-bottom:5px}.recommended-question .mr-5px{margin-right:5px}.recommended-question .btn-default{background:#d5c7c70a;border:1px solid #1B4CA1;color:#1b4ca1;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.recommended-question .showmore-icon{align-items:flex-start}.recommended-question .btn-active{background:#000;border:1px solid rgba(0,0,0,.16);color:#fff}.btn-show-more,.btn-show-less{background:#1b4ca1;color:#fff;padding:10px 20px;font-size:14px;cursor:pointer;border-radius:40px}.row-end{justify-content:flex-end;height:100%}.row-end .user-seleted-question{background-color:#000;border-radius:15px 0 15px 15px;display:flex;flex-wrap:wrap;color:#fff;float:right;text-align:left;max-width:62%;word-break:break-word}.highlight-title{color:#1b4ca1}.incoming-msg{height:fit-content}.hint-text{color:#1b4ca1}@media only screen and (max-width: 600px){.chatbot{right:6px;bottom:67px}}@media only screen and (max-width: 390px){.chatbot{right:6px;bottom:67px}}.chatbot-wrapper{position:relative}.cb-content-wrapper{position:absolute;width:100%;top:64px;bottom:130px;max-height:100%;overflow:auto;box-sizing:border-box;background-color:#f0f3f4}.cb-footer-wrapper{position:absolute;width:100%;bottom:0}.my-5px{margin-top:5px;margin-bottom:5px}.mr-5px{margin-right:5px}*,:after,:before{box-sizing:border-box}::ng-deep .disable-scroll{overflow-x:hidden!important;overflow:hidden}@media only screen and (max-width: 600px){.chatbot{right:0;bottom:0;width:100%;height:100svh;z-index:999999999}.cb-footer-wrapper{bottom:0}.cb-content-wrapper{bottom:130px}.chatbot-icon-container{bottom:190px}.cb-header{border-top-left-radius:unset;border-top-right-radius:unset}.cb-footer{border-bottom-left-radius:unset;border-bottom-right-radius:unset}.br-br{border-bottom-right-radius:unset}.br-bl{border-bottom-left-radius:unset}}.feefback-section{margin-left:10px}.resource-icon{margin-left:10%}.resource-link{margin-left:40px}.resource-icon img{height:65px;width:115.25px}.font-12{font-size:12px}.vertical-middle{vertical-align:middle}.send-btn-icon{height:22px!important}.width-500{width:262px}.learning-type-container{width:98%}.section-dd{border:1px solid #ccc;padding:12px 16px;width:100%;height:65px;font-size:12px;font-weight:400;position:relative;z-index:2}.system-icon img{height:36px;width:36px}.circle-s{border-radius:50%;width:36px;height:36px;display:flex;justify-content:center;align-items:center;margin-left:4px}.circle-s img{border-radius:50%;width:100%;height:100%}.circle-s .initials{color:#fff;font-size:10px;line-height:12px;font-size:14px;letter-spacing:.2625px}.copied-tooltip{position:absolute;left:20%;transform:translate(-50%);background-color:#000;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;opacity:1;pointer-events:none;transition:opacity .3s ease;z-index:999}.loading-bar-icon img{height:50px;width:50px}.link{color:#1b4ca1;text-decoration:underline}.content-duration{position:relative;background:#f3962f;color:#fff;width:auto;border-radius:8px;text-align:center;bottom:11px;left:0;padding:0 5px;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:12px;white-space:nowrap}.content-duration .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.position-relative{position:relative}.control-container{position:fixed;bottom:10px;z-index:2}.tutor-container{width:100%}.header{top:127px;width:100%;color:#fff;display:flex;align-items:flex-start;justify-content:flex-start}::ng-deep .header .mat-form-field{width:100%}.footer{bottom:0;width:100%;height:50px;color:#fff;display:flex;align-items:flex-end;justify-content:center;z-index:2}.container-none{margin-bottom:10px;padding:20px;height:calc(100vh - 261px);background:url(/assets/ai-tutor/background.svg);background-color:#f0f3f4;overflow-y:auto;overflow-x:hidden;position:relative;background-color:#ffffffe6;background-blend-mode:overlay}.option-content{display:flex;flex-direction:column;line-height:2}.option-content .title{font-weight:600}.option-content .subtitle{font-size:12px;color:gray}:host ::ng-deep .multiline-select .mat-mdc-select-value-text{white-space:pre-wrap!important}:host ::ng-deep .mat-pseudo-checkbox{display:none!important}:host ::ng-deep .mat-pseudo-checkbox-checked{display:none!important}:host ::ng-deep .multiline-select-option{background-color:#fff!important}:host ::ng-deep .player-content .mat-tab-label-active{opacity:1!important}.user-icon{margin-left:5px}.user-icon img{height:36px;width:36px;border-radius:50%}.w-92{width:92%}::ng-deep .copy-icon .material-icons{font-size:18px!important}::ng-deep .copy-icon .mat-icon{vertical-align:middle}.internet-result-query{background:#add8e6;border:1px solid #1B4CA1;color:#000;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.blue-color{color:#1b4ca1;font-size:14px;font-weight:700}.web-button{background-color:#fff;color:#1b4ca1;border-radius:8px;padding:10px;border:1px solid #1B4CA1}.web-search-icon,.web-close-icon{color:#1b4ca1;vertical-align:middle}::ng-deep .mat-mdc-select-panel{background-color:#fff!important}.rotate-180{rotate:180deg}.feedback-icon{height:18px;width:18px}.recommended-question-for-resource{display:flex;flex-wrap:wrap;height:fit-content}.recommended-question-for-resource .rec-item{height:fit-content}.recommended-question-for-resource .my-5px{margin-top:5px;margin-bottom:5px}.recommended-question-for-resource .mr-5px{margin-right:5px}.recommended-question-for-resource .btn-default{background:#d5c7c70a;border:1px solid #F3962F;color:#1b4ca1;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.recommended-question-for-resource .showmore-icon{align-items:flex-start}.recommended-question-for-resource .btn-active{background:#000;border:1px solid rgba(0,0,0,.16);color:#fff}.h-w-34{height:34px;width:34px}.border-gradient-rounded textarea{width:100%;border:none;resize:none;overflow:hidden;font-size:14px;font-family:Lato;box-sizing:border-box;min-height:32px;padding-top:5px}.border-gradient-rounded textarea:focus{outline:none;border:1px solid transparent}.overflow-y-hidden{overflow-y:hidden}.blue-loader-animation{width:18px;height:18px;animation:spin 2s linear infinite;transform-origin:center center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.margin-top-2px{margin-top:2px}.recommended-question-desc ::ng-deep markdown pre{all:unset;display:revert;box-sizing:border-box;word-wrap:break-word;width:100%}.ai-tutor-popup{position:fixed;top:50px;z-index:999;background-color:#fff;width:100%}.ai-tutor-popup-minimize{position:fixed;bottom:65px;z-index:999;background-color:#fff;width:100%;border-top:3px solid #eff3f9}.ai-popup-mobile-footer{height:25px;bottom:70px;position:fixed}.ai-tutor-mobile-header{justify-content:space-between;padding:0 10px;border-bottom:1px solid #ccc;height:35px;margin-top:15px}.red-circle{background:red;opacity:1;color:#fff;padding:2px 10px;height:20px;width:50px;border-radius:2px;vertical-align:middle;display:flex;justify-content:center;align-items:center;margin-left:8px;margin-top:-10px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i12$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i13$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }] }); }
|
|
12115
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AiTutorComponent, selector: "ws-widget-ai-tutor", inputs: { from: "from", content: "content", userJourney: "userJourney" }, outputs: { closeAIPopup: "closeAIPopup" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["autoResizeTextarea"], descendants: true }], ngImport: i0, template: "<!-- <div class=\"tutor-container\">\n<div class=\"learning-type-container\">\n <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\" >\n <option value=\"\">Select learning type here </option>\n <option value=\"\">None</option>\n <option value=\"\">Socratic</option>\n <option value=\"\">Story Telling</option>\n <option value=\"\">Summarisation</option>\n </select>\n </mat-form-field>\n</div>\n<div [ngClass]=\"from === 'chatbot' ? 'ai-tutor-container-chatbot':'ai-tutor-container'\" #scrollMe>\n <div class=\"message-container\" #scrollMe>\n <div class=\"start-chat\" *ngIf=\"aiTutorResultArr?.length === 0\">\n <h2 class=\"hey\">Hey<span *ngIf=\"userInfo?.firstName\">, {{userInfo?.firstName}}</span> </h2>\n <p>Welcome to Ai Tutor,\u2028Get instant explanations, step-by-step learning guidance, and customised learning tailored just for you.</p>\n </div>\n <ng-container *ngFor=\"let chat of aiTutorResultArr; let i =index\">\n <ng-container *ngIf=\"chat.type === 'incoming'\">\n <ng-container *ngIf=\"chat?.answer\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/chatbot-ai-new.svg\"></div>\n \n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\" [innerHTML]=\"chat.answer\">\n </div>\n <div class=\"system-msg padding-xs\">\n <div *ngIf=\"chat?.wordsCount > 30\" [innerHTML]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></div>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"!chat?.showLess\" (click)=\"toggleShow(i, 'less')\">Show Less</a>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"chat?.showLess\" (click)=\"toggleShow(i, 'more')\">Show More</a>\n </div>\n \n\n </div>\n <ng-container *ngFor=\"let item of chat?.result; let ci=index\">\n <div class=\"system-msg-mimetype flex flex-col\" *ngIf=\"item?.contentType === 'Resource'\">\n <ng-container *ngIf=\"item?.mimeType === 'application/pdf'\">\n <div class=\"resource-icon\"><a [href]=\"item?.resourceLink\" target=\"_blank\"><img src=\"/assets/icons/ai-pdf-icon.jpg\"></a></div>\n <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Open Resource Link</a>\n </div>\n </ng-container>\n <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n \n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img src=\"/assets/icons/ai-video-icon.jpg\">\n\n </div>\n <div class=\"content-duration\" *ngIf=\"item?.contentStart || item?.contentEnd\">\n <span *ngIf=\"item?.contentStart\">{{item?.contentStart}}</span>\n <span *ngIf=\"item?.contentEnd\">:{{item?.contentEnd}}</span>\n </div>\n </div>\n <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Open Resource Link</a>\n </div>\n </ng-container>\n </div>\n <div class=\"recommended-question my-5px\" [ngClass]=\"{'margin-left-5': item?.message }\">\n <div class=\"my-5px mr-2\">\n <ng-container *ngIf=\"item?.contentType !== 'Resource'\">\n <div class=\"btn-default\" (click)=\"redirectToToc(item)\">{{item?.title}}\n <mat-icon class=\"vertical-middle\">navigate_next</mat-icon>\n </div>\n <div>\n {{item?.description | slice : 0:50}}\n </div>\n </ng-container>\n </div>\n <div class=\"flex flex-row font-12\">\n <div class=\"cursor-pointer\" (click)=\"copyPath(item, ci)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <div class=\"ml-2 mr-2\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are AI generated results</div>\n </div>\n </div>\n </ng-container>\n \n \n </ng-container>\n <ng-container *ngIf=\"!chat?.answer\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/chatbot-ai-new.svg\"></div>\n <div class=\"loading-bar-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/loading_bar.gif\"></div>\n </div>\n \n </ng-container>\n </ng-container>\n \n <ng-container *ngIf=\"chat.type === 'sendMsg'\">\n <div class=\"flex width-1-1 row-end padding-top-l padding-bottom-m\">\n <div class=\"user-seleted-question padding-xs\">\n {{chat?.question}}\n </div>\n <div class=\"user-icon\" *ngIf=\"userIcon\">\n <img alt=\"ai-icon\" src=\"{{userIcon}}\">\n </div>\n <div class=\"circle-s user-icon\" *ngIf=\"!userIcon\" [ngStyle]=\"{'background-color': circleColor }\">\n <div class=\"initials\" i18n-aria-label>\n {{ userInitials }} \n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div> \n</div>\n<div class=\"control-container\">\n <div class=\"border-gradient-rounded\">\n <div class=\"flex flex-row mx-5 justify-between\">\n\n <div class=\"query-box\">\n <input class=\"width-500\" type=\"text\" placeholder=\"Ask anything...\" [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery()\"/>\n \n </div>\n\n <div>\n <button type=\"button\" class=\"flex-auto-display send-btn\" (click)=\"submitSearchQuery()\" [disabled]=\"!searchQueryAItutor\">\n <mat-icon class=\"send-btn-icon\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n</div>\n</div> -->\n\n<div class=\"overflow-y-hidden\" [ngClass]=\"(isMobile && !maximize ? 'ai-tutor-popup-minimize' : (isMobile ? 'ai-tutor-popup': ''))\">\n<div *ngIf=\"isMobile\">\n <div class=\"flex flex-row ai-tutor-mobile-header\">\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span class=\"font-bold\">AI Tutor</span>\n </div> \n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n <div class=\"flex flex-row justify-end\">\n <div *ngIf=\"maximize\" (click)=\"minimizeAITutor()\">\n <mat-icon>minimize</mat-icon>\n </div>\n <div *ngIf=\"!maximize\" (click)=\"maximizeAITutor()\">\n <mat-icon>maximize</mat-icon>\n </div>\n <div (click)=\"closeAITutorPopup()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n \n \n </div>\n</div>\n<div [hidden]=\"!maximize\">\n<div class=\"header\">\n <!-- <mat-form-field appearance=\"none\" style=\"width:100%\">\n <select matNativeControl required class=\"section-dd\" >\n <option value=\"\">You can also choose a learning style that suits you best from here.</option>\n <option value=\"\">None</option>\n <option value=\"\">Socratic</option>\n <option value=\"\">Story Telling</option>\n <option value=\"\">Summarisation</option>\n </select>\n </mat-form-field> -->\n <mat-form-field class=\"multiline-select\" appearance=\"fill\" style=\"width: 100%; height: 80px;\" floatLabel=\"never\">\n <mat-select class=\"multiline-select-box\" required [(value)]=\"selectedLearningStyle\" (selectionChange)=\"getLearningStyle()\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"option-content\">\n <div class=\"title\">{{ selectedLearningStyle?.title }}</div>\n <div class=\"subtitle\">{{ selectedLearningStyle?.subtitle }}</div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\" *ngFor=\"let item of learningStyle\" [value]=\"item\">\n <div class=\"option-content\">\n <div class=\"title\">{{item?.title}}</div>\n <div class=\"subtitle\">{{item?.subtitle}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n \n</div>\n\n<div class=\"container-none\" id=\"container-none\">\n <div [ngClass]=\"from === 'chatbot' ? 'ai-tutor-container-chatbot':'ai-tutor-container'\">\n <div class=\"message-container\" #scrollMe>\n <div class=\"start-chat\" *ngIf=\"aiTutorResultArr?.length === 0\">\n <h2 class=\"hey\">Hey<span *ngIf=\"userInfo?.firstName\">, {{userInfo?.firstName}}</span> </h2>\n <p>Welcome to AI Tutor,\u2028Get instant explanations, step-by-step learning guidance, and customised learning tailored just for you.</p>\n </div>\n <ng-container *ngFor=\"let chat of aiTutorResultArr; let i =index\">\n <ng-container *ngIf=\"chat.type === 'incoming'\">\n <ng-container *ngIf=\"chat?.answer || chat?.showFromInternet\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.answer\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/bot-chat-small.svg\"></div>\n \n <!-- <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\" [innerHTML]=\"chat.answer\">\n </div> -->\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.showFromInternet\">\n <div class=\"system-msg padding-xs mx-10\">\n I couldn\u2019t find any relevant results for your query. Would you like me to search outside the iGOT platform for more information?\n </div>\n \n </div>\n <ng-container *ngIf=\"chat?.answer\">\n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\">\n <markdown [data]=\"chat?.answer\"></markdown>\n </div>\n \n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount > 30\" >\n <!-- <div [innerHTML]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></div> -->\n <markdown [data]=\"chat?.answer\"></markdown>\n <!-- <markdown [data]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></markdown> -->\n <!-- <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"!chat?.showLess\" (click)=\"toggleShow(i, 'less')\">Show Less</a>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"chat?.showLess\" (click)=\"toggleShow(i, 'more')\">Show More</a> -->\n </div>\n </ng-container>\n \n \n </div>\n \n <div *ngIf=\"chat?.showFromInternet\">\n <div class=\"flex row my-2 justify-start mx-10 my-5\">\n <div (click)=\"callFromInternet(chat, i)\">\n <button type=\"button\" class=\"web-button px-4 cursor-pointer\">\n <mat-icon class=\"web-search-icon\">search </mat-icon><span class=\"blue-color\">Search the web</span>\n </button>\n </div>\n <div (click)=\"rejectFromInternet(i)\" class=\"mx-2\">\n <button type=\"button\" class=\"web-button py-2 px-4 cursor-pointer\">\n <mat-icon class=\"web-close-icon\">close</mat-icon><span class=\"blue-color\">No</span>\n </button>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let item of chat?.result; let ci=index\">\n <div class=\"system-msg-mimetype flex flex-col\" *ngIf=\"item?.contentType === 'Resource'\">\n <ng-container *ngIf=\"item?.mimeType === 'application/pdf'\">\n <!-- <div class=\"resource-icon\"><a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <img src=\"/assets/icons/ai-pdf-icon.jpg\"></a>\n </div> -->\n <div class=\"recommended-question-for-resource mx-10\" (click)=\"redirectToResource(item);raiseTelemetryForResource(item)\">\n <!-- <div class=\"resource-icon\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <img src=\"/assets/ai-tutor/pdf.svg\">\n </a>\n <p>{{item?.message}}</p>\n </div> -->\n <div class=\"btn-default mb-2\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">\n <img class=\"vertical-middle h-w-34\" src=\"/assets/ai-tutor/pdf.svg\">\n </a>\n {{item?.title}}\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n </div>\n <!-- <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Click to view</a>\n </div> -->\n </ng-container>\n <!-- <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n \n <div class=\"resource-icon\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img src=\"/assets/icons/ai-video-icon.jpg\">\n \n </div>\n <div class=\"content-duration flex\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </div>\n </div>\n \n \n </a>\n </div>\n </ng-container> -->\n <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n <div class=\"recommended-question-for-resource mx-10\" (click)=\"redirectToResource(item);raiseTelemetryForResource(item)\">\n \n <div class=\"btn-default mb-2\">\n <div class=\"flex flex-row\">\n <div>\n <a [href]=\"item?.resourceLink\" target=\"_blank\">\n <img class=\"vertical-middle h-w-34\" src=\"/assets/ai-tutor/video.svg\">\n </a>\n </div>\n <div class=\"ml-1\">\n <span>{{item?.title}} </span>\n </div>\n <div>\n <span class=\"content-duration flex ml-1\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </span> \n </div>\n <div>\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n </div>\n </div>\n <!-- <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img class=\"h-w-34\" src=\"/assets/ai-tutor/video.svg\">\n <p>{{item?.message}}</p>\n </div>\n <div class=\"content-duration flex\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </div>\n </div>\n \n \n </a> -->\n </div>\n </ng-container>\n <div class=\"flex flex-row cursor-pointer\">\n <!-- <div class=\"resource-link\" *ngIf=\"!(item?.fromInternet)\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Click to view</a>\n </div> -->\n <div class=\"cursor-pointer ml-10 mr-2 my-1\" (click)=\"copyPath(item, ci)\" *ngIf=\"item?.contentType === 'Resource' && !(item?.fromInternet)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <!-- <div class=\"feefback-section flex flex-row my-1\" *ngIf=\"(item?.feedback)\">\n <div *ngIf=\"item?.feedback !== 'down'\"\n class=\"cursor-pointer feedback-icon mt-1\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" class=\"ml-2 cursor-pointer feedback-icon\">\n <img src=\"/assets/ai-tutor/fill-down.svg\">\n </div>\n </div>\n <div class=\"feefback-section flex flex-row my-1\" *ngIf=\"item?.feedback === ''\">\n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item,i, ci)\"\n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img src=\"/assets/ai-tutor/down.svg\">\n </div>\n </div> -->\n <div class=\"feefback-section flex flex-row my-1\">\n <div (click)=\"sharePositiveContentRating(item,i, ci)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"item?.feedback !== 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback === 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"item?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"item?.feedback !== 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"item?.feedback === 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"item?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div>\n <!-- <div class=\"flex flex-row font-12 mt-1\">\n <div class=\"ml-2 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div> -->\n <!-- <div class=\"feefback-section flex flex-row\">\n \n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item,i, ci)\"\n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon\"><img src=\"/assets/ai-tutor/down.svg\"></div>\n </div> -->\n </div>\n \n </div>\n <div class=\"recommended-question\" [ngClass]=\"{'ml-10': item?.message }\">\n <div class=\"my-5px mr-2 w-92\">\n <ng-container *ngIf=\"item?.contentType !== 'Resource' && !(item?.fromInternet)\">\n <div class=\"btn-default\" (click)=\"redirectToToc(item)\">{{item?.title}}\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n <div class=\"recommended-question-desc\" *ngIf=\"!(item?.fromInternet)\">\n <!-- {{item?.description}} -->\n <markdown [data]=\"item?.description\"></markdown>\n </div>\n </ng-container>\n </div>\n <div class=\"flex flex-row font-12 mb-2\">\n <div class=\"cursor-pointer\" (click)=\"copyPath(item, ci)\" *ngIf=\"item?.contentType !== 'Resource' && !(item?.fromInternet)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <!-- <div class=\"feefback-section flex flex-row\" *ngIf=\"item?.contentType !== 'Resource'\">\n \n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item, i,ci)\" \n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item, i,ci)\" class=\"ml-2 cursor-pointer feedback-icon\"><img src=\"/assets/ai-tutor/down.svg\"></div>\n </div> -->\n <div class=\"feefback-section flex flex-row\" *ngIf=\"item?.contentType !== 'Resource'\">\n <div (click)=\"sharePositiveContentRating(item,i, ci)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"item?.feedback !== 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback === 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"item?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"item?.feedback !== 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"item?.feedback === 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"item?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div> \n </div>\n <!-- <div class=\"flex flex-row font-12 mt-1\" *ngIf=\"item?.contentType !== 'Resource'\">\n <div class=\"ml-2 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div> -->\n </div>\n </ng-container>\n <div class=\" flex flex-row ml-10\" *ngIf=\"chat?.answer && !(chat?.result?.length)\">\n <div (click)=\"sharePositiveContentRatingForAnswer(chat,i)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"chat?.feedback !== 'up' && !chat?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"chat?.feedback === 'up' && !chat?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"chat?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopupForAnswer(chat,i)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"chat?.feedback !== 'down' && !chat?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"chat?.feedback === 'down' && !chat?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"chat?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div> \n <div class=\"flex flex-row font-12 mt-1 mb-1 ai-generated-content-container\" *ngIf=\"chat?.result?.length\">\n <div class=\"ml-5 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div>\n \n </ng-container>\n <ng-container>\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.newMessage === '' && !resultFetch\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/bot-chat-small.svg\"></div>\n <div class=\"loading-bar-icon flex flex-row vertical-middle\">\n <div class=\"mt-2\"><span class=\"blue-color\">Retrieving Results</span></div>\n <div><img alt=\"ai-icon\" src=\"/assets/icons/loading_bar.gif\"></div>\n </div>\n </div>\n \n </ng-container>\n </ng-container>\n \n <ng-container *ngIf=\"chat.type === 'sendMsg'\">\n <div class=\"flex width-1-1 row-end padding-top-l padding-bottom-m\">\n <div class=\"user-seleted-question padding-xs\">\n {{chat?.question}}\n </div>\n <div class=\"user-icon\" *ngIf=\"userIcon\">\n <img alt=\"ai-icon\" src=\"{{userIcon}}\">\n </div>\n <div class=\"circle-s user-icon\" *ngIf=\"!userIcon\" [ngStyle]=\"{'background-color': circleColor }\">\n <div class=\"initials\" i18n-aria-label>\n {{ userInitials }} \n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div> \n </div>\n</div>\n\n<div class=\"footer\" [ngClass]=\"isMobile ? 'ai-popup-mobile-footer':''\">\n <div class=\"border-gradient-rounded\" [style.height.px]=\"containerHeight\">\n <div class=\"flex flex-row ml-5 mr-2 justify-between\">\n\n <div class=\"query-box\">\n <!-- <input class=\"width-500\" type=\"text\" placeholder=\"Ask anything...\" [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery()\"/> -->\n <textarea #autoResizeTextarea class=\"width-500\"\n placeholder=\"Ask Me Anything...\"\n (input)=\"resizeTextarea(autoResizeTextarea, 'fromInput')\"\n [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery(autoResizeTextarea, $event)\"\n rows=\"1\"\n >\n </textarea>\n \n </div>\n\n <div class=\"margin-top-2px\">\n <button type=\"button\" class=\"flex-auto-display send-btn\" (click)=\"submitSearchQuery(autoResizeTextarea, $event)\" [disabled]=\"!searchQueryAItutor\">\n <mat-icon class=\"send-btn-icon\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n</div>\n</div>\n</div>", styles: [".hey{background:linear-gradient(90deg,#32b9dfde,#1b4ca1de);-webkit-background-clip:text;background-clip:text;color:transparent}.ai-generated-content{background:linear-gradient(90deg,#f3962f,#1b4ca1);-webkit-background-clip:text;background-clip:text;color:transparent}.ai-tutor-container .control-container{position:fixed;bottom:0;width:24%;z-index:2;background:#fff;height:40px}.ai-tutor-container-chatbot .control-container{position:fixed;bottom:100px;width:600px;margin:1%;z-index:2}.start-chat{text-align:center;padding-top:37.5%}.query-box{min-height:38px;transition:height .2s;width:100%}.query-box input{border:0;outline:0}.border-gradient-rounded{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:96%;min-height:36px;margin-left:1%;z-index:3}.send-btn{background-color:#fff!important;color:#1b4ca1!important;border:none!important;margin-left:14px}.ai-tutor-container-chatbot{background-image:url(/assets/ai-tutor/background.svg);height:90vh;width:525px}.message-container{z-index:2;position:relative;width:100%}.chatbot-icon-container{position:fixed;bottom:120px;right:0;cursor:pointer;height:90px;align-items:flex-start;display:flex;justify-content:center;width:auto;z-index:999999999}.chatbot-icon{position:absolute;right:30px;animation-delay:1s;transition:1s ease}.chatbot-icon-expanded{right:0}.expand-text{width:110px;display:flex;align-items:center;justify-content:center;background-color:#1b4ca1;color:#fff;font-size:18px;border-top:2px solid #fff;border-bottom:2px solid #fff;vertical-align:middle}.chatbot{width:610px;position:fixed;bottom:20px;right:50px;z-index:9999999999;border-radius:15px;background-color:#fff;box-shadow:0 6px 16px #0000003d;height:calc(100vh - 20%)}.cb-close{cursor:pointer}.cb-header{color:#fff!important;background-color:#1b4ca1;border-top-left-radius:15px;border-top-right-radius:15px;align-items:center;justify-content:space-between;position:absolute;width:100%;top:0}.cb-header .user-info-div{width:88%;justify-content:space-between}.cb-header .lang-select{height:32px;background-color:#fff;border-color:#00000029!important}.cb-header .user-name{padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:74%}.cb-content{background-color:#f0f3f4;overflow:auto}.cb-topics{padding:16px;background-color:#f5f5f5;overflow:auto}.cb-footer{border-bottom-left-radius:15px;border-bottom-right-radius:15px;background-color:#fff}.cb-footer .info{width:33%;padding:5px 0;align-items:center;display:flex;justify-content:center;flex-wrap:wrap;cursor:pointer}.cb-footer .info .info-text{font-size:10px;width:100%;text-align:center}.cb-footer .info .info-icon{height:24px}.br-br{border-bottom-right-radius:15px}.br-bl{border-bottom-left-radius:15px}.language{background-color:#0000000a}.active{background-color:#fbead1;border-top:3px solid rgb(239,149,30)}.active .mat-icon{color:#ef951e!important}.cat-list{margin:0;padding:0;width:100%;display:flex}.cat-item{padding:10px 16px;border-radius:21px;border:1px solid rgba(0,0,0,.16);background-color:#0000000a;opacity:1;color:#000000de;font-family:Lato-Regular,sans-serif;font-size:14px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:center;line-height:20px;width:fit-content;margin-right:12px;height:fit-content;cursor:pointer;white-space:nowrap}.lang-select{width:70px}.lang-select .mat-form-field-flex{background-color:#fff!important}.lang-select .mat-form-field-underline{background-color:transparent!important}.loader{position:absolute;left:50%;top:39%}.default-info .default-icon{width:60px;float:left;display:flex;flex-wrap:wrap}.default-info .default-msg{background-color:#0000000a;border:1px solid rgba(0,0,0,.16);border-radius:0 15px 15px;display:flex;flex-wrap:wrap}.chat-bot-icon{padding-top:8px}.row-start{justify-content:flex-start}.row-start .system-icon{padding-right:3px}.row-start .system-msg{background-color:#d1dbec;border:1px solid rgb(209,219,236);border-radius:0 15px 15px;display:flex;flex-wrap:wrap;min-width:auto;max-width:80%;height:100%;word-break:break-word}.row-start .system-msg ::ng-deep markdown *{margin:0}.recommended-question-desc ::ng-deep markdown *{margin:0;width:100%;word-wrap:break-word}.word-break{word-break:break-all;white-space:unset}.margin-left-5{margin-left:5%}.question-hint{font-weight:700}.recommended-question{display:flex;flex-wrap:wrap;height:fit-content}.recommended-question .rec-item{height:fit-content}.recommended-question .my-5px{margin-top:5px;margin-bottom:5px}.recommended-question .mr-5px{margin-right:5px}.recommended-question .btn-default{background:#d5c7c70a;border:1px solid #1B4CA1;color:#1b4ca1;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.recommended-question .showmore-icon{align-items:flex-start}.recommended-question .btn-active{background:#000;border:1px solid rgba(0,0,0,.16);color:#fff}.btn-show-more,.btn-show-less{background:#1b4ca1;color:#fff;padding:10px 20px;font-size:14px;cursor:pointer;border-radius:40px}.row-end{justify-content:flex-end;height:100%}.row-end .user-seleted-question{background-color:#000;border-radius:15px 0 15px 15px;display:flex;flex-wrap:wrap;color:#fff;float:right;text-align:left;max-width:62%;word-break:break-word}.highlight-title{color:#1b4ca1}.incoming-msg{height:fit-content}.hint-text{color:#1b4ca1}@media only screen and (max-width: 600px){.chatbot{right:6px;bottom:67px}}@media only screen and (max-width: 390px){.chatbot{right:6px;bottom:67px}}.chatbot-wrapper{position:relative}.cb-content-wrapper{position:absolute;width:100%;top:64px;bottom:130px;max-height:100%;overflow:auto;box-sizing:border-box;background-color:#f0f3f4}.cb-footer-wrapper{position:absolute;width:100%;bottom:0}.my-5px{margin-top:5px;margin-bottom:5px}.mr-5px{margin-right:5px}*,:after,:before{box-sizing:border-box}::ng-deep .disable-scroll{overflow-x:hidden!important;overflow:hidden}@media only screen and (max-width: 600px){.chatbot{right:0;bottom:0;width:100%;height:100svh;z-index:999999999}.cb-footer-wrapper{bottom:0}.cb-content-wrapper{bottom:130px}.chatbot-icon-container{bottom:190px}.cb-header{border-top-left-radius:unset;border-top-right-radius:unset}.cb-footer{border-bottom-left-radius:unset;border-bottom-right-radius:unset}.br-br{border-bottom-right-radius:unset}.br-bl{border-bottom-left-radius:unset}}.feefback-section{margin-left:10px}.resource-icon{margin-left:10%}.resource-link{margin-left:40px}.resource-icon img{height:65px;width:115.25px}.font-12{font-size:12px}.vertical-middle{vertical-align:middle}.send-btn-icon{height:22px!important}.width-500{width:262px}.learning-type-container{width:98%}.section-dd{border:1px solid #ccc;padding:12px 16px;width:100%;height:65px;font-size:12px;font-weight:400;position:relative;z-index:2}.system-icon img{height:36px;width:36px}.circle-s{border-radius:50%;width:36px;height:36px;display:flex;justify-content:center;align-items:center;margin-left:4px}.circle-s img{border-radius:50%;width:100%;height:100%}.circle-s .initials{color:#fff;font-size:10px;line-height:12px;font-size:14px;letter-spacing:.2625px}.copied-tooltip{position:absolute;left:20%;transform:translate(-50%);background-color:#000;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;opacity:1;pointer-events:none;transition:opacity .3s ease;z-index:999}.loading-bar-icon img{height:50px;width:50px}.link{color:#1b4ca1;text-decoration:underline}.content-duration{position:relative;background:#f3962f;color:#fff;width:auto;border-radius:8px;text-align:center;bottom:11px;left:0;padding:0 5px;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:12px;white-space:nowrap}.content-duration .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.position-relative{position:relative}.control-container{position:fixed;bottom:10px;z-index:2}.tutor-container{width:100%}.header{top:127px;width:100%;color:#fff;display:flex;align-items:flex-start;justify-content:flex-start}::ng-deep .header .mat-form-field{width:100%}.footer{bottom:0;width:100%;height:50px;color:#fff;display:flex;align-items:flex-end;justify-content:center;z-index:2}.container-none{margin-bottom:10px;padding:20px;height:calc(100vh - 261px);background:url(/assets/ai-tutor/background.svg);background-color:#f0f3f4;overflow-y:auto;overflow-x:hidden;position:relative;background-color:#ffffffe6;background-blend-mode:overlay}.option-content{display:flex;flex-direction:column;line-height:2}.option-content .title{font-weight:600}.option-content .subtitle{font-size:12px;color:gray}:host ::ng-deep .multiline-select .mat-mdc-select-value-text{white-space:pre-wrap!important}:host ::ng-deep .mat-pseudo-checkbox{display:none!important}:host ::ng-deep .mat-pseudo-checkbox-checked{display:none!important}:host ::ng-deep .multiline-select-option{background-color:#fff!important}:host ::ng-deep .player-content .mat-tab-label-active{opacity:1!important}.user-icon{margin-left:5px}.user-icon img{height:36px;width:36px;border-radius:50%}.w-92{width:92%}::ng-deep .copy-icon .material-icons{font-size:18px!important}::ng-deep .copy-icon .mat-icon{vertical-align:middle}.internet-result-query{background:#add8e6;border:1px solid #1B4CA1;color:#000;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.blue-color{color:#1b4ca1;font-size:14px;font-weight:700}.web-button{background-color:#fff;color:#1b4ca1;border-radius:8px;padding:10px;border:1px solid #1B4CA1}.web-search-icon,.web-close-icon{color:#1b4ca1;vertical-align:middle}::ng-deep .mat-mdc-select-panel{background-color:#fff!important}.rotate-180{rotate:180deg}.feedback-icon{height:18px;width:18px}.recommended-question-for-resource{display:flex;flex-wrap:wrap;height:fit-content}.recommended-question-for-resource .rec-item{height:fit-content}.recommended-question-for-resource .my-5px{margin-top:5px;margin-bottom:5px}.recommended-question-for-resource .mr-5px{margin-right:5px}.recommended-question-for-resource .btn-default{background:#d5c7c70a;border:1px solid #F3962F;color:#1b4ca1;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.recommended-question-for-resource .showmore-icon{align-items:flex-start}.recommended-question-for-resource .btn-active{background:#000;border:1px solid rgba(0,0,0,.16);color:#fff}.h-w-34{height:34px;width:34px}.border-gradient-rounded textarea{width:100%;border:none;resize:none;overflow:hidden;font-size:14px;font-family:Lato;box-sizing:border-box;min-height:32px;padding-top:5px}.border-gradient-rounded textarea:focus{outline:none;border:1px solid transparent}.overflow-y-hidden{overflow-y:hidden}.blue-loader-animation{width:18px;height:18px;animation:spin 2s linear infinite;transform-origin:center center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.margin-top-2px{margin-top:2px}.recommended-question-desc ::ng-deep markdown pre{all:unset;display:revert;box-sizing:border-box;word-wrap:break-word;width:100%}.ai-tutor-popup{position:fixed;top:50px;z-index:999;background-color:#fff;width:100%}.ai-tutor-popup-minimize{position:fixed;bottom:65px;z-index:999;background-color:#fff;width:100%;border-top:3px solid #eff3f9}.ai-popup-mobile-footer{height:25px;bottom:70px;position:fixed}.ai-tutor-mobile-header{justify-content:space-between;padding:0 10px;border-bottom:1px solid #ccc;height:35px;margin-top:15px}.red-circle{background:red;opacity:1;color:#fff;padding:2px 10px;height:20px;width:50px;border-radius:2px;vertical-align:middle;display:flex;justify-content:center;align-items:center;margin-left:8px;margin-top:-10px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i12$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i13$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }] }); }
|
|
12116
12116
|
}
|
|
12117
12117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AiTutorComponent, decorators: [{
|
|
12118
12118
|
type: Component,
|
|
12119
|
-
args: [{ selector: 'ws-widget-ai-tutor', template: "<!-- <div class=\"tutor-container\">\n<div class=\"learning-type-container\">\n <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\" >\n <option value=\"\">Select learning type here </option>\n <option value=\"\">None</option>\n <option value=\"\">Socratic</option>\n <option value=\"\">Story Telling</option>\n <option value=\"\">Summarisation</option>\n </select>\n </mat-form-field>\n</div>\n<div [ngClass]=\"from === 'chatbot' ? 'ai-tutor-container-chatbot':'ai-tutor-container'\" #scrollMe>\n <div class=\"message-container\" #scrollMe>\n <div class=\"start-chat\" *ngIf=\"aiTutorResultArr?.length === 0\">\n <h2 class=\"hey\">Hey<span *ngIf=\"userInfo?.firstName\">, {{userInfo?.firstName}}</span> </h2>\n <p>Welcome to Ai Tutor,\u2028Get instant explanations, step-by-step learning guidance, and customised learning tailored just for you.</p>\n </div>\n <ng-container *ngFor=\"let chat of aiTutorResultArr; let i =index\">\n <ng-container *ngIf=\"chat.type === 'incoming'\">\n <ng-container *ngIf=\"chat?.answer\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/chatbot-ai-new.svg\"></div>\n \n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\" [innerHTML]=\"chat.answer\">\n </div>\n <div class=\"system-msg padding-xs\">\n <div *ngIf=\"chat?.wordsCount > 30\" [innerHTML]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></div>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"!chat?.showLess\" (click)=\"toggleShow(i, 'less')\">Show Less</a>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"chat?.showLess\" (click)=\"toggleShow(i, 'more')\">Show More</a>\n </div>\n \n\n </div>\n <ng-container *ngFor=\"let item of chat?.result; let ci=index\">\n <div class=\"system-msg-mimetype flex flex-col\" *ngIf=\"item?.contentType === 'Resource'\">\n <ng-container *ngIf=\"item?.mimeType === 'application/pdf'\">\n <div class=\"resource-icon\"><a [href]=\"item?.resourceLink\" target=\"_blank\"><img src=\"/assets/icons/ai-pdf-icon.jpg\"></a></div>\n <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Open Resource Link</a>\n </div>\n </ng-container>\n <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n \n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img src=\"/assets/icons/ai-video-icon.jpg\">\n\n </div>\n <div class=\"content-duration\" *ngIf=\"item?.contentStart || item?.contentEnd\">\n <span *ngIf=\"item?.contentStart\">{{item?.contentStart}}</span>\n <span *ngIf=\"item?.contentEnd\">:{{item?.contentEnd}}</span>\n </div>\n </div>\n <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Open Resource Link</a>\n </div>\n </ng-container>\n </div>\n <div class=\"recommended-question my-5px\" [ngClass]=\"{'margin-left-5': item?.message }\">\n <div class=\"my-5px mr-2\">\n <ng-container *ngIf=\"item?.contentType !== 'Resource'\">\n <div class=\"btn-default\" (click)=\"redirectToToc(item)\">{{item?.title}}\n <mat-icon class=\"vertical-middle\">navigate_next</mat-icon>\n </div>\n <div>\n {{item?.description | slice : 0:50}}\n </div>\n </ng-container>\n </div>\n <div class=\"flex flex-row font-12\">\n <div class=\"cursor-pointer\" (click)=\"copyPath(item, ci)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <div class=\"ml-2 mr-2\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are AI generated results</div>\n </div>\n </div>\n </ng-container>\n \n \n </ng-container>\n <ng-container *ngIf=\"!chat?.answer\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/chatbot-ai-new.svg\"></div>\n <div class=\"loading-bar-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/loading_bar.gif\"></div>\n </div>\n \n </ng-container>\n </ng-container>\n \n <ng-container *ngIf=\"chat.type === 'sendMsg'\">\n <div class=\"flex width-1-1 row-end padding-top-l padding-bottom-m\">\n <div class=\"user-seleted-question padding-xs\">\n {{chat?.question}}\n </div>\n <div class=\"user-icon\" *ngIf=\"userIcon\">\n <img alt=\"ai-icon\" src=\"{{userIcon}}\">\n </div>\n <div class=\"circle-s user-icon\" *ngIf=\"!userIcon\" [ngStyle]=\"{'background-color': circleColor }\">\n <div class=\"initials\" i18n-aria-label>\n {{ userInitials }} \n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div> \n</div>\n<div class=\"control-container\">\n <div class=\"border-gradient-rounded\">\n <div class=\"flex flex-row mx-5 justify-between\">\n\n <div class=\"query-box\">\n <input class=\"width-500\" type=\"text\" placeholder=\"Ask anything...\" [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery()\"/>\n \n </div>\n\n <div>\n <button type=\"button\" class=\"flex-auto-display send-btn\" (click)=\"submitSearchQuery()\" [disabled]=\"!searchQueryAItutor\">\n <mat-icon class=\"send-btn-icon\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n</div>\n</div> -->\n\n<div class=\"overflow-y-hidden\" [ngClass]=\"(isMobile && !maximize ? 'ai-tutor-popup-minimize' : (isMobile ? 'ai-tutor-popup': ''))\">\n<div *ngIf=\"isMobile\">\n <div class=\"flex flex-row ai-tutor-mobile-header\">\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span class=\"font-bold\">AI Tutor</span>\n </div> \n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n <div class=\"flex flex-row justify-end\">\n <div *ngIf=\"maximize\" (click)=\"minimizeAITutor()\">\n <mat-icon>minimize</mat-icon>\n </div>\n <div *ngIf=\"!maximize\" (click)=\"maximizeAITutor()\">\n <mat-icon>maximize</mat-icon>\n </div>\n <div (click)=\"closeAITutorPopup()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n \n \n </div>\n</div>\n<div [hidden]=\"!maximize\">\n<div class=\"header\">\n <!-- <mat-form-field appearance=\"none\" style=\"width:100%\">\n <select matNativeControl required class=\"section-dd\" >\n <option value=\"\">You can also choose a learning style that suits you best from here.</option>\n <option value=\"\">None</option>\n <option value=\"\">Socratic</option>\n <option value=\"\">Story Telling</option>\n <option value=\"\">Summarisation</option>\n </select>\n </mat-form-field> -->\n <mat-form-field class=\"multiline-select\" appearance=\"fill\" style=\"width: 100%; height: 80px;\" floatLabel=\"never\">\n <mat-select class=\"multiline-select-box\" required [(value)]=\"selectedLearningStyle\" (selectionChange)=\"getLearningStyle()\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"option-content\">\n <div class=\"title\">{{ selectedLearningStyle?.title }}</div>\n <div class=\"subtitle\">{{ selectedLearningStyle?.subtitle }}</div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\" *ngFor=\"let item of learningStyle\" [value]=\"item\">\n <div class=\"option-content\">\n <div class=\"title\">{{item?.title}}</div>\n <div class=\"subtitle\">{{item?.subtitle}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n \n</div>\n\n<div class=\"container-none\" id=\"container-none\">\n <div [ngClass]=\"from === 'chatbot' ? 'ai-tutor-container-chatbot':'ai-tutor-container'\">\n <div class=\"message-container\" #scrollMe>\n <div class=\"start-chat\" *ngIf=\"aiTutorResultArr?.length === 0\">\n <h2 class=\"hey\">Hey<span *ngIf=\"userInfo?.firstName\">, {{userInfo?.firstName}}</span> </h2>\n <p>Welcome to AI Tutor,\u2028Get instant explanations, step-by-step learning guidance, and customised learning tailored just for you.</p>\n </div>\n <ng-container *ngFor=\"let chat of aiTutorResultArr; let i =index\">\n <ng-container *ngIf=\"chat.type === 'incoming'\">\n <ng-container *ngIf=\"chat?.answer || chat?.showFromInternet\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.answer\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/bot-chat-small.svg\"></div>\n \n <!-- <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\" [innerHTML]=\"chat.answer\">\n </div> -->\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.showFromInternet\">\n <div class=\"system-msg padding-xs mx-10\">\n I couldn\u2019t find any relevant results for your query. Would you like me to search outside the iGOT platform for more information?\n </div>\n \n </div>\n <ng-container *ngIf=\"chat?.answer\">\n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\">\n <markdown [data]=\"chat?.answer\"></markdown>\n </div>\n \n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount > 30\" >\n <!-- <div [innerHTML]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></div> -->\n <markdown [data]=\"chat?.answer\"></markdown>\n <!-- <markdown [data]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></markdown> -->\n <!-- <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"!chat?.showLess\" (click)=\"toggleShow(i, 'less')\">Show Less</a>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"chat?.showLess\" (click)=\"toggleShow(i, 'more')\">Show More</a> -->\n </div>\n </ng-container>\n \n \n </div>\n \n <div *ngIf=\"chat?.showFromInternet\">\n <div class=\"flex row my-2 justify-start mx-10 my-5\">\n <div (click)=\"callFromInternet(chat, i)\">\n <button type=\"button\" class=\"web-button px-4 cursor-pointer\">\n <mat-icon class=\"web-search-icon\">search </mat-icon><span class=\"blue-color\">Search the web</span>\n </button>\n </div>\n <div (click)=\"rejectFromInternet(i)\" class=\"mx-2\">\n <button type=\"button\" class=\"web-button py-2 px-4 cursor-pointer\">\n <mat-icon class=\"web-close-icon\">close</mat-icon><span class=\"blue-color\">No</span>\n </button>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let item of chat?.result; let ci=index\">\n <div class=\"system-msg-mimetype flex flex-col\" *ngIf=\"item?.contentType === 'Resource'\">\n <ng-container *ngIf=\"item?.mimeType === 'application/pdf'\">\n <!-- <div class=\"resource-icon\"><a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <img src=\"/assets/icons/ai-pdf-icon.jpg\"></a>\n </div> -->\n <div class=\"recommended-question-for-resource mx-10\" (click)=\"redirectToResource(item);raiseTelemetryForResource(item)\">\n <!-- <div class=\"resource-icon\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <img src=\"/assets/ai-tutor/pdf.svg\">\n </a>\n <p>{{item?.message}}</p>\n </div> -->\n <div class=\"btn-default mb-2\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">\n <img class=\"vertical-middle h-w-34\" src=\"/assets/ai-tutor/pdf.svg\">\n </a>\n {{item?.title}}\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n </div>\n <!-- <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Click to view</a>\n </div> -->\n </ng-container>\n <!-- <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n \n <div class=\"resource-icon\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img src=\"/assets/icons/ai-video-icon.jpg\">\n \n </div>\n <div class=\"content-duration flex\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </div>\n </div>\n \n \n </a>\n </div>\n </ng-container> -->\n <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n <div class=\"recommended-question-for-resource mx-10\" (click)=\"redirectToResource(item);raiseTelemetryForResource(item)\">\n \n <div class=\"btn-default mb-2\">\n <div class=\"flex flex-row\">\n <div>\n <a [href]=\"item?.resourceLink\" target=\"_blank\">\n <img class=\"vertical-middle h-w-34\" src=\"/assets/ai-tutor/video.svg\">\n </a>\n </div>\n <div class=\"ml-1\">\n <span>{{item?.title}} </span>\n </div>\n <div>\n <span class=\"content-duration flex ml-1\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </span> \n </div>\n <div>\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n </div>\n </div>\n <!-- <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img class=\"h-w-34\" src=\"/assets/ai-tutor/video.svg\">\n <p>{{item?.message}}</p>\n </div>\n <div class=\"content-duration flex\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </div>\n </div>\n \n \n </a> -->\n </div>\n </ng-container>\n <div class=\"flex flex-row cursor-pointer\">\n <!-- <div class=\"resource-link\" *ngIf=\"!(item?.fromInternet)\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Click to view</a>\n </div> -->\n <div class=\"cursor-pointer ml-10 mr-2 my-1\" (click)=\"copyPath(item, ci)\" *ngIf=\"item?.contentType === 'Resource' && !(item?.fromInternet)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <!-- <div class=\"feefback-section flex flex-row my-1\" *ngIf=\"(item?.feedback)\">\n <div *ngIf=\"item?.feedback !== 'down'\"\n class=\"cursor-pointer feedback-icon mt-1\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" class=\"ml-2 cursor-pointer feedback-icon\">\n <img src=\"/assets/ai-tutor/fill-down.svg\">\n </div>\n </div>\n <div class=\"feefback-section flex flex-row my-1\" *ngIf=\"item?.feedback === ''\">\n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item,i, ci)\"\n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img src=\"/assets/ai-tutor/down.svg\">\n </div>\n </div> -->\n <div class=\"feefback-section flex flex-row my-1\">\n <div (click)=\"sharePositiveContentRating(item,i, ci)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"item?.feedback !== 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback === 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"item?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"item?.feedback !== 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"item?.feedback === 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"item?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div>\n <!-- <div class=\"flex flex-row font-12 mt-1\">\n <div class=\"ml-2 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div> -->\n <!-- <div class=\"feefback-section flex flex-row\">\n \n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item,i, ci)\"\n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon\"><img src=\"/assets/ai-tutor/down.svg\"></div>\n </div> -->\n </div>\n \n </div>\n <div class=\"recommended-question\" [ngClass]=\"{'ml-10': item?.message }\">\n <div class=\"my-5px mr-2 w-92\">\n <ng-container *ngIf=\"item?.contentType !== 'Resource' && !(item?.fromInternet)\">\n <div class=\"btn-default\" (click)=\"redirectToToc(item)\">{{item?.title}}\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n <div class=\"recommended-question-desc\" *ngIf=\"!(item?.fromInternet)\">\n <!-- {{item?.description}} -->\n <markdown [data]=\"item?.description\"></markdown>\n </div>\n </ng-container>\n </div>\n <div class=\"flex flex-row font-12 mb-2\">\n <div class=\"cursor-pointer\" (click)=\"copyPath(item, ci)\" *ngIf=\"item?.contentType !== 'Resource' && !(item?.fromInternet)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <!-- <div class=\"feefback-section flex flex-row\" *ngIf=\"item?.contentType !== 'Resource'\">\n \n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item, i,ci)\" \n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item, i,ci)\" class=\"ml-2 cursor-pointer feedback-icon\"><img src=\"/assets/ai-tutor/down.svg\"></div>\n </div> -->\n <div class=\"feefback-section flex flex-row\" *ngIf=\"item?.contentType !== 'Resource'\">\n <div (click)=\"sharePositiveContentRating(item,i, ci)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"item?.feedback !== 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback === 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"item?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"item?.feedback !== 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"item?.feedback === 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"item?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div> \n </div>\n <!-- <div class=\"flex flex-row font-12 mt-1\" *ngIf=\"item?.contentType !== 'Resource'\">\n <div class=\"ml-2 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div> -->\n </div>\n </ng-container>\n <div class=\" flex flex-row ml-10\" *ngIf=\"chat?.answer && !(chat?.result?.length)\">\n <div (click)=\"sharePositiveContentRatingForAnswer(chat,i)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"chat?.feedback !== 'up' && !chat?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"chat?.feedback === 'up' && !chat?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"chat?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopupForAnswer(chat,i)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"chat?.feedback !== 'down' && !chat?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"chat?.feedback === 'down' && !chat?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"chat?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div> \n <div class=\"flex flex-row font-12 mt-1 mb-1 ai-generated-content-container\" *ngIf=\"chat?.result?.length\">\n <div class=\"ml-5 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div>\n \n </ng-container>\n <ng-container>\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.newMessage === '' && !resultFetch\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/bot-chat-small.svg\"></div>\n <div class=\"loading-bar-icon flex flex-row vertical-middle\">\n <div class=\"mt-2\"><span class=\"blue-color\">Retrieving Results</span></div>\n <div><img alt=\"ai-icon\" src=\"/assets/icons/loading_bar.gif\"></div>\n </div>\n </div>\n \n </ng-container>\n </ng-container>\n \n <ng-container *ngIf=\"chat.type === 'sendMsg'\">\n <div class=\"flex width-1-1 row-end padding-top-l padding-bottom-m\">\n <div class=\"user-seleted-question padding-xs\">\n {{chat?.question}}\n </div>\n <div class=\"user-icon\" *ngIf=\"userIcon\">\n <img alt=\"ai-icon\" src=\"{{userIcon}}\">\n </div>\n <div class=\"circle-s user-icon\" *ngIf=\"!userIcon\" [ngStyle]=\"{'background-color': circleColor }\">\n <div class=\"initials\" i18n-aria-label>\n {{ userInitials }} \n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div> \n </div>\n</div>\n\n<div class=\"footer\" [ngClass]=\"isMobile ? 'ai-popup-mobile-footer':''\">\n <div class=\"border-gradient-rounded\" [style.height.px]=\"containerHeight\">\n <div class=\"flex flex-row ml-5 mr-2 justify-between\">\n\n <div class=\"query-box\">\n <!-- <input class=\"width-500\" type=\"text\" placeholder=\"Ask anything...\" [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery()\"/> -->\n <textarea #autoResizeTextarea class=\"width-500\"\n placeholder=\"Ask Me Anything...\"\n (input)=\"resizeTextarea(autoResizeTextarea, 'fromInput')\"\n [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery(autoResizeTextarea, $event)\"\n rows=\"1\"\n >\n </textarea>\n \n </div>\n\n <div class=\"margin-top-2px\">\n <button type=\"button\" class=\"flex-auto-display send-btn\" (click)=\"submitSearchQuery('',$event)\" [disabled]=\"!searchQueryAItutor\">\n <mat-icon class=\"send-btn-icon\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n</div>\n</div>\n</div>", styles: [".hey{background:linear-gradient(90deg,#32b9dfde,#1b4ca1de);-webkit-background-clip:text;background-clip:text;color:transparent}.ai-generated-content{background:linear-gradient(90deg,#f3962f,#1b4ca1);-webkit-background-clip:text;background-clip:text;color:transparent}.ai-tutor-container .control-container{position:fixed;bottom:0;width:24%;z-index:2;background:#fff;height:40px}.ai-tutor-container-chatbot .control-container{position:fixed;bottom:100px;width:600px;margin:1%;z-index:2}.start-chat{text-align:center;padding-top:37.5%}.query-box{min-height:38px;transition:height .2s;width:100%}.query-box input{border:0;outline:0}.border-gradient-rounded{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:96%;min-height:36px;margin-left:1%;z-index:3}.send-btn{background-color:#fff!important;color:#1b4ca1!important;border:none!important;margin-left:14px}.ai-tutor-container-chatbot{background-image:url(/assets/ai-tutor/background.svg);height:90vh;width:525px}.message-container{z-index:2;position:relative;width:100%}.chatbot-icon-container{position:fixed;bottom:120px;right:0;cursor:pointer;height:90px;align-items:flex-start;display:flex;justify-content:center;width:auto;z-index:999999999}.chatbot-icon{position:absolute;right:30px;animation-delay:1s;transition:1s ease}.chatbot-icon-expanded{right:0}.expand-text{width:110px;display:flex;align-items:center;justify-content:center;background-color:#1b4ca1;color:#fff;font-size:18px;border-top:2px solid #fff;border-bottom:2px solid #fff;vertical-align:middle}.chatbot{width:610px;position:fixed;bottom:20px;right:50px;z-index:9999999999;border-radius:15px;background-color:#fff;box-shadow:0 6px 16px #0000003d;height:calc(100vh - 20%)}.cb-close{cursor:pointer}.cb-header{color:#fff!important;background-color:#1b4ca1;border-top-left-radius:15px;border-top-right-radius:15px;align-items:center;justify-content:space-between;position:absolute;width:100%;top:0}.cb-header .user-info-div{width:88%;justify-content:space-between}.cb-header .lang-select{height:32px;background-color:#fff;border-color:#00000029!important}.cb-header .user-name{padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:74%}.cb-content{background-color:#f0f3f4;overflow:auto}.cb-topics{padding:16px;background-color:#f5f5f5;overflow:auto}.cb-footer{border-bottom-left-radius:15px;border-bottom-right-radius:15px;background-color:#fff}.cb-footer .info{width:33%;padding:5px 0;align-items:center;display:flex;justify-content:center;flex-wrap:wrap;cursor:pointer}.cb-footer .info .info-text{font-size:10px;width:100%;text-align:center}.cb-footer .info .info-icon{height:24px}.br-br{border-bottom-right-radius:15px}.br-bl{border-bottom-left-radius:15px}.language{background-color:#0000000a}.active{background-color:#fbead1;border-top:3px solid rgb(239,149,30)}.active .mat-icon{color:#ef951e!important}.cat-list{margin:0;padding:0;width:100%;display:flex}.cat-item{padding:10px 16px;border-radius:21px;border:1px solid rgba(0,0,0,.16);background-color:#0000000a;opacity:1;color:#000000de;font-family:Lato-Regular,sans-serif;font-size:14px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:center;line-height:20px;width:fit-content;margin-right:12px;height:fit-content;cursor:pointer;white-space:nowrap}.lang-select{width:70px}.lang-select .mat-form-field-flex{background-color:#fff!important}.lang-select .mat-form-field-underline{background-color:transparent!important}.loader{position:absolute;left:50%;top:39%}.default-info .default-icon{width:60px;float:left;display:flex;flex-wrap:wrap}.default-info .default-msg{background-color:#0000000a;border:1px solid rgba(0,0,0,.16);border-radius:0 15px 15px;display:flex;flex-wrap:wrap}.chat-bot-icon{padding-top:8px}.row-start{justify-content:flex-start}.row-start .system-icon{padding-right:3px}.row-start .system-msg{background-color:#d1dbec;border:1px solid rgb(209,219,236);border-radius:0 15px 15px;display:flex;flex-wrap:wrap;min-width:auto;max-width:80%;height:100%;word-break:break-word}.row-start .system-msg ::ng-deep markdown *{margin:0}.recommended-question-desc ::ng-deep markdown *{margin:0;width:100%;word-wrap:break-word}.word-break{word-break:break-all;white-space:unset}.margin-left-5{margin-left:5%}.question-hint{font-weight:700}.recommended-question{display:flex;flex-wrap:wrap;height:fit-content}.recommended-question .rec-item{height:fit-content}.recommended-question .my-5px{margin-top:5px;margin-bottom:5px}.recommended-question .mr-5px{margin-right:5px}.recommended-question .btn-default{background:#d5c7c70a;border:1px solid #1B4CA1;color:#1b4ca1;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.recommended-question .showmore-icon{align-items:flex-start}.recommended-question .btn-active{background:#000;border:1px solid rgba(0,0,0,.16);color:#fff}.btn-show-more,.btn-show-less{background:#1b4ca1;color:#fff;padding:10px 20px;font-size:14px;cursor:pointer;border-radius:40px}.row-end{justify-content:flex-end;height:100%}.row-end .user-seleted-question{background-color:#000;border-radius:15px 0 15px 15px;display:flex;flex-wrap:wrap;color:#fff;float:right;text-align:left;max-width:62%;word-break:break-word}.highlight-title{color:#1b4ca1}.incoming-msg{height:fit-content}.hint-text{color:#1b4ca1}@media only screen and (max-width: 600px){.chatbot{right:6px;bottom:67px}}@media only screen and (max-width: 390px){.chatbot{right:6px;bottom:67px}}.chatbot-wrapper{position:relative}.cb-content-wrapper{position:absolute;width:100%;top:64px;bottom:130px;max-height:100%;overflow:auto;box-sizing:border-box;background-color:#f0f3f4}.cb-footer-wrapper{position:absolute;width:100%;bottom:0}.my-5px{margin-top:5px;margin-bottom:5px}.mr-5px{margin-right:5px}*,:after,:before{box-sizing:border-box}::ng-deep .disable-scroll{overflow-x:hidden!important;overflow:hidden}@media only screen and (max-width: 600px){.chatbot{right:0;bottom:0;width:100%;height:100svh;z-index:999999999}.cb-footer-wrapper{bottom:0}.cb-content-wrapper{bottom:130px}.chatbot-icon-container{bottom:190px}.cb-header{border-top-left-radius:unset;border-top-right-radius:unset}.cb-footer{border-bottom-left-radius:unset;border-bottom-right-radius:unset}.br-br{border-bottom-right-radius:unset}.br-bl{border-bottom-left-radius:unset}}.feefback-section{margin-left:10px}.resource-icon{margin-left:10%}.resource-link{margin-left:40px}.resource-icon img{height:65px;width:115.25px}.font-12{font-size:12px}.vertical-middle{vertical-align:middle}.send-btn-icon{height:22px!important}.width-500{width:262px}.learning-type-container{width:98%}.section-dd{border:1px solid #ccc;padding:12px 16px;width:100%;height:65px;font-size:12px;font-weight:400;position:relative;z-index:2}.system-icon img{height:36px;width:36px}.circle-s{border-radius:50%;width:36px;height:36px;display:flex;justify-content:center;align-items:center;margin-left:4px}.circle-s img{border-radius:50%;width:100%;height:100%}.circle-s .initials{color:#fff;font-size:10px;line-height:12px;font-size:14px;letter-spacing:.2625px}.copied-tooltip{position:absolute;left:20%;transform:translate(-50%);background-color:#000;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;opacity:1;pointer-events:none;transition:opacity .3s ease;z-index:999}.loading-bar-icon img{height:50px;width:50px}.link{color:#1b4ca1;text-decoration:underline}.content-duration{position:relative;background:#f3962f;color:#fff;width:auto;border-radius:8px;text-align:center;bottom:11px;left:0;padding:0 5px;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:12px;white-space:nowrap}.content-duration .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.position-relative{position:relative}.control-container{position:fixed;bottom:10px;z-index:2}.tutor-container{width:100%}.header{top:127px;width:100%;color:#fff;display:flex;align-items:flex-start;justify-content:flex-start}::ng-deep .header .mat-form-field{width:100%}.footer{bottom:0;width:100%;height:50px;color:#fff;display:flex;align-items:flex-end;justify-content:center;z-index:2}.container-none{margin-bottom:10px;padding:20px;height:calc(100vh - 261px);background:url(/assets/ai-tutor/background.svg);background-color:#f0f3f4;overflow-y:auto;overflow-x:hidden;position:relative;background-color:#ffffffe6;background-blend-mode:overlay}.option-content{display:flex;flex-direction:column;line-height:2}.option-content .title{font-weight:600}.option-content .subtitle{font-size:12px;color:gray}:host ::ng-deep .multiline-select .mat-mdc-select-value-text{white-space:pre-wrap!important}:host ::ng-deep .mat-pseudo-checkbox{display:none!important}:host ::ng-deep .mat-pseudo-checkbox-checked{display:none!important}:host ::ng-deep .multiline-select-option{background-color:#fff!important}:host ::ng-deep .player-content .mat-tab-label-active{opacity:1!important}.user-icon{margin-left:5px}.user-icon img{height:36px;width:36px;border-radius:50%}.w-92{width:92%}::ng-deep .copy-icon .material-icons{font-size:18px!important}::ng-deep .copy-icon .mat-icon{vertical-align:middle}.internet-result-query{background:#add8e6;border:1px solid #1B4CA1;color:#000;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.blue-color{color:#1b4ca1;font-size:14px;font-weight:700}.web-button{background-color:#fff;color:#1b4ca1;border-radius:8px;padding:10px;border:1px solid #1B4CA1}.web-search-icon,.web-close-icon{color:#1b4ca1;vertical-align:middle}::ng-deep .mat-mdc-select-panel{background-color:#fff!important}.rotate-180{rotate:180deg}.feedback-icon{height:18px;width:18px}.recommended-question-for-resource{display:flex;flex-wrap:wrap;height:fit-content}.recommended-question-for-resource .rec-item{height:fit-content}.recommended-question-for-resource .my-5px{margin-top:5px;margin-bottom:5px}.recommended-question-for-resource .mr-5px{margin-right:5px}.recommended-question-for-resource .btn-default{background:#d5c7c70a;border:1px solid #F3962F;color:#1b4ca1;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.recommended-question-for-resource .showmore-icon{align-items:flex-start}.recommended-question-for-resource .btn-active{background:#000;border:1px solid rgba(0,0,0,.16);color:#fff}.h-w-34{height:34px;width:34px}.border-gradient-rounded textarea{width:100%;border:none;resize:none;overflow:hidden;font-size:14px;font-family:Lato;box-sizing:border-box;min-height:32px;padding-top:5px}.border-gradient-rounded textarea:focus{outline:none;border:1px solid transparent}.overflow-y-hidden{overflow-y:hidden}.blue-loader-animation{width:18px;height:18px;animation:spin 2s linear infinite;transform-origin:center center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.margin-top-2px{margin-top:2px}.recommended-question-desc ::ng-deep markdown pre{all:unset;display:revert;box-sizing:border-box;word-wrap:break-word;width:100%}.ai-tutor-popup{position:fixed;top:50px;z-index:999;background-color:#fff;width:100%}.ai-tutor-popup-minimize{position:fixed;bottom:65px;z-index:999;background-color:#fff;width:100%;border-top:3px solid #eff3f9}.ai-popup-mobile-footer{height:25px;bottom:70px;position:fixed}.ai-tutor-mobile-header{justify-content:space-between;padding:0 10px;border-bottom:1px solid #ccc;height:35px;margin-top:15px}.red-circle{background:red;opacity:1;color:#fff;padding:2px 10px;height:20px;width:50px;border-radius:2px;vertical-align:middle;display:flex;justify-content:center;align-items:center;margin-left:8px;margin-top:-10px}\n"] }]
|
|
12119
|
+
args: [{ selector: 'ws-widget-ai-tutor', template: "<!-- <div class=\"tutor-container\">\n<div class=\"learning-type-container\">\n <mat-form-field appearance=\"none\">\n <select matNativeControl required class=\"section-dd\" >\n <option value=\"\">Select learning type here </option>\n <option value=\"\">None</option>\n <option value=\"\">Socratic</option>\n <option value=\"\">Story Telling</option>\n <option value=\"\">Summarisation</option>\n </select>\n </mat-form-field>\n</div>\n<div [ngClass]=\"from === 'chatbot' ? 'ai-tutor-container-chatbot':'ai-tutor-container'\" #scrollMe>\n <div class=\"message-container\" #scrollMe>\n <div class=\"start-chat\" *ngIf=\"aiTutorResultArr?.length === 0\">\n <h2 class=\"hey\">Hey<span *ngIf=\"userInfo?.firstName\">, {{userInfo?.firstName}}</span> </h2>\n <p>Welcome to Ai Tutor,\u2028Get instant explanations, step-by-step learning guidance, and customised learning tailored just for you.</p>\n </div>\n <ng-container *ngFor=\"let chat of aiTutorResultArr; let i =index\">\n <ng-container *ngIf=\"chat.type === 'incoming'\">\n <ng-container *ngIf=\"chat?.answer\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/chatbot-ai-new.svg\"></div>\n \n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\" [innerHTML]=\"chat.answer\">\n </div>\n <div class=\"system-msg padding-xs\">\n <div *ngIf=\"chat?.wordsCount > 30\" [innerHTML]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></div>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"!chat?.showLess\" (click)=\"toggleShow(i, 'less')\">Show Less</a>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"chat?.showLess\" (click)=\"toggleShow(i, 'more')\">Show More</a>\n </div>\n \n\n </div>\n <ng-container *ngFor=\"let item of chat?.result; let ci=index\">\n <div class=\"system-msg-mimetype flex flex-col\" *ngIf=\"item?.contentType === 'Resource'\">\n <ng-container *ngIf=\"item?.mimeType === 'application/pdf'\">\n <div class=\"resource-icon\"><a [href]=\"item?.resourceLink\" target=\"_blank\"><img src=\"/assets/icons/ai-pdf-icon.jpg\"></a></div>\n <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Open Resource Link</a>\n </div>\n </ng-container>\n <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n \n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img src=\"/assets/icons/ai-video-icon.jpg\">\n\n </div>\n <div class=\"content-duration\" *ngIf=\"item?.contentStart || item?.contentEnd\">\n <span *ngIf=\"item?.contentStart\">{{item?.contentStart}}</span>\n <span *ngIf=\"item?.contentEnd\">:{{item?.contentEnd}}</span>\n </div>\n </div>\n <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Open Resource Link</a>\n </div>\n </ng-container>\n </div>\n <div class=\"recommended-question my-5px\" [ngClass]=\"{'margin-left-5': item?.message }\">\n <div class=\"my-5px mr-2\">\n <ng-container *ngIf=\"item?.contentType !== 'Resource'\">\n <div class=\"btn-default\" (click)=\"redirectToToc(item)\">{{item?.title}}\n <mat-icon class=\"vertical-middle\">navigate_next</mat-icon>\n </div>\n <div>\n {{item?.description | slice : 0:50}}\n </div>\n </ng-container>\n </div>\n <div class=\"flex flex-row font-12\">\n <div class=\"cursor-pointer\" (click)=\"copyPath(item, ci)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <div class=\"ml-2 mr-2\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are AI generated results</div>\n </div>\n </div>\n </ng-container>\n \n \n </ng-container>\n <ng-container *ngIf=\"!chat?.answer\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/chatbot-ai-new.svg\"></div>\n <div class=\"loading-bar-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/loading_bar.gif\"></div>\n </div>\n \n </ng-container>\n </ng-container>\n \n <ng-container *ngIf=\"chat.type === 'sendMsg'\">\n <div class=\"flex width-1-1 row-end padding-top-l padding-bottom-m\">\n <div class=\"user-seleted-question padding-xs\">\n {{chat?.question}}\n </div>\n <div class=\"user-icon\" *ngIf=\"userIcon\">\n <img alt=\"ai-icon\" src=\"{{userIcon}}\">\n </div>\n <div class=\"circle-s user-icon\" *ngIf=\"!userIcon\" [ngStyle]=\"{'background-color': circleColor }\">\n <div class=\"initials\" i18n-aria-label>\n {{ userInitials }} \n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div> \n</div>\n<div class=\"control-container\">\n <div class=\"border-gradient-rounded\">\n <div class=\"flex flex-row mx-5 justify-between\">\n\n <div class=\"query-box\">\n <input class=\"width-500\" type=\"text\" placeholder=\"Ask anything...\" [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery()\"/>\n \n </div>\n\n <div>\n <button type=\"button\" class=\"flex-auto-display send-btn\" (click)=\"submitSearchQuery()\" [disabled]=\"!searchQueryAItutor\">\n <mat-icon class=\"send-btn-icon\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n</div>\n</div> -->\n\n<div class=\"overflow-y-hidden\" [ngClass]=\"(isMobile && !maximize ? 'ai-tutor-popup-minimize' : (isMobile ? 'ai-tutor-popup': ''))\">\n<div *ngIf=\"isMobile\">\n <div class=\"flex flex-row ai-tutor-mobile-header\">\n <div class=\"flex flex-row\">\n <div class=\"flex\">\n <span class=\"font-bold\">AI Tutor</span>\n </div> \n <div class=\"red-circle ml-5\">\n New\n </div>\n </div>\n <div class=\"flex flex-row justify-end\">\n <div *ngIf=\"maximize\" (click)=\"minimizeAITutor()\">\n <mat-icon>minimize</mat-icon>\n </div>\n <div *ngIf=\"!maximize\" (click)=\"maximizeAITutor()\">\n <mat-icon>maximize</mat-icon>\n </div>\n <div (click)=\"closeAITutorPopup()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n \n \n </div>\n</div>\n<div [hidden]=\"!maximize\">\n<div class=\"header\">\n <!-- <mat-form-field appearance=\"none\" style=\"width:100%\">\n <select matNativeControl required class=\"section-dd\" >\n <option value=\"\">You can also choose a learning style that suits you best from here.</option>\n <option value=\"\">None</option>\n <option value=\"\">Socratic</option>\n <option value=\"\">Story Telling</option>\n <option value=\"\">Summarisation</option>\n </select>\n </mat-form-field> -->\n <mat-form-field class=\"multiline-select\" appearance=\"fill\" style=\"width: 100%; height: 80px;\" floatLabel=\"never\">\n <mat-select class=\"multiline-select-box\" required [(value)]=\"selectedLearningStyle\" (selectionChange)=\"getLearningStyle()\">\n <mat-select-trigger class=\"multiline-select-box-trigger\">\n <div class=\"option-content\">\n <div class=\"title\">{{ selectedLearningStyle?.title }}</div>\n <div class=\"subtitle\">{{ selectedLearningStyle?.subtitle }}</div>\n </div>\n </mat-select-trigger>\n <mat-option class=\"multiline-select-option\" value=\"\" *ngFor=\"let item of learningStyle\" [value]=\"item\">\n <div class=\"option-content\">\n <div class=\"title\">{{item?.title}}</div>\n <div class=\"subtitle\">{{item?.subtitle}}</div>\n </div>\n </mat-option>\n </mat-select>\n </mat-form-field>\n \n</div>\n\n<div class=\"container-none\" id=\"container-none\">\n <div [ngClass]=\"from === 'chatbot' ? 'ai-tutor-container-chatbot':'ai-tutor-container'\">\n <div class=\"message-container\" #scrollMe>\n <div class=\"start-chat\" *ngIf=\"aiTutorResultArr?.length === 0\">\n <h2 class=\"hey\">Hey<span *ngIf=\"userInfo?.firstName\">, {{userInfo?.firstName}}</span> </h2>\n <p>Welcome to AI Tutor,\u2028Get instant explanations, step-by-step learning guidance, and customised learning tailored just for you.</p>\n </div>\n <ng-container *ngFor=\"let chat of aiTutorResultArr; let i =index\">\n <ng-container *ngIf=\"chat.type === 'incoming'\">\n <ng-container *ngIf=\"chat?.answer || chat?.showFromInternet\">\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.answer\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/bot-chat-small.svg\"></div>\n \n <!-- <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\" [innerHTML]=\"chat.answer\">\n </div> -->\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.showFromInternet\">\n <div class=\"system-msg padding-xs mx-10\">\n I couldn\u2019t find any relevant results for your query. Would you like me to search outside the iGOT platform for more information?\n </div>\n \n </div>\n <ng-container *ngIf=\"chat?.answer\">\n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount <= 30\">\n <markdown [data]=\"chat?.answer\"></markdown>\n </div>\n \n <div class=\"system-msg padding-xs\" *ngIf=\"chat?.wordsCount > 30\" >\n <!-- <div [innerHTML]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></div> -->\n <markdown [data]=\"chat?.answer\"></markdown>\n <!-- <markdown [data]=\"chat?.showLess ? chat.shortAnswer : chat.answer\"></markdown> -->\n <!-- <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"!chat?.showLess\" (click)=\"toggleShow(i, 'less')\">Show Less</a>\n <a class=\"link\" href=\"javascript:void(0)\" *ngIf=\"chat?.showLess\" (click)=\"toggleShow(i, 'more')\">Show More</a> -->\n </div>\n </ng-container>\n \n \n </div>\n \n <div *ngIf=\"chat?.showFromInternet\">\n <div class=\"flex row my-2 justify-start mx-10 my-5\">\n <div (click)=\"callFromInternet(chat, i)\">\n <button type=\"button\" class=\"web-button px-4 cursor-pointer\">\n <mat-icon class=\"web-search-icon\">search </mat-icon><span class=\"blue-color\">Search the web</span>\n </button>\n </div>\n <div (click)=\"rejectFromInternet(i)\" class=\"mx-2\">\n <button type=\"button\" class=\"web-button py-2 px-4 cursor-pointer\">\n <mat-icon class=\"web-close-icon\">close</mat-icon><span class=\"blue-color\">No</span>\n </button>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let item of chat?.result; let ci=index\">\n <div class=\"system-msg-mimetype flex flex-col\" *ngIf=\"item?.contentType === 'Resource'\">\n <ng-container *ngIf=\"item?.mimeType === 'application/pdf'\">\n <!-- <div class=\"resource-icon\"><a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <img src=\"/assets/icons/ai-pdf-icon.jpg\"></a>\n </div> -->\n <div class=\"recommended-question-for-resource mx-10\" (click)=\"redirectToResource(item);raiseTelemetryForResource(item)\">\n <!-- <div class=\"resource-icon\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <img src=\"/assets/ai-tutor/pdf.svg\">\n </a>\n <p>{{item?.message}}</p>\n </div> -->\n <div class=\"btn-default mb-2\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">\n <img class=\"vertical-middle h-w-34\" src=\"/assets/ai-tutor/pdf.svg\">\n </a>\n {{item?.title}}\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n </div>\n <!-- <div class=\"resource-link\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Click to view</a>\n </div> -->\n </ng-container>\n <!-- <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n \n <div class=\"resource-icon\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img src=\"/assets/icons/ai-video-icon.jpg\">\n \n </div>\n <div class=\"content-duration flex\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </div>\n </div>\n \n \n </a>\n </div>\n </ng-container> -->\n <ng-container *ngIf=\"item?.mimeType === 'video/mp4'\">\n <div class=\"recommended-question-for-resource mx-10\" (click)=\"redirectToResource(item);raiseTelemetryForResource(item)\">\n \n <div class=\"btn-default mb-2\">\n <div class=\"flex flex-row\">\n <div>\n <a [href]=\"item?.resourceLink\" target=\"_blank\">\n <img class=\"vertical-middle h-w-34\" src=\"/assets/ai-tutor/video.svg\">\n </a>\n </div>\n <div class=\"ml-1\">\n <span>{{item?.title}} </span>\n </div>\n <div>\n <span class=\"content-duration flex ml-1\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </span> \n </div>\n <div>\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n </div>\n </div>\n <!-- <a [href]=\"item?.resourceLink\" target=\"_blank\" (click)=\"raiseTelemetryForResource(item)\">\n <div class=\"position-relative\">\n <div class=\"position-relative\">\n <img class=\"h-w-34\" src=\"/assets/ai-tutor/video.svg\">\n <p>{{item?.message}}</p>\n </div>\n <div class=\"content-duration flex\" *ngIf=\"item?.contentStart > -1 && item?.contentEnd > -1 && !(item?.fromInternet)\">\n <span><mat-icon>access_time</mat-icon> </span>\n <span *ngIf=\"item?.contentStart > -1\">\n <span *ngIf=\"item?.contentStart > 0\">{{item?.contentStart | pipeDurationTransform: 'hms'}}</span>\n <span *ngIf=\"item.contentStart === '0'\">0</span>\n </span>\n <span *ngIf=\"item?.contentEnd > -1\"> - {{item?.contentEnd | pipeDurationTransform: 'hms'}}</span>\n </div>\n </div>\n \n \n </a> -->\n </div>\n </ng-container>\n <div class=\"flex flex-row cursor-pointer\">\n <!-- <div class=\"resource-link\" *ngIf=\"!(item?.fromInternet)\">\n <a [href]=\"item?.resourceLink\" target=\"_blank\">Click to view</a>\n </div> -->\n <div class=\"cursor-pointer ml-10 mr-2 my-1\" (click)=\"copyPath(item, ci)\" *ngIf=\"item?.contentType === 'Resource' && !(item?.fromInternet)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <!-- <div class=\"feefback-section flex flex-row my-1\" *ngIf=\"(item?.feedback)\">\n <div *ngIf=\"item?.feedback !== 'down'\"\n class=\"cursor-pointer feedback-icon mt-1\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" class=\"ml-2 cursor-pointer feedback-icon\">\n <img src=\"/assets/ai-tutor/fill-down.svg\">\n </div>\n </div>\n <div class=\"feefback-section flex flex-row my-1\" *ngIf=\"item?.feedback === ''\">\n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item,i, ci)\"\n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img src=\"/assets/ai-tutor/down.svg\">\n </div>\n </div> -->\n <div class=\"feefback-section flex flex-row my-1\">\n <div (click)=\"sharePositiveContentRating(item,i, ci)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"item?.feedback !== 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback === 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"item?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"item?.feedback !== 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"item?.feedback === 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"item?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div>\n <!-- <div class=\"flex flex-row font-12 mt-1\">\n <div class=\"ml-2 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div> -->\n <!-- <div class=\"feefback-section flex flex-row\">\n \n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item,i, ci)\"\n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon\"><img src=\"/assets/ai-tutor/down.svg\"></div>\n </div> -->\n </div>\n \n </div>\n <div class=\"recommended-question\" [ngClass]=\"{'ml-10': item?.message }\">\n <div class=\"my-5px mr-2 w-92\">\n <ng-container *ngIf=\"item?.contentType !== 'Resource' && !(item?.fromInternet)\">\n <div class=\"btn-default\" (click)=\"redirectToToc(item)\">{{item?.title}}\n <mat-icon class=\"vertical-middle\" *ngIf=\"!(item?.fromInternet)\">navigate_next</mat-icon>\n </div>\n <div class=\"recommended-question-desc\" *ngIf=\"!(item?.fromInternet)\">\n <!-- {{item?.description}} -->\n <markdown [data]=\"item?.description\"></markdown>\n </div>\n </ng-container>\n </div>\n <div class=\"flex flex-row font-12 mb-2\">\n <div class=\"cursor-pointer\" (click)=\"copyPath(item, ci)\" *ngIf=\"item?.contentType !== 'Resource' && !(item?.fromInternet)\">\n <mat-icon matTooltip=\"Copy\" aria-label=\"Copy\">content_copy</mat-icon>\n <span *ngIf=\"copiedIndex === ci\" class=\"copied-tooltip\">Link Copied!</span>\n </div>\n <!-- <div class=\"feefback-section flex flex-row\" *ngIf=\"item?.contentType !== 'Resource'\">\n \n <div *ngIf=\"item?.feedback !== 'down'\" (click)=\"sharePositiveContentRating(item, i,ci)\" \n class=\"cursor-pointer feedback-icon\" [ngClass]=\"item?.feedback !== 'up' ? 'rotate-180' : ''\">\n <img *ngIf=\"item?.feedback !== 'up'\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback == 'up'\" src=\"/assets/ai-tutor/up.svg\">\n </div>\n <div *ngIf=\"item?.feedback !== 'up'\" (click)=\"openAIFeedbackPopup(item, i,ci)\" class=\"ml-2 cursor-pointer feedback-icon\"><img src=\"/assets/ai-tutor/down.svg\"></div>\n </div> -->\n <div class=\"feefback-section flex flex-row\" *ngIf=\"item?.contentType !== 'Resource'\">\n <div (click)=\"sharePositiveContentRating(item,i, ci)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"item?.feedback !== 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"item?.feedback === 'up' && !item?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"item?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopup(item,i, ci)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"item?.feedback !== 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"item?.feedback === 'down' && !item?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"item?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div> \n </div>\n <!-- <div class=\"flex flex-row font-12 mt-1\" *ngIf=\"item?.contentType !== 'Resource'\">\n <div class=\"ml-2 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div> -->\n </div>\n </ng-container>\n <div class=\" flex flex-row ml-10\" *ngIf=\"chat?.answer && !(chat?.result?.length)\">\n <div (click)=\"sharePositiveContentRatingForAnswer(chat,i)\" class=\"cursor-pointer feedback-icon mt-1\" \n >\n <img [ngClass]=\"'rotate-180'\" *ngIf=\"chat?.feedback !== 'up' && !chat?.showLoaderForUp\" src=\"/assets/ai-tutor/down.svg\">\n <img *ngIf=\"chat?.feedback === 'up' && !chat?.showLoaderForUp\" src=\"/assets/ai-tutor/up.svg\">\n <img *ngIf=\"chat?.showLoaderForUp\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n <div (click)=\"openAIFeedbackPopupForAnswer(chat,i)\" class=\"ml-2 cursor-pointer feedback-icon mt-1\">\n <img *ngIf=\"chat?.feedback !== 'down' && !chat?.showLoaderForDown\" src=\"/assets/ai-tutor/down.svg\"> \n <img *ngIf=\"chat?.feedback === 'down' && !chat?.showLoaderForDown\" src=\"/assets/ai-tutor/fill-down.svg\"> \n <img *ngIf=\"chat?.showLoaderForDown\" class=\"blue-loader-animation\" height=\"18\" width=\"18\" src=\"/assets/ai-tutor/blue-loader.png\">\n </div>\n </div> \n <div class=\"flex flex-row font-12 mt-1 mb-1 ai-generated-content-container\" *ngIf=\"chat?.result?.length\">\n <div class=\"ml-5 mr-2 cu\"><img alt=\"ai-icon\" src=\"/assets/ai-tutor/ai-icon.svg\"></div>\n <div class=\"ai-generated-content ml-2\">These are <span *ngIf=\"item?.fromInternet\">Web</span><span *ngIf=\"!(item?.fromInternet)\">AI</span> generated results</div>\n </div>\n \n </ng-container>\n <ng-container>\n <div class=\"flex row-start incoming-msg margin-bottom-s\" *ngIf=\"chat?.newMessage === '' && !resultFetch\">\n <div class=\"system-icon\"><img alt=\"ai-icon\" src=\"/assets/icons/bot-chat-small.svg\"></div>\n <div class=\"loading-bar-icon flex flex-row vertical-middle\">\n <div class=\"mt-2\"><span class=\"blue-color\">Retrieving Results</span></div>\n <div><img alt=\"ai-icon\" src=\"/assets/icons/loading_bar.gif\"></div>\n </div>\n </div>\n \n </ng-container>\n </ng-container>\n \n <ng-container *ngIf=\"chat.type === 'sendMsg'\">\n <div class=\"flex width-1-1 row-end padding-top-l padding-bottom-m\">\n <div class=\"user-seleted-question padding-xs\">\n {{chat?.question}}\n </div>\n <div class=\"user-icon\" *ngIf=\"userIcon\">\n <img alt=\"ai-icon\" src=\"{{userIcon}}\">\n </div>\n <div class=\"circle-s user-icon\" *ngIf=\"!userIcon\" [ngStyle]=\"{'background-color': circleColor }\">\n <div class=\"initials\" i18n-aria-label>\n {{ userInitials }} \n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div> \n </div>\n</div>\n\n<div class=\"footer\" [ngClass]=\"isMobile ? 'ai-popup-mobile-footer':''\">\n <div class=\"border-gradient-rounded\" [style.height.px]=\"containerHeight\">\n <div class=\"flex flex-row ml-5 mr-2 justify-between\">\n\n <div class=\"query-box\">\n <!-- <input class=\"width-500\" type=\"text\" placeholder=\"Ask anything...\" [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery()\"/> -->\n <textarea #autoResizeTextarea class=\"width-500\"\n placeholder=\"Ask Me Anything...\"\n (input)=\"resizeTextarea(autoResizeTextarea, 'fromInput')\"\n [(ngModel)]=\"searchQueryAItutor\" (keydown.enter)=\"submitSearchQuery(autoResizeTextarea, $event)\"\n rows=\"1\"\n >\n </textarea>\n \n </div>\n\n <div class=\"margin-top-2px\">\n <button type=\"button\" class=\"flex-auto-display send-btn\" (click)=\"submitSearchQuery(autoResizeTextarea, $event)\" [disabled]=\"!searchQueryAItutor\">\n <mat-icon class=\"send-btn-icon\">send</mat-icon>\n </button>\n </div>\n </div>\n </div>\n</div>\n</div>\n</div>", styles: [".hey{background:linear-gradient(90deg,#32b9dfde,#1b4ca1de);-webkit-background-clip:text;background-clip:text;color:transparent}.ai-generated-content{background:linear-gradient(90deg,#f3962f,#1b4ca1);-webkit-background-clip:text;background-clip:text;color:transparent}.ai-tutor-container .control-container{position:fixed;bottom:0;width:24%;z-index:2;background:#fff;height:40px}.ai-tutor-container-chatbot .control-container{position:fixed;bottom:100px;width:600px;margin:1%;z-index:2}.start-chat{text-align:center;padding-top:37.5%}.query-box{min-height:38px;transition:height .2s;width:100%}.query-box input{border:0;outline:0}.border-gradient-rounded{border:2px solid transparent;border-radius:20px;background:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#efa34f,#4881e4);background-clip:padding-box,border-box;background-origin:padding-box,border-box;width:96%;min-height:36px;margin-left:1%;z-index:3}.send-btn{background-color:#fff!important;color:#1b4ca1!important;border:none!important;margin-left:14px}.ai-tutor-container-chatbot{background-image:url(/assets/ai-tutor/background.svg);height:90vh;width:525px}.message-container{z-index:2;position:relative;width:100%}.chatbot-icon-container{position:fixed;bottom:120px;right:0;cursor:pointer;height:90px;align-items:flex-start;display:flex;justify-content:center;width:auto;z-index:999999999}.chatbot-icon{position:absolute;right:30px;animation-delay:1s;transition:1s ease}.chatbot-icon-expanded{right:0}.expand-text{width:110px;display:flex;align-items:center;justify-content:center;background-color:#1b4ca1;color:#fff;font-size:18px;border-top:2px solid #fff;border-bottom:2px solid #fff;vertical-align:middle}.chatbot{width:610px;position:fixed;bottom:20px;right:50px;z-index:9999999999;border-radius:15px;background-color:#fff;box-shadow:0 6px 16px #0000003d;height:calc(100vh - 20%)}.cb-close{cursor:pointer}.cb-header{color:#fff!important;background-color:#1b4ca1;border-top-left-radius:15px;border-top-right-radius:15px;align-items:center;justify-content:space-between;position:absolute;width:100%;top:0}.cb-header .user-info-div{width:88%;justify-content:space-between}.cb-header .lang-select{height:32px;background-color:#fff;border-color:#00000029!important}.cb-header .user-name{padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:74%}.cb-content{background-color:#f0f3f4;overflow:auto}.cb-topics{padding:16px;background-color:#f5f5f5;overflow:auto}.cb-footer{border-bottom-left-radius:15px;border-bottom-right-radius:15px;background-color:#fff}.cb-footer .info{width:33%;padding:5px 0;align-items:center;display:flex;justify-content:center;flex-wrap:wrap;cursor:pointer}.cb-footer .info .info-text{font-size:10px;width:100%;text-align:center}.cb-footer .info .info-icon{height:24px}.br-br{border-bottom-right-radius:15px}.br-bl{border-bottom-left-radius:15px}.language{background-color:#0000000a}.active{background-color:#fbead1;border-top:3px solid rgb(239,149,30)}.active .mat-icon{color:#ef951e!important}.cat-list{margin:0;padding:0;width:100%;display:flex}.cat-item{padding:10px 16px;border-radius:21px;border:1px solid rgba(0,0,0,.16);background-color:#0000000a;opacity:1;color:#000000de;font-family:Lato-Regular,sans-serif;font-size:14px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:center;line-height:20px;width:fit-content;margin-right:12px;height:fit-content;cursor:pointer;white-space:nowrap}.lang-select{width:70px}.lang-select .mat-form-field-flex{background-color:#fff!important}.lang-select .mat-form-field-underline{background-color:transparent!important}.loader{position:absolute;left:50%;top:39%}.default-info .default-icon{width:60px;float:left;display:flex;flex-wrap:wrap}.default-info .default-msg{background-color:#0000000a;border:1px solid rgba(0,0,0,.16);border-radius:0 15px 15px;display:flex;flex-wrap:wrap}.chat-bot-icon{padding-top:8px}.row-start{justify-content:flex-start}.row-start .system-icon{padding-right:3px}.row-start .system-msg{background-color:#d1dbec;border:1px solid rgb(209,219,236);border-radius:0 15px 15px;display:flex;flex-wrap:wrap;min-width:auto;max-width:80%;height:100%;word-break:break-word}.row-start .system-msg ::ng-deep markdown *{margin:0}.recommended-question-desc ::ng-deep markdown *{margin:0;width:100%;word-wrap:break-word}.word-break{word-break:break-all;white-space:unset}.margin-left-5{margin-left:5%}.question-hint{font-weight:700}.recommended-question{display:flex;flex-wrap:wrap;height:fit-content}.recommended-question .rec-item{height:fit-content}.recommended-question .my-5px{margin-top:5px;margin-bottom:5px}.recommended-question .mr-5px{margin-right:5px}.recommended-question .btn-default{background:#d5c7c70a;border:1px solid #1B4CA1;color:#1b4ca1;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.recommended-question .showmore-icon{align-items:flex-start}.recommended-question .btn-active{background:#000;border:1px solid rgba(0,0,0,.16);color:#fff}.btn-show-more,.btn-show-less{background:#1b4ca1;color:#fff;padding:10px 20px;font-size:14px;cursor:pointer;border-radius:40px}.row-end{justify-content:flex-end;height:100%}.row-end .user-seleted-question{background-color:#000;border-radius:15px 0 15px 15px;display:flex;flex-wrap:wrap;color:#fff;float:right;text-align:left;max-width:62%;word-break:break-word}.highlight-title{color:#1b4ca1}.incoming-msg{height:fit-content}.hint-text{color:#1b4ca1}@media only screen and (max-width: 600px){.chatbot{right:6px;bottom:67px}}@media only screen and (max-width: 390px){.chatbot{right:6px;bottom:67px}}.chatbot-wrapper{position:relative}.cb-content-wrapper{position:absolute;width:100%;top:64px;bottom:130px;max-height:100%;overflow:auto;box-sizing:border-box;background-color:#f0f3f4}.cb-footer-wrapper{position:absolute;width:100%;bottom:0}.my-5px{margin-top:5px;margin-bottom:5px}.mr-5px{margin-right:5px}*,:after,:before{box-sizing:border-box}::ng-deep .disable-scroll{overflow-x:hidden!important;overflow:hidden}@media only screen and (max-width: 600px){.chatbot{right:0;bottom:0;width:100%;height:100svh;z-index:999999999}.cb-footer-wrapper{bottom:0}.cb-content-wrapper{bottom:130px}.chatbot-icon-container{bottom:190px}.cb-header{border-top-left-radius:unset;border-top-right-radius:unset}.cb-footer{border-bottom-left-radius:unset;border-bottom-right-radius:unset}.br-br{border-bottom-right-radius:unset}.br-bl{border-bottom-left-radius:unset}}.feefback-section{margin-left:10px}.resource-icon{margin-left:10%}.resource-link{margin-left:40px}.resource-icon img{height:65px;width:115.25px}.font-12{font-size:12px}.vertical-middle{vertical-align:middle}.send-btn-icon{height:22px!important}.width-500{width:262px}.learning-type-container{width:98%}.section-dd{border:1px solid #ccc;padding:12px 16px;width:100%;height:65px;font-size:12px;font-weight:400;position:relative;z-index:2}.system-icon img{height:36px;width:36px}.circle-s{border-radius:50%;width:36px;height:36px;display:flex;justify-content:center;align-items:center;margin-left:4px}.circle-s img{border-radius:50%;width:100%;height:100%}.circle-s .initials{color:#fff;font-size:10px;line-height:12px;font-size:14px;letter-spacing:.2625px}.copied-tooltip{position:absolute;left:20%;transform:translate(-50%);background-color:#000;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;opacity:1;pointer-events:none;transition:opacity .3s ease;z-index:999}.loading-bar-icon img{height:50px;width:50px}.link{color:#1b4ca1;text-decoration:underline}.content-duration{position:relative;background:#f3962f;color:#fff;width:auto;border-radius:8px;text-align:center;bottom:11px;left:0;padding:0 5px;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:12px;white-space:nowrap}.content-duration .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.position-relative{position:relative}.control-container{position:fixed;bottom:10px;z-index:2}.tutor-container{width:100%}.header{top:127px;width:100%;color:#fff;display:flex;align-items:flex-start;justify-content:flex-start}::ng-deep .header .mat-form-field{width:100%}.footer{bottom:0;width:100%;height:50px;color:#fff;display:flex;align-items:flex-end;justify-content:center;z-index:2}.container-none{margin-bottom:10px;padding:20px;height:calc(100vh - 261px);background:url(/assets/ai-tutor/background.svg);background-color:#f0f3f4;overflow-y:auto;overflow-x:hidden;position:relative;background-color:#ffffffe6;background-blend-mode:overlay}.option-content{display:flex;flex-direction:column;line-height:2}.option-content .title{font-weight:600}.option-content .subtitle{font-size:12px;color:gray}:host ::ng-deep .multiline-select .mat-mdc-select-value-text{white-space:pre-wrap!important}:host ::ng-deep .mat-pseudo-checkbox{display:none!important}:host ::ng-deep .mat-pseudo-checkbox-checked{display:none!important}:host ::ng-deep .multiline-select-option{background-color:#fff!important}:host ::ng-deep .player-content .mat-tab-label-active{opacity:1!important}.user-icon{margin-left:5px}.user-icon img{height:36px;width:36px;border-radius:50%}.w-92{width:92%}::ng-deep .copy-icon .material-icons{font-size:18px!important}::ng-deep .copy-icon .mat-icon{vertical-align:middle}.internet-result-query{background:#add8e6;border:1px solid #1B4CA1;color:#000;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.blue-color{color:#1b4ca1;font-size:14px;font-weight:700}.web-button{background-color:#fff;color:#1b4ca1;border-radius:8px;padding:10px;border:1px solid #1B4CA1}.web-search-icon,.web-close-icon{color:#1b4ca1;vertical-align:middle}::ng-deep .mat-mdc-select-panel{background-color:#fff!important}.rotate-180{rotate:180deg}.feedback-icon{height:18px;width:18px}.recommended-question-for-resource{display:flex;flex-wrap:wrap;height:fit-content}.recommended-question-for-resource .rec-item{height:fit-content}.recommended-question-for-resource .my-5px{margin-top:5px;margin-bottom:5px}.recommended-question-for-resource .mr-5px{margin-right:5px}.recommended-question-for-resource .btn-default{background:#d5c7c70a;border:1px solid #F3962F;color:#1b4ca1;padding:10px;font-size:14px;font-weight:700;cursor:pointer;border-radius:5px}.recommended-question-for-resource .showmore-icon{align-items:flex-start}.recommended-question-for-resource .btn-active{background:#000;border:1px solid rgba(0,0,0,.16);color:#fff}.h-w-34{height:34px;width:34px}.border-gradient-rounded textarea{width:100%;border:none;resize:none;overflow:hidden;font-size:14px;font-family:Lato;box-sizing:border-box;min-height:32px;padding-top:5px}.border-gradient-rounded textarea:focus{outline:none;border:1px solid transparent}.overflow-y-hidden{overflow-y:hidden}.blue-loader-animation{width:18px;height:18px;animation:spin 2s linear infinite;transform-origin:center center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.margin-top-2px{margin-top:2px}.recommended-question-desc ::ng-deep markdown pre{all:unset;display:revert;box-sizing:border-box;word-wrap:break-word;width:100%}.ai-tutor-popup{position:fixed;top:50px;z-index:999;background-color:#fff;width:100%}.ai-tutor-popup-minimize{position:fixed;bottom:65px;z-index:999;background-color:#fff;width:100%;border-top:3px solid #eff3f9}.ai-popup-mobile-footer{height:25px;bottom:70px;position:fixed}.ai-tutor-mobile-header{justify-content:space-between;padding:0 10px;border-bottom:1px solid #ccc;height:35px;margin-top:15px}.red-circle{background:red;opacity:1;color:#fff;padding:2px 10px;height:20px;width:50px;border-radius:2px;vertical-align:middle;display:flex;justify-content:center;align-items:center;margin-left:8px;margin-top:-10px}\n"] }]
|
|
12120
12120
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2$1.ConfigurationsService }, { type: i2$1.EventService }, { type: i0.Renderer2 }, { type: RootService }, { type: WebSocketService }, { type: i1$3.MatLegacyDialog }, { type: i6$2.MatSnackBar }, { type: i2$1.UtilityService }, { type: undefined, decorators: [{
|
|
12121
12121
|
type: Inject,
|
|
12122
12122
|
args: ["environment"]
|
|
@@ -25910,6 +25910,7 @@ class AppTocCiosHomeComponent {
|
|
|
25910
25910
|
this.isMobile = false;
|
|
25911
25911
|
this.enableShare = false;
|
|
25912
25912
|
this.currentLang = 'en';
|
|
25913
|
+
this.providerTips = [];
|
|
25913
25914
|
this.route.data.subscribe((data) => {
|
|
25914
25915
|
this.enrollValidationLoading = false;
|
|
25915
25916
|
if (data && data.extContent && data.extContent.data && data.extContent.data.content) {
|
|
@@ -25917,6 +25918,7 @@ class AppTocCiosHomeComponent {
|
|
|
25917
25918
|
this.extContentReadData['certificateObj'] = {
|
|
25918
25919
|
data: {},
|
|
25919
25920
|
};
|
|
25921
|
+
this.providerTips = _.get(this.extContentReadData, 'contentPartner.providerTips', []);
|
|
25920
25922
|
this.skeletonLoader = false;
|
|
25921
25923
|
}
|
|
25922
25924
|
else {
|
|
@@ -25980,11 +25982,13 @@ class AppTocCiosHomeComponent {
|
|
|
25980
25982
|
this.discussWidgetData.commentsList.repliesSection.newCommentReply.commentTreeData.entityId = this.extContentReadData.contentId;
|
|
25981
25983
|
}
|
|
25982
25984
|
}
|
|
25983
|
-
this.widgetData =
|
|
25984
|
-
|
|
25985
|
-
|
|
25986
|
-
|
|
25987
|
-
|
|
25985
|
+
this.widgetData = {
|
|
25986
|
+
...this.config,
|
|
25987
|
+
type: 'tips',
|
|
25988
|
+
cardClass: 'slider-container',
|
|
25989
|
+
height: 'auto',
|
|
25990
|
+
sliderData: _.get(this.extContentReadData, 'contentPartner.providerTips', [])
|
|
25991
|
+
};
|
|
25988
25992
|
if (Object.keys(this.userExtCourseEnroll).length) {
|
|
25989
25993
|
this.discussWidgetData.enrolledContent = true;
|
|
25990
25994
|
this.discussWidgetData.newCommentSection.commentBox.placeholder = 'Start a discussion';
|
|
@@ -26297,11 +26301,11 @@ class AppTocCiosHomeComponent {
|
|
|
26297
26301
|
}
|
|
26298
26302
|
}
|
|
26299
26303
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i5.CommonMethodsService }, { token: i1$2.TranslateService }, { token: i2$1.ConfigurationsService }, { token: i2$1.EventService }, { token: i2$1.MultilingualTranslationsService }, { token: i2$1.WidgetContentService }, { token: CertificateService }, { token: LoaderService }, { token: i5$4.MatDialog }, { token: i7.MatLegacySnackBar }, { token: NetCoreService }, { token: 'environment', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26300
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCiosHomeComponent, selector: "ws-app-app-toc-cios-home", host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"extContentAvailable\">\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- <div class=\"flex flex-row gap-2\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n <ng-container *ngIf=\"content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"extContentReadData?.topic\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n </ng-container>\n </div>\n </div> -->\n </ng-container>\n\n <div class=\"flex items-center text-white mob-share\">\n <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- Knowledge level block -->\n <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n class=\"knowledge-level-container\">\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n </div>\n </ng-container>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n handleCapitalize(extContentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n </span>\n <ng-template #contentPartnerName>\n {{extContentReadData?.contentPartner?.contentPartnerName }}\n </ng-template>\n </span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n 'common.karmayogiBharat' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon>grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n </div>\n </div>\n </div> -->\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!forPreview\">\n\n <div *ngIf=\"isMobile\">\n <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n <ng-container *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n <div>\n <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n <mat-tab-group>\n <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n [baseContentReadData]=\"extContentReadData\"\n [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0 && userExtCourseEnroll?.progress === 100\"\n [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n [skeletonLoader]=\"skeletonLoader\">\n </ws-widget-app-toc-about>\n </ng-container>\n </div>\n </ng-template>\n </mat-tab>\n\n <ng-container *ngIf=\"config?.commentsTab\">\n <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n <!-- <ng-template matTabContent> -->\n <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n <ng-container *ngIf=\"!commentId\">\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n </ng-container>\n <ng-container *ngIf=\"commentId\">\n <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n Back to all comments\n </div>\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n [skeletonLoader]></d-v2-widget-comment>\n </ng-container>\n\n </div>\n <!-- </ng-template> -->\n </mat-tab>\n </ng-container>\n </mat-tab-group>\n\n </div>\n <div class=\"right-container\">\n <div class=\"right-content\" #rightContainer>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + extContentReadData?.appIcon + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-end\">\n <div (click)=\"onClickOfShare()\"\n class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n <mat-icon>share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold text-scrol-custom\">{{\n handleCapitalize(extContentReadData?.name) }}\n </div>\n <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n </div> -->\n </div>\n </div>\n\n\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"!forPreview\">\n <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n\n <ng-container\n *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\"\n (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length === 0\n && userExtCourseEnroll?.progress <= 100 && widgetData && widgetData.sliderData?.length\">\n <div class=\"no-certificate-found\">\n <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n <div>\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">\n {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\">\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length === 0\n && userExtCourseEnroll?.progress <= 100\">\n <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]; else defaultMsg\">\n <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.display\">\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n <div class=\"{{config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.info?.length > 1 ? 'mb-2' : ''}}\" *ngFor=\"let info of config?.partnersInfo[extContentReadData?.contentPartner?.contentPartnerName]?.info\">\n <span >{{info}}</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultMsg>\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\">\n <div>\n <span>Progress and certificates for {{ extContentReadData?.contentPartner?.contentPartnerName }}\n courses are visible only after you complete the course and pass the assessment.</span>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i18.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i18.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "directive", type: i18.MatLegacyTabContent, selector: "[matTabContent]" }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: ["condition", "kparray", "content", "contentReadData", "baseContentReadData", "skeletonLoader", "sticky", "tocStructure", "pathSet", "config", "resumeData", "forPreview", "showReviews", "batchData", "fromViewer", "selectedBatchData", "selectedTabValue", "fromMarketPlace", "showMarketPlaceCertificate", "languageList", "lockCertificate"], outputs: ["trigerCompletionSurveyForm"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: i12$2.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
26304
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocCiosHomeComponent, selector: "ws-app-app-toc-cios-home", host: { listeners: { "window:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "rcElement", first: true, predicate: ["rightContainer"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"extContentAvailable\">\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- <div class=\"flex flex-row gap-2\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n <ng-container *ngIf=\"content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"extContentReadData?.topic\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n </ng-container>\n </div>\n </div> -->\n </ng-container>\n\n <div class=\"flex items-center text-white mob-share\">\n <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- Knowledge level block -->\n <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n class=\"knowledge-level-container\">\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n </div>\n </ng-container>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n handleCapitalize(extContentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n </span>\n <ng-template #contentPartnerName>\n {{extContentReadData?.contentPartner?.contentPartnerName }}\n </ng-template>\n </span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n 'common.karmayogiBharat' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon>grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n </div>\n </div>\n </div> -->\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!forPreview\">\n\n <div *ngIf=\"isMobile\">\n <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n <ng-container *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n\n <div class=\"block md:hidden\">\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n </div>\n <div>\n <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n <mat-tab-group>\n <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n [baseContentReadData]=\"extContentReadData\"\n [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0 && userExtCourseEnroll?.progress === 100\"\n [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n [skeletonLoader]=\"skeletonLoader\">\n </ws-widget-app-toc-about>\n </ng-container>\n </div>\n </ng-template>\n </mat-tab>\n\n <ng-container *ngIf=\"config?.commentsTab\">\n <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n <!-- <ng-template matTabContent> -->\n <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n <ng-container *ngIf=\"!commentId\">\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n </ng-container>\n <ng-container *ngIf=\"commentId\">\n <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n Back to all comments\n </div>\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n [skeletonLoader]></d-v2-widget-comment>\n </ng-container>\n\n </div>\n <!-- </ng-template> -->\n </mat-tab>\n </ng-container>\n </mat-tab-group>\n\n </div>\n <div class=\"right-container\">\n <div class=\"right-content\" #rightContainer>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + extContentReadData?.appIcon + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-end\">\n <div (click)=\"onClickOfShare()\"\n class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n <mat-icon>share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold text-scrol-custom\">{{\n handleCapitalize(extContentReadData?.name) }}\n </div>\n <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n </div> -->\n </div>\n </div>\n\n\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"!forPreview\">\n <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n\n <ng-container\n *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\"\n (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length === 0\n && userExtCourseEnroll?.progress <= 100 && widgetData && widgetData.sliderData?.length\">\n <div class=\"no-certificate-found\">\n <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n </div>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n <div>\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">\n {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\">\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n <ng-container *ngIf=\"providerTips?.length\">\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n <div class=\"{{providerTips?.length > 1 ? 'mb-2' : ''}}\" *ngFor=\"let info of providerTips\">\n <span >{{info}}</span>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]; else defaultMsg\">\n <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.display\">\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n <div class=\"{{config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.info?.length > 1 ? 'mb-2' : ''}}\" *ngFor=\"let info of config?.partnersInfo[extContentReadData?.contentPartner?.contentPartnerName]?.info\">\n <span >{{info}}</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultMsg>\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\">\n <div>\n <span>Progress and certificates for {{ extContentReadData?.contentPartner?.contentPartnerName }}\n courses are visible only after you complete the course and pass the assessment.</span>\n </div>\n </div>\n </ng-template> -->\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i18.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i18.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "directive", type: i18.MatLegacyTabContent, selector: "[matTabContent]" }, { kind: "component", type: SkeletonLoaderComponent, selector: "ws-widget-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "component", type: AppTocAboutComponent, selector: "ws-widget-app-toc-about", inputs: ["condition", "kparray", "content", "contentReadData", "baseContentReadData", "skeletonLoader", "sticky", "tocStructure", "pathSet", "config", "resumeData", "forPreview", "showReviews", "batchData", "fromViewer", "selectedBatchData", "selectedTabValue", "fromMarketPlace", "showMarketPlaceCertificate", "languageList", "lockCertificate"], outputs: ["trigerCompletionSurveyForm"] }, { kind: "component", type: ShareTocComponent, selector: "ws-app-share-toc", inputs: ["rootOrgId", "content", "contentLink", "baseContentReadData"], outputs: ["resetEnableShare"] }, { kind: "component", type: i12$2.WidgetCommentComponent, selector: "d-v2-widget-comment", inputs: ["widgetData", "commentId"], outputs: ["commentDataChange"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2$1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
|
|
26301
26305
|
}
|
|
26302
26306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocCiosHomeComponent, decorators: [{
|
|
26303
26307
|
type: Component,
|
|
26304
|
-
args: [{ selector: 'ws-app-app-toc-cios-home', template: "<ng-container *ngIf=\"extContentAvailable\">\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- <div class=\"flex flex-row gap-2\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n <ng-container *ngIf=\"content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"extContentReadData?.topic\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n </ng-container>\n </div>\n </div> -->\n </ng-container>\n\n <div class=\"flex items-center text-white mob-share\">\n <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- Knowledge level block -->\n <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n class=\"knowledge-level-container\">\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n </div>\n </ng-container>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n handleCapitalize(extContentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n </span>\n <ng-template #contentPartnerName>\n {{extContentReadData?.contentPartner?.contentPartnerName }}\n </ng-template>\n </span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n 'common.karmayogiBharat' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon>grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n </div>\n </div>\n </div> -->\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!forPreview\">\n\n <div *ngIf=\"isMobile\">\n <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n <ng-container *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n <div>\n <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n <mat-tab-group>\n <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n [baseContentReadData]=\"extContentReadData\"\n [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0 && userExtCourseEnroll?.progress === 100\"\n [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n [skeletonLoader]=\"skeletonLoader\">\n </ws-widget-app-toc-about>\n </ng-container>\n </div>\n </ng-template>\n </mat-tab>\n\n <ng-container *ngIf=\"config?.commentsTab\">\n <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n <!-- <ng-template matTabContent> -->\n <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n <ng-container *ngIf=\"!commentId\">\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n </ng-container>\n <ng-container *ngIf=\"commentId\">\n <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n Back to all comments\n </div>\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n [skeletonLoader]></d-v2-widget-comment>\n </ng-container>\n\n </div>\n <!-- </ng-template> -->\n </mat-tab>\n </ng-container>\n </mat-tab-group>\n\n </div>\n <div class=\"right-container\">\n <div class=\"right-content\" #rightContainer>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + extContentReadData?.appIcon + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-end\">\n <div (click)=\"onClickOfShare()\"\n class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n <mat-icon>share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold text-scrol-custom\">{{\n handleCapitalize(extContentReadData?.name) }}\n </div>\n <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n </div> -->\n </div>\n </div>\n\n\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"!forPreview\">\n <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n\n <ng-container\n *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\"\n (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length === 0\n && userExtCourseEnroll?.progress <= 100 && widgetData && widgetData.sliderData?.length\">\n <div class=\"no-certificate-found\">\n <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n <div>\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">\n {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\">\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length === 0\n && userExtCourseEnroll?.progress <= 100\">\n <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]; else defaultMsg\">\n <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.display\">\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n <div class=\"{{config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.info?.length > 1 ? 'mb-2' : ''}}\" *ngFor=\"let info of config?.partnersInfo[extContentReadData?.contentPartner?.contentPartnerName]?.info\">\n <span >{{info}}</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultMsg>\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\">\n <div>\n <span>Progress and certificates for {{ extContentReadData?.contentPartner?.contentPartnerName }}\n courses are visible only after you complete the course and pass the assessment.</span>\n </div>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"] }]
|
|
26308
|
+
args: [{ selector: 'ws-app-app-toc-cios-home', template: "<ng-container *ngIf=\"extContentAvailable\">\n <div class=\"toc-banner\">\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"banner-details toc-content\" #bannerDetails>\n <div class=\"flex flex-col gap-4\">\n <div class=\"flex items-center justify-between gap-4\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'140px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- <div class=\"flex flex-row gap-2\">\n <div class=\"flex flex-row tag-div rounded-2xl gap-1 items-center p-2\">\n <mat-icon class=\"ws-mat-orange-text\">video_library</mat-icon>\n <ng-container *ngIf=\"content?.courseCategory\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ translateLabel(content?.courseCategory, 'searchfilters') }}</div>\n </ng-container>\n <ng-container *ngIf=\"extContentReadData?.topic\">\n <div class=\"text-xs font-bold text-white leading-3\">{{ 'External Course' }}</div>\n </ng-container>\n </div>\n </div> -->\n </ng-container>\n\n <div class=\"flex items-center text-white mob-share\">\n <mat-icon (click)=\"onClickOfShare()\">share</mat-icon>\n </div>\n </div>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- Knowledge level block -->\n <div *ngIf=\"extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel\"\n class=\"knowledge-level-container\">\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'beginner' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'beginner'\"\n class=\"level-badge beginner\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#DBF4DC\" />\n <path\n d=\"M7.42267 5C7.67927 4.55555 8.32077 4.55556 8.57737 5L12.0415 11C12.2981 11.4444 11.9773 12 11.4641 12H4.53592C4.02272 12 3.70197 11.4444 3.95857 11L7.42267 5Z\"\n fill=\"#49C951\" />\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'intermediate' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'intermediate'\"\n class=\"level-badge intermediate\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <rect width=\"16\" height=\"16\" fill=\"#D1DBEC\" />\n <path\n d=\"M7.42267 2.66666C7.67927 2.22221 8.32077 2.22221 8.57737 2.66666L12.0415 8.66666C12.2981 9.1111 11.9773 9.66666 11.4641 9.66666H4.53592C4.02272 9.66666 3.70197 9.1111 3.95857 8.66666L7.42267 2.66666Z\"\n fill=\"#1B4CA1\" />\n <path\n d=\"M7.42267 5.66666C7.67927 5.22221 8.32077 5.22221 8.57737 5.66666L12.0415 11.6667C12.2981 12.1111 11.9773 12.6667 11.4641 12.6667H4.53592C4.02272 12.6667 3.70197 12.1111 3.95857 11.6667L7.42267 5.66666Z\"\n fill=\"#1B4CA1\" stroke=\"#D1DBEC\" stroke-width=\"0.5\" />\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n <span\n *ngIf=\"extContentReadData?.difficultyLevel?.toLowerCase() === 'advanced' || extContentReadData?.knowledgeLevel?.toLowerCase() === 'advanced'\"\n class=\"level-badge advanced\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n <g clip-path=\"url(#clip0)\">\n <rect width=\"16\" height=\"16\" fill=\"#FFE6E1\" />\n <path\n d=\"M7.42264 2.33334C7.67924 1.8889 8.32074 1.8889 8.57734 2.33334L12.0414 8.33334C12.298 8.77779 11.9773 9.33334 11.4641 9.33334H4.53589C4.02269 9.33334 3.70194 8.77779 3.95854 8.33334L7.42264 2.33334Z\"\n fill=\"#FF8268\" />\n <path\n d=\"M7.42264 5C7.67924 4.55555 8.32074 4.55556 8.57734 5L12.0414 11C12.298 11.4444 11.9773 12 11.4641 12H4.53589C4.02269 12 3.70194 11.4444 3.95854 11L7.42264 5Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n <path\n d=\"M7.42264 7.66669C7.67924 7.22224 8.32074 7.22224 8.57734 7.66669L12.0414 13.6667C12.298 14.1111 11.9773 14.6667 11.4641 14.6667H4.53589C4.02269 14.6667 3.70194 14.1111 3.95854 13.6667L7.42264 7.66669Z\"\n fill=\"#FF8268\" stroke=\"#FFE6E1\" stroke-width=\"0.5\" />\n </g>\n <defs>\n <clipPath id=\"clip0\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n {{extContentReadData?.difficultyLevel || extContentReadData?.knowledgeLevel}}\n </span>\n </div>\n </ng-container>\n <div class=\"flex flex-col gap-2\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'90%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'70%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"banner-text text-base sm:text-4xl leading-6 sm:leading-10 font-bold\">{{\n handleCapitalize(extContentReadData?.name) }}</div>\n <div class=\"text-sm sm:text-base source-text font-semibold break-words\" #contentSource\n [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">\n <span *ngIf=\"extContentReadData?.courseProvider?.length;else contentPartnerName\">\n {{ formatcourseProviders(extContentReadData?.courseProvider) }}\n </span>\n <ng-template #contentPartnerName>\n {{extContentReadData?.contentPartner?.contentPartnerName }}\n </ng-template>\n </span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{\n 'common.karmayogiBharat' | translate }}</span>\n </div>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'120px'\" [height]=\"'40px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'88px'\" [height]=\"'24px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <!-- <div class=\"flex gap-4 items-center\" *ngIf=\"content?.averageRating || content?.additionalTags?.length\">\n <div class=\"flex flex-row rating-chip py-2 items-center cursor-pointer\" (click)=\"handleNavigateToReviews()\" *ngIf=\"content?.averageRating\">\n <div class=\"flex flex-row gap-1 margin-left-s items-center\">\n <mat-icon>grade</mat-icon>\n <div class=\"text-white text-sm leading-4\">{{ content?.averageRating }}</div>\n </div>\n <div class=\"separator\"></div>\n <div class=\"text-white text-sm leading-4 margin-right-m\">{{ content?.totalRating | pipeCountTransform }}</div>\n </div>\n <div class=\"flex items-center\" *ngIf=\"content?.additionalTags?.length\">\n <div class=\"most-enrolled-chip text-xs leading-3\">\n <span *ngIf=\"content?.additionalTags?.includes('mostTrending')\">{{ 'cardcontentv2.mostTrending' | translate }}</span>\n <span *ngIf=\"content?.additionalTags?.includes('mostEnrolled')\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span>\n </div>\n </div>\n </div> -->\n </ng-container>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'180px'\" [height]=\"'20px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader && extContentReadData?.lastUpdatedOn\">\n <div class=\"text-xs leading-4 source-text\">({{ 'apptoc.lastUpdatedOn' | translate }} {{\n extContentReadData?.lastUpdatedOn | date: 'MMM d, y' }})</div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!forPreview\">\n\n <div *ngIf=\"isMobile\">\n <div class=\"flex flex-col gap-4 p-5 border-bottom position-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n <ng-container *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'132px'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded blue-2-loader'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\" (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n\n <div class=\"block md:hidden\">\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n </div>\n <div>\n <div class=\"flex flex-col px-8 py-4 gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">{{ extContentReadData?.duration * 60 | pipeDurationTransform: 'hms' }}</div>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"flex flex-row gap-6 fixed-width\">\n <div class=\"toc-content\" [ngClass]=\"isMobile ? '':'mt-8 mb-8'\">\n <mat-tab-group>\n <mat-tab label=\"{{ 'apptocsinglepage.about' | translate }}\">\n <ng-template matTabContent>\n <div class=\"flex flex-col\" [ngClass]=\"isMobile ? '':'mt-5 mb-5'\">\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <div class=\"flex flex-col gap-2 mt-4\">\n <ws-widget-skeleton-loader [width]=\"'80%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'95%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n <ws-widget-skeleton-loader [width]=\"'65%'\" [height]=\"'16px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <ws-widget-app-toc-about [contentReadData]=\"extContentReadData\" [showReviews]=\"false\"\n [baseContentReadData]=\"extContentReadData\"\n [showMarketPlaceCertificate]=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0 && userExtCourseEnroll?.progress === 100\"\n [content]=\"extContentReadData\" [fromMarketPlace]=\"true\"\n [skeletonLoader]=\"skeletonLoader\">\n </ws-widget-app-toc-about>\n </ng-container>\n </div>\n </ng-template>\n </mat-tab>\n\n <ng-container *ngIf=\"config?.commentsTab\">\n <mat-tab label=\"{{ 'apptocsinglepage.comments' | translate }}\">\n <!-- <ng-template matTabContent> -->\n <div class=\"flex flex-col ratings-div mt-5\" id=\"commentsDiv\" *ngIf=\"discussWidgetData\">\n <ng-container *ngIf=\"!commentId\">\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\"></d-v2-widget-comment>\n </ng-container>\n <ng-container *ngIf=\"commentId\">\n <div class=\"flex flex-row gap-3 cursor-pointer mb-5\" (click)=\"clearCommentIdFromUrl()\">\n <mat-icon class=\"cursor-pointer\">arrow_back</mat-icon>\n Back to all comments\n </div>\n <d-v2-widget-comment [widgetData]=\"discussWidgetData\" [commentId]=\"commentId\"\n [skeletonLoader]></d-v2-widget-comment>\n </ng-container>\n\n </div>\n <!-- </ng-template> -->\n </mat-tab>\n </ng-container>\n </mat-tab-group>\n\n </div>\n <div class=\"right-container\">\n <div class=\"right-content\" #rightContainer>\n <ng-container *ngIf=\"skeletonLoader\">\n <ws-widget-skeleton-loader [width]=\"'384px'\" [height]=\"'224px'\"\n [bindingClass]=\"'rounded'\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"!skeletonLoader\">\n <div class=\"flex flex-col image-div\"\n [ngStyle]=\"{\n 'background-image': 'url(' + extContentReadData?.appIcon + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}\"\n [ngClass]=\"{'image-backdrop': scrolled}\">\n <div class=\"flex flex-col justify-between text-container\">\n <div class=\"flex items-center gap-4 justify-end\">\n <div (click)=\"onClickOfShare()\"\n class=\"flex flex-row items-center justify-end gap-2 share-tag\" *ngIf=\"!forPreview\">\n <mat-icon>share</mat-icon>\n <div>{{ 'apptocsinglepage.share' | translate }}</div>\n </div>\n </div>\n <div class=\"flex flex-col gap-1\" *ngIf=\"scrolled\">\n <div class=\"text-xl leading-6 text-white font-bold text-scrol-custom\">{{\n handleCapitalize(extContentReadData?.name) }}\n </div>\n <!-- <div class=\"text-sm source-text font-semibold break-words\" #contentSource [ngClass]=\"{'sourceEllipsis': sourceEllipsis}\" title=\"{{content?.source}}\">\n {{ 'cardcontentv2.by' | translate }}\n <span *ngIf=\"extContentReadData?.contentPartner?.contentPartnerName\">{{ extContentReadData?.contentPartner?.contentPartnerName }}</span>\n <span *ngIf=\"!extContentReadData?.contentPartner?.contentPartnerName\">{{ 'common.karmayogiBharat' | translate }}</span>\n </div> -->\n </div>\n </div>\n\n\n </div>\n\n\n </ng-container>\n\n <ng-container *ngIf=\"!forPreview\">\n <div class=\"flex flex-col gap-3 p-3 border-bottom\">\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}'\">\n <div class=\"flex flex-row justify-end w-full ws-mat-black-text\">\n <span class=\"mat-body-2 ws-mat-black-text\">\n {{userExtCourseEnroll?.progress}}%</span>\n </div>\n <ws-widget-content-progress [contentId]=\"userExtCourseEnroll?.progress\"\n [progress]=\"userExtCourseEnroll?.progress\"\n [progressType]=\"'percentage'\" [customClassName]=\"'viewer-progress'\">\n </ws-widget-content-progress>\n </ng-container> -->\n\n <ng-container\n *ngIf=\"(userExtCourseEnroll | json) === '{}' && !enrollValidationLoading && canEnroll\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\"\n (click)=\"enRollToExtCourse(extContentReadData)\">\n <ng-container>{{ 'apptochome.enroll' | translate }}\n </ng-container>\n </button>\n </ng-container>\n <ng-container *ngIf=\"enrollValidationLoading\">\n <ws-widget-skeleton-loader [width]=\"'100%'\" [height]=\"'32px'\"\n [bindingClass]=\"'rounded '\"></ws-widget-skeleton-loader>\n </ng-container>\n <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && extContentReadData?.redirectUrl\">\n <a class=\"flex action-button justify-center flex-middle resume\" target=\"_blank\"\n [href]=\"extContentReadData?.redirectUrl\"\n (click)=\"captureRedirectTelemetry(extContentReadData)\">\n <ng-container>{{ 'apptochome.redirect' | translate }}\n <mat-icon class=\"ml-2 ws-mat-white-text\">open_in_new</mat-icon>\n </ng-container>\n </a>\n </ng-container>\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length === 0\n && userExtCourseEnroll?.progress <= 100 && widgetData && widgetData.sliderData?.length\">\n <div class=\"no-certificate-found\">\n <ws-widget-sliders-dynamic [widgetData]=\"widgetData\"></ws-widget-sliders-dynamic>\n </div>\n </ng-container> -->\n <!-- <ng-container *ngIf=\"(userExtCourseEnroll | json) !== '{}' && userExtCourseEnroll?.issued_certificates?.length > 0\n && userExtCourseEnroll?.progress === 100\">\n <button class=\"flex action-button justify-center flex-middle resume\" type=\"button\" (click)=\"downloadCert()\">\n <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n <span>Certificate</span>\n <mat-icon *ngIf=\"!downloadCertificateLoading\" class=\"ml-2\">arrow_downward</mat-icon>\n <div class=\"center flex flex-middle certificate-loader margin-left-s\" *ngIf=\"downloadCertificateLoading\">\n <mat-spinner strokeWidth=\"2\" stroke=\"'white'\" class=\"white-spinner\" [diameter]=\"24\"></mat-spinner>\n </div>\n </button>\n </ng-container> -->\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"inProgressInfo\" ></ng-container>\n <div>\n <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"extContentReadData?.duration > 0\">\n <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n <div class=\"text-xs\">\n {{ extContentReadData?.duration | pipeDurationTransform: 'hms' }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n<div *ngIf=\"!extContentAvailable\">\n <div class=\"flex justify-center w-full\">\n <div class=\"margin-xl text-center\">\n <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n class=\"margin-top-l margin-bottom-s\">\n <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n </div>\n </div>\n\n</div>\n\n<ws-app-share-toc *ngIf=\"enableShare\" [contentLink]=\"contentLink\" [rootOrgId]=\"rootOrgId\" [content]=\"extContentReadData\"\n (resetEnableShare)=\"resetEnableShare($event)\"></ws-app-share-toc>\n\n<ng-template #inProgressInfo>\n <ng-container *ngIf=\"providerTips?.length\">\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n <div class=\"{{providerTips?.length > 1 ? 'mb-2' : ''}}\" *ngFor=\"let info of providerTips\">\n <span >{{info}}</span>\n </div>\n </div>\n </ng-container>\n <!-- <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]; else defaultMsg\">\n <ng-container *ngIf=\"config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.display\">\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\" >\n <div class=\"{{config?.partnersInfo?.[extContentReadData?.contentPartner?.contentPartnerName]?.info?.length > 1 ? 'mb-2' : ''}}\" *ngFor=\"let info of config?.partnersInfo[extContentReadData?.contentPartner?.contentPartnerName]?.info\">\n <span >{{info}}</span>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultMsg>\n <div class=\"no-certificate-found mt-6 mb-4 mx-2 p-2\">\n <div>\n <span>Progress and certificates for {{ extContentReadData?.contentPartner?.contentPartnerName }}\n courses are visible only after you complete the course and pass the assessment.</span>\n </div>\n </div>\n </ng-template> -->\n</ng-template>", styles: [".source-text{color:#ffffffb3}.toc-banner{background:#3a83cf;background:linear-gradient(135deg,#3a83cf,#1b4ca1);width:100%}.toc-banner .fixed-width{padding:0 16px}.toc-banner .banner-details{padding:36px 0}.toc-banner .banner-details .due-tag{padding:4px;color:#fff;border-radius:4px}.toc-banner .banner-details .due-warning{background-color:#ff9800;border:1px solid #FF9800}.toc-banner .banner-details .due-overdue{background-color:#f44336;border:1px solid #F44336}.toc-banner .banner-details .due-success{background-color:#4caf50;border:1px solid #4CAF50}.toc-banner .banner-details .rating-chip{border:1px solid rgba(0,0,0,.6);border-radius:20px;background-color:#0009}.toc-banner .banner-details .rating-chip mat-icon{width:16px;height:16px;color:#ff9800;font-size:16px}.toc-banner .banner-details .rating-chip .separator{width:1px;height:20px;border-right:1px solid rgba(255,255,255,.16);margin:0 8px}.toc-banner .banner-details .banner-text{color:#fffffff2;word-wrap:break-word}.toc-banner .info-div{max-width:384px;width:100%}.toc-banner .most-enrolled-chip{background-color:#ffea9e;border:1px solid #FFEA9E;padding:4px;border-radius:2px}.text-info-div{padding:8px;background-color:#fff;border-radius:64px}.tag-div{border:1px solid #FF9800;background-color:#00000080}.tag-div mat-icon{font-size:12px;width:12px;height:12px}.fixed-width{max-width:1200px;display:block;margin:0 auto}.mat-subheading-1{margin-bottom:4px!important}.initial-circle{width:36px;height:36px;border-radius:50%;background:#1b2133;color:#fff;text-transform:uppercase}.toc-content{max-width:792px;width:100%}.right-container .image-div{height:220px;background-color:#ccc;border-top-left-radius:12px;border-top-right-radius:12px}.right-container .image-div img{max-width:384px;width:100%;height:220px;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;top:-42px}.right-container .image-div .share-container{position:relative;z-index:2;top:20px;margin-right:20px}.right-container .image-div .share-tag{font-weight:700;background-color:#000;border:1px solid #FFF;border-radius:20px;padding:6px 16px;color:#fff;cursor:pointer}.right-container .tag-div mat-icon{width:16px;height:16px;font-size:16px}.right-container .share-tag mat-icon{width:20px;height:20px;font-size:20px}.right-container .text-container{position:relative;z-index:2;height:220px;padding:16px}.right-container .right-content{background-color:#fff;border-radius:12px;position:fixed;z-index:10;top:132px;width:384px;margin-bottom:2rem;box-shadow:0 2px 6px -1px #00000080,0 -4px 4px -2px #00000080}.right-container .border-bottom{border-bottom:1px solid rgba(0,0,0,.2)}.right-container .info-div{background-color:#fef7ed;border:none;border-radius:8px;padding:8px 12px;font-size:14px}.right-container .info-div .mat-icon{width:18px;height:18px;font-size:18px}.right-container .kpi-values{width:64px;padding:8px;text-align:center}.right-container .kpi-values .timer-icon{color:#000000de;height:20px}.batch-info{padding:16px;border-radius:4px;background-color:#1b4ca114;border:1px solid rgba(27,76,161,.08);text-align:center}.batch-info .batch-label{font-size:.75rem;color:#0009;line-height:1rem}.button{border-radius:64px;letter-spacing:.25px;padding:12px 36px;font-weight:700;cursor:pointer;text-align:center}@media screen and (max-width: 1200px){.right-container{display:none}.action-button:before{content:\"\";position:absolute;inset:-10px;background-color:#ffffff40;border-radius:inherit;filter:blur(10px);z-index:-1}.action-button:after{content:\"\";position:absolute;inset:-10px;box-shadow:0 0 -4px -4px #fff9;border-radius:inherit;z-index:-1}.karma-points-div{display:none}}.enroll-modal{max-width:600px!important;width:100%!important}.enroll-modal .mat-dialog-container{padding:0;border-radius:12px}.confirmation-modal{max-width:420px!important;width:100%!important}.confirmation-modal .mat-dialog-container{border-radius:12px;padding:0}.image-backdrop{background-color:#000!important;position:relative}.image-backdrop:after{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);content:\"\";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000a6;border-top-left-radius:12px;border-top-right-radius:12px}.text-scrol-custom{height:200px;overflow-y:auto}@media screen and (max-width: 1000px){.confirmation-modal,.enroll-modal{max-width:90vw!important}}.kpi-loader-div{width:18%}a.action-button{color:#fff!important;width:auto}.rate-button{color:#000000de!important;font-size:.875rem;font-weight:700;border:none!important}.rate-button .mat-button-wrapper{display:flex;gap:8px;align-items:center}.mobile-enroll-div{padding:16px;position:fixed;z-index:1000;bottom:0;width:calc(100% - 32px)}.mobile-enroll-div .action-button{min-width:320px;max-width:400px;margin:auto}@media screen and (min-width: 1201px){.mobile-enroll-div,.mob-share{display:none!important}.hideAbove1200{display:none}}.mobile-progress{padding:16px}@media screen and (min-width: 1200px){.mobile-progress{display:none}}.sourceEllipsis{white-space:break-spaces;position:relative;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}.text-white{color:#fff!important}.custom-button,.fluid-width{width:100%}.toc-container{background:#fff;width:100%}mat-divider{border-top-color:#d9d9d9}.sticky{top:56px;overflow:hidden;z-index:10;width:100%}.statusMsg{border-radius:4px;height:40px}.toc-body{padding-bottom:1rem}.toc-body .toc-links{width:100%;z-index:1;border:none;background:transparent}.toc-body .toc-links .mat-tab-link{text-align:left;justify-content:flex-start}.toc-body .toc-links .mat-tab-link.justify-center{justify-content:center}.toc-body .toc-links .mat-tab-link.link-active{color:#0074b6!important}.tab:focus{outline:1px solid!important}.rounded-icon{background:#fff 0% 0% no-repeat padding-box;box-shadow:0 2px 4px #00000029;border:2px solid #00A9F4;border-radius:50%;min-width:0;opacity:1;height:35px;width:35px;padding:0;align-items:center;align-self:center;float:right}.rounded-icon mat-icon{color:#00a9f4}.blue-border{border:2px solid #0074b6!important}.hidden-xs-inline{display:inline}@media only screen and (max-width: 599px){.hidden-xs-inline{display:none}}.visible-xs-inline{display:none}@media only screen and (max-width: 599px){.visible-xs-inline{display:inline}}.meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px;box-shadow:none;padding-left:0}@media only screen and (max-width: 599px){.meta-section{width:100%}}.font-bold-imp{font-weight:700!important}.info-section{width:20%;min-width:250px}.info-section .custom-button{background:#0074b6 0% 0% no-repeat padding-box!important;border-radius:4px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0!important}}.info-section .glance-container .at-glance-heading{letter-spacing:0px;color:#222}.info-section .glance-container .info-item .cs-icons .mat-icon{color:#666;vertical-align:middle;font-size:20px}.info-section .glance-container .info-item .cs-icons img{width:20px;height:20px;vertical-align:middle}.info-section .glance-container .info-item .item-heading{font:600 14px/21px Lato;margin:0 0 4px;letter-spacing:0px;color:#0074b6!important}.info-section .glance-container .info-item .item-value{letter-spacing:0px;color:#5f5f5f}.info-section .glance-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.toc-discussion-container{display:flex;justify-content:space-between;flex-wrap:wrap-reverse}.toc-discussion-container .discussion{flex:1;min-width:1px}.toc-discussion-container .cohorts{width:100%;background:#fff 0% 0% no-repeat padding-box;border:1px solid #D9D9D9;border-radius:8px;box-shadow:none}@media only screen and (min-width: 600px) and (max-width: 959px){.toc-discussion-container .cohorts{margin-left:24px;min-width:250px}}@media only screen and (max-width: 599px){.toc-discussion-container .cohorts{margin-left:0;margin-bottom:24px;width:100%}}.mtb-xl{margin-top:3.5rem;margin-bottom:3.5rem}.detailBar{display:flex}.editDetails{margin:auto;display:flex}.white-bg{background:#fff!important;background-color:#fff!important}.contacts-container{padding:22px 0 10px;border:0;border-top:1px;border-style:solid;border-bottom:1px;border-color:#ececec}.contacts-container .contacts-head{letter-spacing:0px;color:#222;background:transparent;margin-bottom:24px}.contacts-container .author-card{min-width:291px;width:291px;display:flex;flex-direction:row;align-items:center;margin-bottom:30px;padding-right:10px}.contacts-container .author-card .right{padding:0 15px}.contacts-container .author-card .user-name{letter-spacing:0px;color:#5f5f5f}.contacts-container .author-card .user-university{letter-spacing:0px;color:#00a9f4}.contacts-container .author-card .user-button{background:#fff 0% 0% no-repeat padding-box;border:1px solid #F58634;border-radius:15px;letter-spacing:0px;color:#f58634;max-width:60px;padding:4px}.divider-transparent{border-top-color:transparent!important}.scroll-to-top{position:fixed;bottom:15px;right:15px;opacity:0;transition:all .2s ease-in-out;border-radius:50%}.scroll-to-top .icon{font-size:24px!important}.show-scroll{opacity:1;transition:all .2s ease-in-out}.sticky-breadcrumbs{position:sticky;z-index:999;top:72px;width:100%}.sticky-banner{position:sticky;z-index:999}.sticky-navs{position:sticky!important;background:#fff;z-index:999;top:auto}.actbutton{border:1px solid rgba(0,0,0,.16);border-radius:4px;padding:0 15px;width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.actbutton .mat-icon{margin-right:6px}.disable-start-btn{cursor:not-allowed!important;pointer-events:none!important;opacity:.5!important}.certificate-loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#fff}.cb-plan-wrap{opacity:1;color:#1b4ca1;font-family:Lato-Regular;font-size:12px;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.cb-plan-wrap .cb-danger{border-radius:2px;padding:4px 8px;border:1px solid #d13924;background-color:#d13924!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-success{padding:4px 8px;border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cb-plan-wrap .cb-warning{padding:4px 8px;border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.bg-white{background-color:#fff}.provider-logo-div{border-radius:4px;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.provider-logo-div img{display:flex;border-radius:4px;width:40px;height:40px;padding:4px}ul{padding:0!important}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values img{height:24px;width:24px}.position-bottom{position:fixed;width:88%;bottom:0;z-index:99}.no-certificate-found{border:1px solid #ccc;border-color:#f3962f;background-color:#fceedb;border-radius:12px}.no-certificate-found{min-height:56px}.no-certificate-found ::ng-deep ws-widget-sliders-dynamic .banner-data{font-size:16px!important;font-family:lato,sans-serif!important}.truncate-5{-webkit-line-clamp:1;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word}.ext-info-slider{padding:8px}#commentsDiv{margin:1rem auto;min-height:500px}.knowledge-level-container{margin-right:auto}.level-badge{display:inline-flex;height:24px;padding:2px 8px;align-items:center;gap:4px;flex-shrink:0;border-radius:12px;font-weight:600;font-size:12px;line-height:16px;white-space:nowrap}.level-badge.beginner{border:1px solid #49C951;background:linear-gradient(0deg,#49c95133 0% 100%),#fff;color:#2f8132;border-radius:16px}.level-badge.intermediate{border:1px solid #1B4CA1;background:linear-gradient(0deg,#1b4ca133 0% 100%),#fff;color:#1b4ca1;border-radius:16px}.level-badge.advanced{border:1px solid #FF8268;background:linear-gradient(0deg,#ff826833 0% 100%),#fff;color:#ff4b25;border-radius:16px}.level-badge svg{flex-shrink:0}::ng-deep .consent-dialog-panel .mat-dialog-container{overflow:hidden;padding:0;margin:0;border-radius:8px}::ng-deep .consent-dialog-panel .mat-dialog-content{padding:0;margin:0;max-height:none;overflow:hidden}\n"] }]
|
|
26305
26309
|
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i5.CommonMethodsService }, { type: i1$2.TranslateService }, { type: i2$1.ConfigurationsService }, { type: i2$1.EventService }, { type: i2$1.MultilingualTranslationsService }, { type: i2$1.WidgetContentService }, { type: CertificateService }, { type: LoaderService }, { type: i5$4.MatDialog }, { type: i7.MatLegacySnackBar }, { type: NetCoreService }, { type: undefined, decorators: [{
|
|
26306
26310
|
type: Inject,
|
|
26307
26311
|
args: ['environment']
|
|
@@ -27028,5 +27032,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
27028
27032
|
* Generated bundle index. Do not edit.
|
|
27029
27033
|
*/
|
|
27030
27034
|
|
|
27031
|
-
export { ActionService, AppTocAboutComponent, AppTocAnalyticsTilesComponent, AppTocBannerComponent, AppTocBatchAssignmentsComponent, AppTocCiosHomeComponent, AppTocCiosResolverService, AppTocCiosUserEnrollResolverService, AppTocCohortsComponent, AppTocContentCardComponent, AppTocContentComponent, AppTocContentReadResolverService, AppTocDialogIntroVideoComponent, AppTocDiscussionComponent, AppTocExtPublicResolverService, AppTocHomeComponent, AppTocHomeV2Component, AppTocLibModule, AppTocOverviewComponent, AppTocResolverService, AppTocService, AppTocSessionCardComponent, AppTocSessionsComponent, AppTocSinglePageComponent, AppTocTeachersNotesComponent, AppTocV2Service, CardCompetencyComponent, CardCompetencyModule, CompletionSurveyFormComponent, ConfigResolverService, ContentTocComponent, ContentTocModule, CreateBatchDialogComponent, EnrollLanguageDialogueComponent, EnrollProfileFormComponent, EnrollQuestionnaireComponent, ErrorType, KarmaPointsComponent, KarmaPointsModule, KnowledgeArtifactDetailsComponent, LoadCheckService, MetaTag, NsAppToc, NsCohorts, NsDiscussionForum, ProfileResolverService, PublicSurveyFormComponent, ROOT_WIDGET_CONFIG, ResetRatingsService, RestrictedFeaturesResolverService, ReviewsContentComponent, ShareTocComponent, ShareTocModule, SurveyFormQuestionComponent, SurveyFormSectionComponent, TimerService, TitleTagService, TocKpiValuesComponent, TocKpiValuesModule, ViewerUtilService, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_TOC_LIB_CONFIG, WidgetContentService };
|
|
27035
|
+
export { AccessControlService, ActionService, AppTocAboutComponent, AppTocAnalyticsTilesComponent, AppTocBannerComponent, AppTocBatchAssignmentsComponent, AppTocCiosHomeComponent, AppTocCiosResolverService, AppTocCiosUserEnrollResolverService, AppTocCohortsComponent, AppTocContentCardComponent, AppTocContentComponent, AppTocContentReadResolverService, AppTocDialogIntroVideoComponent, AppTocDiscussionComponent, AppTocExtPublicResolverService, AppTocHomeComponent, AppTocHomeV2Component, AppTocLibModule, AppTocOverviewComponent, AppTocResolverService, AppTocService, AppTocSessionCardComponent, AppTocSessionsComponent, AppTocSinglePageComponent, AppTocTeachersNotesComponent, AppTocV2Service, CardCompetencyComponent, CardCompetencyModule, CompletionSurveyFormComponent, ConfigResolverService, ContentTocComponent, ContentTocModule, CreateBatchDialogComponent, EnrollLanguageDialogueComponent, EnrollProfileFormComponent, EnrollQuestionnaireComponent, ErrorType, KarmaPointsComponent, KarmaPointsModule, KnowledgeArtifactDetailsComponent, LoadCheckService, MetaTag, NsAppToc, NsCohorts, NsDiscussionForum, ProfileResolverService, PublicSurveyFormComponent, ROOT_WIDGET_CONFIG, ResetRatingsService, RestrictedFeaturesResolverService, ReviewsContentComponent, ShareTocComponent, ShareTocModule, SurveyFormQuestionComponent, SurveyFormSectionComponent, TimerService, TitleTagService, TocKpiValuesComponent, TocKpiValuesModule, ViewerUtilService, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_TOC_LIB_CONFIG, WidgetContentService };
|
|
27032
27036
|
//# sourceMappingURL=sunbird-cb-toc.mjs.map
|