import { Component, Input } from '@angular/core';
import { NsContent } from '../../_services/widget-content.model';
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/platform-browser";
import * as i5 from "../../services/access-control.service";
import * as i6 from "@angular/common";
import * as i7 from "@angular/material/icon";
import * as i8 from "@angular/material/legacy-button";
import * as i9 from "@angular/material/legacy-card";
import * as i10 from "@angular/material/legacy-chips";
import * as i11 from "@angular/material/divider";
import * as i12 from "@angular/material/expansion";
import * as i13 from "../../_collection/_common/user-image/user-image.component";
import * as i14 from "../../_collection/_common/player-brief/player-brief.component";
export class AppTocOverviewComponent {
    constructor(route, tocSharedSvc, configSvc, domSanitizer, authAccessControlSvc) {
        this.route = route;
        this.tocSharedSvc = tocSharedSvc;
        this.configSvc = configSvc;
        this.domSanitizer = domSanitizer;
        this.authAccessControlSvc = authAccessControlSvc;
        this.content = null;
        this.routeSubscription = null;
        this.viewMoreRelatedTopics = false;
        this.hasTocStructure = false;
        this.tocStructure = null;
        this.askAuthorEnabled = true;
        this.trainingLHubEnabled = false;
        this.body = null;
        this.forPreview = false;
        this.tocConfig = null;
        this.contentParents = {};
        this.objKeys = Object.keys;
        if (this.configSvc.restrictedFeatures) {
            this.askAuthorEnabled = !this.configSvc.restrictedFeatures.has('askAuthor');
            this.trainingLHubEnabled = !this.configSvc.restrictedFeatures.has('trainingLHub');
        }
    }
    ngOnInit() {
        if (!this.forPreview) {
            this.forPreview = window.location.href.includes('/author/');
        }
        if (this.route && this.route.parent) {
            this.routeSubscription = this.route.parent.data.subscribe((data) => {
                this.initData(data);
                this.tocConfig = data.pageData.data;
            });
        }
    }
    ngOnDestroy() {
        if (this.routeSubscription) {
            this.routeSubscription.unsubscribe();
        }
    }
    get showSubtitleOnBanner() {
        return this.tocSharedSvc.subtitleOnBanners;
    }
    get showDescription() {
        if (this.content && !this.content.body) {
            return true;
        }
        return this.tocSharedSvc.showDescription;
    }
    initData(data) {
        const initData = this.tocSharedSvc.initData(data);
        this.content = initData.content;
        this.body = this.domSanitizer.bypassSecurityTrustHtml(this.content && this.content.body
            ? this.forPreview
                ? this.authAccessControlSvc.proxyToAuthoringUrl(this.content.body)
                : this.content.body
            : '');
        this.contentParents = {};
        this.resetAndFetchTocStructure();
        this.getTrainingCount();
        this.getContentParent();
    }
    getContentParent() {
        if (this.content) {
            const contentParentReq = {
                fields: ['contentType', 'name'],
            };
            this.tocSharedSvc
                .fetchContentParent(this.content.identifier, contentParentReq, this.forPreview)
                .subscribe(res => {
                this.parseContentParent(res);
            }, _err => {
                this.contentParents = {};
            });
        }
    }
    parseContentParent(content) {
        content.collections.forEach(collection => {
            if (!this.contentParents.hasOwnProperty(collection.contentType)) {
                this.contentParents[collection.contentType] = [];
            }
            this.contentParents[collection.contentType].push(collection);
            this.parseContentParent(collection);
        });
    }
    resetAndFetchTocStructure() {
        this.tocStructure = {
            assessment: 0,
            finalTest: 0,
            course: 0,
            handsOn: 0,
            interactiveVideo: 0,
            learningModule: 0,
            other: 0,
            pdf: 0,
            survey: 0,
            podcast: 0,
            practiceTest: 0,
            quiz: 0,
            video: 0,
            webModule: 0,
            webPage: 0,
            youtube: 0,
            interactivecontent: 0,
            offlineSession: 0,
        };
        if (this.content) {
            this.hasTocStructure = false;
            this.tocStructure.learningModule = this.content.primaryCategory === NsContent.EPrimaryCategory.MODULE ? -1 : 0;
            this.tocStructure.course = this.content.primaryCategory === NsContent.EPrimaryCategory.COURSE ? -1 : 0;
            this.tocStructure = this.tocSharedSvc.getTocStructure(this.content, this.tocStructure);
            for (const progType in this.tocStructure) {
                if (this.tocStructure[progType] > 0) {
                    this.hasTocStructure = true;
                    break;
                }
            }
        }
    }
    // For Learning Hub trainings
    getTrainingCount() {
        if (this.trainingLHubEnabled &&
            this.content &&
            // this.trainingSvc.isValidTrainingContent(this.content) &&
            !this.forPreview) {
            // this.trainingLHubCount$ = this.trainingApi
            //   .getTrainingCount(this.content.identifier)
            //   .pipe(retry(2))
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocOverviewComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.AppTocService }, { token: i3.ConfigurationsService }, { token: i4.DomSanitizer }, { token: i5.AccessControlService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocOverviewComponent, selector: "ws-app-app-toc-overview", inputs: { forPreview: "forPreview" }, ngImport: i0, template: "<div class=\"flex flex-between flex-wrapped mt-4\">\n  <div class=\"meta-section\">\n    <!-- Description : Conditional : If not shown here, will be shown over banner -->\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.description?.enabled &&\n        showDescription &&\n        showSubtitleOnBanner &&\n        content?.description\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.description?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1\" [innerHTML]=\"content?.description\"></div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Content Body -->\n    <mat-card *ngIf=\"tocConfig?.overview?.body?.enabled && content?.body\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.body?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"break-words\" [innerHTML]=\"body\"></div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Learning objective -->\n    <mat-card *ngIf=\"tocConfig?.overview?.learningObjective?.enabled && content?.learningObjective\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.learningObjective?.displayName }}</h2>\n      <mat-card-content>\n        <p class=\"mat-subheading-1\" [innerHTML]=\"content?.learningObjective\"></p>\n      </mat-card-content>\n    </mat-card>\n\n    <!-- Registration instructions -->\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.registrationInstructions?.enabled &&\n        content?.registrationInstructions?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.registrationInstructions?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1 break-words\" [innerHTML]=\"content?.registrationInstructions\"></div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.preContents?.enabled && content?.preContents?.length\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.preContents?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let preContent of content?.preContents\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + preContent.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ preContent.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.postContents?.enabled && content?.postContents?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.postContents?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let postContent of content?.postContents\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + postContent.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ postContent.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.certificationList?.enabled && content?.certificationList?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.certificationList?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let certification of content?.certificationList\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + certification.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ certification.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.studyMaterials?.enabled && content?.studyMaterials?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.studyMaterials?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let studyitem of content?.studyMaterials\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + studyitem.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ studyitem.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.playgroundResources?.enabled && content?.playgroundResources?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.playgroundResources?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let playgroundResource of content?.playgroundResources\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + playgroundResource.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ playgroundResource.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.kArtifacts?.enabled && content?.kArtifacts?.length\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.kArtifacts?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let kArtifact of content?.kArtifacts\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + kArtifact.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ kArtifact.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.equivalentCertifications?.enabled &&\n        content?.equivalentCertifications?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.equivalentCertifications?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let equivalentCertification of content?.equivalentCertifications\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + equivalentCertification.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ equivalentCertification.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.softwareRequirements?.enabled && content?.softwareRequirements?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.softwareRequirements?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let softwareRequirement of content?.softwareRequirements\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [href]=\"softwareRequirement.url\" target=\"blank\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ softwareRequirement.title }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Skills -->\n    <mat-card *ngIf=\"tocConfig?.overview?.skills?.enabled && content?.skills?.length\"\n      class=\"unit-meta-item mat-app-background\">\n      <h2>{{ tocConfig?.overview?.skills?.displayName }}</h2>\n      <mat-chip-list>\n        <mat-chip *ngFor=\"let skill of content?.skills\">{{ skill.name }}</mat-chip>\n      </mat-chip-list>\n    </mat-card>\n    <!-- Requirements -->\n    <mat-card *ngIf=\"tocConfig?.overview?.preRequisites?.enabled && content?.preRequisites\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.preRequisites?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1\" [innerHTML]=\"content?.preRequisites\"></div>\n        <div class=\"margin-top-s\" *ngIf=\"content?.softwareRequirements?.length\">\n          <h3 class=\"mat-h3 margin-bottom-xs\" >Software Requirements</h3>\n          <ng-container *ngFor=\"let requirement of content?.softwareRequirements\">\n            <a *ngIf=\"requirement.url\" class=\"margin-right-s\" mat-stroked-button target=\"_blank\"\n              [href]=\"requirement.url\">\n              {{ requirement.title }}\n            </a>\n            <a mat-stroked-button class=\"margin-right-s\" *ngIf=\"!requirement?.url\">{{ requirement.title }}\n            </a>\n          </ng-container>\n        </div>\n      </mat-card-content>\n    </mat-card>\n\n    <!-- Training (LHub) -->\n    <mat-card *ngIf=\"trainingLHubEnabled && trainingLHubCount$ | async as trainingLHubCount\" class=\"unit-meta-item\">\n      <h2 >Trainings</h2>\n      <h4 class=\"mat-h4\">\n        <ng-container>{{ trainingLHubCount }}</ng-container>\n        <ng-container i18n=\"x trainings available\" *ngIf=\"trainingLHubCount > 1\">\n          trainings available</ng-container>\n        <ng-container i18n=\"1 training available\" *ngIf=\"trainingLHubCount === 1\">\n          training available</ng-container>\n      </h4>\n      <div>\n        \n      </div>\n    </mat-card>\n\n    <!-- Related Topics -->\n    <mat-card class=\"unit-meta-item\" *ngIf=\"tocConfig?.overview?.topics?.enabled && content?.topics?.length\">\n      <h2>{{ tocConfig?.overview?.topics?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex flex-between flex-wrapped\">\n          <a mat-stroked-button class=\"topic-button text-truncate\"\n            *ngFor=\"let topic of content?.topics | pipeLimitTo: (viewMoreRelatedTopics ? 24 : 6)\" [title]=\"topic?.name\"\n            [routerLink]=\"'/app/concept-graph/' + topic.identifier\">\n            {{ topic?.name }}\n          </a>\n        </div>\n        <div *ngIf=\"content?.topics?.length > 6\" class=\"text-right margin-top-xs\">\n          <a mat-button (click)=\"viewMoreRelatedTopics = !viewMoreRelatedTopics\">\n            <span *ngIf=\"!viewMoreRelatedTopics\" >View More</span>\n            <span *ngIf=\"viewMoreRelatedTopics\" >View Less</span>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Authors on small screen -->\n    <div class=\"block sm:hidden margin-bottom-m\" *ngIf=\"content?.creatorDetails?.length\">\n      <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n          authors: content?.creatorDetails,\n          title: 'AUTHOR'\n        }\">\n      </ng-container>\n    </div>\n    <!-- Contacts on small screen -->\n    <div class=\"block sm:hidden margin-bottom-m\" *ngIf=\"content?.creatorContacts?.length\">\n      <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n          authors: content?.creatorContacts,\n          title: 'CONTACT'\n        }\">\n      </ng-container>\n    </div>\n    <div class=\"margin-bottom-m\" *ngIf=\"objKeys(contentParents).length\">\n      <mat-card>\n        <h2 >This content is part of</h2>\n      </mat-card>\n      <mat-accordion>\n        <ng-container *ngFor=\"let key of objKeys(contentParents)\">\n          <mat-expansion-panel>\n            <mat-expansion-panel-header>\n              {{ key }}\n            </mat-expansion-panel-header>\n            <div class=\"flex mb-1\" *ngFor=\"let content of contentParents[key]\">\n              <span class=\"mr-1\">\n                <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n              </span>\n              <a class=\"ws-mat-primary-text\" [routerLink]=\"\n                  content.status !== 'Live'\n                    ? '/author' + '/toc/' + content.identifier\n                    : '/app' + '/toc/' + content.identifier\n                \">\n                <p class=\"margin-remove-bottom mat-subheading-1\">{{ content.name }}</p>\n              </a>\n            </div>\n          </mat-expansion-panel>\n        </ng-container>\n      </mat-accordion>\n    </div>\n  </div>\n  <!-- At a glance section -->\n  <div class=\"info-section\">\n    <ws-widget-player-brief [forPreview]=\"forPreview\" [content]=\"content\" [hasTocStructure]=\"hasTocStructure\"\n      [tocStructure]=\"tocStructure\">\n    </ws-widget-player-brief>\n  </div>\n</div>\n\n<ng-template #creators let-authors=\"authors\" let-title=\"title\">\n  <mat-card>\n    <h2 *ngIf=\"title === 'AUTHOR'\">Authors</h2>\n    <h2 *ngIf=\"title === 'CONTACT'\">Curator/Contact</h2>\n    <mat-divider></mat-divider>\n    <div *ngFor=\"let author of authors\" class=\"author\">\n      <ws-widget-user-image class=\"author-image\" [imageType]=\"'name-initial'\" [userName]=\"author.name || ''\"\n        [email]=\"author.email\"></ws-widget-user-image>\n      <div class=\"width-expand flex flex-middle flex-between\">\n        <p class=\"margin-remove text-md font-normal\">{{ author.name }}</p>\n        <ws-widget-btn-mail-user *ngIf=\"askAuthorEnabled\" [widgetData]=\"{ content: content, emails: [author.email] }\">\n        </ws-widget-btn-mail-user>\n      </div>\n    </div>\n  </mat-card>\n</ng-template>\n", styles: [".meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px}@media only screen and (max-width: 599px){.meta-section{width:100%}}.topic-button{display:block;width:32%;margin:4px 0}@media only screen and (max-width: 599px){.topic-button{width:100%}}.info-section{width:28%;min-width:250px;margin-left:24px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0}}.info-section2{width:28%;min-width:250px;margin-right:24px}@media only screen and (max-width: 599px){.info-section2{width:100%;margin-right:0}}.info-container{padding:12px 16px;margin-bottom:16px}.info-container .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.author{padding:12px 0;display:flex}.author .author-image{margin-right:12px;height:44px;width:44px}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i9.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i10.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i10.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i12.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i12.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: i13.UserImageComponent, selector: "ws-widget-user-image", inputs: ["email", "userId", "userName", "imageType", "imageUrl", "imageSize"] }, { kind: "component", type: i14.PlayerBriefComponent, selector: "ws-widget-player-brief", inputs: ["content", "hasTocStructure", "tocStructure", "isPreviewMode", "forPreview", "askAuthorEnabled"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PipeLimitToPipe, name: "pipeLimitTo" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocOverviewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-app-app-toc-overview', template: "<div class=\"flex flex-between flex-wrapped mt-4\">\n  <div class=\"meta-section\">\n    <!-- Description : Conditional : If not shown here, will be shown over banner -->\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.description?.enabled &&\n        showDescription &&\n        showSubtitleOnBanner &&\n        content?.description\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.description?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1\" [innerHTML]=\"content?.description\"></div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Content Body -->\n    <mat-card *ngIf=\"tocConfig?.overview?.body?.enabled && content?.body\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.body?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"break-words\" [innerHTML]=\"body\"></div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Learning objective -->\n    <mat-card *ngIf=\"tocConfig?.overview?.learningObjective?.enabled && content?.learningObjective\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.learningObjective?.displayName }}</h2>\n      <mat-card-content>\n        <p class=\"mat-subheading-1\" [innerHTML]=\"content?.learningObjective\"></p>\n      </mat-card-content>\n    </mat-card>\n\n    <!-- Registration instructions -->\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.registrationInstructions?.enabled &&\n        content?.registrationInstructions?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.registrationInstructions?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1 break-words\" [innerHTML]=\"content?.registrationInstructions\"></div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.preContents?.enabled && content?.preContents?.length\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.preContents?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let preContent of content?.preContents\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + preContent.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ preContent.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.postContents?.enabled && content?.postContents?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.postContents?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let postContent of content?.postContents\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + postContent.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ postContent.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.certificationList?.enabled && content?.certificationList?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.certificationList?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let certification of content?.certificationList\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + certification.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ certification.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.studyMaterials?.enabled && content?.studyMaterials?.length\"\n      class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.studyMaterials?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let studyitem of content?.studyMaterials\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + studyitem.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ studyitem.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.playgroundResources?.enabled && content?.playgroundResources?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.playgroundResources?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let playgroundResource of content?.playgroundResources\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + playgroundResource.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ playgroundResource.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"tocConfig?.overview?.kArtifacts?.enabled && content?.kArtifacts?.length\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.kArtifacts?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let kArtifact of content?.kArtifacts\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + kArtifact.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ kArtifact.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.equivalentCertifications?.enabled &&\n        content?.equivalentCertifications?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.equivalentCertifications?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let equivalentCertification of content?.equivalentCertifications\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [routerLink]=\"'/app/toc/' + equivalentCertification.identifier\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ equivalentCertification.name }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <mat-card *ngIf=\"\n        tocConfig?.overview?.softwareRequirements?.enabled && content?.softwareRequirements?.length\n      \" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.softwareRequirements?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex mb-1\" *ngFor=\"let softwareRequirement of content?.softwareRequirements\">\n          <span class=\"mr-1\">\n            <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n          </span>\n          <a class=\"ws-mat-primary-text\" [href]=\"softwareRequirement.url\" target=\"blank\">\n            <p class=\"margin-remove-bottom mat-subheading-1\">{{ softwareRequirement.title }}</p>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Skills -->\n    <mat-card *ngIf=\"tocConfig?.overview?.skills?.enabled && content?.skills?.length\"\n      class=\"unit-meta-item mat-app-background\">\n      <h2>{{ tocConfig?.overview?.skills?.displayName }}</h2>\n      <mat-chip-list>\n        <mat-chip *ngFor=\"let skill of content?.skills\">{{ skill.name }}</mat-chip>\n      </mat-chip-list>\n    </mat-card>\n    <!-- Requirements -->\n    <mat-card *ngIf=\"tocConfig?.overview?.preRequisites?.enabled && content?.preRequisites\" class=\"unit-meta-item\">\n      <h2>{{ tocConfig?.overview?.preRequisites?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"mat-subheading-1\" [innerHTML]=\"content?.preRequisites\"></div>\n        <div class=\"margin-top-s\" *ngIf=\"content?.softwareRequirements?.length\">\n          <h3 class=\"mat-h3 margin-bottom-xs\" >Software Requirements</h3>\n          <ng-container *ngFor=\"let requirement of content?.softwareRequirements\">\n            <a *ngIf=\"requirement.url\" class=\"margin-right-s\" mat-stroked-button target=\"_blank\"\n              [href]=\"requirement.url\">\n              {{ requirement.title }}\n            </a>\n            <a mat-stroked-button class=\"margin-right-s\" *ngIf=\"!requirement?.url\">{{ requirement.title }}\n            </a>\n          </ng-container>\n        </div>\n      </mat-card-content>\n    </mat-card>\n\n    <!-- Training (LHub) -->\n    <mat-card *ngIf=\"trainingLHubEnabled && trainingLHubCount$ | async as trainingLHubCount\" class=\"unit-meta-item\">\n      <h2 >Trainings</h2>\n      <h4 class=\"mat-h4\">\n        <ng-container>{{ trainingLHubCount }}</ng-container>\n        <ng-container i18n=\"x trainings available\" *ngIf=\"trainingLHubCount > 1\">\n          trainings available</ng-container>\n        <ng-container i18n=\"1 training available\" *ngIf=\"trainingLHubCount === 1\">\n          training available</ng-container>\n      </h4>\n      <div>\n        \n      </div>\n    </mat-card>\n\n    <!-- Related Topics -->\n    <mat-card class=\"unit-meta-item\" *ngIf=\"tocConfig?.overview?.topics?.enabled && content?.topics?.length\">\n      <h2>{{ tocConfig?.overview?.topics?.displayName }}</h2>\n      <mat-card-content>\n        <div class=\"flex flex-between flex-wrapped\">\n          <a mat-stroked-button class=\"topic-button text-truncate\"\n            *ngFor=\"let topic of content?.topics | pipeLimitTo: (viewMoreRelatedTopics ? 24 : 6)\" [title]=\"topic?.name\"\n            [routerLink]=\"'/app/concept-graph/' + topic.identifier\">\n            {{ topic?.name }}\n          </a>\n        </div>\n        <div *ngIf=\"content?.topics?.length > 6\" class=\"text-right margin-top-xs\">\n          <a mat-button (click)=\"viewMoreRelatedTopics = !viewMoreRelatedTopics\">\n            <span *ngIf=\"!viewMoreRelatedTopics\" >View More</span>\n            <span *ngIf=\"viewMoreRelatedTopics\" >View Less</span>\n          </a>\n        </div>\n      </mat-card-content>\n    </mat-card>\n    <!-- Authors on small screen -->\n    <div class=\"block sm:hidden margin-bottom-m\" *ngIf=\"content?.creatorDetails?.length\">\n      <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n          authors: content?.creatorDetails,\n          title: 'AUTHOR'\n        }\">\n      </ng-container>\n    </div>\n    <!-- Contacts on small screen -->\n    <div class=\"block sm:hidden margin-bottom-m\" *ngIf=\"content?.creatorContacts?.length\">\n      <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n          authors: content?.creatorContacts,\n          title: 'CONTACT'\n        }\">\n      </ng-container>\n    </div>\n    <div class=\"margin-bottom-m\" *ngIf=\"objKeys(contentParents).length\">\n      <mat-card>\n        <h2 >This content is part of</h2>\n      </mat-card>\n      <mat-accordion>\n        <ng-container *ngFor=\"let key of objKeys(contentParents)\">\n          <mat-expansion-panel>\n            <mat-expansion-panel-header>\n              {{ key }}\n            </mat-expansion-panel-header>\n            <div class=\"flex mb-1\" *ngFor=\"let content of contentParents[key]\">\n              <span class=\"mr-1\">\n                <mat-icon class=\"align-bottom\">web_asset</mat-icon>\n              </span>\n              <a class=\"ws-mat-primary-text\" [routerLink]=\"\n                  content.status !== 'Live'\n                    ? '/author' + '/toc/' + content.identifier\n                    : '/app' + '/toc/' + content.identifier\n                \">\n                <p class=\"margin-remove-bottom mat-subheading-1\">{{ content.name }}</p>\n              </a>\n            </div>\n          </mat-expansion-panel>\n        </ng-container>\n      </mat-accordion>\n    </div>\n  </div>\n  <!-- At a glance section -->\n  <div class=\"info-section\">\n    <ws-widget-player-brief [forPreview]=\"forPreview\" [content]=\"content\" [hasTocStructure]=\"hasTocStructure\"\n      [tocStructure]=\"tocStructure\">\n    </ws-widget-player-brief>\n  </div>\n</div>\n\n<ng-template #creators let-authors=\"authors\" let-title=\"title\">\n  <mat-card>\n    <h2 *ngIf=\"title === 'AUTHOR'\">Authors</h2>\n    <h2 *ngIf=\"title === 'CONTACT'\">Curator/Contact</h2>\n    <mat-divider></mat-divider>\n    <div *ngFor=\"let author of authors\" class=\"author\">\n      <ws-widget-user-image class=\"author-image\" [imageType]=\"'name-initial'\" [userName]=\"author.name || ''\"\n        [email]=\"author.email\"></ws-widget-user-image>\n      <div class=\"width-expand flex flex-middle flex-between\">\n        <p class=\"margin-remove text-md font-normal\">{{ author.name }}</p>\n        <ws-widget-btn-mail-user *ngIf=\"askAuthorEnabled\" [widgetData]=\"{ content: content, emails: [author.email] }\">\n        </ws-widget-btn-mail-user>\n      </div>\n    </div>\n  </mat-card>\n</ng-template>\n", styles: [".meta-section{flex:1;min-width:1px}.meta-section .unit-meta-item{border-radius:2px;box-sizing:border-box;margin-bottom:16px}@media only screen and (max-width: 599px){.meta-section{width:100%}}.topic-button{display:block;width:32%;margin:4px 0}@media only screen and (max-width: 599px){.topic-button{width:100%}}.info-section{width:28%;min-width:250px;margin-left:24px}@media only screen and (max-width: 599px){.info-section{width:100%;margin-left:0}}.info-section2{width:28%;min-width:250px;margin-right:24px}@media only screen and (max-width: 599px){.info-section2{width:100%;margin-right:0}}.info-container{padding:12px 16px;margin-bottom:16px}.info-container .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.author{padding:12px 0;display:flex}.author .author-image{margin-right:12px;height:44px;width:44px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.AppTocService }, { type: i3.ConfigurationsService }, { type: i4.DomSanitizer }, { type: i5.AccessControlService }]; }, propDecorators: { forPreview: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 