@shikshalokam/sl-reports/dist/sl-reports-library/fesm2015/sl-reports-library.js

Library to integrate questionnaire in SL Projects

import { __decorate } from 'tslib';
import { ɵɵdefineInjectable, Injectable, Component, Input, ViewChild, EventEmitter, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import * as pluginDataLabels from 'chartjs-plugin-datalabels';
import { ChartsModule } from 'ng2-charts';
import { CommonModule } from '@angular/common';
import * as stackedBar from 'chartjs-plugin-stacked100';
import { SuiModule, SuiAccordionModule } from 'ng2-semantic-ui-v9';

let SlReportsLibraryService = class SlReportsLibraryService {
    constructor() { }
};
SlReportsLibraryService.ɵprov = ɵɵdefineInjectable({ factory: function SlReportsLibraryService_Factory() { return new SlReportsLibraryService(); }, token: SlReportsLibraryService, providedIn: "root" });
SlReportsLibraryService = __decorate([
    Injectable({
        providedIn: 'root'
    })
], SlReportsLibraryService);

let SlReportsLibraryComponent = class SlReportsLibraryComponent {
    constructor() { }
    ngOnInit() {
    }
};
SlReportsLibraryComponent = __decorate([
    Component({
        selector: 'sl-reports-library',
        template: `
    <p>
      sl-reports-library works!
    </p>
  `
    })
], SlReportsLibraryComponent);

let ReportHeaderComponent = class ReportHeaderComponent {
    constructor() { }
    ngOnInit() {
    }
};
__decorate([
    Input()
], ReportHeaderComponent.prototype, "title", void 0);
__decorate([
    Input()
], ReportHeaderComponent.prototype, "lastdate", void 0);
ReportHeaderComponent = __decorate([
    Component({
        selector: 'sl-report-header',
        template: "<div class=\"report-title\"> {{title}}</div>\n<span class=\"ml-auto sb-last-update-status fnormal sb-color-gray-400 px-10 last-update\">\n    <span>Last Updated on&nbsp;: </span> &nbsp;\n    {{lastdate}}\n</span>",
        styles: [".report-title{font-size:22px;color:var(--sb-text);font-family:\"Noto Sans\";line-height:24px;font-weight:500}.report-subtitle{font-size:19px;color:var(--sb-search-input-text);font-family:\"Noto Sans\";line-height:24px;font-weight:600}"]
    })
], ReportHeaderComponent);

let PieChartComponent = class PieChartComponent {
    constructor() {
        this.pieChartOptions = {
            responsive: true,
            legend: { position: 'bottom', align: 'start' },
        };
        this.pieChartType = 'pie';
        this.pieChartLegend = true;
    }
    ngOnInit() {
        this.pieChartLabels = this.data.chart.data.labels;
        this.pieChartData = this.data.chart.data.datasets[0].data;
        this.chartColors = [{ backgroundColor: this.data.chart.data.datasets[0].backgroundColor }];
    }
};
__decorate([
    Input()
], PieChartComponent.prototype, "data", void 0);
__decorate([
    Input()
], PieChartComponent.prototype, "questionNumber", void 0);
__decorate([
    ViewChild('chartRootElement')
], PieChartComponent.prototype, "chartRootElement", void 0);
__decorate([
    ViewChild('chartCanvas')
], PieChartComponent.prototype, "chartCanvas", void 0);
PieChartComponent = __decorate([
    Component({
        selector: 'sl-pie-chart',
        template: "<div *ngIf=\"pieChartData\" >\n  <div class=\"heading\">\n    <h4>{{ questionNumber }}) {{ data?.question }}</h4>\n  </div>\n  <ng-container *ngIf=\"data?.chart?.data\">\n    <canvas \n    #chartCanvas\n    baseChart\n    width=\"300px\" \n    height=\"90px\"\n    [data]=\"pieChartData\"\n    [labels]=\"pieChartLabels\"\n    [chartType]=\"pieChartType\"\n    [options]=\"pieChartOptions\"\n    [legend]=\"pieChartLegend\"\n    [colors]=\"chartColors\"\n  >\n  </canvas>\n  </ng-container>\n\n  <div class=\"errorMsg\" *ngIf=\"!data?.chart?.data\">No data found</div>\n</div>\n",
        styles: [".heading{text-align:center;padding:15px 10px}.errorMsg{color:grey;text-align:center;padding:20px 0}"]
    })
], PieChartComponent);

let BarChartComponent = class BarChartComponent {
    constructor() {
        this.barChartOptions = {
            responsive: true,
            maintainAspectRatio: true,
            scales: {
                xAxes: [
                    {
                        ticks: {
                            min: 0,
                            max: 100,
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Response in %',
                        },
                    },
                ],
                yAxes: [
                    {
                        ticks: {
                            callback: function (value, index, values) {
                                // // return createSubstrArr(value, 5) || value;
                                let strArr = value.split(' ');
                                let tempString = '';
                                let result = [];
                                for (let x = 0; x < strArr.length; x++) {
                                    tempString += ' ' + strArr[x];
                                    if ((x % 4 === 0 && x !== 0) || x == strArr.length - 1) {
                                        tempString = tempString.slice(1);
                                        result.push(tempString);
                                        tempString = '';
                                    }
                                }
                                return result || value;
                            },
                            fontSize: 15,
                        },
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Response',
                        },
                    },
                ],
            },
        };
        this.barChartType = 'horizontalBar';
        this.barChartLegend = false;
        this.barChartPlugins = [pluginDataLabels];
    }
    ngOnInit() {
        this.barChartLabels = this.data.chart.data.labels;
        this.barChartData = [
            { data: this.data.chart.data.datasets[0].data, label: 'Series A' },
        ];
        this.chartColors = [
            { backgroundColor: this.data.chart.data.datasets[0].backgroundColor },
        ];
        // this.barChartPlugins = [
        //   {
        //     beforeUpdate: function (c) {
        //       var chartHeight = c.chart.height;
        //       var size = (chartHeight * 5) / 100;
        //       c.scales['y-axis-0'].options.ticks.minor.fontSize = size;
        //     },
        //   },
        // ];
    }
};
__decorate([
    Input()
], BarChartComponent.prototype, "data", void 0);
__decorate([
    Input()
], BarChartComponent.prototype, "questionNumber", void 0);
__decorate([
    ViewChild('chartRootElement')
], BarChartComponent.prototype, "chartRootElement", void 0);
__decorate([
    ViewChild('chartCanvas')
], BarChartComponent.prototype, "chartCanvas", void 0);
BarChartComponent = __decorate([
    Component({
        selector: 'sl-bar-chart',
        template: "<div *ngIf=\"barChartData\" class=\"graph-filters\" #chartRootElement>\n  <div *ngIf=\"data?.chart?.data\" class=\"bar-chart-wrapper\">\n    <canvas\n      #chartCanvas \n      baseChart \n      [datasets]=\"barChartData\"\n      [labels]=\"barChartLabels\"\n      [options]=\"barChartOptions\"\n      [chartType]=\"barChartType\"\n      [legend]=\"barChartLegend\"\n      [plugins]=\"barChartPlugins\"\n      [colors]=\"chartColors\"\n    ></canvas>\n  </div>\n\n  <div *ngIf=\"!data?.chart?.data\" class=\"errorMsg\">No data found</div>\n</div>\n",
        styles: [".heading{padding:15px 10px;text-align:center}.errorMsg{color:grey;text-align:center;padding:20px 0}.bar-chart-wrapper{display:block;max-width:900px;max-height:450px;margin:0 auto}"]
    })
], BarChartComponent);

