import { Component, Input } from '@angular/core';
import { NsContent } from '@sunbird-cb/utils-v2';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "../../../../services/app-toc.service";
import * as i3 from "@sunbird-cb/utils-v2";
import * as i4 from "@angular/common";
import * as i5 from "@angular/material/legacy-tooltip";
import * as i6 from "../app-toc-content-card-v2/app-toc-content-card-v2.component";
import * as i7 from "../app-toc-sessions-new/app-toc-sessions-new.component";
import * as i8 from "../app-toc-content-card-v2-skeleton/app-toc-content-card-v2-skeleton.component";
// import { NsAppToc } from '../models/app-toc.model'
export class AppTocContentComponent {
    constructor(route, tocSvc, configSvc) {
        this.route = route;
        this.tocSvc = tocSvc;
        this.configSvc = configSvc;
        this.forPreview = false;
        this.resumeData = null;
        this.batchData = null;
        this.skeletonLoader = false;
        this.hierarchyMapData = {};
        this.isPreAssessment = false;
        this.isPlayable = false;
        this.contentPlayWidgetConfig = null;
        this.defaultThumbnail = '';
        // errorCode: NsAppToc.EWsTocErrorCode | null = null
        this.routeSubscription = null;
        this.routeQuerySubscription = null;
        this.hashmapUpdatedSubscription = null;
        this.contentParents = [];
        this.expandAll = false;
        this.expandPartOf = false;
        this.contentLoader = false;
        this.selectedTabType = 'content';
        this.nsContent = NsContent;
        this.otherResourse = 0;
        this.tocSvc.resumeData.subscribe((res) => {
            this.resumeData = res;
            // this.getLastPlayedResource()
        });
    }
    ngOnInit() {
        // this.forPreview = window.location.href.includes('/author/')
        this.routeQuerySubscription = this.route.queryParamMap.subscribe(qParamsMap => {
            // console.log('qParamsMap--', qParamsMap)
            // console.log('this.content--', this.content)
            // console.log('this.hierarchyMapData', this.hierarchyMapData)
            // Parse preEnrolmentResources if it exists as a string
            // Note: This is separate from preliminary assessment which is in children array with isPreAssessment flag
            if (this.content && this.content?.preEnrolmentResources && typeof this.content?.preEnrolmentResources === 'string') {
                this.content['preEnrolmentResources'] = JSON.parse(this.content?.preEnrolmentResources);
            }
            const contextId = qParamsMap.get('contextId');
            const contextPath = qParamsMap.get('contextPath');
            const batchId = qParamsMap.get('batchId');
            const primaryCategory = qParamsMap.get('primaryCategory');
            const preAssessment = qParamsMap.get('preAssessment');
            if (preAssessment === 'true') {
                this.isPreAssessment = true;
            }
            if (contextId && contextPath) {
                this.contextId = contextId;
                this.contextPath = contextPath;
            }
            if (batchId) {
                this.batchId = batchId;
            }
            if (primaryCategory) {
                this.selectedTabType = primaryCategory === this.nsContent.EPrimaryCategory.OFFLINE_SESSION ? 'session' : 'content';
            }
        });
        if (this.route && this.route.parent) {
            this.routeSubscription = this.route.parent.data.subscribe((data) => {
                this.initData(data);
            });
        }
        this.tocSvc.contentLoader$.subscribe((val) => {
            this.contentLoader = val;
        });
        // Subscribe to hashmap updates for real-time progress synchronization
        this.hashmapUpdatedSubscription = this.tocSvc.hashmapUpdated$.subscribe((update) => {
            if (update && update.hashmap) {
                // Update hierarchyMapData with the latest hashmap from the service
                this.hierarchyMapData = update.hashmap;
            }
        });
        const instanceConfig = this.configSvc.instanceConfig;
        if (instanceConfig) {
            this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
        }
        this.typesOfContent = [
            {
                name: 'Self-paced',
                id: 'content',
                disabled: false,
            },
            {
                name: 'Instructor-led',
                id: 'session',
                disabled: false,
            },
        ];
        this.otherResourse = 0;
        if (this.tocStructure) {
            Object.keys(this.tocStructure).forEach((ele) => {
                if (ele === 'offlineSession' || ele === 'learningModule') {
                }
                else {
                    this.otherResourse = this.otherResourse + this.tocStructure[ele];
                }
            });
            if (!this.otherResourse) {
                setTimeout(() => {
                    this.selectedTabType = 'session';
                    this.typesOfContent[0].disabled = true;
                }, 1000);
            }
            else {
                this.typesOfContent[1].disabled = this.tocStructure['offlineSession'] ? false : true;
            }
        }
    }
    initData(_data) {
        // not required init now because new implementation of  hashmap already has mapped the completion percent
        // const initData = this.tocSvc.initData(data, true)
        // this.content = initData.content
        // this.errorCode = initData.errorCode
        if (this.content) {
            if (!this.contextId || !this.contextPath) {
                this.contextId = this.content.identifier;
                this.contextPath = this.content.primaryCategory;
            }
        }
    }
    ngOnChanges(changes) {
        for (const property in changes) {
            if (property === 'resumeData') {
                // this.getLastPlayedResource()
            }
        }
    }
    get isEnrolled() {
        // Check both batchId and batchData.enrolled to support Learning Pathways
        // where batchId might not be directly set but user is enrolled in courses within the pathway
        return this.batchId ? true : (this.batchData?.enrolled || false);
    }
    // private processCollectionForTree() {
    //     this.pathSet = new Set()
    // }
    // getLastPlayedResource() {
    //   let firstPlayableContent
    //   let resumeDataV2: any
    //   if (this.resumeData && this.resumeData.length > 0 && this.content) {
    //     if (this.content.completionPercentage === 100) {
    //       resumeDataV2 = this.getResumeDataFromList('start')
    //     } else {
    //       resumeDataV2 = this.getResumeDataFromList()
    //     }
    //     this.expandThePath(resumeDataV2.identifier)
    //   } else {
    //     firstPlayableContent = this.contentSvc.getFirstChildInHierarchy(this.content)
    //     this.expandThePath(firstPlayableContent.identifier)
    //   }
    // }
    // expandThePath(resourceId: string) {
    //   if (this.content && resourceId) {
    //     const path = this.utilitySvc.getPath(this.content, resourceId)
    //     // console.log('Path :: :: : ', path)
    //     this.pathSet = new Set(path.map((u: { identifier: any }) => u.identifier))
    //     // console.log('pathSet ::: ', this.pathSet)
    //     // path.forEach((node: IViewerTocCard) => {
    //     //   this.nestedTreeControl.expand(node)
    //     // })
    //   }
    // }
    // private getResumeDataFromList(type?: string) {
    //   if (!type) {
    //     // tslint:disable-next-line:max-line-length
    //     const lastItem = this.resumeData && this.resumeData.sort((a: any, b: any) =>
    // new Date(b.lastAccessTime).getTime() - new Date(a.lastAccessTime).getTime()).shift()
    //     return {
    //       identifier: lastItem.contentId,
    //       mimeType: lastItem.progressdetails && lastItem.progressdetails.mimeType,
    //     }
    //   }
    //   const firstItem = this.resumeData && this.resumeData.length && this.resumeData[0]
    //   return {
    //     identifier: firstItem.contentId,
    //     mimeType: firstItem.progressdetails && firstItem.progressdetails.mimeType,
    //   }
    // }
    ngOnDestroy() {
        if (this.routeSubscription) {
            this.routeSubscription.unsubscribe();
        }
        if (this.routeQuerySubscription) {
            this.routeQuerySubscription.unsubscribe();
        }
        if (this.hashmapUpdatedSubscription) {
            this.hashmapUpdatedSubscription.unsubscribe();
        }
    }
    getMilestoneCompletedOrNot(identifier) {
        if (!this.content || !this.hierarchyMapData) {
            return false;
        }
        const milestoneData = this.hierarchyMapData[identifier];
        if (milestoneData && milestoneData?.primaryCategory === NsContent.EPrimaryCategory.FINAL_ASSESSMENT) {
            return milestoneData?.completionStatus === 2;
        }
        if (!milestoneData) {
            return false;
        }
        // Check if all mandatory content AND milestone assessment are completed
        let hasMandatoryContent = false;
        let allMandatoryComplete = true;
        let hasMilestoneAssessment = false;
        let milestoneAssessmentComplete = false;
        // Check all direct children of the milestone
        for (const key of Object.keys(this.hierarchyMapData)) {
            const item = this.hierarchyMapData[key];
            // Only check direct children
            if (item.parent !== identifier)
                continue;
            // Check if this is the milestone assessment
            const isAssessment = item.primaryCategory === 'Course Assessment' ||
                item.primaryCategory === 'Final Assessment' ||
                item.primaryCategory === 'Standalone Assessment';
            if (isAssessment) {
                hasMilestoneAssessment = true;
                const isCompleted = item.completionStatus === 2 || item.status === 2 ||
                    item.completionPercentage >= 100 || item.progress >= 100;
                if (isCompleted) {
                    milestoneAssessmentComplete = true;
                }
                continue; // Skip to next item
            }
            // Check if this is mandatory content (courses/collections)
            if (item.primaryCategory === 'Course' || item.isCollection) {
                const isMandatory = item.isMandatory !== false; // Default is mandatory
                if (isMandatory) {
                    hasMandatoryContent = true;
                    const isCompleted = item.completionStatus === 2 || item.status === 2 ||
                        item.completionPercentage >= 100 || item.progress >= 100;
                    if (!isCompleted) {
                        allMandatoryComplete = false;
                    }
                }
            }
        }
        // Milestone is complete when:
        // 1. All mandatory content is completed (or no mandatory content exists)
        // 2. Milestone assessment is completed (or no assessment exists)
        const mandatoryCheck = !hasMandatoryContent || allMandatoryComplete;
        const assessmentCheck = !hasMilestoneAssessment || milestoneAssessmentComplete;
        return mandatoryCheck && assessmentCheck;
    }
    /**
     * Check if multi-line text is truncated (has ellipsis)
     * @param element The HTMLElement to check
     * @returns true if text is truncated, false otherwise
     */
    isMultiLineTruncated(element) {
        if (!element)
            return false;
        return element.scrollHeight > element.clientHeight;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.AppTocService }, { token: i3.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentComponent, selector: "ws-widget-app-toc-content", inputs: { batchId: "batchId", content: "content", forPreview: "forPreview", resumeData: "resumeData", batchData: "batchData", skeletonLoader: "skeletonLoader", tocStructure: "tocStructure", config: "config", hierarchyMapData: "hierarchyMapData", pathSet: "pathSet", componentName: "componentName", isPreAssessment: "isPreAssessment", baseContentReadData: "baseContentReadData", contentReadData: "contentReadData" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' &&  componentName !== 'viewer'\">\n    <!-- Milestone / Learning Path UI -->\n    <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n        <!-- Learning Path Header -->\n        <div class=\"learning-path-header\">\n            <h3 class=\"learning-path-title\">Learning Path</h3>\n            <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n        </div>\n        <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n            <ul class=\"milestone-list\">\n                <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n                    [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n                    <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n                        <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n                            class=\"milestone-checkmark\" alt=\"Completed\" />\n                        <span *ngIf=\"m?.completionStatus !== 2 && !getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n                    </div>\n                    <div class=\"milestone-label\">\n                        <p class=\"mb-0 leading-none\">\n                            <span *ngIf=\"m?.contextCategory\">{{m?.contextCategory}}</span>\n                            <span *ngIf=\"m?.courseCategory\">{{m?.courseCategory}} {{ i}}</span>\n                        </p>\n                        <p #milestoneNameRef class=\"milestone-name-text leading-none\"\n                            [matTooltip]=\"isMultiLineTruncated(milestoneNameRef) ? m?.name : ''\"\n                            matTooltipPosition=\"above\"\n                            matTooltipClass=\"multiline-tooltip\">\n                            {{ m?.name }}\n                        </p>\n                    </div>\n                </li>\n            </ul>\n        </ng-container>\n        <ng-template #fallbackMilestones>\n            <ul class=\"milestone-list\">\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">Pre Assessment</div>\n                </li>\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n                        <span class=\"milestone-index\">4</span>\n                    </div>\n                    <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n</div>\n<div class=\"bggrey\">\n    <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n        <div class=\"main-container flex flex-col gap-4\">\n            <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <div class=\"padding-left-m flex gap-4 tab-list\">\n                    <ng-container *ngFor=\"let type of typesOfContent\">\n                        <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n                            [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n                            <span>{{type.name}}</span>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n                    [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n                </ws-widget-app-app-toc-sessions-new>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <!-- {{pathSet|json}} -->\n    <ng-template #contentBlock>\n        <ng-container *ngIf=\"!contentLoader\">\n            <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n                <div class=\"content-card \"\n                    *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n                    [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                    <!-- {{card|json}} -->\n                    <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                        [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                        [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n                        [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                        [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n                </div>\n            </ng-container>\n            <ng-template #noChildren>\n                <div *ngIf=\"!isPlayable\"\n                    class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n                    The preview for this type of content is unavailable. Please click on Start button above to view.\n                </div>\n                <!-- <ng-container *ngIf=\"isPlayable\" [sbUiResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"contentLoader\">\n            <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n        </ng-container>\n    </ng-template>\n    <div *ngIf=\"isPreAssessment\">\n        <div class=\"content-card \"\n            *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n            [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n            <!-- {{card|json}} -->\n            <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n                [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n                [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n        </div>\n    </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}.milestone-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;word-break:break-word}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.AppTocContentCardV2Component, selector: "ws-widget-app-toc-content-card-v2", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId", "componentName", "index", "pathSet", "expandActive", "hierarchyMapData", "batchData", "isPreAssessment", "baseContentReadData", "mlCourse", "parentMilestoneLocked"] }, { kind: "component", type: i7.AppTocSessionsNewComponent, selector: "ws-widget-app-app-toc-sessions-new", inputs: ["batchData", "content", "forPreview", "config", "batchId", "rootId", "rootContentType", "pathSet"] }, { kind: "component", type: i8.AppTocContentCardV2SkeletonComponent, selector: "ws-widget-app-toc-content-card-v2-skeleton" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-widget-app-toc-content', template: "<div *ngIf=\"content?.courseCategory === 'Learning Pathway' &&  componentName !== 'viewer'\">\n    <!-- Milestone / Learning Path UI -->\n    <div class=\"milestone-wrapper\" role=\"group\" aria-label=\"Learning path milestones\">\n        <!-- Learning Path Header -->\n        <div class=\"learning-path-header\">\n            <h3 class=\"learning-path-title\">Learning Path</h3>\n            <p class=\"learning-path-subtitle\">Complete {{content?.children?.length - 1 || 3}} key milestones</p>\n        </div>\n        <ng-container *ngIf=\"content?.children?.length; else fallbackMilestones\">\n            <ul class=\"milestone-list\">\n                <li *ngFor=\"let m of content?.children; let i = index\" class=\"milestone-item\"\n                    [class.completed]=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" role=\"listitem\">\n                    <div class=\"milestone-circle\" [attr.aria-label]=\"m?.name || ('Milestone ' + (i+1))\">\n                        <img *ngIf=\"m?.completionStatus === 2 || getMilestoneCompletedOrNot(m?.identifier)\" src=\"assets/icons/toc/tick-orange.svg\"\n                            class=\"milestone-checkmark\" alt=\"Completed\" />\n                        <span *ngIf=\"m?.completionStatus !== 2 && !getMilestoneCompletedOrNot(m?.identifier)\" class=\"milestone-index\"></span>\n                    </div>\n                    <div class=\"milestone-label\">\n                        <p class=\"mb-0 leading-none\">\n                            <span *ngIf=\"m?.contextCategory\">{{m?.contextCategory}}</span>\n                            <span *ngIf=\"m?.courseCategory\">{{m?.courseCategory}} {{ i}}</span>\n                        </p>\n                        <p #milestoneNameRef class=\"milestone-name-text leading-none\"\n                            [matTooltip]=\"isMultiLineTruncated(milestoneNameRef) ? m?.name : ''\"\n                            matTooltipPosition=\"above\"\n                            matTooltipClass=\"multiline-tooltip\">\n                            {{ m?.name }}\n                        </p>\n                    </div>\n                </li>\n            </ul>\n        </ng-container>\n        <ng-template #fallbackMilestones>\n            <ul class=\"milestone-list\">\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"Pre Assessment\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">Pre Assessment</div>\n                </li>\n                <li class=\"milestone-item completed\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"1. Foundation of Workplace Ethics\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">1. Foundation of Workplace Ethics</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"2. Health and Productivity at Work\">\n                        <img src=\"assets/icons/toc/tick-orange.svg\" class=\"milestone-checkmark\" alt=\"Completed\" />\n                    </div>\n                    <div class=\"milestone-label\">2. Health and Productivity at Work</div>\n                </li>\n                <li class=\"milestone-item\" role=\"listitem\">\n                    <div class=\"milestone-circle\" aria-label=\"3. Health and Productivity at Work\">\n                        <span class=\"milestone-index\">4</span>\n                    </div>\n                    <div class=\"milestone-label\">3. Health and Productivity at Work</div>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n</div>\n<div class=\"bggrey\">\n    <div class=\"py-4 content-container\" id=\"contentContainer\" *ngIf=\"!isPreAssessment\">\n        <div class=\"main-container flex flex-col gap-4\">\n            <ng-container *ngIf=\"content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <div class=\"padding-left-m flex gap-4 tab-list\">\n                    <ng-container *ngFor=\"let type of typesOfContent\">\n                        <div class=\"tab-data\" (click)=\"!type.disabled && selectedTabType = type.id\"\n                            [ngClass]=\"{'active-tab': selectedTabType === type.id, 'disabled':type.disabled}\">\n                            <span>{{type.name}}</span>\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'content' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n            <ng-container\n                *ngIf=\"selectedTabType === 'session' && content?.primaryCategory === nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ws-widget-app-app-toc-sessions-new [batchData]=\"batchData\" [pathSet]=\"pathSet\" [rootId]=\"contextId\"\n                    [rootContentType]=\"contextPath\" [batchId]=\"batchId\" [config]=\"config\" [content]=\"content\">\n                </ws-widget-app-app-toc-sessions-new>\n            </ng-container>\n            <ng-container *ngIf=\"content?.primaryCategory !== nsContent?.EPrimaryCategory?.BLENDED_PROGRAM\">\n                <ng-container [ngTemplateOutlet]=\"contentBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <!-- {{pathSet|json}} -->\n    <ng-template #contentBlock>\n        <ng-container *ngIf=\"!contentLoader\">\n            <ng-container *ngIf=\"content?.children?.length; else noChildren\">\n                <div class=\"content-card \"\n                    *ngFor=\"let card of content?.children; trackBy: contentTrackBy; let i = index;\"\n                    [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n                    <!-- {{card|json}} -->\n                    <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                        [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                        [rootContentType]=\"contextPath\" [content]=\"card\" [mlCourse]=\"content\" [index]=\"i+1\"\n                        [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\" [batchData]=\"batchData\"\n                        [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n                </div>\n            </ng-container>\n            <ng-template #noChildren>\n                <div *ngIf=\"!isPlayable\"\n                    class=\"ws-mat-primary-default-text ws-mat-primary-lite-background px-6 py-8 font-normal text-base noChildren\">\n                    The preview for this type of content is unavailable. Please click on Start button above to view.\n                </div>\n                <!-- <ng-container *ngIf=\"isPlayable\" [sbUiResolverWidget]=\"contentPlayWidgetConfig\"></ng-container> -->\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"contentLoader\">\n            <ws-widget-app-toc-content-card-v2-skeleton></ws-widget-app-toc-content-card-v2-skeleton>\n        </ng-container>\n    </ng-template>\n    <div *ngIf=\"isPreAssessment\">\n        <div class=\"content-card \"\n            *ngFor=\"let card of content?.preEnrolmentResources; trackBy: identifier; let i = index;\"\n            [ngClass]=\"{ 'content-active': pathSet && pathSet.has(card.identifier)  && isEnrolled}\">\n            <!-- {{card|json}} -->\n            <ws-widget-app-toc-content-card-v2 [forPreview]=\"forPreview\" [expandAll]=\"expandAll\"\n                [componentName]=\"componentName\" [expandActive]=\"true\" [rootId]=\"contextId\" [batchId]=\"batchId\"\n                [rootContentType]=\"contextPath\" [isPreAssessment]=\"isPreAssessment\" [content]=\"card\"\n                [mlCourse]=\"content\" [index]=\"i+1\" [pathSet]=\"pathSet\" [hierarchyMapData]=\"hierarchyMapData\"\n                [batchData]=\"batchData\" [baseContentReadData]=\"baseContentReadData\"></ws-widget-app-toc-content-card-v2>\n        </div>\n    </div>\n</div>", styles: [".bggrey{background-color:#eff3f9}.content-container{min-height:800px}.content-accordion .content-panel{box-shadow:none}.content-accordion .content-header{padding:20px;background-color:#fff;border:none;box-shadow:none}.content-key-values{color:#0009}.content-key-values mat-icon{width:14px;height:14px;font-size:14px;color:#0006}.main-container{width:100%;box-sizing:border-box}.main-container .toc-section{display:flex;justify-content:space-between;padding-bottom:12px}.main-container .content-card{background:#fff;border:1px solid rgb(221,221,221);overflow:hidden;position:relative}.main-container .content-card.content-active{border:1px solid #1a4ca1}.main-container .noChildren{color:#222!important}@media only screen and (max-width: 959px){.main-container{width:100%;padding-right:0;margin-bottom:32px}}::ng-deep .mat-expansion-indicator{display:none!important}.mat-panel-indicator{width:28px;height:28px;font-size:28px}.tab-list .tab-data{border-radius:18px;border:1px solid rgba(0,0,0,.08);opacity:1;background-color:#e5e9ef;padding:6px 16px;cursor:pointer}.tab-list .tab-data span{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:14px;font-weight:400;font-style:Regular;letter-spacing:.25px;text-align:left;line-height:20px}.tab-list .active-tab{border-radius:18px;border:1px solid rgb(27,76,161);opacity:1;background-color:#dee6f2}.tab-list .active-tab span{color:#1b4ca1}.tab-list .disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.milestone-wrapper{--milestone-size: 33px;--milestone-border: 3px;padding:16px;background:#fff;display:flex;align-items:center;margin-top:16px}.learning-path-header{padding-right:16px}.learning-path-title{font-size:18px;font-weight:700;color:#000000de;margin:0 0 4px;font-family:Lato-Bold,Lato,sans-serif}.learning-path-subtitle{font-size:14px;font-weight:400;color:#0009;margin:0;font-family:Lato-Regular,Lato,sans-serif}.milestone-list{display:flex;align-items:flex-start;justify-content:space-between;list-style:none;margin:0;gap:12px;flex:1}.milestone-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;position:relative}.milestone-item:after{content:\"\";position:absolute;top:calc(var(--milestone-size) / 2);left:50%;right:-50%;height:3px;background:#e0e0e0;border-top:3px dotted #BDBDBD;background:transparent;z-index:0}.milestone-item.completed:after{background:linear-gradient(90deg,#efa34f,#f3962f);border:none}.milestone-item:last-child:after{display:none}.milestone-circle{width:var(--milestone-size);height:var(--milestone-size);min-width:var(--milestone-size);border-radius:50%;background:#fff;border:var(--milestone-border) solid #F3962F;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;box-shadow:0 2px 8px #00000014;transition:all .2s ease}.milestone-item.completed .milestone-circle{background:#fff;border-color:#f3962f;box-shadow:0 4px 12px #efa34f4d}.milestone-checkmark{width:80%;height:80%;object-fit:contain}.milestone-index{font-weight:700;font-size:18px;color:#757575}.milestone-item.completed .milestone-index{color:#fff}.milestone-label{margin-top:12px;font-size:14px;line-height:1.4;color:#000000de;word-wrap:break-word;white-space:normal;font-weight:500}.milestone-item:focus-within .milestone-circle,.milestone-item:hover .milestone-circle{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #00000026}.milestone-item.completed:hover .milestone-circle{box-shadow:0 6px 20px #efa34f66}@media (max-width: 768px){.milestone-wrapper{--milestone-size: 48px;padding:20px 12px 28px}.milestone-list{gap:8px;padding:0 8px}.milestone-label{font-size:12px;max-width:100px}.milestone-index{font-size:16px}}@media (max-width: 480px){.milestone-wrapper{--milestone-size: 40px;padding:16px 8px 24px}.milestone-list{gap:6px;padding:0 4px}.milestone-label{font-size:11px;max-width:80px;margin-top:8px}.milestone-index{font-size:14px}.milestone-item:after{height:2px;border-top-width:2px}}.milestone-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;word-break:break-word}::ng-deep .multiline-tooltip{white-space:pre-wrap!important;max-width:400px!important;word-break:break-word!important;line-height:1.4!important}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.AppTocService }, { type: i3.ConfigurationsService }]; }, propDecorators: { batchId: [{
                type: Input
            }], content: [{
                type: Input
            }], forPreview: [{
                type: Input
            }], resumeData: [{
                type: Input
            }], batchData: [{
                type: Input
            }], skeletonLoader: [{
                type: Input
            }], tocStructure: [{
                type: Input
            }], config: [{
                type: Input
            }], hierarchyMapData: [{
                type: Input
            }], pathSet: [{
                type: Input
            }], componentName: [{
                type: Input
            }], isPreAssessment: [{
                type: Input
            }], baseContentReadData: [{
                type: Input
            }], contentReadData: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 