import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/icon";
import * as i3 from "@sunbird-cb/utils-v2";
import * as i4 from "@ngx-translate/core";
export class TocKpiValuesComponent {
    constructor() {
        this.content = null;
        this.contentReadData = null;
        this.isMobile = false;
        this.showInstructorLedMsg = false;
        this.baseContentReadData = null;
    }
    ngOnInit() {
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TocKpiValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TocKpiValuesComponent, selector: "ws-widget-toc-kpi-values", inputs: { tocStructure: "tocStructure", content: "content", contentReadData: "contentReadData", isMobile: "isMobile", showInstructorLedMsg: "showInstructorLedMsg", baseContentReadData: "baseContentReadData", languageList: "languageList" }, ngImport: i0, template: "<div class=\"flex gap-2\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"content?.duration > 0\">\n        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n        <div class=\"text-xs\">{{ content?.duration | pipeDurationTransform: 'hms' }}</div>\n    </div>\n    \n    <ng-container *ngIf=\"content?.children?.length\">\n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.course > 0\">\n            <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"pdf image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.course }} \n                <span *ngIf=\"tocStructure?.course === 1\">{{ 'apptochome.course1' | translate }}</span>\n                <span *ngIf=\"tocStructure?.course > 1\">{{ 'apptochome.courses1' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.learningModule > 0\">\n            <img src=\"/assets/icons/toc/module.svg\" width=\"24px\" alt=\"module image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.learningModule }}\n                <span *ngIf=\"tocStructure?.learningModule === 1\">{{ 'apptochome.module' | translate }}</span>\n                <span *ngIf=\"tocStructure?.learningModule > 1\">{{ 'apptochome.modules' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.video > 0\">\n            <img src=\"/assets/icons/toc/video.svg\" width=\"20px\" alt=\"video image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.video }} \n                <span *ngIf=\"tocStructure?.video === 1\">{{ 'apptochome.video' | translate }}</span>\n                <span *ngIf=\"tocStructure?.video > 1\">{{ 'apptochome.videos' | translate }}</span>\n            </div>\n        </div>\n        \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.offlineSession > 0\">\n            <img src=\"/assets/icons/toc/module.svg\" width=\"20px\" alt=\"offline session image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.offlineSession }} \n                <span *ngIf=\"tocStructure?.offlineSession === 1\">{{ 'apptochome.session' | translate }}</span>\n                <span *ngIf=\"tocStructure?.offlineSession > 1\">{{ 'apptochome.sessions' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.pdf > 0\">\n            <img src=\"/assets/icons/toc/pdf.svg\" width=\"20px\" alt=\"pdf image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.pdf }} \n                <span *ngIf=\"tocStructure?.pdf === 1\">{{ 'apptochome.pdf' | translate }}</span>\n                <span *ngIf=\"tocStructure?.pdf > 1\">{{ 'apptochome.pdfs' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.podcast > 0\">\n            <img src=\"/assets/icons/toc/audio.svg\" width=\"20px\" alt=\"podcast image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.podcast }} \n                <span *ngIf=\"tocStructure?.podcast === 1\">{{ 'apptochome.audio' | translate }}</span>\n                <span *ngIf=\"tocStructure?.podcast > 1\">{{ 'apptochome.audios' | translate }}</span>    \n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.webPage > 0\">\n            <img src=\"/assets/icons/toc/web.svg\" width=\"20px\" alt=\"web image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.webPage }} \n                <span *ngIf=\"tocStructure?.webPage === 1\">{{ 'apptochome.webPage' | translate }}</span>\n                <span *ngIf=\"tocStructure?.webPage > 1\">{{ 'apptochome.webPages' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.interactivecontent > 0\">\n            <img src=\"/assets/icons/toc/link.svg\" width=\"20px\" alt=\"interactive content image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.interactivecontent }}\n                <span *ngIf=\"tocStructure?.interactivecontent === 1\">{{ 'apptochome.interactiveContent' | translate }}</span>\n                <span *ngIf=\"tocStructure?.interactivecontent > 1\">{{ 'apptochome.interactiveContents' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.preEnrollmentAssessment > 0\">\n            <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"assessment image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.preEnrollmentAssessment }} \n                <span *ngIf=\"tocStructure?.preEnrollmentAssessment === 1\">{{ 'apptochome.preEnrollmentAssessment' | translate }}</span>\n                <span *ngIf=\"tocStructure?.preEnrollmentAssessment > 1\">{{ 'apptochome.preEnrollmentAssessments' | translate }}</span>\n            </div>\n        </div>\n        \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.finalTest > 0\">\n            <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"assessment image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.finalTest }} \n                <span *ngIf=\"tocStructure?.finalTest === 1\">{{ 'apptochome.finalTest' | translate }}</span>\n                <span *ngIf=\"tocStructure?.finalTest > 1\">{{ 'apptochome.finalTests' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.practiceTest > 0\">\n            <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"practice test image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.practiceTest }} \n                <span *ngIf=\"tocStructure?.practiceTest === 1\">{{ 'apptochome.practiceTest' | translate }}</span>\n                <span *ngIf=\"tocStructure?.practiceTest > 1\">{{ 'apptochome.practiceTests' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.other > 0\">\n            <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"other items image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.other }} \n                <span *ngIf=\"tocStructure?.other === 1\">{{ 'apptochome.otherItem' | translate }}</span>\n                <span *ngIf=\"tocStructure?.other > 1\">{{ 'apptochome.otherItems' | translate }}</span>\n            </div>\n        </div>\n\n        <div class=\"flex flex-col kpi-values items-center gap-2\">\n            <img src=\"/assets/icons/toc/free.svg\" width=\"20px\" alt=\"free course image\" />\n            <div class=\"text-xs\" *ngIf=\"!contentReadData?.exclusiveContent\" >{{ 'apptochome.free' | translate }} </div>\n            <div class=\"text-xs\" *ngIf=\"contentReadData?.exclusiveContent\" >{{ 'apptochome.paidContent' | translate }} </div>\n        </div>\n\n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"contentReadData?.learningMode\">\n            <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\" src=\"/assets/icons/toc/self-learning.svg\" width=\"20px\" alt=\"free course image\" />\n            <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\" src=\"/assets/icons/toc/instructor-led.svg\" width=\"20px\" alt=\"instructor led image\" />\n            <div class=\"text-xs\" >\n                <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\">{{ 'apptocsinglepage.instructorLed' | translate }}</span>\n                <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\">{{ 'apptocsinglepage.selfLearning' | translate }}</span>\n            </div>\n        </div>\n\n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"baseContentReadData?.license || contentReadData?.license\">\n            <img src=\"/assets/icons/toc/key.svg\" width=\"20px\" alt=\"free course image\" />\n            <div class=\"text-xs\" >{{ baseContentReadData?.license || contentReadData?.license }} </div>\n        </div>\n\n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"languageList?.length > 1\">\n            <mat-icon class=\"icon-img\">translate</mat-icon>\n            <div class=\"text-xs\" >{{ languageList.length }} languages available </div>\n        </div>\n    </ng-container>\n</div>\n", styles: [".horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%}.horizontal-strip::-webkit-scrollbar{display:none}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values mat-icon{color:#000000de;height:20px}.horizontal-strip .kpi-values{min-width:72px;gap:4px}.horizontal-strip .kpi-values div{font-weight:700}.kpi-values img{height:24px;width:24px}.kpi-values .icon-img{height:24px;width:24px;color:#000000de}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i3.PipeDurationTransformPipe, name: "pipeDurationTransform" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TocKpiValuesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-widget-toc-kpi-values', template: "<div class=\"flex gap-2\" [ngClass]=\"isMobile ? 'horizontal-strip' : 'flex-wrap'\">\n    <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"content?.duration > 0\">\n        <img src=\"/assets/icons/toc/timer.svg\" width=\"20px\" alt=\"web image\" />\n        <div class=\"text-xs\">{{ content?.duration | pipeDurationTransform: 'hms' }}</div>\n    </div>\n    \n    <ng-container *ngIf=\"content?.children?.length\">\n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.course > 0\">\n            <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"pdf image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.course }} \n                <span *ngIf=\"tocStructure?.course === 1\">{{ 'apptochome.course1' | translate }}</span>\n                <span *ngIf=\"tocStructure?.course > 1\">{{ 'apptochome.courses1' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.learningModule > 0\">\n            <img src=\"/assets/icons/toc/module.svg\" width=\"24px\" alt=\"module image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.learningModule }}\n                <span *ngIf=\"tocStructure?.learningModule === 1\">{{ 'apptochome.module' | translate }}</span>\n                <span *ngIf=\"tocStructure?.learningModule > 1\">{{ 'apptochome.modules' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.video > 0\">\n            <img src=\"/assets/icons/toc/video.svg\" width=\"20px\" alt=\"video image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.video }} \n                <span *ngIf=\"tocStructure?.video === 1\">{{ 'apptochome.video' | translate }}</span>\n                <span *ngIf=\"tocStructure?.video > 1\">{{ 'apptochome.videos' | translate }}</span>\n            </div>\n        </div>\n        \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.offlineSession > 0\">\n            <img src=\"/assets/icons/toc/module.svg\" width=\"20px\" alt=\"offline session image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.offlineSession }} \n                <span *ngIf=\"tocStructure?.offlineSession === 1\">{{ 'apptochome.session' | translate }}</span>\n                <span *ngIf=\"tocStructure?.offlineSession > 1\">{{ 'apptochome.sessions' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.pdf > 0\">\n            <img src=\"/assets/icons/toc/pdf.svg\" width=\"20px\" alt=\"pdf image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.pdf }} \n                <span *ngIf=\"tocStructure?.pdf === 1\">{{ 'apptochome.pdf' | translate }}</span>\n                <span *ngIf=\"tocStructure?.pdf > 1\">{{ 'apptochome.pdfs' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.podcast > 0\">\n            <img src=\"/assets/icons/toc/audio.svg\" width=\"20px\" alt=\"podcast image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.podcast }} \n                <span *ngIf=\"tocStructure?.podcast === 1\">{{ 'apptochome.audio' | translate }}</span>\n                <span *ngIf=\"tocStructure?.podcast > 1\">{{ 'apptochome.audios' | translate }}</span>    \n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.webPage > 0\">\n            <img src=\"/assets/icons/toc/web.svg\" width=\"20px\" alt=\"web image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.webPage }} \n                <span *ngIf=\"tocStructure?.webPage === 1\">{{ 'apptochome.webPage' | translate }}</span>\n                <span *ngIf=\"tocStructure?.webPage > 1\">{{ 'apptochome.webPages' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.interactivecontent > 0\">\n            <img src=\"/assets/icons/toc/link.svg\" width=\"20px\" alt=\"interactive content image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.interactivecontent }}\n                <span *ngIf=\"tocStructure?.interactivecontent === 1\">{{ 'apptochome.interactiveContent' | translate }}</span>\n                <span *ngIf=\"tocStructure?.interactivecontent > 1\">{{ 'apptochome.interactiveContents' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.preEnrollmentAssessment > 0\">\n            <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"assessment image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.preEnrollmentAssessment }} \n                <span *ngIf=\"tocStructure?.preEnrollmentAssessment === 1\">{{ 'apptochome.preEnrollmentAssessment' | translate }}</span>\n                <span *ngIf=\"tocStructure?.preEnrollmentAssessment > 1\">{{ 'apptochome.preEnrollmentAssessments' | translate }}</span>\n            </div>\n        </div>\n        \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.finalTest > 0\">\n            <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"assessment image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.finalTest }} \n                <span *ngIf=\"tocStructure?.finalTest === 1\">{{ 'apptochome.finalTest' | translate }}</span>\n                <span *ngIf=\"tocStructure?.finalTest > 1\">{{ 'apptochome.finalTests' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.practiceTest > 0\">\n            <img src=\"/assets/icons/toc/assessment.svg\" width=\"20px\" alt=\"practice test image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.practiceTest }} \n                <span *ngIf=\"tocStructure?.practiceTest === 1\">{{ 'apptochome.practiceTest' | translate }}</span>\n                <span *ngIf=\"tocStructure?.practiceTest > 1\">{{ 'apptochome.practiceTests' | translate }}</span>\n            </div>\n        </div>\n    \n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"tocStructure?.other > 0\">\n            <img src=\"/assets/icons/toc/course.svg\" width=\"20px\" alt=\"other items image\" />\n            <div class=\"text-xs\" >{{ tocStructure?.other }} \n                <span *ngIf=\"tocStructure?.other === 1\">{{ 'apptochome.otherItem' | translate }}</span>\n                <span *ngIf=\"tocStructure?.other > 1\">{{ 'apptochome.otherItems' | translate }}</span>\n            </div>\n        </div>\n\n        <div class=\"flex flex-col kpi-values items-center gap-2\">\n            <img src=\"/assets/icons/toc/free.svg\" width=\"20px\" alt=\"free course image\" />\n            <div class=\"text-xs\" *ngIf=\"!contentReadData?.exclusiveContent\" >{{ 'apptochome.free' | translate }} </div>\n            <div class=\"text-xs\" *ngIf=\"contentReadData?.exclusiveContent\" >{{ 'apptochome.paidContent' | translate }} </div>\n        </div>\n\n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"contentReadData?.learningMode\">\n            <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\" src=\"/assets/icons/toc/self-learning.svg\" width=\"20px\" alt=\"free course image\" />\n            <img *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\" src=\"/assets/icons/toc/instructor-led.svg\" width=\"20px\" alt=\"instructor led image\" />\n            <div class=\"text-xs\" >\n                <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() === 'instructor led'\">{{ 'apptocsinglepage.instructorLed' | translate }}</span>\n                <span *ngIf=\"contentReadData?.learningMode?.toLowerCase() != 'instructor led'\">{{ 'apptocsinglepage.selfLearning' | translate }}</span>\n            </div>\n        </div>\n\n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"baseContentReadData?.license || contentReadData?.license\">\n            <img src=\"/assets/icons/toc/key.svg\" width=\"20px\" alt=\"free course image\" />\n            <div class=\"text-xs\" >{{ baseContentReadData?.license || contentReadData?.license }} </div>\n        </div>\n\n        <div class=\"flex flex-col kpi-values items-center gap-2\" *ngIf=\"languageList?.length > 1\">\n            <mat-icon class=\"icon-img\">translate</mat-icon>\n            <div class=\"text-xs\" >{{ languageList.length }} languages available </div>\n        </div>\n    </ng-container>\n</div>\n", styles: [".horizontal-strip{flex-direction:row;overflow-x:scroll;width:100%}.horizontal-strip::-webkit-scrollbar{display:none}.kpi-values{min-width:64px;padding:8px;text-align:center}.kpi-values mat-icon{color:#000000de;height:20px}.horizontal-strip .kpi-values{min-width:72px;gap:4px}.horizontal-strip .kpi-values div{font-weight:700}.kpi-values img{height:24px;width:24px}.kpi-values .icon-img{height:24px;width:24px;color:#000000de}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { tocStructure: [{
                type: Input
            }], content: [{
                type: Input
            }], contentReadData: [{
                type: Input
            }], isMobile: [{
                type: Input
            }], showInstructorLedMsg: [{
                type: Input
            }], baseContentReadData: [{
                type: Input
            }], languageList: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 