@biit-solutions/wizardry-theme 1.21.34

package/fesm2020/biit-solutions-wizardry-theme-charts.mjs

@@ -0,0 +1,2746 @@
+import * as i0 from '@angular/core';
+import { Component, ViewChild, Input, NgModule, Pipe, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import * as i1 from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import * as i2 from 'ng-apexcharts';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { completeIconSet } from '@biit-solutions/biit-icons-collection';
+import * as i1$1 from '@biit-solutions/wizardry-theme/icon';
+import { BiitIconModule } from '@biit-solutions/wizardry-theme/icon';
+import * as i4 from '@biit-solutions/wizardry-theme/button';
+import { BiitIconButtonModule } from '@biit-solutions/wizardry-theme/button';
+import { v4 } from 'uuid';
+import { trigger, transition, style, animate } from '@angular/animations';
+import * as i7 from '@ngneat/transloco';
+import { TRANSLOCO_SCOPE } from '@ngneat/transloco';
+import * as i1$2 from '@angular/platform-browser';
+import * as i2$2 from '@biit-solutions/wizardry-theme/inputs';
+import { BiitSliderModule, BiitSliderRangeModule, BiitCheckboxModule, BiitInputTextModule, BiitToggleModule, BiitTernaryToggleModule } from '@biit-solutions/wizardry-theme/inputs';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3 from '@biit-solutions/wizardry-theme/info';
+import { BiitTooltipModule } from '@biit-solutions/wizardry-theme/info';
+import { subMonths } from 'date-fns';
+import { TranslocoRootModule } from '@biit-solutions/wizardry-theme/i18n';
+
+class BarChartComponent {
+    get titleSvg() { return this.ref.nativeElement.querySelector('.apexcharts-title-text'); }
+    ;
+    get toolbarDiv() { return this.ref.nativeElement.querySelector('.apexcharts-toolbar'); }
+    ;
+    get yLegend() { return this.ref.nativeElement.querySelector('.apexcharts-yaxis'); }
+    ;
+    get yLegendBg() { return this.ref.nativeElement.querySelector('#y-legend-bg'); }
+    ;
+    get chartSvg() { return this.ref.nativeElement.querySelector('.apexcharts-svg'); }
+    ;
+    constructor(ref) {
+        this.ref = ref;
+        this.pageNumber = 1;
+        this.title = '';
+        this.compact = false;
+        this.yLegendMargin = 0;
+    }
+    ngOnInit() {
+        if (!this.data?.series?.length) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    ngOnChanges() {
+        if (!this.data?.series?.length) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    ngAfterViewInit() {
+        this.scroll$ = fromEvent(this.ref.nativeElement.firstChild, "scroll");
+        this.scroll$.subscribe(element => {
+            this.handleScroll(element);
+        });
+    }
+    handleScroll(event) {
+        if (!this.ref.nativeElement.querySelector('#y-legend-bg')) {
+            let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            rect.setAttribute("id", "y-legend-bg");
+            rect.setAttribute("x", "0");
+            rect.setAttribute("y", this.yLegend.firstChild.getBBox().y.toString());
+            rect.setAttribute("width", (this.yLegend.getBBox().width + 27).toString());
+            rect.setAttribute("height", ((this.yLegend.parentElement.lastChild.getBBox().height) + 20).toString());
+            rect.setAttribute("fill", "rgba(255,255,255,1)");
+            this.yLegend.before(rect);
+            rect.before(this.yLegend.parentElement.lastChild);
+        }
+        if (this.yLegendMargin == 0) {
+            this.yLegendMargin = Number.parseFloat(this.yLegend.getAttribute("transform").split("(")[1].split(",")[0]);
+        }
+        this.yLegend.setAttribute("transform", "translate(" + (event.currentTarget.scrollLeft + this.yLegendMargin) + ", 0)");
+        this.yLegendBg.setAttribute("x", event.currentTarget.scrollLeft.toString());
+        this.titleSvg.setAttribute("x", (event.currentTarget.scrollLeft + 10).toString());
+        const right = this.chartSvg.width.baseVal.value -
+            event.currentTarget.clientWidth - event.currentTarget.scrollLeft + 3;
+        if (right >= 3)
+            this.toolbarDiv.style.right = right + 'px';
+    }
+    createChartOptions() {
+        // @ts-ignore
+        this.chartOptions = {
+            series: this.data.series,
+            chart: {
+                height: '100%',
+                width: this.width ? this.width : '100%',
+                type: "bar",
+                stacked: this.data.stacked,
+                stackType: this.data.stackType,
+                sparkline: {
+                    enabled: this.compact ? true : undefined
+                }
+            },
+            plotOptions: {
+                bar: {
+                    horizontal: !!this.data.orientation,
+                    columnWidth: "75%"
+                }
+            },
+            dataLabels: {
+                enabled: !this.compact,
+                style: {
+                    fontSize: "16px",
+                    fontFamily: "Montserrat",
+                    fontWeight: "500"
+                }
+            },
+            xaxis: {
+                categories: this.data.legend,
+                labels: {
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat',
+                        colors: ["262626"]
+                    },
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat',
+                        colors: ["262626"]
+                    },
+                },
+                min: this.min,
+                max: this.max
+            },
+            fill: {
+                opacity: 1
+            },
+            legend: {
+                fontSize: '16px',
+                fontFamily: 'Montserrat'
+            },
+            title: {
+                text: this.compact ? undefined : this.title.toUpperCase(),
+                style: {
+                    fontSize: '20px',
+                    fontFamily: 'Montserrat',
+                    fontWeight: 700,
+                }
+            },
+            grid: {
+                borderColor: '#262626',
+            },
+            tooltip: {
+                custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+                    let tooltip = '<div class="tooltip-base">' +
+                        '  <div class="tooltip-header">' +
+                        w.globals.labels[dataPointIndex] +
+                        '  </div>' +
+                        '  <div class="tooltip-content">' +
+                        '    <div class="tooltip-data">' +
+                        '      <div class="tooltip-square" style="background:' + w.globals.colors[seriesIndex] + '"></div>' +
+                        '      <a>' + w.globals.seriesNames[seriesIndex] + ': </a>' +
+                        '      <a style="margin-left: 0.35rem; font-weight: 500">' + series[seriesIndex][dataPointIndex] + '</a>' +
+                        '    </div>';
+                    w.globals.seriesGoals[seriesIndex][dataPointIndex].forEach(goalItem => {
+                        tooltip +=
+                            '<div class="tooltip-data">' +
+                                '  <div class="tooltip-line" style="background:' + goalItem.strokeColor + '"></div>' +
+                                '  <a>' + goalItem.name + ': </a>' +
+                                '  <a style="margin-left: 0.35rem; font-weight: 500">' + goalItem.value + '</a>' +
+                                '</div>';
+                    });
+                    tooltip +=
+                        '  </div>' +
+                            '</div>';
+                    return tooltip;
+                }
+            },
+            colors: this.data.series.map(c => c.color)
+        };
+    }
+    async getPngBlob() {
+        const base64 = await this.apexChart.dataURI();
+        const decode = await fetch(base64.imgURI);
+        return decode.blob();
+    }
+}
+BarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarChartComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BarChartComponent, selector: "biit-bar-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max", compact: "compact" }, host: { listeners: { "document:scroll": "handleScroll($event)" } }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n     [style.opacity]=\"chartOptions ? '1' : '0'\">\n  <apx-chart *ngIf=\"chartOptions\"\n             [series]=\"chartOptions.series\"\n             [chart]=\"chartOptions.chart\"\n             [dataLabels]=\"chartOptions.dataLabels\"\n             [colors]=\"chartOptions.colors\"\n             [plotOptions]=\"chartOptions.plotOptions\"\n             [xaxis]=\"chartOptions.xaxis\"\n             [yaxis]=\"chartOptions.yaxis\"\n             [legend]=\"chartOptions.legend\"\n             [title]=\"chartOptions.title\"\n             [tooltip]=\"chartOptions.tooltip\"\n             [grid]=\"chartOptions.grid\"\n             [fill]=\"chartOptions.fill\"\n             style=\"display: block; height: 100%;\"\n             #apexChart\n  ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:#262626;color:#fff;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid #262626}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-bar-chart', host: {
+                        '(document:scroll)': 'handleScroll($event)'
+                    }, template: "<div id=\"bar-chart\"\n     [style.opacity]=\"chartOptions ? '1' : '0'\">\n  <apx-chart *ngIf=\"chartOptions\"\n             [series]=\"chartOptions.series\"\n             [chart]=\"chartOptions.chart\"\n             [dataLabels]=\"chartOptions.dataLabels\"\n             [colors]=\"chartOptions.colors\"\n             [plotOptions]=\"chartOptions.plotOptions\"\n             [xaxis]=\"chartOptions.xaxis\"\n             [yaxis]=\"chartOptions.yaxis\"\n             [legend]=\"chartOptions.legend\"\n             [title]=\"chartOptions.title\"\n             [tooltip]=\"chartOptions.tooltip\"\n             [grid]=\"chartOptions.grid\"\n             [fill]=\"chartOptions.fill\"\n             style=\"display: block; height: 100%;\"\n             #apexChart\n  ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:#262626;color:#fff;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid #262626}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { apexChart: [{
+                type: ViewChild,
+                args: ['apexChart']
+            }], data: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }] } });
+
+class BarChartModule {
+}
+BarChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BarChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BarChartModule, declarations: [BarChartComponent], imports: [CommonModule,
+        NgApexchartsModule], exports: [BarChartComponent] });
+BarChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarChartModule, imports: [CommonModule,
+        NgApexchartsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BarChartComponent],
+                    exports: [BarChartComponent],
+                    imports: [
+                        CommonModule,
+                        NgApexchartsModule
+                    ]
+                }]
+        }] });
+
+class BarChartData {
+    constructor(series, legend, orientation, stacked, stackType) {
+        this.series = series;
+        this.legend = legend;
+        this.orientation = orientation ? orientation : BarChartOrientation.VERTICAL;
+        this.stacked = !!stacked;
+        this.stackType = stackType ? stackType : undefined;
+    }
+}
+class BarChartSeries {
+    constructor(name, data, color, group) {
+        this.name = name;
+        this.data = data;
+        this.color = color;
+        this.group = group ? group : undefined;
+    }
+}
+class BarChartSeriesData {
+    constructor(value, goals) {
+        this.x = '';
+        this.y = value;
+        this.goals = goals ? goals : [];
+    }
+}
+class BarChartGoal {
+    constructor(name, value, strokeColor, strokeHeight, strokeWidth) {
+        this.name = name;
+        this.value = value;
+        this.strokeColor = strokeColor;
+        this.strokeHeight = strokeHeight;
+        this.strokeWidth = strokeWidth;
+    }
+}
+var BarChartOrientation;
+(function (BarChartOrientation) {
+    BarChartOrientation[BarChartOrientation["HORIZONTAL"] = 1] = "HORIZONTAL";
+    BarChartOrientation[BarChartOrientation["VERTICAL"] = 0] = "VERTICAL";
+})(BarChartOrientation || (BarChartOrientation = {}));
+
+class LineChartComponent {
+    constructor() {
+        this.pageNumber = 1;
+        this.title = '';
+        this.xTitle = '';
+        this.yTitle = '';
+    }
+    ngOnInit() {
+        if (!this.data?.series?.length) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    ngOnChanges() {
+        if (!this.data?.series?.length) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    createChartOptions() {
+        this.chartOptions = {
+            series: this.data.series,
+            chart: {
+                height: '100%',
+                width: '100%',
+                type: "line",
+                toolbar: {
+                    show: true
+                }
+            },
+            colors: this.data.series.map(c => c.color),
+            fill: {
+                opacity: 1
+            },
+            dataLabels: {
+                enabled: this.data.series.length > 1,
+                enabledOnSeries: this.enabledLabelsOnSeries,
+                style: {
+                    fontSize: "16px",
+                    fontFamily: "Montserrat",
+                    fontWeight: "500"
+                },
+                background: {
+                    opacity: 1,
+                    borderWidth: 0,
+                    borderRadius: 0
+                }
+            },
+            stroke: {
+                curve: "straight"
+            },
+            title: {
+                text: this.title.toUpperCase(),
+                align: "left",
+                style: {
+                    fontSize: '20px',
+                    fontFamily: 'Montserrat',
+                    fontWeight: 700,
+                }
+            },
+            grid: {
+                borderColor: "#262626",
+                position: 'back',
+                strokeDashArray: 0,
+                padding: {
+                    top: 20
+                }
+            },
+            markers: {
+                strokeWidth: 0,
+                fillOpacity: 1,
+                hover: {
+                    size: this.data.series.length == 1 ? 7 : 0
+                }
+            },
+            xaxis: {
+                categories: this.data.legend,
+                title: {
+                    text: this.xTitle,
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat',
+                        fontWeight: 900,
+                        color: "#262626"
+                    }
+                },
+                crosshairs: {
+                    width: 'tickWidth',
+                    position: 'back',
+                    stroke: {
+                        color: '#EDEDED',
+                        dashArray: 0,
+                    },
+                    opacity: 0.2
+                },
+                tooltip: {
+                    enabled: false
+                },
+                labels: {
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat'
+                    },
+                    trim: true
+                }
+            },
+            yaxis: {
+                title: {
+                    text: this.yTitle,
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat',
+                        fontWeight: 900,
+                        color: "#262626"
+                    }
+                },
+                labels: {
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat'
+                    }
+                },
+                min: this.min,
+                max: this.max
+            },
+            legend: {
+                position: "top",
+                horizontalAlign: "left",
+                floating: false,
+                offsetY: -5,
+                fontSize: '16px',
+                fontFamily: 'Montserrat'
+            },
+            tooltip: {
+                custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+                    // debugger;
+                    let tooltip = '<div class="tooltip-base">' +
+                        '  <div class="tooltip-header">' +
+                        w.globals.categoryLabels[dataPointIndex] +
+                        '  </div>' +
+                        '  <div class="tooltip-content">';
+                    series.forEach((seriesItem, i) => {
+                        tooltip +=
+                            '<div class="tooltip-metadata">' +
+                                '  <div class="tooltip-square" style="background:' + w.globals.colors[i] + '"></div>' +
+                                '  <a>' + w.globals.seriesNames[i] + ': </a>' +
+                                '  <a style="margin-left: 0.35rem; font-weight: 500">' + series[i][dataPointIndex] + '</a>' +
+                                '</div>';
+                    });
+                    tooltip +=
+                        '  </div>' +
+                            '</div>';
+                    return tooltip;
+                }
+            },
+        };
+    }
+    async getPngBlob() {
+        const base64 = await this.apexChart.dataURI();
+        const decode = await fetch(base64.imgURI);
+        return decode.blob();
+    }
+}
+LineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LineChartComponent, selector: "biit-line-chart", inputs: { data: "data", title: "title", xTitle: "xTitle", yTitle: "yTitle", min: "min", max: "max", enabledLabelsOnSeries: "enabledLabelsOnSeries" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"line-chart\"\n     [style.opacity]=\"chartOptions ? '1' : '0'\">\n  <apx-chart *ngIf=\"chartOptions\"\n             [chart]=\"chartOptions.chart\"\n             [series]=\"chartOptions.series\"\n             [dataLabels]=\"chartOptions.dataLabels\"\n             [colors]=\"chartOptions.colors\"\n             [stroke]=\"chartOptions.stroke\"\n             [title]=\"chartOptions.title\"\n             [grid]=\"chartOptions.grid\"\n             [xaxis]=\"chartOptions.xaxis\"\n             [yaxis]=\"chartOptions.yaxis\"\n             [markers]=\"chartOptions.markers\"\n             [legend]=\"chartOptions.legend\"\n             [fill]=\"chartOptions.fill\"\n             [tooltip]=\"chartOptions.tooltip\"\n             style=\"display: block; height: 100%;\"\n             #apexChart\n  ></apx-chart>\n</div>\n", styles: ["#line-chart{display:block;height:inherit;width:inherit;transition:1s ease-in-out}#line-chart ::ng-deep apx-chart .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#line-chart ::ng-deep apx-chart .apexcharts-tooltip *{box-sizing:border-box}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-header{background:#262626;color:#fff;padding:.45rem .7rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#line-chart ::ng-deep apx-chart .apexcharts-legend-series{display:flex}#line-chart ::ng-deep apx-chart .apexcharts-legend-series .apexcharts-legend-marker{border-radius:0!important;margin-right:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-line-chart', template: "<div id=\"line-chart\"\n     [style.opacity]=\"chartOptions ? '1' : '0'\">\n  <apx-chart *ngIf=\"chartOptions\"\n             [chart]=\"chartOptions.chart\"\n             [series]=\"chartOptions.series\"\n             [dataLabels]=\"chartOptions.dataLabels\"\n             [colors]=\"chartOptions.colors\"\n             [stroke]=\"chartOptions.stroke\"\n             [title]=\"chartOptions.title\"\n             [grid]=\"chartOptions.grid\"\n             [xaxis]=\"chartOptions.xaxis\"\n             [yaxis]=\"chartOptions.yaxis\"\n             [markers]=\"chartOptions.markers\"\n             [legend]=\"chartOptions.legend\"\n             [fill]=\"chartOptions.fill\"\n             [tooltip]=\"chartOptions.tooltip\"\n             style=\"display: block; height: 100%;\"\n             #apexChart\n  ></apx-chart>\n</div>\n", styles: ["#line-chart{display:block;height:inherit;width:inherit;transition:1s ease-in-out}#line-chart ::ng-deep apx-chart .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#line-chart ::ng-deep apx-chart .apexcharts-tooltip *{box-sizing:border-box}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-header{background:#262626;color:#fff;padding:.45rem .7rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#line-chart ::ng-deep apx-chart .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#line-chart ::ng-deep apx-chart .apexcharts-legend-series{display:flex}#line-chart ::ng-deep apx-chart .apexcharts-legend-series .apexcharts-legend-marker{border-radius:0!important;margin-right:7px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { apexChart: [{
+                type: ViewChild,
+                args: ['apexChart']
+            }], data: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], xTitle: [{
+                type: Input
+            }], yTitle: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], enabledLabelsOnSeries: [{
+                type: Input
+            }] } });
+
+class LineChartModule {
+}
+LineChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LineChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: LineChartModule, declarations: [LineChartComponent], imports: [CommonModule,
+        NgApexchartsModule], exports: [LineChartComponent] });
+LineChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineChartModule, imports: [CommonModule,
+        NgApexchartsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LineChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LineChartComponent],
+                    exports: [LineChartComponent],
+                    imports: [
+                        CommonModule,
+                        NgApexchartsModule
+                    ]
+                }]
+        }] });
+
+class LineChartData {
+    constructor(series, legend) {
+        this.series = series;
+        this.legend = legend;
+    }
+}
+class LineChartSeries {
+    constructor(name, type, data, color) {
+        this.name = name;
+        this.type = type;
+        this.data = data;
+        this.color = color;
+    }
+}
+
+class PieChartComponent {
+    constructor(ref) {
+        this.ref = ref;
+        this.pageNumber = 1;
+        this.title = '';
+        this.yLegendMargin = 0;
+    }
+    ngOnInit() {
+        if (!this.data?.data?.length) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    ngOnChanges() {
+        if (!this.data?.data?.length) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    createChartOptions() {
+        // @ts-ignore
+        this.chartOptions = {
+            series: this.data.data,
+            chart: {
+                height: '100%',
+                width: '100%',
+                type: "pie"
+            },
+            labels: this.data.legend,
+            dataLabels: {
+                enabled: true,
+                style: {
+                    fontSize: "20px",
+                    fontFamily: "Montserrat",
+                    fontWeight: "700"
+                },
+                dropShadow: {
+                    enabled: false
+                }
+            },
+            xaxis: {
+                categories: this.data.legend,
+                labels: {
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat',
+                        colors: ["262626"]
+                    },
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat',
+                        colors: ["262626"]
+                    },
+                }
+            },
+            fill: {
+                opacity: 1
+            },
+            legend: {
+                fontSize: '16px',
+                fontFamily: 'Montserrat',
+            },
+            title: {
+                text: this.title.toUpperCase(),
+                style: {
+                    fontSize: '20px',
+                    fontFamily: 'Montserrat',
+                    fontWeight: 700,
+                }
+            },
+            grid: {
+                borderColor: '#262626',
+            },
+            tooltip: {
+                custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+                    let tooltip = '<div class="tooltip-base">' +
+                        '  <div class="tooltip-content">' +
+                        '    <div class="tooltip-metadata">' +
+                        '      <div class="tooltip-square" style="background:' + w.globals.colors[seriesIndex] + '"></div>' +
+                        '      <a>' + w.globals.seriesNames[seriesIndex] + ': </a>' +
+                        '      <a style="margin-left: 0.35rem; font-weight: 500">' + series[seriesIndex] + '</a>' +
+                        '    </div>';
+                    tooltip +=
+                        '  </div>' +
+                            '</div>';
+                    return tooltip;
+                }
+            },
+            colors: ['#FF005B', '#5E92DE', '#753A86', '#F0A700', '#00AF77'],
+            states: {
+                active: {
+                    filter: {
+                        type: 'none'
+                    }
+                }
+            }
+        };
+    }
+    async getPngBlob() {
+        const base64 = await this.apexChart.dataURI();
+        const decode = await fetch(base64.imgURI);
+        return decode.blob();
+    }
+}
+PieChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PieChartComponent, selector: "biit-pie-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n     [style.opacity]=\"chartOptions ? '1' : '0'\">\n  <apx-chart *ngIf=\"chartOptions\"\n             [series]=\"chartOptions.series\"\n             [chart]=\"chartOptions.chart\"\n             [labels]=\"chartOptions.labels\"\n             [dataLabels]=\"chartOptions.dataLabels\"\n             [colors]=\"chartOptions.colors\"\n             [plotOptions]=\"chartOptions.plotOptions\"\n             [xaxis]=\"chartOptions.xaxis\"\n             [yaxis]=\"chartOptions.yaxis\"\n             [legend]=\"chartOptions.legend\"\n             [title]=\"chartOptions.title\"\n             [tooltip]=\"chartOptions.tooltip\"\n             [grid]=\"chartOptions.grid\"\n             [fill]=\"chartOptions.fill\"\n             [states]=\"chartOptions.states\"\n             style=\"display: block; height: 100%;\"\n             #apexChart\n  ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem;color:#000}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid #262626}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-pie-chart', template: "<div id=\"bar-chart\"\n     [style.opacity]=\"chartOptions ? '1' : '0'\">\n  <apx-chart *ngIf=\"chartOptions\"\n             [series]=\"chartOptions.series\"\n             [chart]=\"chartOptions.chart\"\n             [labels]=\"chartOptions.labels\"\n             [dataLabels]=\"chartOptions.dataLabels\"\n             [colors]=\"chartOptions.colors\"\n             [plotOptions]=\"chartOptions.plotOptions\"\n             [xaxis]=\"chartOptions.xaxis\"\n             [yaxis]=\"chartOptions.yaxis\"\n             [legend]=\"chartOptions.legend\"\n             [title]=\"chartOptions.title\"\n             [tooltip]=\"chartOptions.tooltip\"\n             [grid]=\"chartOptions.grid\"\n             [fill]=\"chartOptions.fill\"\n             [states]=\"chartOptions.states\"\n             style=\"display: block; height: 100%;\"\n             #apexChart\n  ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem;color:#000}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid #262626}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { apexChart: [{
+                type: ViewChild,
+                args: ['apexChart']
+            }], data: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }] } });
+
+class PieChartModule {
+}
+PieChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PieChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PieChartModule, declarations: [PieChartComponent], imports: [CommonModule,
+        NgApexchartsModule], exports: [PieChartComponent] });
+PieChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartModule, imports: [CommonModule,
+        NgApexchartsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PieChartComponent],
+                    exports: [PieChartComponent],
+                    imports: [
+                        CommonModule,
+                        NgApexchartsModule
+                    ]
+                }]
+        }] });
+
+class PieChartData {
+    constructor(data, legend) {
+        this.data = data;
+        this.legend = legend;
+    }
+}
+
+class RadarChartComponent {
+    constructor(ref) {
+        this.ref = ref;
+        this.pageNumber = 1;
+        this.title = '';
+        this.yLegendMargin = 0;
+    }
+    ngOnInit() {
+        if (!this.data?.series?.length) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    ngOnChanges() {
+        if (!this.data?.series?.length) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    createChartOptions() {
+        // @ts-ignore
+        this.chartOptions = {
+            series: this.data.series,
+            chart: {
+                height: '100%',
+                width: '100%',
+                type: "radar"
+            },
+            dataLabels: {
+                enabled: false
+            },
+            markers: {
+                size: 10,
+                shape: "rect",
+                colors: ["transparent"],
+                radius: 0,
+                strokeWidth: 0,
+            },
+            xaxis: {
+                categories: this.data.legend,
+                labels: {
+                    style: {
+                        fontSize: '16px',
+                        fontFamily: 'Montserrat',
+                        colors: this.data.legend.map(v => "#000000")
+                    },
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        fontSize: '0',
+                    },
+                },
+                min: this.min,
+                max: this.max
+            },
+            fill: {
+                opacity: 0.5
+            },
+            stroke: {
+                width: 4
+            },
+            legend: {
+                fontSize: '16px',
+                fontFamily: 'Montserrat',
+                position: 'right',
+                offsetY: 30
+            },
+            title: {
+                text: this.title.toUpperCase(),
+                style: {
+                    fontSize: '20px',
+                    fontFamily: 'Montserrat',
+                    fontWeight: 700,
+                }
+            },
+            tooltip: {
+                custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+                    let tooltip = '<div class="tooltip-base">' +
+                        '  <div class="tooltip-header">' +
+                        w.globals.labels[dataPointIndex] +
+                        '  </div>' +
+                        '  <div class="tooltip-content">' +
+                        '    <div class="tooltip-metadata">' +
+                        '      <div class="tooltip-square" style="background:' + w.globals.colors[seriesIndex] + '"></div>' +
+                        '      <a>' + w.globals.seriesNames[seriesIndex] + ': </a>' +
+                        '      <a style="margin-left: 0.35rem; font-weight: 500">' + series[seriesIndex][dataPointIndex] + '</a>' +
+                        '    </div>' +
+                        '  </div>' +
+                        '</div>';
+                    return tooltip;
+                }
+            },
+            states: {
+                active: {
+                    filter: {
+                        type: 'none'
+                    }
+                }
+            },
+            plotOptions: {
+                radar: {
+                    polygons: {
+                        strokeColors: "#e9e9e9"
+                    },
+                },
+            }
+        };
+    }
+    async getPngBlob() {
+        const base64 = await this.apexChart.dataURI();
+        const decode = await fetch(base64.imgURI);
+        return decode.blob();
+    }
+}
+RadarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadarChartComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+RadarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RadarChartComponent, selector: "biit-radar-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n     [style.opacity]=\"chartOptions ? '1' : '0'\">\n  <apx-chart *ngIf=\"chartOptions\"\n             [series]=\"chartOptions.series\"\n             [chart]=\"chartOptions.chart\"\n             [dataLabels]=\"chartOptions.dataLabels\"\n             [plotOptions]=\"chartOptions.plotOptions\"\n             [xaxis]=\"chartOptions.xaxis\"\n             [yaxis]=\"chartOptions.yaxis\"\n             [legend]=\"chartOptions.legend\"\n             [title]=\"chartOptions.title\"\n             [tooltip]=\"chartOptions.tooltip\"\n             [fill]=\"chartOptions.fill\"\n             [states]=\"chartOptions.states\"\n             [markers]=\"chartOptions.markers\"\n             [stroke]=\"chartOptions.stroke\"\n             style=\"display: block; height: 100%;\"\n             #apexChart\n  ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:#262626;color:#fff;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid #262626}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadarChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-radar-chart', template: "<div id=\"bar-chart\"\n     [style.opacity]=\"chartOptions ? '1' : '0'\">\n  <apx-chart *ngIf=\"chartOptions\"\n             [series]=\"chartOptions.series\"\n             [chart]=\"chartOptions.chart\"\n             [dataLabels]=\"chartOptions.dataLabels\"\n             [plotOptions]=\"chartOptions.plotOptions\"\n             [xaxis]=\"chartOptions.xaxis\"\n             [yaxis]=\"chartOptions.yaxis\"\n             [legend]=\"chartOptions.legend\"\n             [title]=\"chartOptions.title\"\n             [tooltip]=\"chartOptions.tooltip\"\n             [fill]=\"chartOptions.fill\"\n             [states]=\"chartOptions.states\"\n             [markers]=\"chartOptions.markers\"\n             [stroke]=\"chartOptions.stroke\"\n             style=\"display: block; height: 100%;\"\n             #apexChart\n  ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:#262626;color:#fff;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid #262626}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { apexChart: [{
+                type: ViewChild,
+                args: ['apexChart']
+            }], data: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }] } });
+
+class RadarChartModule {
+}
+RadarChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadarChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RadarChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RadarChartModule, declarations: [RadarChartComponent], imports: [CommonModule,
+        NgApexchartsModule], exports: [RadarChartComponent] });
+RadarChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadarChartModule, imports: [CommonModule,
+        NgApexchartsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadarChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [RadarChartComponent],
+                    exports: [RadarChartComponent],
+                    imports: [
+                        CommonModule,
+                        NgApexchartsModule
+                    ]
+                }]
+        }] });
+
+class RadarChartData {
+    constructor(series, legend) {
+        this.series = series;
+        this.legend = legend;
+    }
+}
+class RadarChartSeries {
+    constructor(name, data, color) {
+        this.name = name;
+        this.data = data;
+        this.color = color;
+    }
+}
+
+class RadialChartComponent {
+    constructor(ref) {
+        this.ref = ref;
+        this.pageNumber = 1;
+        this.title = '';
+        this.gauge = false;
+        this.yLegendMargin = 0;
+    }
+    ngOnInit() {
+        if (!this.data?.data?.length) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    ngOnChanges() {
+        if (!this.data?.data?.length) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    createChartOptions() {
+        // @ts-ignore
+        this.chartOptions = {
+            series: this.data.data,
+            chart: {
+                height: '100%',
+                width: '100%',
+                type: "radialBar"
+            },
+            plotOptions: {
+                radialBar: {
+                    hollow: {
+                        size: '50%'
+                    },
+                    startAngle: this.gauge ? -90 : 0,
+                    endAngle: this.gauge ? 90 : 360
+                }
+            },
+            labels: this.data.legend,
+            dataLabels: {
+                enabled: true,
+                style: {
+                    fontSize: "20px",
+                    fontFamily: "Montserrat",
+                    fontWeight: "700"
+                },
+                dropShadow: {
+                    enabled: false
+                }
+            },
+            xaxis: {
+                categories: this.data.legend,
+                labels: {
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat',
+                        colors: ["262626"]
+                    },
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat',
+                        colors: ["262626"]
+                    },
+                }
+            },
+            fill: {
+                opacity: 1
+            },
+            legend: {
+                show: true,
+                fontSize: '16px',
+                fontFamily: 'Montserrat',
+            },
+            title: {
+                text: this.title.toUpperCase(),
+                style: {
+                    fontSize: '20px',
+                    fontFamily: 'Montserrat',
+                    fontWeight: 700,
+                }
+            },
+            grid: {
+                borderColor: '#262626',
+            },
+            tooltip: {
+                custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+                    let tooltip = '<div class="tooltip-base">' +
+                        '  <div class="tooltip-content">' +
+                        '    <div class="tooltip-data">' +
+                        '      <div class="tooltip-square" style="background:' + w.globals.colors[seriesIndex] + '"></div>' +
+                        '      <a>' + w.globals.seriesNames[seriesIndex] + ': </a>' +
+                        '      <a style="margin-left: 0.35rem; font-weight: 500">' + series[seriesIndex] + '</a>' +
+                        '    </div>';
+                    tooltip +=
+                        '  </div>' +
+                            '</div>';
+                    return tooltip;
+                }
+            },
+            colors: ['#FF005B', '#5E92DE', '#753A86', '#F0A700', '#00AF77'],
+            states: {
+                active: {
+                    filter: {
+                        type: 'none'
+                    }
+                }
+            }
+        };
+    }
+    async getPngBlob() {
+        const base64 = await this.apexChart.dataURI();
+        const decode = await fetch(base64.imgURI);
+        return decode.blob();
+    }
+}
+RadialChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadialChartComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+RadialChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RadialChartComponent, selector: "biit-radial-chart", inputs: { data: "data", title: "title", width: "width", min: "min", max: "max", gauge: "gauge" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n     [style.opacity]=\"chartOptions ? '1' : '0'\">\n  <apx-chart *ngIf=\"chartOptions\"\n             [series]=\"chartOptions.series\"\n             [chart]=\"chartOptions.chart\"\n             [labels]=\"chartOptions.labels\"\n             [dataLabels]=\"chartOptions.dataLabels\"\n             [colors]=\"chartOptions.colors\"\n             [plotOptions]=\"chartOptions.plotOptions\"\n             [xaxis]=\"chartOptions.xaxis\"\n             [yaxis]=\"chartOptions.yaxis\"\n             [legend]=\"chartOptions.legend\"\n             [title]=\"chartOptions.title\"\n             [tooltip]=\"chartOptions.tooltip\"\n             [grid]=\"chartOptions.grid\"\n             [fill]=\"chartOptions.fill\"\n             [states]=\"chartOptions.states\"\n             style=\"display: block; height: 100%;\"\n             #apexChart\n  ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem;color:#000}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid #262626}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadialChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-radial-chart', template: "<div id=\"bar-chart\"\n     [style.opacity]=\"chartOptions ? '1' : '0'\">\n  <apx-chart *ngIf=\"chartOptions\"\n             [series]=\"chartOptions.series\"\n             [chart]=\"chartOptions.chart\"\n             [labels]=\"chartOptions.labels\"\n             [dataLabels]=\"chartOptions.dataLabels\"\n             [colors]=\"chartOptions.colors\"\n             [plotOptions]=\"chartOptions.plotOptions\"\n             [xaxis]=\"chartOptions.xaxis\"\n             [yaxis]=\"chartOptions.yaxis\"\n             [legend]=\"chartOptions.legend\"\n             [title]=\"chartOptions.title\"\n             [tooltip]=\"chartOptions.tooltip\"\n             [grid]=\"chartOptions.grid\"\n             [fill]=\"chartOptions.fill\"\n             [states]=\"chartOptions.states\"\n             style=\"display: block; height: 100%;\"\n             #apexChart\n  ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:block;height:inherit;width:inherit;overflow:hidden;overflow-x:auto;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem;color:#000}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid #262626}#bar-chart ::ng-deep .apexcharts-legend-series .apexcharts-legend-marker{margin-right:7px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { apexChart: [{
+                type: ViewChild,
+                args: ['apexChart']
+            }], data: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], gauge: [{
+                type: Input
+            }] } });
+
+class RadialChartModule {
+}
+RadialChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadialChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RadialChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RadialChartModule, declarations: [RadialChartComponent], imports: [CommonModule,
+        NgApexchartsModule], exports: [RadialChartComponent] });
+RadialChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadialChartModule, imports: [CommonModule,
+        NgApexchartsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadialChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [RadialChartComponent],
+                    exports: [RadialChartComponent],
+                    imports: [
+                        CommonModule,
+                        NgApexchartsModule
+                    ]
+                }]
+        }] });
+
+class RadialChartData {
+    constructor(data, legend) {
+        this.data = data;
+        this.legend = legend;
+    }
+}
+
+class HeatmapChartRange {
+    constructor(from, to, color) {
+        this.from = from;
+        this.to = to;
+        this.color = color;
+    }
+}
+
+class HeatmapChartComponent {
+    constructor(biitIconService) {
+        this.biitIconService = biitIconService;
+        this.pageNumber = 1;
+        this.title = '';
+        this.itemsPerPage = 20;
+        biitIconService.registerIcons(completeIconSet);
+    }
+    ngOnInit() {
+        if (!this.data?.elements?.length) {
+            return;
+        }
+        this.fillDefaultValues();
+        this.createHeatmapOptions();
+    }
+    ngOnChanges() {
+        if (!this.data?.elements?.length) {
+            return;
+        }
+        this.fillDefaultValues();
+        this.createHeatmapOptions();
+    }
+    fillDefaultValues() {
+        if (!this.ranges.some(r => r.from == -10000 && r.to == -9998 && r.color == "#FFFFFF")) {
+            this.ranges.push(new HeatmapChartRange(-10000, -9998, "#FFFFFF"));
+        }
+        const data = this.data.elements.map(element => element.data);
+        const keys = new Set();
+        data.flatMap(flatValues => flatValues).forEach(value => keys.add(value.x));
+        this.data.elements.map(element => element.data)
+            .forEach(data => {
+            keys.forEach(key => {
+                if (!data.some(element => element.x === key)) {
+                    data.push({ x: key, y: -9999 });
+                }
+            });
+            data.sort((a, b) => +a.x - +b.x);
+        });
+    }
+    createHeatmapOptions() {
+        // @ts-ignore
+        this.heatmapOptions = {
+            series: this.generateSeries(),
+            chart: {
+                height: 'auto',
+                width: '892',
+                type: "heatmap",
+                events: {
+                    mounted(chart, options) {
+                        const totalWidth = chart.dimensions.w.globals.dom.elWrap.clientWidth;
+                        const oldGridWidth = chart.dimensions.w.globals.gridWidth;
+                        const newGridWidth = options.config.series[0]?.data?.length * 37;
+                        const newTotalWidth = Math.trunc((totalWidth - oldGridWidth) + newGridWidth);
+                        const totalHeight = chart.dimensions.w.globals.dom.elWrap.clientHeight;
+                        const oldGridHeight = chart.dimensions.w.globals.dom.elWrap
+                            .getElementsByClassName("apexcharts-xcrosshairs")[0].getBoundingClientRect().height;
+                        const newGridHeight = options.config.series?.length * 35;
+                        const newTotalHeight = Math.trunc((totalHeight - oldGridHeight) + newGridHeight);
+                        if (totalHeight !== newTotalHeight || totalWidth !== newTotalWidth) {
+                            options.config.chart.width = newTotalWidth;
+                            options.config.chart.height = newTotalHeight;
+                            chart.updateOptions({
+                                chart: {
+                                    width: newTotalWidth,
+                                    height: newTotalHeight
+                                },
+                                legend: {
+                                    width: newTotalWidth
+                                }
+                            });
+                        }
+                    },
+                    updated(chart, options) {
+                        const totalWidth = chart.dimensions.w.globals.dom.elWrap.clientWidth;
+                        const oldGridWidth = chart.dimensions.w.globals.gridWidth;
+                        const newGridWidth = options.config.series[0]?.data?.length * 37;
+                        const newTotalWidth = Math.trunc((totalWidth - oldGridWidth) + newGridWidth);
+                        const totalHeight = chart.dimensions.w.globals.dom.elWrap.clientHeight;
+                        const oldGridHeight = chart.dimensions.w.globals.dom.elWrap
+                            .getElementsByClassName("apexcharts-xcrosshairs")[0].getBoundingClientRect().height;
+                        const newGridHeight = options.config.series?.length * 35;
+                        const newTotalHeight = Math.trunc((totalHeight - oldGridHeight) + newGridHeight);
+                        if (totalHeight !== newTotalHeight || totalWidth !== newTotalWidth) {
+                            options.config.chart.width = newTotalWidth;
+                            options.config.chart.height = newTotalHeight;
+                            chart.updateOptions({
+                                chart: {
+                                    width: newTotalWidth,
+                                    height: newTotalHeight
+                                },
+                                legend: {
+                                    width: newTotalWidth
+                                }
+                            });
+                        }
+                    }
+                }
+            },
+            plotOptions: {
+                heatmap: {
+                    radius: 20,
+                    enableShades: false,
+                    colorScale: {
+                        ranges: this.ranges
+                    }
+                }
+            },
+            dataLabels: {
+                enabled: true,
+                style: {
+                    colors: ["#fff"],
+                    fontSize: '16px',
+                    fontFamily: 'Montserrat',
+                },
+                formatter: function (value) {
+                    if (value === -9999) {
+                        return "";
+                    }
+                    else {
+                        return value + "";
+                    }
+                }
+            },
+            xaxis: {
+                type: "category",
+                labels: {
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat',
+                    },
+                    trim: true,
+                    minHeight: 120
+                },
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        fontSize: '14px',
+                        fontFamily: 'Montserrat',
+                    },
+                },
+            },
+            legend: {
+                width: 892,
+                fontSize: '16px',
+                fontFamily: 'Montserrat',
+                itemMargin: {
+                    vertical: 20,
+                    horizontal: 20
+                },
+                formatter: function (value) {
+                    // Remove decimals on legend
+                    return Number.parseInt(value.substring(0, value.indexOf(" - "))) + ' / ' + Number.parseInt(value.substring(value.indexOf(" - ") + 3, value.length));
+                },
+                markers: {
+                    offsetY: -1
+                },
+            },
+            title: {
+                text: this.title.toUpperCase(),
+                style: {
+                    fontSize: '20px',
+                    fontFamily: 'Montserrat',
+                    fontWeight: 700,
+                }
+            },
+            tooltip: {
+                enabled: false
+            },
+            grid: {
+                borderColor: '#262626',
+                position: 'front',
+                xaxis: {
+                    lines: {
+                        show: false
+                    }
+                },
+                yaxis: {
+                    lines: {
+                        show: true
+                    }
+                },
+            },
+            states: {
+                active: {
+                    filter: {
+                        type: 'lighten',
+                        value: 0.15
+                    }
+                }
+            }
+        };
+    }
+    updateGraph() {
+        this.chart.updateSeries(this.generateSeries());
+    }
+    generateSeries() {
+        let series = [];
+        this.data.elements.forEach(item => {
+            series.push({ name: item.name, data: item.data });
+        });
+        series.forEach(category => {
+            category.data = category.data.slice((this.pageNumber - 1) * this.itemsPerPage, this.pageNumber * this.itemsPerPage);
+            while (category.data.length < this.itemsPerPage) {
+                // @ts-ignore
+                category.data.push({ x: '', y: -9999 });
+            }
+        });
+        return series;
+    }
+    async getPngBlob() {
+        const base64 = await this.chart.dataURI();
+        const decode = await fetch(base64.imgURI);
+        return decode.blob();
+    }
+}
+HeatmapChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeatmapChartComponent, deps: [{ token: i1$1.BiitIconService }], target: i0.ɵɵFactoryTarget.Component });
+HeatmapChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HeatmapChartComponent, selector: "biit-heatmap", inputs: { data: "data", ranges: "ranges", title: "title", itemsPerPage: "itemsPerPage" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["heatmap"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"chart\"\n     [style.opacity]=\"heatmapOptions ? '1' : '0'\">\n  <apx-chart #heatmap\n             *ngIf=\"heatmapOptions\"\n             [series]=\"heatmapOptions.series\"\n             [chart]=\"heatmapOptions.chart\"\n             [dataLabels]=\"heatmapOptions.dataLabels\"\n             [colors]=\"heatmapOptions.colors\"\n             [stroke]=\"heatmapOptions.stroke\"\n             [plotOptions]=\"heatmapOptions.plotOptions\"\n             [xaxis]=\"heatmapOptions.xaxis\"\n             [yaxis]=\"heatmapOptions.yaxis\"\n             [legend]=\"heatmapOptions.legend\"\n             [title]=\"heatmapOptions.title\"\n             [tooltip]=\"heatmapOptions.tooltip\"\n             [grid]=\"heatmapOptions.grid\"\n             [states]=\"heatmapOptions.states\"\n  ></apx-chart>\n  <div class=\"buttons\"\n       *ngIf=\"this.data?.elements[0]?.data.length > itemsPerPage\">\n    <button biit-icon\n            [icon]=\"'right_arrow'\"\n            [disabled]=\"pageNumber == 1\"\n            (click)=\"pageNumber = pageNumber-1; updateGraph()\"\n            style=\"rotate: 180deg\"\n    ></button>\n    <button biit-icon\n            [icon]=\"'right_arrow'\"\n            [disabled]=\"this.data?.elements[0].data.length <= pageNumber*itemsPerPage\"\n            (click)=\"pageNumber = pageNumber+1; updateGraph()\"\n    ></button>\n  </div>\n</div>\n", styles: ["#chart{display:block;position:relative;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;transition:.5s ease-in-out}#chart apx-chart ::ng-deep .apexcharts-legend>.apexcharts-legend-series:last-child{display:none}.buttons{display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "component", type: i4.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeatmapChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-heatmap', template: "<div id=\"chart\"\n     [style.opacity]=\"heatmapOptions ? '1' : '0'\">\n  <apx-chart #heatmap\n             *ngIf=\"heatmapOptions\"\n             [series]=\"heatmapOptions.series\"\n             [chart]=\"heatmapOptions.chart\"\n             [dataLabels]=\"heatmapOptions.dataLabels\"\n             [colors]=\"heatmapOptions.colors\"\n             [stroke]=\"heatmapOptions.stroke\"\n             [plotOptions]=\"heatmapOptions.plotOptions\"\n             [xaxis]=\"heatmapOptions.xaxis\"\n             [yaxis]=\"heatmapOptions.yaxis\"\n             [legend]=\"heatmapOptions.legend\"\n             [title]=\"heatmapOptions.title\"\n             [tooltip]=\"heatmapOptions.tooltip\"\n             [grid]=\"heatmapOptions.grid\"\n             [states]=\"heatmapOptions.states\"\n  ></apx-chart>\n  <div class=\"buttons\"\n       *ngIf=\"this.data?.elements[0]?.data.length > itemsPerPage\">\n    <button biit-icon\n            [icon]=\"'right_arrow'\"\n            [disabled]=\"pageNumber == 1\"\n            (click)=\"pageNumber = pageNumber-1; updateGraph()\"\n            style=\"rotate: 180deg\"\n    ></button>\n    <button biit-icon\n            [icon]=\"'right_arrow'\"\n            [disabled]=\"this.data?.elements[0].data.length <= pageNumber*itemsPerPage\"\n            (click)=\"pageNumber = pageNumber+1; updateGraph()\"\n    ></button>\n  </div>\n</div>\n", styles: ["#chart{display:block;position:relative;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;transition:.5s ease-in-out}#chart apx-chart ::ng-deep .apexcharts-legend>.apexcharts-legend-series:last-child{display:none}.buttons{display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.BiitIconService }]; }, propDecorators: { chart: [{
+                type: ViewChild,
+                args: ["heatmap"]
+            }], data: [{
+                type: Input
+            }], ranges: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], itemsPerPage: [{
+                type: Input
+            }] } });
+
+class HeatmapChartModule {
+}
+HeatmapChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeatmapChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+HeatmapChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: HeatmapChartModule, declarations: [HeatmapChartComponent], imports: [CommonModule,
+        NgApexchartsModule,
+        BiitIconButtonModule], exports: [HeatmapChartComponent] });
+HeatmapChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeatmapChartModule, imports: [CommonModule,
+        NgApexchartsModule,
+        BiitIconButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeatmapChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [HeatmapChartComponent],
+                    exports: [HeatmapChartComponent],
+                    imports: [
+                        CommonModule,
+                        NgApexchartsModule,
+                        BiitIconButtonModule
+                    ]
+                }]
+        }] });
+
+class HeatmapChartData {
+    static fromDataElements(elements) {
+        const barChartData = new HeatmapChartData();
+        barChartData.elements = [];
+        barChartData.elements[0] = elements;
+        return barChartData;
+    }
+    static fromMultipleDataElements(elements) {
+        const heatmapChartData = new HeatmapChartData();
+        heatmapChartData.elements = elements;
+        return heatmapChartData;
+    }
+    //Values -> metric -> x --> Value
+    static fromElementsAsMap(values) {
+        const heatmapChartDataElements = [];
+        for (const metric of values.keys()) {
+            const heatmapChartDataElement = new HeatmapChartDataElement();
+            heatmapChartDataElement.name = metric;
+            const sortedMap = new Map([...values.get(metric).entries()].sort());
+            for (const point of sortedMap) {
+                heatmapChartDataElement.data.push({ x: point[0], y: point[1] });
+            }
+            heatmapChartDataElements.push(heatmapChartDataElement);
+        }
+        return HeatmapChartData.fromMultipleDataElements(heatmapChartDataElements);
+    }
+    constructor(name) {
+        this.elements = [];
+        this.name = name;
+        this.elements = [];
+    }
+    getLabels() {
+        return this.elements.map(e => e.name);
+    }
+    getData() {
+        return this.elements;
+    }
+}
+class HeatmapChartDataElement {
+    constructor(points, name) {
+        if (points) {
+            this.data = points.map(point => {
+                return { x: point[0], y: point[1] };
+            });
+        }
+        else {
+            this.data = [];
+        }
+        if (name) {
+            this.name = name;
+        }
+        else {
+            this.name = "";
+        }
+    }
+}
+class HeatmapMetric {
+    constructor() {
+        //Metric name (Y Axis)
+        this.name = "";
+        //Subject value (X Axis + Value in Y)
+        this.data = [];
+    }
+}
+
+var View;
+(function (View) {
+    View["GRID"] = "GRID";
+    View["TIMELINE"] = "TIMELINE";
+})(View || (View = {}));
+
+class SafeHtmlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(value) {
+        return this.sanitizer.bypassSecurityTrustHtml(value.outerHTML);
+    }
+}
+SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeHtml'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
+
+class MetaElementComponent {
+}
+MetaElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MetaElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetaElementComponent, selector: "biit-meta-element", inputs: { icon: "icon", styles: "styles", classes: "classes" }, ngImport: i0, template: "<div class=\"wh-100 c-pointer\">\n  <div *ngIf=\"!icon\" [style]=\"styles\" class=\"wh-100\" [ngClass]=\"classes\">\n    <ng-content></ng-content>\n  </div>\n  <svg *ngIf=\"icon\" [style]=\"styles\" class=\"wh-100\" [ngClass]=\"classes\" [innerHTML]=\"icon | safeHtml\" />\n</div>\n", styles: [".wh-100{width:100%;height:100%}.c-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-meta-element', template: "<div class=\"wh-100 c-pointer\">\n  <div *ngIf=\"!icon\" [style]=\"styles\" class=\"wh-100\" [ngClass]=\"classes\">\n    <ng-content></ng-content>\n  </div>\n  <svg *ngIf=\"icon\" [style]=\"styles\" class=\"wh-100\" [ngClass]=\"classes\" [innerHTML]=\"icon | safeHtml\" />\n</div>\n", styles: [".wh-100{width:100%;height:100%}.c-pointer{cursor:pointer}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], styles: [{
+                type: Input
+            }], classes: [{
+                type: Input
+            }] } });
+
+class MetaBoardComponent {
+    constructor() {
+        this.size = '2rem';
+        this.elementClick = new EventEmitter();
+    }
+    onElementClick(element) {
+        this.elementClick.emit(element);
+    }
+}
+MetaBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MetaBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetaBoardComponent, selector: "biit-meta-board", inputs: { data: "data", selected: "selected" }, outputs: { elementClick: "elementClick" }, ngImport: i0, template: "<div class=\"meta-board\" id=\"metaviewer-board\"\n     [style.grid-template-columns]=\"'repeat(auto-fill, minmax(' + this.size + ', 1fr))'\"\n>\n  <biit-meta-element class=\"metaviewer-element\" [style.width]=\"this.size\"\n    *ngFor=\"let element of data; let index = index\"\n                      [styles]=\"element.styles\"\n                      [classes]=\"element.classes\"\n                      [class.selected]=\"element === selected\"\n                      [icon]=\"element.icon\"\n                      (click)=\"onElementClick(element)\"\n                     @fadeInOut\n  ><div *ngIf=\"element.custom\" [innerHTML]=\"element.custom.innerHTML\"></div></biit-meta-element>\n</div>\n", styles: [".meta-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(2em,1fr));grid-auto-rows:2em;gap:.2em;overflow-y:auto;height:100%;width:100%;padding-right:.2em;&>biit-meta-element{display:flex;align-content:center;justify-content:center;justify-self:center}}.selected{box-sizing:border-box;border:2px solid #262626}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaElementComponent, selector: "biit-meta-element", inputs: ["icon", "styles", "classes"] }], animations: [
+        trigger('fadeInOut', [
+            transition(':enter', [
+                style({ width: 0, height: 0, opacity: 0, 'align-self': 'center' }),
+                animate('300ms ease-in', style({ width: '*', height: '*', opacity: 1, 'align-self': 'center' }))
+            ]),
+            transition(':leave', [
+                style({ width: '*', height: '*', opacity: 1, 'align-self': 'center' }),
+                animate('300ms ease-in', style({ width: 0, height: 0, opacity: 0, 'align-self': 'center' }))
+            ])
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaBoardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-meta-board', animations: [
+                        trigger('fadeInOut', [
+                            transition(':enter', [
+                                style({ width: 0, height: 0, opacity: 0, 'align-self': 'center' }),
+                                animate('300ms ease-in', style({ width: '*', height: '*', opacity: 1, 'align-self': 'center' }))
+                            ]),
+                            transition(':leave', [
+                                style({ width: '*', height: '*', opacity: 1, 'align-self': 'center' }),
+                                animate('300ms ease-in', style({ width: 0, height: 0, opacity: 0, 'align-self': 'center' }))
+                            ])
+                        ])
+                    ], template: "<div class=\"meta-board\" id=\"metaviewer-board\"\n     [style.grid-template-columns]=\"'repeat(auto-fill, minmax(' + this.size + ', 1fr))'\"\n>\n  <biit-meta-element class=\"metaviewer-element\" [style.width]=\"this.size\"\n    *ngFor=\"let element of data; let index = index\"\n                      [styles]=\"element.styles\"\n                      [classes]=\"element.classes\"\n                      [class.selected]=\"element === selected\"\n                      [icon]=\"element.icon\"\n                      (click)=\"onElementClick(element)\"\n                     @fadeInOut\n  ><div *ngIf=\"element.custom\" [innerHTML]=\"element.custom.innerHTML\"></div></biit-meta-element>\n</div>\n", styles: [".meta-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(2em,1fr));grid-auto-rows:2em;gap:.2em;overflow-y:auto;height:100%;width:100%;padding-right:.2em;&>biit-meta-element{display:flex;align-content:center;justify-content:center;justify-self:center}}.selected{box-sizing:border-box;border:2px solid #262626}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], elementClick: [{
+                type: Output
+            }] } });
+
+var FieldType;
+(function (FieldType) {
+    FieldType["STRING"] = "STRING";
+    FieldType["NUMBER"] = "NUMBER";
+    FieldType["BOOLEAN"] = "BOOLEAN";
+    FieldType["NULL"] = "NULL";
+    FieldType["DATE"] = "DATE";
+    FieldType["UNKNOWN"] = "UNKNOWN";
+})(FieldType || (FieldType = {}));
+
+class FieldTypePipe {
+    transform(field, data) {
+        const item = data.find(item => item.data != null && item.data[field] != null);
+        if (item == null) {
+            return FieldType.NULL;
+        }
+        const value = item.data[field];
+        if (typeof value === 'string') {
+            return FieldType.STRING;
+        }
+        if (typeof value === 'boolean') {
+            return FieldType.BOOLEAN;
+        }
+        if (typeof value === 'number') {
+            return FieldType.NUMBER;
+        }
+        if (value instanceof Date) {
+            return FieldType.DATE;
+        }
+        return FieldType.STRING;
+    }
+}
+FieldTypePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FieldTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FieldTypePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FieldTypePipe, name: "fieldType" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FieldTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fieldType'
+                }]
+        }] });
+
+class MetaElementToBarChartPipe {
+    transform(data, field, color = '#f20d5e') {
+        const values = data.map(item => item.data[field]);
+        const groupedValues = new Map();
+        values.forEach(value => {
+            if (groupedValues.has(value)) {
+                groupedValues.set(value, groupedValues.get(value) + 1);
+            }
+            else {
+                groupedValues.set(value, 1);
+            }
+        });
+        const sortedMap = new Map([...groupedValues.entries()].sort((a, b) => a[0] - b[0]));
+        const barChartSeries = [new BarChartSeries(field, Array.from(sortedMap.values()).map(value => new BarChartSeriesData(value)), color)];
+        return new BarChartData(barChartSeries, Array.from(sortedMap.keys()).map(value => value.toString()));
+    }
+}
+MetaElementToBarChartPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaElementToBarChartPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MetaElementToBarChartPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MetaElementToBarChartPipe, name: "metaElementToBarChart" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaElementToBarChartPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'metaElementToBarChart'
+                }]
+        }] });
+
+class MetaElementMinValuePipe {
+    transform(data, field) {
+        if (!data) {
+            return 0;
+        }
+        const values = data.map(d => d.data).map(d => d[field]);
+        return Math.min(...values);
+    }
+}
+MetaElementMinValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaElementMinValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MetaElementMinValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MetaElementMinValuePipe, name: "metaElementMinValue" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaElementMinValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'metaElementMinValue'
+                }]
+        }] });
+
+class MetaElementMaxValuePipe {
+    transform(data, field) {
+        if (!data) {
+            return 0;
+        }
+        const values = data.map(d => d.data).map(d => d[field]);
+        return Math.max(...values);
+    }
+}
+MetaElementMaxValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaElementMaxValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MetaElementMaxValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MetaElementMaxValuePipe, name: "metaElementMaxValue" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaElementMaxValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'metaElementMaxValue'
+                }]
+        }] });
+
+class StepValueExtractorPipe {
+    transform(data, field) {
+        if (!data) {
+            return 1;
+        }
+        const values = data.map(d => d.data).map(d => d[field]);
+        const decimalCounts = values.map(value => this.getDecimalCount(value));
+        const maxDecimals = Math.max(...decimalCounts);
+        if (maxDecimals === 0) {
+            return 1;
+        }
+        return +('0.' + (maxDecimals === 1 ? '1' : ('0'.repeat(maxDecimals - 1)) + '1'));
+    }
+    getDecimalCount(value) {
+        const numStr = value.toString();
+        if (numStr.includes('.')) {
+            return numStr.split('.')[1].length;
+        }
+        else {
+            return 0;
+        }
+    }
+}
+StepValueExtractorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepValueExtractorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+StepValueExtractorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: StepValueExtractorPipe, name: "stepValueExtractor" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepValueExtractorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'stepValueExtractor'
+                }]
+        }] });
+
+class BarRangeComponent {
+    constructor() {
+        this.rangeChange = new EventEmitter();
+        this.range = [0, 0];
+    }
+    set _items(value) {
+        this.items = value;
+        this.range = [Math.min(...this.items.map(d => d.data[this.field])), Math.max(...this.items.map(d => d.data[this.field]))];
+    }
+    set _range(value) {
+        if (!value || value.length !== 2) {
+            this.range = [Math.min(...this.items.map(d => d.data[this.field])), Math.max(...this.items.map(d => d.data[this.field]))];
+            return;
+        }
+        this.range = value;
+    }
+    onRangeChange(range) {
+        this.rangeChange.emit(range);
+    }
+}
+BarRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BarRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BarRangeComponent, selector: "biit-bar-range", inputs: { _items: ["items", "_items"], field: "field", _range: ["range", "_range"] }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<div class=\"bar-range-body\">\n  <biit-bar-chart [data]=\"items | metaElementToBarChart : field\" [compact]=\"true\"/>\n  <biit-slider-range\n    [min]=\"items | metaElementMinValue : field\"\n    [max]=\"items | metaElementMaxValue : field\"\n    [step]=\"items | stepValueExtractor : field\"\n    [separator]=\"items | stepValueExtractor : field\"\n    [ticks]=\"0\"\n    [(ngModel)]=\"range\"\n    (ngModelChange)=\"onRangeChange($event)\"\n  />\n</div>\n", styles: [".bar-range-body{display:flex;flex-direction:column;gap:.5em}\n"], dependencies: [{ kind: "component", type: BarChartComponent, selector: "biit-bar-chart", inputs: ["data", "title", "width", "min", "max", "compact"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.BiitSliderRangeComponent, selector: "biit-slider-range", inputs: ["min", "max", "step", "separator", "ticks", "labels"] }, { kind: "pipe", type: MetaElementToBarChartPipe, name: "metaElementToBarChart" }, { kind: "pipe", type: MetaElementMinValuePipe, name: "metaElementMinValue" }, { kind: "pipe", type: MetaElementMaxValuePipe, name: "metaElementMaxValue" }, { kind: "pipe", type: StepValueExtractorPipe, name: "stepValueExtractor" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-bar-range', template: "<div class=\"bar-range-body\">\n  <biit-bar-chart [data]=\"items | metaElementToBarChart : field\" [compact]=\"true\"/>\n  <biit-slider-range\n    [min]=\"items | metaElementMinValue : field\"\n    [max]=\"items | metaElementMaxValue : field\"\n    [step]=\"items | stepValueExtractor : field\"\n    [separator]=\"items | stepValueExtractor : field\"\n    [ticks]=\"0\"\n    [(ngModel)]=\"range\"\n    (ngModelChange)=\"onRangeChange($event)\"\n  />\n</div>\n", styles: [".bar-range-body{display:flex;flex-direction:column;gap:.5em}\n"] }]
+        }], propDecorators: { _items: [{
+                type: Input,
+                args: ['items']
+            }], field: [{
+                type: Input
+            }], _range: [{
+                type: Input,
+                args: ['range']
+            }], rangeChange: [{
+                type: Output
+            }] } });
+
+class MonthNamePipe {
+    transform(month) {
+        const date = new Date();
+        date.setMonth(month);
+        return date.toLocaleString('default', { month: 'long' });
+    }
+}
+MonthNamePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MonthNamePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MonthNamePipe, name: "monthName" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthNamePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'monthName'
+                }]
+        }] });
+
+class DateFilterSelectorComponent {
+    constructor() {
+        this.rangeChange = new EventEmitter();
+        this.items = [];
+        this.sortByYear = new Map();
+        this.sortByMonth = new Map();
+        this.periodRange = [];
+        this.selectedRanges = {};
+    }
+    set _items(value) {
+        this.items = value;
+        this.sortValues();
+    }
+    set _field(value) {
+        this.field = value;
+        this.sortValues();
+    }
+    set _range(value) {
+        this.periodRange = value;
+        this.selectedRanges = {};
+        if (!value) {
+            return;
+        }
+        this.periodRange.forEach(range => {
+            const startDate = range[0];
+            const endDate = range[1];
+            if (startDate.getTime() === new Date(range[0].getFullYear(), 0, 1).getTime()
+                && endDate.getTime() === new Date(range[0].getFullYear(), 11, 31, 23, 59, 59, 999).getTime()) {
+                this.selectedRanges[startDate.getFullYear().toString()] = true;
+                this.selectedAllMonths(startDate.getFullYear());
+            }
+            else {
+                this.selectedRanges[startDate.getFullYear() + '-' + startDate.getMonth()] = true;
+            }
+        });
+    }
+    sortValues() {
+        if (!this.items || !this.items.length || !this.field || !this.field.length) {
+            return;
+        }
+        this.sortByYear = new Map();
+        this.items.forEach(d => {
+            const year = new Date(d.data[this.field]).getFullYear();
+            if (!this.sortByYear.has(year)) {
+                this.sortByYear.set(year, []);
+            }
+            this.sortByYear.get(year).push(d);
+            this.sortByYear = this.sortMap(this.sortByYear);
+        });
+    }
+    sortMap(map) {
+        return new Map([...map.entries()].sort((a, b) => b[0] - a[0]));
+    }
+    onDisplayYear(year) {
+        if (year === this.selectedYear) {
+            this.selectedYear = undefined;
+            return;
+        }
+        this.selectedYear = year;
+        this.loadMonthlyData(year);
+    }
+    loadMonthlyData(year) {
+        this.sortByMonth = new Map();
+        this.sortByYear.get(year).forEach(d => {
+            const month = new Date(d.data[this.field]).getMonth();
+            if (!this.sortByMonth.has(month)) {
+                this.sortByMonth.set(month, []);
+            }
+            this.sortByMonth.get(month).push(d);
+            this.sortByMonth = this.sortMap(this.sortByMonth);
+        });
+    }
+    onYearSelected(year, selected) {
+        if (this.selectedYear === year) {
+            this.selectedYear = undefined;
+        }
+        this.loadMonthlyData(year);
+        selected ? this.selectedAllMonths(year) : this.removeSelectedRanges(year);
+        this.convertSelectedRanges();
+        this.emitSelectedRanges();
+    }
+    selectedAllMonths(year) {
+        this.sortByMonth.forEach((months, month) => {
+            const date = year + '-' + month;
+            this.selectedRanges[date] = true;
+        });
+    }
+    removeSelectedRanges(year) {
+        for (let date in this.selectedRanges) {
+            if (date.startsWith(year.toString())) {
+                delete this.selectedRanges[date];
+            }
+        }
+    }
+    convertSelectedRanges() {
+        this.periodRange = [];
+        const selectedRanges = { ...this.selectedRanges };
+        const years = Object.keys(selectedRanges).filter(date => !date.toString().includes('-'));
+        years.forEach(year => {
+            for (const key in selectedRanges) {
+                if (key.startsWith(year + '-')) {
+                    delete selectedRanges[key];
+                }
+            }
+        });
+        for (let date in selectedRanges) {
+            if (selectedRanges[date]) {
+                const splitDate = date.split('-');
+                const startDate = splitDate.length === 1 ? new Date(+splitDate[0], 0, 1) : new Date(+splitDate[0], +splitDate[1], 1);
+                const endDate = splitDate.length === 1
+                    ? new Date(+splitDate[0], 11, 31, 23, 59, 59, 999)
+                    : new Date(+splitDate[0], +splitDate[1] + 1, 0, 23, 59, 59, 999);
+                this.periodRange.push([startDate, endDate]);
+            }
+        }
+    }
+    emitSelectedRanges() {
+        if (this.periodRange.length === 0) {
+            this.rangeChange.emit(null);
+            return;
+        }
+        this.rangeChange.emit(this.periodRange);
+    }
+    onMonthSelected(year, month, selected) {
+        if (!selected && this.selectedRanges[year]) {
+            delete this.selectedRanges[year];
+        }
+        this.convertSelectedRanges();
+        this.emitSelectedRanges();
+    }
+}
+DateFilterSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateFilterSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DateFilterSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateFilterSelectorComponent, selector: "biit-date-filter-selector", inputs: { _items: ["items", "_items"], _field: ["field", "_field"], _range: ["range", "_range"] }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<div>\n  <div *ngFor=\"let year of sortByYear.keys()\"  class=\"date-filter-row\">\n    <biit-checkbox [(ngModel)]=\"selectedRanges[year + '']\" (ngModelChange)=\"onYearSelected(year, $event)\" >\n      <div class=\"year-title\">\n        <div class=\"title-counter\">\n          <div> {{year}} </div>\n          <div> ({{sortByYear.get(year).length}})</div>\n        </div>\n        <biit-icon\n          name=\"right_arrow\" class=\"year-arrow\" [class.arrow-rotate]=\"selectedYear === year\"\n          (click)=\"$event.preventDefault(); onDisplayYear(year)\" />\n      </div>\n      <div class=\"month-body\" *ngIf=\"selectedYear === year\">\n        <div *ngFor=\"let month of sortByMonth.keys()\">\n          <biit-checkbox\n            class=\"month-checkbox\"\n            [(ngModel)]=\"selectedRanges[year + '-' + month]\"\n            (ngModelChange)=\"onMonthSelected(year, month, $event)\" >\n            <div class=\"title-counter\">\n              <div>\n                {{month | monthName}}\n              </div>\n              <div>\n                ({{sortByMonth.get(month).length}})\n              </div>\n            </div>\n          </biit-checkbox>\n        </div>\n      </div>\n    </biit-checkbox>\n  </div>\n</div>\n", styles: [".year-arrow{cursor:pointer;width:1em;height:1em;display:block;transition:transform .3s ease-in-out}.arrow-rotate{transform:rotate(90deg)}biit-checkbox{display:block;width:100%;&>label{width:100%;&>div{width:100%;&>div>a{width:100%}}}}.year-title{display:flex;align-items:center;&>div:first-child{flex-grow:1}}.month-body{display:flex;flex-direction:column;gap:.25em;font-size:.75em}.date-filter-row{margin:.5em 0;align-content:center}.title-counter{display:flex;&>div:first-child{flex-grow:1}&>div:last-child{color:gray;margin-right:.5em;font-size:.75em}}.month-body .title-counter>div:last-child{margin-right:1.2em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"] }, { kind: "component", type: i1$1.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: MonthNamePipe, name: "monthName" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateFilterSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-date-filter-selector', template: "<div>\n  <div *ngFor=\"let year of sortByYear.keys()\"  class=\"date-filter-row\">\n    <biit-checkbox [(ngModel)]=\"selectedRanges[year + '']\" (ngModelChange)=\"onYearSelected(year, $event)\" >\n      <div class=\"year-title\">\n        <div class=\"title-counter\">\n          <div> {{year}} </div>\n          <div> ({{sortByYear.get(year).length}})</div>\n        </div>\n        <biit-icon\n          name=\"right_arrow\" class=\"year-arrow\" [class.arrow-rotate]=\"selectedYear === year\"\n          (click)=\"$event.preventDefault(); onDisplayYear(year)\" />\n      </div>\n      <div class=\"month-body\" *ngIf=\"selectedYear === year\">\n        <div *ngFor=\"let month of sortByMonth.keys()\">\n          <biit-checkbox\n            class=\"month-checkbox\"\n            [(ngModel)]=\"selectedRanges[year + '-' + month]\"\n            (ngModelChange)=\"onMonthSelected(year, month, $event)\" >\n            <div class=\"title-counter\">\n              <div>\n                {{month | monthName}}\n              </div>\n              <div>\n                ({{sortByMonth.get(month).length}})\n              </div>\n            </div>\n          </biit-checkbox>\n        </div>\n      </div>\n    </biit-checkbox>\n  </div>\n</div>\n", styles: [".year-arrow{cursor:pointer;width:1em;height:1em;display:block;transition:transform .3s ease-in-out}.arrow-rotate{transform:rotate(90deg)}biit-checkbox{display:block;width:100%;&>label{width:100%;&>div{width:100%;&>div>a{width:100%}}}}.year-title{display:flex;align-items:center;&>div:first-child{flex-grow:1}}.month-body{display:flex;flex-direction:column;gap:.25em;font-size:.75em}.date-filter-row{margin:.5em 0;align-content:center}.title-counter{display:flex;&>div:first-child{flex-grow:1}&>div:last-child{color:gray;margin-right:.5em;font-size:.75em}}.month-body .title-counter>div:last-child{margin-right:1.2em}\n"] }]
+        }], propDecorators: { _items: [{
+                type: Input,
+                args: ['items']
+            }], _field: [{
+                type: Input,
+                args: ['field']
+            }], _range: [{
+                type: Input,
+                args: ['range']
+            }], rangeChange: [{
+                type: Output
+            }] } });
+
+class TextFilterComponent {
+    constructor() {
+        this.filterChange = new EventEmitter();
+        this.search = '';
+    }
+    set filter(value) {
+        this.search = value;
+    }
+    onSearchChange(value) {
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => this.filterChange.emit(this.search), 500);
+    }
+}
+TextFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TextFilterComponent, selector: "biit-text-filter", inputs: { filter: "filter" }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<biit-input-text\n  [(ngModel)]=\"search\"\n  (ngModelChange)=\"onSearchChange($event)\"\n/>\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.BiitInputTextComponent, selector: "biit-input-text", inputs: ["placeholder", "error", "description", "info", "type", "icon", "fieldName", "disabled", "required", "readonly", "min", "max", "minLength", "maxLength", "regEx"], outputs: ["onActionPerformed"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-text-filter', template: "<biit-input-text\n  [(ngModel)]=\"search\"\n  (ngModelChange)=\"onSearchChange($event)\"\n/>\n" }]
+        }], propDecorators: { filter: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }] } });
+
+class BooleanFilterComponent {
+    constructor() {
+        this.filterChange = new EventEmitter();
+        this.value = undefined;
+    }
+    set filter(value) {
+        value === undefined ? this.value = undefined : this.value = !!value;
+    }
+    onFilterChanged(value) {
+        this.filterChange.emit(value);
+    }
+}
+BooleanFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BooleanFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BooleanFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BooleanFilterComponent, selector: "biit-boolean-filter", inputs: { filter: "filter" }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<biit-ternary-togle [(ngModel)]=\"value\" (ngModelChange)=\"onFilterChanged($event)\" />\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.BiitTernaryToggleComponent, selector: "biit-ternary-togle", inputs: ["disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BooleanFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-boolean-filter', template: "<biit-ternary-togle [(ngModel)]=\"value\" (ngModelChange)=\"onFilterChanged($event)\" />\n" }]
+        }], propDecorators: { filter: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }] } });
+
+class FilterByPipe {
+    transform(value, filterTerm) {
+        return value.filter((item) => item.toLowerCase().includes(filterTerm.toLowerCase()));
+    }
+}
+FilterByPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FilterByPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FilterByPipe, name: "filterBy" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterByPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterBy'
+                }]
+        }] });
+
+class HasPipe {
+    transform(map, key) {
+        return map && map.has(key);
+    }
+}
+HasPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HasPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+HasPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: HasPipe, name: "has" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HasPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'has'
+                }]
+        }] });
+
+class MetaFilterComponent {
+    set _metadata(data) {
+        this.metadata = data;
+    }
+    constructor(fieldType) {
+        this.fieldType = fieldType;
+        this.filterChange = new EventEmitter();
+        this.selectedField = '';
+        this.search = '';
+        this.filter = new Map();
+        this.FieldType = FieldType;
+    }
+    ngOnInit() {
+        this.setFilters();
+    }
+    setFilters() {
+        this.metadata.preselection.forEach(preset => {
+            this.filter.set(preset.key, preset.value);
+        });
+        this.detectFilter();
+    }
+    onFieldClick(field) {
+        if (this.fieldType.transform(field, this.metadata.data) === FieldType.BOOLEAN) {
+            return;
+        }
+        if (this.selectedField === field) {
+            this.selectedField = null;
+            return;
+        }
+        this.selectedField = field;
+    }
+    onRangeChanged(field, range) {
+        this.filter.set(field, range);
+        this.detectFilter();
+    }
+    onDateRangeChanged(field, range) {
+        range ? this.filter.set(field, range) : this.filter.delete(field);
+        this.detectFilter();
+    }
+    onBooleanFilterChanged(field, value) {
+        value === undefined ? this.filter.delete(field) : this.filter.set(field, value);
+        this.detectFilter();
+    }
+    removeFilter(field) {
+        this.filter.delete(field);
+        this.detectFilter();
+    }
+    clearFilters() {
+        this.filter.clear();
+        this.detectFilter();
+    }
+    detectFilter() {
+        this.filter = new Map(this.filter);
+        this.filterChange.emit(this.filter);
+    }
+    onFilterChanged(field, value) {
+        if (!value) {
+            this.filter.delete(field);
+        }
+        else {
+            this.filter.set(field, value);
+        }
+        this.detectFilter();
+    }
+}
+MetaFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaFilterComponent, deps: [{ token: FieldTypePipe }], target: i0.ɵɵFactoryTarget.Component });
+MetaFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetaFilterComponent, selector: "biit-meta-filter", inputs: { _metadata: ["metadata", "_metadata"] }, outputs: { filterChange: "filterChange" }, providers: [FieldTypePipe], ngImport: i0, template: "<div class=\"filter-view\" id=\"metadata-filter\">\n  <div class=\"filter-container\">\n    <div class=\"filter-clear\">\n      <div *ngIf=\"filter.size\">\n        <div>\n          Clear All\n        </div>\n        <div>\n          <button biit-icon\n                  [icon]=\"'cross_wide'\"\n                  (click)=\"clearFilters()\"\n          ></button>\n        </div>\n      </div>\n    </div>\n    <div class=\"filter-search\">\n      <biit-input-text\n        placeholder=\"search\"\n        icon=\"search\"\n        [(ngModel)]=\"search\"\n      />\n    </div>\n    <div class=\"filter-sections\">\n      <div *ngFor=\"let field of (metadata.fields | filterBy: search)\" class=\"filter-section\">\n        <div class=\"filter-title\" (click)=\"onFieldClick(field)\">\n          <div>\n            <div>{{field}}</div>\n            <div class=\"align-content-center\" *ngIf=\"(field | fieldType: metadata.data) === FieldType.BOOLEAN\">\n              <biit-boolean-filter\n                [filter]=\"filter.get(field)\"\n                (filterChange)=\"onBooleanFilterChanged(field, $event)\"/>\n            </div>\n          </div>\n          <div *ngIf=\"filter | has : field\" class=\"filter-remove\">\n            <button biit-icon\n                    [icon]=\"'cross_wide'\"\n                    (click)=\"$event.stopImmediatePropagation(); removeFilter(field)\"\n            ></button>\n          </div>\n        </div>\n        <div *ngIf=\"field === selectedField && (field | fieldType: metadata.data) !== FieldType.BOOLEAN\"\n             class=\"filter-body\"\n             [ngSwitch]=\"field | fieldType: metadata.data\"\n        >\n          <biit-bar-range *ngSwitchCase=\"FieldType.NUMBER\"\n                          [field]=\"field\"\n                          [items]=\"metadata.data\"\n                          [range]=\"filter.get(field)\"\n                          (rangeChange)=\"onRangeChanged(field, $event)\"/>\n          <biit-date-filter-selector *ngSwitchCase=\"FieldType.DATE\"\n                          [field]=\"field\"\n                          [items]=\"metadata.data\"\n                          [range]=\"filter.get(field)\"\n                          (rangeChange)=\"onDateRangeChanged(field, $event)\"/>\n          <biit-text-filter *ngSwitchCase=\"FieldType.STRING\"\n                            [filter]=\"filter.get(field)\"\n                            (filterChange)=\"onFilterChanged(field, $event)\"/>\n          <div *ngSwitchDefault>Unknown</div>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".filter-view{font-size:1em;transition:.3s;height:100%;width:100%;display:block}.filter-container{height:100%;display:flex;flex-direction:column;background-color:#fff}.filter-sections{overflow-y:auto;height:100%;padding:0 1em}.filter-clear{margin:1em;min-height:2.25em;align-self:end;&>div:first-child{display:inline-flex;align-items:center}}.filter-search{margin:0 1em}.filter-title{display:flex;flex-direction:row;&>div:first-child{flex-grow:1;display:flex;flex-direction:row;gap:1em}}.filter-remove{align-content:center;&>biit-icon{display:block;width:1em;height:1em}}.filter-body{margin:.5em 0}.filter-section{cursor:pointer;-webkit-user-select:none;user-select:none;&>div:first-child{min-height:2.25em;align-items:center;font-size:1em}border-bottom:1px solid #262626}biit-date-filter-selector{font-size:1em}::ng-deep .filter-search>biit-input-text>.biit-input{min-width:unset!important}.align-content-center{align-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.BiitInputTextComponent, selector: "biit-input-text", inputs: ["placeholder", "error", "description", "info", "type", "icon", "fieldName", "disabled", "required", "readonly", "min", "max", "minLength", "maxLength", "regEx"], outputs: ["onActionPerformed"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BarRangeComponent, selector: "biit-bar-range", inputs: ["items", "field", "range"], outputs: ["rangeChange"] }, { kind: "component", type: DateFilterSelectorComponent, selector: "biit-date-filter-selector", inputs: ["items", "field", "range"], outputs: ["rangeChange"] }, { kind: "component", type: TextFilterComponent, selector: "biit-text-filter", inputs: ["filter"], outputs: ["filterChange"] }, { kind: "component", type: BooleanFilterComponent, selector: "biit-boolean-filter", inputs: ["filter"], outputs: ["filterChange"] }, { kind: "component", type: i4.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "pipe", type: FilterByPipe, name: "filterBy" }, { kind: "pipe", type: FieldTypePipe, name: "fieldType" }, { kind: "pipe", type: HasPipe, name: "has" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-meta-filter', providers: [FieldTypePipe], template: "<div class=\"filter-view\" id=\"metadata-filter\">\n  <div class=\"filter-container\">\n    <div class=\"filter-clear\">\n      <div *ngIf=\"filter.size\">\n        <div>\n          Clear All\n        </div>\n        <div>\n          <button biit-icon\n                  [icon]=\"'cross_wide'\"\n                  (click)=\"clearFilters()\"\n          ></button>\n        </div>\n      </div>\n    </div>\n    <div class=\"filter-search\">\n      <biit-input-text\n        placeholder=\"search\"\n        icon=\"search\"\n        [(ngModel)]=\"search\"\n      />\n    </div>\n    <div class=\"filter-sections\">\n      <div *ngFor=\"let field of (metadata.fields | filterBy: search)\" class=\"filter-section\">\n        <div class=\"filter-title\" (click)=\"onFieldClick(field)\">\n          <div>\n            <div>{{field}}</div>\n            <div class=\"align-content-center\" *ngIf=\"(field | fieldType: metadata.data) === FieldType.BOOLEAN\">\n              <biit-boolean-filter\n                [filter]=\"filter.get(field)\"\n                (filterChange)=\"onBooleanFilterChanged(field, $event)\"/>\n            </div>\n          </div>\n          <div *ngIf=\"filter | has : field\" class=\"filter-remove\">\n            <button biit-icon\n                    [icon]=\"'cross_wide'\"\n                    (click)=\"$event.stopImmediatePropagation(); removeFilter(field)\"\n            ></button>\n          </div>\n        </div>\n        <div *ngIf=\"field === selectedField && (field | fieldType: metadata.data) !== FieldType.BOOLEAN\"\n             class=\"filter-body\"\n             [ngSwitch]=\"field | fieldType: metadata.data\"\n        >\n          <biit-bar-range *ngSwitchCase=\"FieldType.NUMBER\"\n                          [field]=\"field\"\n                          [items]=\"metadata.data\"\n                          [range]=\"filter.get(field)\"\n                          (rangeChange)=\"onRangeChanged(field, $event)\"/>\n          <biit-date-filter-selector *ngSwitchCase=\"FieldType.DATE\"\n                          [field]=\"field\"\n                          [items]=\"metadata.data\"\n                          [range]=\"filter.get(field)\"\n                          (rangeChange)=\"onDateRangeChanged(field, $event)\"/>\n          <biit-text-filter *ngSwitchCase=\"FieldType.STRING\"\n                            [filter]=\"filter.get(field)\"\n                            (filterChange)=\"onFilterChanged(field, $event)\"/>\n          <div *ngSwitchDefault>Unknown</div>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [".filter-view{font-size:1em;transition:.3s;height:100%;width:100%;display:block}.filter-container{height:100%;display:flex;flex-direction:column;background-color:#fff}.filter-sections{overflow-y:auto;height:100%;padding:0 1em}.filter-clear{margin:1em;min-height:2.25em;align-self:end;&>div:first-child{display:inline-flex;align-items:center}}.filter-search{margin:0 1em}.filter-title{display:flex;flex-direction:row;&>div:first-child{flex-grow:1;display:flex;flex-direction:row;gap:1em}}.filter-remove{align-content:center;&>biit-icon{display:block;width:1em;height:1em}}.filter-body{margin:.5em 0}.filter-section{cursor:pointer;-webkit-user-select:none;user-select:none;&>div:first-child{min-height:2.25em;align-items:center;font-size:1em}border-bottom:1px solid #262626}biit-date-filter-selector{font-size:1em}::ng-deep .filter-search>biit-input-text>.biit-input{min-width:unset!important}.align-content-center{align-content:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: FieldTypePipe }]; }, propDecorators: { _metadata: [{
+                type: Input,
+                args: ['metadata']
+            }], filterChange: [{
+                type: Output
+            }] } });
+
+class AutoFormatPipe {
+    transform(value) {
+        if (value instanceof Date) {
+            return new Intl.DateTimeFormat(navigator.language, { dateStyle: "short", timeStyle: "short" }).format(value);
+        }
+        return value;
+    }
+}
+AutoFormatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutoFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+AutoFormatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AutoFormatPipe, name: "autoFormat" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutoFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'autoFormat'
+                }]
+        }] });
+
+class RemoveFromArrayPipe {
+    transform(value, remove) {
+        return value.filter(v => !remove.includes(v));
+    }
+}
+RemoveFromArrayPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveFromArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+RemoveFromArrayPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RemoveFromArrayPipe, name: "removeFromArray" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveFromArrayPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'removeFromArray'
+                }]
+        }] });
+
+class PrintfPipe {
+    transform(value) {
+        if (typeof value === 'function') {
+            return value();
+        }
+        return value;
+    }
+}
+PrintfPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrintfPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PrintfPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PrintfPipe, name: "printf" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrintfPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'printf'
+                }]
+        }] });
+
+class MetadataViewerComponent {
+    constructor() {
+        this.onClose = new EventEmitter();
+    }
+    set data(data) {
+        this._data = data;
+    }
+    close() {
+        this.onClose.emit();
+    }
+}
+MetadataViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetadataViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MetadataViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetadataViewerComponent, selector: "biit-metadata-viewer", inputs: { data: "data", fields: "fields", titleField: "titleField" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div class=\"metadata-view\" id=\"metaviewer-data\">\n  <div class=\"metadata-header\" id=\"metaviewer-header\" [class.justify-center]=\"!titleField\">\n    <div class=\"data-icon\">\n      <biit-meta-element id=\"metaviewer-element\"\n        [styles]=\"_data.styles\"\n        [classes]=\"_data.classes\"\n        [icon]=\"_data.icon\"\n      >\n        <div *ngIf=\"_data.custom\" [innerHTML]=\"_data.custom.innerHTML\"></div>\n      </biit-meta-element>\n    </div>\n    <div *ngIf=\"titleField\" class=\"data-title\" id=\"title\" [tooltip]=\"_data.data[titleField] | printf\">\n      {{_data.data[titleField] | printf}}\n    </div>\n    <div>\n      <button biit-icon id=\"close-button\"\n              [icon]=\"'cross_wide'\"\n              (click)=\"close()\"\n      ></button>\n    </div>\n  </div>\n  <div class=\"metadata-info\" id=\"metaviewer-info\">\n    <div *ngFor=\"let field of (fields | removeFromArray: [titleField]) \" class=\"field\">\n      <div class=\"metadata-info-row\" id=\"metaviewer-info-row\">\n        <div class=\"field-value\" id=\"field\">\n          <biit-input-text\n            [placeholder]=\"field\"\n            [ngModel]=\"_data.data[field] | autoFormat\"\n            [readonly]=\"true\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".metadata-view{font-size:1em;transition:.3s;display:flex;height:100%;flex-direction:column;background-color:#fff}.metadata-header{margin:1em 1em 0;display:flex;align-items:center;&.justify-center>.data-icon{width:2em;height:2em}&:not(.justify-center)>.data-icon{width:1em;height:1em}:last-child {flex-grow: 1; direction: rtl;}}.data-icon{min-width:1em;min-height:1em}.data-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-content:center;margin-left:1em}.justify-center{justify-content:center}.metadata-info{overflow-y:auto;height:100%;margin:1em}.field{padding-top:1.5em}.metadata-info-row{font-size:.8em;display:flex;flex-direction:column;gap:.5em;padding:.1em .2em;:not(:first-child) {padding-left: .5em;}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaElementComponent, selector: "biit-meta-element", inputs: ["icon", "styles", "classes"] }, { kind: "directive", type: i3.BiitTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "ignorePadding"] }, { kind: "component", type: i2$2.BiitInputTextComponent, selector: "biit-input-text", inputs: ["placeholder", "error", "description", "info", "type", "icon", "fieldName", "disabled", "required", "readonly", "min", "max", "minLength", "maxLength", "regEx"], outputs: ["onActionPerformed"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "pipe", type: AutoFormatPipe, name: "autoFormat" }, { kind: "pipe", type: RemoveFromArrayPipe, name: "removeFromArray" }, { kind: "pipe", type: PrintfPipe, name: "printf" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetadataViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-metadata-viewer', template: "<div class=\"metadata-view\" id=\"metaviewer-data\">\n  <div class=\"metadata-header\" id=\"metaviewer-header\" [class.justify-center]=\"!titleField\">\n    <div class=\"data-icon\">\n      <biit-meta-element id=\"metaviewer-element\"\n        [styles]=\"_data.styles\"\n        [classes]=\"_data.classes\"\n        [icon]=\"_data.icon\"\n      >\n        <div *ngIf=\"_data.custom\" [innerHTML]=\"_data.custom.innerHTML\"></div>\n      </biit-meta-element>\n    </div>\n    <div *ngIf=\"titleField\" class=\"data-title\" id=\"title\" [tooltip]=\"_data.data[titleField] | printf\">\n      {{_data.data[titleField] | printf}}\n    </div>\n    <div>\n      <button biit-icon id=\"close-button\"\n              [icon]=\"'cross_wide'\"\n              (click)=\"close()\"\n      ></button>\n    </div>\n  </div>\n  <div class=\"metadata-info\" id=\"metaviewer-info\">\n    <div *ngFor=\"let field of (fields | removeFromArray: [titleField]) \" class=\"field\">\n      <div class=\"metadata-info-row\" id=\"metaviewer-info-row\">\n        <div class=\"field-value\" id=\"field\">\n          <biit-input-text\n            [placeholder]=\"field\"\n            [ngModel]=\"_data.data[field] | autoFormat\"\n            [readonly]=\"true\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".metadata-view{font-size:1em;transition:.3s;display:flex;height:100%;flex-direction:column;background-color:#fff}.metadata-header{margin:1em 1em 0;display:flex;align-items:center;&.justify-center>.data-icon{width:2em;height:2em}&:not(.justify-center)>.data-icon{width:1em;height:1em}:last-child {flex-grow: 1; direction: rtl;}}.data-icon{min-width:1em;min-height:1em}.data-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-content:center;margin-left:1em}.justify-center{justify-content:center}.metadata-info{overflow-y:auto;height:100%;margin:1em}.field{padding-top:1.5em}.metadata-info-row{font-size:.8em;display:flex;flex-direction:column;gap:.5em;padding:.1em .2em;:not(:first-child) {padding-left: .5em;}}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], titleField: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }] } });
+
+class TimelineViewerChartData {
+    constructor(x, y, tooltipHeader, tooltipInfo, color, meta) {
+        this.tooltipInfo = [];
+        this.x = x.getTime();
+        this.y = y;
+        this.tooltipHeader = tooltipHeader;
+        this.tooltipInfo = tooltipInfo;
+        if (color)
+            this.color = color;
+        if (meta)
+            this.meta = meta;
+    }
+    static generate(data, options) {
+        const chartData = [];
+        data.forEach(value => {
+            const datetime = new Date(value[options.date]).setHours(0, 0, 0, 0);
+            const count = chartData.filter(d => d.x == datetime).length;
+            chartData.push(new TimelineViewerChartData(new Date(datetime), count + 1, value[options.tooltipHeader], options.tooltipInfo, options.color ? value[options.color] : undefined, value));
+        });
+        return chartData;
+    }
+}
+
+class TimelineViewerChartComponent {
+    constructor(datePipe) {
+        this.datePipe = datePipe;
+        this.data = [];
+        this.onItemClick = new EventEmitter();
+        this.pageNumber = 1;
+    }
+    ngOnInit() {
+        if (!this.data?.length || !this.options) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    ngOnChanges() {
+        if (!this.data?.length || !this.options) {
+            return;
+        }
+        this.createChartOptions();
+    }
+    createChartOptions() {
+        const series = TimelineViewerChartData.generate(this.data, this.options);
+        const timeValues = series.sort((a, b) => a.x - b.x);
+        const max = timeValues[timeValues.length - 1].x;
+        const min = subMonths(timeValues[timeValues.length - 1].x, 1).getTime();
+        this.areaChartOptions = {
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                opacity: 1,
+                type: "solid"
+            },
+            xaxis: {
+                type: "datetime",
+                labels: {
+                    style: {
+                        fontSize: '16px',
+                        fontFamily: 'Montserrat',
+                        colors: ["262626"]
+                    }
+                },
+            },
+            stroke: {
+                width: 0,
+                curve: "smooth"
+            },
+            series: [
+                {
+                    name: 'series',
+                    data: series ?? []
+                }
+            ],
+            chart: {
+                id: "chartyear",
+                type: "bar",
+                height: 160,
+                background: "white",
+                stacked: true,
+                toolbar: {
+                    autoSelected: "selection"
+                },
+                brush: {
+                    enabled: true,
+                    target: "scatterchart"
+                },
+                selection: {
+                    enabled: true,
+                    xaxis: {
+                        min: min,
+                        max: max
+                    }
+                }
+            },
+            colors: ["#F20D5E"],
+            yaxis: {
+                show: false,
+                tickAmount: 3
+            }
+        };
+        this.scatterChartOptions = {
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                opacity: 1,
+                type: "solid"
+            },
+            xaxis: {
+                type: "datetime",
+                labels: {
+                    style: {
+                        fontSize: '16px',
+                        fontFamily: 'Montserrat',
+                        colors: ["262626"]
+                    }
+                },
+                tooltip: {
+                    enabled: false
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        fontSize: '16px',
+                        fontFamily: 'Montserrat',
+                        colors: ["262626"]
+                    },
+                    offsetX: -6
+                },
+            },
+            series: [
+                {
+                    name: 'series',
+                    data: series ?? []
+                }
+            ],
+            chart: {
+                id: 'scatterchart',
+                height: '100%',
+                type: "scatter",
+                background: "white",
+                toolbar: {
+                    show: false,
+                    autoSelected: "pan"
+                },
+                events: {
+                    dataPointSelection: (e, chart, options) => {
+                        this.onItemClick.emit(options.w.globals.initialSeries[options.seriesIndex].data[options.dataPointIndex]);
+                    }
+                }
+            },
+            colors: ["#7BD39A"],
+            legend: {
+                position: "top",
+                horizontalAlign: "center"
+            },
+            markers: {
+                width: 5,
+                shape: "square",
+                strokeWidth: 5,
+                strokeColors: "#000000",
+                strokeOpacity: 1,
+                colors: ["#FFFFFF"],
+                discrete: series.map((value, dataPointIndex) => ({
+                    seriesIndex: 0,
+                    dataPointIndex: dataPointIndex,
+                    fillColor: '#fff',
+                    strokeColor: value.color ?? '#262626',
+                    size: 7
+                }))
+            },
+            tooltip: {
+                custom: ({ series, seriesIndex, dataPointIndex, w }) => {
+                    const data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
+                    let tooltip = `<div class="tooltip-base">` +
+                        `  <div class="tooltip-header">${data.tooltipHeader}</div>` +
+                        `  <div class="tooltip-content">`;
+                    this.options.tooltipInfo.forEach(info => {
+                        if (data.meta[info.value]) {
+                            tooltip +=
+                                `    <div class="tooltip-data">` +
+                                    `      <a>${info.title}: </a>` +
+                                    `      <a style="font-weight: 500">${data.meta[info.value]}</a>` +
+                                    `    </div>`;
+                        }
+                    });
+                    tooltip +=
+                        `    <div class="tooltip-data">` +
+                            `      <a style="font-weight: 500">${this.datePipe.transform(w.globals.seriesX[seriesIndex][dataPointIndex], 'dd/MM/yyyy')}</a>` +
+                            `    </div>`;
+                    tooltip +=
+                        '  </div>' +
+                            '</div>';
+                    return tooltip;
+                }
+            },
+        };
+    }
+    async getPngBlob() {
+        const base64 = await this.apexChart.dataURI();
+        const decode = await fetch(base64.imgURI);
+        return decode.blob();
+    }
+}
+TimelineViewerChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineViewerChartComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
+TimelineViewerChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineViewerChartComponent, selector: "biit-timeline-viewer-chart", inputs: { data: "data", options: "options" }, outputs: { onItemClick: "onItemClick" }, viewQueries: [{ propertyName: "apexChart", first: true, predicate: ["apexChart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"bar-chart\"\n>\n  <apx-chart *ngIf=\"scatterChartOptions\"\n             [dataLabels]=\"scatterChartOptions.dataLabels\"\n             [fill]=\"scatterChartOptions.fill\"\n             [xaxis]=\"scatterChartOptions.xaxis\"\n             [yaxis]=\"scatterChartOptions.yaxis\"\n             [stroke]=\"scatterChartOptions.stroke\"\n             [series]=\"scatterChartOptions.series\"\n             [chart]=\"scatterChartOptions.chart\"\n             [colors]=\"scatterChartOptions.colors\"\n             [legend]=\"scatterChartOptions.legend\"\n             [markers]=\"scatterChartOptions.markers\"\n             [tooltip]=\"scatterChartOptions.tooltip\"\n             style=\"display: block; width: 100%; height: 100%\"\n             #apexChart\n  ></apx-chart>\n  <apx-chart *ngIf=\"areaChartOptions\"\n             [dataLabels]=\"areaChartOptions.dataLabels\"\n             [fill]=\"areaChartOptions.fill\"\n             [xaxis]=\"areaChartOptions.xaxis\"\n             [stroke]=\"areaChartOptions.stroke\"\n             [series]=\"areaChartOptions.series\"\n             [chart]=\"areaChartOptions.chart\"\n             [colors]=\"areaChartOptions.colors\"\n             [yaxis]=\"areaChartOptions.yaxis\"\n             style=\"display: block; width: 100%\"\n  ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:flex;flex-direction:column;height:100%;width:100%;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:#262626;color:#fff;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid #262626}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineViewerChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-timeline-viewer-chart', template: "<div id=\"bar-chart\"\n>\n  <apx-chart *ngIf=\"scatterChartOptions\"\n             [dataLabels]=\"scatterChartOptions.dataLabels\"\n             [fill]=\"scatterChartOptions.fill\"\n             [xaxis]=\"scatterChartOptions.xaxis\"\n             [yaxis]=\"scatterChartOptions.yaxis\"\n             [stroke]=\"scatterChartOptions.stroke\"\n             [series]=\"scatterChartOptions.series\"\n             [chart]=\"scatterChartOptions.chart\"\n             [colors]=\"scatterChartOptions.colors\"\n             [legend]=\"scatterChartOptions.legend\"\n             [markers]=\"scatterChartOptions.markers\"\n             [tooltip]=\"scatterChartOptions.tooltip\"\n             style=\"display: block; width: 100%; height: 100%\"\n             #apexChart\n  ></apx-chart>\n  <apx-chart *ngIf=\"areaChartOptions\"\n             [dataLabels]=\"areaChartOptions.dataLabels\"\n             [fill]=\"areaChartOptions.fill\"\n             [xaxis]=\"areaChartOptions.xaxis\"\n             [stroke]=\"areaChartOptions.stroke\"\n             [series]=\"areaChartOptions.series\"\n             [chart]=\"areaChartOptions.chart\"\n             [colors]=\"areaChartOptions.colors\"\n             [yaxis]=\"areaChartOptions.yaxis\"\n             style=\"display: block; width: 100%\"\n  ></apx-chart>\n</div>\n", styles: ["#bar-chart{display:flex;flex-direction:column;height:100%;width:100%;transition:1s ease-in-out}#bar-chart ::ng-deep .apexcharts-tooltip{border:1px solid #262626;border-radius:0;box-shadow:none;font-family:Montserrat;font-size:.7rem;background:white}#bar-chart ::ng-deep .apexcharts-tooltip *{box-sizing:border-box}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-header{background:#262626;color:#fff;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content{display:flex;flex-direction:column;row-gap:.2rem;padding:.45rem .7rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data{display:flex;align-items:center}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-square{height:.5rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-tooltip .tooltip-content .tooltip-data .tooltip-line{height:.1rem;width:.5rem;margin-right:.45rem}#bar-chart ::ng-deep .apexcharts-series path:hover{box-sizing:border-box;border:.15rem solid #262626}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { apexChart: [{
+                type: ViewChild,
+                args: ['apexChart']
+            }], data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], onItemClick: [{
+                type: Output
+            }] } });
+
+class ExtractDataPipe {
+    transform(metaViewData) {
+        return metaViewData.map((element) => element.data) || [];
+    }
+}
+ExtractDataPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExtractDataPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ExtractDataPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ExtractDataPipe, name: "extractData" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExtractDataPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'extractData'
+                }]
+        }] });
+
+class MetaViewChartComponent {
+    set _data(data) {
+        this.data = data;
+        if (data) {
+            this.data.data.forEach(element => {
+                {
+                    element.data['_id'] = v4();
+                    element.data['_color'] = element.statusColor;
+                }
+            });
+            this.cdRef.detectChanges();
+            this.timelineOptions = {
+                date: data.timelineDateField,
+                color: '_color',
+                tooltipHeader: data.titleField,
+                tooltipInfo: []
+            };
+            this.elements = this.data.data;
+            this.onFilter(null);
+        }
+    }
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.view = View.GRID;
+        this.selected = new EventEmitter();
+        this.unselected = new EventEmitter();
+        this.View = View;
+        this.fields = ['name', 'date', 'v1', 'v2', 'v3', 'b1'];
+        this.elements = [];
+    }
+    onElementClick(element) {
+        this.selectedElement = element;
+        this.selected.emit(element);
+    }
+    unselectElement() {
+        this.selectedElement = undefined;
+        this.unselected.emit();
+        this.cdRef.detectChanges();
+    }
+    onTimeLineElementClick(element) {
+        this.selectedElement = this.data.data.find(e => e.data['_id'] === element.meta['_id']);
+        this.selected.emit(this.selectedElement);
+        this.cdRef.detectChanges();
+    }
+    onFilter(filters) {
+        if (this.delayedFilter != null) {
+            clearTimeout(this.delayedFilter);
+        }
+        /* This avoids to load all data if it comes from an update */
+        if (filters) {
+            this.latestFilter = filters;
+            this.delayedFilter = setTimeout(() => {
+                this.filter(filters);
+                this.delayedFilter = null;
+            }, MetaViewChartComponent.FILTER_DELAY);
+        }
+        else {
+            this.filter(this.latestFilter);
+        }
+    }
+    filter(filters) {
+        if (!filters || filters.size === 0) {
+            this.elements = this.data.data;
+            return;
+        }
+        this.elements = this.data.data.filter((element) => {
+            return !Array.from(filters.entries()).map(filter => this.resolveFilter(filter[1], element.data[filter[0]])).some(result => !result);
+        });
+    }
+    resolveFilter(restriction, value) {
+        if (Array.isArray(restriction) && !restriction.some(Array.isArray) && restriction.length === 2) {
+            return value >= restriction[0] && value <= restriction[1];
+        }
+        if (Array.isArray(restriction) && restriction.every(Array.isArray)) {
+            if (value instanceof Date) {
+                return restriction.some(range => range[0].getTime() <= value.getTime() && value.getTime() <= range[1].getTime());
+            }
+        }
+        const regex = new RegExp(restriction, 'i');
+        return regex.test(value);
+    }
+}
+MetaViewChartComponent.FILTER_DELAY = 500;
+MetaViewChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaViewChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MetaViewChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetaViewChartComponent, selector: "biit-meta-view-chart", inputs: { _data: ["data", "_data"], view: "view" }, outputs: { selected: "selected", unselected: "unselected" }, providers: [{
+            provide: TRANSLOCO_SCOPE,
+            useValue: { scope: 'wizardry-theme/chart', alias: "charts" }
+        }], ngImport: i0, template: "<div class=\"meta-view-chart-board\" id=\"metaviewer-chart\" *transloco=\"let t\">\n  <div class=\"meta-view-column\">\n    <biit-meta-filter [metadata]=\"data\" (filterChange)=\"onFilter($event)\"/>\n  </div>\n  <biit-meta-board id=\"metaviewer-board\" *ngIf=\"view === View.GRID\"\n    [data]=\"elements\"\n    [selected]=\"selectedElement\"\n    (elementClick)=\"onElementClick($event)\"\n  />\n  <biit-timeline-viewer-chart id=\"metaviewer-timeline\" *ngIf=\"view === View.TIMELINE && timelineOptions && timelineOptions.date\"\n    [data]=\"elements | extractData\"\n    [options]=\"timelineOptions\"\n    (onItemClick)=\"onTimeLineElementClick($event)\"\n    style=\"overflow: hidden\"\n  />\n  <div class=\"error-view\" id=\"metaviewer-error\" *ngIf=\"view === View.TIMELINE && !timelineOptions?.date\">\n    <div>\n      <biit-icon name=\"exclamation\" style=\"display:block; width: 1rem;\" />\n    </div>\n    <div>{{ t('charts.configuration-not-meets-requirements') }}</div>\n  </div>\n  <div class=\"meta-view-column rtl\" id=\"metadata-viewer\" *ngIf=\"selectedElement\" @fadeInOut>\n    <biit-metadata-viewer class=\"ltr\"\n      [data]=\"selectedElement\"\n      [fields]=\"data.fields\"\n      [titleField]=\"data.titleField\"\n      (onClose)=\"unselectElement()\"/>\n  </div>\n</div>\n", styles: ["biit-meta-board{display:block;width:100%;height:100%}.meta-view-chart-board{display:flex;flex-direction:row;gap:1em;height:100%;transition:transform .3s ease-in-out;&>:not(:nth-child(2)){flex:0 1 auto}&>:nth-child(2){flex:1}}.meta-view-column{min-width:14em;max-width:23em;width:18em;flex:0 1 auto;resize:horizontal;overflow:auto;border:3px solid #262626}.rtl{direction:rtl}.ltr{direction:ltr}.padding-1{padding:.1em}.error-view{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MetaBoardComponent, selector: "biit-meta-board", inputs: ["data", "selected"], outputs: ["elementClick"] }, { kind: "component", type: MetaFilterComponent, selector: "biit-meta-filter", inputs: ["metadata"], outputs: ["filterChange"] }, { kind: "component", type: MetadataViewerComponent, selector: "biit-metadata-viewer", inputs: ["data", "fields", "titleField"], outputs: ["onClose"] }, { kind: "component", type: TimelineViewerChartComponent, selector: "biit-timeline-viewer-chart", inputs: ["data", "options"], outputs: ["onItemClick"] }, { kind: "component", type: i1$1.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "directive", type: i7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "pipe", type: ExtractDataPipe, name: "extractData" }], animations: [
+        trigger('fadeInOut', [
+            transition(':enter', [
+                style({ opacity: 0 }),
+                animate('300ms ease-in', style({ opacity: 1 }))
+            ]),
+            transition(':leave', [
+                style({ opacity: 1 }),
+                animate('300ms ease-out', style({ opacity: 0 }))
+            ])
+        ])
+    ], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaViewChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-meta-view-chart', encapsulation: ViewEncapsulation.None, providers: [{
+                            provide: TRANSLOCO_SCOPE,
+                            useValue: { scope: 'wizardry-theme/chart', alias: "charts" }
+                        }], animations: [
+                        trigger('fadeInOut', [
+                            transition(':enter', [
+                                style({ opacity: 0 }),
+                                animate('300ms ease-in', style({ opacity: 1 }))
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1 }),
+                                animate('300ms ease-out', style({ opacity: 0 }))
+                            ])
+                        ])
+                    ], template: "<div class=\"meta-view-chart-board\" id=\"metaviewer-chart\" *transloco=\"let t\">\n  <div class=\"meta-view-column\">\n    <biit-meta-filter [metadata]=\"data\" (filterChange)=\"onFilter($event)\"/>\n  </div>\n  <biit-meta-board id=\"metaviewer-board\" *ngIf=\"view === View.GRID\"\n    [data]=\"elements\"\n    [selected]=\"selectedElement\"\n    (elementClick)=\"onElementClick($event)\"\n  />\n  <biit-timeline-viewer-chart id=\"metaviewer-timeline\" *ngIf=\"view === View.TIMELINE && timelineOptions && timelineOptions.date\"\n    [data]=\"elements | extractData\"\n    [options]=\"timelineOptions\"\n    (onItemClick)=\"onTimeLineElementClick($event)\"\n    style=\"overflow: hidden\"\n  />\n  <div class=\"error-view\" id=\"metaviewer-error\" *ngIf=\"view === View.TIMELINE && !timelineOptions?.date\">\n    <div>\n      <biit-icon name=\"exclamation\" style=\"display:block; width: 1rem;\" />\n    </div>\n    <div>{{ t('charts.configuration-not-meets-requirements') }}</div>\n  </div>\n  <div class=\"meta-view-column rtl\" id=\"metadata-viewer\" *ngIf=\"selectedElement\" @fadeInOut>\n    <biit-metadata-viewer class=\"ltr\"\n      [data]=\"selectedElement\"\n      [fields]=\"data.fields\"\n      [titleField]=\"data.titleField\"\n      (onClose)=\"unselectElement()\"/>\n  </div>\n</div>\n", styles: ["biit-meta-board{display:block;width:100%;height:100%}.meta-view-chart-board{display:flex;flex-direction:row;gap:1em;height:100%;transition:transform .3s ease-in-out;&>:not(:nth-child(2)){flex:0 1 auto}&>:nth-child(2){flex:1}}.meta-view-column{min-width:14em;max-width:23em;width:18em;flex:0 1 auto;resize:horizontal;overflow:auto;border:3px solid #262626}.rtl{direction:rtl}.ltr{direction:ltr}.padding-1{padding:.1em}.error-view{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _data: [{
+                type: Input,
+                args: ['data']
+            }], view: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }], unselected: [{
+                type: Output
+            }] } });
+
+class PipesModule {
+}
+PipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PipesModule, declarations: [SafeHtmlPipe,
+        FilterByPipe,
+        FieldTypePipe,
+        MetaElementToBarChartPipe,
+        MetaElementMaxValuePipe,
+        MetaElementMinValuePipe,
+        StepValueExtractorPipe,
+        HasPipe,
+        MonthNamePipe,
+        AutoFormatPipe,
+        RemoveFromArrayPipe,
+        ExtractDataPipe,
+        PrintfPipe], imports: [CommonModule], exports: [SafeHtmlPipe,
+        FilterByPipe,
+        FieldTypePipe,
+        MetaElementToBarChartPipe,
+        MetaElementMinValuePipe,
+        MetaElementMaxValuePipe,
+        StepValueExtractorPipe,
+        HasPipe,
+        MonthNamePipe,
+        AutoFormatPipe,
+        RemoveFromArrayPipe,
+        ExtractDataPipe,
+        PrintfPipe] });
+PipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PipesModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SafeHtmlPipe,
+                        FilterByPipe,
+                        FieldTypePipe,
+                        MetaElementToBarChartPipe,
+                        MetaElementMaxValuePipe,
+                        MetaElementMinValuePipe,
+                        StepValueExtractorPipe,
+                        HasPipe,
+                        MonthNamePipe,
+                        AutoFormatPipe,
+                        RemoveFromArrayPipe,
+                        ExtractDataPipe,
+                        PrintfPipe
+                    ],
+                    exports: [
+                        SafeHtmlPipe,
+                        FilterByPipe,
+                        FieldTypePipe,
+                        MetaElementToBarChartPipe,
+                        MetaElementMinValuePipe,
+                        MetaElementMaxValuePipe,
+                        StepValueExtractorPipe,
+                        HasPipe,
+                        MonthNamePipe,
+                        AutoFormatPipe,
+                        RemoveFromArrayPipe,
+                        ExtractDataPipe,
+                        PrintfPipe
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class MetaElementModule {
+}
+MetaElementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaElementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MetaElementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MetaElementModule, declarations: [MetaElementComponent], imports: [CommonModule,
+        PipesModule], exports: [MetaElementComponent] });
+MetaElementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaElementModule, imports: [CommonModule,
+        PipesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaElementModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MetaElementComponent,
+                    ],
+                    exports: [
+                        MetaElementComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PipesModule
+                    ]
+                }]
+        }] });
+
+class MetaBoardModule {
+}
+MetaBoardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaBoardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MetaBoardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MetaBoardModule, declarations: [MetaBoardComponent], imports: [CommonModule,
+        MetaElementModule], exports: [MetaBoardComponent] });
+MetaBoardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaBoardModule, imports: [CommonModule,
+        MetaElementModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaBoardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MetaBoardComponent
+                    ],
+                    exports: [
+                        MetaBoardComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MetaElementModule
+                    ]
+                }]
+        }] });
+
+class BarRangeModule {
+}
+BarRangeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BarRangeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BarRangeModule, declarations: [BarRangeComponent], imports: [CommonModule,
+        BarChartModule,
+        PipesModule,
+        BiitSliderModule,
+        FormsModule,
+        BiitSliderRangeModule], exports: [BarRangeComponent] });
+BarRangeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarRangeModule, imports: [CommonModule,
+        BarChartModule,
+        PipesModule,
+        BiitSliderModule,
+        FormsModule,
+        BiitSliderRangeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarRangeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BarRangeComponent
+                    ],
+                    exports: [
+                        BarRangeComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BarChartModule,
+                        PipesModule,
+                        BiitSliderModule,
+                        FormsModule,
+                        BiitSliderRangeModule
+                    ]
+                }]
+        }] });
+
+class DateFilterSelectorModule {
+}
+DateFilterSelectorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateFilterSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateFilterSelectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DateFilterSelectorModule, declarations: [DateFilterSelectorComponent], imports: [CommonModule,
+        BiitCheckboxModule,
+        BiitIconModule,
+        PipesModule,
+        FormsModule], exports: [DateFilterSelectorComponent] });
+DateFilterSelectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateFilterSelectorModule, imports: [CommonModule,
+        BiitCheckboxModule,
+        BiitIconModule,
+        PipesModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateFilterSelectorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DateFilterSelectorComponent
+                    ],
+                    exports: [
+                        DateFilterSelectorComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BiitCheckboxModule,
+                        BiitIconModule,
+                        PipesModule,
+                        FormsModule
+                    ]
+                }]
+        }] });
+
+class TextFilterModule {
+}
+TextFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TextFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TextFilterModule, declarations: [TextFilterComponent], imports: [CommonModule,
+        BiitInputTextModule,
+        FormsModule], exports: [TextFilterComponent] });
+TextFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextFilterModule, imports: [CommonModule,
+        BiitInputTextModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TextFilterComponent
+                    ],
+                    exports: [
+                        TextFilterComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BiitInputTextModule,
+                        FormsModule
+                    ]
+                }]
+        }] });
+
+class BooleanFilterModule {
+}
+BooleanFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BooleanFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BooleanFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BooleanFilterModule, declarations: [BooleanFilterComponent], imports: [CommonModule,
+        BiitToggleModule,
+        FormsModule,
+        BiitTernaryToggleModule], exports: [BooleanFilterComponent] });
+BooleanFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BooleanFilterModule, imports: [CommonModule,
+        BiitToggleModule,
+        FormsModule,
+        BiitTernaryToggleModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BooleanFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BooleanFilterComponent
+                    ],
+                    exports: [
+                        BooleanFilterComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BiitToggleModule,
+                        FormsModule,
+                        BiitTernaryToggleModule
+                    ]
+                }]
+        }] });
+
+class MetaFilterModule {
+}
+MetaFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MetaFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MetaFilterModule, declarations: [MetaFilterComponent], imports: [CommonModule,
+        BiitInputTextModule,
+        FormsModule,
+        PipesModule,
+        BarRangeModule,
+        BiitIconModule,
+        DateFilterSelectorModule,
+        TextFilterModule,
+        BooleanFilterModule,
+        BiitIconButtonModule], exports: [MetaFilterComponent] });
+MetaFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaFilterModule, imports: [CommonModule,
+        BiitInputTextModule,
+        FormsModule,
+        PipesModule,
+        BarRangeModule,
+        BiitIconModule,
+        DateFilterSelectorModule,
+        TextFilterModule,
+        BooleanFilterModule,
+        BiitIconButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MetaFilterComponent
+                    ],
+                    exports: [
+                        MetaFilterComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BiitInputTextModule,
+                        FormsModule,
+                        PipesModule,
+                        BarRangeModule,
+                        BiitIconModule,
+                        DateFilterSelectorModule,
+                        TextFilterModule,
+                        BooleanFilterModule,
+                        BiitIconButtonModule,
+                    ]
+                }]
+        }] });
+
+class MetadataViewerModule {
+}
+MetadataViewerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetadataViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MetadataViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MetadataViewerModule, declarations: [MetadataViewerComponent], imports: [CommonModule,
+        MetaElementModule,
+        BiitTooltipModule,
+        PipesModule,
+        BiitInputTextModule,
+        FormsModule,
+        BiitIconButtonModule], exports: [MetadataViewerComponent] });
+MetadataViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetadataViewerModule, imports: [CommonModule,
+        MetaElementModule,
+        BiitTooltipModule,
+        PipesModule,
+        BiitInputTextModule,
+        FormsModule,
+        BiitIconButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetadataViewerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MetadataViewerComponent
+                    ],
+                    exports: [
+                        MetadataViewerComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MetaElementModule,
+                        BiitTooltipModule,
+                        PipesModule,
+                        BiitInputTextModule,
+                        FormsModule,
+                        BiitIconButtonModule
+                    ]
+                }]
+        }] });
+
+class TimelineViewerChartModule {
+}
+TimelineViewerChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineViewerChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TimelineViewerChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TimelineViewerChartModule, declarations: [TimelineViewerChartComponent], imports: [CommonModule,
+        NgApexchartsModule], exports: [TimelineViewerChartComponent] });
+TimelineViewerChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineViewerChartModule, providers: [DatePipe], imports: [CommonModule,
+        NgApexchartsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineViewerChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TimelineViewerChartComponent],
+                    exports: [TimelineViewerChartComponent],
+                    imports: [
+                        CommonModule,
+                        NgApexchartsModule
+                    ],
+                    providers: [DatePipe]
+                }]
+        }] });
+
+class MetaViewChartModule {
+}
+MetaViewChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaViewChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MetaViewChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MetaViewChartModule, declarations: [MetaViewChartComponent], imports: [CommonModule,
+        MetaElementModule,
+        MetaBoardModule,
+        MetaFilterModule,
+        MetadataViewerModule,
+        TimelineViewerChartModule,
+        PipesModule,
+        BiitIconModule,
+        TranslocoRootModule], exports: [MetaViewChartComponent] });
+MetaViewChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaViewChartModule, imports: [CommonModule,
+        MetaElementModule,
+        MetaBoardModule,
+        MetaFilterModule,
+        MetadataViewerModule,
+        TimelineViewerChartModule,
+        PipesModule,
+        BiitIconModule,
+        TranslocoRootModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetaViewChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MetaViewChartComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        MetaElementModule,
+                        MetaBoardModule,
+                        MetaFilterModule,
+                        MetadataViewerModule,
+                        TimelineViewerChartModule,
+                        PipesModule,
+                        BiitIconModule,
+                        TranslocoRootModule
+                    ],
+                    exports: [
+                        MetaViewChartComponent
+                    ]
+                }]
+        }] });
+
+class MetaViewData {
+    constructor(data = [], fields = [], titleField = undefined, preselection = [], timelineDateField = undefined) {
+        this.data = [];
+        this.fields = [];
+        this.preselection = [];
+        this.data = data;
+        this.fields = fields;
+        this.titleField = titleField;
+        this.preselection = preselection;
+        this.timelineDateField = timelineDateField;
+    }
+}
+
+class MetaViewPreselection {
+    constructor(key = undefined, value = undefined) {
+        this.key = key;
+        this.value = value;
+    }
+}
+
+class MetaViewElementData {
+    constructor(data, styles) {
+        this.data = data;
+        this.styles = styles;
+    }
+}
+
+class TimelineViewerChartOptions {
+    constructor() {
+        this.tooltipInfo = [];
+    }
+}
+
+/*
+ * Public API Surface of wizardry-theme/charts
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BarChartComponent, BarChartData, BarChartGoal, BarChartModule, BarChartOrientation, BarChartSeries, BarChartSeriesData, HeatmapChartComponent, HeatmapChartData, HeatmapChartDataElement, HeatmapChartModule, HeatmapChartRange, HeatmapMetric, LineChartComponent, LineChartData, LineChartModule, LineChartSeries, MetaViewChartComponent, MetaViewChartModule, MetaViewData, MetaViewElementData, MetaViewPreselection, PieChartComponent, PieChartData, PieChartModule, RadarChartComponent, RadarChartData, RadarChartModule, RadarChartSeries, RadialChartComponent, RadialChartData, RadialChartModule, TimelineViewerChartComponent, TimelineViewerChartModule, TimelineViewerChartOptions, View };
+//# sourceMappingURL=biit-solutions-wizardry-theme-charts.mjs.map