import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@sunbird-cb/utils-v2";
import * as i2 from "@angular/router";
import * as i3 from "../../../_services/widget-content.service";
import * as i4 from "@angular/common";
import * as i5 from "../display-content-type/display-content-type.component";
import * as i6 from "@angular/material/divider";
import * as i7 from "@angular/material/legacy-chips";
import * as i8 from "@angular/material/icon";
import * as i9 from "@angular/material/legacy-card";
import * as i10 from "../user-image/user-image.component";
import * as i11 from "@angular/material/legacy-button";
import * as i12 from "../mark-as-complete/mark-as-complete.component";
import * as i13 from "@ngx-translate/core";
export class PlayerBriefComponent {
    constructor(configSvc, utilitySvc, router, widgetContentSvc, langtranslations) {
        this.configSvc = configSvc;
        this.utilitySvc = utilitySvc;
        this.router = router;
        this.widgetContentSvc = widgetContentSvc;
        this.langtranslations = langtranslations;
        this.content = null;
        this.hasTocStructure = false;
        this.tocStructure = null;
        this.isPreviewMode = false;
        this.forPreview = false;
        this.askAuthorEnabled = false;
        this.tocConfig = null;
        this.showMoreGlance = false;
        this.isDownloadableDesktop = false;
        this.isDownloadableIos = false;
        this.isDownloadableAndroid = false;
    }
    ngOnInit() {
        this.getTocConfig();
        if (this.configSvc.restrictedFeatures) {
            this.isDownloadableIos = this.configSvc.restrictedFeatures.has('iosDownload');
            this.isDownloadableAndroid = this.configSvc.restrictedFeatures.has('androidDownload');
            this.isDownloadableDesktop = this.configSvc.restrictedFeatures.has('downloadRequest');
        }
    }
    get isDownloadable() {
        if (this.configSvc.instanceConfig &&
            this.configSvc.instanceConfig.isDownloadableSource &&
            this.configSvc.instanceConfig.isDownloadableAndroidResource &&
            this.content &&
            this.content.sourceName &&
            this.configSvc.instanceConfig.isDownloadableIosResource &&
            Object.keys(this.configSvc.instanceConfig.isDownloadableSource).includes(this.content.sourceName.toLowerCase())) {
            const sourceShortName = this.content.sourceName || '';
            // tslint:disable-next-line:max-line-length
            if (!this.utilitySvc.isMobile &&
                !this.isDownloadableDesktop &&
                this.configSvc.instanceConfig.isDownloadableSource[sourceShortName.toLowerCase()].includes(this.content.resourceType.toLowerCase())) {
                return true;
            }
            if (this.utilitySvc.isIos &&
                !this.isDownloadableIos &&
                // tslint:disable-next-line: ter-computed-property-spacing
                this.configSvc.instanceConfig.isDownloadableIosResource[sourceShortName.toLowerCase()
                // tslint:disable-next-line: ter-computed-property-spacing
                ].includes(this.content.resourceType.toLowerCase())) {
                return true;
            }
            if (this.utilitySvc.isAndroid &&
                !this.isDownloadableAndroid &&
                // tslint:disable-next-line: ter-computed-property-spacing
                this.configSvc.instanceConfig.isDownloadableAndroidResource[sourceShortName.toLowerCase()
                // tslint:disable-next-line: ter-computed-property-spacing
                ].includes(this.content.resourceType.toLowerCase())) {
                return true;
            }
            return false;
        }
        return false;
    }
    goToContent(id) {
        this.router.navigate([`/app/toc/${id}/overview`]);
    }
    getViewCount(content) {
        if (content && this.configSvc.rootOrg && content.viewCount) {
            return content.viewCount[this.configSvc.rootOrg];
        }
        return 0;
    }
    getTocConfig() {
        const url = `${this.configSvc.sitePath}/feature/toc.json`;
        this.widgetContentSvc.fetchConfig(url).subscribe(data => {
            this.tocConfig = data;
            this.widgetContentSvc.updateTocConfig(data);
        });
    }
    download() {
        if (this.content && !this.forPreview) {
            const link = document.createElement('a');
            link.download = this.content.name;
            link.target = '_self';
            // Construct the URI
            link.href = this.content.artifactUrl || '';
            document.body.appendChild(link);
            link.click();
            // Cleanup the DOM
            document.body.removeChild(link);
        }
        // delete link;
    }
    parseJsonData(s) {
        try {
            const parsedString = JSON.parse(s);
            return parsedString;
        }
        catch {
            return [];
        }
    }
    translateLabels(label, type) {
        return this.langtranslations.translateLabel(label, type, '');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlayerBriefComponent, deps: [{ token: i1.ConfigurationsService }, { token: i1.UtilityService }, { token: i2.Router }, { token: i3.WidgetContentService }, { token: i1.MultilingualTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PlayerBriefComponent, selector: "ws-widget-player-brief", inputs: { content: "content", hasTocStructure: "hasTocStructure", tocStructure: "tocStructure", isPreviewMode: "isPreviewMode", forPreview: "forPreview", askAuthorEnabled: "askAuthorEnabled" }, ngImport: i0, template: "<div class=\"md:px-2\">\n  <ws-widget-mark-as-complete [forPreview]=\"forPreview\" [content]=\"content\"></ws-widget-mark-as-complete>\n  <ng-container *ngIf=\"content && isDownloadable\">\n    <mat-card class=\"mb-4\">\n      <button mat-button color=\"primary\" (click)=\"download()\">\n        <mat-icon>cloud_download</mat-icon>\n        <span class=\"px-2\">{{ 'apptochome.download' | translate }}</span>\n      </button>\n    </mat-card>\n  </ng-container>\n  <mat-card class=\"ws-mat-primary-lite-background-on-day ws-mat-primary-border-top-bolder info-container\">\n    <h2 >{{ 'apptochome.atGlance' | translate }}</h2>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.displayContentType?.enabled && content?.displayContentType\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.displayContentType?.displayName, 'apptoc') }}</h3>\n      <ws-widget-display-content-type *ngIf=\"content?.contentType !== contentTypes.RESOURCE\"\n        class=\"ws-mat-accent-text width-expand mat-body-strong\" [displayContentType]=\"content?.displayContentType\">\n      </ws-widget-display-content-type>\n      <div *ngIf=\"content?.contentType === contentTypes.RESOURCE\"\n        class=\"ws-mat-accent-text width-expand mat-body-strong\">\n        {{ content?.resourceType }}\n      </div>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.displayContentType?.enabled && content?.displayContentType\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.complexityLevel?.enabled && content?.complexityLevel\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.complexityLevel?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.complexityLevel }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.complexityLevel?.enabled && content?.complexityLevel\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.duration?.enabled && content?.duration\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.duration?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.duration | pipeDurationTransform: 'hms' }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.duration?.enabled && content?.duration\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.cost?.enabled\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.cost?.displayName, 'apptoc') }}</h3>\n      <h3 *ngIf=\"content?.exclusiveContent\" class=\"ws-mat-accent-text width-expand\">{{'apptochome.paidContent' | translate}}</h3>\n      <h3 *ngIf=\"!content?.exclusiveContent\" class=\"ws-mat-accent-text width-expand\">{{'apptochome.free' | translate}}</h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.cost?.enabled\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.viewCount?.enabled && content?.viewCount && configSvc?.rootOrg\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.viewCount?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ getViewCount(content) | pipeCountTransform }}\n        <ng-container *ngIf=\"content?.uniqueLearners\">\n          ({{ content?.uniqueLearners | pipeCountTransform }}\n          <ng-container >Unique)</ng-container>\n        </ng-container>\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.viewCount?.enabled && content?.viewCount && configSvc?.rootOrg\">\n    </mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.sourceShortName?.enabled && content?.sourceShortName\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.sourceShortName?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.sourceShortName }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.sourceShortName?.enabled && content?.sourceShortName\"></mat-divider>\n    <!-- Structure -->\n    <div class=\"info-item\"\n      *ngIf=\"tocConfig?.atAGlance?.structure?.enabled && hasTocStructure && content?.children?.length\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.structure?.displayName, 'apptoc') }}</h3>\n      <div class=\"ws-mat-accent-text width-expand\">\n        <h3 *ngIf=\"tocStructure?.course > 0\">\n          <ng-container>{{ tocStructure?.course }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.course === 1\" > {{'apptochome.course1' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.course > 1\" > {{'apptochome.courses1' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.learningModule > 0\">\n          <ng-container>{{ tocStructure?.learningModule }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.learningModule === 1\" > {{'apptochome.module' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.learningModule > 1\" > {{'apptochome.modules' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.video > 0\">\n          <ng-container>{{ tocStructure?.video }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.video === 1\" > {{'apptochome.video' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.video > 1\" > {{'apptochome.videos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.interactiveVideo > 0\">\n          <ng-container>{{ tocStructure?.interactiveVideo }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.interactiveVideo === 1\" >\n            {{'playerbrief.interactiveVideo' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.interactiveVideo > 1\" >\n            {{'playerbrief.interactiveVideos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.youtube > 0\">\n          <ng-container>{{ tocStructure?.youtube }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.youtube === 1\" > {{'playerbrief.youtubeVideo' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.youtube > 1\" > {{'playerbrief.youtubeVideos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.pdf > 0\">\n          <ng-container>{{ tocStructure?.pdf }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.pdf === 1\" > {{'apptochome.pdf' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.pdf > 1\" > {{'apptochome.pdfs' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.podcast > 0\">\n          <ng-container>{{ tocStructure?.podcast }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.podcast === 1\" > {{'playerbrief.podcast' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.podcast > 1\" > {{'playerbrief.podcasts' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.webModule > 0\">\n          <ng-container>{{ tocStructure?.webModule }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webModule === 1\" > {{'playerbrief.webModule' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webModule > 1\" > {{'playerbrief.webModules' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.webPage > 0\">\n          <ng-container>{{ tocStructure?.webPage }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webPage === 1\" > {{'apptochome.webPage' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webPage > 1\" > {{'apptochome.webPages' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.quiz > 0\">\n          <ng-container>{{ tocStructure?.quiz }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.quiz === 1\" > {{'playerbrief.quiz' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.quiz > 1\" > {{'playerbrief.quizzes' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.assessment > 0\">\n          <ng-container>{{ tocStructure?.assessment }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.assessment === 1\" > {{'apptochome.assessment' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.assessment > 1\" > {{'apptochome.assessments' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.other > 0\">\n          <ng-container>{{ tocStructure?.other }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.other === 1\" > {{'apptochome.otherItem' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.other > 1\" > {{'apptochome.otherItems' | translate}}</ng-container>\n        </h3>\n      </div>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.structure?.enabled && hasTocStructure && content?.children?.length\">\n    </mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.lastUpdatedOn?.enabled && content?.lastUpdatedOn\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.lastUpdatedOn?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.lastUpdatedOn | date }}\n      </h3>\n    </div>\n    <ng-container *ngIf=\"showMoreGlance\">\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.lastUpdatedOn?.enabled && content?.lastUpdatedOn\"></mat-divider>\n      <div class=\"info-item\"\n        *ngIf=\"tocConfig?.atAGlance?.expiryDate?.enabled && content?.expiryDate && content?.expiryDate?.startsWith('20')\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.expiryDate?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.expiryDate | date }}\n        </h3>\n      </div>\n      <mat-divider\n        *ngIf=\"tocConfig?.atAGlance?.expiryDate?.enabled && content?.expiryDate && content?.expiryDate?.startsWith('20')\">\n      </mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.learningMode?.enabled && content?.learningMode\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.learningMode?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.learningMode }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.learningMode?.enabled && content?.learningMode\"></mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.region?.enabled && content?.region?.length\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.region?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.region }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.region?.enabled && content?.region?.length\"></mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.locale?.enabled && content?.locale\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.locale?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.locale | uppercase }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.locale?.enabled && content?.locale\"></mat-divider>\n      <div class=\"info-item\"\n        *ngIf=\"tocConfig?.atAGlance?.hasTranslations?.enabled && (content?.hasTranslations?.length || content?.isTranslationOf?.length)\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.hasTranslations?.displayName}}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          <span class=\"cursor-pointer\" (click)=\"goToContent(trans?.identifier)\"\n            *ngFor=\"let trans of content?.hasTranslations || content?.isTranslationOf\">{{ trans.locale | uppercase }}\n          </span>\n        </h3>\n      </div>\n      <mat-divider\n        *ngIf=\"tocConfig?.atAGlance?.hasTranslations?.enabled && (content?.hasTranslations?.length || content?.isTranslationOf?.length)\">\n      </mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.keywords?.enabled && content?.keywords?.length\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.keywords?.displayName}}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.keywords?.join(', ') }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.keywords?.enabled && content?.keywords?.length\"></mat-divider>\n      <ng-container *ngFor=\"let item of content?.collections\">\n        <div class=\"info-item\"\n          *ngIf=\"tocConfig?.atAGlance?.curatedInKB?.enabled && item.contentType === 'Knowledge Board' && item.status === 'Live'\">\n          <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.curatedInKB?.displayName}}</h3>\n          <mat-chip-list>\n            <mat-chip>\n              <h3 class=\"ws-mat-accent-text width-expand\">\n                <ng-container *ngIf=\"item.contentType === 'Knowledge Board' && item.status === 'Live'\">\n                  <a [href]=\"'/app/toc/' + item.identifier + '/overview?primaryCategory='+ item.primaryCategory \"> {{\n                    item.name }} </a>\n                </ng-container>\n              </h3>\n            </mat-chip>\n          </mat-chip-list>\n        </div>\n      </ng-container>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <div class=\"text-right mt-2\">\n      <button mat-button (click)=\"showMoreGlance = !showMoreGlance\">\n        <mat-icon>{{ !showMoreGlance ? 'arrow_drop_down' : 'arrow_drop_up' }}</mat-icon>\n        <ng-container *ngIf=\"!showMoreGlance\">{{'playerbrief.showMore' | translate}}</ng-container>\n        <ng-container *ngIf=\"showMoreGlance\">{{'playerbrief.showLess' | translate}}</ng-container>\n      </button>\n    </div>\n  </mat-card>\n  <!-- <ws-widget-user-content-rating class=\"mb-4 block\" *ngIf=\"content?.identifier\" [contentId]=\"content?.identifier\"\n    [isDisabled]=\"isPreviewMode\" [forPreview]=\"forPreview\">\n  </ws-widget-user-content-rating> -->\n  <div class=\"hidden sm:block margin-bottom-m\" *ngIf=\"content?.creatorDetails?.length\">\n    <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n        authors: content?.creatorDetails,\n        title: 'AUTHOR'\n      }\">\n    </ng-container>\n  </div>\n  <div class=\"hidden sm:block margin-bottom-m\" *ngIf=\"content?.creatorContacts?.length\">\n    <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n        authors: content?.creatorContacts,\n        title: 'CONTACT'\n      }\">\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #creators let-authors=\"authors\" let-title=\"title\">\n  <mat-card>\n    <h2 *ngIf=\"title === 'AUTHOR'\">{{'playerbrief.authors' | translate}}</h2>\n    <h2 *ngIf=\"title === 'CONTACT'\">{{'playerbrief.curatorcontact' | translate}}</h2>\n    <mat-divider></mat-divider>\n    <div *ngFor=\"let author of parseJsonData(authors)\" class=\"author\">\n      <ws-widget-user-image class=\"author-image\" [imageType]=\"'name-initial'\" [userName]=\"author.name || ''\"\n        [email]=\"author.email\"></ws-widget-user-image>\n      <div class=\"width-expand flex flex-middle flex-between\">\n        <h3 class=\"margin-remove\">{{ author.name }}</h3>\n        <ws-widget-btn-mail-user *ngIf=\"askAuthorEnabled\" [widgetData]=\"{ content: content, emails: [author.email] }\">\n        </ws-widget-btn-mail-user>\n      </div>\n    </div>\n  </mat-card>\n</ng-template>", styles: [".info-container{padding:12px 16px;margin-bottom:16px}.info-container .info-item{display:flex;align-items:center;padding:8px 0;box-sizing:border-box}.info-container .info-item h3{margin:0}.info-container .info-item .item-heading{width:40%;min-width:80px;max-width:140px}.info-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.author{padding:12px 0;display:flex}.author .author-image{margin-right:12px;height:44px;width:44px}\n"], dependencies: [{ kind: "directive", type: 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: "component", type: i5.DisplayContentTypeComponent, selector: "ws-widget-display-content-type", inputs: ["displayContentType"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.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: i7.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: i10.UserImageComponent, selector: "ws-widget-user-image", inputs: ["email", "userId", "userName", "imageType", "imageUrl", "imageSize"] }, { kind: "component", type: i11.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MarkAsCompleteComponent, selector: "ws-widget-mark-as-complete", inputs: ["content", "forPreview"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlayerBriefComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-widget-player-brief', template: "<div class=\"md:px-2\">\n  <ws-widget-mark-as-complete [forPreview]=\"forPreview\" [content]=\"content\"></ws-widget-mark-as-complete>\n  <ng-container *ngIf=\"content && isDownloadable\">\n    <mat-card class=\"mb-4\">\n      <button mat-button color=\"primary\" (click)=\"download()\">\n        <mat-icon>cloud_download</mat-icon>\n        <span class=\"px-2\">{{ 'apptochome.download' | translate }}</span>\n      </button>\n    </mat-card>\n  </ng-container>\n  <mat-card class=\"ws-mat-primary-lite-background-on-day ws-mat-primary-border-top-bolder info-container\">\n    <h2 >{{ 'apptochome.atGlance' | translate }}</h2>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.displayContentType?.enabled && content?.displayContentType\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.displayContentType?.displayName, 'apptoc') }}</h3>\n      <ws-widget-display-content-type *ngIf=\"content?.contentType !== contentTypes.RESOURCE\"\n        class=\"ws-mat-accent-text width-expand mat-body-strong\" [displayContentType]=\"content?.displayContentType\">\n      </ws-widget-display-content-type>\n      <div *ngIf=\"content?.contentType === contentTypes.RESOURCE\"\n        class=\"ws-mat-accent-text width-expand mat-body-strong\">\n        {{ content?.resourceType }}\n      </div>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.displayContentType?.enabled && content?.displayContentType\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.complexityLevel?.enabled && content?.complexityLevel\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.complexityLevel?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.complexityLevel }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.complexityLevel?.enabled && content?.complexityLevel\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.duration?.enabled && content?.duration\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.duration?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.duration | pipeDurationTransform: 'hms' }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.duration?.enabled && content?.duration\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.cost?.enabled\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.cost?.displayName, 'apptoc') }}</h3>\n      <h3 *ngIf=\"content?.exclusiveContent\" class=\"ws-mat-accent-text width-expand\">{{'apptochome.paidContent' | translate}}</h3>\n      <h3 *ngIf=\"!content?.exclusiveContent\" class=\"ws-mat-accent-text width-expand\">{{'apptochome.free' | translate}}</h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.cost?.enabled\"></mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.viewCount?.enabled && content?.viewCount && configSvc?.rootOrg\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.viewCount?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ getViewCount(content) | pipeCountTransform }}\n        <ng-container *ngIf=\"content?.uniqueLearners\">\n          ({{ content?.uniqueLearners | pipeCountTransform }}\n          <ng-container >Unique)</ng-container>\n        </ng-container>\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.viewCount?.enabled && content?.viewCount && configSvc?.rootOrg\">\n    </mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.sourceShortName?.enabled && content?.sourceShortName\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.sourceShortName?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.sourceShortName }}\n      </h3>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.sourceShortName?.enabled && content?.sourceShortName\"></mat-divider>\n    <!-- Structure -->\n    <div class=\"info-item\"\n      *ngIf=\"tocConfig?.atAGlance?.structure?.enabled && hasTocStructure && content?.children?.length\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.structure?.displayName, 'apptoc') }}</h3>\n      <div class=\"ws-mat-accent-text width-expand\">\n        <h3 *ngIf=\"tocStructure?.course > 0\">\n          <ng-container>{{ tocStructure?.course }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.course === 1\" > {{'apptochome.course1' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.course > 1\" > {{'apptochome.courses1' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.learningModule > 0\">\n          <ng-container>{{ tocStructure?.learningModule }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.learningModule === 1\" > {{'apptochome.module' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.learningModule > 1\" > {{'apptochome.modules' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.video > 0\">\n          <ng-container>{{ tocStructure?.video }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.video === 1\" > {{'apptochome.video' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.video > 1\" > {{'apptochome.videos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.interactiveVideo > 0\">\n          <ng-container>{{ tocStructure?.interactiveVideo }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.interactiveVideo === 1\" >\n            {{'playerbrief.interactiveVideo' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.interactiveVideo > 1\" >\n            {{'playerbrief.interactiveVideos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.youtube > 0\">\n          <ng-container>{{ tocStructure?.youtube }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.youtube === 1\" > {{'playerbrief.youtubeVideo' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.youtube > 1\" > {{'playerbrief.youtubeVideos' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.pdf > 0\">\n          <ng-container>{{ tocStructure?.pdf }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.pdf === 1\" > {{'apptochome.pdf' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.pdf > 1\" > {{'apptochome.pdfs' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.podcast > 0\">\n          <ng-container>{{ tocStructure?.podcast }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.podcast === 1\" > {{'playerbrief.podcast' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.podcast > 1\" > {{'playerbrief.podcasts' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.webModule > 0\">\n          <ng-container>{{ tocStructure?.webModule }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webModule === 1\" > {{'playerbrief.webModule' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webModule > 1\" > {{'playerbrief.webModules' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.webPage > 0\">\n          <ng-container>{{ tocStructure?.webPage }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webPage === 1\" > {{'apptochome.webPage' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.webPage > 1\" > {{'apptochome.webPages' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.quiz > 0\">\n          <ng-container>{{ tocStructure?.quiz }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.quiz === 1\" > {{'playerbrief.quiz' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.quiz > 1\" > {{'playerbrief.quizzes' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.assessment > 0\">\n          <ng-container>{{ tocStructure?.assessment }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.assessment === 1\" > {{'apptochome.assessment' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.assessment > 1\" > {{'apptochome.assessments' | translate}}</ng-container>\n        </h3>\n        <h3 *ngIf=\"tocStructure?.other > 0\">\n          <ng-container>{{ tocStructure?.other }}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.other === 1\" > {{'apptochome.otherItem' | translate}}</ng-container>\n          <ng-container *ngIf=\"tocStructure?.other > 1\" > {{'apptochome.otherItems' | translate}}</ng-container>\n        </h3>\n      </div>\n    </div>\n    <mat-divider *ngIf=\"tocConfig?.atAGlance?.structure?.enabled && hasTocStructure && content?.children?.length\">\n    </mat-divider>\n    <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.lastUpdatedOn?.enabled && content?.lastUpdatedOn\">\n      <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.lastUpdatedOn?.displayName, 'apptoc') }}</h3>\n      <h3 class=\"ws-mat-accent-text width-expand\">\n        {{ content?.lastUpdatedOn | date }}\n      </h3>\n    </div>\n    <ng-container *ngIf=\"showMoreGlance\">\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.lastUpdatedOn?.enabled && content?.lastUpdatedOn\"></mat-divider>\n      <div class=\"info-item\"\n        *ngIf=\"tocConfig?.atAGlance?.expiryDate?.enabled && content?.expiryDate && content?.expiryDate?.startsWith('20')\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.expiryDate?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.expiryDate | date }}\n        </h3>\n      </div>\n      <mat-divider\n        *ngIf=\"tocConfig?.atAGlance?.expiryDate?.enabled && content?.expiryDate && content?.expiryDate?.startsWith('20')\">\n      </mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.learningMode?.enabled && content?.learningMode\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.learningMode?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.learningMode }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.learningMode?.enabled && content?.learningMode\"></mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.region?.enabled && content?.region?.length\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.region?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.region }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.region?.enabled && content?.region?.length\"></mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.locale?.enabled && content?.locale\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{ translateLabels(tocConfig?.atAGlance?.locale?.displayName, 'apptoc') }}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.locale | uppercase }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.locale?.enabled && content?.locale\"></mat-divider>\n      <div class=\"info-item\"\n        *ngIf=\"tocConfig?.atAGlance?.hasTranslations?.enabled && (content?.hasTranslations?.length || content?.isTranslationOf?.length)\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.hasTranslations?.displayName}}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          <span class=\"cursor-pointer\" (click)=\"goToContent(trans?.identifier)\"\n            *ngFor=\"let trans of content?.hasTranslations || content?.isTranslationOf\">{{ trans.locale | uppercase }}\n          </span>\n        </h3>\n      </div>\n      <mat-divider\n        *ngIf=\"tocConfig?.atAGlance?.hasTranslations?.enabled && (content?.hasTranslations?.length || content?.isTranslationOf?.length)\">\n      </mat-divider>\n      <div class=\"info-item\" *ngIf=\"tocConfig?.atAGlance?.keywords?.enabled && content?.keywords?.length\">\n        <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.keywords?.displayName}}</h3>\n        <h3 class=\"ws-mat-accent-text width-expand\">\n          {{ content?.keywords?.join(', ') }}\n        </h3>\n      </div>\n      <mat-divider *ngIf=\"tocConfig?.atAGlance?.keywords?.enabled && content?.keywords?.length\"></mat-divider>\n      <ng-container *ngFor=\"let item of content?.collections\">\n        <div class=\"info-item\"\n          *ngIf=\"tocConfig?.atAGlance?.curatedInKB?.enabled && item.contentType === 'Knowledge Board' && item.status === 'Live'\">\n          <h3 class=\"item-heading ws-mat-primary-text\">{{tocConfig?.atAGlance?.curatedInKB?.displayName}}</h3>\n          <mat-chip-list>\n            <mat-chip>\n              <h3 class=\"ws-mat-accent-text width-expand\">\n                <ng-container *ngIf=\"item.contentType === 'Knowledge Board' && item.status === 'Live'\">\n                  <a [href]=\"'/app/toc/' + item.identifier + '/overview?primaryCategory='+ item.primaryCategory \"> {{\n                    item.name }} </a>\n                </ng-container>\n              </h3>\n            </mat-chip>\n          </mat-chip-list>\n        </div>\n      </ng-container>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <div class=\"text-right mt-2\">\n      <button mat-button (click)=\"showMoreGlance = !showMoreGlance\">\n        <mat-icon>{{ !showMoreGlance ? 'arrow_drop_down' : 'arrow_drop_up' }}</mat-icon>\n        <ng-container *ngIf=\"!showMoreGlance\">{{'playerbrief.showMore' | translate}}</ng-container>\n        <ng-container *ngIf=\"showMoreGlance\">{{'playerbrief.showLess' | translate}}</ng-container>\n      </button>\n    </div>\n  </mat-card>\n  <!-- <ws-widget-user-content-rating class=\"mb-4 block\" *ngIf=\"content?.identifier\" [contentId]=\"content?.identifier\"\n    [isDisabled]=\"isPreviewMode\" [forPreview]=\"forPreview\">\n  </ws-widget-user-content-rating> -->\n  <div class=\"hidden sm:block margin-bottom-m\" *ngIf=\"content?.creatorDetails?.length\">\n    <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n        authors: content?.creatorDetails,\n        title: 'AUTHOR'\n      }\">\n    </ng-container>\n  </div>\n  <div class=\"hidden sm:block margin-bottom-m\" *ngIf=\"content?.creatorContacts?.length\">\n    <ng-container [ngTemplateOutlet]=\"creators\" [ngTemplateOutletContext]=\"{\n        authors: content?.creatorContacts,\n        title: 'CONTACT'\n      }\">\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #creators let-authors=\"authors\" let-title=\"title\">\n  <mat-card>\n    <h2 *ngIf=\"title === 'AUTHOR'\">{{'playerbrief.authors' | translate}}</h2>\n    <h2 *ngIf=\"title === 'CONTACT'\">{{'playerbrief.curatorcontact' | translate}}</h2>\n    <mat-divider></mat-divider>\n    <div *ngFor=\"let author of parseJsonData(authors)\" class=\"author\">\n      <ws-widget-user-image class=\"author-image\" [imageType]=\"'name-initial'\" [userName]=\"author.name || ''\"\n        [email]=\"author.email\"></ws-widget-user-image>\n      <div class=\"width-expand flex flex-middle flex-between\">\n        <h3 class=\"margin-remove\">{{ author.name }}</h3>\n        <ws-widget-btn-mail-user *ngIf=\"askAuthorEnabled\" [widgetData]=\"{ content: content, emails: [author.email] }\">\n        </ws-widget-btn-mail-user>\n      </div>\n    </div>\n  </mat-card>\n</ng-template>", styles: [".info-container{padding:12px 16px;margin-bottom:16px}.info-container .info-item{display:flex;align-items:center;padding:8px 0;box-sizing:border-box}.info-container .info-item h3{margin:0}.info-container .info-item .item-heading{width:40%;min-width:80px;max-width:140px}.info-container .info-item .item-icon{width:20px;height:20px;font-size:20px;margin-left:8px}.author{padding:12px 0;display:flex}.author .author-image{margin-right:12px;height:44px;width:44px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.ConfigurationsService }, { type: i1.UtilityService }, { type: i2.Router }, { type: i3.WidgetContentService }, { type: i1.MultilingualTranslationsService }]; }, propDecorators: { content: [{
                type: Input
            }], hasTocStructure: [{
                type: Input
            }], tocStructure: [{
                type: Input
            }], isPreviewMode: [{
                type: Input
            }], forPreview: [{
                type: Input
            }], askAuthorEnabled: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 