let GenericChartComponent = class GenericChartComponent {
    constructor() { }
    ngOnInit() {
    }
    extension(name) {
        return name.split(".").pop();
    }
    openFile(file) {
        window.open(file.url, "_blank");
    }
};
__decorate([
    Input()
], GenericChartComponent.prototype, "reportSections", void 0);
GenericChartComponent = __decorate([
    Component({
        selector: 'sl-generic-chart',
        template: "<div *ngFor=\"let section of reportSections\">\n  <div class=\"ui bottom p-0 b-0 no-bg my-24 graph-content-section\">\n    <div *ngFor=\"let element of section?.questionArray; let i = index\">\n      <div\n        class=\"ui segment chart-conent-section\"\n        [ngSwitch]=\"element?.responseType\"\n      >\n        <sl-reports-text\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'text'\"\n        ></sl-reports-text>\n        <sl-reports-text\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'number'\"\n        ></sl-reports-text>\n        <sl-reports-text\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'date'\"\n        ></sl-reports-text>\n        <sl-reports-text\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchDefault\n        ></sl-reports-text>\n        <sl-pie-chart\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'radio'\"\n        ></sl-pie-chart>\n        <sl-pie-chart\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'pie'\"\n        ></sl-pie-chart>\n        <sl-bar-chart\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'bar'\"\n        ></sl-bar-chart>\n        <sl-bar-chart\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'multiselect'\"\n        ></sl-bar-chart>\n        <sl-bar-chart\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'column'\"\n        ></sl-bar-chart>\n        <sl-percentage-column-charts\n          [chartData]=\"element\"\n          *ngSwitchCase=\"'horizontalBar'\"\n        >\n        </sl-percentage-column-charts>\n        <sl-matrix-chart\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'matrix'\"\n        ></sl-matrix-chart>\n        <sl-expansion-table\n          [datas]=\"element\"\n          *ngSwitchCase=\"'expansion-table'\"\n        ></sl-expansion-table>\n      </div>\n      <div\n        *ngFor=\"let e of element.evidences\"\n        (click)=\"openFile(e)\"\n        class=\"area\"\n      >\n        <div *ngIf=\"e.extension == 'png'\" class=\"mx-10\">\n          <i class=\"file image outline icon\"></i>\n        </div>\n        <div *ngIf=\"e.extension == 'jpg'\" class=\"mx-10\">\n          <i class=\"file image outline icon\"></i>\n        </div>\n        <div *ngIf=\"e.extension == 'jpeg'\" class=\"mx-10\">\n          <i class=\"file image outline icon\"></i>\n        </div>\n        <div *ngIf=\"e.extension == 'pdf'\" class=\"mx-10\">\n          <i class=\"file pdf outline icon\"></i>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
        styles: [".graph-content-section{padding-bottom:15px!important;background-color:#e9e8d9!important;border-radius:0 0 24px 24px!important;margin-top:0!important;padding-top:5px!important}.chart-conent-section{position:relative;z-index:3;margin:15px!important;border:.0625rem solid var(--rc-dddddd);padding:1.5rem;background:#fff;box-shadow:0 .125rem .4375rem 0 rgba(var(--rc-rgba-black),.16);border-radius:24px!important}"]
    })
], GenericChartComponent);

