@rafaelaalmeidaa/primordash 0.0.1

package/fesm2020/rafaelaalmeidaa-primordash.mjs

@@ -0,0 +1,1349 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, ViewChild, HostListener, EventEmitter, Output, ViewChildren, NgModule } from '@angular/core';
+import * as i3$1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i1$2 from 'ngx-bootstrap/modal';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4$1 from '@angular/material/grid-list';
+import { MatGridListModule } from '@angular/material/grid-list';
+import * as i5 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1$1 from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
+import * as i1 from 'ng2-charts';
+import { BaseChartDirective, NgChartsModule } from 'ng2-charts';
+import * as i3 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i4 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+class PrimordashService {
+    constructor() { }
+}
+PrimordashService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrimordashService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PrimordashService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrimordashService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrimordashService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+const DASHBOARD_CHART_TYPES = [
+    'bar',
+    'stackedBar',
+    'verticalBar',
+    'verticalStackedBar',
+    'verticalProgressBar',
+    'progressBar',
+    'lineBar',
+    'lineBarStacked',
+    'line',
+    'radar',
+    'curveLine',
+    'pie',
+    'multiPie',
+    'doughnut',
+    'halfDoughnut',
+    'area',
+    'bubble',
+    'polarArea',
+    'simpleCard',
+    'table',
+    'html',
+];
+const DASHBOARD_BAR_LINE_TYPES = [
+    'bar', 'stackedBar', 'verticalBar', 'verticalStackedBar', 'progressBar', 'verticalProgressBar',
+    'lineBar', 'lineBarStacked', 'line', 'radar', 'curveLine'
+];
+const SUPPORTED_CHART_TYPES = [
+    'bar',
+    'line',
+    'radar'
+];
+const AXIS_ORIENTATION = [
+    'x',
+    'y',
+];
+const AXIS_DIMENSION = [
+    'x',
+    'y',
+    'r',
+];
+const MODAL_TYPES = [
+    'group',
+    'option'
+];
+
+function randomColor() {
+    const r = Math.floor(Math.random() * 255);
+    const g = Math.floor(Math.random() * 255);
+    const b = Math.floor(Math.random() * 255);
+    return `rgba(${r}, ${g}, ${b}, 0.6)`;
+}
+function getOpacityColors(listColors, index) {
+    const opacity = Math.max(0.1, 1 - index * 0.30);
+    return listColors.map(color => replaceAlpha(color, opacity));
+}
+function replaceAlpha(rgba, newAlpha) {
+    const match = rgba.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:[,\s]+([\d.]+))?\s*\)/);
+    if (!match)
+        return rgba;
+    const r = match[1];
+    const g = match[2];
+    const b = match[3];
+    return `rgba(${r}, ${g}, ${b}, ${newAlpha})`;
+}
+function getContrastColor(color) {
+    const rgb = getRGB(color);
+    if (!rgb)
+        return '#000';
+    const { r, g, b } = rgb;
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b);
+    return luminance > 186 ? '#000' : '#fff';
+}
+function getRGB(color) {
+    if (color.startsWith('#')) {
+        const hex = color.replace('#', '');
+        const bigint = parseInt(hex.length === 3
+            ? hex.split('').map(c => c + c).join('')
+            : hex, 16);
+        return {
+            r: (bigint >> 16) & 255,
+            g: (bigint >> 8) & 255,
+            b: bigint & 255
+        };
+    }
+    const match = color.match(/\d+/g);
+    if (match) {
+        return {
+            r: Number(match[0]),
+            g: Number(match[1]),
+            b: Number(match[2])
+        };
+    }
+    return null;
+}
+
+class BarLineComponent {
+    constructor() {
+        this.type = 'bar';
+        this.isDark = false;
+        this.card = {};
+        this.description = '';
+        this.loading = true;
+        this.canvasHeight = 0;
+        this.canvasWidth = 0;
+        this.config = {
+            type: 'bar',
+            data: {
+                labels: [],
+                datasets: []
+            },
+            options: {}
+        };
+        this.options = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'top',
+                    color: this.isDark ? '#FFF' : '#333'
+                },
+                datalabels: {
+                    display: false
+                }
+            }
+        };
+    }
+    ngOnInit() {
+        if (['stackedBar', 'verticalBar', 'verticalStackedBar', 'progressBar', 'verticalProgressBar'].includes(this.type)) {
+            this.config.type = 'bar';
+        }
+        else if (['line', 'curveLine', 'lineBar', 'lineBarStacked'].includes(this.type)) {
+            this.config.type = 'line';
+        }
+        else if (['radar'].includes(this.type)) {
+            this.config.type = 'radar';
+        }
+        this.options.indexAxis = ['verticalBar', 'verticalStackedBar', 'verticalProgressBar'].includes(this.type) ? 'y' : 'x';
+        if (['stackedBar', 'verticalStackedBar', 'lineBarStacked', 'progressBar', 'verticalProgressBar'].includes(this.type)) {
+            this.options.scales = { x: { stacked: true }, y: { stacked: true } };
+        }
+        if (['progressBar', 'verticalProgressBar'].includes(this.type) || this.card.showPorcent) {
+            this.options.plugins.tooltip = {
+                callbacks: {
+                    label: function (context) {
+                        return context.raw + '%';
+                    }
+                }
+            };
+        }
+        if (this.card.showLabel) {
+            this.options.plugins.datalabels = {
+                anchor: 'center',
+                align: 'center',
+                formatter: (value) => this.card.showPorcent ? value + '%' : value,
+                color: (context) => {
+                    if (this.card.fontColor)
+                        return this.card.fontColor;
+                    const bg = context.dataset.backgroundColor;
+                    return getContrastColor(bg);
+                },
+                font: {
+                    weight: 'bold'
+                }
+            };
+        }
+        this.config.options = this.options;
+        this.config.data.datasets = this.formatDataset();
+        this.description = this.describeBar(this.config);
+    }
+    ngAfterViewInit() {
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.chart) {
+                setTimeout(() => {
+                    this.triggerResize();
+                }, 0);
+            }
+        });
+        this.resizeObserver.observe(this.container.nativeElement);
+        setTimeout(() => {
+            this.chart?.chart?.resize();
+        }, 50);
+        this.loading = false;
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['isDark']) {
+            this.applyTheme();
+        }
+    }
+    applyTheme() {
+        if (this.chart) {
+            this.chart.update();
+        }
+    }
+    triggerResize() {
+        if (this.chart?.chart) {
+            this.chart.chart.resize();
+            this.chart.update();
+        }
+    }
+    formatDataset() {
+        if (!this.card?.data?.length)
+            return [];
+        if (!this.card.axisX?.key)
+            return [];
+        const labels = this.card.data.map(row => row[this.card.axisX?.key ?? '']);
+        this.config.data.labels = labels;
+        var sumData = [];
+        const datasets = this.card.keys?.map(item => {
+            const data = this.card.data?.map(row => {
+                const value = row[item.key];
+                return typeof value === 'string'
+                    ? Number(value)
+                    : value ?? 0;
+            }) ?? [];
+            if (['progressBar', 'verticalProgressBar'].includes(this.type)) {
+                sumData.push(...data);
+            }
+            if (!item.color) {
+                item.color = randomColor();
+            }
+            var result = {
+                label: item.label,
+                data,
+                backgroundColor: item.color,
+                borderColor: item.color,
+                fill: item.fill ?? false,
+            };
+            if (this.card.stacked && item.stackKey) {
+                result['stack'] = item.stackKey;
+            }
+            if (item.type) {
+                result['type'] = item.type;
+            }
+            if (this.type == 'curveLine') {
+                result = {
+                    ...result,
+                    tension: 0.4
+                };
+            }
+            return result;
+        }) ?? [];
+        if (['progressBar', 'verticalProgressBar'].includes(this.type)) {
+            const remaining = sumData.map(s => 100 - s);
+            datasets.push({
+                label: '',
+                data: remaining,
+                backgroundColor: '#e0e0e05e',
+                borderWidth: 0
+            });
+        }
+        return datasets;
+    }
+    describeBar(config) {
+        const { data } = config;
+        const labels = data?.labels || [];
+        const datasets = data?.datasets || [];
+        const axisLabel = this.card?.axisX?.label || 'categoria';
+        const barDatasets = datasets.filter((ds) => !ds.type || ds.type === 'bar');
+        const lineDatasets = datasets.filter((ds) => ds.type === 'line');
+        const seriesNames = barDatasets.map((ds) => ds.label || 'Série');
+        const lineNames = lineDatasets.map((ds) => ds.label || 'Linha');
+        let type = 'barras';
+        if (['curveLine', 'lineBar', 'lineBarStacked'].includes(this.type)) {
+            type = 'linhas';
+        }
+        let orientation = '';
+        if (['verticalBar', 'verticalStackedBar', 'verticalProgressBar'].includes(this.type)) {
+            orientation = 'vertical ';
+        }
+        let format = 'agrupadas';
+        if (['stackedBar', 'verticalStackedBar', 'lineBarStacked'].includes(this.type)) {
+            format = 'empilhadas';
+        }
+        let extra = '';
+        if (['progressBar', 'verticalProgressBar'].includes(this.type)) {
+            extra = ' demonstrando as porcentagens';
+        }
+        let description = this.card.title +
+            ` - Gráfico de ${type} ${orientation}${format} por ${axisLabel}${extra}, comparando ${seriesNames.join(' e ')}`;
+        if (lineDatasets.length) {
+            description += `, com linha representando ${lineNames.join(' e ')}`;
+        }
+        description += '. ';
+        labels.forEach((label, index) => {
+            const barValues = barDatasets.map((ds) => {
+                const value = ds.data?.[index] ?? 'sem valor';
+                return `${ds.label}: ${value}`;
+            });
+            let lineValueText = '';
+            if (lineDatasets.length) {
+                const lineValues = lineDatasets.map((ds) => {
+                    const value = ds.data?.[index] ?? 'sem valor';
+                    return `${ds.label}: ${value}`;
+                });
+                lineValueText = `. Linha: ${lineValues.join(', ')}`;
+            }
+            description += `\nEm ${label}: ${barValues.join(', ')}${lineValueText}.`;
+        });
+        return description.trim();
+    }
+    describeStackedBar(labels, datasets) {
+        return this.card.title + ` - Gráfico de barras empilhadas com ${datasets.length} séries: ` +
+            datasets.map(ds => ds.label).join(', ');
+    }
+    onresize() {
+        this.triggerResize();
+    }
+}
+BarLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BarLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BarLineComponent, selector: "lib-bar-line", inputs: { type: "type", isDark: "isDark", card: "card" }, host: { listeners: { "window:resize": "onresize()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<div class=\"chart-div\" #container>\r\n  <canvas\r\n    #chart\r\n    baseChart\r\n    class=\"chart chart-bar chart-item\"\r\n    [data]=\"config.data\"\r\n    [options]=\"config.options\"\r\n    [type]=\"config.type\"\r\n    [title]=\"description\"\r\n    >\r\n  </canvas>\r\n</div>", styles: [".chart-div{width:100%;height:100%}.chart-bar{max-height:100%}.chart{width:100%!important;height:100%!important;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BarLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-bar-line', template: "\r\n<div class=\"chart-div\" #container>\r\n  <canvas\r\n    #chart\r\n    baseChart\r\n    class=\"chart chart-bar chart-item\"\r\n    [data]=\"config.data\"\r\n    [options]=\"config.options\"\r\n    [type]=\"config.type\"\r\n    [title]=\"description\"\r\n    >\r\n  </canvas>\r\n</div>", styles: [".chart-div{width:100%;height:100%}.chart-bar{max-height:100%}.chart{width:100%!important;height:100%!important;position:relative}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+                type: Input
+            }], isDark: [{
+                type: Input
+            }], card: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], chart: [{
+                type: ViewChild,
+                args: [BaseChartDirective]
+            }], onresize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class BubbleComponent {
+    constructor() {
+        this.type = 'bubble';
+        this.isDark = false;
+        this.card = {};
+        this.loading = true;
+        this.canvasHeight = 0;
+        this.canvasWidth = 0;
+        this.config = {
+            type: this.type,
+            data: {
+                labels: [],
+                datasets: []
+            },
+            options: {}
+        };
+        this.options = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'top',
+                    color: this.isDark ? '#FFF' : '#333',
+                },
+                datalabels: {
+                    display: false
+                }
+            }
+        };
+    }
+    ngOnInit() {
+        this.options.indexAxis = this.card.axisOrientation ?? 'x';
+        if (this.card.stacked) {
+            this.options.scales = { x: { stacked: true }, y: { stacked: true } };
+        }
+        if (this.card.showPorcent) {
+            this.options.plugins.tooltip = {
+                callbacks: {
+                    label: function (context) {
+                        return context.raw + '%';
+                    }
+                }
+            };
+        }
+        if (this.card.showLabel) {
+            this.options.plugins.datalabels = {
+                anchor: 'center',
+                align: 'center',
+                formatter: (value) => this.card.showPorcent ? value + '%' : value,
+                color: '#fff',
+                font: {
+                    weight: 'bold'
+                }
+            };
+        }
+        this.config.type = this.type;
+        this.config.options = this.options;
+        this.config.data.datasets = this.formatDataset();
+    }
+    ngAfterViewInit() {
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.chart) {
+                setTimeout(() => {
+                    this.triggerResize();
+                }, 0);
+            }
+        });
+        this.resizeObserver.observe(this.container.nativeElement);
+        setTimeout(() => {
+            this.chart?.chart?.resize();
+        }, 50);
+        this.loading = false;
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    triggerResize() {
+        if (this.chart?.chart) {
+            this.chart.chart.resize();
+            this.chart.update();
+        }
+    }
+    formatDataset() {
+        if (!this.card?.data?.length)
+            return [];
+        if (!this.card.axisX?.key)
+            return [];
+        const labels = this.card.data.map(row => row[this.card.axisX?.key ?? '']);
+        this.config.data.labels = labels;
+        const datasets = this.card.keys?.map(item => {
+            const data = this.card.data?.map(row => {
+                const value = {
+                    x: row[item.keyX ?? ''],
+                    y: row[item.keyY ?? ''],
+                    r: row[item.keyR ?? '']
+                };
+                return value;
+            }) ?? [];
+            if (!item.color) {
+                item.color = randomColor();
+            }
+            var result = {
+                label: item.label,
+                data,
+                backgroundColor: item.color,
+                fill: item.fill ?? false,
+            };
+            if (this.card.stacked && item.stackKey) {
+                result['stack'] = item.stackKey;
+            }
+            return result;
+        }) ?? [];
+        return datasets;
+    }
+    onresize() {
+        this.triggerResize();
+    }
+}
+BubbleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BubbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BubbleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BubbleComponent, selector: "lib-bubble", inputs: { type: "type", isDark: "isDark", card: "card" }, host: { listeners: { "window:resize": "onresize()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }], ngImport: i0, template: "<div class=\"chart-div\" #container>\r\n  <canvas\r\n    #chart\r\n    baseChart\r\n    class=\"chart chart-bar chart-item\"\r\n    [data]=\"config.data\"\r\n    [options]=\"config.options\"\r\n    [type]=\"config.type\"\r\n    >\r\n  </canvas>\r\n</div>", styles: [".chart-div{width:100%;height:100%}.chart-bar{max-height:100%}.chart{width:100%!important;height:100%!important;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BubbleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-bubble', template: "<div class=\"chart-div\" #container>\r\n  <canvas\r\n    #chart\r\n    baseChart\r\n    class=\"chart chart-bar chart-item\"\r\n    [data]=\"config.data\"\r\n    [options]=\"config.options\"\r\n    [type]=\"config.type\"\r\n    >\r\n  </canvas>\r\n</div>", styles: [".chart-div{width:100%;height:100%}.chart-bar{max-height:100%}.chart{width:100%!important;height:100%!important;position:relative}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+                type: Input
+            }], isDark: [{
+                type: Input
+            }], card: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], chart: [{
+                type: ViewChild,
+                args: [BaseChartDirective]
+            }], onresize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class PieComponent {
+    constructor() {
+        this.type = 'pie';
+        this.isDark = false;
+        this.card = {};
+        this.loading = true;
+        this.canvasHeight = 0;
+        this.canvasWidth = 0;
+        this.config = {
+            type: 'pie',
+            data: {
+                labels: [],
+                datasets: []
+            },
+            options: {}
+        };
+        this.options = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'top',
+                    color: this.isDark ? '#FFF' : '#333',
+                },
+                datalabels: {
+                    display: false
+                }
+            }
+        };
+    }
+    ngOnInit() {
+        this.config.type = this.type == 'halfDoughnut' ? 'doughnut' : (this.type == 'multiPie' ? 'pie' : this.type);
+        this.formatOption();
+        this.config.options = this.options;
+        this.config.data.datasets = this.formatDataset();
+    }
+    ngAfterViewInit() {
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.chart) {
+                setTimeout(() => {
+                    this.triggerResize();
+                }, 0);
+            }
+        });
+        this.resizeObserver.observe(this.container.nativeElement);
+        setTimeout(() => {
+            this.chart?.chart?.resize();
+        }, 50);
+        this.loading = false;
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    triggerResize() {
+        if (this.chart?.chart) {
+            this.chart.chart.resize();
+            this.chart.update();
+        }
+    }
+    formatOption() {
+        if (this.type == 'halfDoughnut') {
+            this.options = {
+                ...this.options,
+                rotation: -90,
+                circumference: 180
+            };
+        }
+        if (this.card.showPorcent) {
+            this.options.plugins.tooltip = {
+                callbacks: {
+                    label: function (context) {
+                        return context.raw + '%';
+                    }
+                }
+            };
+        }
+        if (this.card.showLabel) {
+            this.options.plugins.datalabels = {
+                anchor: 'center',
+                align: 'center',
+                formatter: (value) => this.card.showPorcent ? value + '%' : value,
+                color: '#fff',
+                font: {
+                    weight: 'bold'
+                }
+            };
+        }
+        if (this.type == 'multiPie') {
+            this.options.plugins.tooltip = {
+                callbacks: {
+                    title: (context) => {
+                        const datasetLabel = context[0].dataset.label;
+                        const sliceLabel = context[0].label;
+                        return `${datasetLabel} - ${sliceLabel}`;
+                    },
+                    label: (context) => {
+                        return context.raw + '%';
+                    }
+                }
+            };
+        }
+    }
+    formatDataset() {
+        if (!this.card?.data?.length)
+            return [];
+        if (!this.card.axisX?.key)
+            return [];
+        const labels = this.card.data.map(row => row[this.card.axisX?.key ?? '']);
+        const colors = this.card.data.map(row => row[this.card.axisX?.keyColor ?? ''] ?? randomColor());
+        this.config.data.labels = labels;
+        const datasets = this.card.keys?.map((item, index) => {
+            const data = this.card.data?.map(row => {
+                const value = row[item.key];
+                return typeof value === 'string'
+                    ? Number(value)
+                    : value ?? 0;
+            }) ?? [];
+            var result = {
+                label: item.label,
+                data,
+                backgroundColor: getOpacityColors(colors, index),
+                borderColor: 'white',
+                fill: item.fill ?? false,
+            };
+            return result;
+        }) ?? [];
+        return datasets;
+    }
+    onresize() {
+        this.triggerResize();
+    }
+}
+PieComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PieComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PieComponent, selector: "lib-pie", inputs: { type: "type", isDark: "isDark", card: "card" }, host: { listeners: { "window:resize": "onresize()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }], ngImport: i0, template: "<div class=\"chart-div\" #container>\r\n  <canvas\r\n    #chart\r\n    baseChart\r\n    class=\"chart chart-bar chart-item\"\r\n    [data]=\"config.data\"\r\n    [options]=\"config.options\"\r\n    [type]=\"config.type\"\r\n    >\r\n  </canvas>\r\n</div>", styles: [".chart-div{width:100%;height:100%}.chart-bar{max-height:100%}.chart{width:100%!important;height:100%!important;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PieComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-pie', template: "<div class=\"chart-div\" #container>\r\n  <canvas\r\n    #chart\r\n    baseChart\r\n    class=\"chart chart-bar chart-item\"\r\n    [data]=\"config.data\"\r\n    [options]=\"config.options\"\r\n    [type]=\"config.type\"\r\n    >\r\n  </canvas>\r\n</div>", styles: [".chart-div{width:100%;height:100%}.chart-bar{max-height:100%}.chart{width:100%!important;height:100%!important;position:relative}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+                type: Input
+            }], isDark: [{
+                type: Input
+            }], card: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], chart: [{
+                type: ViewChild,
+                args: [BaseChartDirective]
+            }], onresize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class SimpleCardComponent {
+    constructor() {
+        this.type = 'simpleCard';
+        this.isDark = false;
+        this.card = {};
+        this.loading = true;
+        this.currentData = {};
+        this.currentKey = {};
+    }
+    ngOnInit() {
+        this.currentData = this.card.data?.[0] ?? {};
+        this.currentKey = this.card.keys?.[0] ?? {};
+        this.currentKey.color = this.currentKey.color ?? randomColor();
+    }
+}
+SimpleCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SimpleCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SimpleCardComponent, selector: "lib-simple-card", inputs: { type: "type", isDark: "isDark", card: "card" }, ngImport: i0, template: "<div class=\"chart-div\" #container>\r\n  <b class=\"chart-number\">{{currentData[currentKey.key]}}</b>\r\n  <b class=\"chart-label\">{{currentKey.label}}</b>\r\n</div>", styles: [".chart-div{width:100%;height:100%;display:flex;flex-direction:column}.chart-number{font-size:90pt;line-height:normal;width:100%;display:flex;flex-direction:column;justify-content:center;flex-grow:1}@media (max-width: 768px){::ng-deep .dashboard:not(.responsive) .chart-number{font-size:45pt}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-simple-card', template: "<div class=\"chart-div\" #container>\r\n  <b class=\"chart-number\">{{currentData[currentKey.key]}}</b>\r\n  <b class=\"chart-label\">{{currentKey.label}}</b>\r\n</div>", styles: [".chart-div{width:100%;height:100%;display:flex;flex-direction:column}.chart-number{font-size:90pt;line-height:normal;width:100%;display:flex;flex-direction:column;justify-content:center;flex-grow:1}@media (max-width: 768px){::ng-deep .dashboard:not(.responsive) .chart-number{font-size:45pt}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+                type: Input
+            }], isDark: [{
+                type: Input
+            }], card: [{
+                type: Input
+            }] } });
+
+class TableComponent {
+    constructor() {
+        this.type = 'table';
+        this.isDark = false;
+        this.card = {};
+        this.loading = true;
+    }
+    ngOnInit() {
+    }
+}
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableComponent, selector: "lib-table", inputs: { type: "type", isDark: "isDark", card: "card" }, ngImport: i0, template: "<div class=\"chart-div pt-2\" #container>\r\n  <table class=\"table table-striped\" [class.table-dark]=\"isDark\">\r\n    <thead>\r\n      <tr>\r\n        <th *ngFor=\"let key of card.keys\">{{key.label}}</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody class=\"table-group-divider\">\r\n      <tr *ngFor=\"let data of card.data\">\r\n        <td *ngFor=\"let key of card.keys\">{{data[key.key]}}</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-table', template: "<div class=\"chart-div pt-2\" #container>\r\n  <table class=\"table table-striped\" [class.table-dark]=\"isDark\">\r\n    <thead>\r\n      <tr>\r\n        <th *ngFor=\"let key of card.keys\">{{key.label}}</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody class=\"table-group-divider\">\r\n      <tr *ngFor=\"let data of card.data\">\r\n        <td *ngFor=\"let key of card.keys\">{{data[key.key]}}</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+                type: Input
+            }], isDark: [{
+                type: Input
+            }], card: [{
+                type: Input
+            }] } });
+
+class CardComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.barItems = DASHBOARD_BAR_LINE_TYPES;
+        this.data = {};
+        this.isDark = false;
+    }
+    ngOnInit() {
+        if (this.data.innerHtml) {
+            this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.data.innerHtml);
+        }
+    }
+    includeBarType(data) {
+        return data.type ? this.barItems.includes(data.type) : false;
+    }
+    get barLineType() {
+        if (this.includeBarType(this.data)) {
+            return this.data.type ?? 'bar';
+        }
+        return 'bar';
+    }
+    get pieType() {
+        if (this.data?.type === 'pie' || this.data?.type === 'doughnut' ||
+            this.data?.type === 'polarArea' || this.data?.type === 'halfDoughnut' ||
+            this.data?.type === 'multiPie') {
+            return this.data.type;
+        }
+        return 'pie';
+    }
+    get bubbleType() {
+        if (this.data?.type === 'bubble') {
+            return this.data.type;
+        }
+        return 'bubble';
+    }
+    get cardType() {
+        if (this.data?.type === 'simpleCard') {
+            return this.data.type;
+        }
+        return 'simpleCard';
+    }
+    get tableType() {
+        if (this.data?.type === 'table') {
+            return this.data.type;
+        }
+        return 'table';
+    }
+}
+CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, selector: "lib-card", inputs: { data: "data", isDark: "isDark" }, ngImport: i0, template: "<section class=\"card-section\">\r\n  {{data.title}}\r\n  <div class=\"card-chart\">\r\n    <lib-bar-line *ngIf=\"this.includeBarType(this.data)\" \r\n      [card]=\"data\" [type]=\"barLineType\" [isDark]=\"isDark\"></lib-bar-line>\r\n\r\n    <lib-pie *ngIf=\"['pie', 'doughnut', 'polarArea', 'halfDoughnut', 'multiPie'].includes(data.type ?? '')\" \r\n      [card]=\"data\" [type]=\"pieType\" [isDark]=\"isDark\"></lib-pie>\r\n\r\n    <lib-bubble *ngIf=\"['bubble'].includes(data.type ?? '')\" \r\n      [card]=\"data\" [type]=\"bubbleType\" [isDark]=\"isDark\"></lib-bubble>\r\n\r\n    <lib-simple-card *ngIf=\"['simpleCard'].includes(data.type ?? '')\" \r\n      [card]=\"data\" [type]=\"cardType\" [isDark]=\"isDark\"></lib-simple-card>\r\n\r\n    <lib-table *ngIf=\"['table'].includes(data.type ?? '')\" \r\n      [card]=\"data\" [type]=\"tableType\" [isDark]=\"isDark\"></lib-table>\r\n\r\n    <div class=\"card-html\" *ngIf=\"data.type == 'html'\" [innerHtml]=\"safeHtml\">\r\n    </div>\r\n  </div>\r\n</section>", styles: [".card-section{display:flex;flex-direction:column;height:100%}.card-section .card-chart{flex-grow:1;min-height:0}.card-section .card-chart .card-html{height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BarLineComponent, selector: "lib-bar-line", inputs: ["type", "isDark", "card"] }, { kind: "component", type: BubbleComponent, selector: "lib-bubble", inputs: ["type", "isDark", "card"] }, { kind: "component", type: PieComponent, selector: "lib-pie", inputs: ["type", "isDark", "card"] }, { kind: "component", type: SimpleCardComponent, selector: "lib-simple-card", inputs: ["type", "isDark", "card"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["type", "isDark", "card"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-card', template: "<section class=\"card-section\">\r\n  {{data.title}}\r\n  <div class=\"card-chart\">\r\n    <lib-bar-line *ngIf=\"this.includeBarType(this.data)\" \r\n      [card]=\"data\" [type]=\"barLineType\" [isDark]=\"isDark\"></lib-bar-line>\r\n\r\n    <lib-pie *ngIf=\"['pie', 'doughnut', 'polarArea', 'halfDoughnut', 'multiPie'].includes(data.type ?? '')\" \r\n      [card]=\"data\" [type]=\"pieType\" [isDark]=\"isDark\"></lib-pie>\r\n\r\n    <lib-bubble *ngIf=\"['bubble'].includes(data.type ?? '')\" \r\n      [card]=\"data\" [type]=\"bubbleType\" [isDark]=\"isDark\"></lib-bubble>\r\n\r\n    <lib-simple-card *ngIf=\"['simpleCard'].includes(data.type ?? '')\" \r\n      [card]=\"data\" [type]=\"cardType\" [isDark]=\"isDark\"></lib-simple-card>\r\n\r\n    <lib-table *ngIf=\"['table'].includes(data.type ?? '')\" \r\n      [card]=\"data\" [type]=\"tableType\" [isDark]=\"isDark\"></lib-table>\r\n\r\n    <div class=\"card-html\" *ngIf=\"data.type == 'html'\" [innerHtml]=\"safeHtml\">\r\n    </div>\r\n  </div>\r\n</section>", styles: [".card-section{display:flex;flex-direction:column;height:100%}.card-section .card-chart{flex-grow:1;min-height:0}.card-section .card-chart .card-html{height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { data: [{
+                type: Input
+            }], isDark: [{
+                type: Input
+            }] } });
+
+class ModalEditComponent {
+    constructor(modalService) {
+        this.modalService = modalService;
+        this.rows = [];
+        this.rowsType = '';
+        this.simpleType = { id: 'simple', label: 'Quantidade' };
+        this.types = [];
+        this.data = [];
+        this.groupType = [];
+        this.closeModal = new EventEmitter();
+        this.saveData = new EventEmitter();
+    }
+    ngOnInit() {
+        this.types = [this.simpleType, ...this.groupType];
+        this.rowsType = 'simple';
+        if (this.rows?.length) {
+            this.rows = this.rows.map(r => this.buildRowFromFinalValue(r.finalValue));
+        }
+        else {
+            this.addRow();
+        }
+    }
+    addRow() {
+        this.rows.push({
+            levels: [this.addTodosOption(this.data)],
+            selectedPath: [],
+            finalValue: [],
+            finalFontColor: '',
+            finalBackgroudColor: ''
+        });
+    }
+    removeRow(index) {
+        this.rows.splice(index, 1);
+    }
+    cloneRow(index) {
+        const original = this.rows[index];
+        const cloned = this.buildRowFromFinalValue(original.finalValue);
+        cloned.finalFontColor = original.finalFontColor;
+        cloned.finalBackgroudColor = original.finalBackgroudColor;
+        this.rows.push(cloned);
+    }
+    onSelect(item, rowIndex, levelIndex) {
+        const row = this.rows[rowIndex];
+        row.levels = row.levels.slice(0, levelIndex + 1);
+        row.selectedPath = row.selectedPath.slice(0, levelIndex);
+        row.selectedPath[levelIndex] = item;
+        if (item.type === 'group' && item.items?.length) {
+            row.levels.push(this.addTodosOption(item.items));
+        }
+        this.updateFinalValue(row);
+    }
+    updateFinalValue(row) {
+        row.finalValue = row.selectedPath.map(i => String(i.id));
+    }
+    onFontColorChange(event, rowIndex) {
+        const row = this.rows[rowIndex];
+        const color = event.target.value;
+        row.finalFontColor = color;
+    }
+    onBackgroundChange(event, rowIndex) {
+        var row = this.rows[rowIndex];
+        const color = event.target.value;
+        row.finalBackgroudColor = color;
+    }
+    onCloseModal() {
+        this.closeModal.emit();
+    }
+    onSaveData() {
+        const newData = this.rows.map(r => ({
+            finalValue: r.finalValue,
+            finalBackgroudColor: r.finalBackgroudColor,
+            finalFontColor: r.finalFontColor,
+        }));
+        this.saveData.emit({ rowsType: this.rowsType, rows: this.rows });
+    }
+    isFlatLevel(level) {
+        return level.every(item => item.type !== 'group') ?? false;
+    }
+    buildRowFromFinalValue(finalValue) {
+        const row = {
+            levels: [this.addTodosOption(this.data)],
+            selectedPath: [],
+            finalValue,
+            finalFontColor: '',
+            finalBackgroudColor: ''
+        };
+        let currentLevel = this.data;
+        finalValue.forEach((id, index) => {
+            const found = currentLevel.find(item => item.id === id);
+            if (!found)
+                return;
+            row.selectedPath[index] = found;
+            if (found.type === 'group' && found.items) {
+                currentLevel = found.items;
+                row.levels.push(this.addTodosOption(currentLevel));
+            }
+        });
+        return row;
+    }
+    addTodosOption(items) {
+        const isFlat = items?.every(item => item.type !== 'group');
+        if (!isFlat)
+            return items;
+        const alreadyHasTodos = items.some(i => i.id === 'todos');
+        if (alreadyHasTodos)
+            return items;
+        return [
+            { id: 'todos', label: 'Todos', type: 'option' },
+            ...items
+        ];
+    }
+}
+ModalEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ModalEditComponent, deps: [{ token: i1$2.BsModalService }], target: i0.ɵɵFactoryTarget.Component });
+ModalEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ModalEditComponent, selector: "lib-modal-edit", inputs: { data: "data", groupType: "groupType" }, outputs: { closeModal: "closeModal", saveData: "saveData" }, ngImport: i0, template: "<header class=\"modal-header\">\r\n  <h4 class=\"modal-title pull-left\">Editar fonte dos dados</h4>\r\n  <button type=\"button\" class=\"btn-close close pull-right\" aria-label=\"Close\" (click)=\"onCloseModal()\">\r\n    <span aria-hidden=\"true\" class=\"visually-hidden\">&times;</span>\r\n  </button>\r\n</header>\r\n<body class=\"modal-body table-form py-2\">\r\n  <label>Tipo de Agrupamento dos dados:</label>\r\n  <ng-select\r\n    class=\" col-12 col-sm-4 mb-1\"\r\n    [items]=\"types\"\r\n    bindValue=\"id\"\r\n    bindLabel=\"label\"\r\n    [clearable]=\"false\"\r\n    placeholder=\"Selecione...\"\r\n    [(ngModel)]=\"rowsType\">\r\n  </ng-select>\r\n  <article *ngFor=\"let row of rows; let rowIndex = index\" class=\"line mb-2\">\r\n    <div class=\"d-flex\">\r\n      <ng-container *ngFor=\"let level of row.levels; let levelIndex = index\">\r\n        <ng-select class=\"me-1\"\r\n          [items]=\"level\"\r\n          bindLabel=\"label\"\r\n          [clearable]=\"false\"\r\n          [placeholder]=\"'Selecione...'\"\r\n          [ngModel]=\"row.selectedPath[levelIndex]\"\r\n          (change)=\"onSelect($event, rowIndex, levelIndex)\">\r\n        </ng-select>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex\">\r\n      <div class=\"color-div me-2\" [style.background-color]=\"rows[rowIndex].finalBackgroudColor\">\r\n        <button class=\"btn font-icon\" [style.color]=\"rows[rowIndex].finalFontColor\"\r\n          title=\"Cor do texto\" (click)=\"fontColor.click()\">\r\n          format_color_text\r\n        </button>\r\n        <input #fontColor class=\"hide\" type=\"color\" (change)=\"onFontColorChange($event, rowIndex)\">\r\n        <hr class=\"divisor\">\r\n        <button class=\"btn font-icon\" [style.color]=\"rows[rowIndex].finalFontColor\"\r\n          title=\"Cor de fundo\" (click)=\"backgroundColor.click()\">\r\n          colors\r\n        </button>\r\n        <input #backgroundColor class=\"hide\" type=\"color\" (change)=\"onBackgroundChange($event, rowIndex)\">\r\n      </div>\r\n      <button class=\"btn btn-basic font-icon me-2\" type=\"button\" (click)=\"cloneRow(rowIndex)\" title=\"Clonar linha\">\r\n        copy_all\r\n      </button>\r\n      <button class=\"btn btn-danger font-icon\" type=\"button\" (click)=\"removeRow(rowIndex)\" title=\"Remover linha\">\r\n        delete\r\n      </button>\r\n    </div>\r\n  </article>\r\n  <div class=\"d-flex mb-2\">\r\n    <button class=\"btn btn-success\" type=\"button\" (click)=\"addRow()\" title=\"Adicionar linha\">+</button>\r\n  </div>\r\n  <div class=\"d-flex justify-content-end mb-2\">\r\n    <button class=\"btn btn-success\" type=\"button\" (click)=\"onSaveData()\" title=\"Salvar\">Salvar</button>\r\n  </div>\r\n</body>", styles: [".modal-body{overflow-x:scroll}.modal-body .line{display:flex;justify-content:space-between}.modal-body .ng-select-alternative{min-width:150px}.modal-body .hide{width:0;visibility:hidden}.modal-body .color-div,.modal-body .btn-basic{border:1px solid gray;border-radius:5px}.modal-body .color-div{display:flex}.modal-body .color-div .divisor{height:80%;margin:5% 0;border:1px solid black}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ModalEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-modal-edit', template: "<header class=\"modal-header\">\r\n  <h4 class=\"modal-title pull-left\">Editar fonte dos dados</h4>\r\n  <button type=\"button\" class=\"btn-close close pull-right\" aria-label=\"Close\" (click)=\"onCloseModal()\">\r\n    <span aria-hidden=\"true\" class=\"visually-hidden\">&times;</span>\r\n  </button>\r\n</header>\r\n<body class=\"modal-body table-form py-2\">\r\n  <label>Tipo de Agrupamento dos dados:</label>\r\n  <ng-select\r\n    class=\" col-12 col-sm-4 mb-1\"\r\n    [items]=\"types\"\r\n    bindValue=\"id\"\r\n    bindLabel=\"label\"\r\n    [clearable]=\"false\"\r\n    placeholder=\"Selecione...\"\r\n    [(ngModel)]=\"rowsType\">\r\n  </ng-select>\r\n  <article *ngFor=\"let row of rows; let rowIndex = index\" class=\"line mb-2\">\r\n    <div class=\"d-flex\">\r\n      <ng-container *ngFor=\"let level of row.levels; let levelIndex = index\">\r\n        <ng-select class=\"me-1\"\r\n          [items]=\"level\"\r\n          bindLabel=\"label\"\r\n          [clearable]=\"false\"\r\n          [placeholder]=\"'Selecione...'\"\r\n          [ngModel]=\"row.selectedPath[levelIndex]\"\r\n          (change)=\"onSelect($event, rowIndex, levelIndex)\">\r\n        </ng-select>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex\">\r\n      <div class=\"color-div me-2\" [style.background-color]=\"rows[rowIndex].finalBackgroudColor\">\r\n        <button class=\"btn font-icon\" [style.color]=\"rows[rowIndex].finalFontColor\"\r\n          title=\"Cor do texto\" (click)=\"fontColor.click()\">\r\n          format_color_text\r\n        </button>\r\n        <input #fontColor class=\"hide\" type=\"color\" (change)=\"onFontColorChange($event, rowIndex)\">\r\n        <hr class=\"divisor\">\r\n        <button class=\"btn font-icon\" [style.color]=\"rows[rowIndex].finalFontColor\"\r\n          title=\"Cor de fundo\" (click)=\"backgroundColor.click()\">\r\n          colors\r\n        </button>\r\n        <input #backgroundColor class=\"hide\" type=\"color\" (change)=\"onBackgroundChange($event, rowIndex)\">\r\n      </div>\r\n      <button class=\"btn btn-basic font-icon me-2\" type=\"button\" (click)=\"cloneRow(rowIndex)\" title=\"Clonar linha\">\r\n        copy_all\r\n      </button>\r\n      <button class=\"btn btn-danger font-icon\" type=\"button\" (click)=\"removeRow(rowIndex)\" title=\"Remover linha\">\r\n        delete\r\n      </button>\r\n    </div>\r\n  </article>\r\n  <div class=\"d-flex mb-2\">\r\n    <button class=\"btn btn-success\" type=\"button\" (click)=\"addRow()\" title=\"Adicionar linha\">+</button>\r\n  </div>\r\n  <div class=\"d-flex justify-content-end mb-2\">\r\n    <button class=\"btn btn-success\" type=\"button\" (click)=\"onSaveData()\" title=\"Salvar\">Salvar</button>\r\n  </div>\r\n</body>", styles: [".modal-body{overflow-x:scroll}.modal-body .line{display:flex;justify-content:space-between}.modal-body .ng-select-alternative{min-width:150px}.modal-body .hide{width:0;visibility:hidden}.modal-body .color-div,.modal-body .btn-basic{border:1px solid gray;border-radius:5px}.modal-body .color-div{display:flex}.modal-body .color-div .divisor{height:80%;margin:5% 0;border:1px solid black}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.BsModalService }]; }, propDecorators: { data: [{
+                type: Input
+            }], groupType: [{
+                type: Input
+            }], closeModal: [{
+                type: Output
+            }], saveData: [{
+                type: Output
+            }] } });
+
+class ModalEditChartComponent {
+    constructor() {
+        this.options = [
+            { id: 'bar', title: 'Barra' },
+            { id: 'stackedBar', title: 'Barra Empilhada' },
+            { id: 'verticalBar', title: 'Barra Vertical' },
+            { id: 'verticalStackedBar', title: 'Barra Vertical Empilhada' },
+            { id: 'verticalProgressBar', title: 'Barra de Progresso Vertical' },
+            { id: 'progressBar', title: 'Barra de Progresso' },
+            { id: 'lineBar', title: 'Linha + Barra' },
+            { id: 'lineBarStacked', title: 'Linha + Barra Empilhada' },
+            { id: 'line', title: 'Linha' },
+            { id: 'radar', title: 'Radar' },
+            { id: 'curveLine', title: 'Linha Curva' },
+            { id: 'pie', title: 'Pizza' },
+            { id: 'multiPie', title: 'Múltiplas Pizzas' },
+            { id: 'doughnut', title: 'Rosca' },
+            { id: 'halfDoughnut', title: 'Meia Rosca' },
+            { id: 'area', title: 'Área' },
+            { id: 'bubble', title: 'Bolhas' },
+            { id: 'polarArea', title: 'Área Polar' },
+            { id: 'simpleCard', title: 'Card Simples' },
+            { id: 'table', title: 'Tabela' },
+            { id: 'html', title: 'HTML Personalizado' },
+        ];
+        this.closeModal = new EventEmitter();
+        this.saveData = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    setCurrentOption(option) {
+        this.currentOption = option;
+    }
+    onCloseModal() {
+        this.closeModal.emit();
+    }
+    onSaveData() {
+        this.saveData.emit(this.currentOption);
+    }
+}
+ModalEditChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ModalEditChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ModalEditChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ModalEditChartComponent, selector: "lib-modal-edit-chart", inputs: { currentOption: "currentOption" }, outputs: { closeModal: "closeModal", saveData: "saveData" }, ngImport: i0, template: "<header class=\"modal-header\">\r\n  <h4 class=\"modal-title pull-left\">Editar fonte dos dados</h4>\r\n  <button type=\"button\" class=\"btn-close close pull-right\" aria-label=\"Close\" (click)=\"onCloseModal()\">\r\n    <span aria-hidden=\"true\" class=\"visually-hidden\">&times;</span>\r\n  </button>\r\n</header>\r\n<body class=\"modal-body table-form py-2\">\r\n  <section class=\"d-grid\">\r\n    <label >Titulo:\r\n      <input class=\"form-control\"/>\r\n    </label>\r\n    <label>\r\n      <input type=\"checkbox\"> Mostrar legenda no Gr\u00E1fico\r\n    </label>\r\n    <label>\r\n      <input type=\"checkbox\"> Mostrar simbolo '%' na legenda\r\n    </label>\r\n  </section>\r\n  <hr>\r\n  <h3>TIPO:</h3>\r\n  <section class=\"row g-0\">\r\n    <div class=\"card-chart col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3\" *ngFor=\"let opt of options\">\r\n      <b>{{opt.title}}</b>\r\n      <img [src]=\"'assets/dashboard/images/' + opt.id +'.png'\" (click)=\"setCurrentOption(opt.id)\">\r\n    </div>\r\n  </section>\r\n  <div class=\"d-flex justify-content-end mb-2\">\r\n    <button class=\"btn btn-success\" type=\"button\" (click)=\"onSaveData()\" title=\"Salvar\">Salvar</button>\r\n  </div>\r\n</body>", styles: [".card-chart{display:flex;flex-direction:column;border:1px solid gray;border-radius:5px;padding:5px;aspect-ratio:1/1;overflow:hidden}.card-chart img{object-fit:cover;width:100%;margin:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ModalEditChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-modal-edit-chart', template: "<header class=\"modal-header\">\r\n  <h4 class=\"modal-title pull-left\">Editar fonte dos dados</h4>\r\n  <button type=\"button\" class=\"btn-close close pull-right\" aria-label=\"Close\" (click)=\"onCloseModal()\">\r\n    <span aria-hidden=\"true\" class=\"visually-hidden\">&times;</span>\r\n  </button>\r\n</header>\r\n<body class=\"modal-body table-form py-2\">\r\n  <section class=\"d-grid\">\r\n    <label >Titulo:\r\n      <input class=\"form-control\"/>\r\n    </label>\r\n    <label>\r\n      <input type=\"checkbox\"> Mostrar legenda no Gr\u00E1fico\r\n    </label>\r\n    <label>\r\n      <input type=\"checkbox\"> Mostrar simbolo '%' na legenda\r\n    </label>\r\n  </section>\r\n  <hr>\r\n  <h3>TIPO:</h3>\r\n  <section class=\"row g-0\">\r\n    <div class=\"card-chart col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3\" *ngFor=\"let opt of options\">\r\n      <b>{{opt.title}}</b>\r\n      <img [src]=\"'assets/dashboard/images/' + opt.id +'.png'\" (click)=\"setCurrentOption(opt.id)\">\r\n    </div>\r\n  </section>\r\n  <div class=\"d-flex justify-content-end mb-2\">\r\n    <button class=\"btn btn-success\" type=\"button\" (click)=\"onSaveData()\" title=\"Salvar\">Salvar</button>\r\n  </div>\r\n</body>", styles: [".card-chart{display:flex;flex-direction:column;border:1px solid gray;border-radius:5px;padding:5px;aspect-ratio:1/1;overflow:hidden}.card-chart img{object-fit:cover;width:100%;margin:auto}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { currentOption: [{
+                type: Input
+            }], closeModal: [{
+                type: Output
+            }], saveData: [{
+                type: Output
+            }] } });
+
+class DashboardComponent {
+    constructor(modalService, cd) {
+        this.modalService = modalService;
+        this.cd = cd;
+        this.emptyCard = {
+            type: 'html',
+            innerHtml: '<button class="btn empty-card font-icon" >dashboard_customize</button>'
+        };
+        this.copyComplete = false;
+        this.isDark = false;
+        this.isResponsive = true;
+        this.canEdit = false;
+        this.cols = 4;
+        this.options = [
+            { title: '1x1', cols: 1, rows: 1 },
+            { title: '2x1', cols: 2, rows: 1 },
+            { title: '3x1', cols: 3, rows: 1 },
+            { title: '1x2', cols: 1, rows: 2 },
+            { title: '2x2', cols: 2, rows: 2 },
+        ];
+        this.cards = [];
+        this.groupType = [];
+        this.modalData = [];
+        this.debug = false;
+        this.drops = [];
+    }
+    ngOnInit() {
+        this.cards = [...this.cards].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+        if (this.isResponsive) {
+            this.recalcCols();
+        }
+    }
+    ngAfterViewInit() {
+        this.dropsQuery.changes.subscribe(() => {
+            this.drops = this.dropsQuery.toArray();
+        });
+        Promise.resolve().then(() => {
+            this.drops = this.dropsQuery.toArray();
+        });
+    }
+    entered($event) {
+        moveItemInArray(this.cards, $event.item.data, $event.container.data);
+    }
+    get orderOptions() {
+        return [...this.options].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    }
+    recalcCols() {
+        this.cols = Math.max(1, Math.floor(window.innerWidth / 300));
+    }
+    openModalChart(card) {
+        this.currentCard = card;
+        this.modalChartRef = this.modalService.show(this.modalChart, {
+            class: 'modal-xl modal-top',
+        });
+    }
+    closeModalChart() {
+        this.modalChartRef?.hide();
+    }
+    openModalData(card) {
+        this.currentCard = card;
+        this.currentOption = card.type ?? null;
+        this.modalRef = this.modalService.show(this.modal, {
+            class: 'modal-xl modal-top',
+        });
+    }
+    closeModalData() {
+        this.modalRef?.hide();
+    }
+    get jsonData() {
+        return JSON.stringify(this.currentCard);
+    }
+    openModalCode(card) {
+        this.currentCard = card;
+        this.currentOption = card.type ?? null;
+        this.modalCodeRef = this.modalService.show(this.modalCode, {
+            class: 'modal-xl modal-top',
+        });
+    }
+    closeModalCode() {
+        this.modalCodeRef?.hide();
+    }
+    copyCode() {
+        const texto = JSON.stringify(this.currentCard, null, 2);
+        navigator.clipboard.writeText(texto)
+            .then(() => {
+            this.copyComplete = true;
+            setTimeout(() => this.copyComplete = false, 1500);
+        })
+            .catch(err => {
+            console.error('Erro ao copiar:', err);
+        });
+    }
+    saveData(payload) {
+        const rows = payload.rows;
+        const rowsType = payload.rowsType;
+        const currentType = rowsType == 'simple' ? rowsType : 'group';
+        if (!rows?.length)
+            return;
+        this.cards = this.cards.map(card => {
+            if (card.id !== this.currentCard.id)
+                return card;
+            const baseData = this.data[currentType];
+            if (!baseData)
+                return card;
+            const keys = rows.map((row, index) => {
+                const id = row.finalValue[row.finalValue.length - 1];
+                const last = row.selectedPath.find(r => r.id == id);
+                return {
+                    key: last?.id || `key_${index}`,
+                    label: last?.label || `Item ${index + 1}`,
+                    fill: true,
+                    color: row.finalBackgroudColor,
+                    fontColor: row.finalFontColor
+                };
+            });
+            const typeLabel = this.groupType.find(t => t.id == rowsType)?.label ?? '';
+            var data = this.formatData(rowsType, rows[0]?.selectedPath, rows[0]?.finalValue);
+            return {
+                ...card,
+                axisX: { key: rowsType, label: typeLabel },
+                keys: [...keys],
+                data: data
+            };
+        });
+        this.modalRef?.hide();
+    }
+    formatData(type, selectedPath, finalValue) {
+        const currentType = type == 'simple' ? type : 'group';
+        const baseData = this.data[currentType];
+        let data = [];
+        if (currentType === 'simple') {
+            var finalData = baseData;
+            finalValue?.slice(0, -1)?.forEach(r => {
+                finalData = finalData[r];
+            });
+            data = finalData;
+        }
+        else if (currentType === 'group') {
+            var finalData = baseData;
+            finalValue?.slice(0, -1)?.forEach(r => {
+                finalData = finalData[r];
+            });
+            data = finalData[type];
+        }
+        return data;
+    }
+    randomValueFromPath(row) {
+        const base = row.selectedPath.length * 10;
+        return Math.floor(Math.random() * 20) + base;
+    }
+    saveChartData(data) {
+        alert('TODO'); //proxima versao
+        this.modalRef?.hide();
+    }
+    addNewCard() {
+        const newItem = { title: 'Novo', order: 99, cols: 1, rows: 1 };
+        this.cards.push(newItem);
+        this.cd.detectChanges();
+    }
+    downloadImage(id) {
+        const canvases = document.querySelectorAll(`#card_${id} canvas`);
+        canvases.forEach((canvas, index) => {
+            const scale = 3;
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = canvas.width * scale;
+            tempCanvas.height = canvas.height * scale;
+            const ctx = tempCanvas.getContext('2d');
+            if (ctx) {
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+                ctx.scale(scale, scale);
+                ctx.drawImage(canvas, 0, 0);
+            }
+            const link = document.createElement('a');
+            link.download = `canvas_${index + 1}.png`;
+            link.href = tempCanvas.toDataURL('image/png', 1.0);
+            link.click();
+        });
+    }
+    openChart(card, id) {
+        this.currentCard = card;
+        this.currentOption = card.type ?? null;
+        this.modalViewRef = this.modalService.show(this.modalView, {
+            class: 'modal-xl modal-top',
+        });
+    }
+    closeModalView() {
+        this.modalViewRef?.hide();
+    }
+    onresize() {
+        if (this.isResponsive) {
+            this.recalcCols();
+        }
+    }
+}
+DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, deps: [{ token: i1$2.BsModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardComponent, selector: "lib-dashboard", inputs: { isDark: "isDark", isResponsive: "isResponsive", canEdit: "canEdit", cols: "cols", options: "options", cards: "cards", groupType: "groupType", modalData: "modalData", data: "data", debug: "debug" }, host: { listeners: { "window:resize": "onresize()" } }, viewQueries: [{ propertyName: "modalChart", first: true, predicate: ["modalChart"], descendants: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true }, { propertyName: "modalView", first: true, predicate: ["modalView"], descendants: true }, { propertyName: "modalCode", first: true, predicate: ["modalCode"], descendants: true }, { propertyName: "dropsQuery", predicate: CdkDropList, descendants: true }], ngImport: i0, template: "<main class=\"dashboard\" [class.responsive]=\"isResponsive\" [class.dark-class]=\"isDark\">\r\n  <mat-grid-list [cols]=\"cols\" rowHeight=\"300px\" gutterSize=\"10px\">\r\n    <mat-grid-tile\r\n      *ngFor=\"let card of cards; let i = index\"\r\n      [colspan]=\"card.cols > cols? cols : card.cols\"\r\n      [rowspan]=\"card.rows\"\r\n      [class.dark-class]=\"isDark\"\r\n      class=\"card\"\r\n    >\r\n      <div cdkDropList [cdkDropListConnectedTo]=\"drops\" [cdkDropListData]=\"i\">\r\n        <div\r\n          [id]=\"'card_' + i\"\r\n          cdkDrag\r\n          (cdkDragEntered)=\"entered($event)\"\r\n          [cdkDragData]=\"i\"\r\n          class=\"card-body\"\r\n          [cdkDragDisabled]=\"!canEdit\"\r\n          [class.dark-class]=\"isDark\"\r\n          [class.has-color]=\"card.backgroundColor\"\r\n          [style.background-color]=\"card.backgroundColor\"\r\n          [style.color]=\"card.fontColor\"\r\n        >\r\n          <nav class=\"nav-hover\">\r\n            <button *ngIf=\"!canEdit\" class=\"btn font-icon\" title=\"Ampliar gr\u00E1fico\" (click)=\"openChart(card, i)\">search</button>\r\n            <button *ngIf=\"!canEdit\" class=\"btn font-icon\" title=\"Baixar imagem\" (click)=\"downloadImage(i)\">download</button>\r\n          </nav>\r\n          <nav class=\"card-nav\" *ngIf=\"canEdit\">\r\n            <div class=\"card-handle font-icon\" title=\"Mover\" cdkDragHandle>\r\n              drag_pan\r\n            </div>\r\n            <button class=\"btn card-options font-icon\" title=\"Modificar tamanho\" mat-button [matMenuTriggerFor]=\"menu\">\r\n              resize\r\n            </button>\r\n            <mat-menu #menu=\"matMenu\">\r\n              <ng-container *ngFor=\"let opt of orderOptions\">\r\n                <button mat-menu-item (click)=\"card.cols = opt.cols; card.rows = opt.rows\" >{{opt.title}}</button>\r\n              </ng-container>\r\n            </mat-menu>\r\n            <button class=\"btn font-icon\" title=\"Editar Tipo do Gr\u00E1fico\" (click)=\"openModalChart(card)\">{{'landscape_2_edit'}}</button>\r\n            <button class=\"btn font-icon\" title=\"Editar fonte de dados\" (click)=\"openModalData(card)\">edit_note</button>\r\n            <button class=\"btn font-icon\" *ngIf=\"debug\" title=\"Exibir c\u00F3digo de configura\u00E7\u00E3o\" (click)=\"openModalCode(card)\">code_blocks</button>\r\n          </nav>\r\n          <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\r\n          <lib-card [data]=\"card\" [ngClass]=\"{'canEdit': canEdit}\" [isDark]=\"isDark\"></lib-card>\r\n        </div>\r\n      </div>\r\n    </mat-grid-tile>\r\n    <mat-grid-tile class=\"card\" [colspan]=\"1\" [rowspan]=\"1\" [class.dark-class]=\"isDark\" *ngIf=\"canEdit\">\r\n      <lib-card [data]=\"emptyCard\" [ngClass]=\"{'canEdit': canEdit, cardEmpty:true}\" [isDark]=\"isDark\"\r\n        (click)=\"addNewCard()\"\r\n      ></lib-card>\r\n    </mat-grid-tile>\r\n  </mat-grid-list>\r\n</main>\r\n<ng-template #modal>\r\n  <lib-modal-edit (closeModal)=\"closeModalData()\"  (saveData)=\"saveData($event)\" [data]=\"modalData\" [groupType]=\"groupType\"></lib-modal-edit>\r\n</ng-template>\r\n<ng-template #modalView>\r\n  <header class=\"modal-header\">\r\n    <h4 class=\"modal-title pull-left mb-0\">{{currentCard.title}}</h4>\r\n    <button type=\"button\" class=\"btn-close close pull-right\" aria-label=\"Close\" (click)=\"closeModalView()\">\r\n      <span aria-hidden=\"true\" class=\"visually-hidden\">&times;</span>\r\n    </button>\r\n  </header>\r\n  <body id=\"modalViewBody\" class=\"modal-body py-2 overflow-auto\">\r\n    <lib-card [data]=\"currentCard\" [ngClass]=\"{'canEdit': canEdit}\" [isDark]=\"isDark\"></lib-card>\r\n  </body>\r\n</ng-template>\r\n<ng-template #modalCode>\r\n  <header class=\"modal-header\">\r\n    <h4 class=\"modal-title pull-left mb-0\">{{currentCard.title}}</h4>\r\n    <button type=\"button\" class=\"btn-close close pull-right\" aria-label=\"Close\" (click)=\"closeModalCode()\">\r\n      <span aria-hidden=\"true\" class=\"visually-hidden\">&times;</span>\r\n    </button>\r\n  </header>\r\n  <body id=\"modalCodeBody\" class=\"modal-body py-2 overflow-auto\">\r\n    <pre class=\"code-area\">{{ currentCard | json }}</pre>\r\n    <button class=\"font-icon code-copy\" title=\"Copiar json\" (click)=\"copyCode()\">content_copy</button>\r\n    <span *ngIf=\"copyComplete\" class=\"copy-message\">Copiado!</span>\r\n  </body>\r\n</ng-template>\r\n<ng-template #modalChart>\r\n  <lib-modal-edit-chart (closeModal)=\"closeModalChart()\" [currentOption]=\"currentOption\" (saveData)=\"saveChartData($event)\"></lib-modal-edit-chart>\r\n</ng-template>", styles: [".dashboard{padding:5px;background-color:#e4e4e4}.copy-message{position:absolute;bottom:10px;left:45%;right:auto;color:#fff;padding:5px 25px;border-radius:20px;background:#1b1b1b}.code-area{background:black;color:#fff;padding:10px;line-height:1;border-radius:10px}.code-copy{top:15px;position:absolute;color:#fff;background:#3f3f3f;right:25px;display:hidden;display:none;border-radius:25px;padding:8px;border:none}.modal-body:hover .code-copy{display:inline}.card{box-sizing:border-box;color:#000000de;background:#fff;border-radius:4px;z-index:1;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;transition:box-shadow .2s cubic-bezier(0,0,.2,1)}.card-body{border:solid 1px #ccc;height:100%}.card-body:active{border:solid 1px #ccc;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.card-body .card-nav{width:100%;height:30px;display:flex;border-bottom:1px solid gray}.card-body .card-nav .card-handle{cursor:move;width:24px;height:24px}.card-body .card-nav .card-options{border:none;display:flex;padding:0}.card-body .card-nav button,.card-body .card-nav .card-handle{font-size:18pt;display:flex;color:#898989;padding:0;margin-left:5px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.more-button{float:right;font-size:2em}.cdk-drop-list{height:100%;width:100%}.cdk-drag-animating{transition:unset}.cdk-drag-placeholder{display:none}.mat-grid-tile{overflow:visible!important}.mat-grid-tile-content{height:100%!important;display:flex!important}.nav-hover{display:flex;right:10px;position:absolute;top:10px;display:none}::ng-deep .mat-grid-tile:hover .nav-hover{display:inherit}::ng-deep .dark-class:not(.has-color){background-color:#000!important;color:#fff!important}::ng-deep .dark-class.card-body:not(.has-color){background-color:#1a1a1a!important;color:#fff!important}::ng-deep .mat-grid-tile-content:has(lib-card.cardEmpty .empty-card:active){background-color:#c6c6c6}::ng-deep lib-card.cardEmpty{width:100%}::ng-deep lib-card.cardEmpty .empty-card{width:100%;height:100%;text-align:center;padding:auto;font-size:28pt}::ng-deep lib-card.cardEmpty .empty-card:active{border:none}::ng-deep lib-card.canEdit{display:block;height:calc(100% - 30px)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i4$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i4$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["data", "isDark"] }, { kind: "component", type: ModalEditComponent, selector: "lib-modal-edit", inputs: ["data", "groupType"], outputs: ["closeModal", "saveData"] }, { kind: "component", type: ModalEditChartComponent, selector: "lib-modal-edit-chart", inputs: ["currentOption"], outputs: ["closeModal", "saveData"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dashboard', template: "<main class=\"dashboard\" [class.responsive]=\"isResponsive\" [class.dark-class]=\"isDark\">\r\n  <mat-grid-list [cols]=\"cols\" rowHeight=\"300px\" gutterSize=\"10px\">\r\n    <mat-grid-tile\r\n      *ngFor=\"let card of cards; let i = index\"\r\n      [colspan]=\"card.cols > cols? cols : card.cols\"\r\n      [rowspan]=\"card.rows\"\r\n      [class.dark-class]=\"isDark\"\r\n      class=\"card\"\r\n    >\r\n      <div cdkDropList [cdkDropListConnectedTo]=\"drops\" [cdkDropListData]=\"i\">\r\n        <div\r\n          [id]=\"'card_' + i\"\r\n          cdkDrag\r\n          (cdkDragEntered)=\"entered($event)\"\r\n          [cdkDragData]=\"i\"\r\n          class=\"card-body\"\r\n          [cdkDragDisabled]=\"!canEdit\"\r\n          [class.dark-class]=\"isDark\"\r\n          [class.has-color]=\"card.backgroundColor\"\r\n          [style.background-color]=\"card.backgroundColor\"\r\n          [style.color]=\"card.fontColor\"\r\n        >\r\n          <nav class=\"nav-hover\">\r\n            <button *ngIf=\"!canEdit\" class=\"btn font-icon\" title=\"Ampliar gr\u00E1fico\" (click)=\"openChart(card, i)\">search</button>\r\n            <button *ngIf=\"!canEdit\" class=\"btn font-icon\" title=\"Baixar imagem\" (click)=\"downloadImage(i)\">download</button>\r\n          </nav>\r\n          <nav class=\"card-nav\" *ngIf=\"canEdit\">\r\n            <div class=\"card-handle font-icon\" title=\"Mover\" cdkDragHandle>\r\n              drag_pan\r\n            </div>\r\n            <button class=\"btn card-options font-icon\" title=\"Modificar tamanho\" mat-button [matMenuTriggerFor]=\"menu\">\r\n              resize\r\n            </button>\r\n            <mat-menu #menu=\"matMenu\">\r\n              <ng-container *ngFor=\"let opt of orderOptions\">\r\n                <button mat-menu-item (click)=\"card.cols = opt.cols; card.rows = opt.rows\" >{{opt.title}}</button>\r\n              </ng-container>\r\n            </mat-menu>\r\n            <button class=\"btn font-icon\" title=\"Editar Tipo do Gr\u00E1fico\" (click)=\"openModalChart(card)\">{{'landscape_2_edit'}}</button>\r\n            <button class=\"btn font-icon\" title=\"Editar fonte de dados\" (click)=\"openModalData(card)\">edit_note</button>\r\n            <button class=\"btn font-icon\" *ngIf=\"debug\" title=\"Exibir c\u00F3digo de configura\u00E7\u00E3o\" (click)=\"openModalCode(card)\">code_blocks</button>\r\n          </nav>\r\n          <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\r\n          <lib-card [data]=\"card\" [ngClass]=\"{'canEdit': canEdit}\" [isDark]=\"isDark\"></lib-card>\r\n        </div>\r\n      </div>\r\n    </mat-grid-tile>\r\n    <mat-grid-tile class=\"card\" [colspan]=\"1\" [rowspan]=\"1\" [class.dark-class]=\"isDark\" *ngIf=\"canEdit\">\r\n      <lib-card [data]=\"emptyCard\" [ngClass]=\"{'canEdit': canEdit, cardEmpty:true}\" [isDark]=\"isDark\"\r\n        (click)=\"addNewCard()\"\r\n      ></lib-card>\r\n    </mat-grid-tile>\r\n  </mat-grid-list>\r\n</main>\r\n<ng-template #modal>\r\n  <lib-modal-edit (closeModal)=\"closeModalData()\"  (saveData)=\"saveData($event)\" [data]=\"modalData\" [groupType]=\"groupType\"></lib-modal-edit>\r\n</ng-template>\r\n<ng-template #modalView>\r\n  <header class=\"modal-header\">\r\n    <h4 class=\"modal-title pull-left mb-0\">{{currentCard.title}}</h4>\r\n    <button type=\"button\" class=\"btn-close close pull-right\" aria-label=\"Close\" (click)=\"closeModalView()\">\r\n      <span aria-hidden=\"true\" class=\"visually-hidden\">&times;</span>\r\n    </button>\r\n  </header>\r\n  <body id=\"modalViewBody\" class=\"modal-body py-2 overflow-auto\">\r\n    <lib-card [data]=\"currentCard\" [ngClass]=\"{'canEdit': canEdit}\" [isDark]=\"isDark\"></lib-card>\r\n  </body>\r\n</ng-template>\r\n<ng-template #modalCode>\r\n  <header class=\"modal-header\">\r\n    <h4 class=\"modal-title pull-left mb-0\">{{currentCard.title}}</h4>\r\n    <button type=\"button\" class=\"btn-close close pull-right\" aria-label=\"Close\" (click)=\"closeModalCode()\">\r\n      <span aria-hidden=\"true\" class=\"visually-hidden\">&times;</span>\r\n    </button>\r\n  </header>\r\n  <body id=\"modalCodeBody\" class=\"modal-body py-2 overflow-auto\">\r\n    <pre class=\"code-area\">{{ currentCard | json }}</pre>\r\n    <button class=\"font-icon code-copy\" title=\"Copiar json\" (click)=\"copyCode()\">content_copy</button>\r\n    <span *ngIf=\"copyComplete\" class=\"copy-message\">Copiado!</span>\r\n  </body>\r\n</ng-template>\r\n<ng-template #modalChart>\r\n  <lib-modal-edit-chart (closeModal)=\"closeModalChart()\" [currentOption]=\"currentOption\" (saveData)=\"saveChartData($event)\"></lib-modal-edit-chart>\r\n</ng-template>", styles: [".dashboard{padding:5px;background-color:#e4e4e4}.copy-message{position:absolute;bottom:10px;left:45%;right:auto;color:#fff;padding:5px 25px;border-radius:20px;background:#1b1b1b}.code-area{background:black;color:#fff;padding:10px;line-height:1;border-radius:10px}.code-copy{top:15px;position:absolute;color:#fff;background:#3f3f3f;right:25px;display:hidden;display:none;border-radius:25px;padding:8px;border:none}.modal-body:hover .code-copy{display:inline}.card{box-sizing:border-box;color:#000000de;background:#fff;border-radius:4px;z-index:1;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;transition:box-shadow .2s cubic-bezier(0,0,.2,1)}.card-body{border:solid 1px #ccc;height:100%}.card-body:active{border:solid 1px #ccc;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.card-body .card-nav{width:100%;height:30px;display:flex;border-bottom:1px solid gray}.card-body .card-nav .card-handle{cursor:move;width:24px;height:24px}.card-body .card-nav .card-options{border:none;display:flex;padding:0}.card-body .card-nav button,.card-body .card-nav .card-handle{font-size:18pt;display:flex;color:#898989;padding:0;margin-left:5px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.more-button{float:right;font-size:2em}.cdk-drop-list{height:100%;width:100%}.cdk-drag-animating{transition:unset}.cdk-drag-placeholder{display:none}.mat-grid-tile{overflow:visible!important}.mat-grid-tile-content{height:100%!important;display:flex!important}.nav-hover{display:flex;right:10px;position:absolute;top:10px;display:none}::ng-deep .mat-grid-tile:hover .nav-hover{display:inherit}::ng-deep .dark-class:not(.has-color){background-color:#000!important;color:#fff!important}::ng-deep .dark-class.card-body:not(.has-color){background-color:#1a1a1a!important;color:#fff!important}::ng-deep .mat-grid-tile-content:has(lib-card.cardEmpty .empty-card:active){background-color:#c6c6c6}::ng-deep lib-card.cardEmpty{width:100%}::ng-deep lib-card.cardEmpty .empty-card{width:100%;height:100%;text-align:center;padding:auto;font-size:28pt}::ng-deep lib-card.cardEmpty .empty-card:active{border:none}::ng-deep lib-card.canEdit{display:block;height:calc(100% - 30px)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.BsModalService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isDark: [{
+                type: Input
+            }], isResponsive: [{
+                type: Input
+            }], canEdit: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], cards: [{
+                type: Input
+            }], groupType: [{
+                type: Input
+            }], modalData: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], dropsQuery: [{
+                type: ViewChildren,
+                args: [CdkDropList]
+            }], modalChart: [{
+                type: ViewChild,
+                args: ['modalChart']
+            }], modal: [{
+                type: ViewChild,
+                args: ['modal']
+            }], modalView: [{
+                type: ViewChild,
+                args: ['modalView']
+            }], modalCode: [{
+                type: ViewChild,
+                args: ['modalCode']
+            }], onresize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class PrimordashComponent {
+    constructor() {
+        this.isDark = false;
+        this.isResponsive = true;
+        this.canEdit = false;
+        this.cols = 4;
+        this.options = [
+            { title: '1x1', cols: 1, rows: 1 },
+            { title: '2x1', cols: 2, rows: 1 },
+            { title: '3x1', cols: 3, rows: 1 },
+            { title: '1x2', cols: 1, rows: 2 },
+            { title: '2x2', cols: 2, rows: 2 },
+        ];
+        this.cards = [];
+        this.groupType = [];
+        this.modalData = [];
+        this.debug = false;
+    }
+}
+PrimordashComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrimordashComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PrimordashComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PrimordashComponent, selector: "lib-primordash", inputs: { isDark: "isDark", isResponsive: "isResponsive", canEdit: "canEdit", cols: "cols", options: "options", cards: "cards", groupType: "groupType", modalData: "modalData", data: "data", debug: "debug" }, ngImport: i0, template: `
+    <lib-dashboard
+        [isDark]="isDark"
+        [isResponsive]="isResponsive"
+        [canEdit]="canEdit"
+        [cols]="cols"
+        [options]="options" 
+        [cards]="cards" 
+        [groupType]="groupType" 
+        [modalData]="modalData" 
+        [data]="data"
+        [debug]="true"
+    ></lib-dashboard>
+  `, isInline: true, dependencies: [{ kind: "component", type: DashboardComponent, selector: "lib-dashboard", inputs: ["isDark", "isResponsive", "canEdit", "cols", "options", "cards", "groupType", "modalData", "data", "debug"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrimordashComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-primordash', template: `
+    <lib-dashboard
+        [isDark]="isDark"
+        [isResponsive]="isResponsive"
+        [canEdit]="canEdit"
+        [cols]="cols"
+        [options]="options" 
+        [cards]="cards" 
+        [groupType]="groupType" 
+        [modalData]="modalData" 
+        [data]="data"
+        [debug]="true"
+    ></lib-dashboard>
+  ` }]
+        }], propDecorators: { isDark: [{
+                type: Input
+            }], isResponsive: [{
+                type: Input
+            }], canEdit: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], cards: [{
+                type: Input
+            }], groupType: [{
+                type: Input
+            }], modalData: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }] } });
+
+class PrimordashModule {
+}
+PrimordashModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrimordashModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PrimordashModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PrimordashModule, declarations: [DashboardComponent,
+        CardComponent,
+        BarLineComponent,
+        BubbleComponent,
+        PieComponent,
+        SimpleCardComponent,
+        TableComponent,
+        ModalEditComponent,
+        ModalEditChartComponent,
+        PrimordashComponent], imports: [BrowserModule,
+        DragDropModule,
+        BrowserAnimationsModule,
+        MatGridListModule,
+        MatMenuModule,
+        NgChartsModule,
+        ReactiveFormsModule,
+        FormsModule,
+        CommonModule, i1$2.ModalModule, NgSelectModule], exports: [DashboardComponent,
+        PrimordashComponent] });
+PrimordashModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrimordashModule, imports: [BrowserModule,
+        DragDropModule,
+        BrowserAnimationsModule,
+        MatGridListModule,
+        MatMenuModule,
+        NgChartsModule,
+        ReactiveFormsModule,
+        FormsModule,
+        CommonModule,
+        ModalModule.forRoot(),
+        NgSelectModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrimordashModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DashboardComponent,
+                        CardComponent,
+                        BarLineComponent,
+                        BubbleComponent,
+                        PieComponent,
+                        SimpleCardComponent,
+                        TableComponent,
+                        ModalEditComponent,
+                        ModalEditChartComponent,
+                        PrimordashComponent
+                    ],
+                    imports: [
+                        BrowserModule,
+                        DragDropModule,
+                        BrowserAnimationsModule,
+                        MatGridListModule,
+                        MatMenuModule,
+                        NgChartsModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        CommonModule,
+                        ModalModule.forRoot(),
+                        NgSelectModule
+                    ],
+                    exports: [
+                        DashboardComponent,
+                        PrimordashComponent
+                    ],
+                    providers: []
+                }]
+        }] });
+
+/*
+ * Public API Surface of primordash
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DashboardComponent, PrimordashComponent, PrimordashModule, PrimordashService };
+//# sourceMappingURL=rafaelaalmeidaa-primordash.mjs.map