@progress/kendo-angular-chart-wizard 16.6.0-develop.10

package/fesm2015/progress-kendo-angular-chart-wizard.mjs

@@ -0,0 +1,2999 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostBinding, ViewChild, Directive, Inject, HostListener, NgModule } from '@angular/core';
+import { shouldShowValidationUI, WatermarkOverlayComponent, isPresent, ResizeBatchService } from '@progress/kendo-angular-common';
+import * as i2 from '@progress/kendo-angular-l10n';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { validatePackage } from '@progress/kendo-licensing';
+import { Subscription } from 'rxjs';
+import { trashIcon, plusIcon, exportIcon, chartBarClusteredIcon, chartBarStackedIcon, chartBarStacked100Icon, chartPieIcon, chartColumnClusteredIcon, chartColumnStackedIcon, chartColumnStacked100Icon, chartLineIcon, chartLineStackedIcon, chartLineStacked100Icon, chartScatterIcon, filePdfIcon, fileIcon, fileImageIcon } from '@progress/kendo-svg-icons';
+import { ChartComponent, TitleComponent, SubtitleComponent, ChartAreaComponent, CategoryAxisComponent, CategoryAxisItemComponent, ValueAxisComponent, ValueAxisItemComponent, SeriesComponent, SeriesItemComponent, XAxisComponent, XAxisItemComponent, YAxisComponent, YAxisItemComponent, LegendComponent, ThemeService } from '@progress/kendo-angular-charts';
+import { saveAs } from '@progress/kendo-file-saver';
+import { exportPDF } from '@progress/kendo-drawing';
+import { DropDownListComponent, ComboBoxComponent, ValueTemplateDirective } from '@progress/kendo-angular-dropdowns';
+import { NumericTextBoxComponent, ColorPickerComponent, TextBoxComponent, CheckBoxComponent, SwitchComponent } from '@progress/kendo-angular-inputs';
+import { LabelComponent } from '@progress/kendo-angular-label';
+import { NgIf, NgFor } from '@angular/common';
+import { ExpansionPanelComponent, SplitterComponent, SplitterPaneComponent, TabStripComponent, TabStripTabComponent, TabContentDirective } from '@progress/kendo-angular-layout';
+import * as i1 from '@progress/kendo-angular-grid';
+import { GridComponent, ReactiveEditingDirective, DataBindingDirective, ToolbarTemplateDirective, RowReorderColumnComponent, ColumnComponent, CommandColumnComponent, CellTemplateDirective, GridToolbarFocusableDirective, RemoveCommandDirective } from '@progress/kendo-angular-grid';
+import { ButtonComponent, FocusableDirective, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
+import * as i2$1 from '@angular/forms';
+import { SVGIconComponent, IconsService } from '@progress/kendo-angular-icons';
+import { WindowComponent, DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { getter } from '@progress/kendo-common';
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-chart-wizard',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1722607228,
+    version: '16.6.0-develop.10',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
+};
+
+/**
+ * @hidden
+ */
+const fontSizes = [
+    { text: '16', value: '16px' },
+    { text: '20', value: '20px' },
+    { text: '24', value: '24px' },
+    { text: '48', value: '48px' },
+    { text: '60', value: '60px' },
+    { text: '96', value: '96px' },
+];
+/**
+ * @hidden
+ */
+const fontNames = [
+    { text: 'Arial', value: 'Arial, Helvetica, sans-serif',
+        style: { fontFamily: 'Arial, Helvetica, sans-serif' } },
+    { text: 'Courier New', value: '\'Courier New\', Courier, monospace',
+        style: { fontFamily: '\'Courier New\', Courier, monospace' } },
+    { text: 'Georgia', value: 'Georgia, serif',
+        style: { fontFamily: 'Georgia, serif' } },
+    { text: 'Impact', value: 'Impact, Charcoal, sans-serif',
+        style: { fontFamily: 'Impact, Charcoal, sans-serif' } },
+    { text: 'Lucida Console', value: '\'Lucida Console\', Monaco, monospace',
+        style: { fontFamily: '\'Lucida Console\', Monaco, monospace' } },
+    { text: 'Tahoma', value: 'Tahoma, Geneva, sans-serif',
+        style: { fontFamily: 'Tahoma, Geneva, sans-serif' } },
+    { text: 'Times New Roman', value: '\'Times New Roman\', Times,serif',
+        style: { fontFamily: '\'Times New Roman\', Times,serif' } },
+    { text: 'Trebuchet MS', value: '\'Trebuchet MS\', Helvetica, sans-serif',
+        style: { fontFamily: '\'Trebuchet MS\', Helvetica, sans-serif' } },
+    { text: 'Verdana', value: 'Verdana, Geneva, sans-serif',
+        style: { fontFamily: 'Verdana, Geneva, sans-serif' } }
+];
+/**
+ * @hidden
+ */
+const rotations = [
+    { text: '0°', value: 0 },
+    { text: '45°', value: 45 },
+    { text: '90°', value: 90 },
+    { text: '135°', value: 135 },
+    { text: '180°', value: 180 }
+];
+/**
+ * @hidden
+ */
+const positions = [
+    { text: 'Top', value: 'top' },
+    { text: 'Bottom', value: 'bottom' },
+    { text: 'Left', value: 'left' },
+    { text: 'Right', value: 'right' }
+];
+const columnType = 'column';
+const barType = 'bar';
+const lineType = 'line';
+const pieType = 'pie';
+const scatterType = 'scatter';
+const categoricalTypes = [columnType, barType, lineType, scatterType];
+const scatterSeries = {
+    type: lineType,
+    width: 0
+};
+/**
+ * @hidden
+ */
+const isCategorical = (type) => type && categoricalTypes.includes(type);
+const categoryTypes = ['string', 'date', 'number'];
+const valueTypes = ['number'];
+const axesDefinitions = {
+    bar: [
+        { axisType: 'category', types: categoryTypes },
+        { axisType: 'value', types: valueTypes },
+    ],
+    column: [
+        { axisType: 'category', types: categoryTypes },
+        { axisType: 'value', types: valueTypes },
+    ],
+    line: [
+        { axisType: 'category', types: categoryTypes },
+        { axisType: 'value', types: valueTypes },
+    ],
+    pie: [
+        { axisType: 'category', types: categoryTypes },
+        { axisType: 'value', types: valueTypes },
+    ],
+    scatter: [
+        { axisType: 'value', types: valueTypes, count: 2 }
+    ]
+};
+const getFont = (font, size) => `${size || ''} ${font || ''}`.trim();
+/**
+ * @hidden
+ */
+const parseFont = (font) => {
+    const spaceIndex = (font || '').indexOf(' ');
+    const size = font === null || font === void 0 ? void 0 : font.substring(0, spaceIndex);
+    const name = font === null || font === void 0 ? void 0 : font.substring(spaceIndex + 1);
+    return { size, name };
+};
+const updateFontName = (fontName, defaultSize, currentFont) => {
+    const { size } = parseFont(currentFont);
+    return fontName ? getFont(fontName, size || defaultSize) : '';
+};
+const updateFontSize = (fontSize, defaultFontName, currentFont) => {
+    const { name } = parseFont(currentFont);
+    return fontSize ? getFont(name || defaultFontName, fontSize) : '';
+};
+const getCategoryColumnIndex = (data, categoryDef) => {
+    const candidates = [];
+    const firstRecord = data[0].slice();
+    categoryDef.types.forEach((type) => {
+        firstRecord.forEach((item, i) => {
+            if (typeof item.value === type) {
+                candidates.push(i);
+            }
+        });
+    });
+    const result = candidates.findIndex((index) => {
+        const values = data.map((record) => record[index].value);
+        return new Set(values).size === values.length;
+    });
+    return Math.max(result, 0);
+};
+const getValueColumnIndexes = (data, valuesDef) => {
+    const candidates = [];
+    const firstRecord = data[0].slice();
+    valuesDef.forEach((def) => {
+        def.types.forEach((type) => {
+            firstRecord.forEach((item, i) => {
+                if (typeof item.value === type) {
+                    candidates.push(i);
+                }
+            });
+        });
+    });
+    return candidates;
+};
+const emptyState = () => structuredClone({
+    columns: [],
+    data: [],
+    series: [],
+    initialSeries: [],
+    categoryAxis: [],
+    valueAxis: [{ labels: { visible: true } }],
+    area: {
+        margin: { left: undefined, right: undefined, top: undefined, bottom: undefined }
+    },
+});
+const categoryValueChartState = (data, seriesType, options) => {
+    const state = emptyState();
+    state.seriesType = seriesType;
+    state.data = data;
+    const chartDef = axesDefinitions[seriesType];
+    if (!chartDef) {
+        return state;
+    }
+    const firstRecord = data[0].slice();
+    state.columns = data[0].map(i => String(i.field));
+    const categoryDef = chartDef.find(def => def.axisType === 'category');
+    let catIndex = -1;
+    if (categoryDef) {
+        catIndex = (options === null || options === void 0 ? void 0 : options.categoryAxis) ? state.columns.indexOf(options === null || options === void 0 ? void 0 : options.categoryAxis) : getCategoryColumnIndex(data, categoryDef);
+    }
+    const valuesDef = chartDef.filter(def => def.axisType === 'value');
+    let valuesIndexes = getValueColumnIndexes(data, valuesDef);
+    if (valuesIndexes.includes(catIndex)) {
+        valuesIndexes = valuesIndexes.filter(index => index !== catIndex);
+    }
+    const series = [];
+    valuesIndexes.forEach(index => {
+        const valuesColumn = firstRecord[index];
+        const valuesResult = [];
+        data.forEach(record => {
+            valuesResult.push(record[index].value);
+        });
+        series.push(Object.assign({ name: valuesColumn.field, type: seriesType, data: valuesResult, stack: false, labels: { visible: true } }, (seriesType === scatterType ? scatterSeries : {})));
+    });
+    const categories = catIndex > -1 ? data.map(item => String(item[catIndex].value)) : [];
+    if (series.length) {
+        state.series = series.map((s, i) => (Object.assign(Object.assign({}, s), { id: i })));
+        state.initialSeries = structuredClone(state.series);
+    }
+    if (categories.length) {
+        state.categoryAxis = [{ categories, labels: { visible: true } }];
+        state.categoryField = state.columns[catIndex];
+    }
+    state.legend = { visible: true };
+    state.title = { text: null };
+    state.subtitle = { text: null };
+    return state;
+};
+const pieChartState = (data, seriesType, options) => {
+    const state = emptyState();
+    state.seriesType = seriesType;
+    state.data = data;
+    const chartDef = axesDefinitions[seriesType];
+    if (!chartDef) {
+        return state;
+    }
+    const categoriesAxis = data[0].map(i => i.field);
+    const categoryDef = chartDef.find(def => def.axisType === 'category');
+    let catIndex = -1;
+    if (categoryDef) {
+        catIndex = (options === null || options === void 0 ? void 0 : options.categoryAxis) ? categoriesAxis.indexOf(options === null || options === void 0 ? void 0 : options.categoryAxis) : getCategoryColumnIndex(data, categoryDef);
+    }
+    const valuesDef = chartDef.filter(def => def.axisType === 'value');
+    let valuesIndexes = [];
+    if (options === null || options === void 0 ? void 0 : options.valueAxis) {
+        valuesIndexes = [categoriesAxis.indexOf(options.valueAxis)];
+    }
+    else {
+        valuesIndexes = getValueColumnIndexes(data, valuesDef);
+    }
+    if (valuesIndexes.includes(catIndex) && valuesIndexes.length > 1) {
+        valuesIndexes = valuesIndexes.filter(index => index !== catIndex);
+    }
+    if (typeof valuesDef[0].count === 'number') {
+        valuesIndexes = valuesIndexes.slice(0, valuesDef[0].count);
+    }
+    const categories = catIndex > -1 ? data.map(item => String(item[catIndex].value)) : [];
+    const flatData = [];
+    data.forEach(item => {
+        const record = {};
+        valuesIndexes.forEach((index) => {
+            const col = item[index];
+            record[col.field] = col.value;
+            record[item[catIndex].field] = item[catIndex].value;
+        });
+        flatData.push(record);
+    });
+    state.columns = categoriesAxis;
+    state.categoryAxis = [{ categories, title: { text: '' } }];
+    state.series = [{
+            id: 0,
+            data: flatData,
+            type: seriesType,
+            name: categoriesAxis[catIndex],
+            labels: { visible: true },
+            categoryField: categoriesAxis[catIndex],
+            field: categoriesAxis[valuesIndexes[0]]
+        }];
+    state.categoryField = categoriesAxis[catIndex];
+    state.valueField = categoriesAxis[valuesIndexes[0]];
+    state.initialSeries = structuredClone(state.series);
+    return state;
+};
+/**
+ * @hidden
+ */
+const createState = (data, seriesType) => {
+    return (isCategorical(seriesType) ? categoryValueChartState : pieChartState)(data, seriesType);
+};
+/**
+ * @hidden
+ */
+var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes[ActionTypes["seriesType"] = 0] = "seriesType";
+    ActionTypes[ActionTypes["stacked"] = 1] = "stacked";
+    ActionTypes[ActionTypes["categoryAxisX"] = 2] = "categoryAxisX";
+    ActionTypes[ActionTypes["valueAxisY"] = 3] = "valueAxisY";
+    ActionTypes[ActionTypes["seriesChange"] = 4] = "seriesChange";
+    ActionTypes[ActionTypes["areaMarginLeft"] = 5] = "areaMarginLeft";
+    ActionTypes[ActionTypes["areaMarginRight"] = 6] = "areaMarginRight";
+    ActionTypes[ActionTypes["areaMarginTop"] = 7] = "areaMarginTop";
+    ActionTypes[ActionTypes["areaMarginBottom"] = 8] = "areaMarginBottom";
+    ActionTypes[ActionTypes["areaBackground"] = 9] = "areaBackground";
+    ActionTypes[ActionTypes["titleText"] = 10] = "titleText";
+    ActionTypes[ActionTypes["titleFontName"] = 11] = "titleFontName";
+    ActionTypes[ActionTypes["titleFontSize"] = 12] = "titleFontSize";
+    ActionTypes[ActionTypes["titleColor"] = 13] = "titleColor";
+    ActionTypes[ActionTypes["subtitleText"] = 14] = "subtitleText";
+    ActionTypes[ActionTypes["subtitleFontName"] = 15] = "subtitleFontName";
+    ActionTypes[ActionTypes["subtitleFontSize"] = 16] = "subtitleFontSize";
+    ActionTypes[ActionTypes["subtitleColor"] = 17] = "subtitleColor";
+    ActionTypes[ActionTypes["seriesColor"] = 18] = "seriesColor";
+    ActionTypes[ActionTypes["seriesLabel"] = 19] = "seriesLabel";
+    ActionTypes[ActionTypes["legendVisible"] = 20] = "legendVisible";
+    ActionTypes[ActionTypes["legendFontName"] = 21] = "legendFontName";
+    ActionTypes[ActionTypes["legendFontSize"] = 22] = "legendFontSize";
+    ActionTypes[ActionTypes["legendColor"] = 23] = "legendColor";
+    ActionTypes[ActionTypes["legendPosition"] = 24] = "legendPosition";
+    ActionTypes[ActionTypes["categoryAxisTitleText"] = 25] = "categoryAxisTitleText";
+    ActionTypes[ActionTypes["categoryAxisTitleFontName"] = 26] = "categoryAxisTitleFontName";
+    ActionTypes[ActionTypes["categoryAxisTitleFontSize"] = 27] = "categoryAxisTitleFontSize";
+    ActionTypes[ActionTypes["categoryAxisTitleColor"] = 28] = "categoryAxisTitleColor";
+    ActionTypes[ActionTypes["categoryAxisLabelsFontName"] = 29] = "categoryAxisLabelsFontName";
+    ActionTypes[ActionTypes["categoryAxisLabelsFontSize"] = 30] = "categoryAxisLabelsFontSize";
+    ActionTypes[ActionTypes["categoryAxisLabelsColor"] = 31] = "categoryAxisLabelsColor";
+    ActionTypes[ActionTypes["categoryAxisLabelsRotation"] = 32] = "categoryAxisLabelsRotation";
+    ActionTypes[ActionTypes["categoryAxisReverseOrder"] = 33] = "categoryAxisReverseOrder";
+    ActionTypes[ActionTypes["valueAxisTitleText"] = 34] = "valueAxisTitleText";
+    ActionTypes[ActionTypes["valueAxisTitleFontName"] = 35] = "valueAxisTitleFontName";
+    ActionTypes[ActionTypes["valueAxisTitleFontSize"] = 36] = "valueAxisTitleFontSize";
+    ActionTypes[ActionTypes["valueAxisTitleColor"] = 37] = "valueAxisTitleColor";
+    ActionTypes[ActionTypes["valueAxisLabelsFormat"] = 38] = "valueAxisLabelsFormat";
+    ActionTypes[ActionTypes["valueAxisLabelsFontName"] = 39] = "valueAxisLabelsFontName";
+    ActionTypes[ActionTypes["valueAxisLabelsFontSize"] = 40] = "valueAxisLabelsFontSize";
+    ActionTypes[ActionTypes["valueAxisLabelsColor"] = 41] = "valueAxisLabelsColor";
+    ActionTypes[ActionTypes["valueAxisLabelsRotation"] = 42] = "valueAxisLabelsRotation";
+})(ActionTypes || (ActionTypes = {}));
+/**
+ * @hidden
+ */
+const mergeStates = (state, newState) => {
+    newState.legend = state.legend;
+    newState.area = state.area;
+    newState.title = state.title;
+    newState.subtitle = state.subtitle;
+    if (newState.series.length === state.series.length) {
+        for (let i = 0; i < newState.series.length; i++) {
+            newState.series[i].color = state.series[i].color;
+            newState.series[i].labels = state.series[i].labels;
+        }
+    }
+    if (state.series.every(s => { var _a; return (_a = s.labels) === null || _a === void 0 ? void 0 : _a.visible; })) {
+        newState.series.forEach(s => {
+            s.labels = s.labels || {};
+            s.labels.visible = true;
+        });
+    }
+    return newState;
+};
+/**
+ * @hidden
+ */
+const updateState = (currentState, action, value) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+    const state = Object.assign({}, currentState);
+    switch (action) {
+        case ActionTypes.seriesType:
+            return createState(state.data, value);
+        case ActionTypes.stacked:
+            state.series = state.series.map(s => (Object.assign(Object.assign({}, s), { stack: value })));
+            return state;
+        case ActionTypes.categoryAxisX: {
+            if (state.seriesType && isCategorical(state.seriesType)) {
+                const newState = categoryValueChartState(state.data, state.seriesType, { categoryAxis: value });
+                return mergeStates(state, newState);
+            }
+            else if (state.seriesType === pieType) {
+                const newState = pieChartState(state.data, state.seriesType, { categoryAxis: value });
+                return mergeStates(state, newState);
+            }
+            return state;
+        }
+        case ActionTypes.valueAxisY: {
+            if (state.seriesType === pieType) {
+                const newState = pieChartState(state.data, state.seriesType, { categoryAxis: state.categoryField, valueAxis: value });
+                return mergeStates(state, newState);
+            }
+            return state;
+        }
+        case ActionTypes.seriesChange:
+            state.series = value;
+            return state;
+        case ActionTypes.areaMarginLeft:
+            state.area = Object.assign(Object.assign({}, state.area), { margin: Object.assign(Object.assign({}, (((_a = state.area) === null || _a === void 0 ? void 0 : _a.margin) || {})), { left: value }) });
+            return state;
+        case ActionTypes.areaMarginRight:
+            state.area = Object.assign(Object.assign({}, state.area), { margin: Object.assign(Object.assign({}, (((_b = state.area) === null || _b === void 0 ? void 0 : _b.margin) || {})), { right: value }) });
+            return state;
+        case ActionTypes.areaMarginTop:
+            state.area = Object.assign(Object.assign({}, state.area), { margin: Object.assign(Object.assign({}, (((_c = state.area) === null || _c === void 0 ? void 0 : _c.margin) || {})), { top: value }) });
+            return state;
+        case ActionTypes.areaMarginBottom:
+            state.area = Object.assign(Object.assign({}, state.area), { margin: Object.assign(Object.assign({}, (((_d = state.area) === null || _d === void 0 ? void 0 : _d.margin) || {})), { bottom: value }) });
+            return state;
+        case ActionTypes.areaBackground:
+            state.area = Object.assign(Object.assign({}, state.area), { background: value });
+            return state;
+        case ActionTypes.titleText:
+            state.title = Object.assign(Object.assign({}, state.title), { text: value });
+            return state;
+        case ActionTypes.titleFontName: {
+            state.title = Object.assign(Object.assign({}, state.title), { font: updateFontName(value, fontSizes[0].value, (_e = state.title) === null || _e === void 0 ? void 0 : _e.font) });
+            return state;
+        }
+        case ActionTypes.titleFontSize:
+            state.title = Object.assign(Object.assign({}, state.title), { font: updateFontSize(value, fontNames[0].value, (_f = state.title) === null || _f === void 0 ? void 0 : _f.font) });
+            return state;
+        case ActionTypes.titleColor:
+            state.title = Object.assign(Object.assign({}, state.title), { color: value });
+            return state;
+        case ActionTypes.subtitleText:
+            state.subtitle = Object.assign(Object.assign({}, state.subtitle), { text: value });
+            return state;
+        case ActionTypes.subtitleFontName:
+            state.subtitle = Object.assign(Object.assign({}, state.subtitle), { font: updateFontName(value, fontSizes[0].value, (_g = state.subtitle) === null || _g === void 0 ? void 0 : _g.font) });
+            return state;
+        case ActionTypes.subtitleFontSize:
+            state.subtitle = Object.assign(Object.assign({}, state.subtitle), { font: updateFontSize(value, fontNames[0].value, (_h = state.subtitle) === null || _h === void 0 ? void 0 : _h.font) });
+            return state;
+        case ActionTypes.subtitleColor:
+            state.subtitle = Object.assign(Object.assign({}, state.subtitle), { color: value });
+            return state;
+        case ActionTypes.seriesColor:
+            state.series = state.series.map(s => (Object.assign(Object.assign({}, s), { color: value.seriesName === s.name ? value.color : s.color })));
+            return state;
+        case ActionTypes.seriesLabel:
+            state.series = state.series.map(s => {
+                if (value.all || value.seriesName === s.name) {
+                    return Object.assign(Object.assign({}, s), { labels: { visible: value.visible } });
+                }
+                return s;
+            });
+            return state;
+        case ActionTypes.legendVisible:
+            state.legend = Object.assign(Object.assign({}, state.legend), { visible: value });
+            return state;
+        case ActionTypes.legendFontName: {
+            state.legend = Object.assign(Object.assign({}, state.legend), { labels: Object.assign(Object.assign({}, (_j = state.legend) === null || _j === void 0 ? void 0 : _j.labels), { font: updateFontName(value, fontSizes[0].value, (_l = (_k = state.legend) === null || _k === void 0 ? void 0 : _k.labels) === null || _l === void 0 ? void 0 : _l.font) }) });
+            return state;
+        }
+        case ActionTypes.legendFontSize:
+            state.legend = Object.assign(Object.assign({}, state.legend), { labels: Object.assign(Object.assign({}, (_m = state.legend) === null || _m === void 0 ? void 0 : _m.labels), { font: updateFontSize(value, fontNames[0].value, (_p = (_o = state.legend) === null || _o === void 0 ? void 0 : _o.labels) === null || _p === void 0 ? void 0 : _p.font) }) });
+            return state;
+        case ActionTypes.legendColor:
+            state.legend = Object.assign(Object.assign({}, state.legend), { labels: Object.assign(Object.assign({}, (_q = state.legend) === null || _q === void 0 ? void 0 : _q.labels), { color: value }) });
+            return state;
+        case ActionTypes.legendPosition:
+            state.legend = Object.assign(Object.assign({}, state.legend), { position: value });
+            return state;
+        case ActionTypes.categoryAxisTitleText:
+            state.categoryAxis = (_r = state.categoryAxis) === null || _r === void 0 ? void 0 : _r.map(axis => (Object.assign(Object.assign({}, axis), { title: Object.assign(Object.assign({}, axis.title), { text: value }) })));
+            return state;
+        case ActionTypes.categoryAxisTitleFontName: {
+            state.categoryAxis = (_s = state.categoryAxis) === null || _s === void 0 ? void 0 : _s.map(axis => { var _a; return (Object.assign(Object.assign({}, axis), { title: Object.assign(Object.assign({}, axis.title), { font: updateFontName(value, fontSizes[0].value, (_a = axis.title) === null || _a === void 0 ? void 0 : _a.font) }) })); });
+            return state;
+        }
+        case ActionTypes.categoryAxisTitleFontSize:
+            state.categoryAxis = (_t = state.categoryAxis) === null || _t === void 0 ? void 0 : _t.map(axis => { var _a; return (Object.assign(Object.assign({}, axis), { title: Object.assign(Object.assign({}, axis.title), { font: updateFontSize(value, fontNames[0].value, (_a = axis.title) === null || _a === void 0 ? void 0 : _a.font) }) })); });
+            return state;
+        case ActionTypes.categoryAxisTitleColor:
+            state.categoryAxis = (_u = state.categoryAxis) === null || _u === void 0 ? void 0 : _u.map(axis => (Object.assign(Object.assign({}, axis), { title: Object.assign(Object.assign({}, axis.title), { color: value }) })));
+            return state;
+        case ActionTypes.categoryAxisLabelsFontName: {
+            state.categoryAxis = (_v = state.categoryAxis) === null || _v === void 0 ? void 0 : _v.map(axis => { var _a; return (Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { font: updateFontName(value, fontSizes[0].value, (_a = axis.labels) === null || _a === void 0 ? void 0 : _a.font) }) })); });
+            return state;
+        }
+        case ActionTypes.categoryAxisLabelsFontSize:
+            state.categoryAxis = (_w = state.categoryAxis) === null || _w === void 0 ? void 0 : _w.map(axis => { var _a; return (Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { font: updateFontSize(value, fontNames[0].value, (_a = axis.labels) === null || _a === void 0 ? void 0 : _a.font) }) })); });
+            return state;
+        case ActionTypes.categoryAxisLabelsColor:
+            state.categoryAxis = (_x = state.categoryAxis) === null || _x === void 0 ? void 0 : _x.map(axis => (Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { color: value }) })));
+            return state;
+        case ActionTypes.categoryAxisLabelsRotation:
+            state.categoryAxis = (_y = state.categoryAxis) === null || _y === void 0 ? void 0 : _y.map(axis => (Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { rotation: value }) })));
+            return state;
+        case ActionTypes.categoryAxisReverseOrder:
+            state.categoryAxis = (_z = state.categoryAxis) === null || _z === void 0 ? void 0 : _z.map(axis => (Object.assign(Object.assign({}, axis), { reverse: value })));
+            return state;
+        case ActionTypes.valueAxisTitleText: {
+            if (!state.valueAxis || state.valueAxis.length === 0) {
+                state.valueAxis = [{ title: { text: value } }];
+            }
+            else {
+                state.valueAxis = (_0 = state.valueAxis) === null || _0 === void 0 ? void 0 : _0.map(axis => (Object.assign(Object.assign({}, axis), { title: Object.assign(Object.assign({}, axis.title), { text: value }) })));
+            }
+            return state;
+        }
+        case ActionTypes.valueAxisTitleFontName: {
+            state.valueAxis = (_1 = state.valueAxis) === null || _1 === void 0 ? void 0 : _1.map(axis => { var _a; return (Object.assign(Object.assign({}, axis), { title: Object.assign(Object.assign({}, axis.title), { font: updateFontName(value, fontSizes[0].value, (_a = axis.title) === null || _a === void 0 ? void 0 : _a.font) }) })); });
+            return state;
+        }
+        case ActionTypes.valueAxisTitleFontSize:
+            state.valueAxis = (_2 = state.valueAxis) === null || _2 === void 0 ? void 0 : _2.map(axis => { var _a; return (Object.assign(Object.assign({}, axis), { title: Object.assign(Object.assign({}, axis.title), { font: updateFontSize(value, fontNames[0].value, (_a = axis.title) === null || _a === void 0 ? void 0 : _a.font) }) })); });
+            return state;
+        case ActionTypes.valueAxisTitleColor:
+            state.valueAxis = (_3 = state.valueAxis) === null || _3 === void 0 ? void 0 : _3.map(axis => (Object.assign(Object.assign({}, axis), { title: Object.assign(Object.assign({}, axis.title), { color: value }) })));
+            return state;
+        case ActionTypes.valueAxisLabelsFormat:
+            state.valueAxis = (_4 = state.valueAxis) === null || _4 === void 0 ? void 0 : _4.map(axis => (Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { format: value }) })));
+            return state;
+        case ActionTypes.valueAxisLabelsFontName: {
+            state.valueAxis = (_5 = state.valueAxis) === null || _5 === void 0 ? void 0 : _5.map(axis => { var _a; return (Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { font: updateFontName(value, fontSizes[0].value, (_a = axis.labels) === null || _a === void 0 ? void 0 : _a.font) }) })); });
+            return state;
+        }
+        case ActionTypes.valueAxisLabelsFontSize:
+            state.valueAxis = (_6 = state.valueAxis) === null || _6 === void 0 ? void 0 : _6.map(axis => { var _a; return (Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { font: updateFontSize(value, fontNames[0].value, (_a = axis.labels) === null || _a === void 0 ? void 0 : _a.font) }) })); });
+            return state;
+        case ActionTypes.valueAxisLabelsColor:
+            state.valueAxis = (_7 = state.valueAxis) === null || _7 === void 0 ? void 0 : _7.map(axis => (Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { color: value }) })));
+            return state;
+        case ActionTypes.valueAxisLabelsRotation:
+            state.valueAxis = (_8 = state.valueAxis) === null || _8 === void 0 ? void 0 : _8.map(axis => (Object.assign(Object.assign({}, axis), { labels: Object.assign(Object.assign({}, axis.labels), { rotation: value }) })));
+            return state;
+        default:
+            return state;
+    }
+};
+
+/**
+ * @hidden
+ */
+class StateService {
+    constructor() {
+        this.state = {
+            categoryAxis: [],
+            valueAxis: [],
+            series: [],
+            initialSeries: [],
+            columns: [],
+            data: []
+        };
+        this.seriesType = 'bar';
+        this.currentTitle = 'Chart Title';
+        this.currentSeries = {};
+        this.data = [];
+        this.deletedSeries = [];
+        this.direction = 'ltr';
+    }
+}
+StateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+StateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StateService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StateService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ */
+class ChartWizardPropertyPaneFormFieldComponent {
+    constructor(localization, cdr) {
+        this.localization = localization;
+        this.cdr = cdr;
+        this.colSpan = 1;
+        this.hasLabel = true;
+        this.isLabelInsideFormFieldWrap = false;
+        this.valueChange = new EventEmitter();
+        this.formField = true;
+    }
+    get isColSpan2() {
+        return this.colSpan === 2;
+    }
+    ngAfterViewChecked() {
+        this.localization.changes.subscribe(() => {
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.localization.changes.unsubscribe();
+    }
+    ngAfterViewInit() {
+        if (this.hasLabel) {
+            this.label.for =
+                this.numericTextBox ||
+                    this.colorPicker ||
+                    this.dropDownList ||
+                    this.textBox ||
+                    this.comboBox ||
+                    this.checkBox;
+        }
+    }
+}
+ChartWizardPropertyPaneFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, deps: [{ token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormFieldComponent, isStandalone: true, selector: "kendo-chart-wizard-property-pane-form-field", inputs: { currentState: "currentState", action: "action", class: "class", inputType: "inputType", text: "text", data: "data", placeholder: "placeholder", colSpan: "colSpan", hasLabel: "hasLabel", isLabelInsideFormFieldWrap: "isLabelInsideFormFieldWrap", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-form-field": "this.formField", "class.k-col-span-2": "this.isColSpan2" } }, viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }, { propertyName: "numericTextBox", first: true, predicate: NumericTextBoxComponent, descendants: true }, { propertyName: "colorPicker", first: true, predicate: ColorPickerComponent, descendants: true }, { propertyName: "dropDownList", first: true, predicate: DropDownListComponent, descendants: true }, { propertyName: "textBox", first: true, predicate: TextBoxComponent, descendants: true }, { propertyName: "comboBox", first: true, predicate: ComboBoxComponent, descendants: true }, { propertyName: "checkBox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
+        <kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap" class="k-form-label" [text]="text"></kendo-label>
+        <div class="k-form-field-wrap">
+            <kendo-label
+                *ngIf="hasLabel && isLabelInsideFormFieldWrap"
+                class="k-form-label"
+                [text]="text"
+            ></kendo-label>
+            <kendo-numerictextbox
+                *ngIf="inputType === 'numeric'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-numerictextbox>
+            <kendo-colorpicker
+                *ngIf="inputType === 'colorPicker'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-colorpicker>
+            <kendo-dropdownlist
+                *ngIf="inputType === 'dropDownList'"
+                [data]="data"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-dropdownlist>
+            <kendo-combobox
+                *ngIf="inputType === 'comboBox'"
+                [data]="data"
+                [value]="value"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [placeholder]="placeholder"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-combobox>
+            <kendo-textbox
+                *ngIf="inputType === 'text'"
+                fillMode="outline"
+                rounded="medium"
+                [placeholder]="placeholder"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-textbox>
+            <kendo-checkbox
+                *ngIf="inputType === 'checkbox'"
+                class="k-checkbox-md k-rounded-md"
+                [checkedState]="value"
+                (checkedStateChange)="valueChange.emit($event)"
+            ></kendo-checkbox>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chart-wizard-property-pane-form-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <kendo-label *ngIf="hasLabel && !isLabelInsideFormFieldWrap" class="k-form-label" [text]="text"></kendo-label>
+        <div class="k-form-field-wrap">
+            <kendo-label
+                *ngIf="hasLabel && isLabelInsideFormFieldWrap"
+                class="k-form-label"
+                [text]="text"
+            ></kendo-label>
+            <kendo-numerictextbox
+                *ngIf="inputType === 'numeric'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-numerictextbox>
+            <kendo-colorpicker
+                *ngIf="inputType === 'colorPicker'"
+                fillMode="outline"
+                rounded="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-colorpicker>
+            <kendo-dropdownlist
+                *ngIf="inputType === 'dropDownList'"
+                [data]="data"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-dropdownlist>
+            <kendo-combobox
+                *ngIf="inputType === 'comboBox'"
+                [data]="data"
+                [value]="value"
+                textField="text"
+                valueField="value"
+                [valuePrimitive]="true"
+                fillMode="outline"
+                rounded="medium"
+                size="medium"
+                [placeholder]="placeholder"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-combobox>
+            <kendo-textbox
+                *ngIf="inputType === 'text'"
+                fillMode="outline"
+                rounded="medium"
+                [placeholder]="placeholder"
+                [value]="value"
+                (valueChange)="valueChange.emit($event)"
+            ></kendo-textbox>
+            <kendo-checkbox
+                *ngIf="inputType === 'checkbox'"
+                class="k-checkbox-md k-rounded-md"
+                [checkedState]="value"
+                (checkedStateChange)="valueChange.emit($event)"
+            ></kendo-checkbox>
+        </div>
+    `,
+                    standalone: true,
+                    imports: [
+                        NgIf,
+                        LabelComponent,
+                        NumericTextBoxComponent,
+                        ColorPickerComponent,
+                        DropDownListComponent,
+                        ComboBoxComponent,
+                        TextBoxComponent,
+                        CheckBoxComponent
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { currentState: [{
+                type: Input
+            }], action: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], inputType: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], colSpan: [{
+                type: Input
+            }], hasLabel: [{
+                type: Input
+            }], isLabelInsideFormFieldWrap: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], formField: [{
+                type: HostBinding,
+                args: ['class.k-form-field']
+            }], isColSpan2: [{
+                type: HostBinding,
+                args: ['class.k-col-span-2']
+            }], label: [{
+                type: ViewChild,
+                args: [LabelComponent]
+            }], numericTextBox: [{
+                type: ViewChild,
+                args: [NumericTextBoxComponent]
+            }], colorPicker: [{
+                type: ViewChild,
+                args: [ColorPickerComponent]
+            }], dropDownList: [{
+                type: ViewChild,
+                args: [DropDownListComponent]
+            }], textBox: [{
+                type: ViewChild,
+                args: [TextBoxComponent]
+            }], comboBox: [{
+                type: ViewChild,
+                args: [ComboBoxComponent]
+            }], checkBox: [{
+                type: ViewChild,
+                args: [CheckBoxComponent]
+            }] } });
+
+/**
+ * @hidden
+ */
+class ChartWizardPropertyPaneDataTabComponent {
+    constructor(stateService, localization, cdr) {
+        this.stateService = stateService;
+        this.localization = localization;
+        this.cdr = cdr;
+        this.chartTitles = [
+            { text: 'Chart Title', value: 'Chart Title' },
+            { text: 'Chart Subtitle', value: 'Chart Subtitle' },
+        ];
+        this.titleText = ActionTypes.titleText;
+        this.titleFontName = ActionTypes.titleFontName;
+        this.titleFontSize = ActionTypes.titleFontSize;
+        this.titleColor = ActionTypes.titleColor;
+        this.subtitleText = ActionTypes.subtitleText;
+        this.subtitleFontName = ActionTypes.subtitleFontName;
+        this.subtitleFontSize = ActionTypes.subtitleFontSize;
+        this.subtitleColor = ActionTypes.subtitleColor;
+        this.areaMarginLeft = ActionTypes.areaMarginLeft;
+        this.areaMarginRight = ActionTypes.areaMarginRight;
+        this.areaMarginTop = ActionTypes.areaMarginTop;
+        this.areaMarginBottom = ActionTypes.areaMarginBottom;
+        this.areaBackground = ActionTypes.areaBackground;
+        this.legendVisible = ActionTypes.legendVisible;
+        this.legendFontName = ActionTypes.legendFontName;
+        this.legendFontSize = ActionTypes.legendFontSize;
+        this.legendColor = ActionTypes.legendColor;
+        this.legendPosition = ActionTypes.legendPosition;
+        this.seriesColor = ActionTypes.seriesColor;
+        this.seriesLabel = ActionTypes.seriesLabel;
+        this.categoryAxisTitleText = ActionTypes.categoryAxisTitleText;
+        this.categoryAxisTitleFontName = ActionTypes.categoryAxisTitleFontName;
+        this.categoryAxisTitleFontSize = ActionTypes.categoryAxisTitleFontSize;
+        this.categoryAxisTitleColor = ActionTypes.categoryAxisTitleColor;
+        this.categoryAxisLabelsFontName = ActionTypes.categoryAxisLabelsFontName;
+        this.categoryAxisLabelsFontSize = ActionTypes.categoryAxisLabelsFontSize;
+        this.categoryAxisLabelsColor = ActionTypes.categoryAxisLabelsColor;
+        this.categoryAxisLabelsRotation = ActionTypes.categoryAxisLabelsRotation;
+        this.categoryAxisReverseOrder = ActionTypes.categoryAxisReverseOrder;
+        this.valueAxisTitleText = ActionTypes.valueAxisTitleText;
+        this.valueAxisTitleFontName = ActionTypes.valueAxisTitleFontName;
+        this.valueAxisTitleFontSize = ActionTypes.valueAxisTitleFontSize;
+        this.valueAxisTitleColor = ActionTypes.valueAxisTitleColor;
+        this.valueAxisLabelsFontName = ActionTypes.valueAxisLabelsFontName;
+        this.valueAxisLabelsFontSize = ActionTypes.valueAxisLabelsFontSize;
+        this.valueAxisLabelsColor = ActionTypes.valueAxisLabelsColor;
+        this.valueAxisLabelsRotation = ActionTypes.valueAxisLabelsRotation;
+        this.parseFont = parseFont;
+        this.fontNames = fontNames;
+        this.fontSizes = fontSizes;
+        this.legendPositions = positions;
+        this.labelsRotation = rotations;
+    }
+    get chartTitleTypeText() {
+        var _a, _b;
+        return this.stateService.currentTitle === 'Chart Title'
+            ? (_a = this.stateService.state.title) === null || _a === void 0 ? void 0 : _a.text
+            : (_b = this.stateService.state.subtitle) === null || _b === void 0 ? void 0 : _b.text;
+    }
+    get chartTitleTypeFont() {
+        var _a, _b;
+        return this.stateService.currentTitle === 'Chart Title'
+            ? parseFont((_a = this.stateService.state.title) === null || _a === void 0 ? void 0 : _a.font).name
+            : parseFont((_b = this.stateService.state.subtitle) === null || _b === void 0 ? void 0 : _b.font).name;
+    }
+    get chartTitleTypeFontSize() {
+        var _a, _b;
+        return this.stateService.currentTitle === 'Chart Title'
+            ? parseFont((_a = this.stateService.state.title) === null || _a === void 0 ? void 0 : _a.font).size
+            : parseFont((_b = this.stateService.state.subtitle) === null || _b === void 0 ? void 0 : _b.font).size;
+    }
+    get chartTitleTypeColor() {
+        var _a, _b;
+        return this.stateService.currentTitle === 'Chart Title'
+            ? (_a = this.stateService.state.title) === null || _a === void 0 ? void 0 : _a.color
+            : (_b = this.stateService.state.subtitle) === null || _b === void 0 ? void 0 : _b.color;
+    }
+    get chartTitleTypeAction() {
+        return this.stateService.currentTitle === 'Chart Title' ? this.titleText : this.subtitleText;
+    }
+    get chartTitleTypeFontAction() {
+        return this.stateService.currentTitle === 'Chart Title' ? this.titleFontName : this.subtitleFontName;
+    }
+    get chartTitleTypeColorAction() {
+        return this.stateService.currentTitle === 'Chart Title' ? this.titleColor : this.subtitleColor;
+    }
+    get chartTitleTypeFontSizeAction() {
+        return this.stateService.currentTitle === 'Chart Title' ? this.titleFontSize : this.subtitleFontSize;
+    }
+    ngAfterViewChecked() {
+        this.localization.changes.subscribe(() => {
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.localization.changes.unsubscribe();
+    }
+    updateState(action, value) {
+        this.stateService.state = updateState(this.stateService.state, action, value);
+    }
+    changeCurrentTitle(value) {
+        this.stateService.currentTitle = value;
+    }
+    toggleSeriesLabels(value) {
+        this.updateCurrentSeries(this.stateService.currentSeries);
+        this.stateService.currentSeries.labels = { visible: value };
+        this.updateState(this.seriesLabel, this.stateService.currentSeries);
+    }
+    updateCurrentSeries(value) {
+        this.stateService.currentSeries = this.stateService.state.series.find((series) => series.name === value.name);
+    }
+    updateSeriesColor(value) {
+        this.updateCurrentSeries(this.stateService.currentSeries);
+        this.stateService.currentSeries.color = value;
+        this.updateState(this.seriesColor, this.stateService.currentSeries);
+    }
+    onExpandedChange(panel, expanded) {
+        expanded
+            ? (this.stateService.currentFormatExpansionPanel = panel)
+            : (this.stateService.currentFormatExpansionPanel = null);
+    }
+    isExpanded(panel) {
+        return this.stateService.currentFormatExpansionPanel === panel;
+    }
+}
+ChartWizardPropertyPaneDataTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, deps: [{ token: StateService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneDataTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneDataTabComponent, isStandalone: true, selector: "kendo-chart-wizard-property-pane-format-tab", ngImport: i0, template: `
+        <section>
+            <kendo-expansionpanel
+                title="Chart Area"
+                [expanded]="isExpanded('Chart Area')"
+                (expandedChange)="onExpandedChange('Chart Area', $event)"
+                [attr.dir]="stateService.direction"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Margins</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Left"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area?.margin).left"
+                                (valueChange)="updateState(areaMarginLeft, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Right"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area?.margin).right"
+                                (valueChange)="updateState(areaMarginRight, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Top"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area?.margin).top"
+                                (valueChange)="updateState(areaMarginTop, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Bottom"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area?.margin).bottom"
+                                (valueChange)="updateState(areaMarginBottom, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Background</legend>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="stateService.state.area?.background"
+                            (valueChange)="updateState(areaBackground, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                title="Title"
+                [expanded]="isExpanded('Title')"
+                (expandedChange)="onExpandedChange('Title', $event)"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Apply to"
+                            inputType="dropDownList"
+                            [data]="chartTitles"
+                            [colSpan]="2"
+                            [value]="stateService.currentTitle"
+                            (valueChange)="changeCurrentTitle($event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Title"
+                            inputType="text"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeText"
+                            (valueChange)="updateState(chartTitleTypeAction, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Font"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeFont"
+                            placeholder="(Inherited font)"
+                            (valueChange)="updateState(chartTitleTypeFontAction, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Size"
+                            inputType="comboBox"
+                            [data]="fontSizes"
+                            [value]="chartTitleTypeFontSize"
+                            (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="chartTitleTypeColor"
+                            (valueChange)="updateState(chartTitleTypeColorAction, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                title="Legend"
+                [expanded]="isExpanded('Legend')"
+                (expandedChange)="onExpandedChange('Legend', $event)"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                        <kendo-label [for]="toggleLegend" text="Show Legend"></kendo-label>
+                        <kendo-switch
+                            #toggleLegend
+                            onLabel="On"
+                            offLabel="Off"
+                            thumbRounded="full"
+                            size="medium"
+                            [checked]="stateService.state.legend?.visible"
+                            (valueChange)="updateState(legendVisible, $event)"
+                        ></kendo-switch>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Font"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            placeholder="(Inherited font)"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).name"
+                            (valueChange)="updateState(legendFontName, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Size"
+                            inputType="comboBox"
+                            [data]="fontSizes"
+                            placeholder="px"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).size"
+                            (valueChange)="updateState(legendFontSize, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="stateService.state.legend?.labels?.color"
+                            (valueChange)="updateState(legendColor, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Position"
+                            inputType="dropDownList"
+                            [colSpan]="2"
+                            [data]="legendPositions"
+                            [value]="stateService.state.legend?.position"
+                            (valueChange)="updateState(legendPosition, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                title="Series"
+                [expanded]="isExpanded('Series')"
+                (expandedChange)="onExpandedChange('Series', $event)"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-field">
+                        <kendo-label [for]="seriesDropDown" class="k-form-label" text="Apply to"></kendo-label>
+                        <div class="k-form-field-wrap">
+                            <kendo-dropdownlist
+                                #seriesDropDown
+                                [data]="stateService.state.series"
+                                textField="name"
+                                valueField="name"
+                                fillMode="outline"
+                                rounded="medium"
+                                size="medium"
+                                [value]="stateService.currentSeries"
+                                (valueChange)="updateCurrentSeries($event)"
+                            ></kendo-dropdownlist>
+                        </div>
+                    </div>
+
+                    <kendo-chart-wizard-property-pane-form-field
+                        text="Color"
+                        [value]="stateService.currentSeries?.color"
+                        inputType="colorPicker"
+                        (valueChange)="updateSeriesColor($event)"
+                    >
+                    </kendo-chart-wizard-property-pane-form-field>
+                    <kendo-chart-wizard-property-pane-form-field
+                        text="Show Labels"
+                        [value]="stateService.currentSeries.labels?.visible"
+                        [isLabelInsideFormFieldWrap]="true"
+                        inputType="checkbox"
+                        (valueChange)="toggleSeriesLabels($event)"
+                    >
+                    </kendo-chart-wizard-property-pane-form-field>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section class="k-row-start-1 k-row-end-3 k-col-start-3">
+            <kendo-expansionpanel
+                title="Category axis"
+                [expanded]="isExpanded('Category Axis')"
+                (expandedChange)="onExpandedChange('Category Axis', $event)"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Title</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chart-wizard-property-pane-form-field
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                placeholder="Axis Title"
+                                [value]="stateService.state.categoryAxis[0]?.title?.text"
+                                (valueChange)="updateState(categoryAxisTitleText, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(categoryAxisTitleFontName, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                placeholder="px"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.title?.color"
+                                (valueChange)="updateState(categoryAxisTitleColor, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Labels</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                placeholder="px"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.color || ''"
+                                (valueChange)="updateState(categoryAxisLabelsColor, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Rotation"
+                                inputType="dropDownList"
+                                [data]="labelsRotation"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <span></span>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Reverse Order"
+                                [isLabelInsideFormFieldWrap]="true"
+                                inputType="checkbox"
+                                [colSpan]="2"
+                                [value]="stateService.state.categoryAxis[0]?.reverse"
+                                (valueChange)="updateState(categoryAxisReverseOrder, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section class="k-row-start-1 k-row-end-3 k-col-start-4">
+            <kendo-expansionpanel
+                title="Value axis"
+                [expanded]="isExpanded('Value Axis')"
+                (expandedChange)="onExpandedChange('Value Axis', $event)"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Title</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chart-wizard-property-pane-form-field
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                placeholder="Axis Title"
+                                [value]="stateService.state.valueAxis[0]?.title?.text"
+                                (valueChange)="updateState(valueAxisTitleText, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [colSpan]="2"
+                                [data]="fontNames"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(valueAxisTitleFontName, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                placeholder="px"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(valueAxisTitleFontSize, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.title?.color"
+                                (valueChange)="updateState(valueAxisTitleColor, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Labels</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(valueAxisLabelsFontName, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                placeholder="px"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.labels?.color || ''"
+                                (valueChange)="updateState(valueAxisLabelsColor, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Rotation"
+                                inputType="dropDownList"
+                                [data]="labelsRotation"
+                                [value]="stateService.state.valueAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(valueAxisLabelsRotation, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+    `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: ChartWizardPropertyPaneFormFieldComponent, selector: "kendo-chart-wizard-property-pane-form-field", inputs: ["currentState", "action", "class", "inputType", "text", "data", "placeholder", "colSpan", "hasLabel", "isLabelInsideFormFieldWrap", "value"], outputs: ["valueChange"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneDataTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chart-wizard-property-pane-format-tab',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <section>
+            <kendo-expansionpanel
+                title="Chart Area"
+                [expanded]="isExpanded('Chart Area')"
+                (expandedChange)="onExpandedChange('Chart Area', $event)"
+                [attr.dir]="stateService.direction"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Margins</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Left"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area?.margin).left"
+                                (valueChange)="updateState(areaMarginLeft, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Right"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area?.margin).right"
+                                (valueChange)="updateState(areaMarginRight, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Top"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area?.margin).top"
+                                (valueChange)="updateState(areaMarginTop, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Bottom"
+                                inputType="numeric"
+                                [value]="$any(stateService.state.area?.margin).bottom"
+                                (valueChange)="updateState(areaMarginBottom, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Background</legend>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="stateService.state.area?.background"
+                            (valueChange)="updateState(areaBackground, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                title="Title"
+                [expanded]="isExpanded('Title')"
+                (expandedChange)="onExpandedChange('Title', $event)"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Apply to"
+                            inputType="dropDownList"
+                            [data]="chartTitles"
+                            [colSpan]="2"
+                            [value]="stateService.currentTitle"
+                            (valueChange)="changeCurrentTitle($event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Title"
+                            inputType="text"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeText"
+                            (valueChange)="updateState(chartTitleTypeAction, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Font"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            [value]="chartTitleTypeFont"
+                            placeholder="(Inherited font)"
+                            (valueChange)="updateState(chartTitleTypeFontAction, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Size"
+                            inputType="comboBox"
+                            [data]="fontSizes"
+                            [value]="chartTitleTypeFontSize"
+                            (valueChange)="updateState(chartTitleTypeFontSizeAction, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="chartTitleTypeColor"
+                            (valueChange)="updateState(chartTitleTypeColorAction, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                title="Legend"
+                [expanded]="isExpanded('Legend')"
+                (expandedChange)="onExpandedChange('Legend', $event)"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                        <kendo-label [for]="toggleLegend" text="Show Legend"></kendo-label>
+                        <kendo-switch
+                            #toggleLegend
+                            onLabel="On"
+                            offLabel="Off"
+                            thumbRounded="full"
+                            size="medium"
+                            [checked]="stateService.state.legend?.visible"
+                            (valueChange)="updateState(legendVisible, $event)"
+                        ></kendo-switch>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Font"
+                            inputType="comboBox"
+                            [data]="fontNames"
+                            [colSpan]="2"
+                            placeholder="(Inherited font)"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).name"
+                            (valueChange)="updateState(legendFontName, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Size"
+                            inputType="comboBox"
+                            [data]="fontSizes"
+                            placeholder="px"
+                            [value]="parseFont(stateService.state.legend?.labels?.font).size"
+                            (valueChange)="updateState(legendFontSize, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Color"
+                            inputType="colorPicker"
+                            [value]="stateService.state.legend?.labels?.color"
+                            (valueChange)="updateState(legendColor, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                        <kendo-chart-wizard-property-pane-form-field
+                            text="Position"
+                            inputType="dropDownList"
+                            [colSpan]="2"
+                            [data]="legendPositions"
+                            [value]="stateService.state.legend?.position"
+                            (valueChange)="updateState(legendPosition, $event)"
+                        >
+                        </kendo-chart-wizard-property-pane-form-field>
+                    </div>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section>
+            <kendo-expansionpanel
+                title="Series"
+                [expanded]="isExpanded('Series')"
+                (expandedChange)="onExpandedChange('Series', $event)"
+            >
+                <form class="k-form k-form-md">
+                    <div class="k-form-field">
+                        <kendo-label [for]="seriesDropDown" class="k-form-label" text="Apply to"></kendo-label>
+                        <div class="k-form-field-wrap">
+                            <kendo-dropdownlist
+                                #seriesDropDown
+                                [data]="stateService.state.series"
+                                textField="name"
+                                valueField="name"
+                                fillMode="outline"
+                                rounded="medium"
+                                size="medium"
+                                [value]="stateService.currentSeries"
+                                (valueChange)="updateCurrentSeries($event)"
+                            ></kendo-dropdownlist>
+                        </div>
+                    </div>
+
+                    <kendo-chart-wizard-property-pane-form-field
+                        text="Color"
+                        [value]="stateService.currentSeries?.color"
+                        inputType="colorPicker"
+                        (valueChange)="updateSeriesColor($event)"
+                    >
+                    </kendo-chart-wizard-property-pane-form-field>
+                    <kendo-chart-wizard-property-pane-form-field
+                        text="Show Labels"
+                        [value]="stateService.currentSeries.labels?.visible"
+                        [isLabelInsideFormFieldWrap]="true"
+                        inputType="checkbox"
+                        (valueChange)="toggleSeriesLabels($event)"
+                    >
+                    </kendo-chart-wizard-property-pane-form-field>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section class="k-row-start-1 k-row-end-3 k-col-start-3">
+            <kendo-expansionpanel
+                title="Category axis"
+                [expanded]="isExpanded('Category Axis')"
+                (expandedChange)="onExpandedChange('Category Axis', $event)"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Title</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chart-wizard-property-pane-form-field
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                placeholder="Axis Title"
+                                [value]="stateService.state.categoryAxis[0]?.title?.text"
+                                (valueChange)="updateState(categoryAxisTitleText, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                [colSpan]="2"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(categoryAxisTitleFontName, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                placeholder="px"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(categoryAxisTitleFontSize, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.title?.color"
+                                (valueChange)="updateState(categoryAxisTitleColor, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Labels</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(categoryAxisLabelsFontName, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                placeholder="px"
+                                [value]="parseFont(stateService.state.categoryAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(categoryAxisLabelsFontSize, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.color || ''"
+                                (valueChange)="updateState(categoryAxisLabelsColor, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Rotation"
+                                inputType="dropDownList"
+                                [data]="labelsRotation"
+                                [value]="stateService.state.categoryAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(categoryAxisLabelsRotation, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <span></span>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Reverse Order"
+                                [isLabelInsideFormFieldWrap]="true"
+                                inputType="checkbox"
+                                [colSpan]="2"
+                                [value]="stateService.state.categoryAxis[0]?.reverse"
+                                (valueChange)="updateState(categoryAxisReverseOrder, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+        <section class="k-row-start-1 k-row-end-3 k-col-start-4">
+            <kendo-expansionpanel
+                title="Value axis"
+                [expanded]="isExpanded('Value Axis')"
+                (expandedChange)="onExpandedChange('Value Axis', $event)"
+            >
+                <form class="k-form k-form-md">
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Title</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chart-wizard-property-pane-form-field
+                                inputType="text"
+                                [hasLabel]="false"
+                                [colSpan]="2"
+                                placeholder="Axis Title"
+                                [value]="stateService.state.valueAxis[0]?.title?.text"
+                                (valueChange)="updateState(valueAxisTitleText, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [colSpan]="2"
+                                [data]="fontNames"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).name"
+                                (valueChange)="updateState(valueAxisTitleFontName, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                placeholder="px"
+                                [data]="fontSizes"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.title?.font).size"
+                                (valueChange)="updateState(valueAxisTitleFontSize, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.title?.color"
+                                (valueChange)="updateState(valueAxisTitleColor, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                    <fieldset class="k-form-fieldset">
+                        <legend class="k-form-legend">Labels</legend>
+                        <div class="k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4">
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Font"
+                                inputType="comboBox"
+                                [data]="fontNames"
+                                placeholder="(Inherited font)"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).name"
+                                (valueChange)="updateState(valueAxisLabelsFontName, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Size"
+                                inputType="comboBox"
+                                [data]="fontSizes"
+                                placeholder="px"
+                                [value]="parseFont(stateService.state.valueAxis[0]?.labels?.font).size"
+                                (valueChange)="updateState(valueAxisLabelsFontSize, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Color"
+                                inputType="colorPicker"
+                                [value]="stateService.state.valueAxis[0]?.labels?.color || ''"
+                                (valueChange)="updateState(valueAxisLabelsColor, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                            <kendo-chart-wizard-property-pane-form-field
+                                text="Rotation"
+                                inputType="dropDownList"
+                                [data]="labelsRotation"
+                                [value]="stateService.state.valueAxis[0]?.labels?.rotation"
+                                (valueChange)="updateState(valueAxisLabelsRotation, $event)"
+                            >
+                            </kendo-chart-wizard-property-pane-form-field>
+                        </div>
+                    </fieldset>
+                </form>
+            </kendo-expansionpanel>
+        </section>
+    `,
+                    standalone: true,
+                    imports: [
+                        ExpansionPanelComponent,
+                        ChartWizardPropertyPaneFormFieldComponent,
+                        LabelComponent,
+                        SwitchComponent,
+                        DropDownListComponent
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: StateService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });
+
+/**
+ * @hidden
+ */
+class ChartWizardPropertyPaneFormatTabComponent {
+    constructor(stateService, formBuilder) {
+        this.stateService = stateService;
+        this.formBuilder = formBuilder;
+        this.categoryAxisX = ActionTypes.categoryAxisX;
+        this.valueAxisY = ActionTypes.valueAxisY;
+        this.seriesChange = ActionTypes.seriesChange;
+        this.trashIcon = trashIcon;
+        this.plusIcon = plusIcon;
+        this.isCategorical = isCategorical;
+        this.formGroup = this.formBuilder.group({
+            name: null,
+        });
+    }
+    updateState(action, value) {
+        this.stateService.state = updateState(this.stateService.state, action, value);
+    }
+    createFormGroup(args) {
+        const item = args.isNew ? {} : args.dataItem;
+        this.formGroup = this.formBuilder.group({
+            name: item.name,
+        });
+        return this.formGroup;
+    }
+    addData() {
+        this.stateService.state.series.push(this.stateService.deletedSeries[0]);
+        this.stateService.deletedSeries.shift();
+        this.updateState(this.seriesChange, this.stateService.state.series);
+    }
+    removeData(event) {
+        this.stateService.deletedSeries.push(event.dataItem);
+        this.updateState(this.seriesChange, event.sender.data.data);
+    }
+    onRowReorder(grid) {
+        this.updateState(this.seriesChange, grid.data.data);
+    }
+    isDisabled(grid) {
+        return grid.data.data.length === this.stateService.state.initialSeries.length;
+    }
+}
+ChartWizardPropertyPaneFormatTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, deps: [{ token: StateService }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneFormatTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneFormatTabComponent, isStandalone: true, selector: "kendo-chart-wizard-property-pane-data-tab", ngImport: i0, template: `
+        <kendo-expansionpanel title="Configuration" [expanded]="true">
+            <form class="k-form k-form-md">
+                <fieldset class="k-form-fieldset">
+                    <legend class="k-form-legend">
+                        {{ stateService.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.categoryField"
+                        (valueChange)="updateState(categoryAxisX, $event)"
+                    >
+                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
+                    </kendo-dropdownlist>
+                </fieldset>
+                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
+                    <legend class="k-form-legend">Series</legend>
+                    <kendo-grid
+                        #grid
+                        [kendoGridReactiveEditing]="createFormGroup"
+                        [kendoGridBinding]="stateService.state.series"
+                        [rowReorderable]="true"
+                        (rowReorder)="onRowReorder(grid)"
+                        (remove)="removeData($event)"
+                    >
+                        <ng-template kendoGridToolbarTemplate>
+                            <button
+                                kendoButton
+                                type="button"
+                                [svgIcon]="plusIcon"
+                                fillMode="flat"
+                                rounded="medium"
+                                [disabled]="isDisabled(grid)"
+                                (click)="addData()"
+                            >
+                                ADD
+                            </button>
+                        </ng-template>
+                        <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
+                        <kendo-grid-column field="name" title="Name"></kendo-grid-column>
+                        <kendo-grid-command-column [width]="40">
+                            <ng-template kendoGridCellTemplate>
+                                <button
+                                    [svgIcon]="trashIcon"
+                                    kendoGridRemoveCommand
+                                    fillMode="flat"
+                                    rounded="medium"
+                                    [disabled]="stateService.state.series.length < 2"
+                                ></button>
+                            </ng-template>
+                        </kendo-grid-command-column>
+                    </kendo-grid>
+                </fieldset>
+                <fieldset
+                    class="k-form-fieldset"
+                    *ngIf="stateService.seriesType === 'pie' || stateService.seriesType === 'scatter'"
+                >
+                    <legend class="k-form-legend">
+                        {{ stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.yField"
+                        (valueChange)="updateState(valueAxisY, $event)"
+                    >
+                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
+                    </kendo-dropdownlist>
+                </fieldset>
+            </form>
+        </kendo-expansionpanel>
+    `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: ReactiveEditingDirective, selector: "[kendoGridReactiveEditing]", inputs: ["kendoGridReactiveEditing"] }, { kind: "directive", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: RowReorderColumnComponent, selector: "kendo-grid-rowreorder-column", inputs: ["dragHandleIcon", "dragHandleSVGIcon"] }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneFormatTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chart-wizard-property-pane-data-tab',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <kendo-expansionpanel title="Configuration" [expanded]="true">
+            <form class="k-form k-form-md">
+                <fieldset class="k-form-fieldset">
+                    <legend class="k-form-legend">
+                        {{ stateService.seriesType === 'scatter' ? 'X Axis' : 'Category Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.categoryField"
+                        (valueChange)="updateState(categoryAxisX, $event)"
+                    >
+                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
+                    </kendo-dropdownlist>
+                </fieldset>
+                <fieldset class="k-form-fieldset" *ngIf="isCategorical(stateService.seriesType)">
+                    <legend class="k-form-legend">Series</legend>
+                    <kendo-grid
+                        #grid
+                        [kendoGridReactiveEditing]="createFormGroup"
+                        [kendoGridBinding]="stateService.state.series"
+                        [rowReorderable]="true"
+                        (rowReorder)="onRowReorder(grid)"
+                        (remove)="removeData($event)"
+                    >
+                        <ng-template kendoGridToolbarTemplate>
+                            <button
+                                kendoButton
+                                type="button"
+                                [svgIcon]="plusIcon"
+                                fillMode="flat"
+                                rounded="medium"
+                                [disabled]="isDisabled(grid)"
+                                (click)="addData()"
+                            >
+                                ADD
+                            </button>
+                        </ng-template>
+                        <kendo-grid-rowreorder-column [width]="40"></kendo-grid-rowreorder-column>
+                        <kendo-grid-column field="name" title="Name"></kendo-grid-column>
+                        <kendo-grid-command-column [width]="40">
+                            <ng-template kendoGridCellTemplate>
+                                <button
+                                    [svgIcon]="trashIcon"
+                                    kendoGridRemoveCommand
+                                    fillMode="flat"
+                                    rounded="medium"
+                                    [disabled]="stateService.state.series.length < 2"
+                                ></button>
+                            </ng-template>
+                        </kendo-grid-command-column>
+                    </kendo-grid>
+                </fieldset>
+                <fieldset
+                    class="k-form-fieldset"
+                    *ngIf="stateService.seriesType === 'pie' || stateService.seriesType === 'scatter'"
+                >
+                    <legend class="k-form-legend">
+                        {{ stateService.seriesType === 'scatter' ? 'Y Axis' : 'Value Axis' }}
+                    </legend>
+                    <kendo-dropdownlist
+                        [data]="stateService.state.columns"
+                        [value]="stateService.state.yField"
+                        (valueChange)="updateState(valueAxisY, $event)"
+                    >
+                        <ng-template kendoDropDownListValueTemplate> Current Item </ng-template>
+                    </kendo-dropdownlist>
+                </fieldset>
+            </form>
+        </kendo-expansionpanel>
+    `,
+                    standalone: true,
+                    imports: [
+                        ExpansionPanelComponent,
+                        DropDownListComponent,
+                        ValueTemplateDirective,
+                        NgIf,
+                        GridComponent,
+                        ReactiveEditingDirective,
+                        DataBindingDirective,
+                        ToolbarTemplateDirective,
+                        ButtonComponent,
+                        RowReorderColumnComponent,
+                        ColumnComponent,
+                        CommandColumnComponent,
+                        CellTemplateDirective,
+                        GridToolbarFocusableDirective,
+                        FocusableDirective,
+                        RemoveCommandDirective
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: StateService }, { type: i2$1.FormBuilder }]; } });
+
+/**
+ * @hidden
+ */
+class ChartWizardSeriesTypeButtonComponent {
+    constructor(stateService) {
+        this.stateService = stateService;
+        this.stack = false;
+    }
+    onSelect() {
+        this.stateService.seriesType = this.seriesType;
+        this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
+        this.stateService.currentSeries = {};
+        if (this.stack) {
+            this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, this.stack);
+        }
+    }
+    isSelected() {
+        var _a, _b, _c;
+        if (((_a = this.stack) === null || _a === void 0 ? void 0 : _a.type) === '100%') {
+            return ((_b = this.stack) === null || _b === void 0 ? void 0 : _b.type) === ((_c = this.stateService.state.series[0].stack) === null || _c === void 0 ? void 0 : _c.type);
+        }
+        return (this.stateService.state.seriesType === this.seriesType &&
+            this.stateService.state.series[0].stack === this.stack);
+    }
+}
+ChartWizardSeriesTypeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, deps: [{ token: StateService }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardSeriesTypeButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardSeriesTypeButtonComponent, isStandalone: true, selector: "kendo-chart-wizard-series-type-button", inputs: { title: "title", chartTypeIcon: "chartTypeIcon", stack: "stack", seriesType: "seriesType" }, ngImport: i0, template: `
+        <div class="k-icon-text-wrapper" [class.k-selected]="isSelected()" (click)="onSelect()">
+            <div class="k-icon-background-area">
+                <kendo-svgicon [icon]="chartTypeIcon" size="xlarge" themeColor="secondary"> </kendo-svgicon>
+            </div>
+            {{ title }}
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardSeriesTypeButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chart-wizard-series-type-button',
+                    template: `
+        <div class="k-icon-text-wrapper" [class.k-selected]="isSelected()" (click)="onSelect()">
+            <div class="k-icon-background-area">
+                <kendo-svgicon [icon]="chartTypeIcon" size="xlarge" themeColor="secondary"> </kendo-svgicon>
+            </div>
+            {{ title }}
+        </div>
+    `,
+                    standalone: true,
+                    imports: [SVGIconComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: StateService }]; }, propDecorators: { title: [{
+                type: Input
+            }], chartTypeIcon: [{
+                type: Input
+            }], stack: [{
+                type: Input
+            }], seriesType: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class ChartWizardPropertyPaneChartTabComponent {
+    constructor(stateService, cdr, localization) {
+        this.stateService = stateService;
+        this.cdr = cdr;
+        this.localization = localization;
+        this.exportIcon = exportIcon;
+        this.chartBarClusteredIcon = chartBarClusteredIcon;
+        this.chartBarStackedIcon = chartBarStackedIcon;
+        this.chartBarStacked100Icon = chartBarStacked100Icon;
+        this.chartPieIcon = chartPieIcon;
+        this.chartColumnClusteredIcon = chartColumnClusteredIcon;
+        this.chartColumnStackedIcon = chartColumnStackedIcon;
+        this.chartColumnStacked100Icon = chartColumnStacked100Icon;
+        this.chartLineIcon = chartLineIcon;
+        this.chartLineStackedIcon = chartLineStackedIcon;
+        this.chartLineStacked100Icon = chartLineStacked100Icon;
+        this.chartScatterIcon = chartScatterIcon;
+    }
+    isExpanded(type) {
+        return this.stateService.state.seriesType === type;
+    }
+    ngAfterViewChecked() {
+        this.localization.changes.subscribe(() => {
+            this.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.localization.changes.unsubscribe();
+    }
+    detectChanges() {
+        this.cdr.detectChanges();
+    }
+}
+ChartWizardPropertyPaneChartTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneChartTabComponent, deps: [{ token: StateService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardPropertyPaneChartTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardPropertyPaneChartTabComponent, isStandalone: true, selector: "kendo-chart-wizard-property-pane-chart-tab", ngImport: i0, template: `
+        <kendo-expansionpanel title="Bar Chart" [expanded]="isExpanded('bar')">
+            <div class="k-chart-types-wrapper">
+                <kendo-chart-wizard-series-type-button
+                    title="Bar"
+                    [chartTypeIcon]="chartBarClusteredIcon"
+                    seriesType="bar"
+                    [stack]="false"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="Stacked Bar"
+                    [chartTypeIcon]="chartBarStackedIcon"
+                    seriesType="bar"
+                    [stack]="true"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="100% Stacked Bar"
+                    [chartTypeIcon]="chartBarStacked100Icon"
+                    seriesType="bar"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chart-wizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Pie Chart" [expanded]="isExpanded('pie')">
+            <div class="k-chart-types-wrapper">
+                <kendo-chart-wizard-series-type-button
+                    title="Pie"
+                    [chartTypeIcon]="chartPieIcon"
+                    seriesType="pie"
+                    [stack]="undefined"
+                >
+                </kendo-chart-wizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Column Chart" [expanded]="isExpanded('column')">
+            <div class="k-chart-types-wrapper">
+                <kendo-chart-wizard-series-type-button
+                    title="Column"
+                    [chartTypeIcon]="chartColumnClusteredIcon"
+                    seriesType="column"
+                    [stack]="false"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="Stacked Column"
+                    [chartTypeIcon]="chartColumnStackedIcon"
+                    seriesType="column"
+                    [stack]="true"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="100% Stacked Column"
+                    [chartTypeIcon]="chartColumnStacked100Icon"
+                    seriesType="column"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chart-wizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Line Chart" [expanded]="isExpanded('line')">
+            <div class="k-chart-types-wrapper">
+                <kendo-chart-wizard-series-type-button
+                    title="Line"
+                    [chartTypeIcon]="chartLineIcon"
+                    seriesType="line"
+                    [stack]="false"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="Stacked Line"
+                    [chartTypeIcon]="chartLineStackedIcon"
+                    seriesType="line"
+                    [stack]="true"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="100% Line Column"
+                    [chartTypeIcon]="chartLineStacked100Icon"
+                    seriesType="line"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chart-wizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Scatter Chart" [expanded]="isExpanded('scatter')">
+            <div class="k-chart-types-wrapper">
+                <kendo-chart-wizard-series-type-button
+                    title="Scatter"
+                    [chartTypeIcon]="chartScatterIcon"
+                    seriesType="scatter"
+                    [stack]="false"
+                >
+                </kendo-chart-wizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+    `, isInline: true, dependencies: [{ kind: "component", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: ["title", "subtitle", "disabled", "expanded", "svgExpandIcon", "svgCollapseIcon", "expandIcon", "collapseIcon", "animation"], outputs: ["expandedChange", "action", "expand", "collapse"], exportAs: ["kendoExpansionPanel"] }, { kind: "component", type: ChartWizardSeriesTypeButtonComponent, selector: "kendo-chart-wizard-series-type-button", inputs: ["title", "chartTypeIcon", "stack", "seriesType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardPropertyPaneChartTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chart-wizard-property-pane-chart-tab',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+        <kendo-expansionpanel title="Bar Chart" [expanded]="isExpanded('bar')">
+            <div class="k-chart-types-wrapper">
+                <kendo-chart-wizard-series-type-button
+                    title="Bar"
+                    [chartTypeIcon]="chartBarClusteredIcon"
+                    seriesType="bar"
+                    [stack]="false"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="Stacked Bar"
+                    [chartTypeIcon]="chartBarStackedIcon"
+                    seriesType="bar"
+                    [stack]="true"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="100% Stacked Bar"
+                    [chartTypeIcon]="chartBarStacked100Icon"
+                    seriesType="bar"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chart-wizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Pie Chart" [expanded]="isExpanded('pie')">
+            <div class="k-chart-types-wrapper">
+                <kendo-chart-wizard-series-type-button
+                    title="Pie"
+                    [chartTypeIcon]="chartPieIcon"
+                    seriesType="pie"
+                    [stack]="undefined"
+                >
+                </kendo-chart-wizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Column Chart" [expanded]="isExpanded('column')">
+            <div class="k-chart-types-wrapper">
+                <kendo-chart-wizard-series-type-button
+                    title="Column"
+                    [chartTypeIcon]="chartColumnClusteredIcon"
+                    seriesType="column"
+                    [stack]="false"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="Stacked Column"
+                    [chartTypeIcon]="chartColumnStackedIcon"
+                    seriesType="column"
+                    [stack]="true"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="100% Stacked Column"
+                    [chartTypeIcon]="chartColumnStacked100Icon"
+                    seriesType="column"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chart-wizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Line Chart" [expanded]="isExpanded('line')">
+            <div class="k-chart-types-wrapper">
+                <kendo-chart-wizard-series-type-button
+                    title="Line"
+                    [chartTypeIcon]="chartLineIcon"
+                    seriesType="line"
+                    [stack]="false"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="Stacked Line"
+                    [chartTypeIcon]="chartLineStackedIcon"
+                    seriesType="line"
+                    [stack]="true"
+                >
+                </kendo-chart-wizard-series-type-button>
+                <kendo-chart-wizard-series-type-button
+                    title="100% Line Column"
+                    [chartTypeIcon]="chartLineStacked100Icon"
+                    seriesType="line"
+                    [stack]="{ type: '100%' }"
+                >
+                </kendo-chart-wizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+        <kendo-expansionpanel title="Scatter Chart" [expanded]="isExpanded('scatter')">
+            <div class="k-chart-types-wrapper">
+                <kendo-chart-wizard-series-type-button
+                    title="Scatter"
+                    [chartTypeIcon]="chartScatterIcon"
+                    seriesType="scatter"
+                    [stack]="false"
+                >
+                </kendo-chart-wizard-series-type-button>
+            </div>
+        </kendo-expansionpanel>
+    `,
+                    standalone: true,
+                    imports: [ExpansionPanelComponent, ChartWizardSeriesTypeButtonComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: StateService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+class PreventableEvent {
+    constructor() {
+        this.prevented = false;
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    preventDefault() {
+        this.prevented = true;
+    }
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}
+
+/**
+ * Arguments for the `export` event on the Chart Wizard.
+ */
+class ExportEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(chart, exportOptions) {
+        super();
+        this.chart = chart;
+        this.exportOptions = exportOptions;
+    }
+}
+
+/**
+ * The Chart Wizard component.
+ * ```
+ */
+class ChartWizardComponent {
+    constructor(localization, stateService) {
+        this.localization = localization;
+        this.stateService = stateService;
+        /**
+         * @hidden
+         */
+        this.showLicenseWatermark = false;
+        /**
+         * @hidden
+         */
+        this.exportIcon = exportIcon;
+        /**
+         * @hidden
+         */
+        this.exportDropdownItems = [
+            {
+                text: 'PDF File',
+                svgIcon: filePdfIcon,
+            },
+            {
+                text: 'SVG File',
+                svgIcon: fileIcon,
+            },
+            {
+                text: 'PNG File',
+                svgIcon: fileImageIcon,
+            },
+        ];
+        /**
+         * Fires when the Chart Wizard Window is to be close.
+         */
+        this.close = new EventEmitter();
+        /**
+         * Fires when the Chart is about to be exported. Can be prevented.
+         */
+        this.export = new EventEmitter();
+        this.subscription = new Subscription();
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.stateService.direction = this.localization.rtl ? 'rtl' : 'ltr';
+    }
+    get dir() {
+        return this.stateService.direction;
+    }
+    ngAfterViewInit() {
+        this.subscription.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.stateService.direction = rtl ? 'rtl' : 'ltr';
+        }));
+    }
+    ngOnChanges(changes) {
+        var _a;
+        if (changes['data']) {
+            const data = changes['data'].currentValue;
+            const clonedData = structuredClone(data);
+            this.stateService.data = clonedData;
+            this.stateService.state = createState(clonedData, this.stateService.seriesType);
+        }
+        if (changes['defaultState']) {
+            const defaultState = changes['defaultState'].currentValue;
+            if (defaultState.seriesType) {
+                this.stateService.seriesType = defaultState.seriesType;
+                this.stateService.state = mergeStates(this.stateService.state, createState(this.stateService.data, this.stateService.seriesType));
+            }
+            this.stateService.currentSeries = {};
+            if (typeof defaultState.stack !== 'undefined') {
+                this.stateService.state = updateState(this.stateService.state, ActionTypes.stacked, defaultState.stack);
+            }
+            (_a = this.propertyPane) === null || _a === void 0 ? void 0 : _a.detectChanges();
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    /**
+     * @hidden
+     */
+    onExport(exportType) {
+        var _a, _b, _c;
+        const args = new ExportEvent(this.chart, this.exportOptions);
+        this.export.emit(args);
+        if (args.isDefaultPrevented()) {
+            return;
+        }
+        switch (exportType.text) {
+            case 'PDF File':
+                exportPDF(this.chart.exportVisual(), (_a = this.exportOptions) === null || _a === void 0 ? void 0 : _a.pdf).then((dataURI) => {
+                    var _a;
+                    saveAs(dataURI, ((_a = this.exportOptions) === null || _a === void 0 ? void 0 : _a.fileName) || 'chart');
+                });
+                break;
+            case 'SVG File':
+                this.chart.exportSVG((_b = this.exportOptions) === null || _b === void 0 ? void 0 : _b.image).then((dataURI) => {
+                    var _a;
+                    saveAs(dataURI, ((_a = this.exportOptions) === null || _a === void 0 ? void 0 : _a.fileName) || 'chart');
+                });
+                break;
+            case 'PNG File':
+                this.chart.exportImage((_c = this.exportOptions) === null || _c === void 0 ? void 0 : _c.image).then((dataURI) => {
+                    var _a;
+                    saveAs(dataURI, ((_a = this.exportOptions) === null || _a === void 0 ? void 0 : _a.fileName) || 'chart');
+                });
+                break;
+        }
+    }
+}
+ChartWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardComponent, deps: [{ token: i2.LocalizationService }, { token: StateService }], target: i0.ɵɵFactoryTarget.Component });
+ChartWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardComponent, isStandalone: true, selector: "kendo-chart-wizard", inputs: { data: "data", defaultState: "defaultState", exportOptions: "exportOptions" }, outputs: { close: "close", export: "export" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.chartwizard',
+        },
+        StateService
+    ], viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true }, { propertyName: "propertyPane", first: true, predicate: ChartWizardPropertyPaneChartTabComponent, descendants: true }], exportAs: ["kendoChartWizard"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container
+            kendoChartWizardLocalizedMessages
+            i18n-sampleMessage="kendo.chartwizard.sampleMessage|Sample description"
+            sampleMessage="foo"
+        ></ng-container>
+        <kendo-window
+            class="k-chart-wizard"
+            title="Chart Wizard"
+            [width]="1000"
+            [height]="700"
+            [resizable]="true"
+            (close)="close.emit()"
+        >
+            <kendo-splitter class="k-chart-wizard-splitter">
+                <kendo-splitter-pane class="k-chart-wizard-preview-pane">
+                    <div class="k-preview-pane-header">
+                        <kendo-dropdownbutton
+                            [svgIcon]="exportIcon"
+                            [data]="exportDropdownItems"
+                            textField="text"
+                            fillMode="flat"
+                            (itemClick)="onExport($event)"
+                        >
+                            Export
+                        </kendo-dropdownbutton>
+                    </div>
+                    <div class="k-preview-pane-content">
+                        <kendo-chart [transitions]="false">
+                            <kendo-chart-title
+                                [text]="stateService.state.title?.text"
+                                [font]="stateService.state.title?.font"
+                                [color]="stateService.state.title?.color"
+                            ></kendo-chart-title>
+                            <kendo-chart-subtitle
+                                [text]="stateService.state.subtitle?.text"
+                                [font]="stateService.state.subtitle?.font"
+                                [color]="stateService.state.subtitle?.color"
+                            ></kendo-chart-subtitle>
+                            <kendo-chart-area
+                                [background]="stateService.state.area?.background"
+                                [margin]="stateService.state.area?.margin"
+                            >
+                            </kendo-chart-area>
+                            <kendo-chart-category-axis *ngIf="stateService.state.categoryAxis">
+                                <kendo-chart-category-axis-item
+                                    *ngFor="let axis of stateService.state.categoryAxis"
+                                    [categories]="axis.categories"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                    [reverse]="axis.reverse"
+                                >
+                                </kendo-chart-category-axis-item>
+                                <kendo-chart-value-axis *ngIf="stateService.state.valueAxis">
+                                    <kendo-chart-value-axis-item
+                                        *ngFor="let axis of stateService.state.valueAxis"
+                                        [title]="{
+                                            text: axis.title?.text,
+                                            font: axis.title?.font,
+                                            color: axis.title?.color
+                                        }"
+                                        [labels]="{
+                                            rotation: { angle: $any(axis.labels)?.rotation },
+                                            font: axis.labels?.font,
+                                            color: axis.labels?.color
+                                        }"
+                                    >
+                                    </kendo-chart-value-axis-item>
+                                </kendo-chart-value-axis>
+                            </kendo-chart-category-axis>
+                            <kendo-chart-series>
+                                <kendo-chart-series-item
+                                    *ngFor="let series of stateService.state.series"
+                                    [type]="series.type"
+                                    [data]="series.data"
+                                    [stack]="series.stack"
+                                    [field]="series.field"
+                                    [categoryField]="series.categoryField"
+                                    [name]="series.name"
+                                    [color]="series.color"
+                                    [labels]="{ visible: series.labels?.visible }"
+                                    [xField]="series.xField"
+                                    [yField]="series.yField"
+                                >
+                                </kendo-chart-series-item>
+                            </kendo-chart-series>
+                            <kendo-chart-x-axis>
+                                <kendo-chart-x-axis-item
+                                    *ngFor="let axis of stateService.state.categoryAxis"
+                                    [categories]="axis.categories"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                    [reverse]="axis.reverse"
+                                >
+                                </kendo-chart-x-axis-item>
+                            </kendo-chart-x-axis>
+                            <kendo-chart-y-axis>
+                                <kendo-chart-y-axis-item
+                                    *ngFor="let axis of stateService.state.valueAxis"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                >
+                                </kendo-chart-y-axis-item>
+                            </kendo-chart-y-axis>
+                            <kendo-chart-legend
+                                [visible]="stateService.state.legend?.visible"
+                                [position]="stateService.state.legend?.position"
+                                [labels]="stateService.state.legend?.labels"
+                            >
+                            </kendo-chart-legend>
+                        </kendo-chart>
+                    </div>
+                </kendo-splitter-pane>
+                <kendo-splitter-pane class="k-chart-wizard-property-pane" [collapsible]="true" size="30%">
+                    <kendo-tabstrip [keepTabContent]="true">
+                        <kendo-tabstrip-tab title="Chart" [selected]="true">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-chart-tab>
+                                </kendo-chart-wizard-property-pane-chart-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                        <kendo-tabstrip-tab title="Data">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-data-tab> </kendo-chart-wizard-property-pane-data-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                        <kendo-tabstrip-tab title="Format">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-format-tab>
+                                </kendo-chart-wizard-property-pane-format-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                    </kendo-tabstrip>
+                </kendo-splitter-pane>
+            </kendo-splitter>
+            <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+        </kendo-window>
+    `, isInline: true, dependencies: [{ kind: "component", type: WindowComponent, selector: "kendo-window", inputs: ["autoFocusedElement", "title", "draggable", "resizable", "themeColor", "keepContent", "state", "minWidth", "minHeight", "width", "height", "top", "left"], outputs: ["dragStart", "dragEnd", "resizeStart", "resizeEnd", "close", "widthChange", "heightChange", "topChange", "leftChange", "stateChange"], exportAs: ["kendoWindow"] }, { kind: "component", type: SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "splitbarWidth", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { kind: "component", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "component", type: TitleComponent, selector: "kendo-chart-title", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "description", "visible"] }, { kind: "component", type: SubtitleComponent, selector: "kendo-chart-subtitle", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "visible"] }, { kind: "component", type: ChartAreaComponent, selector: "kendo-chart-area", inputs: ["background", "border", "height", "margin", "opacity", "width"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels"] }, { kind: "component", type: ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "style", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: XAxisComponent, selector: "kendo-chart-x-axis" }, { kind: "component", type: XAxisItemComponent, selector: "kendo-chart-x-axis-item", inputs: ["axisCrossingValue", "background", "baseUnit", "categories", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: YAxisComponent, selector: "kendo-chart-y-axis" }, { kind: "component", type: YAxisItemComponent, selector: "kendo-chart-y-axis-item", inputs: ["axisCrossingValue", "background", "baseUnit", "categories", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: ChartWizardPropertyPaneChartTabComponent, selector: "kendo-chart-wizard-property-pane-chart-tab" }, { kind: "component", type: ChartWizardPropertyPaneFormatTabComponent, selector: "kendo-chart-wizard-property-pane-data-tab" }, { kind: "component", type: ChartWizardPropertyPaneDataTabComponent, selector: "kendo-chart-wizard-property-pane-format-tab" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'kendoChartWizard',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.chartwizard',
+                        },
+                        StateService
+                    ],
+                    selector: 'kendo-chart-wizard',
+                    template: `
+        <ng-container
+            kendoChartWizardLocalizedMessages
+            i18n-sampleMessage="kendo.chartwizard.sampleMessage|Sample description"
+            sampleMessage="foo"
+        ></ng-container>
+        <kendo-window
+            class="k-chart-wizard"
+            title="Chart Wizard"
+            [width]="1000"
+            [height]="700"
+            [resizable]="true"
+            (close)="close.emit()"
+        >
+            <kendo-splitter class="k-chart-wizard-splitter">
+                <kendo-splitter-pane class="k-chart-wizard-preview-pane">
+                    <div class="k-preview-pane-header">
+                        <kendo-dropdownbutton
+                            [svgIcon]="exportIcon"
+                            [data]="exportDropdownItems"
+                            textField="text"
+                            fillMode="flat"
+                            (itemClick)="onExport($event)"
+                        >
+                            Export
+                        </kendo-dropdownbutton>
+                    </div>
+                    <div class="k-preview-pane-content">
+                        <kendo-chart [transitions]="false">
+                            <kendo-chart-title
+                                [text]="stateService.state.title?.text"
+                                [font]="stateService.state.title?.font"
+                                [color]="stateService.state.title?.color"
+                            ></kendo-chart-title>
+                            <kendo-chart-subtitle
+                                [text]="stateService.state.subtitle?.text"
+                                [font]="stateService.state.subtitle?.font"
+                                [color]="stateService.state.subtitle?.color"
+                            ></kendo-chart-subtitle>
+                            <kendo-chart-area
+                                [background]="stateService.state.area?.background"
+                                [margin]="stateService.state.area?.margin"
+                            >
+                            </kendo-chart-area>
+                            <kendo-chart-category-axis *ngIf="stateService.state.categoryAxis">
+                                <kendo-chart-category-axis-item
+                                    *ngFor="let axis of stateService.state.categoryAxis"
+                                    [categories]="axis.categories"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                    [reverse]="axis.reverse"
+                                >
+                                </kendo-chart-category-axis-item>
+                                <kendo-chart-value-axis *ngIf="stateService.state.valueAxis">
+                                    <kendo-chart-value-axis-item
+                                        *ngFor="let axis of stateService.state.valueAxis"
+                                        [title]="{
+                                            text: axis.title?.text,
+                                            font: axis.title?.font,
+                                            color: axis.title?.color
+                                        }"
+                                        [labels]="{
+                                            rotation: { angle: $any(axis.labels)?.rotation },
+                                            font: axis.labels?.font,
+                                            color: axis.labels?.color
+                                        }"
+                                    >
+                                    </kendo-chart-value-axis-item>
+                                </kendo-chart-value-axis>
+                            </kendo-chart-category-axis>
+                            <kendo-chart-series>
+                                <kendo-chart-series-item
+                                    *ngFor="let series of stateService.state.series"
+                                    [type]="series.type"
+                                    [data]="series.data"
+                                    [stack]="series.stack"
+                                    [field]="series.field"
+                                    [categoryField]="series.categoryField"
+                                    [name]="series.name"
+                                    [color]="series.color"
+                                    [labels]="{ visible: series.labels?.visible }"
+                                    [xField]="series.xField"
+                                    [yField]="series.yField"
+                                >
+                                </kendo-chart-series-item>
+                            </kendo-chart-series>
+                            <kendo-chart-x-axis>
+                                <kendo-chart-x-axis-item
+                                    *ngFor="let axis of stateService.state.categoryAxis"
+                                    [categories]="axis.categories"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                    [reverse]="axis.reverse"
+                                >
+                                </kendo-chart-x-axis-item>
+                            </kendo-chart-x-axis>
+                            <kendo-chart-y-axis>
+                                <kendo-chart-y-axis-item
+                                    *ngFor="let axis of stateService.state.valueAxis"
+                                    [title]="{
+                                        text: axis.title?.text,
+                                        font: axis.title?.font,
+                                        color: axis.title?.color
+                                    }"
+                                    [labels]="{
+                                        rotation: { angle: $any(axis.labels)?.rotation },
+                                        font: axis.labels?.font,
+                                        color: axis.labels?.color
+                                    }"
+                                >
+                                </kendo-chart-y-axis-item>
+                            </kendo-chart-y-axis>
+                            <kendo-chart-legend
+                                [visible]="stateService.state.legend?.visible"
+                                [position]="stateService.state.legend?.position"
+                                [labels]="stateService.state.legend?.labels"
+                            >
+                            </kendo-chart-legend>
+                        </kendo-chart>
+                    </div>
+                </kendo-splitter-pane>
+                <kendo-splitter-pane class="k-chart-wizard-property-pane" [collapsible]="true" size="30%">
+                    <kendo-tabstrip [keepTabContent]="true">
+                        <kendo-tabstrip-tab title="Chart" [selected]="true">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-chart-tab>
+                                </kendo-chart-wizard-property-pane-chart-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                        <kendo-tabstrip-tab title="Data">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-data-tab> </kendo-chart-wizard-property-pane-data-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                        <kendo-tabstrip-tab title="Format">
+                            <ng-template kendoTabContent>
+                                <kendo-chart-wizard-property-pane-format-tab>
+                                </kendo-chart-wizard-property-pane-format-tab>
+                            </ng-template>
+                        </kendo-tabstrip-tab>
+                    </kendo-tabstrip>
+                </kendo-splitter-pane>
+            </kendo-splitter>
+            <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+        </kendo-window>
+    `,
+                    standalone: true,
+                    imports: [
+                        WindowComponent,
+                        SplitterComponent,
+                        SplitterPaneComponent,
+                        DropDownButtonComponent,
+                        ChartComponent,
+                        TitleComponent,
+                        SubtitleComponent,
+                        ChartAreaComponent,
+                        NgIf,
+                        CategoryAxisComponent,
+                        NgFor,
+                        CategoryAxisItemComponent,
+                        ValueAxisComponent,
+                        ValueAxisItemComponent,
+                        SeriesComponent,
+                        SeriesItemComponent,
+                        XAxisComponent,
+                        XAxisItemComponent,
+                        YAxisComponent,
+                        YAxisItemComponent,
+                        LegendComponent,
+                        TabStripComponent,
+                        TabStripTabComponent,
+                        TabContentDirective,
+                        ChartWizardPropertyPaneChartTabComponent,
+                        ChartWizardPropertyPaneFormatTabComponent,
+                        ChartWizardPropertyPaneDataTabComponent,
+                        WatermarkOverlayComponent
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i2.LocalizationService }, { type: StateService }]; }, propDecorators: { data: [{
+                type: Input
+            }], defaultState: [{
+                type: Input
+            }], exportOptions: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], export: [{
+                type: Output
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], chart: [{
+                type: ViewChild,
+                args: [ChartComponent]
+            }], propertyPane: [{
+                type: ViewChild,
+                args: [ChartWizardPropertyPaneChartTabComponent]
+            }] } });
+
+// TODO: Extract to kendo-charts
+/**
+ * Maps data rows to the Chart Wizard data format.
+ *
+ * @returns collection that can be used as Chart Wizard.
+ */
+function getWizardDataFromDataRows(dataRows) {
+    const result = [];
+    dataRows.forEach(item => {
+        const { dataItem, dataColumns } = item;
+        const row = [];
+        dataColumns.forEach(column => {
+            row.push({
+                field: column.title || column.field,
+                value: getter(column.field)(dataItem)
+            });
+        });
+        result.push(row);
+    });
+    return result;
+}
+// End: Extract to kendo-charts
+
+/**
+ * Maps the Grid selectedKeys to a more general DataRows type to be displayed in the Chart Wizard.
+ *
+ * The selectedKeys can be either row keys or cell keys.
+ *
+ * @returns DataRow array that can be passed to getWizardDataFromDataRows in order to bind the Chart Wizard.
+ */
+function getGridSelectedRows(args) {
+    const { grid, data, selectedKeys, selectionKey, columnKey } = args;
+    const columns = [...grid.leafColumns];
+    const allColumns = columns.map((column) => ({ field: column.field, title: column.title }));
+    const selectedColumns = new Map();
+    let getItemByKey;
+    if (selectionKey) {
+        const idGetter = getter(selectionKey);
+        const dataMap = new Map(data.map((item) => [idGetter(item), item]));
+        getItemByKey = itemKey => dataMap.get(itemKey);
+    }
+    else {
+        getItemByKey = itemIndex => data[itemIndex];
+    }
+    let getColumnByColumnKey = key => columns[key];
+    if (typeof columnKey === "function") {
+        const columnMap = new Map(columns.map((col, colIndex) => [columnKey(col, colIndex), col]));
+        getColumnByColumnKey = key => columnMap.get(key);
+    }
+    selectedKeys.forEach(item => {
+        if (isPresent(item.columnKey)) {
+            const itemColumns = selectedColumns.get(item.itemKey) || [];
+            const column = getColumnByColumnKey(item.columnKey);
+            itemColumns.push({ field: column.field, title: column.title });
+            selectedColumns.set(item.itemKey, itemColumns);
+        }
+        else {
+            selectedColumns.set(item, allColumns);
+        }
+    });
+    return [...selectedColumns.entries()].map(([itemKey, dataColumns]) => ({
+        dataItem: getItemByKey(itemKey),
+        dataColumns
+    }));
+}
+
+/**
+ * Maps the Grid selectedKeys to data to be displayed in the Chart Wizard.
+ *
+ * Supports both row and cell selection.
+ * @returns collection that can be used as Chart Wizard.
+*/
+const getWizardDataFromGridSelection = (args) => getWizardDataFromDataRows(getGridSelectedRows(args));
+
+/**
+ * A directive which binds the Chart Wizard from the selection state of the Grid
+ * ([see example](slug:integration_with_chart).
+ */
+class ChartWizardGridBindingDirective {
+    constructor(grid) {
+        this.grid = grid;
+        /**
+         * Defines the collection that will store the Chart Wizard data.
+         *
+         * @default []
+         */
+        this.chartWizardData = [];
+        /**
+         * Fires when the `chartWizardData` collection has been updated.
+         */
+        this.chartWizardDataChange = new EventEmitter();
+    }
+    ngOnInit() {
+        if (!this.selectionKey || !this.data) {
+            throw new Error('The [kendoChartWizardGridBinding] directive requires that [kendoGridBinding] and [kendoGridSelectBy] are set. ' +
+                'See the Grid documentation for an example on how to use the Chart Wizard without the directive.');
+        }
+        if (typeof this.selectionKey === 'function') {
+            throw new Error('The [kendoChartWizardGridBinding] directive supports only strings as [kendoGridSelectBy] selection key.');
+        }
+    }
+    onSelectionChange(selectedKeys) {
+        this.chartWizardData = getWizardDataFromGridSelection({
+            grid: this.grid,
+            data: this.data,
+            selectedKeys,
+            selectionKey: this.selectionKey
+        });
+        this.chartWizardDataChange.emit(this.chartWizardData);
+    }
+}
+ChartWizardGridBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardGridBindingDirective, deps: [{ token: GridComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ChartWizardGridBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ChartWizardGridBindingDirective, isStandalone: true, selector: "[kendoChartWizardGridBinding]", inputs: { chartWizardData: "chartWizardData", data: ["kendoGridBinding", "data"], selectionKey: ["kendoGridSelectBy", "selectionKey"], columnKey: "columnKey" }, outputs: { chartWizardDataChange: "chartWizardDataChange" }, host: { listeners: { "selectedKeysChange": "onSelectionChange($event)" } }, exportAs: ["kendoChartWizardGridBinding"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardGridBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChartWizardGridBinding]',
+                    exportAs: 'kendoChartWizardGridBinding',
+                    standalone: true
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1.GridComponent, decorators: [{
+                        type: Inject,
+                        args: [GridComponent]
+                    }] }];
+    }, propDecorators: { chartWizardData: [{
+                type: Input
+            }], chartWizardDataChange: [{
+                type: Output
+            }], data: [{
+                type: Input,
+                args: ['kendoGridBinding']
+            }], selectionKey: [{
+                type: Input,
+                args: ['kendoGridSelectBy']
+            }], columnKey: [{
+                type: Input
+            }], onSelectionChange: [{
+                type: HostListener,
+                args: ['selectedKeysChange', ['$event']]
+            }] } });
+
+/**
+ * Utility array that contains all `@progress/kendo-angular-chart-wizard` related components and directives.
+ */
+const KENDO_CHARTWIZARD = [
+    ChartWizardComponent,
+    ChartWizardGridBindingDirective
+];
+
+//IMPORTANT: NgModule export kept for backwards compatibility
+/**
+ * A [module](link:site.data.urls.angular['ngmoduleapi']) that includes the Chart Wizard component and directives.
+ *
+ * Imports the ChartWizardModule into your application
+ * [root module](link:site.data.urls.angular['ngmodules']#angular-modularity) or any other sub-module
+ * that will use the Chart Wizard component.
+ */
+class ChartWizardModule {
+}
+ChartWizardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChartWizardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardModule, imports: [ChartWizardComponent, ChartWizardGridBindingDirective], exports: [ChartWizardComponent, ChartWizardGridBindingDirective] });
+ChartWizardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardModule, providers: [
+        ThemeService,
+        PopupService,
+        ResizeBatchService,
+        IconsService,
+        DialogContainerService,
+        DialogService,
+        WindowService,
+        WindowContainerService
+    ], imports: [ChartWizardComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartWizardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...KENDO_CHARTWIZARD],
+                    exports: [...KENDO_CHARTWIZARD],
+                    providers: [
+                        ThemeService,
+                        PopupService,
+                        ResizeBatchService,
+                        IconsService,
+                        DialogContainerService,
+                        DialogService,
+                        WindowService,
+                        WindowContainerService
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChartWizardComponent, ChartWizardGridBindingDirective, ChartWizardModule, ExportEvent, KENDO_CHARTWIZARD, getGridSelectedRows, getWizardDataFromDataRows, getWizardDataFromGridSelection };
+