let PercentageColumnChartsComponent = class PercentageColumnChartsComponent {
    constructor() {
        this.barChartType = 'horizontalBar';
        this.barChartLegend = true;
        this.barChartPlugins = [pluginDataLabels, stackedBar];
    }
    ngOnInit() {
        this.submiisionDateArray = this.chartData.chart.submissionDateArray;
        this.barChartData = this.chartData.chart.data.datasets;
        this.barChartLabels = this.chartData.chart.data.labels;
        this.barChartOptions = {
            scales: {
                xAxes: [
                    {
                        stacked: false,
                        gridLines: { display: false },
                        scaleLabel: {
                            display: true,
                            labelString: 'Criteria',
                        },
                    },
                ],
                yAxes: [
                    {
                        stacked: true,
                        ticks: {
                            fontSize: 12,
                        },
                    },
                ],
            },
            plugins: {
                stacked100: { enable: true, replaceTooltipLabel: true },
                datalabels: {
                    offset: 0,
                    anchor: 'end',
                    align: 'left',
                    font: {
                        size: 12,
                    },
                    formatter: (value, data) => {
                        const d = data.chart.data;
                        const { datasetIndex, dataIndex } = data;
                        // to remove  0 data in  report
                        if (d.originalData[datasetIndex][dataIndex] == 0) {
                            if ((data.datasetIndex + 1) % this.barChartData.length == 0 &&
                                this.submiisionDateArray.length) {
                                return ['', '', this.submiisionDateArray[data.dataIndex]];
                            }
                            return '';
                        }
                        // to remove date in instance report
                        if (this.submiisionDateArray && !this.submiisionDateArray.length) {
                            return `${d.originalData[datasetIndex][dataIndex]}`;
                        }
                        // for last value
                        if ((data.datasetIndex + 1) % this.barChartData.length == 0) {
                            // console.log(data.datasetIndex)
                            if (d.originalData[datasetIndex][dataIndex] == 1) {
                                return ['', '', this.submiisionDateArray[data.dataIndex]];
                            }
                            return [
                                `                                              ${d.originalData[datasetIndex][dataIndex]}`,
                                '',
                                `                                ${this.submiisionDateArray[data.dataIndex]}`,
                            ];
                        }
                        else {
                            return `${d.originalData[datasetIndex][dataIndex]}`;
                        }
                    },
                },
            },
        };
        // this.barChartPlugins = [
        //   {
        //     beforeUpdate: function (c) {
        //       var chartHeight = c.chart.height;
        //       var size = (chartHeight * 3) / 100;
        //       c.scales['y-axis-0'].options.ticks.minor.fontSize = size;
        //     },
        //   },
        // ];
    }
    // events
    chartClicked({ event, active, }) {
        // console.log(event, active);
    }
};
__decorate([
    ViewChild('chartCanvas')
], PercentageColumnChartsComponent.prototype, "chartCanvas", void 0);
__decorate([
    Input()
], PercentageColumnChartsComponent.prototype, "chartData", void 0);
PercentageColumnChartsComponent = __decorate([
    Component({
        selector: 'sl-percentage-column-charts',
        template: "<div class=\"graph-filters\" #chartRootElement>\n  <ng-container *ngIf=\"chartData?.chart?.data\" class=\"bar-chart-wrapper\">\n    <canvas\n      #chartCanvas\n      baseChart\n      [datasets]=\"barChartData\"\n      [labels]=\"barChartLabels\"\n      [options]=\"barChartOptions\"\n      [plugins]=\"barChartPlugins\"\n      [legend]=\"barChartLegend\"\n      [chartType]=\"barChartType\"\n    ></canvas>\n  </ng-container>\n</div>\n",
        styles: [".bar-chart-wrapper{display:block;max-width:900px;max-height:450px;margin:0 auto}"]
    })
], PercentageColumnChartsComponent);

