@progress/kendo-react-chart-wizard 8.3.0-develop.9 → 8.3.0

package/ChartWizard.mjs

@@ -7,970 +7,116 @@
  */
 "use client";
 import * as e from "react";
-import { Window as Mn } from "@progress/kendo-react-dialogs";
-import { Chart as Rn, ChartTitle as Bn, ChartSubtitle as Wn, ChartArea as Kn, ChartCategoryAxis as Dn, ChartCategoryAxisItem as Hn, ChartValueAxis as On, ChartValueAxisItem as Xn, ChartSeries as Gn, ChartSeriesItem as Yn, ChartXAxis as jn, ChartXAxisItem as Un, ChartYAxis as $n, ChartYAxisItem as qn, ChartLegend as Jn } from "@progress/kendo-react-charts";
-import { Splitter as Qn, TabStrip as Zn, TabStripTab as U, ExpansionPanel as S, ExpansionPanelContent as L } from "@progress/kendo-react-layout";
-import { DropDownButton as _n } from "@progress/kendo-react-buttons";
-import { exportIcon as eo, filePdfIcon as to, fileIcon as ao, fileImageIcon as lo, chartBarClusteredIcon as no, chartBarStackedIcon as oo, chartBarStacked100Icon as ro, chartPieIcon as io, chartColumnClusteredIcon as so, chartColumnStackedIcon as co, chartColumnStacked100Icon as go, chartLineIcon as uo, chartLineStackedIcon as mo, chartLineStacked100Icon as xo, chartScatterIcon as Co } from "@progress/kendo-svg-icons";
-import { Reveal as E } from "@progress/kendo-react-animation";
-import { DropDownList as R, ComboBox as k } from "@progress/kendo-react-dropdowns";
-import { SeriesGrid as bo } from "./SeriesGrid.mjs";
-import { NumericTextBox as B, ColorPicker as z, Input as $, Checkbox as et, Switch as ho } from "@progress/kendo-react-inputs";
-import { Label as Za } from "@progress/kendo-react-labels";
-import { createInitialState as fo, mergeStates as T, createState as I, updateState as c, ActionTypes as s, isCategorical as tt, fontNames as A, parseFont as p, fontSizes as b } from "./chart-wizard-state.mjs";
-import { classNames as vo, IconWrap as So } from "@progress/kendo-react-common";
-import { FormElement as V, FieldWrapper as Lo } from "@progress/kendo-react-form";
-import { useLocalization as Eo } from "@progress/kendo-react-intl";
-import { formatTitleChartTitle as at, messages as n, formatTitleChartSubtitle as lt, formatLegendPositionTop as nt, formatLegendPositionBottom as ot, formatLegendPositionLeft as rt, formatLegendPositionRight as it, formatSeriesAllSeries as st, formatValueAxisLabelsFormatText as ct, formatValueAxisLabelsFormatNumber as gt, formatValueAxisLabelsFormatCurrency as dt, formatValueAxisLabelsFormatPercent as ut, windowTitle as mt, exportButton as xt, exportPDFButton as Ct, exportSVGButton as bt, exportPNGButton as ht, tabChart as ft, barChart as vt, barChartBar as St, barChartStackedBar as Lt, barChart100StackedBar as Et, pieChart as kt, pieChartPie as At, columnChart as pt, columnChartColumn as yt, columnChartStackedColumn as Tt, columnChart100StackedColumn as It, lineChart as Ft, lineChartLine as Nt, lineChartStackedLine as wt, lineChart100StackedLine as zt, scatterChart as Pt, scatterChartScatter as Vt, tabData as Mt, configuration as Rt, configurationXAxis as Bt, configurationCategoryAxis as Wt, configurationSeries as Kt, configurationValueAxis as Dt, tabFormat as Ht, formatChartArea as Ot, formatChartAreaMargins as Xt, formatChartAreaMarginsLeft as Gt, formatChartAreaMarginsAuto as P, formatChartAreaMarginsRight as Yt, formatChartAreaMarginsTop as jt, formatChartAreaMarginsBottom as Ut, formatChartAreaBackground as $t, formatChartAreaBackgroundColor as qt, formatTitle as Jt, formatTitleApplyTo as Qt, formatTitleLabel as Zt, formatTitleFont as _t, formatTitleFontPlaceholder as ea, formatTitleSize as ta, formatTitleSizePlaceholder as aa, formatTitleColor as la, formatSeries as na, formatSeriesApplyTo as oa, formatSeriesColor as ra, formatSeriesShowLabels as ia, formatLegend as sa, formatLegendShowLegend as ca, formatLegendFont as ga, formatLegendFontPlaceholder as da, formatLegendSize as ua, formatLegendSizePlaceholder as ma, formatLegendColor as xa, formatLegendPosition as Ca, formatXAxis as ba, formatCategoryAxis as ha, formatCategoryAxisTitle as fa, formatCategoryAxisTitlePlaceholder as va, formatCategoryAxisTitleFont as Sa, formatCategoryAxisTitleFontPlaceholder as La, formatCategoryAxisTitleSize as Ea, formatCategoryAxisTitleSizePlaceholder as ka, formatCategoryAxisTitleColor as Aa, formatCategoryAxisLabels as pa, formatCategoryAxisLabelsFont as ya, formatCategoryAxisLabelsFontPlaceholder as Ta, formatCategoryAxisLabelsSize as Ia, formatCategoryAxisLabelsSizePlaceholder as Fa, formatCategoryAxisLabelsColor as Na, formatCategoryAxisLabelsRotation as wa, formatCategoryAxisLabelsRotationAuto as za, formatCategoryAxisLabelsReverseOrder as Pa, formatYAxis as Va, formatValueAxis as Ma, formatValueAxisTitle as Ra, formatValueAxisTitlePlaceholder as Ba, formatValueAxisTitleFont as Wa, formatValueAxisTitleFontPlaceholder as Ka, formatValueAxisTitleSize as Da, formatValueAxisTitleSizePlaceholder as Ha, formatValueAxisTitleColor as Oa, formatValueAxisLabels as Xa, formatValueAxisLabelsFormat as Ga, formatValueAxisLabelsFont as Ya, formatValueAxisLabelsFontPlaceholder as ja, formatValueAxisLabelsSize as Ua, formatValueAxisLabelsSizePlaceholder as $a, formatValueAxisLabelsColor as qa, formatValueAxisLabelsRotation as Ja, formatValueAxisLabelsRotationAuto as Qa } from "./messages.mjs";
-import { ExportEvent as ko, resolveExportOptions as Ao, handlePDFExport as po, handleSVGExport as yo, handleImageExport as To } from "./export.mjs";
-const w = (r) => /* @__PURE__ */ e.createElement("fieldset", { className: "k-form-fieldset" }, r.legend && /* @__PURE__ */ e.createElement("legend", { className: "k-form-legend" }, r.legend), r.children), Io = (r) => {
-  r.stopPropagation();
-}, d = (r) => /* @__PURE__ */ e.createElement(Lo, { className: r.className }, r.labelText && r.editorId && /* @__PURE__ */ e.createElement(Za, { className: "k-form-label", editorId: r.editorId }, r.labelText), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap", onKeyDown: Io }, r.children)), u = { value: null, text: "" }, Fo = /^\d+$/, M = (r, K) => K.dataItem.style ? e.cloneElement(r, r.props, /* @__PURE__ */ e.createElement("span", { style: K.dataItem.style }, r.props.children)) : r, W = (r) => {
-  if (r.text === "")
-    return !0;
-  if (r.value === void 0) {
-    if (!Fo.test(r.text))
-      return !1;
-    r.value = r.text + "px";
-  }
-  return b.find((l) => l.value === r.value) || (b.push(r), b.sort((l, h) => parseInt(l.text, 10) - parseInt(h.text, 10))), !0;
-}, F = (r) => /* @__PURE__ */ e.createElement("div", { className: vo("k-icon-text-wrapper", { "k-selected": r.selected }), onClick: r.onClick }, /* @__PURE__ */ e.createElement("div", { className: "k-icon-background-area", tabIndex: 0 }, /* @__PURE__ */ e.createElement(So, { name: r.iconName, icon: r.icon, size: "xlarge", className: "k-svg-i-chart-bar-clustered" })), r.children), x = {
-  fillMode: "outline",
-  popupSettings: {
-    animate: !1
-  }
-}, q = { type: "normal" }, J = { type: "100%" }, No = e.forwardRef((r, K) => {
-  var me, xe, Ce, be, he, fe, ve, Se, Le, Ee, ke, Ae, pe, ye, Te, Ie, Fe, Ne, we, ze, Pe, Ve, Me, Re, Be, We, Ke, De, He, Oe, Xe, Ge, Ye, je, Ue, $e, qe, Je, Qe, Ze, _e;
-  const l = Eo(), h = [
-    { value: "chartTitle", text: l.toLanguageString(at, n[at]) },
-    { value: "chartSubtitle", text: l.toLanguageString(lt, n[lt]) }
-  ], Q = [
-    { value: "top", text: l.toLanguageString(nt, n[nt]) },
-    { value: "bottom", text: l.toLanguageString(ot, n[ot]) },
-    { value: "left", text: l.toLanguageString(rt, n[rt]) },
-    { value: "right", text: l.toLanguageString(it, n[it]) }
-  ], X = {
-    name: l.toLanguageString(st, n[st])
-  }, Z = {
-    text: l.toLanguageString(ct, n[ct]),
-    value: ""
-  }, _ = [
-    { value: "n0", text: l.toLanguageString(gt, n[gt]) },
-    { value: "c0", text: l.toLanguageString(dt, n[dt]) },
-    { value: "p0", text: l.toLanguageString(ut, n[ut]) }
-  ], H = e.useRef(null), _a = e.useCallback((t) => {
-    var o;
-    if (H.current) {
-      const g = new ko(H.current, Ao(r.exportOptions));
-      (o = r.onExport) == null || o.call(r, g), g.isDefaultPrevented() || t.item.exportHandler.call(void 0, g);
-    }
-  }, [r.exportOptions]), [el, tl] = e.useState({ width: 700, height: 550 }), [al, ll] = e.useState("DEFAULT"), nl = e.useCallback((t) => {
-    tl({ width: t.width, height: t.height });
-  }, []), ol = e.useCallback((t) => {
-    ll(t.state);
-  }, []), [rl, il] = e.useState([{ collapsible: !1 }, { size: "300px", collapsible: !1 }]), sl = e.useCallback((t) => {
-    il(t.newState);
-  }, []), [ee, cl] = e.useState(!0), gl = e.useCallback((t) => {
-    cl(!t.expanded);
-  }, []), [te, dl] = e.useState(!0), ul = e.useCallback((t) => {
-    dl(!t.expanded);
-  }, []), [ae, ml] = e.useState(!0), xl = e.useCallback((t) => {
-    ml(!t.expanded);
-  }, []), [le, Cl] = e.useState(!0), bl = e.useCallback((t) => {
-    Cl(!t.expanded);
-  }, []), [ne, hl] = e.useState(!0), fl = e.useCallback((t) => {
-    hl(!t.expanded);
-  }, []), [oe, vl] = e.useState(!0), Sl = e.useCallback((t) => {
-    vl(!t.expanded);
-  }, []), [re, Ll] = e.useState(!1), El = e.useCallback((t) => {
-    Ll(!t.expanded);
-  }, []), [ie, kl] = e.useState(!1), Al = e.useCallback((t) => {
-    kl(!t.expanded);
-  }, []), [se, pl] = e.useState(!1), yl = e.useCallback((t) => {
-    pl(!t.expanded);
-  }, []), [ce, Tl] = e.useState(!1), Il = e.useCallback((t) => {
-    Tl(!t.expanded);
-  }, []), [ge, Fl] = e.useState(!1), Nl = e.useCallback((t) => {
-    Fl(!t.expanded);
-  }, []), [de, wl] = e.useState(!1), zl = e.useCallback((t) => {
-    wl(!t.expanded);
-  }, []), [Pl, Vl] = e.useState(0), Ml = e.useCallback((t) => {
-    Vl(t.selected);
-  }, []), [a, i] = e.useState(fo(r.data, "bar", r.defaultState)), ue = e.useRef(a);
-  ue.current = a;
-  const Rl = e.useCallback(
+import { Window as B } from "@progress/kendo-react-dialogs";
+import { Splitter as D, TabStrip as N, TabStripTab as s } from "@progress/kendo-react-layout";
+import { DropDownButton as y } from "@progress/kendo-react-buttons";
+import { exportIcon as R, filePdfIcon as W, fileIcon as F, fileImageIcon as H } from "@progress/kendo-svg-icons";
+import { resolveExportOptions as G, createInitialState as A, mergeStates as V, createState as O, handlePDFExport as M, handleSVGExport as U, handleImageExport as j } from "./utils.mjs";
+import { useLocalization as q } from "@progress/kendo-react-intl";
+import { windowTitle as J, messages as i, exportButton as K, exportPDFButton as Q, exportSVGButton as X, exportPNGButton as Y, tabChart as Z, tabData as _, tabFormat as $ } from "./messages.mjs";
+import { ExportEvent as ee } from "./types/export.mjs";
+import { ConfigurationPanel as te } from "./components/panels/ConfigurationPanel.mjs";
+import { ChartAreaPanel as ae } from "./components/panels/ChartAreaPanel.mjs";
+import { TitlePanel as ne } from "./components/panels/TitlePanel.mjs";
+import { SeriesPanel as re } from "./components/panels/SeriesPanel.mjs";
+import { LegendPanel as oe } from "./components/panels/LegendPanel.mjs";
+import { CategoryAxisPanel as ie } from "./components/panels/CategoryAxisPanel.mjs";
+import { ValueAxisPanel as le } from "./components/panels/ValueAxisPanel.mjs";
+import { BarChartPanel as ce } from "./components/panels/BarChartPanel.mjs";
+import { ColumnChartPanel as me } from "./components/panels/ColumnChartPanel.mjs";
+import { LineChartPanel as se } from "./components/panels/LineChartPanel.mjs";
+import { ScatterChartPanel as pe } from "./components/panels/ScatterChartPanel.mjs";
+import { PieChartPanel as ue } from "./components/panels/PieChartPanel.mjs";
+import { ChartComponent as de } from "./components/ChartComponent.mjs";
+const ge = e.forwardRef((r, g) => {
+  const o = q(), c = e.useRef(null), f = e.useCallback(
+    (n) => {
+      var d;
+      if (c.current) {
+        const m = new ee(c.current, G(r.exportOptions));
+        (d = r.onExport) == null || d.call(void 0, m), m.isDefaultPrevented() || n.item.exportHandler.call(void 0, m);
+      }
+    },
+    [r.onExport, r.exportOptions]
+  ), h = r.window || B, [E, S] = e.useState({ width: 700, height: 550 }), [x, w] = e.useState("DEFAULT"), C = e.useCallback((n) => {
+    S({ width: n.width, height: n.height });
+  }, []), P = e.useCallback((n) => {
+    w(n.state);
+  }, []), [b, v] = e.useState([
+    { collapsible: !1 },
+    { size: "300px", collapsible: !1 }
+  ]), k = e.useCallback((n) => {
+    v(n.newState);
+  }, []), [z, I] = e.useState(0), T = e.useCallback((n) => {
+    I(n.selected);
+  }, []), [t, p] = e.useState(
+    A(r.data, "bar", r.defaultState)
+  ), a = (n) => {
+    p(n);
+  }, l = e.useRef(t);
+  l.current = t;
+  const L = e.useCallback(
     () => ({
       get chart() {
-        return H.current;
+        return c.current;
       },
       get state() {
-        return ue.current;
+        return l.current;
       }
     }),
     []
   );
-  e.useImperativeHandle(K, Rl);
-  const [f, v] = e.useState(""), Bl = e.useCallback((t) => {
-    const o = t.target.value.name;
-    v(o === X.name ? "" : o);
-  }, []), Wl = e.useCallback(() => {
-    i(T(a, I(r.data, "bar"))), v("");
-  }, [a, r.data]), Kl = e.useCallback(() => {
-    const t = T(a, I(r.data, "bar"));
-    i(c(t, s.stacked, q)), v("");
-  }, [a, r.data]), Dl = e.useCallback(() => {
-    const t = T(a, I(r.data, "bar"));
-    i(c(t, s.stacked, J)), v("");
-  }, [a, r.data]), Hl = e.useCallback(() => {
-    i(T(a, I(r.data, "column"))), v("");
-  }, [a, r.data]), Ol = e.useCallback(() => {
-    const t = T(a, I(r.data, "column"));
-    i(c(t, s.stacked, q)), v("");
-  }, [a, r.data]), Xl = e.useCallback(() => {
-    const t = T(a, I(r.data, "column"));
-    i(c(t, s.stacked, J)), v("");
-  }, [a, r.data]), Gl = e.useCallback(() => {
-    i(T(a, I(r.data, "line"))), v("");
-  }, [a, r.data]), Yl = e.useCallback(() => {
-    const t = T(a, I(r.data, "line"));
-    i(c(t, s.stacked, q)), v("");
-  }, [a, r.data]), jl = e.useCallback(() => {
-    const t = T(a, I(r.data, "line"));
-    i(c(t, s.stacked, J)), v("");
-  }, [a, r.data]), Ul = e.useCallback(() => {
-    i(T(a, I(r.data, "pie"))), v("");
-  }, [a, r.data]), $l = e.useCallback(() => {
-    i(T(a, I(r.data, "scatter"))), v("");
-  }, [a, r.data]), ql = e.useCallback((t) => {
-    i(c(a, s.categoryAxisX, t.target.value));
-  }, [a]), Jl = e.useCallback((t) => {
-    i(c(a, s.seriesChange, t));
-  }, [a]), Ql = e.useCallback((t) => {
-    i(c(a, s.valueAxisY, t.target.value));
-  }, [a]), Zl = e.useCallback((t) => {
-    i(c(a, s.areaMarginLeft, t.target.value));
-  }, [a]), _l = e.useCallback((t) => {
-    i(c(a, s.areaMarginRight, t.target.value));
-  }, [a]), en = e.useCallback((t) => {
-    i(c(a, s.areaMarginTop, t.target.value));
-  }, [a]), tn = e.useCallback((t) => {
-    i(c(a, s.areaMarginBottom, t.target.value));
-  }, [a]), N = a.area.margin, an = e.useCallback((t) => {
-    i(c(a, s.areaBackground, t.value));
-  }, [a]), [y, ln] = e.useState(h[0]), nn = e.useCallback((t) => {
-    ln(t.target.value);
-  }, []), on = e.useCallback((t) => {
-    const o = y.value === h[0].value ? s.titleText : s.subtitleText;
-    i(c(a, o, t.target.value));
-  }, [a, y]), rn = e.useCallback((t) => {
-    const o = y.value === h[0].value ? s.titleFontName : s.subtitleFontName, g = t.target.value || u;
-    i(c(a, o, g.value));
-  }, [a, y]), sn = e.useCallback((t) => {
-    const o = y.value === h[0].value ? s.titleFontSize : s.subtitleFontSize, g = t.target.value || u;
-    W(g) && i(c(a, o, g.value));
-  }, [a, y]), cn = e.useCallback((t) => {
-    const o = y.value === h[0].value ? s.titleColor : s.subtitleColor;
-    i(c(a, o, t.value));
-  }, [a, y]), O = (y.value === h[0].value ? a.title : a.subtitle) || { text: "", font: "", color: "" }, gn = e.useCallback((t) => {
-    f && i(c(a, s.seriesColor, { seriesName: f, color: t.value }));
-  }, [a, f]), dn = e.useCallback((t) => {
-    i(c(a, s.seriesLabel, { seriesName: f, all: !f, visible: t.value }));
-  }, [a, f]), un = e.useCallback((t) => {
-    i(c(a, s.legendVisible, t.value));
-  }, [a]), mn = e.useCallback((t) => {
-    const o = t.target.value || u;
-    W(o) && i(c(a, s.legendFontSize, o.value));
-  }, [a]), xn = e.useCallback((t) => {
-    const o = t.target.value || u;
-    i(c(a, s.legendFontName, o.value));
-  }, [a]), Cn = e.useCallback((t) => {
-    i(c(a, s.legendColor, t.value));
-  }, [a]), bn = e.useCallback((t) => {
-    const o = t.target.value;
-    i(c(a, s.legendPosition, o.value));
-  }, [a]), hn = e.useCallback((t) => {
-    i(c(a, s.categoryAxisTitleText, t.target.value));
-  }, [a]), fn = e.useCallback((t) => {
-    const o = t.target.value || u;
-    W(o) && i(c(a, s.categoryAxisTitleFontSize, o.value));
-  }, [a]), vn = e.useCallback((t) => {
-    const o = t.target.value || u;
-    i(c(a, s.categoryAxisTitleFontName, o.value));
-  }, [a]), Sn = e.useCallback((t) => {
-    i(c(a, s.categoryAxisTitleColor, t.value));
-  }, [a]), Ln = e.useCallback((t) => {
-    const o = t.target.value || u;
-    W(o) && i(c(a, s.categoryAxisLabelsFontSize, o.value));
-  }, [a]), En = e.useCallback((t) => {
-    const o = t.target.value || u;
-    i(c(a, s.categoryAxisLabelsFontName, o.value));
-  }, [a]), kn = e.useCallback((t) => {
-    i(c(a, s.categoryAxisLabelsColor, t.value));
-  }, [a]), An = e.useCallback((t) => {
-    i(c(a, s.categoryAxisLabelsRotation, t.target.value));
-  }, [a]), pn = e.useCallback((t) => {
-    i(c(a, s.categoryAxisReverseOrder, t.value));
-  }, [a]), yn = e.useCallback((t) => {
-    i(c(a, s.valueAxisTitleText, t.target.value));
-  }, [a]), Tn = e.useCallback((t) => {
-    const o = t.target.value || u;
-    W(o) && i(c(a, s.valueAxisTitleFontSize, o.value));
-  }, [a]), In = e.useCallback((t) => {
-    const o = t.target.value || u;
-    i(c(a, s.valueAxisTitleFontName, o.value));
-  }, [a]), Fn = e.useCallback((t) => {
-    i(c(a, s.valueAxisTitleColor, t.value));
-  }, [a]), Nn = e.useCallback((t) => {
-    const o = t.target.value || u;
-    W(o) && i(c(a, s.valueAxisLabelsFontSize, o.value));
-  }, [a]), wn = e.useCallback((t) => {
-    const o = t.target.value || u;
-    i(c(a, s.valueAxisLabelsFontName, o.value));
-  }, [a]), zn = e.useCallback((t) => {
-    i(c(a, s.valueAxisLabelsColor, t.value));
-  }, [a]), Pn = e.useCallback((t) => {
-    i(c(a, s.valueAxisLabelsRotation, t.target.value));
-  }, [a]), Vn = e.useCallback((t) => {
-    const o = t.target.value;
-    i(c(a, s.valueAxisLabelsFormat, o.value));
-  }, [a]), m = a.seriesType, D = typeof ((me = a.series[0]) == null ? void 0 : me.stack) == "object" ? (xe = a.series[0]) == null ? void 0 : xe.stack : !1, G = D === !1, Y = D && D.type === "normal", j = D && D.type === "100%";
+  e.useImperativeHandle(g, L), e.useEffect(() => {
+    l.current && l.current.seriesType && p(V(l.current, O(r.data, l.current.seriesType)));
+  }, [r.data]);
+  const u = t.seriesType;
   return /* @__PURE__ */ e.createElement(
-    Mn,
+    h,
     {
-      title: l.toLanguageString(mt, n[mt]),
+      title: o.toLanguageString(J, i.windowTitle),
       className: "k-chart-wizard",
       modal: !0,
       resizable: !0,
       minimizeButton: () => null,
       onClose: r.onClose,
-      onResize: nl,
-      stage: al,
-      onStageChange: ol,
-      ...el
+      onResize: C,
+      stage: x,
+      onStageChange: P,
+      ...E
     },
-    /* @__PURE__ */ e.createElement(
-      Qn,
+    /* @__PURE__ */ e.createElement(D, { panes: b, onChange: k, 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(
+      y,
       {
-        panes: rl,
-        onChange: sl,
-        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(
-        _n,
-        {
-          text: l.toLanguageString(xt, n[xt]),
-          fillMode: "flat",
-          svgIcon: eo,
-          icon: "export",
-          onItemClick: _a,
-          items: [
-            { svgIcon: to, icon: "file-pdf", exportHandler: po, text: l.toLanguageString(Ct, n[Ct]) },
-            { svgIcon: ao, icon: "file", exportHandler: yo, text: l.toLanguageString(bt, n[bt]) },
-            { svgIcon: lo, icon: "file-image", exportHandler: To, text: l.toLanguageString(ht, n[ht]) }
-          ]
-        }
-      )), /* @__PURE__ */ e.createElement("div", { className: "k-preview-pane-content", style: { height: "calc(100% - 50px)" } }, /* @__PURE__ */ e.createElement(
-        Rn,
-        {
-          style: { width: "100%", height: "100%" },
-          transitions: !1,
-          ref: H
-        },
-        /* @__PURE__ */ e.createElement(
-          Bn,
-          {
-            text: (Ce = a.title) == null ? void 0 : Ce.text,
-            font: (be = a.title) == null ? void 0 : be.font,
-            color: ((he = a.title) == null ? void 0 : he.color) || "#000"
-          }
-        ),
-        /* @__PURE__ */ e.createElement(
-          Wn,
-          {
-            text: (fe = a.subtitle) == null ? void 0 : fe.text,
-            font: (ve = a.subtitle) == null ? void 0 : ve.font,
-            color: ((Se = a.subtitle) == null ? void 0 : Se.color) || "#000"
-          }
-        ),
-        /* @__PURE__ */ e.createElement(Kn, { background: (Le = a.area) == null ? void 0 : Le.background, margin: N }),
-        a.categoryAxis && /* @__PURE__ */ e.createElement(Dn, null, a.categoryAxis.map((t, o) => /* @__PURE__ */ e.createElement(
-          Hn,
-          {
-            key: o,
-            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(On, null, a.valueAxis.map((t, o) => /* @__PURE__ */ e.createElement(
-          Xn,
-          {
-            key: o,
-            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(Gn, null, a.series.map((t, o) => /* @__PURE__ */ e.createElement(
-          Yn,
-          {
-            key: String(t.name) + o,
-            ...t
-          }
-        ))),
-        /* @__PURE__ */ e.createElement(jn, null, a.categoryAxis.map((t, o) => /* @__PURE__ */ e.createElement(
-          Un,
-          {
-            key: o,
-            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($n, null, a.valueAxis.map((t, o) => /* @__PURE__ */ e.createElement(
-          qn,
-          {
-            key: o,
-            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: (Ee = a.legend) == null ? void 0 : Ee.visible,
-            position: (ke = a.legend) == null ? void 0 : ke.position,
-            labels: {
-              color: ((pe = (Ae = a.legend) == null ? void 0 : Ae.labels) == null ? void 0 : pe.color) || void 0,
-              font: ((Te = (ye = a.legend) == null ? void 0 : ye.labels) == null ? void 0 : Te.font) || void 0
-            }
-          }
-        )
-      ))),
-      /* @__PURE__ */ e.createElement("div", { className: "k-chart-wizard-property-pane k-pane k-pane-static" }, /* @__PURE__ */ e.createElement(Zn, { selected: Pl, onSelect: Ml, animation: !1 }, /* @__PURE__ */ e.createElement(U, { title: l.toLanguageString(ft, n[ft]) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: l.toLanguageString(vt, n[vt]),
-          expanded: ee,
-          tabIndex: 0,
-          onAction: gl
-        },
-        /* @__PURE__ */ e.createElement(E, null, ee && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement("div", { className: "k-chart-types-wrapper" }, /* @__PURE__ */ e.createElement(F, { selected: m === "bar" && G, onClick: Wl, icon: no, iconName: "chart-bar-clustered" }, l.toLanguageString(St, n[St])), /* @__PURE__ */ e.createElement(F, { selected: m === "bar" && Y, onClick: Kl, icon: oo, iconName: "chart-bar-stacked" }, l.toLanguageString(Lt, n[Lt])), /* @__PURE__ */ e.createElement(F, { selected: m === "bar" && j, onClick: Dl, icon: ro, iconName: "chart-bar-stacked100" }, l.toLanguageString(Et, n[Et])))))
-      ), /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: l.toLanguageString(kt, n[kt]),
-          expanded: te,
-          tabIndex: 0,
-          onAction: ul
-        },
-        /* @__PURE__ */ e.createElement(E, null, te && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement("div", { className: "k-chart-types-wrapper" }, /* @__PURE__ */ e.createElement(F, { selected: m === "pie", onClick: Ul, icon: io, iconName: "chart-pie" }, l.toLanguageString(At, n[At])))))
-      ), /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: l.toLanguageString(pt, n[pt]),
-          expanded: ae,
-          tabIndex: 0,
-          onAction: xl
-        },
-        /* @__PURE__ */ e.createElement(E, null, ae && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement("div", { className: "k-chart-types-wrapper" }, /* @__PURE__ */ e.createElement(F, { selected: m === "column" && G, onClick: Hl, icon: so, iconName: "chart-column-clustered" }, l.toLanguageString(yt, n[yt])), /* @__PURE__ */ e.createElement(F, { selected: m === "column" && Y, onClick: Ol, icon: co, iconName: "chart-column-stacked" }, l.toLanguageString(Tt, n[Tt])), /* @__PURE__ */ e.createElement(F, { selected: m === "column" && j, onClick: Xl, icon: go, iconName: "chart-column-stacked100" }, l.toLanguageString(It, n[It])))))
-      ), /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: l.toLanguageString(Ft, n[Ft]),
-          expanded: le,
-          tabIndex: 0,
-          onAction: bl
-        },
-        /* @__PURE__ */ e.createElement(E, null, le && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement("div", { className: "k-chart-types-wrapper" }, /* @__PURE__ */ e.createElement(F, { selected: m === "line" && G, onClick: Gl, icon: uo, iconName: "chart-line" }, l.toLanguageString(Nt, n[Nt])), /* @__PURE__ */ e.createElement(F, { selected: m === "line" && Y, onClick: Yl, icon: mo, iconName: "chart-line-stacked" }, l.toLanguageString(wt, n[wt])), /* @__PURE__ */ e.createElement(F, { selected: m === "line" && j, onClick: jl, icon: xo, iconName: "chart-line-stacked100" }, l.toLanguageString(zt, n[zt])))))
-      ), /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: l.toLanguageString(Pt, n[Pt]),
-          expanded: ne,
-          tabIndex: 0,
-          onAction: fl
-        },
-        /* @__PURE__ */ e.createElement(E, null, ne && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement("div", { className: "k-chart-types-wrapper" }, /* @__PURE__ */ e.createElement(F, { selected: m === "scatter", onClick: $l, icon: Co, iconName: "chart-scatter" }, l.toLanguageString(Vt, n[Vt])))))
-      ))), /* @__PURE__ */ e.createElement(U, { title: l.toLanguageString(Mt, n[Mt]) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: l.toLanguageString(Rt, n[Rt]),
-          expanded: oe,
-          tabIndex: 0,
-          onAction: Sl
-        },
-        /* @__PURE__ */ e.createElement(E, null, oe && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(V, null, /* @__PURE__ */ e.createElement(
-          w,
-          {
-            legend: m === "scatter" ? l.toLanguageString(Bt, n[Bt]) : l.toLanguageString(Wt, n[Wt])
+        text: o.toLanguageString(K, i.exportButton),
+        fillMode: "flat",
+        svgIcon: R,
+        icon: "export",
+        onItemClick: f,
+        items: [
+          {
+            svgIcon: W,
+            icon: "file-pdf",
+            exportHandler: M,
+            text: o.toLanguageString(Q, i.exportPDFButton)
           },
-          /* @__PURE__ */ e.createElement(
-            R,
-            {
-              data: a.columns || [],
-              value: a.categoryField,
-              onChange: ql,
-              ...x
-            }
-          )
-        ), tt(m) && /* @__PURE__ */ e.createElement(w, { legend: l.toLanguageString(Kt, n[Kt]) }, /* @__PURE__ */ e.createElement(
-          bo,
-          {
-            data: a.series,
-            initialData: a.initialSeries,
-            onChange: Jl
-          }
-        )), m === "pie" && /* @__PURE__ */ e.createElement(w, { legend: l.toLanguageString(Dt, n[Dt]) }, /* @__PURE__ */ e.createElement(
-          R,
-          {
-            data: a.columns || [],
-            value: a.valueField || "",
-            ...x,
-            onChange: Ql
-          }
-        )))))
-      ))), /* @__PURE__ */ e.createElement(U, { title: l.toLanguageString(Ht, n[Ht]) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: l.toLanguageString(Ot, n[Ot]),
-          expanded: re,
-          tabIndex: 0,
-          onAction: El
-        },
-        /* @__PURE__ */ e.createElement(E, null, re && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(V, null, /* @__PURE__ */ e.createElement(w, { legend: l.toLanguageString(Xt, n[Xt]) }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(d, { labelText: l.toLanguageString(Gt, n[Gt]), editorId: "left" }, /* @__PURE__ */ e.createElement(
-          B,
-          {
-            id: "left",
-            value: N.left !== void 0 ? N.left : null,
-            onChange: Zl,
-            placeholder: l.toLanguageString(P, n[P]),
-            min: 0,
-            max: 1e3,
-            step: 1,
-            fillMode: "outline"
-          }
-        )), /* @__PURE__ */ e.createElement(d, { labelText: l.toLanguageString(Yt, n[Yt]), editorId: "right" }, /* @__PURE__ */ e.createElement(
-          B,
-          {
-            id: "right",
-            value: N.right !== void 0 ? N.right : null,
-            onChange: _l,
-            placeholder: l.toLanguageString(P, n[P]),
-            min: 0,
-            max: 1e3,
-            step: 1,
-            fillMode: "outline"
-          }
-        )), /* @__PURE__ */ e.createElement(d, { labelText: l.toLanguageString(jt, n[jt]), editorId: "top" }, /* @__PURE__ */ e.createElement(
-          B,
-          {
-            id: "top",
-            value: N.top !== void 0 ? N.top : null,
-            onChange: en,
-            placeholder: l.toLanguageString(P, n[P]),
-            min: 0,
-            max: 1e3,
-            step: 1,
-            fillMode: "outline"
-          }
-        )), /* @__PURE__ */ e.createElement(d, { labelText: l.toLanguageString(Ut, n[Ut]), editorId: "bottom" }, /* @__PURE__ */ e.createElement(
-          B,
-          {
-            id: "bottom",
-            value: N.bottom !== void 0 ? N.bottom : null,
-            onChange: tn,
-            placeholder: l.toLanguageString(P, n[P]),
-            min: 0,
-            max: 1e3,
-            step: 1,
-            fillMode: "outline"
-          }
-        )))), /* @__PURE__ */ e.createElement(w, { legend: l.toLanguageString($t, n[$t]) }, /* @__PURE__ */ e.createElement(d, { labelText: l.toLanguageString(qt, n[qt]), editorId: "background" }, /* @__PURE__ */ e.createElement(
-          z,
-          {
-            id: "background",
-            value: ((Ie = a.area) == null ? void 0 : Ie.background) || "",
-            onChange: an,
-            view: "gradient",
-            fillMode: "outline"
-          }
-        ))))))
-      ), /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: l.toLanguageString(Jt, n[Jt]),
-          expanded: ie,
-          tabIndex: 0,
-          onAction: Al
-        },
-        /* @__PURE__ */ e.createElement(E, null, ie && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(V, null, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2", editorId: "apply-to-title", labelText: l.toLanguageString(Qt, n[Qt]) }, /* @__PURE__ */ e.createElement(
-          R,
-          {
-            id: "apply-to-title",
-            data: h,
-            textField: "text",
-            dataItemKey: "value",
-            value: h.find((t) => t.value === y.value),
-            onChange: nn,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2", editorId: "titleText", labelText: l.toLanguageString(Zt, n[Zt]) }, /* @__PURE__ */ e.createElement(
-          $,
-          {
-            id: "titleText",
-            placeholder: y.value === h[0].value ? h[0].text : h[1].text,
-            value: O.text,
-            onChange: on
-          }
-        )), /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2", editorId: "titleFont", labelText: l.toLanguageString(_t, n[_t]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "titleFont",
-            data: A,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(ea, n[ea]),
-            value: A.find((t) => t.value === p(O.font).name) || u,
-            onChange: rn,
-            itemRender: M,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "titleFontSize", labelText: l.toLanguageString(ta, n[ta]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "titleFontSize",
-            data: b,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(aa, n[aa]),
-            value: b.find((t) => t.value === p(O.font).size) || u,
-            onChange: sn,
-            itemRender: M,
-            allowCustom: !0,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "titleColor", labelText: l.toLanguageString(la, n[la]) }, /* @__PURE__ */ e.createElement(
-          z,
-          {
-            id: "titleColor",
-            value: O.color || "",
-            onChange: cn,
-            view: "gradient",
-            fillMode: "outline"
-          }
-        ))))))
-      ), /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: l.toLanguageString(na, n[na]),
-          expanded: se,
-          tabIndex: 0,
-          onAction: yl
-        },
-        /* @__PURE__ */ e.createElement(E, null, se && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(V, null, /* @__PURE__ */ e.createElement(d, { editorId: "apply-to-series", labelText: l.toLanguageString(oa, n[oa]) }, /* @__PURE__ */ e.createElement(
-          R,
-          {
-            id: "apply-to-series",
-            data: a.series,
-            textField: "name",
-            dataItemKey: "name",
-            defaultItem: X,
-            disabled: !tt(m),
-            value: a.series.find((t) => t.name === f) || X,
-            onChange: Bl,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "seriesColor", labelText: l.toLanguageString(ra, n[ra]) }, /* @__PURE__ */ e.createElement(
-          z,
-          {
-            id: "seriesColor",
-            value: f ? (Fe = a.series.find((t) => t.name === f)) == null ? void 0 : Fe.color : "",
-            onChange: gn,
-            disabled: !f,
-            view: "gradient",
-            fillMode: "outline"
-          }
-        )), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(
-          et,
           {
-            label: l.toLanguageString(ia, n[ia]),
-            checked: f ? (we = (Ne = a.series.find((t) => t.name === f)) == null ? void 0 : Ne.labels) == null ? void 0 : we.visible : a.series.every((t) => {
-              var o;
-              return (o = t.labels) == null ? void 0 : o.visible;
-            }),
-            onChange: dn
-          }
-        )))))
-      ), /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: l.toLanguageString(sa, n[sa]),
-          expanded: ce,
-          tabIndex: 0,
-          onAction: Il
-        },
-        /* @__PURE__ */ e.createElement(E, null, ce && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(V, null, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(Za, { editorId: "show-legend" }, l.toLanguageString(ca, n[ca])), /* @__PURE__ */ e.createElement(
-          ho,
-          {
-            id: "show-legend",
-            checked: (ze = a.legend) == null ? void 0 : ze.visible,
-            onChange: un
-          }
-        ), /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2", editorId: "legendLabelsFont", labelText: l.toLanguageString(ga, n[ga]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "legendLabelsFont",
-            data: A,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(da, n[da]),
-            value: A.find((t) => {
-              var o, g, C;
-              return t.value === ((C = p(((g = (o = a.legend) == null ? void 0 : o.labels) == null ? void 0 : g.font) || "")) == null ? void 0 : C.name);
-            }) || u,
-            onChange: xn,
-            itemRender: M,
-            disabled: ((Pe = a.legend) == null ? void 0 : Pe.visible) === !1,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "legendLabelsSize", labelText: l.toLanguageString(ua, n[ua]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "legendLabelsSize",
-            data: b,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(ma, n[ma]),
-            value: b.find((t) => {
-              var o, g, C;
-              return t.value === ((C = p(((g = (o = a.legend) == null ? void 0 : o.labels) == null ? void 0 : g.font) || "")) == null ? void 0 : C.size);
-            }) || u,
-            onChange: mn,
-            disabled: ((Ve = a.legend) == null ? void 0 : Ve.visible) === !1,
-            allowCustom: !0,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "legendLabelsColor", labelText: l.toLanguageString(xa, n[xa]) }, /* @__PURE__ */ e.createElement(
-          z,
-          {
-            id: "legendLabelsColor",
-            value: ((Re = (Me = a.legend) == null ? void 0 : Me.labels) == null ? void 0 : Re.color) || "",
-            onChange: Cn,
-            disabled: ((Be = a.legend) == null ? void 0 : Be.visible) === !1,
-            view: "gradient",
-            fillMode: "outline"
-          }
-        )), /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2", editorId: "legendPosition", labelText: l.toLanguageString(Ca, n[Ca]) }, /* @__PURE__ */ e.createElement(
-          R,
-          {
-            id: "legendPosition",
-            data: Q,
-            textField: "text",
-            dataItemKey: "value",
-            value: Q.find((t) => {
-              var o;
-              return t.value === ((o = a.legend) == null ? void 0 : o.position);
-            }),
-            onChange: bn,
-            disabled: ((We = a.legend) == null ? void 0 : We.visible) === !1,
-            ...x
-          }
-        ))))))
-      ), m !== "pie" && /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: m === "scatter" ? l.toLanguageString(ba, n[ba]) : l.toLanguageString(ha, n[ha]),
-          expanded: ge,
-          tabIndex: 0,
-          onAction: Nl
-        },
-        /* @__PURE__ */ e.createElement(E, null, ge && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(V, null, /* @__PURE__ */ e.createElement(w, { legend: l.toLanguageString(fa, n[fa]) }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
-          $,
-          {
-            placeholder: l.toLanguageString(va, n[va]),
-            value: ((Ke = a.categoryAxis[0].title) == null ? void 0 : Ke.text) || "",
-            onChange: hn
-          }
-        )), /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2", editorId: "categoryAxisTitleFont", labelText: l.toLanguageString(Sa, n[Sa]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "categoryAxisTitleFont",
-            data: A,
-            textField: "text",
-            dataItemKey: "value",
-            itemRender: M,
-            placeholder: l.toLanguageString(La, n[La]),
-            value: A.find((t) => {
-              var o, g;
-              return t.value === ((g = p(((o = a.categoryAxis[0].title) == null ? void 0 : o.font) || "")) == null ? void 0 : g.name);
-            }) || u,
-            onChange: vn,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "categoryAxisTitleFontSize", labelText: l.toLanguageString(Ea, n[Ea]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "categoryAxisTitleFontSize",
-            data: b,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(ka, n[ka]),
-            value: b.find((t) => {
-              var o, g;
-              return t.value === ((g = p(((o = a.categoryAxis[0].title) == null ? void 0 : o.font) || "")) == null ? void 0 : g.size);
-            }) || u,
-            onChange: fn,
-            allowCustom: !0,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "categoryAxisTitleColor", labelText: l.toLanguageString(Aa, n[Aa]) }, /* @__PURE__ */ e.createElement(
-          z,
-          {
-            id: "categoryAxisTitleColor",
-            view: "gradient",
-            value: ((De = a.categoryAxis[0].title) == null ? void 0 : De.color) || "",
-            onChange: Sn,
-            fillMode: "outline"
-          }
-        )))), /* @__PURE__ */ e.createElement(w, { legend: l.toLanguageString(pa, n[pa]) }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2", editorId: "categoryAxisLabelsFont", labelText: l.toLanguageString(ya, n[ya]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "categoryAxisLabelsFont",
-            data: A,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(Ta, n[Ta]),
-            value: A.find((t) => {
-              var o, g;
-              return t.value === ((g = p(((o = a.categoryAxis[0].labels) == null ? void 0 : o.font) || "")) == null ? void 0 : g.name);
-            }) || u,
-            onChange: En,
-            itemRender: M,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "categoryAxisLabelsFontSize", labelText: l.toLanguageString(Ia, n[Ia]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "categoryAxisLabelsFontSize",
-            data: b,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(Fa, n[Fa]),
-            value: b.find((t) => {
-              var o, g;
-              return t.value === ((g = p(((o = a.categoryAxis[0].labels) == null ? void 0 : o.font) || "")) == null ? void 0 : g.size);
-            }) || u,
-            onChange: Ln,
-            allowCustom: !0,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "categoryAxisLabelsColor", labelText: l.toLanguageString(Na, n[Na]) }, /* @__PURE__ */ e.createElement(
-          z,
-          {
-            id: "categoryAxisLabelsColor",
-            view: "gradient",
-            value: ((He = a.categoryAxis[0].labels) == null ? void 0 : He.color) || "",
-            onChange: kn,
-            fillMode: "outline"
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "categoryAxisLabelsRotation", labelText: l.toLanguageString(wa, n[wa]) }, /* @__PURE__ */ e.createElement(
-          B,
-          {
-            id: "categoryAxisLabelsRotation",
-            value: typeof ((Oe = a.categoryAxis[0].labels) == null ? void 0 : Oe.rotation) == "number" ? (Xe = a.categoryAxis[0].labels) == null ? void 0 : Xe.rotation : null,
-            placeholder: l.toLanguageString(za, n[za]),
-            onChange: An,
-            fillMode: "outline",
-            min: -360,
-            max: 360,
-            step: 1
-          }
-        )), /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
-          et,
-          {
-            label: l.toLanguageString(Pa, n[Pa]),
-            checked: a.categoryAxis[0].reverse || !1,
-            onChange: pn
-          }
-        )))))))
-      ), m !== "pie" && /* @__PURE__ */ e.createElement(
-        S,
-        {
-          style: { maxWidth: "576px" },
-          title: m === "scatter" ? l.toLanguageString(Va, n[Va]) : l.toLanguageString(Ma, n[Ma]),
-          expanded: de,
-          tabIndex: 0,
-          onAction: zl
-        },
-        /* @__PURE__ */ e.createElement(E, null, de && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(V, null, /* @__PURE__ */ e.createElement(w, { legend: l.toLanguageString(Ra, n[Ra]) }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
-          $,
-          {
-            placeholder: l.toLanguageString(Ba, n[Ba]),
-            value: ((Ye = (Ge = a.valueAxis[0]) == null ? void 0 : Ge.title) == null ? void 0 : Ye.text) || "",
-            onChange: yn
-          }
-        )), /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2", editorId: "valueAxisTitleFont", labelText: l.toLanguageString(Wa, n[Wa]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "valueAxisTitleFont",
-            data: A,
-            textField: "text",
-            dataItemKey: "value",
-            itemRender: M,
-            placeholder: l.toLanguageString(Ka, n[Ka]),
-            value: A.find((t) => {
-              var o, g, C;
-              return t.value === ((C = p(((g = (o = a.valueAxis[0]) == null ? void 0 : o.title) == null ? void 0 : g.font) || "")) == null ? void 0 : C.name);
-            }) || u,
-            onChange: In,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "valueAxisTitleFontSize", labelText: l.toLanguageString(Da, n[Da]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "valueAxisTitleFontSize",
-            data: b,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(Ha, n[Ha]),
-            value: b.find((t) => {
-              var o, g, C;
-              return t.value === ((C = p(((g = (o = a.valueAxis[0]) == null ? void 0 : o.title) == null ? void 0 : g.font) || "")) == null ? void 0 : C.size);
-            }) || u,
-            onChange: Tn,
-            allowCustom: !0,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "valueAxisTitleColor", labelText: l.toLanguageString(Oa, n[Oa]) }, /* @__PURE__ */ e.createElement(
-          z,
-          {
-            id: "valueAxisTitleColor",
-            view: "gradient",
-            value: ((Ue = (je = a.valueAxis[0]) == null ? void 0 : je.title) == null ? void 0 : Ue.color) || "",
-            onChange: Fn,
-            fillMode: "outline"
-          }
-        )))), /* @__PURE__ */ e.createElement(w, { 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(d, { className: "k-col-span-2", editorId: "valueAxisLabelsFormat", labelText: l.toLanguageString(Ga, n[Ga]) }, /* @__PURE__ */ e.createElement(
-          R,
-          {
-            id: "valueAxisLabelsFormat",
-            data: _,
-            textField: "text",
-            dataItemKey: "value",
-            defaultItem: Z,
-            value: _.find((t) => {
-              var o, g;
-              return t.value === ((g = (o = a.valueAxis[0]) == null ? void 0 : o.labels) == null ? void 0 : g.format);
-            }) || Z,
-            onChange: Vn,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { className: "k-col-span-2", editorId: "valueAxisLabelsFont", labelText: l.toLanguageString(Ya, n[Ya]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "valueAxisLabelsFont",
-            data: A,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(ja, n[ja]),
-            value: A.find((t) => {
-              var o, g, C;
-              return t.value === ((C = p(((g = (o = a.valueAxis[0]) == null ? void 0 : o.labels) == null ? void 0 : g.font) || "")) == null ? void 0 : C.name);
-            }) || u,
-            onChange: wn,
-            itemRender: M,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "valueAxisLabelsFontSize", labelText: l.toLanguageString(Ua, n[Ua]) }, /* @__PURE__ */ e.createElement(
-          k,
-          {
-            id: "valueAxisLabelsFontSize",
-            data: b,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString($a, n[$a]),
-            value: b.find((t) => {
-              var o, g, C;
-              return t.value === ((C = p(((g = (o = a.valueAxis[0]) == null ? void 0 : o.labels) == null ? void 0 : g.font) || "")) == null ? void 0 : C.size);
-            }) || u,
-            onChange: Nn,
-            allowCustom: !0,
-            ...x
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "valueAxisLabelsColor", labelText: l.toLanguageString(qa, n[qa]) }, /* @__PURE__ */ e.createElement(
-          z,
-          {
-            id: "valueAxisLabelsColor",
-            view: "gradient",
-            value: ((qe = ($e = a.valueAxis[0]) == null ? void 0 : $e.labels) == null ? void 0 : qe.color) || "",
-            onChange: zn,
-            fillMode: "outline"
-          }
-        )), /* @__PURE__ */ e.createElement(d, { editorId: "valueAxisLabelsRotation", labelText: l.toLanguageString(Ja, n[Ja]) }, /* @__PURE__ */ e.createElement(
-          B,
+            svgIcon: F,
+            icon: "file",
+            exportHandler: U,
+            text: o.toLanguageString(X, i.exportSVGButton)
+          },
           {
-            id: "valueAxisLabelsRotation",
-            value: typeof ((Qe = (Je = a.valueAxis[0]) == null ? void 0 : Je.labels) == null ? void 0 : Qe.rotation) == "number" ? (_e = (Ze = a.valueAxis[0]) == null ? void 0 : Ze.labels) == null ? void 0 : _e.rotation : null,
-            placeholder: l.toLanguageString(Qa, n[Qa]),
-            onChange: Pn,
-            fillMode: "outline",
-            min: -360,
-            max: 360,
-            step: 1
+            svgIcon: H,
+            icon: "file-image",
+            exportHandler: j,
+            text: o.toLanguageString(Y, i.exportPNGButton)
           }
-        )))))))
-      )))))
-    )
+        ]
+      }
+    )), /* @__PURE__ */ e.createElement("div", { className: "k-preview-pane-content", style: { height: "calc(100% - 50px)" } }, /* @__PURE__ */ e.createElement(de, { ref: c, state: t }))), /* @__PURE__ */ e.createElement("div", { className: "k-chart-wizard-property-pane k-pane k-pane-static" }, /* @__PURE__ */ e.createElement(N, { selected: z, onSelect: T, animation: !1 }, /* @__PURE__ */ e.createElement(s, { title: o.toLanguageString(Z, i.tabChart) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(ce, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(ue, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(me, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(se, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(pe, { state: t, onStateChange: a }))), /* @__PURE__ */ e.createElement(s, { title: o.toLanguageString(_, i.tabData) }, /* @__PURE__ */ e.createElement(te, { state: t, onStateChange: a })), /* @__PURE__ */ e.createElement(s, { title: o.toLanguageString($, i.tabFormat) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(ae, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(ne, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(re, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(oe, { state: t, onStateChange: a }), u !== "pie" && /* @__PURE__ */ e.createElement(ie, { state: t, onStateChange: a }), u !== "pie" && /* @__PURE__ */ e.createElement(le, { state: t, onStateChange: a }))))))
   );
 });
-No.displayName = "ChartWizard";
+ge.displayName = "ChartWizard";
 export {
-  No as ChartWizard
+  ge as ChartWizard
 };