/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-dynamic-delete */
/* eslint-disable @typescript-eslint/ban-ts-comment */
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
/* eslint-disable @typescript-eslint/no-non-null-assertion */
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
// #region Imports
import ApexCharts from 'apexcharts';
import { DomServiceLocator } from '../../../Dom/Dom';
import { RendererServiceLocator } from '../../../Dom/Renderer';
import { Attribute } from '../../Decorators/AttributeDecorator';
import { Component } from '../../Decorators/ComponentDecorator';
import { Property } from '../../Decorators/PropertyDecorator';
import { ChartDisplayType } from '../../Types/ChartDisplayType';
import { ChartLegendPosition } from '../../Types/ChartLegendPosition';
import { ChartStackType } from '../../Types/ChartStackType';
import { Fit } from '../../Types/Fit';
import { ChartBaseElement } from './Abstracts/ChartBaseElement';
import { chartElementTemplate } from './ChartElementTemplate';
import { mergeOptions } from './Utils';
import { Themeable } from '../../../Controls/Behaviors/Themeable';
import { chartElementJoyStyle } from './Themes/ChartElement.Joy';
import { chartElementRetroStyle } from './Themes/ChartElement.Retro';
import { chartElementCosmopolitanStyle } from './Themes/ChartElement.Cosmopolitan';
// #endregion
/**
 * Chart - A comprehensive data visualization component powered by ApexCharts for creating interactive charts and graphs.
 *
 * Enables rich data visualization through multiple chart types including bar, line, area, pie, donut,
 * and scatter plots. Provides extensive customization options for colors, animations, legends, and
 * interactivity to create compelling data presentations and analytics dashboards.
 *
 * @name ChartElement
 * @element mosaik-chart
 * @category Charts
 *
 * @slot - Default content area for chart data configuration and custom elements
 * @slot toolbar - Chart toolbar area for controls and actions
 * @slot legend - Custom legend area for chart series labels
 *
 * @csspart chart - Main chart rendering container
 * @csspart toolbar - Chart toolbar container
 * @csspart legend - Chart legend container
 * @csspart tooltip - Chart tooltip container
 *
 * @cssprop --chart-background-color - Background color for the chart area
 * @cssprop --chart-font-family - Font family for chart text elements
 * @cssprop --chart-font-letter-spacing - Letter spacing for chart text
 * @cssprop --chart-font-line-height - Line height for chart text
 * @cssprop --chart-font-size - Font size for chart text
 * @cssprop --chart-font-text-decoration - Text decoration for chart elements
 * @cssprop --chart-font-text-transform - Text transform for chart labels
 * @cssprop --chart-font-weight - Font weight for chart text
 * @cssprop --chart-foreground-color - Primary text and line color
 * @cssprop --chart-grid-color - Color for chart grid lines
 * @cssprop --chart-axis-color - Color for chart axes
 *
 * @dependency ApexCharts - Third-party charting library for rendering visualizations
 *
 * @example
 * ```html
 * <!-- Bar chart with multiple series -->
 * <mosaik-chart
 *   type="bar"
 *   title="Monthly Sales"
 *   data='[
 *     {"name": "Product A", "data": [10, 20, 30, 25, 35]},
 *     {"name": "Product B", "data": [15, 25, 20, 30, 40]}
 *   ]'
 *   categories='["Jan", "Feb", "Mar", "Apr", "May"]'
 *   stacked="true">
 * </mosaik-chart>
 *
 * <!-- Line chart with trend analysis -->
 * <mosaik-chart
 *   type="line"
 *   title="User Growth"
 *   subtitle="Monthly active users"
 *   data='[{"name": "Users", "data": [100, 150, 200, 280, 350, 420]}]'
 *   categories='["Jan", "Feb", "Mar", "Apr", "May", "Jun"]'
 *   smooth="true"
 *   show-markers="true">
 * </mosaik-chart>
 *
 * <!-- Pie chart for distribution -->
 * <mosaik-chart
 *   type="pie"
 *   title="Market Share"
 *   data='[44, 33, 13, 10]'
 *   labels='["Company A", "Company B", "Company C", "Others"]'
 *   show-legend="true"
 *   donut="false">
 * </mosaik-chart>
 *
 * <!-- Area chart with gradient fill -->
 * <mosaik-chart
 *   type="area"
 *   title="Revenue Trend"
 *   data='[{"name": "Revenue", "data": [1000, 1200, 1100, 1400, 1600, 1800]}]'
 *   categories='["Q1", "Q2", "Q3", "Q4", "Q5", "Q6"]'
 *   fill-type="gradient"
 *   colors='["#008FFB"]'>
 * </mosaik-chart>
 *
 * <!-- Interactive dashboard chart -->
 * <mosaik-chart
 *   type="mixed"
 *   title="Sales & Profit Analysis"
 *   height="400"
 *   toolbar-enabled="true"
 *   zoom-enabled="true"
 *   export-enabled="true">
 *   <div slot="toolbar">
 *     <mosaik-button onclick="refreshData()">Refresh</mosaik-button>
 *     <mosaik-button onclick="exportChart()">Export</mosaik-button>
 *   </div>
 * </mosaik-chart>
 * ```
 *
 * @public
 */