let ScatterChartsComponent = class ScatterChartsComponent {
    constructor() { }
    ngOnInit() {
    }
};
ScatterChartsComponent = __decorate([
    Component({
        selector: 'sl-scatter-charts',
        template: "<p>scatter-charts works!</p>\n",
        styles: [""]
    })
], ScatterChartsComponent);

let MatrixChartComponent = class MatrixChartComponent {
    constructor() {
        this.allEvidence = new EventEmitter();
    }
    ngOnInit() { }
    extension(name) {
        return name.split(".").pop();
    }
    openFile(file) {
        window.open(file.url, "_blank");
    }
};
__decorate([
    Input()
], MatrixChartComponent.prototype, "data", void 0);
__decorate([
    Input()
], MatrixChartComponent.prototype, "questionNumber", void 0);
__decorate([
    Output()
], MatrixChartComponent.prototype, "allEvidence", void 0);
MatrixChartComponent = __decorate([
    Component({
        selector: 'sl-matrix-chart',
        template: "<div>\n  <div class=\"heading\">\n    <h4>{{ questionNumber }}) {{ data?.question }}</h4>\n  </div>\n  <div class=\"ui bottom p-0 b-0 no-bg my-24 graph-content-section\">\n    <div *ngFor=\"let element of data?.instanceQuestions; let i = index\">\n      <div\n        class=\"ui segment chart-conent-section\"\n        [ngSwitch]=\"element?.responseType\"\n      >\n        <sl-reports-text\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'text'\"\n        ></sl-reports-text>\n        <sl-reports-text\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'number'\"\n        ></sl-reports-text>\n        <sl-reports-text\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'date'\"\n        ></sl-reports-text>\n        <sl-reports-text\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchDefault\n        ></sl-reports-text>\n        <sl-pie-chart\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'radio'\"\n        ></sl-pie-chart>\n        <sl-pie-chart\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'pie'\"\n        ></sl-pie-chart>\n        <sl-bar-chart\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'bar'\"\n        ></sl-bar-chart>\n        <sl-bar-chart\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'multiselect'\"\n        ></sl-bar-chart>\n        <sl-bar-chart\n          [data]=\"element\"\n          [questionNumber]=\"i + 1\"\n          *ngSwitchCase=\"'column'\"\n        ></sl-bar-chart>\n      </div>\n      <div\n        *ngFor=\"let e of element.evidences\"\n        (click)=\"openFile(e)\"\n        class=\"area\"\n      >\n        <div *ngIf=\"e.extension == 'png'\" class=\"mx-10\">\n          <i class=\"file image outline icon\"></i>\n        </div>\n        <div *ngIf=\"e.extension == 'jpg'\" class=\"mx-10\">\n          <i class=\"file image outline icon\"></i>\n        </div>\n        <div *ngIf=\"e.extension == 'jpeg'\" class=\"mx-10\">\n          <i class=\"file image outline icon\"></i>\n        </div>\n        <div *ngIf=\"e.extension == 'pdf'\" class=\"mx-10\">\n          <i class=\"file pdf outline icon\"></i>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
        styles: [".area{position:relative}i{font-size:40px}.heading{padding:15px 10px;text-align:center}.graph-content-section{padding-bottom:15px!important;background-color:#c4c3c1!important;border-radius:0 0 24px 24px!important;margin-top:0!important;padding-top:5px!important}.chart-conent-section{position:relative;z-index:3;margin:15px!important;border:.0625rem solid var(--rc-dddddd);padding:1.5rem;background:#fff;box-shadow:0 .125rem .4375rem 0 rgba(var(--rc-rgba-black),.16);border-radius:24px!important}"]
    })
], MatrixChartComponent);

