@progress/kendo-react-chart-wizard 8.2.0-develop.38

package/ChartWizard.mjs

@@ -0,0 +1,946 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as e from "react";
+import { Window as In } from "@progress/kendo-react-dialogs";
+import { Chart as Nn, ChartTitle as wn, ChartSubtitle as Pn, ChartArea as Vn, ChartCategoryAxis as Bn, ChartCategoryAxisItem as Mn, ChartValueAxis as Rn, ChartValueAxisItem as Dn, ChartSeries as Kn, ChartSeriesItem as On, ChartXAxis as Xn, ChartXAxisItem as Gn, ChartYAxis as Hn, ChartYAxisItem as Yn, ChartLegend as jn } from "@progress/kendo-react-charts";
+import { Splitter as Un, TabStrip as qn, TabStripTab as Y, ExpansionPanel as S, ExpansionPanelContent as v } from "@progress/kendo-react-layout";
+import { DropDownButton as Jn } from "@progress/kendo-react-buttons";
+import { exportIcon as Qn, filePdfIcon as Zn, fileIcon as _n, fileImageIcon as $n, chartBarClusteredIcon as er, chartBarStackedIcon as tr, chartBarStacked100Icon as ar, chartPieIcon as lr, chartColumnClusteredIcon as nr, chartColumnStackedIcon as rr, chartColumnStacked100Icon as or, chartLineIcon as ir, chartLineStackedIcon as cr, chartLineStacked100Icon as sr, chartScatterIcon as dr } from "@progress/kendo-svg-icons";
+import { Reveal as L } from "@progress/kendo-react-animation";
+import { DropDownList as B, ComboBox as E } from "@progress/kendo-react-dropdowns";
+import { SeriesGrid as gr } from "./SeriesGrid.mjs";
+import { NumericTextBox as M, ColorPicker as N, Input as j, Checkbox as Ze, Switch as ur } from "@progress/kendo-react-inputs";
+import { Label as Ja } from "@progress/kendo-react-labels";
+import { createInitialState as mr, mergeStates as z, createState as y, updateState as s, ActionTypes as c, isCategorical as _e, fontNames as A, parseFont as k, fontSizes as p } from "./chart-wizard-state.mjs";
+import { classNames as hr, SvgIcon as xr } from "@progress/kendo-react-common";
+import { FormElement as P, FieldWrapper as Cr } from "@progress/kendo-react-form";
+import { useLocalization as br } from "@progress/kendo-react-intl";
+import { chartWizardFormatTitleChartTitle as $e, messages as n, chartWizardFormatTitleChartSubtitle as et, chartWizardFormatLegendPositionTop as tt, chartWizardFormatLegendPositionBottom as at, chartWizardFormatLegendPositionLeft as lt, chartWizardFormatLegendPositionRight as nt, chartWizardFormatSeriesAllSeries as rt, chartWizardFormatValueAxisLabelsFormatText as ot, chartWizardFormatValueAxisLabelsFormatNumber as it, chartWizardFormatValueAxisLabelsFormatCurrency as ct, chartWizardFormatValueAxisLabelsFormatPercent as st, chartWizardWindowTitle as dt, chartWizardExportButton as gt, chartWizardExportPDFButton as ut, chartWizardExportSVGButton as mt, chartWizardExportPNGButton as ht, chartWizardTabChart as xt, chartWizardChartBarChart as Ct, chartWizardChartBarChartBar as bt, chartWizardChartBarChartStackedBar as St, chartWizardChartBarChart100StackedBar as vt, chartWizardChartPieChart as Lt, chartWizardChartPieChartPie as Et, chartWizardChartColumnChart as At, chartWizardChartColumnChartColumn as kt, chartWizardChartColumnChartStackedColumn as pt, chartWizardChartColumnChart100StackedColumn as Ft, chartWizardChartLineChart as ft, chartWizardChartLineChartLine as zt, chartWizardChartLineChartStackedLine as yt, chartWizardChartLineChart100StackedLine as Tt, chartWizardChartScatterChart as Wt, chartWizardChartScatterChartScatter as It, chartWizardTabData as Nt, chartWizardDataConfiguration as wt, chartWizardDataConfigurationXAxis as Pt, chartWizardDataConfigurationCategoryAxis as Vt, chartWizardDataConfigurationSeries as Bt, chartWizardDataConfigurationValueAxis as Mt, chartWizardTabFormat as Rt, chartWizardFormatChartArea as Dt, chartWizardFormatChartAreaMargins as Kt, chartWizardFormatChartAreaMarginsLeft as Ot, chartWizardFormatChartAreaMarginsAuto as w, chartWizardFormatChartAreaMarginsRight as Xt, chartWizardFormatChartAreaMarginsTop as Gt, chartWizardFormatChartAreaMarginsBottom as Ht, chartWizardFormatChartAreaBackground as Yt, chartWizardFormatChartAreaBackgroundColor as jt, chartWizardFormatTitle as Ut, chartWizardFormatTitleApplyTo as qt, chartWizardFormatTitleLabel as Jt, chartWizardFormatTitleFont as Qt, chartWizardFormatTitleFontPlaceholder as Zt, chartWizardFormatTitleSize as _t, chartWizardFormatTitleSizePlaceholder as $t, chartWizardFormatTitleColor as ea, chartWizardFormatSeries as ta, chartWizardFormatSeriesApplyTo as aa, chartWizardFormatSeriesColor as la, chartWizardFormatSeriesShowLabels as na, chartWizardFormatLegend as ra, chartWizardFormatLegendShowLegend as oa, chartWizardFormatLegendFont as ia, chartWizardFormatLegendFontPlaceholder as ca, chartWizardFormatLegendSize as sa, chartWizardFormatLegendSizePlaceholder as da, chartWizardFormatLegendColor as ga, chartWizardFormatLegendPosition as ua, chartWizardFormatXAxis as ma, chartWizardFormatCategoryAxis as ha, chartWizardFormatCategoryAxisTitle as xa, chartWizardFormatCategoryAxisTitlePlaceholder as Ca, chartWizardFormatCategoryAxisTitleFont as ba, chartWizardFormatCategoryAxisTitleFontPlaceholder as Sa, chartWizardFormatCategoryAxisTitleSize as va, chartWizardFormatCategoryAxisTitleSizePlaceholder as La, chartWizardFormatCategoryAxisTitleColor as Ea, chartWizardFormatCategoryAxisLabels as Aa, chartWizardFormatCategoryAxisLabelsFont as ka, chartWizardFormatCategoryAxisLabelsFontPlaceholder as pa, chartWizardFormatCategoryAxisLabelsSize as Fa, chartWizardFormatCategoryAxisLabelsSizePlaceholder as fa, chartWizardFormatCategoryAxisLabelsColor as za, chartWizardFormatCategoryAxisLabelsRotation as ya, chartWizardFormatCategoryAxisLabelsRotationAuto as Ta, chartWizardFormatCategoryAxisLabelsReverseOrder as Wa, chartWizardFormatYAxis as Ia, chartWizardFormatValueAxis as Na, chartWizardFormatValueAxisTitle as wa, chartWizardFormatValueAxisTitlePlaceholder as Pa, chartWizardFormatValueAxisTitleFont as Va, chartWizardFormatValueAxisTitleFontPlaceholder as Ba, chartWizardFormatValueAxisTitleSize as Ma, chartWizardFormatValueAxisTitleSizePlaceholder as Ra, chartWizardFormatValueAxisTitleColor as Da, chartWizardFormatValueAxisLabels as Ka, chartWizardFormatValueAxisLabelsFormat as Oa, chartWizardFormatValueAxisLabelsFont as Xa, chartWizardFormatValueAxisLabelsFontPlaceholder as Ga, chartWizardFormatValueAxisLabelsSize as Ha, chartWizardFormatValueAxisLabelsSizePlaceholder as Ya, chartWizardFormatValueAxisLabelsColor as ja, chartWizardFormatValueAxisLabelsRotation as Ua, chartWizardFormatValueAxisLabelsRotationAuto as qa } from "./messages.mjs";
+import { ExportEvent as Sr, resolveExportOptions as vr, handlePDFExport as Lr, handleSVGExport as Er, handleImageExport as Ar } from "./export.mjs";
+const I = (o) => /* @__PURE__ */ e.createElement("fieldset", { className: "k-form-fieldset" }, o.legend && /* @__PURE__ */ e.createElement("legend", { className: "k-form-legend" }, o.legend), o.children), g = (o) => /* @__PURE__ */ e.createElement(Cr, { className: o.className }, o.labelText && o.editorId && /* @__PURE__ */ e.createElement(Ja, { className: "k-form-label", editorId: o.editorId }, o.labelText), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, o.children)), u = { value: null, text: "" }, V = (o, l) => l.dataItem.style ? e.cloneElement(o, o.props, /* @__PURE__ */ e.createElement("span", { style: l.dataItem.style }, o.props.children)) : o, T = (o) => /* @__PURE__ */ e.createElement("div", { className: hr("k-icon-text-wrapper", { "k-selected": o.selected }), onClick: o.onClick }, /* @__PURE__ */ e.createElement("div", { className: "k-icon-background-area", tabIndex: 0 }, /* @__PURE__ */ e.createElement(xr, { icon: o.icon, size: "xlarge", className: "k-svg-i-chart-bar-clustered" })), o.children), h = {
+  fillMode: "outline",
+  popupSettings: {
+    animate: !1
+  }
+}, U = { type: "normal" }, q = { type: "100%" }, Dr = (o) => {
+  var de, ge, ue, me, he, xe, Ce, be, Se, ve, Le, Ee, Ae, ke, pe, Fe, fe, ze, ye, Te, We, Ie, Ne, we, Pe, Ve, Be, Me, Re, De, Ke, Oe, Xe, Ge, He, Ye, je, Ue, qe, Je, Qe;
+  const l = br(), F = [
+    { value: "chartTitle", text: l.toLanguageString($e, n[$e]) },
+    { value: "chartSubtitle", text: l.toLanguageString(et, n[et]) }
+  ], J = [
+    { value: "top", text: l.toLanguageString(tt, n[tt]) },
+    { value: "bottom", text: l.toLanguageString(at, n[at]) },
+    { value: "left", text: l.toLanguageString(lt, n[lt]) },
+    { value: "right", text: l.toLanguageString(nt, n[nt]) }
+  ], K = {
+    name: l.toLanguageString(rt, n[rt])
+  }, Q = {
+    text: l.toLanguageString(ot, n[ot]),
+    value: ""
+  }, Z = [
+    { value: "n0", text: l.toLanguageString(it, n[it]) },
+    { value: "c0", text: l.toLanguageString(ct, n[ct]) },
+    { value: "p0", text: l.toLanguageString(st, n[st]) }
+  ], O = e.useRef(null), Qa = e.useCallback((t) => {
+    var r;
+    if (O.current) {
+      const d = new Sr(O.current, vr(o.exportOptions));
+      (r = o.onExport) == null || r.call(o, d), d.isDefaultPrevented() || t.item.exportHandler.call(void 0, d);
+    }
+  }, [o.exportOptions]), [Za, _a] = e.useState({ width: 700, height: 550 }), [$a, el] = e.useState("DEFAULT"), tl = e.useCallback((t) => {
+    _a({ width: t.width, height: t.height });
+  }, []), al = e.useCallback((t) => {
+    el(t.state);
+  }, []), [ll, nl] = e.useState([{ collapsible: !1 }, { size: "300px", collapsible: !1 }]), rl = e.useCallback((t) => {
+    nl(t.newState);
+  }, []), [_, ol] = e.useState(!0), il = e.useCallback((t) => {
+    ol(!t.expanded);
+  }, []), [$, cl] = e.useState(!0), sl = e.useCallback((t) => {
+    cl(!t.expanded);
+  }, []), [ee, dl] = e.useState(!0), gl = e.useCallback((t) => {
+    dl(!t.expanded);
+  }, []), [te, ul] = e.useState(!0), ml = e.useCallback((t) => {
+    ul(!t.expanded);
+  }, []), [ae, hl] = e.useState(!0), xl = e.useCallback((t) => {
+    hl(!t.expanded);
+  }, []), [le, Cl] = e.useState(!0), bl = e.useCallback((t) => {
+    Cl(!t.expanded);
+  }, []), [ne, Sl] = e.useState(!0), vl = e.useCallback((t) => {
+    Sl(!t.expanded);
+  }, []), [re, Ll] = e.useState(!0), El = e.useCallback((t) => {
+    Ll(!t.expanded);
+  }, []), [oe, Al] = e.useState(!0), kl = e.useCallback((t) => {
+    Al(!t.expanded);
+  }, []), [ie, pl] = e.useState(!0), Fl = e.useCallback((t) => {
+    pl(!t.expanded);
+  }, []), [ce, fl] = e.useState(!0), zl = e.useCallback((t) => {
+    fl(!t.expanded);
+  }, []), [se, yl] = e.useState(!0), Tl = e.useCallback((t) => {
+    yl(!t.expanded);
+  }, []), [Wl, Il] = e.useState(0), Nl = e.useCallback((t) => {
+    Il(t.selected);
+  }, []), [a, i] = e.useState(mr(o.data, "bar", o.defaultState)), [C, b] = e.useState(""), wl = e.useCallback((t) => {
+    const r = t.target.value.name;
+    b(r === K.name ? "" : r);
+  }, []), Pl = e.useCallback(() => {
+    i(z(a, y(o.data, "bar"))), b("");
+  }, [a, o.data]), Vl = e.useCallback(() => {
+    const t = z(a, y(o.data, "bar"));
+    i(s(t, c.stacked, U)), b("");
+  }, [a, o.data]), Bl = e.useCallback(() => {
+    const t = z(a, y(o.data, "bar"));
+    i(s(t, c.stacked, q)), b("");
+  }, [a, o.data]), Ml = e.useCallback(() => {
+    i(z(a, y(o.data, "column"))), b("");
+  }, [a, o.data]), Rl = e.useCallback(() => {
+    const t = z(a, y(o.data, "column"));
+    i(s(t, c.stacked, U)), b("");
+  }, [a, o.data]), Dl = e.useCallback(() => {
+    const t = z(a, y(o.data, "column"));
+    i(s(t, c.stacked, q)), b("");
+  }, [a, o.data]), Kl = e.useCallback(() => {
+    i(z(a, y(o.data, "line"))), b("");
+  }, [a, o.data]), Ol = e.useCallback(() => {
+    const t = z(a, y(o.data, "line"));
+    i(s(t, c.stacked, U)), b("");
+  }, [a, o.data]), Xl = e.useCallback(() => {
+    const t = z(a, y(o.data, "line"));
+    i(s(t, c.stacked, q)), b("");
+  }, [a, o.data]), Gl = e.useCallback(() => {
+    i(z(a, y(o.data, "pie"))), b("");
+  }, [a, o.data]), Hl = e.useCallback(() => {
+    i(z(a, y(o.data, "scatter"))), b("");
+  }, [a, o.data]), Yl = e.useCallback((t) => {
+    i(s(a, c.categoryAxisX, t.target.value));
+  }, [a]), jl = e.useCallback((t) => {
+    i(s(a, c.seriesChange, t));
+  }, [a]), Ul = e.useCallback((t) => {
+    i(s(a, c.valueAxisY, t.target.value));
+  }, [a]), ql = e.useCallback((t) => {
+    i(s(a, c.areaMarginLeft, t.target.value));
+  }, [a]), Jl = e.useCallback((t) => {
+    i(s(a, c.areaMarginRight, t.target.value));
+  }, [a]), Ql = e.useCallback((t) => {
+    i(s(a, c.areaMarginTop, t.target.value));
+  }, [a]), Zl = e.useCallback((t) => {
+    i(s(a, c.areaMarginBottom, t.target.value));
+  }, [a]), W = a.area.margin, _l = e.useCallback((t) => {
+    i(s(a, c.areaBackground, t.value));
+  }, [a]), [f, $l] = e.useState(F[0]), en = e.useCallback((t) => {
+    $l(t.target.value);
+  }, []), tn = e.useCallback((t) => {
+    const r = f.value === F[0].value ? c.titleText : c.subtitleText;
+    i(s(a, r, t.target.value));
+  }, [a, f]), an = e.useCallback((t) => {
+    const r = f.value === F[0].value ? c.titleFontName : c.subtitleFontName, d = t.target.value || u;
+    i(s(a, r, d.value));
+  }, [a, f]), ln = e.useCallback((t) => {
+    const r = f.value === F[0].value ? c.titleFontSize : c.subtitleFontSize, d = t.target.value || u;
+    i(s(a, r, d.value));
+  }, [a, f]), nn = e.useCallback((t) => {
+    const r = f.value === F[0].value ? c.titleColor : c.subtitleColor;
+    i(s(a, r, t.value));
+  }, [a, f]), D = (f.value === F[0].value ? a.title : a.subtitle) || { text: "", font: "", color: "" }, rn = e.useCallback((t) => {
+    C && i(s(a, c.seriesColor, { seriesName: C, color: t.value }));
+  }, [a, C]), on = e.useCallback((t) => {
+    i(s(a, c.seriesLabel, { seriesName: C, all: !C, visible: t.value }));
+  }, [a, C]), cn = e.useCallback((t) => {
+    i(s(a, c.legendVisible, t.value));
+  }, [a]), sn = e.useCallback((t) => {
+    const r = t.target.value || u;
+    i(s(a, c.legendFontSize, r.value));
+  }, [a]), dn = e.useCallback((t) => {
+    const r = t.target.value || u;
+    i(s(a, c.legendFontName, r.value));
+  }, [a]), gn = e.useCallback((t) => {
+    i(s(a, c.legendColor, t.value));
+  }, [a]), un = e.useCallback((t) => {
+    const r = t.target.value;
+    i(s(a, c.legendPosition, r.value));
+  }, [a]), mn = e.useCallback((t) => {
+    i(s(a, c.categoryAxisTitleText, t.target.value));
+  }, [a]), hn = e.useCallback((t) => {
+    const r = t.target.value || u;
+    i(s(a, c.categoryAxisTitleFontSize, r.value));
+  }, [a]), xn = e.useCallback((t) => {
+    const r = t.target.value || u;
+    i(s(a, c.categoryAxisTitleFontName, r.value));
+  }, [a]), Cn = e.useCallback((t) => {
+    i(s(a, c.categoryAxisTitleColor, t.value));
+  }, [a]), bn = e.useCallback((t) => {
+    const r = t.target.value || u;
+    i(s(a, c.categoryAxisLabelsFontSize, r.value));
+  }, [a]), Sn = e.useCallback((t) => {
+    const r = t.target.value || u;
+    i(s(a, c.categoryAxisLabelsFontName, r.value));
+  }, [a]), vn = e.useCallback((t) => {
+    i(s(a, c.categoryAxisLabelsColor, t.value));
+  }, [a]), Ln = e.useCallback((t) => {
+    i(s(a, c.categoryAxisLabelsRotation, t.target.value));
+  }, [a]), En = e.useCallback((t) => {
+    i(s(a, c.categoryAxisReverseOrder, t.value));
+  }, [a]), An = e.useCallback((t) => {
+    i(s(a, c.valueAxisTitleText, t.target.value));
+  }, [a]), kn = e.useCallback((t) => {
+    const r = t.target.value || u;
+    i(s(a, c.valueAxisTitleFontSize, r.value));
+  }, [a]), pn = e.useCallback((t) => {
+    const r = t.target.value || u;
+    i(s(a, c.valueAxisTitleFontName, r.value));
+  }, [a]), Fn = e.useCallback((t) => {
+    i(s(a, c.valueAxisTitleColor, t.value));
+  }, [a]), fn = e.useCallback((t) => {
+    const r = t.target.value || u;
+    i(s(a, c.valueAxisLabelsFontSize, r.value));
+  }, [a]), zn = e.useCallback((t) => {
+    const r = t.target.value || u;
+    i(s(a, c.valueAxisLabelsFontName, r.value));
+  }, [a]), yn = e.useCallback((t) => {
+    i(s(a, c.valueAxisLabelsColor, t.value));
+  }, [a]), Tn = e.useCallback((t) => {
+    i(s(a, c.valueAxisLabelsRotation, t.target.value));
+  }, [a]), Wn = e.useCallback((t) => {
+    const r = t.target.value;
+    i(s(a, c.valueAxisLabelsFormat, r.value));
+  }, [a]), m = a.seriesType, R = typeof ((de = a.series[0]) == null ? void 0 : de.stack) == "object" ? (ge = a.series[0]) == null ? void 0 : ge.stack : !1, X = R === !1, G = R && R.type === "normal", H = R && R.type === "100%";
+  return /* @__PURE__ */ e.createElement(
+    In,
+    {
+      title: l.toLanguageString(dt, n[dt]),
+      className: "k-chart-wizard",
+      modal: !0,
+      resizable: !0,
+      minimizeButton: () => null,
+      onClose: o.onClose,
+      onResize: tl,
+      stage: $a,
+      onStageChange: al,
+      ...Za
+    },
+    /* @__PURE__ */ e.createElement(
+      Un,
+      {
+        panes: ll,
+        onChange: rl,
+        className: "k-chart-wizard-splitter"
+      },
+      /* @__PURE__ */ e.createElement("div", { className: "k-chart-wizard-preview-pane k-pane" }, /* @__PURE__ */ e.createElement("div", { className: "k-preview-pane-header" }, /* @__PURE__ */ e.createElement(
+        Jn,
+        {
+          text: l.toLanguageString(gt, n[gt]),
+          fillMode: "flat",
+          svgIcon: Qn,
+          onItemClick: Qa,
+          items: [
+            { svgIcon: Zn, exportHandler: Lr, text: l.toLanguageString(ut, n[ut]) },
+            { svgIcon: _n, exportHandler: Er, text: l.toLanguageString(mt, n[mt]) },
+            { svgIcon: $n, exportHandler: Ar, text: l.toLanguageString(ht, n[ht]) }
+          ]
+        }
+      )), /* @__PURE__ */ e.createElement("div", { className: "k-preview-pane-content", style: { height: "calc(100% - 50px)" } }, /* @__PURE__ */ e.createElement(
+        Nn,
+        {
+          style: { width: "100%", height: "100%" },
+          transitions: !1,
+          ref: O
+        },
+        /* @__PURE__ */ e.createElement(
+          wn,
+          {
+            text: (ue = a.title) == null ? void 0 : ue.text,
+            font: (me = a.title) == null ? void 0 : me.font,
+            color: ((he = a.title) == null ? void 0 : he.color) || "#000"
+          }
+        ),
+        /* @__PURE__ */ e.createElement(
+          Pn,
+          {
+            text: (xe = a.subtitle) == null ? void 0 : xe.text,
+            font: (Ce = a.subtitle) == null ? void 0 : Ce.font,
+            color: ((be = a.subtitle) == null ? void 0 : be.color) || "#000"
+          }
+        ),
+        /* @__PURE__ */ e.createElement(Vn, { background: (Se = a.area) == null ? void 0 : Se.background, margin: W }),
+        a.categoryAxis && /* @__PURE__ */ e.createElement(Bn, null, a.categoryAxis.map((t, r) => /* @__PURE__ */ e.createElement(
+          Mn,
+          {
+            key: r,
+            categories: t.categories,
+            title: t.title && {
+              text: t.title.text,
+              font: t.title.font,
+              color: t.title.color
+            },
+            labels: t.labels && {
+              font: t.labels.font,
+              color: t.labels.color,
+              rotation: t.labels.rotation
+            },
+            reverse: t.reverse
+          }
+        ))),
+        a.valueAxis && /* @__PURE__ */ e.createElement(Rn, null, a.valueAxis.map((t, r) => /* @__PURE__ */ e.createElement(
+          Dn,
+          {
+            key: r,
+            title: t.title && {
+              text: t.title.text,
+              font: t.title.font,
+              color: t.title.color
+            },
+            labels: t.labels && {
+              format: t.labels.format,
+              font: t.labels.font,
+              color: t.labels.color,
+              rotation: t.labels.rotation
+            }
+          }
+        ))),
+        /* @__PURE__ */ e.createElement(Kn, null, a.series.map((t, r) => /* @__PURE__ */ e.createElement(
+          On,
+          {
+            key: String(t.name) + r,
+            ...t
+          }
+        ))),
+        /* @__PURE__ */ e.createElement(Xn, null, a.categoryAxis.map((t, r) => /* @__PURE__ */ e.createElement(
+          Gn,
+          {
+            key: r,
+            categories: t.categories,
+            title: t.title && {
+              text: t.title.text,
+              font: t.title.font,
+              color: t.title.color
+            },
+            labels: t.labels && {
+              font: t.labels.font,
+              color: t.labels.color,
+              format: t.labels.format,
+              rotation: t.labels.rotation
+            }
+          }
+        ))),
+        /* @__PURE__ */ e.createElement(Hn, null, a.valueAxis.map((t, r) => /* @__PURE__ */ e.createElement(
+          Yn,
+          {
+            key: r,
+            title: t.title && {
+              text: t.title.text,
+              font: t.title.font,
+              color: t.title.color
+            },
+            labels: t.labels && {
+              format: t.labels.format,
+              font: t.labels.font,
+              color: t.labels.color,
+              rotation: t.labels.rotation
+            }
+          }
+        ))),
+        /* @__PURE__ */ e.createElement(
+          jn,
+          {
+            visible: (ve = a.legend) == null ? void 0 : ve.visible,
+            position: (Le = a.legend) == null ? void 0 : Le.position,
+            labels: {
+              color: ((Ae = (Ee = a.legend) == null ? void 0 : Ee.labels) == null ? void 0 : Ae.color) || void 0,
+              font: ((pe = (ke = a.legend) == null ? void 0 : ke.labels) == null ? void 0 : pe.font) || void 0
+            }
+          }
+        )
+      ))),
+      /* @__PURE__ */ e.createElement("div", { className: "k-chart-wizard-property-pane k-pane k-pane-static" }, /* @__PURE__ */ e.createElement(qn, { selected: Wl, onSelect: Nl, animation: !1 }, /* @__PURE__ */ e.createElement(Y, { title: l.toLanguageString(xt, n[xt]) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: l.toLanguageString(Ct, n[Ct]),
+          expanded: _,
+          tabIndex: 0,
+          onAction: il
+        },
+        /* @__PURE__ */ e.createElement(L, null, _ && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement("div", { className: "k-chart-types-wrapper" }, /* @__PURE__ */ e.createElement(T, { selected: m === "bar" && X, onClick: Pl, icon: er }, l.toLanguageString(bt, n[bt])), /* @__PURE__ */ e.createElement(T, { selected: m === "bar" && G, onClick: Vl, icon: tr }, l.toLanguageString(St, n[St])), /* @__PURE__ */ e.createElement(T, { selected: m === "bar" && H, onClick: Bl, icon: ar }, l.toLanguageString(vt, n[vt])))))
+      ), /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: l.toLanguageString(Lt, n[Lt]),
+          expanded: $,
+          tabIndex: 0,
+          onAction: sl
+        },
+        /* @__PURE__ */ e.createElement(L, null, $ && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement("div", { className: "k-chart-types-wrapper" }, /* @__PURE__ */ e.createElement(T, { selected: m === "pie", onClick: Gl, icon: lr }, l.toLanguageString(Et, n[Et])))))
+      ), /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: l.toLanguageString(At, n[At]),
+          expanded: ee,
+          tabIndex: 0,
+          onAction: gl
+        },
+        /* @__PURE__ */ e.createElement(L, null, ee && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement("div", { className: "k-chart-types-wrapper" }, /* @__PURE__ */ e.createElement(T, { selected: m === "column" && X, onClick: Ml, icon: nr }, l.toLanguageString(kt, n[kt])), /* @__PURE__ */ e.createElement(T, { selected: m === "column" && G, onClick: Rl, icon: rr }, l.toLanguageString(pt, n[pt])), /* @__PURE__ */ e.createElement(T, { selected: m === "column" && H, onClick: Dl, icon: or }, l.toLanguageString(Ft, n[Ft])))))
+      ), /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: l.toLanguageString(ft, n[ft]),
+          expanded: te,
+          tabIndex: 0,
+          onAction: ml
+        },
+        /* @__PURE__ */ e.createElement(L, null, te && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement("div", { className: "k-chart-types-wrapper" }, /* @__PURE__ */ e.createElement(T, { selected: m === "line" && X, onClick: Kl, icon: ir }, l.toLanguageString(zt, n[zt])), /* @__PURE__ */ e.createElement(T, { selected: m === "line" && G, onClick: Ol, icon: cr }, l.toLanguageString(yt, n[yt])), /* @__PURE__ */ e.createElement(T, { selected: m === "line" && H, onClick: Xl, icon: sr }, l.toLanguageString(Tt, n[Tt])))))
+      ), /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: l.toLanguageString(Wt, n[Wt]),
+          expanded: ae,
+          tabIndex: 0,
+          onAction: xl
+        },
+        /* @__PURE__ */ e.createElement(L, null, ae && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement("div", { className: "k-chart-types-wrapper" }, /* @__PURE__ */ e.createElement(T, { selected: m === "scatter", onClick: Hl, icon: dr }, l.toLanguageString(It, n[It])))))
+      ))), /* @__PURE__ */ e.createElement(Y, { title: l.toLanguageString(Nt, n[Nt]) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: l.toLanguageString(wt, n[wt]),
+          expanded: le,
+          tabIndex: 0,
+          onAction: bl
+        },
+        /* @__PURE__ */ e.createElement(L, null, le && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(
+          I,
+          {
+            legend: m === "scatter" ? l.toLanguageString(Pt, n[Pt]) : l.toLanguageString(Vt, n[Vt])
+          },
+          /* @__PURE__ */ e.createElement(
+            B,
+            {
+              data: a.columns || [],
+              value: a.categoryField,
+              onChange: Yl,
+              ...h
+            }
+          )
+        ), _e(m) && /* @__PURE__ */ e.createElement(I, { legend: l.toLanguageString(Bt, n[Bt]) }, /* @__PURE__ */ e.createElement(
+          gr,
+          {
+            data: a.series,
+            initialData: a.initialSeries,
+            onChange: jl
+          }
+        )), m === "pie" && /* @__PURE__ */ e.createElement(I, { legend: l.toLanguageString(Mt, n[Mt]) }, /* @__PURE__ */ e.createElement(
+          B,
+          {
+            data: a.columns || [],
+            value: a.valueField || "",
+            ...h,
+            onChange: Ul
+          }
+        )))))
+      ))), /* @__PURE__ */ e.createElement(Y, { title: l.toLanguageString(Rt, n[Rt]) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: l.toLanguageString(Dt, n[Dt]),
+          expanded: ne,
+          tabIndex: 0,
+          onAction: vl
+        },
+        /* @__PURE__ */ e.createElement(L, null, ne && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(I, { legend: l.toLanguageString(Kt, n[Kt]) }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(g, { labelText: l.toLanguageString(Ot, n[Ot]), editorId: "left" }, /* @__PURE__ */ e.createElement(
+          M,
+          {
+            id: "left",
+            value: W.left !== void 0 ? W.left : null,
+            onChange: ql,
+            placeholder: l.toLanguageString(w, n[w]),
+            min: 0,
+            max: 1e3,
+            step: 1,
+            fillMode: "outline"
+          }
+        )), /* @__PURE__ */ e.createElement(g, { labelText: l.toLanguageString(Xt, n[Xt]), editorId: "right" }, /* @__PURE__ */ e.createElement(
+          M,
+          {
+            id: "right",
+            value: W.right !== void 0 ? W.right : null,
+            onChange: Jl,
+            placeholder: l.toLanguageString(w, n[w]),
+            min: 0,
+            max: 1e3,
+            step: 1,
+            fillMode: "outline"
+          }
+        )), /* @__PURE__ */ e.createElement(g, { labelText: l.toLanguageString(Gt, n[Gt]), editorId: "top" }, /* @__PURE__ */ e.createElement(
+          M,
+          {
+            id: "top",
+            value: W.top !== void 0 ? W.top : null,
+            onChange: Ql,
+            placeholder: l.toLanguageString(w, n[w]),
+            min: 0,
+            max: 1e3,
+            step: 1,
+            fillMode: "outline"
+          }
+        )), /* @__PURE__ */ e.createElement(g, { labelText: l.toLanguageString(Ht, n[Ht]), editorId: "bottom" }, /* @__PURE__ */ e.createElement(
+          M,
+          {
+            id: "bottom",
+            value: W.bottom !== void 0 ? W.bottom : null,
+            onChange: Zl,
+            placeholder: l.toLanguageString(w, n[w]),
+            min: 0,
+            max: 1e3,
+            step: 1,
+            fillMode: "outline"
+          }
+        )))), /* @__PURE__ */ e.createElement(I, { legend: l.toLanguageString(Yt, n[Yt]) }, /* @__PURE__ */ e.createElement(g, { labelText: l.toLanguageString(jt, n[jt]), editorId: "background" }, /* @__PURE__ */ e.createElement(
+          N,
+          {
+            id: "background",
+            value: ((Fe = a.area) == null ? void 0 : Fe.background) || "",
+            onChange: _l,
+            view: "gradient",
+            fillMode: "outline"
+          }
+        ))))))
+      ), /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: l.toLanguageString(Ut, n[Ut]),
+          expanded: re,
+          tabIndex: 0,
+          onAction: El
+        },
+        /* @__PURE__ */ e.createElement(L, null, re && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2", editorId: "apply-to-title", labelText: l.toLanguageString(qt, n[qt]) }, /* @__PURE__ */ e.createElement(
+          B,
+          {
+            id: "apply-to-title",
+            data: F,
+            textField: "text",
+            dataItemKey: "value",
+            value: F.find((t) => t.value === f.value),
+            onChange: en,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2", editorId: "titleText", labelText: l.toLanguageString(Jt, n[Jt]) }, /* @__PURE__ */ e.createElement(
+          j,
+          {
+            id: "titleText",
+            placeholder: f.value === F[0].value ? F[0].text : F[1].text,
+            value: D.text,
+            onChange: tn,
+            onKeyDown: (t) => t.stopPropagation()
+          }
+        )), /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2", editorId: "titleFont", labelText: l.toLanguageString(Qt, n[Qt]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "titleFont",
+            data: A,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(Zt, n[Zt]),
+            value: A.find((t) => t.value === k(D.font).name) || u,
+            onChange: an,
+            itemRender: V,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "titleFontSize", labelText: l.toLanguageString(_t, n[_t]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "titleFontSize",
+            data: p,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString($t, n[$t]),
+            value: p.find((t) => t.value === k(D.font).size) || u,
+            onChange: ln,
+            itemRender: V,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "titleColor", labelText: l.toLanguageString(ea, n[ea]) }, /* @__PURE__ */ e.createElement(
+          N,
+          {
+            id: "titleColor",
+            value: D.color || "",
+            onChange: nn,
+            view: "gradient",
+            fillMode: "outline"
+          }
+        ))))))
+      ), /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: l.toLanguageString(ta, n[ta]),
+          expanded: oe,
+          tabIndex: 0,
+          onAction: kl
+        },
+        /* @__PURE__ */ e.createElement(L, null, oe && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(g, { editorId: "apply-to-series", labelText: l.toLanguageString(aa, n[aa]) }, /* @__PURE__ */ e.createElement(
+          B,
+          {
+            id: "apply-to-series",
+            data: a.series,
+            textField: "name",
+            dataItemKey: "name",
+            defaultItem: K,
+            disabled: !_e(m),
+            value: a.series.find((t) => t.name === C) || K,
+            onChange: wl,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "seriesColor", labelText: l.toLanguageString(la, n[la]) }, /* @__PURE__ */ e.createElement(
+          N,
+          {
+            id: "seriesColor",
+            value: C ? (fe = a.series.find((t) => t.name === C)) == null ? void 0 : fe.color : "",
+            onChange: rn,
+            disabled: !C,
+            view: "gradient",
+            fillMode: "outline"
+          }
+        )), /* @__PURE__ */ e.createElement(g, null, /* @__PURE__ */ e.createElement(
+          Ze,
+          {
+            label: l.toLanguageString(na, n[na]),
+            checked: C ? (ye = (ze = a.series.find((t) => t.name === C)) == null ? void 0 : ze.labels) == null ? void 0 : ye.visible : a.series.every((t) => {
+              var r;
+              return (r = t.labels) == null ? void 0 : r.visible;
+            }),
+            onChange: on
+          }
+        )))))
+      ), /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: l.toLanguageString(ra, n[ra]),
+          expanded: ie,
+          tabIndex: 0,
+          onAction: Fl
+        },
+        /* @__PURE__ */ e.createElement(L, null, ie && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(Ja, { editorId: "show-legend" }, l.toLanguageString(oa, n[oa])), /* @__PURE__ */ e.createElement(
+          ur,
+          {
+            id: "show-legend",
+            checked: (Te = a.legend) == null ? void 0 : Te.visible,
+            onChange: cn
+          }
+        ), /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2", editorId: "legendLabelsFont", labelText: l.toLanguageString(ia, n[ia]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "legendLabelsFont",
+            data: A,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(ca, n[ca]),
+            value: A.find((t) => {
+              var r, d, x;
+              return t.value === ((x = k(((d = (r = a.legend) == null ? void 0 : r.labels) == null ? void 0 : d.font) || "")) == null ? void 0 : x.name);
+            }) || u,
+            onChange: dn,
+            itemRender: V,
+            disabled: ((We = a.legend) == null ? void 0 : We.visible) === !1,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "legendLabelsSize", labelText: l.toLanguageString(sa, n[sa]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "legendLabelsSize",
+            data: p,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(da, n[da]),
+            value: p.find((t) => {
+              var r, d, x;
+              return t.value === ((x = k(((d = (r = a.legend) == null ? void 0 : r.labels) == null ? void 0 : d.font) || "")) == null ? void 0 : x.size);
+            }) || u,
+            onChange: sn,
+            disabled: ((Ie = a.legend) == null ? void 0 : Ie.visible) === !1,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "legendLabelsColor", labelText: l.toLanguageString(ga, n[ga]) }, /* @__PURE__ */ e.createElement(
+          N,
+          {
+            id: "legendLabelsColor",
+            value: ((we = (Ne = a.legend) == null ? void 0 : Ne.labels) == null ? void 0 : we.color) || "",
+            onChange: gn,
+            disabled: ((Pe = a.legend) == null ? void 0 : Pe.visible) === !1,
+            view: "gradient",
+            fillMode: "outline"
+          }
+        )), /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2", editorId: "legendPosition", labelText: l.toLanguageString(ua, n[ua]) }, /* @__PURE__ */ e.createElement(
+          B,
+          {
+            id: "legendPosition",
+            data: J,
+            textField: "text",
+            dataItemKey: "value",
+            value: J.find((t) => {
+              var r;
+              return t.value === ((r = a.legend) == null ? void 0 : r.position);
+            }),
+            onChange: un,
+            disabled: ((Ve = a.legend) == null ? void 0 : Ve.visible) === !1,
+            ...h
+          }
+        ))))))
+      ), m !== "pie" && /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: m === "scatter" ? l.toLanguageString(ma, n[ma]) : l.toLanguageString(ha, n[ha]),
+          expanded: ce,
+          tabIndex: 0,
+          onAction: zl
+        },
+        /* @__PURE__ */ e.createElement(L, null, ce && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(I, { legend: l.toLanguageString(xa, n[xa]) }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
+          j,
+          {
+            placeholder: l.toLanguageString(Ca, n[Ca]),
+            value: ((Be = a.categoryAxis[0].title) == null ? void 0 : Be.text) || "",
+            onChange: mn,
+            onKeyDown: (t) => t.stopPropagation()
+          }
+        )), /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2", editorId: "categoryAxisTitleFont", labelText: l.toLanguageString(ba, n[ba]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "categoryAxisTitleFont",
+            data: A,
+            textField: "text",
+            dataItemKey: "value",
+            itemRender: V,
+            placeholder: l.toLanguageString(Sa, n[Sa]),
+            value: A.find((t) => {
+              var r, d;
+              return t.value === ((d = k(((r = a.categoryAxis[0].title) == null ? void 0 : r.font) || "")) == null ? void 0 : d.name);
+            }) || u,
+            onChange: xn,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "categoryAxisTitleFontSize", labelText: l.toLanguageString(va, n[va]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "categoryAxisTitleFontSize",
+            data: p,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(La, n[La]),
+            value: p.find((t) => {
+              var r, d;
+              return t.value === ((d = k(((r = a.categoryAxis[0].title) == null ? void 0 : r.font) || "")) == null ? void 0 : d.size);
+            }) || u,
+            onChange: hn,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "categoryAxisTitleColor", labelText: l.toLanguageString(Ea, n[Ea]) }, /* @__PURE__ */ e.createElement(
+          N,
+          {
+            id: "categoryAxisTitleColor",
+            view: "gradient",
+            value: ((Me = a.categoryAxis[0].title) == null ? void 0 : Me.color) || "",
+            onChange: Cn,
+            fillMode: "outline"
+          }
+        )))), /* @__PURE__ */ e.createElement(I, { legend: l.toLanguageString(Aa, n[Aa]) }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2", editorId: "categoryAxisLabelsFont", labelText: l.toLanguageString(ka, n[ka]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "categoryAxisLabelsFont",
+            data: A,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(pa, n[pa]),
+            value: A.find((t) => {
+              var r, d;
+              return t.value === ((d = k(((r = a.categoryAxis[0].labels) == null ? void 0 : r.font) || "")) == null ? void 0 : d.name);
+            }) || u,
+            onChange: Sn,
+            itemRender: V,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "categoryAxisLabelsFontSize", labelText: l.toLanguageString(Fa, n[Fa]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "categoryAxisLabelsFontSize",
+            data: p,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(fa, n[fa]),
+            value: p.find((t) => {
+              var r, d;
+              return t.value === ((d = k(((r = a.categoryAxis[0].labels) == null ? void 0 : r.font) || "")) == null ? void 0 : d.size);
+            }) || u,
+            onChange: bn,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "categoryAxisLabelsColor", labelText: l.toLanguageString(za, n[za]) }, /* @__PURE__ */ e.createElement(
+          N,
+          {
+            id: "categoryAxisLabelsColor",
+            view: "gradient",
+            value: ((Re = a.categoryAxis[0].labels) == null ? void 0 : Re.color) || "",
+            onChange: vn,
+            fillMode: "outline"
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "categoryAxisLabelsRotation", labelText: l.toLanguageString(ya, n[ya]) }, /* @__PURE__ */ e.createElement(
+          M,
+          {
+            id: "categoryAxisLabelsRotation",
+            value: typeof ((De = a.categoryAxis[0].labels) == null ? void 0 : De.rotation) == "number" ? (Ke = a.categoryAxis[0].labels) == null ? void 0 : Ke.rotation : null,
+            placeholder: l.toLanguageString(Ta, n[Ta]),
+            onChange: Ln,
+            fillMode: "outline",
+            min: -360,
+            max: 360,
+            step: 1
+          }
+        )), /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
+          Ze,
+          {
+            label: l.toLanguageString(Wa, n[Wa]),
+            checked: a.categoryAxis[0].reverse || !1,
+            onChange: En
+          }
+        )))))))
+      ), m !== "pie" && /* @__PURE__ */ e.createElement(
+        S,
+        {
+          style: { maxWidth: "576px" },
+          title: m === "scatter" ? l.toLanguageString(Ia, n[Ia]) : l.toLanguageString(Na, n[Na]),
+          expanded: se,
+          tabIndex: 0,
+          onAction: Tl
+        },
+        /* @__PURE__ */ e.createElement(L, null, se && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(I, { legend: l.toLanguageString(wa, n[wa]) }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
+          j,
+          {
+            placeholder: l.toLanguageString(Pa, n[Pa]),
+            value: ((Xe = (Oe = a.valueAxis[0]) == null ? void 0 : Oe.title) == null ? void 0 : Xe.text) || "",
+            onChange: An,
+            onKeyDown: (t) => t.stopPropagation()
+          }
+        )), /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2", editorId: "valueAxisTitleFont", labelText: l.toLanguageString(Va, n[Va]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "valueAxisTitleFont",
+            data: A,
+            textField: "text",
+            dataItemKey: "value",
+            itemRender: V,
+            placeholder: l.toLanguageString(Ba, n[Ba]),
+            value: A.find((t) => {
+              var r, d, x;
+              return t.value === ((x = k(((d = (r = a.valueAxis[0]) == null ? void 0 : r.title) == null ? void 0 : d.font) || "")) == null ? void 0 : x.name);
+            }) || u,
+            onChange: pn,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "valueAxisTitleFontSize", labelText: l.toLanguageString(Ma, n[Ma]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "valueAxisTitleFontSize",
+            data: p,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(Ra, n[Ra]),
+            value: p.find((t) => {
+              var r, d, x;
+              return t.value === ((x = k(((d = (r = a.valueAxis[0]) == null ? void 0 : r.title) == null ? void 0 : d.font) || "")) == null ? void 0 : x.size);
+            }) || u,
+            onChange: kn,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "valueAxisTitleColor", labelText: l.toLanguageString(Da, n[Da]) }, /* @__PURE__ */ e.createElement(
+          N,
+          {
+            id: "valueAxisTitleColor",
+            view: "gradient",
+            value: ((He = (Ge = a.valueAxis[0]) == null ? void 0 : Ge.title) == null ? void 0 : He.color) || "",
+            onChange: Fn,
+            fillMode: "outline"
+          }
+        )))), /* @__PURE__ */ e.createElement(I, { legend: l.toLanguageString(Ka, n[Ka]) }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2", editorId: "valueAxisLabelsFormat", labelText: l.toLanguageString(Oa, n[Oa]) }, /* @__PURE__ */ e.createElement(
+          B,
+          {
+            id: "valueAxisLabelsFormat",
+            data: Z,
+            textField: "text",
+            dataItemKey: "value",
+            defaultItem: Q,
+            value: Z.find((t) => {
+              var r, d;
+              return t.value === ((d = (r = a.valueAxis[0]) == null ? void 0 : r.labels) == null ? void 0 : d.format);
+            }) || Q,
+            onChange: Wn,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { className: "k-col-span-2", editorId: "valueAxisLabelsFont", labelText: l.toLanguageString(Xa, n[Xa]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "valueAxisLabelsFont",
+            data: A,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(Ga, n[Ga]),
+            value: A.find((t) => {
+              var r, d, x;
+              return t.value === ((x = k(((d = (r = a.valueAxis[0]) == null ? void 0 : r.labels) == null ? void 0 : d.font) || "")) == null ? void 0 : x.name);
+            }) || u,
+            onChange: zn,
+            itemRender: V,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "valueAxisLabelsFontSize", labelText: l.toLanguageString(Ha, n[Ha]) }, /* @__PURE__ */ e.createElement(
+          E,
+          {
+            id: "valueAxisLabelsFontSize",
+            data: p,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(Ya, n[Ya]),
+            value: p.find((t) => {
+              var r, d, x;
+              return t.value === ((x = k(((d = (r = a.valueAxis[0]) == null ? void 0 : r.labels) == null ? void 0 : d.font) || "")) == null ? void 0 : x.size);
+            }) || u,
+            onChange: fn,
+            ...h
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "valueAxisLabelsColor", labelText: l.toLanguageString(ja, n[ja]) }, /* @__PURE__ */ e.createElement(
+          N,
+          {
+            id: "valueAxisLabelsColor",
+            view: "gradient",
+            value: ((je = (Ye = a.valueAxis[0]) == null ? void 0 : Ye.labels) == null ? void 0 : je.color) || "",
+            onChange: yn,
+            fillMode: "outline"
+          }
+        )), /* @__PURE__ */ e.createElement(g, { editorId: "valueAxisLabelsRotation", labelText: l.toLanguageString(Ua, n[Ua]) }, /* @__PURE__ */ e.createElement(
+          M,
+          {
+            id: "valueAxisLabelsRotation",
+            value: typeof ((qe = (Ue = a.valueAxis[0]) == null ? void 0 : Ue.labels) == null ? void 0 : qe.rotation) == "number" ? (Qe = (Je = a.valueAxis[0]) == null ? void 0 : Je.labels) == null ? void 0 : Qe.rotation : null,
+            placeholder: l.toLanguageString(qa, n[qa]),
+            onChange: Tn,
+            fillMode: "outline",
+            min: -360,
+            max: 360,
+            step: 1
+          }
+        )))))))
+      )))))
+    )
+  );
+};
+export {
+  Dr as ChartWizard
+};