/* 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 { Themeable } from '../../../Controls/Behaviors/Themeable';
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 { chartElementCosmopolitanStyle } from './Themes/ChartElement.Cosmopolitan';
import { chartElementJoyStyle } from './Themes/ChartElement.Joy';
import { chartElementMemphisStyle } from './Themes/ChartElement.Memphis';
import { mergeOptions } from './Utils';
// #endregion
/**
 * Chart - A comprehensive data visualization component powered by ApexCharts for creating interactive charts and graphs.
 *
 * @description
 * The Chart component enables rich data visualization through multiple chart types including bar, line, area, pie,
 * donut, and scatter plots. Built on ApexCharts library, it provides extensive customization options for colors,
 * animations, legends, and interactivity. Perfect for creating compelling data presentations, analytics dashboards,
 * and real-time monitoring interfaces with responsive design and flexible configuration.
 *
 * @name Chart
 * @element mosaik-chart
 * @category Charts
 *
 * @csspart chart - Main chart rendering container element
 *
 * @cssprop {String} --chart-background-color - Background color for the chart rendering area
 * @cssprop {String} --chart-font-family - Font family for all chart text elements
 * @cssprop {String} --chart-font-letter-spacing - Letter spacing for chart text
 * @cssprop {String} --chart-font-line-height - Line height for chart text elements
 * @cssprop {String} --chart-font-size - Font size for chart labels and text
 * @cssprop {String} --chart-font-text-decoration - Text decoration style for chart labels
 * @cssprop {String} --chart-font-text-transform - Text transformation for chart labels
 * @cssprop {String} --chart-font-weight - Font weight for chart text
 * @cssprop {String} --chart-foreground-color - Primary color for text and line elements
 * @cssprop {String} --chart-gap - The gap CSS custom property.
 * @cssprop {String} --chart-padding-bottom - The padding bottom CSS custom property.
 * @cssprop {String} --chart-padding-left - The padding left CSS custom property.
 * @cssprop {String} --chart-padding-right - The padding right CSS custom property.
 * @cssprop {String} --chart-padding-top - The padding top CSS custom property.
 * @cssprop {String} --chart-shadow - The shadow CSS custom property.
 * @cssprop {String} --chart-shadow-blur - The shadow blur CSS custom property.
 * @cssprop {String} --chart-shadow-color - The shadow color CSS custom property.
 * @cssprop {String} --chart-shadow-offset-x - The shadow offset x CSS custom property.
 * @cssprop {String} --chart-shadow-offset-y - The shadow offset y CSS custom property.
 * @cssprop {String} --chart-shadow-spread - The shadow spread CSS custom property.
 * @cssprop {String} --chart-transition-duration - The transition duration CSS custom property.
 * @cssprop {String} --chart-transition-mode - The transition mode CSS custom property.
 * @cssprop {String} --chart-transition-property - The transition property CSS custom property.
 * @cssprop {String} --chart-translate - The translate CSS custom property.
 *
 * @example
 * Basic bar chart using only HTML attributes:
 * ```html
 * <mosaik-chart display="bar" is-x-axis-visible is-y-axis-visible></mosaik-chart>
 * ```
 *
 * @example
 * Line chart with legend:
 * ```html
 * <mosaik-chart
 *   display="line"
 *   is-legend-visible
 *   legend-position="bottom"
 * ></mosaik-chart>
 * ```
 *
 * @example
 * Pie chart with legend:
 * ```html
 * <mosaik-chart
 *   display="pie"
 *   is-legend-visible
 *   legend-position="right"
 * ></mosaik-chart>
 * ```
 *
 * @example
 * Stacked area chart:
 * ```html
 * <mosaik-chart
 *   display="area"
 *   stacked
 *   is-x-axis-visible
 *   is-y-axis-visible
 * ></mosaik-chart>
 * ```
 *
 * @example
 * Chart with fit sizing:
 * ```html
 * <mosaik-chart
 *   display="line"
 *   fit="both"
 * ></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;
    _pendingUpdate;
    _pendingSeriesUpdate;
    // 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._pendingUpdate = false;
        this._pendingSeriesUpdate = false;
        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 `is` property.
     * The `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 display
     */
    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 stacked
     */
    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 stack-type
     */
    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 is-legend-visible
     */
    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 legend-position
     */
    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 is-x-axis-visible
     */
    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 is-y-axis-visible
     */
    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"]', { strict: true });
        if (this._host) {
            this._host.destroy();
            this._host = null;
        }
        this._host = new ApexCharts(el, this.computedOptions());
        void this.updateComplete.then(() => {
            this._host?.render()
                .then(() => {
                // Apply any pending updates that were queued before render completed
                this.applyPendingUpdates();
            })
                .catch((error) => {
                console.warn('[mosaik-chart] Initial render failed:', error);
            });
        });
    }
    /**
     * @protected
     * @override
     */
    update(changes) {
        super.update(changes);
        // Guard: ApexCharts must be fully initialized before calling update methods
        if (!this.isChartReady()) {
            // Queue updates for later execution after render completes
            if (changes.has('series') && this._series) {
                this._pendingSeriesUpdate = true;
            }
            else {
                this._pendingUpdate = true;
            }
            return;
        }
        if (changes.has('series') && this._series) {
            void this.updateComplete.then(() => {
                if (this.isChartReady()) {
                    void this._host?.updateSeries(this._series);
                }
            });
            return;
        }
        void this.updateComplete.then(() => {
            if (this.isChartReady()) {
                void 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');
        }
    }
    /**
     * Applies any pending updates that were queued before the chart was ready.
     *
     * @private
     */
    applyPendingUpdates() {
        if (!this.isChartReady()) {
            return;
        }
        if (this._pendingSeriesUpdate && this._series) {
            void this._host?.updateSeries(this._series);
            this._pendingSeriesUpdate = false;
        }
        if (this._pendingUpdate) {
            void this._host?.updateOptions(this.computedOptions(), false, true);
            this._pendingUpdate = false;
        }
    }
    /**
     * Checks whether the ApexCharts instance is fully initialized and ready for updates.
     *
     * @private
     * @returns `true` if the chart is ready, `false` otherwise.
     */
    isChartReady() {
        // ApexCharts stores internal state in `w.globals.dom` after render completes.
        // Calling updateOptions/updateSeries before this exists causes TypeErrors.
        return !!this._host?.w?.globals?.dom;
    }
    /**
     * @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(ThemeService.instance.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,
            memphis: chartElementMemphisStyle,
            cosmopolitan: chartElementCosmopolitanStyle
        },
        options: {
            mode: 'open',
            delegatesFocus: true,
            styleAdoption: 'inline'
        },
        imports: []
    }),
    __metadata("design:paramtypes", [])
], ChartElement);
export { ChartElement };
//# sourceMappingURL=ChartElement.js.map