let ReportsTextComponent = class ReportsTextComponent {
    constructor() { }
    ngOnInit() {
    }
};
__decorate([
    Input()
], ReportsTextComponent.prototype, "data", void 0);
__decorate([
    Input()
], ReportsTextComponent.prototype, "questionNumber", void 0);
ReportsTextComponent = __decorate([
    Component({
        selector: 'sl-reports-text',
        template: "<strong>{{ questionNumber }}) {{ data?.question }}</strong>\n<div class=\"answer-list\">\n  <div *ngFor=\"let answer of data?.answers\">\n    {{\n      data?.resposeType === \"date\" && answer\n        ? (answer | date: \"medium\":\"IST\")\n        : answer\n    }}\n  </div>\n</div>\n",
        styles: [".heading{text-align:center;padding:15px 10px}.answer-list{margin-top:3px;border-top:1px solid #ccc!important}"]
    })
], ReportsTextComponent);

let ExpansionTableComponent = class ExpansionTableComponent {
    constructor() { }
    ngOnInit() {
    }
};
__decorate([
    Input()
], ExpansionTableComponent.prototype, "datas", void 0);
ExpansionTableComponent = __decorate([
    Component({
        selector: 'sl-expansion-table',
        template: "<div *ngIf=\"datas?.chart\">\n     <strong>{{ datas?.chart?.title }}</strong> \n  \n    <sui-accordion class=\"styled fluid sb-accordion sb-new-theme-accordion drop-accordian\" *ngFor=\"let item of datas?.chart?.domains; let i = index\">\n      <sui-accordion-panel [isOpen]=\"false\">\n        <div title class=\"sb-accordion-title fsmall d-flex flex-ai-center flex-jc-space-between\">\n          <span>{{ item?.domainName }}</span>\n          <i class=\"chevron down icon\" role=\"img\" title=\"expand\"></i>\n        </div>\n        <div content class=\"sb-accordion-content sb-bg-color-white pt-0 pb-8\">\n          <table>\n            <tr class=\"_flex-box\">\n              <td text-wrap style=\"flex: 1\"></td>\n              <td class=\"_flex-box\" class=\"assess\" *ngFor=\"let head of datas?.chart?.heading\">\n                {{ head }}\n              </td>\n            </tr>\n            <tr *ngFor=\"let criteria of item.criterias\" class=\"_flex-box _justify-content-space-between _noWrap\">\n              <td class=\"ion-text-wrap\" style=\"flex: 1\">{{ criteria?.name }}</td>\n              <td class=\"_flex-box\" *ngFor=\"let level of criteria?.levels\">{{ level }}</td>\n            </tr>\n          </table>\n        </div>\n      </sui-accordion-panel>\n    </sui-accordion>\n  </div>\n  ",
        styles: ["table{border-collapse:collapse;border-spacing:0;width:100%;border:1px solid #ddd;background:#fff;color:var(--sb-text)}td,th{text-align:center;padding:12px 4px;color:#000}tr:nth-child(even){background-color:#f2f2f2}.expansionPanel{border-radius:10px;width:100%;margin:16px 0!important;padding:0!important}.assess{flex:0;text-align:-webkit-center}.heading{padding:15px 10px;text-align:center}.domain{display:flex;justify-content:space-between;margin-bottom:3px;border:1px solig;color:var(--sb-text)}.drop-accordian{margin-bottom:4px}"]
    })
], ExpansionTableComponent);

