import { Component, Input } from '@angular/core';
import { NsContent } from '../../_services/widget-content.model';
import { viewerRouteGenerator } from '../../_services/viewer-route-util';
/* tslint:disable*/
import _ from 'lodash';
import { CertificateDialogComponent } from '../../_collection/_common/certificate-dialog/certificate-dialog.component';
import * as i0 from "@angular/core";
import * as i1 from "@sunbird-cb/utils-v2";
import * as i2 from "@angular/material/legacy-dialog";
import * as i3 from "@angular/common";
import * as i4 from "@angular/router";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/legacy-button";
import * as i7 from "@angular/material/legacy-menu";
import * as i8 from "@angular/material/legacy-tooltip";
import * as i9 from "ng-circle-progress";
import * as i10 from "@ngx-translate/core";
export class AppTocContentCardComponent {
    constructor(events, dialog) {
        this.events = events;
        this.dialog = dialog;
        this.content = null;
        this.expandAll = false;
        this.forPreview = false;
        this.hasContentStructure = false;
        this.enumContentTypes = NsContent.EDisplayContentTypes;
        this.contentStructure = {
            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,
        };
        this.defaultThumbnail = '';
        this.viewChildren = false;
    }
    ngOnInit() {
        this.evaluateImmediateChildrenStructure();
        // this.route.data.subscribe(data => {
        //     this.defaultThumbnail = data.configData.data.logos.defaultContent
        //   }
        // )
    }
    ngOnChanges(changes) {
        for (const property in changes) {
            if (property === 'expandAll') {
                this.viewChildren = this.expandAll;
            }
        }
    }
    get isCollection() {
        if (this.content) {
            return this.content.mimeType === NsContent.EMimeTypes.COLLECTION;
        }
        return false;
    }
    get isResource() {
        if (this.content) {
            return (this.content.primaryCategory === NsContent.EPrimaryCategory.RESOURCE
                // || this.content.primaryCategory === NsContent.EPrimaryCategory.KNOWLEDGE_ARTIFACT
                || this.content.primaryCategory === NsContent.EPrimaryCategory.PRACTICE_RESOURCE
                || this.content.primaryCategory === NsContent.EPrimaryCategory.FINAL_ASSESSMENT
                || this.content.primaryCategory === NsContent.EPrimaryCategory.COMP_ASSESSMENT);
        }
        return false;
    }
    get resourceLink() {
        if (this.content) {
            let url = viewerRouteGenerator(this.content.identifier, this.content.mimeType, this.rootId, this.rootContentType, this.forPreview, this.content.primaryCategory, this.batchId);
            /* tslint:disable-next-line */
            // console.log(url,'=====> content card url link <========')
            return url;
        }
        return { url: '', queryParams: {} };
    }
    progressColor() {
        // if (this.currentProgress <= 30) {
        //   return '#D13924'
        // } if (this.currentProgress > 30 && this.currentProgress <= 70) {
        //   return '#E99E38'
        // }
        // if (this.currentProgress > 70 && this.currentProgress <= 100) {
        //   return '#1D8923'
        // }
        return '#1D8923';
    }
    progressColor2() {
        return '#f27d00';
    }
    evaluateImmediateChildrenStructure() {
        if (this.content && this.content.children && this.content.children.length) {
            this.content.children.forEach((child) => {
                if (child.primaryCategory === NsContent.EPrimaryCategory.COURSE) {
                    this.contentStructure.course += 1;
                }
                else if (child.primaryCategory === NsContent.EPrimaryCategory.KNOWLEDGE_ARTIFACT) {
                    this.contentStructure.other += 1;
                }
                else if (child.primaryCategory === NsContent.EPrimaryCategory.MODULE) {
                    this.contentStructure.learningModule += 1;
                }
                else if (child.primaryCategory === NsContent.EPrimaryCategory.OFFLINE_SESSION) {
                    this.contentStructure.offlineSession += 1;
                }
                else if (child.primaryCategory === NsContent.EPrimaryCategory.RESOURCE) {
                    switch (child.mimeType) {
                        case NsContent.EMimeTypes.HANDS_ON:
                            this.contentStructure.handsOn += 1;
                            break;
                        case NsContent.EMimeTypes.MP3:
                            this.contentStructure.podcast += 1;
                            break;
                        case NsContent.EMimeTypes.MP4:
                        case NsContent.EMimeTypes.M3U8:
                            this.contentStructure.video += 1;
                            break;
                        case NsContent.EMimeTypes.INTERACTION:
                            this.contentStructure.interactiveVideo += 1;
                            break;
                        case NsContent.EMimeTypes.PDF:
                            this.contentStructure.pdf += 1;
                            break;
                        case NsContent.EMimeTypes.OFFLINE_SESSION:
                            this.contentStructure.offlineSession += 1;
                            break;
                        case NsContent.EMimeTypes.SURVEY:
                            this.contentStructure.survey += 1;
                            break;
                        case NsContent.EMimeTypes.HTML:
                            this.contentStructure.webPage += 1;
                            break;
                        case NsContent.EMimeTypes.QUIZ:
                            if (child.resourceType === 'Assessment') {
                                this.contentStructure.assessment += 1;
                            }
                            else {
                                this.contentStructure.quiz += 1;
                            }
                            break;
                        case NsContent.EMimeTypes.PRACTICE_RESOURCE:
                            // case NsContent.EMimeTypes.FINAL_ASSESSMENT:
                            // case NsContent.EMimeTypes.PRACTICE_RESOURCE:
                            this.contentStructure.practiceTest += 1;
                            break;
                        case NsContent.EMimeTypes.WEB_MODULE:
                            this.contentStructure.webModule += 1;
                            break;
                        case NsContent.EMimeTypes.YOUTUBE:
                            this.contentStructure.youtube += 1;
                            break;
                        default:
                            this.contentStructure.other += 1;
                            break;
                    }
                }
            });
        }
        for (const key in this.contentStructure) {
            if (this.contentStructure[key] > 0) {
                this.hasContentStructure = true;
            }
        }
    }
    get contextPath() {
        return {
            contextId: this.rootId,
            contextPath: this.rootContentType,
            batchId: this.batchId,
        };
    }
    contentTrackBy(_index, content) {
        if (!content) {
            return null;
        }
        return content.identifier;
    }
    raiseTelemetry() {
        // if (this.forPreview) { return }
        if (this.content) {
            this.events.raiseInteractTelemetry({
                type: 'click',
                subType: `card-tocContentCard`,
                // id: this.content.identifier || '',
            }, {
                // contentId: this.content.identifier || '',
                // contentType: this.content.primaryCategory,
                id: this.content.identifier || '',
                type: this.content.primaryCategory,
                rollup: {
                    l1: this.rootId || '',
                },
                ver: `${this.content.version}${''}`,
            }, {
                pageIdExt: `${_.camelCase(this.content.primaryCategory)}-card`,
                module: _.camelCase(this.content.primaryCategory),
            });
        }
    }
    get isAllowed() {
        if (this.content) {
            return !(NsContent.UN_SUPPORTED_DATA_TYPES_FOR_NON_BATCH_USERS.indexOf(this.content.mimeType) >= 0);
        }
        return false;
    }
    get isEnabled() {
        return false;
    }
    openCertificateDialog(certData) {
        const cet = certData;
        this.dialog.open(CertificateDialogComponent, {
            // height: '400px',
            width: '1300px',
            data: { cet },
            // panelClass: 'custom-dialog-container',
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardComponent, deps: [{ token: i1.EventService }, { token: i2.MatLegacyDialog }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: { content: "content", expandAll: "expandAll", rootId: "rootId", rootContentType: "rootContentType", forPreview: "forPreview", batchId: "batchId" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"content\">\n  <ng-container *ngIf=\"isCollection\">\n    <div class=\"flex flex-col position-relative\">\n      <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n        <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n          (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n        <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n          <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren\">\n            <div class=\"flex flex-col sm:flex-row flex-wrap\">\n              <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n                {{ content?.name }} \n              </p>\n              <ng-container *ngIf=\"content.issuedCertificatesSVG\">\n                <a class=\"certificate-txt\" (click)=\"openCertificateDialog(content.issuedCertificatesSVG)\">\n                  <span class=\"view-certificate-wrapper\">\n                    <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                    <span>{{'apptoccontentcard.viewCertificate' | translate}}</span>\n                  </span>\n                </a>\n              </ng-container>\n              <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.resource' | translate}}</span>\n              </div>\n              <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.module' | translate}}</span>\n              </div>\n              <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.course' | translate}}</span>\n              </div>\n            </div>\n            <div>\n              <!-- <span class=\"mat-body-strong content-type\">{{ content?.displayContentType }}</span> -->\n              <!-- <span class=\"ml-5\"> -->\n              <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n              <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n              <span class=\"text-lowercase ws-mat-black60-text\">{{ content?.duration | pipeDurationTransform: 'hms'\n                }}</span>\n              <!-- </span> -->\n            </div>\n          </div>\n          <button *ngIf=\"content?.artifactUrl && isAllowed && !isEnabled\" type=\"button\" mat-icon-button\n            [matMenuTriggerFor]=\"buttonMenu\">\n            <mat-icon>more_vertical</mat-icon>\n          </button>\n          <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage && content.primaryCategory !== 'Course'\">\n            <ng-container *ngIf=\"content?.completionStatus == 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n                [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n                [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionStatus < 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\"\n                [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\"\n                [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n                [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                [backgroundStrokeWidth]=\"3\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n          </ng-container>\n\n          <!-- <div *ngIf=\"hasContentStructure\" class=\"child-meta-container\">\n            <div class=\"child-structure\"> -->\n          <!-- <mat-icon class=\"structure-icon\">import_contacts</mat-icon> -->\n          <!-- <span class=\"oval-white\" *ngIf=\"contentStructure?.course > 0\">\n                <ng-container>{{ contentStructure?.course }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course === 1\" > Course</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course > 1\" > Courses</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.learningModule > 0\">\n                <ng-container> {{ contentStructure?.learningModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule === 1\" > Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule > 1\" > Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.video > 0\">\n                <ng-container> {{ contentStructure?.video }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video === 1\" > Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video > 1\" > Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.interactiveVideo > 0\">\n                <ng-container> {{ contentStructure?.interactiveVideo }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo === 1\" >\n                  Interactive Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo > 1\" >\n                  Interactive Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.youtube > 0\">\n                <ng-container> {{ contentStructure?.youtube }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube === 1\" > Youtube Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube > 1\" > Youtube Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.pdf > 0\">\n                <ng-container> {{ contentStructure?.pdf }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf === 1\" > PDF</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf > 1\" > PDFs</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.podcast > 0\">\n                <ng-container> {{ contentStructure?.podcast }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast === 1\" > Podcast</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast > 1\" > Podcasts</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webModule > 0\">\n                <ng-container> {{ contentStructure?.webModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule === 1\" > Web Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule > 1\" > Web Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webPage > 0\">\n                <ng-container> {{ contentStructure?.webPage }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage === 1\" > Web Page</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage > 1\" > Web Pages</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.quiz > 0\">\n                <ng-container *ngIf=\"contentStructure?.webPage > 0\">, </ng-container>\n                <ng-container>{{ contentStructure?.quiz }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz === 1\" > Quiz</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz > 1\" > Quizzes</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.assessment > 0\">\n                <ng-container> {{ contentStructure?.assessment }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment === 1\" > Assessment</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment > 1\" > Assessments</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.other > 0\">\n                <ng-container>{{ contentStructure?.other }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other === 1\" > Other item</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other > 1\" > Other Items</ng-container>\n              </span>\n            </div>\n          </div> -->\n          <div class=\"see-all-container\">\n            <a href=\"javascript:void(0)\" role=\"button\" (click)=\"viewChildren = !viewChildren\"\n              class=\"margin-left-m see-all-btn tab custom-chevron customicon\" mat-button>\n              <!-- <ng-container *ngIf=\"!viewChildren\" >See All</ng-container>\n              <ng-container *ngIf=\"viewChildren\" >See Less</ng-container> -->\n              <mat-icon *ngIf=\"!viewChildren\">keyboard_arrow_down</mat-icon>\n              <mat-icon *ngIf=\"viewChildren\">keyboard_arrow_up</mat-icon>\n            </a>\n          </div>\n        </div>\n      </div>\n      <!-- <div class=\"w-100\" *ngIf=\"content?.identifier && content?.completionPercentage\">\n        <ng-container *ngIf=\"content?.completionStatus == 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n        <ng-container *ngIf=\"content?.completionStatus < 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n      </div> -->\n    </div>\n\n    <div class=\"children-container margin-left-l margin-top-s margin-bottom-s\" [hidden]=\"!viewChildren\">\n      <ws-app-toc-content-card [forPreview]=\"forPreview\" [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\"\n        [batchId]=\"batchId\" [rootContentType]=\"rootContentType\"\n        *ngFor=\"let child of content?.children; trackBy: contentTrackBy\">\n      </ws-app-toc-content-card>\n    </div>\n  </ng-container>\n  <div *ngIf=\"isResource\" class=\"resource-container\">\n    <!-- <ws-widget-display-content-type-icon class=\"flex\" [displayContentType]=\"content?.displayContentType\">\n    </ws-widget-display-content-type-icon> -->\n    <!-- <div class=\"img-container\"> -->\n    <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n    <!-- <ng-container *ngIf=\"content?.completionStatus == 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\" [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container>\n    <ng-container *ngIf=\"content?.completionStatus < 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n        [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container> -->\n    <!-- </div> -->\n\n    <div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n      <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n      <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\" [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n        [queryParams]=\"(isAllowed && !forPreview && !isEnabled)  ? resourceLink.queryParams : null\">\n        <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n          <div class=\"flex flex-col sm:flex-row flex-wrap\">\n            <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n              <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n              {{ content?.name }}\n            </p>\n            <span class=\"content-type optional-span\" *ngIf=\"content?.optionalReading\">{{'apptoccontentcard.optional' | translate}}</span>\n            <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n          </div>\n          <div class=\"resicons ws-mat-black60-text\">\n            <!-- <span class=\"mat-body-strong content-type ws-mat-default-text\">{{ content?.contentType }}</span> -->\n            <!-- <span class=\"ml-5\"> -->\n            <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n            <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\" class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                content?.mimeType ==='application/x-mpegURL'\">\n            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/pdf'\">\n            <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n              *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n              *ngIf=\"content.mimeType === 'application/offline' || content?.mimeType === 'application/survey'\">\n            <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n            <!-- </span> -->\n          </div>\n        </div>\n      </a>\n      <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n        <!-- <div class=\"type-container resource\" *ngIf=\"content?.contentType === 'Resource'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Resource</span>\n        </div>\n        <div class=\"type-container module\" *ngIf=\"content?.contentType === 'Collection'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Module</span>\n        </div>\n        <div class=\"type-container course\" *ngIf=\"content?.contentType === 'Course'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Course</span>\n        </div> -->\n        <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\" mat-icon-button\n          class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n          <mat-icon>more_vertical</mat-icon>\n        </button>\n        <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage ; else elseBlock\">\n        \n          <ng-container *ngIf=\"content?.completionStatus == 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n              [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.completed' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionStatus < 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\" [radius]=\"12\"\n              [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor2()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.inProgress' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n              [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n              [progressType]=\"'percentage'\">\n            </ws-widget-content-progress> -->\n          </ng-container>\n          \n        </ng-container>\n        <ng-template #elseBlock>\n        <circle-progress  class=\"flex items-center progress\"\n          [percent]=\"0\"\n          [radius]=\"12\"\n          [outerStrokeWidth]=\"3\"\n          [innerStrokeWidth]=\"3\"\n          [outerStrokeColor]=\"'#808080'\"\n          [innerStrokeColor]=\"'#808080'\"\n          [animation]=\"true\"\n          [space]=\"-3\"\n          [showUnits]=\"false\"\n          [animationDuration]=\"300\"\n          [showTitle]=\"false\"\n          [backgroundPadding]=\"0\"\n          [backgroundPadding]=\"-9\"\n          [outerStrokeLinecap]=\"'butt'\"\n          matTooltip=\"{{'apptoccontentcard.notStarted' | translate}}\"\n          [showSubtitle]=\"false\" \n          [showInnerStroke]=\"true\" \n          [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"></circle-progress>\n        <!-- <p>no data</p> -->\n        </ng-template>\n      </div>\n\n      \n\n      <!-- <button *ngIf=\"content?.artifactUrl\" type=\"button\" mat-icon-button [matMenuTriggerFor]=\"buttonMenu\">\n        <mat-icon>more_vertical</mat-icon>\n      </button> -->\n    </div>\n    <!-- <div class=\"resource-meta width-expand\">\n      <a [routerLink]=\"resourceLink.url\" [queryParams]=\"resourceLink.queryParams\">\n        <h3 *ngIf=\"content?.displayContentType !== enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h3>\n        <h1 *ngIf=\"content?.displayContentType === enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h1>\n      </a>\n      <span class=\"mat-body-strong margin-left-xs\">{{ content?.duration | pipeDurationTransform: 'time24' }}\n      </span>\n    </div> -->\n  </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n  <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n    class=\"flex flex-middle\">\n    <mat-icon>toc</mat-icon>\n    <h3 class=\"margin-remove\" >\n      {{'apptoccontentcard.viewDetails' | translate}}\n    </h3>\n  </a>\n  <!-- TODO: Hiding this from here for now, as the functionalities are not working -->\n  <!-- <div mat-menu-item>\n    <ws-widget-btn-content-download [widgetData]=\"\n        content\n          | pipePartialContent\n            : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal']\n      \"></ws-widget-btn-content-download>\n    <ws-widget-btn-content-like [widgetData]=\"content | pipePartialContent: ['identifier']\">\n    </ws-widget-btn-content-like>\n    <ws-widget-btn-content-share [widgetData]=\"content\"></ws-widget-btn-content-share>\n    <ws-widget-btn-goals></ws-widget-btn-goals>\n    <ws-widget-btn-playlist></ws-widget-btn-playlist>\n  </div> -->\n</mat-menu>\n", styles: [".customicon{position:absolute;top:-.5em;right:-4px}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-txt{padding:0 20px;color:#0273b6;font-weight:700}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: i6.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9.CircleProgressComponent, selector: "circle-progress", inputs: ["name", "class", "backgroundGradient", "backgroundColor", "backgroundGradientStopColor", "backgroundOpacity", "backgroundStroke", "backgroundStrokeWidth", "backgroundPadding", "radius", "space", "percent", "toFixed", "maxPercent", "renderOnClick", "units", "unitsFontSize", "unitsFontWeight", "unitsColor", "outerStrokeGradient", "outerStrokeWidth", "outerStrokeColor", "outerStrokeGradientStopColor", "outerStrokeLinecap", "innerStrokeColor", "innerStrokeWidth", "titleFormat", "title", "titleColor", "titleFontSize", "titleFontWeight", "subtitleFormat", "subtitle", "subtitleColor", "subtitleFontSize", "subtitleFontWeight", "imageSrc", "imageHeight", "imageWidth", "animation", "animateTitle", "animateSubtitle", "animationDuration", "showTitle", "showSubtitle", "showUnits", "showImage", "showBackground", "showInnerStroke", "clockwise", "responsive", "startFromZero", "showZeroOuterStroke", "lazy", "options"], outputs: ["onClick"] }, { kind: "component", type: AppTocContentCardComponent, selector: "ws-app-toc-content-card", inputs: ["content", "expandAll", "rootId", "rootContentType", "forPreview", "batchId"] }, { kind: "pipe", type: i1.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppTocContentCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-app-toc-content-card', template: "<ng-container *ngIf=\"content\">\n  <ng-container *ngIf=\"isCollection\">\n    <div class=\"flex flex-col position-relative\">\n      <div class=\"card-collection w-auto sm:w-100 padding-right-xl\">\n        <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n          (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n        <div class=\"flex flex-col flex-wrap flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n          <div class=\"text-truncate\" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren\">\n            <div class=\"flex flex-col sm:flex-row flex-wrap\">\n              <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n                {{ content?.name }} \n              </p>\n              <ng-container *ngIf=\"content.issuedCertificatesSVG\">\n                <a class=\"certificate-txt\" (click)=\"openCertificateDialog(content.issuedCertificatesSVG)\">\n                  <span class=\"view-certificate-wrapper\">\n                    <img src=\"fusion-assets/images/certificate-ico.svg\" width=\"24\" height=\"24\">\n                    <span>{{'apptoccontentcard.viewCertificate' | translate}}</span>\n                  </span>\n                </a>\n              </ng-container>\n              <div class=\"type-container resource mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Resource'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.resource' | translate}}</span>\n              </div>\n              <div class=\"type-container module mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Collection'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.module' | translate}}</span>\n              </div>\n              <div class=\"type-container course mt-2 sm:mt-0\" *ngIf=\"content?.category === 'Course'\">\n                <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n                <span>{{'apptoccontentcard.course' | translate}}</span>\n              </div>\n            </div>\n            <div>\n              <!-- <span class=\"mat-body-strong content-type\">{{ content?.displayContentType }}</span> -->\n              <!-- <span class=\"ml-5\"> -->\n              <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n              <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n              <span class=\"text-lowercase ws-mat-black60-text\">{{ content?.duration | pipeDurationTransform: 'hms'\n                }}</span>\n              <!-- </span> -->\n            </div>\n          </div>\n          <button *ngIf=\"content?.artifactUrl && isAllowed && !isEnabled\" type=\"button\" mat-icon-button\n            [matMenuTriggerFor]=\"buttonMenu\">\n            <mat-icon>more_vertical</mat-icon>\n          </button>\n          <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage && content.primaryCategory !== 'Course'\">\n            <ng-container *ngIf=\"content?.completionStatus == 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n                [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n                [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n                [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n                [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\"\n                [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n                [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n            <ng-container *ngIf=\"content?.completionStatus < 2\">\n              <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\"\n                [radius]=\"12\" [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\"\n                [outerStrokeColor]=\"progressColor()\" [innerStrokeColor]=\"'rgba(0,0,0,.16)'\" [animation]=\"true\"\n                [animationDuration]=\"300\" [showTitle]=\"false\" [showUnits]=\"false\" [showSubtitle]=\"false\"\n                [showInnerStroke]=\"true\" [clockwise]=\"true\" [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\"\n                [backgroundStrokeWidth]=\"3\" [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\"\n                [backgroundPadding]=\"0\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"\n                [outerStrokeLinecap]=\"'butt'\">\n              </circle-progress>\n              <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n            </ng-container>\n          </ng-container>\n\n          <!-- <div *ngIf=\"hasContentStructure\" class=\"child-meta-container\">\n            <div class=\"child-structure\"> -->\n          <!-- <mat-icon class=\"structure-icon\">import_contacts</mat-icon> -->\n          <!-- <span class=\"oval-white\" *ngIf=\"contentStructure?.course > 0\">\n                <ng-container>{{ contentStructure?.course }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course === 1\" > Course</ng-container>\n                <ng-container *ngIf=\"contentStructure?.course > 1\" > Courses</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.learningModule > 0\">\n                <ng-container> {{ contentStructure?.learningModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule === 1\" > Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.learningModule > 1\" > Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.video > 0\">\n                <ng-container> {{ contentStructure?.video }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video === 1\" > Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.video > 1\" > Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.interactiveVideo > 0\">\n                <ng-container> {{ contentStructure?.interactiveVideo }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo === 1\" >\n                  Interactive Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.interactiveVideo > 1\" >\n                  Interactive Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.youtube > 0\">\n                <ng-container> {{ contentStructure?.youtube }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube === 1\" > Youtube Video</ng-container>\n                <ng-container *ngIf=\"contentStructure?.youtube > 1\" > Youtube Videos</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.pdf > 0\">\n                <ng-container> {{ contentStructure?.pdf }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf === 1\" > PDF</ng-container>\n                <ng-container *ngIf=\"contentStructure?.pdf > 1\" > PDFs</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.podcast > 0\">\n                <ng-container> {{ contentStructure?.podcast }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast === 1\" > Podcast</ng-container>\n                <ng-container *ngIf=\"contentStructure?.podcast > 1\" > Podcasts</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webModule > 0\">\n                <ng-container> {{ contentStructure?.webModule }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule === 1\" > Web Module</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webModule > 1\" > Web Modules</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.webPage > 0\">\n                <ng-container> {{ contentStructure?.webPage }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage === 1\" > Web Page</ng-container>\n                <ng-container *ngIf=\"contentStructure?.webPage > 1\" > Web Pages</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.quiz > 0\">\n                <ng-container *ngIf=\"contentStructure?.webPage > 0\">, </ng-container>\n                <ng-container>{{ contentStructure?.quiz }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz === 1\" > Quiz</ng-container>\n                <ng-container *ngIf=\"contentStructure?.quiz > 1\" > Quizzes</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.assessment > 0\">\n                <ng-container> {{ contentStructure?.assessment }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment === 1\" > Assessment</ng-container>\n                <ng-container *ngIf=\"contentStructure?.assessment > 1\" > Assessments</ng-container>\n              </span>\n              <span class=\"oval-white\" *ngIf=\"contentStructure?.other > 0\">\n                <ng-container>{{ contentStructure?.other }}</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other === 1\" > Other item</ng-container>\n                <ng-container *ngIf=\"contentStructure?.other > 1\" > Other Items</ng-container>\n              </span>\n            </div>\n          </div> -->\n          <div class=\"see-all-container\">\n            <a href=\"javascript:void(0)\" role=\"button\" (click)=\"viewChildren = !viewChildren\"\n              class=\"margin-left-m see-all-btn tab custom-chevron customicon\" mat-button>\n              <!-- <ng-container *ngIf=\"!viewChildren\" >See All</ng-container>\n              <ng-container *ngIf=\"viewChildren\" >See Less</ng-container> -->\n              <mat-icon *ngIf=\"!viewChildren\">keyboard_arrow_down</mat-icon>\n              <mat-icon *ngIf=\"viewChildren\">keyboard_arrow_up</mat-icon>\n            </a>\n          </div>\n        </div>\n      </div>\n      <!-- <div class=\"w-100\" *ngIf=\"content?.identifier && content?.completionPercentage\">\n        <ng-container *ngIf=\"content?.completionStatus == 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n        <ng-container *ngIf=\"content?.completionStatus < 2\">\n          <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n            [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n            [progressType]=\"'percentage'\">\n          </ws-widget-content-progress>\n        </ng-container>\n      </div> -->\n    </div>\n\n    <div class=\"children-container margin-left-l margin-top-s margin-bottom-s\" [hidden]=\"!viewChildren\">\n      <ws-app-toc-content-card [forPreview]=\"forPreview\" [content]=\"child\" [expandAll]=\"expandAll\" [rootId]=\"rootId\"\n        [batchId]=\"batchId\" [rootContentType]=\"rootContentType\"\n        *ngFor=\"let child of content?.children; trackBy: contentTrackBy\">\n      </ws-app-toc-content-card>\n    </div>\n  </ng-container>\n  <div *ngIf=\"isResource\" class=\"resource-container\">\n    <!-- <ws-widget-display-content-type-icon class=\"flex\" [displayContentType]=\"content?.displayContentType\">\n    </ws-widget-display-content-type-icon> -->\n    <!-- <div class=\"img-container\"> -->\n    <!-- <img class=\"card-thumbnail ws-mat-primary-lite-background\" [src]=\"content?.appIcon\" alt=\"Thumbnail\"\n        (click)=\"viewChildren = !viewChildren\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" /> -->\n    <!-- <ng-container *ngIf=\"content?.completionStatus == 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\" [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container>\n    <ng-container *ngIf=\"content?.completionStatus < 2\">\n      <ws-widget-content-progress *ngIf=\"content?.identifier && content?.completionPercentage\" [forPreview]=\"forPreview\"\n        [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n        [progressType]=\"'percentage'\">\n      </ws-widget-content-progress>\n    </ng-container> -->\n    <!-- </div> -->\n\n    <div class=\"flex flex-col sm:flex-row flex-between width-expand pr-0 w-100 sm:pr-4 sm:w-auto\">\n      <!-- deactivated as per NIC CEO requirement to access course wthout login -->\n      <a [class.disabled]=\"(forPreview || !isEnabled) ? true : null\" [routerLink]=\"(isAllowed && !forPreview && !isEnabled) ? resourceLink.url : null\"\n        [queryParams]=\"(isAllowed && !forPreview && !isEnabled)  ? resourceLink.queryParams : null\">\n        <div class=\"text-truncate \" [ngClass]=\"{'cursor-pointer': !isEnabled}\" (click)=\"viewChildren = !viewChildren; raiseTelemetry()\">\n          <div class=\"flex flex-col sm:flex-row flex-wrap\">\n            <p class=\"margin-remove text-truncate mat-subheading-1 flex-auto\">\n              <!-- <mat-icon class=\"margin-right-xs radiobtn time-icon\">radio_button_unchecked </mat-icon> -->\n              {{ content?.name }}\n            </p>\n            <span class=\"content-type optional-span\" *ngIf=\"content?.optionalReading\">{{'apptoccontentcard.optional' | translate}}</span>\n            <!-- <span class=\"mat-body-strong content-type\">{{ content?.identifier }}</span> -->\n          </div>\n          <div class=\"resicons ws-mat-black60-text\">\n            <!-- <span class=\"mat-body-strong content-type ws-mat-default-text\">{{ content?.contentType }}</span> -->\n            <!-- <span class=\"ml-5\"> -->\n            <!-- <ng-container *ngIf=\"content?.displayContentType\">&nbsp;&nbsp;|&nbsp;&nbsp;</ng-container> -->\n            <!-- <mat-icon class=\"time-icon\">schedule</mat-icon> -->\n            <img src=\"/assets/icons/content/grey/video.svg\" alt=\"Video\" class=\"float-left margin-right-xs\" *ngIf=\"content?.mimeType === 'video/mp4' || content?.mimeType === 'video/x-youtube' ||\n                content?.mimeType ==='application/x-mpegURL'\">\n            <img src=\"/assets/icons/content/grey/audio.svg\" alt=\"Audio\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'audio/mpeg'\">\n            <img src=\"/assets/icons/content/grey/pdf.svg\" alt=\"PDF\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/pdf'\">\n            <!-- <img src=\"/assets/icons/content/grey/resource.svg\" alt=\"Survey\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/survey'\"> -->\n            <img src=\"/assets/icons/content/grey/link.svg\" alt=\"InteractiveContent\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/vnd.ekstep.html-archive' || content?.mimeType === 'text/x-url'\">\n            <img src=\"/assets/icons/content/grey/assessment.svg\" alt=\"Assessment\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'application/json' || content?.mimeType === 'application/quiz' || content?.mimeType === 'application/vnd.sunbird.questionset'\">\n            <img src=\"/assets/icons/content/grey/image.svg\" alt=\"Image\" class=\"float-left margin-right-xs\"\n              *ngIf=\"content?.mimeType === 'image/png' || content?.mimeType === 'image/jpeg'\">\n            <img src=\"/assets/icons/content/grey/content_copy.svg\" class=\"contenticon\" alt=\"Course\"\n              *ngIf=\"content.mimeType === 'application/vnd.ekstep.content-collection' || content?.mimeType === 'application/survey'\">\n            <img src=\"/assets/icons/content/grey/module.svg\" class=\"float-left margin-right-xs\" alt=\"offline sessions\"\n              *ngIf=\"content.mimeType === 'application/offline' || content?.mimeType === 'application/survey'\">\n            <span class=\"ws-mat-black60-text\">{{ (content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n            <!-- </span> -->\n          </div>\n        </div>\n      </a>\n      <div class=\"flex flex-wrap items-center justify-start sm:justify-end\">\n        <!-- <div class=\"type-container resource\" *ngIf=\"content?.contentType === 'Resource'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Resource</span>\n        </div>\n        <div class=\"type-container module\" *ngIf=\"content?.contentType === 'Collection'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Module</span>\n        </div>\n        <div class=\"type-container course\" *ngIf=\"content?.contentType === 'Course'\">\n          <mat-icon class=\"mr-1 custom-icon rotate-90\">call_to_action</mat-icon>\n          <span>Course</span>\n        </div> -->\n        <button *ngIf=\"!forPreview && content?.artifactUrl && !isXSmall && isAllowed && isEnabled\" type=\"button\" mat-icon-button\n          class=\"\" [matMenuTriggerFor]=\"buttonMenu\">\n          <mat-icon>more_vertical</mat-icon>\n        </button>\n        <ng-container *ngIf=\"!forPreview && content?.identifier && content?.completionPercentage ; else elseBlock\">\n        \n          <ng-container *ngIf=\"content?.completionStatus == 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"100\" [radius]=\"12\" [outerStrokeWidth]=\"3\"\n              [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.completed' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n                [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"100\"\n                [progressType]=\"'percentage'\">\n              </ws-widget-content-progress> -->\n          </ng-container>\n          <ng-container *ngIf=\"content?.completionStatus < 2\">\n            <circle-progress class=\"flex items-center progress\" [percent]=\"content?.completionPercentage\" [radius]=\"12\"\n              [outerStrokeWidth]=\"3\" [innerStrokeWidth]=\"3\" [space]=\"-3\" [outerStrokeColor]=\"progressColor2()\"\n              [innerStrokeColor]=\"'rgba(0, 0, 0, 0.16)'\" [animation]=\"true\" [animationDuration]=\"300\" [showTitle]=\"false\"\n              [showUnits]=\"false\" [showSubtitle]=\"false\" [showInnerStroke]=\"true\" [clockwise]=\"true\"\n              [backgroundOpacity]=\"0\" [backgroundGradient]=\"false\" [backgroundStrokeWidth]=\"3\" matTooltip=\"{{'apptoccontentcard.inProgress' | translate}}\"\n              [showZeroOuterStroke]=false [backgroundPadding]=\"-9\" [startFromZero]=\"false\" [backgroundPadding]=\"0\"\n              [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\" [outerStrokeLinecap]=\"'butt'\">\n            </circle-progress>\n            <!-- <ws-widget-content-progress *ngIf=\"content?.identifier\" [forPreview]=\"forPreview\"\n              [contentId]=\"content?.identifier\" class=\"progress-bar-thin\" [progress]=\"content?.completionPercentage\"\n              [progressType]=\"'percentage'\">\n            </ws-widget-content-progress> -->\n          </ng-container>\n          \n        </ng-container>\n        <ng-template #elseBlock>\n        <circle-progress  class=\"flex items-center progress\"\n          [percent]=\"0\"\n          [radius]=\"12\"\n          [outerStrokeWidth]=\"3\"\n          [innerStrokeWidth]=\"3\"\n          [outerStrokeColor]=\"'#808080'\"\n          [innerStrokeColor]=\"'#808080'\"\n          [animation]=\"true\"\n          [space]=\"-3\"\n          [showUnits]=\"false\"\n          [animationDuration]=\"300\"\n          [showTitle]=\"false\"\n          [backgroundPadding]=\"0\"\n          [backgroundPadding]=\"-9\"\n          [outerStrokeLinecap]=\"'butt'\"\n          matTooltip=\"{{'apptoccontentcard.notStarted' | translate}}\"\n          [showSubtitle]=\"false\" \n          [showInnerStroke]=\"true\" \n          [clockwise]=\"true\" [imageHeight]=\"24\" [imageWidth]=\"24\" [showBackground]=\"false\"></circle-progress>\n        <!-- <p>no data</p> -->\n        </ng-template>\n      </div>\n\n      \n\n      <!-- <button *ngIf=\"content?.artifactUrl\" type=\"button\" mat-icon-button [matMenuTriggerFor]=\"buttonMenu\">\n        <mat-icon>more_vertical</mat-icon>\n      </button> -->\n    </div>\n    <!-- <div class=\"resource-meta width-expand\">\n      <a [routerLink]=\"resourceLink.url\" [queryParams]=\"resourceLink.queryParams\">\n        <h3 *ngIf=\"content?.displayContentType !== enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h3>\n        <h1 *ngIf=\"content?.displayContentType === enumContentTypes.ASSESSMENT\" class=\"margin-remove text-truncate\">\n          {{ content?.name }}\n        </h1>\n      </a>\n      <span class=\"mat-body-strong margin-left-xs\">{{ content?.duration | pipeDurationTransform: 'time24' }}\n      </span>\n    </div> -->\n  </div>\n</ng-container>\n\n<mat-menu #buttonMenu=\"matMenu\">\n  <a mat-menu-item [routerLink]=\"'../' + content?.identifier + '/overview'\" [queryParams]=\"contextPath\"\n    class=\"flex flex-middle\">\n    <mat-icon>toc</mat-icon>\n    <h3 class=\"margin-remove\" >\n      {{'apptoccontentcard.viewDetails' | translate}}\n    </h3>\n  </a>\n  <!-- TODO: Hiding this from here for now, as the functionalities are not working -->\n  <!-- <div mat-menu-item>\n    <ws-widget-btn-content-download [widgetData]=\"\n        content\n          | pipePartialContent\n            : ['identifier', 'contentType', 'resourceType', 'mimeType', 'downloadUrl', 'isExternal']\n      \"></ws-widget-btn-content-download>\n    <ws-widget-btn-content-like [widgetData]=\"content | pipePartialContent: ['identifier']\">\n    </ws-widget-btn-content-like>\n    <ws-widget-btn-content-share [widgetData]=\"content\"></ws-widget-btn-content-share>\n    <ws-widget-btn-goals></ws-widget-btn-goals>\n    <ws-widget-btn-playlist></ws-widget-btn-playlist>\n  </div> -->\n</mat-menu>\n", styles: [".customicon{position:absolute;top:-.5em;right:-4px}a.disabled{pointer-events:none;cursor:default}span.optional-span{margin-left:8px;padding:0 6px;border-radius:2px;display:inline-block;background-color:#0074b6;color:#fff;font-size:12px}.card-collection{display:flex;align-items:center;border-radius:8px}.card-collection .card-thumbnail{height:100%;margin-right:12px;cursor:pointer;border-radius:8px 0 0}@media only screen and (max-width: 469px){.card-collection{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.card-collection .card-thumbnail{height:100%!important;width:100%!important}.card-collection .text-truncate{white-space:unset!important}}.tab:focus{outline:1px solid!important}.custom-chevron:focus{outline:0px solid!important}.resource-container .card-thumbnail{height:100%;cursor:pointer}.resource-container .img-container{position:relative;margin-right:12px}.resource-container .img-container ws-widget-content-progress{position:absolute;left:0;right:0;bottom:5px}@media only screen and (max-width: 469px){.resource-container{flex-direction:column;margin:8px 8px 16px!important;align-items:flex-start!important}.resource-container .card-thumbnail{height:100%!important;width:100%!important}.resource-container .text-truncate{white-space:unset!important}}.child-meta-container{margin-top:8px;display:flex}.child-meta-container .child-structure{display:flex;align-items:center;flex-wrap:wrap}.child-meta-container .child-structure span{margin-right:12px;text-align:center;margin-bottom:8px}.child-meta-container .child-structure .structure-icon{margin-right:12px}@media only screen and (max-width: 469px){.child-meta-container{margin-left:.5rem;justify-content:space-between}}.resource-container{display:flex;align-items:center;border-radius:8px}.resource-container ws-display-content-type-icon{display:flex;align-items:center}.resource-container .resource-meta{margin-left:12px;display:flex;justify-content:space-between;align-items:center}.children-container .mat-subheading-1{font:400 16px/24px Lato!important}.children-container .resource-container{margin-bottom:20px;margin-right:0}.children-container .resource-container .card-thumbnail{height:65px;align-self:center}.content-heading{letter-spacing:0px;color:#222}.content-type{letter-spacing:0px}.time-icon{vertical-align:middle}.time-value{letter-spacing:0px;color:#222;text-transform:lowercase}.see-all-container{position:absolute;right:2px;top:5px}.oval-white{background:#fff 0% 0% no-repeat padding-box;border-radius:8px;padding:2px 8px}.type-container{letter-spacing:0px;display:flex;align-items:center}.type-container .rotate-90{transform:rotate(-90deg)}.type-container .custom-icon{width:18px;height:18px;font-size:18px;margin-right:8px}.type-container.resource{color:#00a9f4}.type-container.module{color:#34d6a4}.type-container.course{color:#f58634}.no-mb{margin-bottom:0!important}.w-100{width:100%}.w-auto{width:auto}.progress-bar-thin{height:5px!important}.progress-bar-thin ::ng-deep .mat-progress-bar{height:5px}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-buffer{background-color:transparent!important}.progress-bar-thin ::ng-deep .theme-igot.day-mode .mat-progress-bar-background{fill:transparent}.radiobtn{color:#00000029}.resicons img{width:22px;opacity:.5;margin-top:2px;vertical-align:sub}.certificate-txt{padding:0 20px;color:#0273b6;font-weight:700}.view-certificate-wrapper{display:flex;border-radius:4px;border:1.5px solid rgb(0,116,182);opacity:1;padding:8px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.EventService }, { type: i2.MatLegacyDialog }]; }, propDecorators: { content: [{
                type: Input
            }], expandAll: [{
                type: Input
            }], rootId: [{
                type: Input
            }], rootContentType: [{
                type: Input
            }], forPreview: [{
                type: Input
            }], batchId: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 