let ChartElement = class ChartElement extends Themeable(ChartBaseElement) {
    // #region Fields
    // private readonly _resizeController: ResizeController<{ width: number; height: number }>;
    _defaultOptions;
    _host;
    _display;
    _isLegendVisible;
    _legendPosition;
    _isXAxisVisible;
    _isYAxisVisible;
    _stacked;
    _stackType;
    // wrapper for apex
    _chart;
    _annotations;
    _colors;
    _dataLabels;
    _series;
    _stroke;
    _labels;
    _legend;
    _markers;
    _noData;
    _fill;
    _tooltip;
    _plotOptions;
    _responsive;
    _xAxis;
    _yAxis;
    _grid;
    _states;
    _theme;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        // this._resizeController = new ResizeController<{ width: number; height: number }>(this, {
        //     callback: (entries: Array<ResizeObserverEntry>) => this.updateSize(entries)
        // });
        this._host = null;
        this._defaultOptions = {
            chart: {
                background: '',
                foreColor: '',
                fontFamily: '',
                toolbar: {
                    show: false
                },
                zoom: {
                    enabled: false
                },
                animations: {
                    enabled: true,
                    // easing: 'easeinout',
                    speed: 800,
                    animateGradually: {
                        enabled: true,
                        delay: 150
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 350
                    }
                }
            },
            dataLabels: {
                enabled: false
            },
            grid: {
                xaxis: {
                    lines: {
                        show: false
                    }
                },
                yaxis: {
                    lines: {
                        show: false
                    }
                }
            },
            legend: {
            // fontSize: 'var(--theme-body2-typography-font-size)',
            // fontFamily: 'var(--theme-typography)',
            // itemMargin: {
            //     vertical: 8,
            //     horizontal: 16
            // }
            // containerMargin: {
            //     left: 39,
            //     top: 39,
            // }
            },
            stroke: {
                curve: 'straight',
                lineCap: 'round'
            },
            subtitle: {
                align: 'left'
            },
            title: {
                align: 'left'
            },
            tooltip: {
                style: {
                    fontFamily: '',
                    fontSize: ''
                }
            }
        };
        this._display = ChartDisplayType.Line;
        this._isLegendVisible = false;
        this._legendPosition = ChartLegendPosition.Right;
        this._isXAxisVisible = false;
        this._isYAxisVisible = false;
        this._stacked = false;
        this._stackType = ChartStackType.Normal;
        this._chart = null;
        this._annotations = null;
        this._colors = null;
        this._dataLabels = null;
        this._series = null;
        this._stroke = null;
        this._labels = null;
        this._legend = null;
        this._markers = null;
        this._noData = null;
        this._fill = null;
        this._tooltip = null;
        this._plotOptions = null;
        this._responsive = null;
        this._xAxis = null;
        this._yAxis = null;
        this._grid = null;
        this._states = null;
        this._theme = null;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-chart';
    }
    /**
     * Gets or sets the `display` property.
     *
     * @public
     * @attr
     */
    get display() {
        return this._display;
    }
    set display(value) {
        if (this._display !== value) {
            this._display = value;
            this.requestUpdate('display');
        }
    }
    /**
     * Gets or sets the `stacked` property.
     *
     * @public
     * @attr
     */
    get stacked() {
        return this._stacked;
    }
    set stacked(value) {
        if (this._stacked !== value) {
            this._stacked = value;
            this.requestUpdate('stacked');
        }
    }
    /**
     * Gets or sets the `stackType` property.
     *
     * @public
     * @attr
     */
    get stackType() {
        return this._stackType;
    }
    set stackType(value) {
        if (this._stackType !== value) {
            this._stackType = value;
            this.requestUpdate('stackType');
        }
    }
    /**
     * Gets or sets the `isLegendVisible` property.
     *
     * @public
     * @attr
     */
    get isLegendVisible() {
        return this._isLegendVisible;
    }
    set isLegendVisible(value) {
        if (this._isLegendVisible !== value) {
            this._isLegendVisible = value;
            this.requestUpdate('isLegendVisible');
        }
    }
    /**
     * Gets or sets the `legendPosition` property.
     *
     * @public
     * @attr
     */
    get legendPosition() {
        return this._legendPosition;
    }
    set legendPosition(value) {
        if (this._legendPosition !== value) {
            this._legendPosition = value;
            this.requestUpdate('legendPosition');
        }
    }
    /**
     * Gets or sets the `isXAxisVisible` property.
     *
     * @public
     * @attr
     */
    get isXAxisVisible() {
        return this._isXAxisVisible;
    }
    set isXAxisVisible(value) {
        if (this._isXAxisVisible !== value) {
            this._isXAxisVisible = value;
            this.requestUpdate('isXAxisVisible');
        }
    }
    /**
     * Gets or sets the `isYAxisVisible` property.
     *
     * @public
     * @attr
     */
    get isYAxisVisible() {
        return this._isYAxisVisible;
    }
    set isYAxisVisible(value) {
        if (this._isYAxisVisible !== value) {
            this._isYAxisVisible = value;
            this.requestUpdate('isYAxisVisible');
        }
    }
    /**
     * Gets or sets the `chart` property.
     *
     * @public
     */
    get chart() {
        return this._chart;
    }
    set chart(value) {
        if (this._chart !== value) {
            this._chart = value;
            this.requestUpdate('chart');
        }
    }
    /**
     * Gets or sets the `annotations` property.
     *
     * @public
     */
    get annotations() {
        return this._annotations;
    }
    set annotations(value) {
        if (this._annotations !== value) {
            this._annotations = value;
            this.requestUpdate('annotations');
        }
    }
    /**
     * Gets or sets the `colors` property.
     *
     * @public
     */
    get colors() {
        return this._colors;
    }
    set colors(value) {
        if (this._colors !== value) {
            this._colors = value;
            this.requestUpdate('colors');
        }
    }
    /**
     * Gets or sets the `dataLabels` property.
     *
     * @public
     */
    get dataLabels() {
        return this._dataLabels;
    }
    set dataLabels(value) {
        if (this._dataLabels !== value) {
            this._dataLabels = value;
            this.requestUpdate('dataLabels');
        }
    }
    /**
     * Gets or sets the `series` property.
     *
     * @public
     */
    get series() {
        return this._series;
    }
    set series(value) {
        if (this._series !== value) {
            this._series = value;
            this.requestUpdate('series');
        }
    }
    /**
     * Gets or sets the `stroke` property.
     *
     * @public
     */
    get stroke() {
        return this._stroke;
    }
    set stroke(value) {
        if (this._stroke !== value) {
            this._stroke = value;
            this.requestUpdate('stroke');
        }
    }
    /**
     * Gets or sets the `labels` property.
     *
     * @public
     */
    get labels() {
        return this._labels;
    }
    set labels(value) {
        if (this._labels !== value) {
            this._labels = value;
            this.requestUpdate('labels');
        }
    }
    /**
     * Gets or sets the `legend` property.
     *
     * @public
     */
    get legend() {
        return this._legend;
    }
    set legend(value) {
        if (this._legend !== value) {
            this._legend = value;
            this.requestUpdate('legend');
        }
    }
    /**
     * Gets or sets the `markers` property.
     *
     * @public
     */
    get markers() {
        return this._markers;
    }
    set markers(value) {
        if (this._markers !== value) {
            this._markers = value;
            this.requestUpdate('markers');
        }
    }
    /**
     * Gets or sets the `noData` property.
     *
     * @public
     */
    get noData() {
        return this._noData;
    }
    set noData(value) {
        if (this._noData !== value) {
            this._noData = value;
            this.requestUpdate('noData');
        }
    }
    /**
     * Gets or sets the `fill` property.
     *
     * @public
     */
    get fill() {
        return this._fill;
    }
    set fill(value) {
        if (this._fill !== value) {
            this._fill = value;
            this.requestUpdate('fill');
        }
    }
    /**
     * Gets or sets the `tooltip` property.
     *
     * @public
     */
    get tooltip() {
        return this._tooltip;
    }
    set tooltip(value) {
        if (this._tooltip !== value) {
            this._tooltip = value;
            this.requestUpdate('tooltip');
        }
    }
    /**
     * Gets or sets the `plotOptions` property.
     *
     * @public
     */
    get plotOptions() {
        return this._plotOptions;
    }
    set plotOptions(value) {
        if (this._plotOptions !== value) {
            this._plotOptions = value;
            this.requestUpdate('plotOptions');
        }
    }
    /**
     * Gets or sets the `responsive` property.
     *
     * @public
     */
    get responsive() {
        return this._responsive;
    }
    set responsive(value) {
        if (this._responsive !== value) {
            this._responsive = value;
            this.requestUpdate('responsive');
        }
    }
    /**
     * Gets or sets the `xAxis` property.
     *
     * @public
     */
    get xAxis() {
        return this._xAxis;
    }
    set xAxis(value) {
        if (this._xAxis !== value) {
            this._xAxis = value;
            this.requestUpdate('xAxis');
        }
    }
    /**
     * Gets or sets the `yAxis` property.
     *
     * @public
     */
    get yAxis() {
        return this._yAxis;
    }
    set yAxis(value) {
        if (this._yAxis !== value) {
            this._yAxis = value;
            this.requestUpdate('yAxis');
        }
    }
    /**
     * Gets or sets the `grid` property.
     *
     * @public
     */
    get grid() {
        return this._grid;
    }
    set grid(value) {
        if (this._grid !== value) {
            this._grid = value;
            this.requestUpdate('grid');
        }
    }
    /**
     * Gets or sets the `states` property.
     *
     * @public
     */
    get states() {
        return this._states;
    }
    set states(value) {
        if (this._states !== value) {
            this._states = value;
            this.requestUpdate('states');
        }
    }
    /**
     * Gets or sets the `theme` property.
     *
     * @public
     */
    get theme() {
        return this._theme;
    }
    set theme(value) {
        if (this._theme !== value) {
            this._theme = value;
            this.requestUpdate('theme');
        }
    }
    // #endregion
    // #region Methods
    /**
     * @protected
     * @overload
     */
    createRenderRoot() {
        // we do not want to create a shadow DOM for this element
        return this;
    }
    /**
     * @protected
     * @override
     */
    onApplyTemplate() {
        super.onApplyTemplate();
        const el = DomServiceLocator.current.findDescendant(this, '[part="chart"]');
        if (this._host) {
            this._host.destroy();
            this._host = null;
        }
        this._host = new ApexCharts(el, this.computedOptions());
        void this.updateComplete.then(() => this._host?.render());
    }
    /**
     * @protected
     * @override
     */
    update(changes) {
        super.update(changes);
        if (changes.has('series') && this._series) {
            void this.updateComplete.then(() => this._host?.updateSeries(this._series));
            return;
        }
        void this.updateComplete.then(() => this._host?.updateOptions(this.computedOptions(), false, true));
    }
    onFitPropertyChanged(oldValue, newValue) {
        super.onFitPropertyChanged(oldValue, newValue);
        if (newValue === Fit.Both) {
            RendererServiceLocator.current.setStyle(this, 'width', '100%');
            RendererServiceLocator.current.setStyle(this, 'height', '100%');
        }
        else if (newValue === Fit.Width) {
            RendererServiceLocator.current.setStyle(this, 'width', '100%');
            RendererServiceLocator.current.removeStyle(this, 'height');
        }
        else if (newValue === Fit.Height) {
            RendererServiceLocator.current.removeStyle(this, 'width');
            RendererServiceLocator.current.setStyle(this, 'height', '100%');
        }
        else {
            RendererServiceLocator.current.removeStyle(this, 'width');
            RendererServiceLocator.current.removeStyle(this, 'height');
        }
    }
    /**
     * @private
     */
    updateSize(entries) {
        const rect = entries.at(0)?.contentRect;
        return {
            width: rect?.width ?? 0,
            height: rect?.height ?? 0
        };
    }
    /**
     * @private
     */
    computedOptions() {
        // get current element width and height
        const rect = this.getBoundingClientRect();
        let options = {
            annotations: this._annotations ?? undefined,
            chart: {
                ...this._chart ?? undefined,
                type: this._display ?? undefined,
                width: (this.fit === Fit.None ? this.width : rect.width ?? this.width) ?? undefined,
                height: (this.fit === Fit.None ? this.height : rect.height ?? this.height) ?? undefined
            },
            colors: [
                ...this._colors ?? []
                // TODO: add colors form theme here...
                // ...Object.values(ITheme.getPalette(Theme2ServiceLocator.current.getTheme(), this.variant) ?? {}).reverse() ?? []
            ],
            dataLabels: {
                ...this._dataLabels ?? undefined
            },
            fill: this._fill ?? undefined,
            grid: {
                ...this._grid ?? undefined
            },
            labels: this._labels ?? undefined,
            legend: {
                ...this._legend ?? undefined,
                show: this._isLegendVisible ?? undefined,
                position: this._legendPosition ?? undefined
            },
            markers: this._markers ?? undefined,
            noData: this._noData ?? undefined,
            plotOptions: this._plotOptions ?? undefined,
            responsive: this._responsive ?? undefined,
            series: this._series ?? undefined,
            states: this._states ?? undefined,
            stroke: this._stroke ?? undefined,
            subtitle: {
                text: this.subHeader ?? undefined
            },
            theme: this._theme ?? undefined,
            title: {
                text: this.header ?? undefined
            },
            tooltip: {
                ...this._tooltip ?? undefined
            },
            xaxis: {
                ...this._xAxis ?? undefined,
                title: {
                    text: this._isXAxisVisible ? this._xAxis?.title?.text : undefined
                },
                labels: {
                    show: this._isXAxisVisible ?? undefined
                },
                axisBorder: {
                    show: this._isXAxisVisible ?? undefined
                },
                axisTicks: {
                    show: this._isXAxisVisible ?? undefined
                }
            },
            yaxis: {
                ...(Array.isArray(this._yAxis) ? { yaxis: this._yAxis } : this._yAxis) ?? undefined,
                title: {
                    text: this._isYAxisVisible && !Array.isArray(this._yAxis) ? this._yAxis?.title?.text : undefined
                },
                labels: {
                    show: this._isYAxisVisible ?? undefined
                },
                axisBorder: {
                    show: this._isYAxisVisible ?? undefined
                },
                axisTicks: {
                    show: this._isYAxisVisible ?? undefined
                }
            }
        };
        // apply default options
        options = mergeOptions(options, this._defaultOptions);
        // afterwords remove undefined properties
        Object.keys(options).forEach((key) => {
            // @ts-ignore
            if (options[key] === undefined) {
                // @ts-ignore
                delete options[key];
            }
        });
        return options;
    }
};
__decorate([
    Attribute({ type: ChartDisplayType }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], ChartElement.prototype, "display", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ChartElement.prototype, "stacked", null);
__decorate([
    Attribute({ type: ChartStackType }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], ChartElement.prototype, "stackType", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ChartElement.prototype, "isLegendVisible", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], ChartElement.prototype, "legendPosition", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ChartElement.prototype, "isXAxisVisible", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ChartElement.prototype, "isYAxisVisible", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "chart", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "annotations", null);
__decorate([
    Property({ type: Array }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "colors", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "dataLabels", null);
__decorate([
    Property({ type: Array }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "series", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "stroke", null);
__decorate([
    Property({ type: Array }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "labels", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "legend", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "markers", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "noData", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "fill", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "tooltip", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "plotOptions", null);
__decorate([
    Property({ type: Array }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "responsive", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "xAxis", null);
__decorate([
    Property({ type: Array }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "yAxis", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "grid", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "states", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ChartElement.prototype, "theme", null);
ChartElement = __decorate([
    Component({
        selector: 'mosaik-chart',
        template: chartElementTemplate,
        themes: {
            joy: chartElementJoyStyle,
            retro: chartElementRetroStyle,
            cosmopolitan: chartElementCosmopolitanStyle
        },
        options: {
            mode: 'open',
            delegatesFocus: true,
            styleAdoption: 'inline'
        },
        imports: []
    }),
    __metadata("design:paramtypes", [])
], ChartElement);
export { ChartElement };
//# sourceMappingURL=ChartElement.js.map