let ExpansionPanelComponent = class ExpansionPanelComponent {
    constructor() { }
    ngOnInit() {
    }
};
__decorate([
    Input()
], ExpansionPanelComponent.prototype, "datas", void 0);
ExpansionPanelComponent = __decorate([
    Component({
        selector: 'sl-expansion-panel',
        template: "<!-- <h2 *ngIf=\"datas?.chart\" class=\"heading\">{{ datas?.chart?.title }}</h2>\n<div *ngIf=\"datas?.chart\" >\n  <div *ngFor=\"let entity of datas?.chart?.entities\">\n    <h4 class=\"heading\">{{ entity.entityName }}</h4>\n\n    <div\n      (click)=\"isOpenIndex = isOpenIndex == i ? -1 : i\"\n      class=\"expansionPanel\"\n      margin\n      *ngFor=\"let item of entity?.domains; let i = index\"\n    >\n      <div class=\"domain\" >\n        <h4 style=\"flex: 1\" >{{ item?.domainName }}</h4>\n        <i *ngIf=\"!(isOpenIndex == i)\" class=\"arrow down icon medium\"  ></i>\n        <i *ngIf=\"isOpenIndex == i\" class=\"arrow up icon medium\" ></i>\n      </div>\n      <div *ngIf=\"isOpenIndex == i\" class=\"ion-padding\">\n        <table>\n          <tr *ngFor=\"let criteria of item.criterias\" class=\"domain _noWrap\">\n            <td  style=\"flex: 1\">{{ criteria?.name }}</td>\n            <td class=\"_flex-box\">: {{ criteria?.level }}</td>\n          </tr>\n        </table>\n      </div>\n    </div>\n  </div>\n</div> -->\n\n\n<div *ngIf=\"datas?.chart\">\n  <strong>{{ datas?.chart?.title }}</strong>\n  <div *ngFor=\"let entity of datas?.chart?.entities\">\n    <strong>{{ entity.entityName }}</strong>\n\n    <sui-accordion class=\"styled fluid sb-accordion sb-new-theme-accordion drop-accordian\"\n      *ngFor=\"let item of entity?.domains; let i = index\">\n      <sui-accordion-panel [isOpen]=\"false\">\n        <div title class=\"sb-accordion-title fsmall d-flex flex-ai-center flex-jc-space-between\">\n          <span>{{ item?.domainName }}</span>\n          <i class=\"chevron down icon\" role=\"img\" title=\"expand\"></i>\n        </div>\n        <div content class=\"sb-accordion-content sb-bg-color-white pt-0 pb-8\">\n          <table>\n            <tr *ngFor=\"let criteria of item.criterias\" class=\"domain _noWrap\">\n              <td style=\"flex: 1\">{{ criteria?.name }}</td>\n              <td class=\"_flex-box\">: {{ criteria?.level }}</td>\n            </tr>\n          </table>\n        </div>\n      </sui-accordion-panel>\n    </sui-accordion>\n  </div>\n</div>",
        styles: ["table{border-collapse:collapse;border-spacing:0;width:100%;border:1px solid #ddd;background:#fff;color:var(--sb-text)}td,th{text-align:center;padding:12px 4px;color:#000}tr:nth-child(even){background-color:#f2f2f2}.expansionPanel{border-radius:10px;width:100%;margin:16px 0!important;padding:0!important}.assess{flex:0;text-align:-webkit-center}.heading{padding:15px 10px;text-align:center}.domain{display:flex;justify-content:space-between;margin-bottom:3px;border:1px solig;color:var(--sb-text)}.drop-accordian{margin-bottom:4px}"]
    })
], ExpansionPanelComponent);

const FileExtension = {
    videoFormats: ["mp4", "WMV", "WEBM", "flv", "avi", "3GP", "OGG", "m4v"],
    audioFormats: ["AIF", "cda", "mpa", "ogg", "wav", "wma", "mp3"],
    pptFormats: ["ppt", "pptx", "pps", "ppsx"],
    wordFormats: ["docx", "doc", "docm", "dotx"],
    imageFormats: ["jpg", "png", "jpeg"],
    pdfFormats: ["pdf"],
    spreadSheetFormats: ["xls", "xlsx"],
};

let AttachmentsComponent = class AttachmentsComponent {
    constructor() {
        this.imageFormats = FileExtension.imageFormats;
        this.videoFormats = FileExtension.videoFormats;
        this.audioFormats = FileExtension.audioFormats;
        this.pdfFormats = FileExtension.pdfFormats;
        this.wordFormats = FileExtension.wordFormats;
        this.spreadSheetFormats = FileExtension.spreadSheetFormats;
    }
    ngOnInit() { }
    openImage(url) {
        window.open(url, "_blank");
    }
};
__decorate([
    Input()
], AttachmentsComponent.prototype, "url", void 0);
__decorate([
    Input()
], AttachmentsComponent.prototype, "extension", void 0);
AttachmentsComponent = __decorate([
    Component({
        selector: 'sl-attachments',
        template: "<div class=\"thumbnail-card\">\n    <img [src]=\"url\" *ngIf=\"imageFormats.includes(extension)\" (click)=\"openImage(url)\" class=\"card-images\" />\n    <!-- <fa name=\"file-video-o\" class=\"attachmentIcon\" *ngIf=\"videoFormats.includes(extension)\" (click)=\"playVideo(url)\"></fa> -->\n    <i\n    class=\"video icon attachmentIcon\"\n      *ngIf=\"videoFormats.includes(extension)\"\n      (click)=\"openImage(url)\"\n    ></i>\n  \n    <!-- <fa *ngIf=\"audioFormats.includes(extension)\" name=\"file-audio-o\" class=\"attachmentIcon\" (click)=\"playAudio(url)\"></fa> -->\n    <i\n      *ngIf=\"audioFormats.includes(extension)\"\n      class=\"file audio icon attachmentIcon\"\n      (click)=\"openImage(url)\"\n    ></i>\n    <!-- <fa class=\"attachmentIcon\" name=\"file-pdf-o\" *ngIf=\"pdfFormats.includes(extension)\" (click)=\"openDocument(url)\"></fa> -->\n    <i\n      class=\"file alternate icon attachmentIcon\"\n      *ngIf=\"pdfFormats.includes(extension)\"\n      (click)=\"openImage(url)\"\n    ></i>\n  \n    <i\n    class=\"file alternate icon attachmentIcon\"\n    *ngIf=\"spreadSheetFormats.includes(extension) || wordFormats.includes(extension) \"\n    (click)=\"openImage(url)\"\n  ></i>\n  </div>\n  ",
        styles: [".attachmentIcon{margin-top:10px;font-size:70px}.thumbnail-card{height:98px;display:inline;justify-content:space-around;align-items:center}.card-images{width:90px;height:90px;margin-right:2px;margin-bottom:2px;border-radius:10px}"]
    })
], AttachmentsComponent);

let SlReportsLibraryModule = class SlReportsLibraryModule {
};
SlReportsLibraryModule = __decorate([
    NgModule({
        declarations: [
            SlReportsLibraryComponent,
            ReportHeaderComponent,
            PieChartComponent,
            BarChartComponent,
            GenericChartComponent,
            PercentageColumnChartsComponent,
            ScatterChartsComponent,
            MatrixChartComponent,
            ReportsTextComponent,
            ExpansionTableComponent,
            ExpansionPanelComponent,
            AttachmentsComponent,
        ],
        imports: [ChartsModule, CommonModule, SuiModule, SuiAccordionModule],
        exports: [
            SlReportsLibraryComponent,
            ReportHeaderComponent,
            PieChartComponent,
            BarChartComponent,
            GenericChartComponent,
            PercentageColumnChartsComponent,
            ScatterChartsComponent,
            MatrixChartComponent,
            ReportsTextComponent,
            ExpansionTableComponent,
            ExpansionPanelComponent,
            AttachmentsComponent
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
], SlReportsLibraryModule);

/*
 * Public API Surface of sl-reports-library
 */

/**
 * Generated bundle index. Do not edit.
 */

export { AttachmentsComponent, BarChartComponent, ExpansionPanelComponent, ExpansionTableComponent, GenericChartComponent, MatrixChartComponent, PercentageColumnChartsComponent, PieChartComponent, ReportHeaderComponent, ReportsTextComponent, ScatterChartsComponent, SlReportsLibraryComponent, SlReportsLibraryModule, SlReportsLibraryService };
//# sourceMappingURL=sl-reports-library.js.map