@progress/kendo-react-chart-wizard 9.4.0-develop.24 → 9.4.0-develop.4

package/components/panels/ChartAreaPanel.mjs

@@ -5,6 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import a from "react";
 import { ExpansionPanel as k, ExpansionPanelContent as S } from "@progress/kendo-react-layout";
 import { FormElement as b } from "@progress/kendo-react-form";
@@ -12,12 +13,12 @@ import { FormFieldSet as C } from "../FormFieldSet.mjs";
 import { FormField as g } from "../FormField.mjs";
 import { NumericTextBox as u, ColorPicker as v } from "@progress/kendo-react-inputs";
 import { updateState as i, ActionTypes as m, stopPropagation as L } from "../../utils.mjs";
-import { formatChartArea as B, messages as r, formatChartAreaMargins as T, formatChartAreaMarginsLeft as I, formatChartAreaMarginsAuto as d, formatChartAreaMarginsRight as R, formatChartAreaMarginsTop as F, formatChartAreaMarginsBottom as P, formatChartAreaBackground as y, formatChartAreaBackgroundColor as w } from "../../messages.mjs";
+import { formatChartArea as B, messages as r, formatChartAreaMargins as T, formatChartAreaMarginsLeft as I, formatChartAreaMarginsAuto as c, formatChartAreaMarginsRight as R, formatChartAreaMarginsTop as F, formatChartAreaMarginsBottom as P, formatChartAreaBackground as y, formatChartAreaBackgroundColor as w } from "../../messages.mjs";
 import { useLocalization as z } from "@progress/kendo-react-intl";
 import { Reveal as N } from "@progress/kendo-react-animation";
 const Q = (l) => {
   var h;
-  const e = z(), t = l.state, [c, s] = a.useState(!1), f = a.useCallback((o) => {
+  const e = z(), t = l.state, [d, s] = a.useState(!1), f = a.useCallback((o) => {
     s(!o.expanded);
   }, []), A = a.useCallback(
     (o) => {
@@ -50,11 +51,11 @@ const Q = (l) => {
     {
       style: { maxWidth: "576px" },
       title: e.toLanguageString(B, r.formatChartArea),
-      expanded: c,
+      expanded: d,
       tabIndex: 0,
       onAction: f
     },
-    /* @__PURE__ */ a.createElement(N, null, c && /* @__PURE__ */ a.createElement(S, null, /* @__PURE__ */ a.createElement(b, { onKeyDown: L }, /* @__PURE__ */ a.createElement(
+    /* @__PURE__ */ a.createElement(N, null, d && /* @__PURE__ */ a.createElement(S, null, /* @__PURE__ */ a.createElement(b, { onKeyDown: L }, /* @__PURE__ */ a.createElement(
       C,
       {
         legend: e.toLanguageString(
@@ -78,7 +79,7 @@ const Q = (l) => {
             value: n.left !== void 0 ? n.left : null,
             onChange: A,
             placeholder: e.toLanguageString(
-              d,
+              c,
               r.formatChartAreaMarginsAuto
             ),
             min: 0,
@@ -103,7 +104,7 @@ const Q = (l) => {
             value: n.right !== void 0 ? n.right : null,
             onChange: p,
             placeholder: e.toLanguageString(
-              d,
+              c,
               r.formatChartAreaMarginsAuto
             ),
             min: 0,
@@ -128,7 +129,7 @@ const Q = (l) => {
             value: n.top !== void 0 ? n.top : null,
             onChange: M,
             placeholder: e.toLanguageString(
-              d,
+              c,
               r.formatChartAreaMarginsAuto
             ),
             min: 0,
@@ -153,7 +154,7 @@ const Q = (l) => {
             value: n.bottom !== void 0 ? n.bottom : null,
             onChange: x,
             placeholder: e.toLanguageString(
-              d,
+              c,
               r.formatChartAreaMarginsAuto
             ),
             min: 0,

package/components/panels/ColumnChartPanel.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),b=require("@progress/kendo-react-animation"),f=require("@progress/kendo-react-intl"),m=require("@progress/kendo-react-layout"),t=require("../../utils.js"),E=require("../SeriesTypesWrap.js"),l=require("../SeriesTypeButton.js"),o=require("../../messages.js"),u=require("@progress/kendo-svg-icons");function q(n){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(c,e,s.get?s:{enumerable:!0,get:()=>n[e]})}}return c.default=n,Object.freeze(c)}const a=q(T),x=n=>{const c=f.useLocalization(),e=n.state,s=e.seriesType,{isStackFalse:S,isStackNormal:d,isStack100:C}=t.stackState(e),[i,g]=a.useState(!0),k=a.useCallback(r=>{g(!r.expanded)},[]),p=()=>{n.onStateChange(t.mergeStates(e,t.createState(e.data,"column")))},h=()=>{const r=t.mergeStates(e,t.createState(e.data,"column"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stackNormal))},y=()=>{const r=t.mergeStates(e,t.createState(e.data,"column"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stack100))};return a.createElement(m.ExpansionPanel,{style:{maxWidth:"576px"},title:c.toLanguageString(o.columnChart,o.messages.columnChart),expanded:i,tabIndex:0,onAction:k},a.createElement(b.Reveal,null,i&&a.createElement(m.ExpansionPanelContent,null,a.createElement(E.SeriesTypesWrap,null,a.createElement(l.SeriesTypeButton,{selected:s==="column"&&S,onClick:p,icon:u.chartColumnClusteredIcon,iconName:"chart-column-clustered"},c.toLanguageString(o.columnChartColumn,o.messages.columnChartColumn)),a.createElement(l.SeriesTypeButton,{selected:s==="column"&&d,onClick:h,icon:u.chartColumnStackedIcon,iconName:"chart-column-stacked"},c.toLanguageString(o.columnChartStackedColumn,o.messages.columnChartStackedColumn)),a.createElement(l.SeriesTypeButton,{selected:s==="column"&&C,onClick:y,icon:u.chartColumnStacked100Icon,iconName:"chart-column-stacked100"},c.toLanguageString(o.columnChart100StackedColumn,o.messages.columnChart100StackedColumn))))))};exports.ColumnChartPanel=x;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),b=require("@progress/kendo-react-animation"),f=require("@progress/kendo-react-intl"),m=require("@progress/kendo-react-layout"),t=require("../../utils.js"),E=require("../SeriesTypesWrap.js"),l=require("../SeriesTypeButton.js"),o=require("../../messages.js"),u=require("@progress/kendo-svg-icons");function q(n){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(c,e,s.get?s:{enumerable:!0,get:()=>n[e]})}}return c.default=n,Object.freeze(c)}const a=q(T),x=n=>{const c=f.useLocalization(),e=n.state,s=e.seriesType,{isStackFalse:S,isStackNormal:d,isStack100:C}=t.stackState(e),[i,g]=a.useState(!0),k=a.useCallback(r=>{g(!r.expanded)},[]),p=()=>{n.onStateChange(t.mergeStates(e,t.createState(e.data,"column")))},h=()=>{const r=t.mergeStates(e,t.createState(e.data,"column"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stackNormal))},y=()=>{const r=t.mergeStates(e,t.createState(e.data,"column"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stack100))};return a.createElement(m.ExpansionPanel,{style:{maxWidth:"576px"},title:c.toLanguageString(o.columnChart,o.messages.columnChart),expanded:i,tabIndex:0,onAction:k},a.createElement(b.Reveal,null,i&&a.createElement(m.ExpansionPanelContent,null,a.createElement(E.SeriesTypesWrap,null,a.createElement(l.SeriesTypeButton,{selected:s==="column"&&S,onClick:p,icon:u.chartColumnClusteredIcon,iconName:"chart-column-clustered"},c.toLanguageString(o.columnChartColumn,o.messages.columnChartColumn)),a.createElement(l.SeriesTypeButton,{selected:s==="column"&&d,onClick:h,icon:u.chartColumnStackedIcon,iconName:"chart-column-stacked"},c.toLanguageString(o.columnChartStackedColumn,o.messages.columnChartStackedColumn)),a.createElement(l.SeriesTypeButton,{selected:s==="column"&&C,onClick:y,icon:u.chartColumnStacked100Icon,iconName:"chart-column-stacked100"},c.toLanguageString(o.columnChart100StackedColumn,o.messages.columnChart100StackedColumn))))))};exports.ColumnChartPanel=x;

package/components/panels/ColumnChartPanel.mjs

@@ -5,7 +5,8 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as t from "react";
+"use client";
+import * as e from "react";
 import { Reveal as f } from "@progress/kendo-react-animation";
 import { useLocalization as y } from "@progress/kendo-react-intl";
 import { ExpansionPanel as T, ExpansionPanelContent as L } from "@progress/kendo-react-layout";
@@ -15,18 +16,18 @@ import { SeriesTypeButton as s } from "../SeriesTypeButton.mjs";
 import { columnChart as b, messages as c, columnChartColumn as w, columnChartStackedColumn as z, columnChart100StackedColumn as R } from "../../messages.mjs";
 import { chartColumnClusteredIcon as W, chartColumnStackedIcon as v, chartColumnStacked100Icon as B } from "@progress/kendo-svg-icons";
 const M = (a) => {
-  const o = y(), e = a.state, l = e.seriesType, { isStackFalse: d, isStackNormal: S, isStack100: h } = N(e), [u, k] = t.useState(!0), p = t.useCallback((n) => {
+  const o = y(), t = a.state, l = t.seriesType, { isStackFalse: d, isStackNormal: S, isStack100: h } = N(t), [u, k] = e.useState(!0), p = e.useCallback((n) => {
     k(!n.expanded);
   }, []), g = () => {
-    a.onStateChange(m(e, r(e.data, "column")));
+    a.onStateChange(m(t, r(t.data, "column")));
   }, x = () => {
-    const n = m(e, r(e.data, "column"));
+    const n = m(t, r(t.data, "column"));
     a.onStateChange(i(n, C.stacked, I));
   }, E = () => {
-    const n = m(e, r(e.data, "column"));
+    const n = m(t, r(t.data, "column"));
     a.onStateChange(i(n, C.stacked, A));
   };
-  return /* @__PURE__ */ t.createElement(
+  return /* @__PURE__ */ e.createElement(
     T,
     {
       style: { maxWidth: "576px" },
@@ -35,7 +36,7 @@ const M = (a) => {
       tabIndex: 0,
       onAction: p
     },
-    /* @__PURE__ */ t.createElement(f, null, u && /* @__PURE__ */ t.createElement(L, null, /* @__PURE__ */ t.createElement(P, null, /* @__PURE__ */ t.createElement(
+    /* @__PURE__ */ e.createElement(f, null, u && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(
       s,
       {
         selected: l === "column" && d,
@@ -44,7 +45,7 @@ const M = (a) => {
         iconName: "chart-column-clustered"
       },
       o.toLanguageString(w, c.columnChartColumn)
-    ), /* @__PURE__ */ t.createElement(
+    ), /* @__PURE__ */ e.createElement(
       s,
       {
         selected: l === "column" && S,
@@ -56,7 +57,7 @@ const M = (a) => {
         z,
         c.columnChartStackedColumn
       )
-    ), /* @__PURE__ */ t.createElement(
+    ), /* @__PURE__ */ e.createElement(
       s,
       {
         selected: l === "column" && h,

package/components/panels/ConfigurationPanel.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),x=require("@progress/kendo-react-form"),g=require("@progress/kendo-react-layout"),n=require("../../utils.js"),c=require("../FormFieldSet.js"),f=require("@progress/kendo-react-intl"),a=require("../../messages.js"),u=require("@progress/kendo-react-dropdowns"),A=require("../SeriesGrid.js"),y=require("@progress/kendo-react-animation"),E=r=>{const i=f.useLocalization(),t=r.state,s=t.seriesType,[l,d]=e.useState(!0),m=e.useCallback(o=>{d(!o.expanded)},[]),C=e.useCallback(o=>{r.onStateChange(n.updateState(t,n.ActionTypes.categoryAxisX,o.target.value))},[t]),S=e.useCallback(o=>{r.onStateChange(n.updateState(t,n.ActionTypes.seriesChange,o))},[t]),p=e.useCallback(o=>{r.onStateChange(n.updateState(t,n.ActionTypes.valueAxisY,o.target.value))},[t]);return e.createElement(g.ExpansionPanel,{style:{maxWidth:"576px"},title:i.toLanguageString(a.configuration,a.messages.configuration),expanded:l,tabIndex:0,onAction:m},e.createElement(y.Reveal,null,l&&e.createElement(g.ExpansionPanelContent,null,e.createElement(x.FormElement,{onKeyDown:n.stopPropagation},e.createElement(c.FormFieldSet,{legend:s==="scatter"?i.toLanguageString(a.configurationXAxis,a.messages.configurationXAxis):i.toLanguageString(a.configurationCategoryAxis,a.messages.configurationCategoryAxis)},e.createElement(u.DropDownList,{data:t.columns||[],value:t.categoryField,onChange:C,...n.dropdownlistCommonProps})),n.isCategorical(s)&&e.createElement(c.FormFieldSet,{legend:i.toLanguageString(a.configurationSeries,a.messages.configurationSeries)},e.createElement(A.SeriesGrid,{data:t.series,initialData:t.initialSeries,onChange:S})),s==="pie"&&e.createElement(c.FormFieldSet,{legend:i.toLanguageString(a.configurationValueAxis,a.messages.configurationValueAxis)},e.createElement(u.DropDownList,{data:t.columns||[],value:t.valueField||"",...n.dropdownlistCommonProps,onChange:p}))))))};exports.ConfigurationPanel=E;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),x=require("@progress/kendo-react-form"),g=require("@progress/kendo-react-layout"),n=require("../../utils.js"),c=require("../FormFieldSet.js"),f=require("@progress/kendo-react-intl"),a=require("../../messages.js"),u=require("@progress/kendo-react-dropdowns"),A=require("../SeriesGrid.js"),y=require("@progress/kendo-react-animation"),E=r=>{const i=f.useLocalization(),t=r.state,s=t.seriesType,[l,d]=e.useState(!0),m=e.useCallback(o=>{d(!o.expanded)},[]),C=e.useCallback(o=>{r.onStateChange(n.updateState(t,n.ActionTypes.categoryAxisX,o.target.value))},[t]),S=e.useCallback(o=>{r.onStateChange(n.updateState(t,n.ActionTypes.seriesChange,o))},[t]),p=e.useCallback(o=>{r.onStateChange(n.updateState(t,n.ActionTypes.valueAxisY,o.target.value))},[t]);return e.createElement(g.ExpansionPanel,{style:{maxWidth:"576px"},title:i.toLanguageString(a.configuration,a.messages.configuration),expanded:l,tabIndex:0,onAction:m},e.createElement(y.Reveal,null,l&&e.createElement(g.ExpansionPanelContent,null,e.createElement(x.FormElement,{onKeyDown:n.stopPropagation},e.createElement(c.FormFieldSet,{legend:s==="scatter"?i.toLanguageString(a.configurationXAxis,a.messages.configurationXAxis):i.toLanguageString(a.configurationCategoryAxis,a.messages.configurationCategoryAxis)},e.createElement(u.DropDownList,{data:t.columns||[],value:t.categoryField,onChange:C,...n.dropdownlistCommonProps})),n.isCategorical(s)&&e.createElement(c.FormFieldSet,{legend:i.toLanguageString(a.configurationSeries,a.messages.configurationSeries)},e.createElement(A.SeriesGrid,{data:t.series,initialData:t.initialSeries,onChange:S})),s==="pie"&&e.createElement(c.FormFieldSet,{legend:i.toLanguageString(a.configurationValueAxis,a.messages.configurationValueAxis)},e.createElement(u.DropDownList,{data:t.columns||[],value:t.valueField||"",...n.dropdownlistCommonProps,onChange:p}))))))};exports.ConfigurationPanel=E;

package/components/panels/ConfigurationPanel.mjs

@@ -5,6 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import e from "react";
 import { FormElement as S } from "@progress/kendo-react-form";
 import { ExpansionPanel as E, ExpansionPanelContent as A } from "@progress/kendo-react-layout";

package/components/panels/LegendPanel.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),C=require("@progress/kendo-react-layout"),w=require("@progress/kendo-react-form"),R=require("@progress/kendo-react-labels"),r=require("../FormField.js"),m=require("@progress/kendo-react-dropdowns"),P=require("@progress/kendo-react-inputs"),T=require("@progress/kendo-react-intl"),t=require("../../messages.js"),e=require("../../utils.js"),q=require("@progress/kendo-react-animation"),A=s=>{var L,f,S,b,p,h,v;const i=T.useLocalization(),l=s.state,[c,F]=o.useState(!1),x=o.useCallback(n=>{F(!n.expanded)},[]),u=[{value:"top",text:i.toLanguageString(t.formatLegendPositionTop,t.messages.formatLegendPositionTop)},{value:"bottom",text:i.toLanguageString(t.formatLegendPositionBottom,t.messages.formatLegendPositionBottom)},{value:"left",text:i.toLanguageString(t.formatLegendPositionLeft,t.messages.formatLegendPositionLeft)},{value:"right",text:i.toLanguageString(t.formatLegendPositionRight,t.messages.formatLegendPositionRight)}],E=n=>{s.onStateChange(e.updateState(l,e.ActionTypes.legendVisible,n.value))},k=n=>{const a=n.target.value||e.nullItem;e.ensureValue(a)&&s.onStateChange(e.updateState(l,e.ActionTypes.legendFontSize,a.value))},y=n=>{const a=n.target.value||e.nullItem;s.onStateChange(e.updateState(l,e.ActionTypes.legendFontName,a.value))},I=n=>{s.onStateChange(e.updateState(l,e.ActionTypes.legendColor,n.value))},z=n=>{const a=n.target.value;s.onStateChange(e.updateState(l,e.ActionTypes.legendPosition,a.value))};return o.createElement(C.ExpansionPanel,{style:{maxWidth:"576px"},title:i.toLanguageString(t.formatLegend,t.messages.formatLegend),expanded:c,tabIndex:0,onAction:x},o.createElement(q.Reveal,null,c&&o.createElement(C.ExpansionPanelContent,null,o.createElement(w.FormElement,{onKeyDown:e.stopPropagation},o.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},o.createElement(R.Label,{editorId:"show-legend"},i.toLanguageString(t.formatLegendShowLegend,t.messages.formatLegendShowLegend)),o.createElement(P.Switch,{id:"show-legend",checked:(L=l.legend)==null?void 0:L.visible,onChange:E}),o.createElement(r.FormField,{className:"k-col-span-2",editorId:"legendLabelsFont",labelText:i.toLanguageString(t.formatLegendFont,t.messages.formatLegendFont)},o.createElement(m.ComboBox,{id:"legendLabelsFont",data:e.fontNames,textField:"text",dataItemKey:"value",placeholder:i.toLanguageString(t.formatLegendFontPlaceholder,t.messages.formatLegendFontPlaceholder),value:e.fontNames.find(n=>{var a,d,g;return n.value===((g=e.parseFont(((d=(a=l.legend)==null?void 0:a.labels)==null?void 0:d.font)||""))==null?void 0:g.name)})||e.nullItem,onChange:y,itemRender:e.itemRender,disabled:((f=l.legend)==null?void 0:f.visible)===!1,...e.dropdownlistCommonProps})),o.createElement(r.FormField,{editorId:"legendLabelsSize",labelText:i.toLanguageString(t.formatLegendSize,t.messages.formatLegendSize)},o.createElement(m.ComboBox,{id:"legendLabelsSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:i.toLanguageString(t.formatLegendSizePlaceholder,t.messages.formatLegendSizePlaceholder),value:e.fontSizes.find(n=>{var a,d,g;return n.value===((g=e.parseFont(((d=(a=l.legend)==null?void 0:a.labels)==null?void 0:d.font)||""))==null?void 0:g.size)})||e.nullItem,onChange:k,disabled:((S=l.legend)==null?void 0:S.visible)===!1,allowCustom:!0,...e.dropdownlistCommonProps})),o.createElement(r.FormField,{editorId:"legendLabelsColor",labelText:i.toLanguageString(t.formatLegendColor,t.messages.formatLegendColor)},o.createElement(P.ColorPicker,{id:"legendLabelsColor",value:((p=(b=l.legend)==null?void 0:b.labels)==null?void 0:p.color)||"",onChange:I,disabled:((h=l.legend)==null?void 0:h.visible)===!1,view:"gradient",fillMode:"outline"})),o.createElement(r.FormField,{className:"k-col-span-2",editorId:"legendPosition",labelText:i.toLanguageString(t.formatLegendPosition,t.messages.formatLegendPosition)},o.createElement(m.DropDownList,{id:"legendPosition",data:u,textField:"text",dataItemKey:"value",value:u.find(n=>{var a;return n.value===((a=l.legend)==null?void 0:a.position)}),onChange:z,disabled:((v=l.legend)==null?void 0:v.visible)===!1,...e.dropdownlistCommonProps})))))))};exports.LegendPanel=A;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),C=require("@progress/kendo-react-layout"),w=require("@progress/kendo-react-form"),R=require("@progress/kendo-react-labels"),r=require("../FormField.js"),m=require("@progress/kendo-react-dropdowns"),P=require("@progress/kendo-react-inputs"),T=require("@progress/kendo-react-intl"),t=require("../../messages.js"),e=require("../../utils.js"),q=require("@progress/kendo-react-animation"),A=s=>{var L,f,S,b,p,h,v;const i=T.useLocalization(),l=s.state,[c,F]=o.useState(!1),x=o.useCallback(n=>{F(!n.expanded)},[]),u=[{value:"top",text:i.toLanguageString(t.formatLegendPositionTop,t.messages.formatLegendPositionTop)},{value:"bottom",text:i.toLanguageString(t.formatLegendPositionBottom,t.messages.formatLegendPositionBottom)},{value:"left",text:i.toLanguageString(t.formatLegendPositionLeft,t.messages.formatLegendPositionLeft)},{value:"right",text:i.toLanguageString(t.formatLegendPositionRight,t.messages.formatLegendPositionRight)}],E=n=>{s.onStateChange(e.updateState(l,e.ActionTypes.legendVisible,n.value))},k=n=>{const a=n.target.value||e.nullItem;e.ensureValue(a)&&s.onStateChange(e.updateState(l,e.ActionTypes.legendFontSize,a.value))},y=n=>{const a=n.target.value||e.nullItem;s.onStateChange(e.updateState(l,e.ActionTypes.legendFontName,a.value))},I=n=>{s.onStateChange(e.updateState(l,e.ActionTypes.legendColor,n.value))},z=n=>{const a=n.target.value;s.onStateChange(e.updateState(l,e.ActionTypes.legendPosition,a.value))};return o.createElement(C.ExpansionPanel,{style:{maxWidth:"576px"},title:i.toLanguageString(t.formatLegend,t.messages.formatLegend),expanded:c,tabIndex:0,onAction:x},o.createElement(q.Reveal,null,c&&o.createElement(C.ExpansionPanelContent,null,o.createElement(w.FormElement,{onKeyDown:e.stopPropagation},o.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},o.createElement(R.Label,{editorId:"show-legend"},i.toLanguageString(t.formatLegendShowLegend,t.messages.formatLegendShowLegend)),o.createElement(P.Switch,{id:"show-legend",checked:(L=l.legend)==null?void 0:L.visible,onChange:E}),o.createElement(r.FormField,{className:"k-col-span-2",editorId:"legendLabelsFont",labelText:i.toLanguageString(t.formatLegendFont,t.messages.formatLegendFont)},o.createElement(m.ComboBox,{id:"legendLabelsFont",data:e.fontNames,textField:"text",dataItemKey:"value",placeholder:i.toLanguageString(t.formatLegendFontPlaceholder,t.messages.formatLegendFontPlaceholder),value:e.fontNames.find(n=>{var a,d,g;return n.value===((g=e.parseFont(((d=(a=l.legend)==null?void 0:a.labels)==null?void 0:d.font)||""))==null?void 0:g.name)})||e.nullItem,onChange:y,itemRender:e.itemRender,disabled:((f=l.legend)==null?void 0:f.visible)===!1,...e.dropdownlistCommonProps})),o.createElement(r.FormField,{editorId:"legendLabelsSize",labelText:i.toLanguageString(t.formatLegendSize,t.messages.formatLegendSize)},o.createElement(m.ComboBox,{id:"legendLabelsSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:i.toLanguageString(t.formatLegendSizePlaceholder,t.messages.formatLegendSizePlaceholder),value:e.fontSizes.find(n=>{var a,d,g;return n.value===((g=e.parseFont(((d=(a=l.legend)==null?void 0:a.labels)==null?void 0:d.font)||""))==null?void 0:g.size)})||e.nullItem,onChange:k,disabled:((S=l.legend)==null?void 0:S.visible)===!1,allowCustom:!0,...e.dropdownlistCommonProps})),o.createElement(r.FormField,{editorId:"legendLabelsColor",labelText:i.toLanguageString(t.formatLegendColor,t.messages.formatLegendColor)},o.createElement(P.ColorPicker,{id:"legendLabelsColor",value:((p=(b=l.legend)==null?void 0:b.labels)==null?void 0:p.color)||"",onChange:I,disabled:((h=l.legend)==null?void 0:h.visible)===!1,view:"gradient",fillMode:"outline"})),o.createElement(r.FormField,{className:"k-col-span-2",editorId:"legendPosition",labelText:i.toLanguageString(t.formatLegendPosition,t.messages.formatLegendPosition)},o.createElement(m.DropDownList,{id:"legendPosition",data:u,textField:"text",dataItemKey:"value",value:u.find(n=>{var a;return n.value===((a=l.legend)==null?void 0:a.position)}),onChange:z,disabled:((v=l.legend)==null?void 0:v.visible)===!1,...e.dropdownlistCommonProps})))))))};exports.LegendPanel=A;

package/components/panels/LegendPanel.mjs

@@ -5,6 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import t from "react";
 import { ExpansionPanel as K, ExpansionPanelContent as A } from "@progress/kendo-react-layout";
 import { FormElement as B } from "@progress/kendo-react-form";

package/components/panels/LineChartPanel.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),T=require("@progress/kendo-react-animation"),b=require("@progress/kendo-react-intl"),u=require("@progress/kendo-react-layout"),t=require("../../utils.js"),i=require("../../messages.js"),f=require("../SeriesTypesWrap.js"),o=require("../SeriesTypeButton.js"),l=require("@progress/kendo-svg-icons");function E(n){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(c,e,s.get?s:{enumerable:!0,get:()=>n[e]})}}return c.default=n,Object.freeze(c)}const a=E(y),q=n=>{const c=b.useLocalization(),e=n.state,s=e.seriesType,{isStackFalse:d,isStackNormal:g,isStack100:k}=t.stackState(e),[S,m]=a.useState(!0),p=a.useCallback(r=>{m(!r.expanded)},[]),h=()=>{n.onStateChange(t.mergeStates(e,t.createState(e.data,"line")))},L=()=>{const r=t.mergeStates(e,t.createState(e.data,"line"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stackNormal))},C=()=>{const r=t.mergeStates(e,t.createState(e.data,"line"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stack100))};return a.createElement(u.ExpansionPanel,{style:{maxWidth:"576px"},title:c.toLanguageString(i.lineChart,i.messages.lineChart),expanded:S,tabIndex:0,onAction:p},a.createElement(T.Reveal,null,S&&a.createElement(u.ExpansionPanelContent,null,a.createElement(f.SeriesTypesWrap,null,a.createElement(o.SeriesTypeButton,{selected:s==="line"&&d,onClick:h,icon:l.chartLineIcon,iconName:"chart-line"},c.toLanguageString(i.lineChartLine,i.messages.lineChartLine)),a.createElement(o.SeriesTypeButton,{selected:s==="line"&&g,onClick:L,icon:l.chartLineStackedIcon,iconName:"chart-line-stacked"},c.toLanguageString(i.lineChartStackedLine,i.messages.lineChartStackedLine)),a.createElement(o.SeriesTypeButton,{selected:s==="line"&&k,onClick:C,icon:l.chartLineStacked100Icon,iconName:"chart-line-stacked100"},c.toLanguageString(i.lineChart100StackedLine,i.messages.lineChart100StackedLine))))))};exports.LineChartPanel=q;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),T=require("@progress/kendo-react-animation"),b=require("@progress/kendo-react-intl"),u=require("@progress/kendo-react-layout"),t=require("../../utils.js"),i=require("../../messages.js"),f=require("../SeriesTypesWrap.js"),o=require("../SeriesTypeButton.js"),l=require("@progress/kendo-svg-icons");function E(n){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(c,e,s.get?s:{enumerable:!0,get:()=>n[e]})}}return c.default=n,Object.freeze(c)}const a=E(y),q=n=>{const c=b.useLocalization(),e=n.state,s=e.seriesType,{isStackFalse:d,isStackNormal:g,isStack100:k}=t.stackState(e),[S,m]=a.useState(!0),p=a.useCallback(r=>{m(!r.expanded)},[]),h=()=>{n.onStateChange(t.mergeStates(e,t.createState(e.data,"line")))},L=()=>{const r=t.mergeStates(e,t.createState(e.data,"line"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stackNormal))},C=()=>{const r=t.mergeStates(e,t.createState(e.data,"line"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stack100))};return a.createElement(u.ExpansionPanel,{style:{maxWidth:"576px"},title:c.toLanguageString(i.lineChart,i.messages.lineChart),expanded:S,tabIndex:0,onAction:p},a.createElement(T.Reveal,null,S&&a.createElement(u.ExpansionPanelContent,null,a.createElement(f.SeriesTypesWrap,null,a.createElement(o.SeriesTypeButton,{selected:s==="line"&&d,onClick:h,icon:l.chartLineIcon,iconName:"chart-line"},c.toLanguageString(i.lineChartLine,i.messages.lineChartLine)),a.createElement(o.SeriesTypeButton,{selected:s==="line"&&g,onClick:L,icon:l.chartLineStackedIcon,iconName:"chart-line-stacked"},c.toLanguageString(i.lineChartStackedLine,i.messages.lineChartStackedLine)),a.createElement(o.SeriesTypeButton,{selected:s==="line"&&k,onClick:C,icon:l.chartLineStacked100Icon,iconName:"chart-line-stacked100"},c.toLanguageString(i.lineChart100StackedLine,i.messages.lineChart100StackedLine))))))};exports.LineChartPanel=q;

package/components/panels/LineChartPanel.mjs

@@ -5,6 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import * as e from "react";
 import { Reveal as E } from "@progress/kendo-react-animation";
 import { useLocalization as f } from "@progress/kendo-react-intl";

package/components/panels/PieChartPanel.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),m=require("@progress/kendo-react-animation"),P=require("@progress/kendo-react-intl"),s=require("@progress/kendo-react-layout"),c=require("../../utils.js"),i=require("../../messages.js"),S=require("../SeriesTypesWrap.js"),y=require("../SeriesTypeButton.js"),h=require("@progress/kendo-svg-icons");function C(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const n=C(g),b=e=>{const a=P.useLocalization(),t=e.state,r=t.seriesType,[o,l]=n.useState(!0),u=n.useCallback(d=>{l(!d.expanded)},[]),p=()=>{e.onStateChange(c.mergeStates(t,c.createState(t.data,"pie")))};return n.createElement(s.ExpansionPanel,{style:{maxWidth:"576px"},title:a.toLanguageString(i.pieChart,i.messages.pieChart),expanded:o,tabIndex:0,onAction:u},n.createElement(m.Reveal,null,o&&n.createElement(s.ExpansionPanelContent,null,n.createElement(S.SeriesTypesWrap,null,n.createElement(y.SeriesTypeButton,{selected:r==="pie",onClick:p,icon:h.chartPieIcon,iconName:"chart-pie"},a.toLanguageString(i.pieChartPie,i.messages.pieChartPie))))))};exports.PieChartPanel=b;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),m=require("@progress/kendo-react-animation"),P=require("@progress/kendo-react-intl"),s=require("@progress/kendo-react-layout"),c=require("../../utils.js"),i=require("../../messages.js"),S=require("../SeriesTypesWrap.js"),y=require("../SeriesTypeButton.js"),h=require("@progress/kendo-svg-icons");function C(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const n=C(g),b=e=>{const a=P.useLocalization(),t=e.state,r=t.seriesType,[o,l]=n.useState(!0),u=n.useCallback(d=>{l(!d.expanded)},[]),p=()=>{e.onStateChange(c.mergeStates(t,c.createState(t.data,"pie")))};return n.createElement(s.ExpansionPanel,{style:{maxWidth:"576px"},title:a.toLanguageString(i.pieChart,i.messages.pieChart),expanded:o,tabIndex:0,onAction:u},n.createElement(m.Reveal,null,o&&n.createElement(s.ExpansionPanelContent,null,n.createElement(S.SeriesTypesWrap,null,n.createElement(y.SeriesTypeButton,{selected:r==="pie",onClick:p,icon:h.chartPieIcon,iconName:"chart-pie"},a.toLanguageString(i.pieChartPie,i.messages.pieChartPie))))))};exports.PieChartPanel=b;

package/components/panels/PieChartPanel.mjs

@@ -5,20 +5,21 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import * as e from "react";
 import { Reveal as l } from "@progress/kendo-react-animation";
 import { useLocalization as d } from "@progress/kendo-react-intl";
-import { ExpansionPanel as h, ExpansionPanelContent as C } from "@progress/kendo-react-layout";
-import { mergeStates as u, createState as P } from "../../utils.mjs";
+import { ExpansionPanel as h, ExpansionPanelContent as u } from "@progress/kendo-react-layout";
+import { mergeStates as C, createState as P } from "../../utils.mjs";
 import { pieChart as x, messages as i, pieChartPie as f } from "../../messages.mjs";
 import { SeriesTypesWrap as g } from "../SeriesTypesWrap.mjs";
 import { SeriesTypeButton as S } from "../SeriesTypeButton.mjs";
 import { chartPieIcon as E } from "@progress/kendo-svg-icons";
 const R = (a) => {
-  const n = d(), t = a.state, o = t.seriesType, [r, s] = e.useState(!0), p = e.useCallback((c) => {
-    s(!c.expanded);
-  }, []), m = () => {
-    a.onStateChange(u(t, P(t.data, "pie")));
+  const n = d(), t = a.state, o = t.seriesType, [r, s] = e.useState(!0), p = e.useCallback((m) => {
+    s(!m.expanded);
+  }, []), c = () => {
+    a.onStateChange(C(t, P(t.data, "pie")));
   };
   return /* @__PURE__ */ e.createElement(
     h,
@@ -29,11 +30,11 @@ const R = (a) => {
       tabIndex: 0,
       onAction: p
     },
-    /* @__PURE__ */ e.createElement(l, null, r && /* @__PURE__ */ e.createElement(C, null, /* @__PURE__ */ e.createElement(g, null, /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement(l, null, r && /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement(g, null, /* @__PURE__ */ e.createElement(
       S,
       {
         selected: o === "pie",
-        onClick: m,
+        onClick: c,
         icon: E,
         iconName: "chart-pie"
       },

package/components/panels/ScatterChartPanel.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),g=require("@progress/kendo-react-animation"),m=require("@progress/kendo-react-intl"),o=require("@progress/kendo-react-layout"),i=require("../../utils.js"),c=require("../../messages.js"),y=require("../SeriesTypesWrap.js"),h=require("../SeriesTypeButton.js"),C=require("@progress/kendo-svg-icons");function b(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const a=b(p),f=e=>{const n=m.useLocalization(),t=e.state,r=t.seriesType,[s,l]=a.useState(!0),u=a.useCallback(d=>{l(!d.expanded)},[]),S=()=>{e.onStateChange(i.mergeStates(t,i.createState(t.data,"scatter")))};return a.createElement(o.ExpansionPanel,{style:{maxWidth:"576px"},title:n.toLanguageString(c.scatterChart,c.messages.scatterChart),expanded:s,tabIndex:0,onAction:u},a.createElement(g.Reveal,null,s&&a.createElement(o.ExpansionPanelContent,null,a.createElement(y.SeriesTypesWrap,null,a.createElement(h.SeriesTypeButton,{selected:r==="scatter",onClick:S,icon:C.chartScatterIcon,iconName:"chart-scatter"},n.toLanguageString(c.scatterChartScatter,c.messages.scatterChartScatter))))))};exports.ScatterChartPanel=f;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),g=require("@progress/kendo-react-animation"),m=require("@progress/kendo-react-intl"),o=require("@progress/kendo-react-layout"),i=require("../../utils.js"),c=require("../../messages.js"),y=require("../SeriesTypesWrap.js"),h=require("../SeriesTypeButton.js"),C=require("@progress/kendo-svg-icons");function b(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const a=b(p),f=e=>{const n=m.useLocalization(),t=e.state,r=t.seriesType,[s,l]=a.useState(!0),u=a.useCallback(d=>{l(!d.expanded)},[]),S=()=>{e.onStateChange(i.mergeStates(t,i.createState(t.data,"scatter")))};return a.createElement(o.ExpansionPanel,{style:{maxWidth:"576px"},title:n.toLanguageString(c.scatterChart,c.messages.scatterChart),expanded:s,tabIndex:0,onAction:u},a.createElement(g.Reveal,null,s&&a.createElement(o.ExpansionPanelContent,null,a.createElement(y.SeriesTypesWrap,null,a.createElement(h.SeriesTypeButton,{selected:r==="scatter",onClick:S,icon:C.chartScatterIcon,iconName:"chart-scatter"},n.toLanguageString(c.scatterChartScatter,c.messages.scatterChartScatter))))))};exports.ScatterChartPanel=f;

package/components/panels/ScatterChartPanel.mjs

@@ -5,11 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import * as t from "react";
 import { Reveal as p } from "@progress/kendo-react-animation";
 import { useLocalization as S } from "@progress/kendo-react-intl";
 import { ExpansionPanel as d, ExpansionPanelContent as h } from "@progress/kendo-react-layout";
-import { mergeStates as C, createState as u } from "../../utils.mjs";
+import { mergeStates as u, createState as C } from "../../utils.mjs";
 import { scatterChart as x, messages as o, scatterChartScatter as f } from "../../messages.mjs";
 import { SeriesTypesWrap as g } from "../SeriesTypesWrap.mjs";
 import { SeriesTypeButton as E } from "../SeriesTypeButton.mjs";
@@ -18,7 +19,7 @@ const R = (a) => {
   const r = S(), e = a.state, c = e.seriesType, [n, s] = t.useState(!0), i = t.useCallback((l) => {
     s(!l.expanded);
   }, []), m = () => {
-    a.onStateChange(C(e, u(e.data, "scatter")));
+    a.onStateChange(u(e, C(e.data, "scatter")));
   };
   return /* @__PURE__ */ t.createElement(
     d,

package/components/panels/SeriesPanel.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),y=require("@progress/kendo-react-layout"),F=require("@progress/kendo-react-form"),m=require("../FormField.js"),v=require("@progress/kendo-react-inputs"),n=require("../../utils.js"),o=require("../../messages.js"),q=require("@progress/kendo-react-intl"),T=require("@progress/kendo-react-dropdowns"),w=require("@progress/kendo-react-animation"),P=l=>{var g,p,f,b,C;const[s,d]=t.useState(""),r=q.useLocalization(),a=l.state,u=a.seriesType,E=typeof((g=a.series[0])==null?void 0:g.stack)=="object"?(p=a.series[0])==null?void 0:p.stack.type:!1,[S,h]=t.useState(!1),k=t.useCallback(e=>{h(!e.expanded)},[]),x=e=>{s&&l.onStateChange(n.updateState(a,n.ActionTypes.seriesColor,{seriesName:s,color:e.value}))},L=e=>{l.onStateChange(n.updateState(a,n.ActionTypes.seriesLabel,{seriesName:s,all:!s,visible:e.value}))},c={name:r.toLanguageString(o.formatSeriesAllSeries,o.messages.formatSeriesAllSeries)},A=e=>{const i=e.target.value.name;d(i===c.name?"":i)};return t.useEffect(()=>{d("")},[u,E]),t.createElement(y.ExpansionPanel,{style:{maxWidth:"576px"},title:r.toLanguageString(o.formatSeries,o.messages.formatSeries),expanded:S,tabIndex:0,onAction:k},t.createElement(w.Reveal,null,S&&t.createElement(y.ExpansionPanelContent,null,t.createElement(F.FormElement,{onKeyDown:n.stopPropagation},t.createElement(m.FormField,{editorId:"apply-to-series",labelText:r.toLanguageString(o.formatSeriesApplyTo,o.messages.formatSeriesApplyTo)},t.createElement(T.DropDownList,{id:"apply-to-series",data:a.series,textField:"name",dataItemKey:"name",defaultItem:c,disabled:!n.isCategorical(u),value:a.series.find(e=>e.name===s)||c,onChange:A,...n.dropdownlistCommonProps})),t.createElement(m.FormField,{editorId:"seriesColor",labelText:r.toLanguageString(o.formatSeriesColor,o.messages.formatSeriesColor)},t.createElement(v.ColorPicker,{id:"seriesColor",value:s?(f=a.series.find(e=>e.name===s))==null?void 0:f.color:"",onChange:x,disabled:!s,view:"gradient",fillMode:"outline"})),t.createElement(m.FormField,null,t.createElement(v.Checkbox,{label:r.toLanguageString(o.formatSeriesShowLabels,o.messages.formatSeriesShowLabels),checked:s?(C=(b=a.series.find(e=>e.name===s))==null?void 0:b.labels)==null?void 0:C.visible:a.series.every(e=>{var i;return(i=e.labels)==null?void 0:i.visible}),onChange:L}))))))};exports.SeriesPanel=P;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),y=require("@progress/kendo-react-layout"),F=require("@progress/kendo-react-form"),m=require("../FormField.js"),v=require("@progress/kendo-react-inputs"),n=require("../../utils.js"),o=require("../../messages.js"),q=require("@progress/kendo-react-intl"),T=require("@progress/kendo-react-dropdowns"),w=require("@progress/kendo-react-animation"),P=l=>{var g,p,f,b,C;const[s,d]=t.useState(""),r=q.useLocalization(),a=l.state,u=a.seriesType,E=typeof((g=a.series[0])==null?void 0:g.stack)=="object"?(p=a.series[0])==null?void 0:p.stack.type:!1,[S,h]=t.useState(!1),k=t.useCallback(e=>{h(!e.expanded)},[]),x=e=>{s&&l.onStateChange(n.updateState(a,n.ActionTypes.seriesColor,{seriesName:s,color:e.value}))},L=e=>{l.onStateChange(n.updateState(a,n.ActionTypes.seriesLabel,{seriesName:s,all:!s,visible:e.value}))},c={name:r.toLanguageString(o.formatSeriesAllSeries,o.messages.formatSeriesAllSeries)},A=e=>{const i=e.target.value.name;d(i===c.name?"":i)};return t.useEffect(()=>{d("")},[u,E]),t.createElement(y.ExpansionPanel,{style:{maxWidth:"576px"},title:r.toLanguageString(o.formatSeries,o.messages.formatSeries),expanded:S,tabIndex:0,onAction:k},t.createElement(w.Reveal,null,S&&t.createElement(y.ExpansionPanelContent,null,t.createElement(F.FormElement,{onKeyDown:n.stopPropagation},t.createElement(m.FormField,{editorId:"apply-to-series",labelText:r.toLanguageString(o.formatSeriesApplyTo,o.messages.formatSeriesApplyTo)},t.createElement(T.DropDownList,{id:"apply-to-series",data:a.series,textField:"name",dataItemKey:"name",defaultItem:c,disabled:!n.isCategorical(u),value:a.series.find(e=>e.name===s)||c,onChange:A,...n.dropdownlistCommonProps})),t.createElement(m.FormField,{editorId:"seriesColor",labelText:r.toLanguageString(o.formatSeriesColor,o.messages.formatSeriesColor)},t.createElement(v.ColorPicker,{id:"seriesColor",value:s?(f=a.series.find(e=>e.name===s))==null?void 0:f.color:"",onChange:x,disabled:!s,view:"gradient",fillMode:"outline"})),t.createElement(m.FormField,null,t.createElement(v.Checkbox,{label:r.toLanguageString(o.formatSeriesShowLabels,o.messages.formatSeriesShowLabels),checked:s?(C=(b=a.series.find(e=>e.name===s))==null?void 0:b.labels)==null?void 0:C.visible:a.series.every(e=>{var i;return(i=e.labels)==null?void 0:i.visible}),onChange:L}))))))};exports.SeriesPanel=P;

package/components/panels/SeriesPanel.mjs

@@ -5,6 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import t from "react";
 import { ExpansionPanel as k, ExpansionPanelContent as w } from "@progress/kendo-react-layout";
 import { FormElement as T } from "@progress/kendo-react-form";

package/components/panels/TitlePanel.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),p=require("@progress/kendo-react-layout"),k=require("@progress/kendo-react-form"),m=require("../FormField.js"),e=require("../../utils.js"),T=require("@progress/kendo-react-dropdowns"),f=require("@progress/kendo-react-inputs"),z=require("@progress/kendo-react-intl"),t=require("../../messages.js"),I=require("@progress/kendo-react-animation");function P(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const i in n)if(i!=="default"){const u=Object.getOwnPropertyDescriptor(n,i);Object.defineProperty(l,i,u.get?u:{enumerable:!0,get:()=>n[i]})}}return l.default=n,Object.freeze(l)}const a=P(E),A=n=>{const l=z.useLocalization(),i=n.state,[u,v]=a.useState(!1),S=a.useCallback(o=>{v(!o.expanded)},[]),r=[{value:"chartTitle",text:l.toLanguageString(t.formatTitleChartTitle,t.messages.formatTitleChartTitle)},{value:"chartSubtitle",text:l.toLanguageString(t.formatTitleChartSubtitle,t.messages.formatTitleChartSubtitle)}],[s,C]=a.useState(r[0]),x=a.useCallback(o=>{C(o.target.value)},[]),F=o=>{const c=s.value===r[0].value?e.ActionTypes.titleText:e.ActionTypes.subtitleText;n.onStateChange(e.updateState(i,c,o.target.value))},b=o=>{const c=s.value===r[0].value?e.ActionTypes.titleFontName:e.ActionTypes.subtitleFontName,g=o.target.value||e.nullItem;n.onStateChange(e.updateState(i,c,g.value))},h=o=>{const c=s.value===r[0].value?e.ActionTypes.titleFontSize:e.ActionTypes.subtitleFontSize,g=o.target.value||e.nullItem;e.ensureValue(g)&&n.onStateChange(e.updateState(i,c,g.value))},y=o=>{const c=s.value===r[0].value?e.ActionTypes.titleColor:e.ActionTypes.subtitleColor;n.onStateChange(e.updateState(i,c,o.value))},d=(s.value===r[0].value?i.title:i.subtitle)||{text:"",font:"",color:""};return a.createElement(p.ExpansionPanel,{style:{maxWidth:"576px"},title:l.toLanguageString(t.formatTitle,t.messages.formatTitle),expanded:u,tabIndex:0,onAction:S},a.createElement(I.Reveal,null,u&&a.createElement(p.ExpansionPanelContent,null,a.createElement(k.FormElement,{onKeyDown:e.stopPropagation},a.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},a.createElement(m.FormField,{className:"k-col-span-2",editorId:"apply-to-title",labelText:l.toLanguageString(t.formatTitleApplyTo,t.messages.formatTitleApplyTo)},a.createElement(T.DropDownList,{id:"apply-to-title",data:r,textField:"text",dataItemKey:"value",value:r.find(o=>o.value===s.value),onChange:x,...e.dropdownlistCommonProps})),a.createElement(m.FormField,{className:"k-col-span-2",editorId:"titleText",labelText:l.toLanguageString(t.formatTitleLabel,t.messages.formatTitleLabel)},a.createElement(f.Input,{id:"titleText",placeholder:s.value===r[0].value?r[0].text:r[1].text,value:d.text,onChange:F})),a.createElement(m.FormField,{className:"k-col-span-2",editorId:"titleFont",labelText:l.toLanguageString(t.formatTitleFont,t.messages.formatTitleFont)},a.createElement(T.ComboBox,{id:"titleFont",data:e.fontNames,textField:"text",dataItemKey:"value",placeholder:l.toLanguageString(t.formatTitleFontPlaceholder,t.messages.formatTitleFontPlaceholder),value:e.fontNames.find(o=>o.value===e.parseFont(d.font).name)||e.nullItem,onChange:b,itemRender:e.itemRender,...e.dropdownlistCommonProps})),a.createElement(m.FormField,{editorId:"titleFontSize",labelText:l.toLanguageString(t.formatTitleSize,t.messages.formatTitleSize)},a.createElement(T.ComboBox,{id:"titleFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:l.toLanguageString(t.formatTitleSizePlaceholder,t.messages.formatTitleSizePlaceholder),value:e.fontSizes.find(o=>o.value===e.parseFont(d.font).size)||e.nullItem,onChange:h,itemRender:e.itemRender,allowCustom:!0,...e.dropdownlistCommonProps})),a.createElement(m.FormField,{editorId:"titleColor",labelText:l.toLanguageString(t.formatTitleColor,t.messages.formatTitleColor)},a.createElement(f.ColorPicker,{id:"titleColor",value:d.color||"",onChange:y,view:"gradient",fillMode:"outline"})))))))};exports.TitlePanel=A;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),p=require("@progress/kendo-react-layout"),k=require("@progress/kendo-react-form"),m=require("../FormField.js"),e=require("../../utils.js"),T=require("@progress/kendo-react-dropdowns"),f=require("@progress/kendo-react-inputs"),z=require("@progress/kendo-react-intl"),t=require("../../messages.js"),I=require("@progress/kendo-react-animation");function P(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const i in n)if(i!=="default"){const u=Object.getOwnPropertyDescriptor(n,i);Object.defineProperty(l,i,u.get?u:{enumerable:!0,get:()=>n[i]})}}return l.default=n,Object.freeze(l)}const a=P(E),A=n=>{const l=z.useLocalization(),i=n.state,[u,v]=a.useState(!1),S=a.useCallback(o=>{v(!o.expanded)},[]),r=[{value:"chartTitle",text:l.toLanguageString(t.formatTitleChartTitle,t.messages.formatTitleChartTitle)},{value:"chartSubtitle",text:l.toLanguageString(t.formatTitleChartSubtitle,t.messages.formatTitleChartSubtitle)}],[s,C]=a.useState(r[0]),x=a.useCallback(o=>{C(o.target.value)},[]),F=o=>{const c=s.value===r[0].value?e.ActionTypes.titleText:e.ActionTypes.subtitleText;n.onStateChange(e.updateState(i,c,o.target.value))},b=o=>{const c=s.value===r[0].value?e.ActionTypes.titleFontName:e.ActionTypes.subtitleFontName,g=o.target.value||e.nullItem;n.onStateChange(e.updateState(i,c,g.value))},h=o=>{const c=s.value===r[0].value?e.ActionTypes.titleFontSize:e.ActionTypes.subtitleFontSize,g=o.target.value||e.nullItem;e.ensureValue(g)&&n.onStateChange(e.updateState(i,c,g.value))},y=o=>{const c=s.value===r[0].value?e.ActionTypes.titleColor:e.ActionTypes.subtitleColor;n.onStateChange(e.updateState(i,c,o.value))},d=(s.value===r[0].value?i.title:i.subtitle)||{text:"",font:"",color:""};return a.createElement(p.ExpansionPanel,{style:{maxWidth:"576px"},title:l.toLanguageString(t.formatTitle,t.messages.formatTitle),expanded:u,tabIndex:0,onAction:S},a.createElement(I.Reveal,null,u&&a.createElement(p.ExpansionPanelContent,null,a.createElement(k.FormElement,{onKeyDown:e.stopPropagation},a.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},a.createElement(m.FormField,{className:"k-col-span-2",editorId:"apply-to-title",labelText:l.toLanguageString(t.formatTitleApplyTo,t.messages.formatTitleApplyTo)},a.createElement(T.DropDownList,{id:"apply-to-title",data:r,textField:"text",dataItemKey:"value",value:r.find(o=>o.value===s.value),onChange:x,...e.dropdownlistCommonProps})),a.createElement(m.FormField,{className:"k-col-span-2",editorId:"titleText",labelText:l.toLanguageString(t.formatTitleLabel,t.messages.formatTitleLabel)},a.createElement(f.Input,{id:"titleText",placeholder:s.value===r[0].value?r[0].text:r[1].text,value:d.text,onChange:F})),a.createElement(m.FormField,{className:"k-col-span-2",editorId:"titleFont",labelText:l.toLanguageString(t.formatTitleFont,t.messages.formatTitleFont)},a.createElement(T.ComboBox,{id:"titleFont",data:e.fontNames,textField:"text",dataItemKey:"value",placeholder:l.toLanguageString(t.formatTitleFontPlaceholder,t.messages.formatTitleFontPlaceholder),value:e.fontNames.find(o=>o.value===e.parseFont(d.font).name)||e.nullItem,onChange:b,itemRender:e.itemRender,...e.dropdownlistCommonProps})),a.createElement(m.FormField,{editorId:"titleFontSize",labelText:l.toLanguageString(t.formatTitleSize,t.messages.formatTitleSize)},a.createElement(T.ComboBox,{id:"titleFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:l.toLanguageString(t.formatTitleSizePlaceholder,t.messages.formatTitleSizePlaceholder),value:e.fontSizes.find(o=>o.value===e.parseFont(d.font).size)||e.nullItem,onChange:h,itemRender:e.itemRender,allowCustom:!0,...e.dropdownlistCommonProps})),a.createElement(m.FormField,{editorId:"titleColor",labelText:l.toLanguageString(t.formatTitleColor,t.messages.formatTitleColor)},a.createElement(f.ColorPicker,{id:"titleColor",value:d.color||"",onChange:y,view:"gradient",fillMode:"outline"})))))))};exports.TitlePanel=A;

package/components/panels/TitlePanel.mjs

@@ -5,6 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import * as t from "react";
 import { ExpansionPanel as P, ExpansionPanelContent as N } from "@progress/kendo-react-layout";
 import { FormElement as A } from "@progress/kendo-react-form";

package/components/panels/ValueAxisPanel.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),h=require("@progress/kendo-react-layout"),M=require("@progress/kendo-react-form"),E=require("../FormFieldSet.js"),m=require("../FormField.js"),g=require("@progress/kendo-react-inputs"),e=require("../../utils.js"),a=require("../../messages.js"),Y=require("@progress/kendo-react-intl"),j=require("@progress/kendo-react-animation"),x=require("@progress/kendo-react-dropdowns"),O=u=>{var f,v,F,b,L,S,V,C,T,p;const s=Y.useLocalization(),n=u.state,y=n.seriesType,d={text:s.toLanguageString(a.formatValueAxisLabelsFormatText,a.messages.formatValueAxisLabelsFormatText),value:""},c=[{value:"n0",text:s.toLanguageString(a.formatValueAxisLabelsFormatNumber,a.messages.formatValueAxisLabelsFormatNumber)},{value:"c0",text:s.toLanguageString(a.formatValueAxisLabelsFormatCurrency,a.messages.formatValueAxisLabelsFormatCurrency)},{value:"p0",text:s.toLanguageString(a.formatValueAxisLabelsFormatPercent,a.messages.formatValueAxisLabelsFormatPercent)}],[A,z]=l.useState(!1),I=l.useCallback(t=>{z(!t.expanded)},[]),P=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleText,t.target.value))},k=t=>{const o=t.target.value||e.nullItem;e.ensureValue(o)&&u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleFontSize,o.value))},R=t=>{const o=t.target.value||e.nullItem;u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleFontName,o.value))},N=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleColor,t.value))},w=t=>{const o=t.target.value||e.nullItem;e.ensureValue(o)&&u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsFontSize,o.value))},q=t=>{const o=t.target.value||e.nullItem;u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsFontName,o.value))},K=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsColor,t.value))},B=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsRotation,t.target.value))},D=t=>{const o=t.target.value;u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsFormat,o.value))};return l.createElement(h.ExpansionPanel,{style:{maxWidth:"576px"},title:y==="scatter"?s.toLanguageString(a.formatYAxis,a.messages.formatYAxis):s.toLanguageString(a.formatValueAxis,a.messages.formatValueAxis),expanded:A,tabIndex:0,onAction:I},l.createElement(j.Reveal,null,A&&l.createElement(h.ExpansionPanelContent,null,l.createElement(M.FormElement,{onKeyDown:e.stopPropagation},l.createElement(E.FormFieldSet,{legend:s.toLanguageString(a.formatValueAxisTitle,a.messages.formatValueAxisTitle)},l.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},l.createElement(m.FormField,{className:"k-col-span-2"},l.createElement(g.Input,{placeholder:s.toLanguageString(a.formatValueAxisTitlePlaceholder,a.messages.formatValueAxisTitlePlaceholder),value:((v=(f=n.valueAxis[0])==null?void 0:f.title)==null?void 0:v.text)||"",onChange:P})),l.createElement(m.FormField,{className:"k-col-span-2",editorId:"valueAxisTitleFont",labelText:s.toLanguageString(a.formatValueAxisTitleFont,a.messages.formatValueAxisTitleFont)},l.createElement(x.ComboBox,{id:"valueAxisTitleFont",data:e.fontNames,textField:"text",dataItemKey:"value",itemRender:e.itemRender,placeholder:s.toLanguageString(a.formatValueAxisTitleFontPlaceholder,a.messages.formatValueAxisTitleFontPlaceholder),value:e.fontNames.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.title)==null?void 0:i.font)||""))==null?void 0:r.name)})||e.nullItem,onChange:R,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisTitleFontSize",labelText:s.toLanguageString(a.formatValueAxisTitleSize,a.messages.formatValueAxisTitleSize)},l.createElement(x.ComboBox,{id:"valueAxisTitleFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:s.toLanguageString(a.formatValueAxisTitleSizePlaceholder,a.messages.formatValueAxisTitleSizePlaceholder),value:e.fontSizes.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.title)==null?void 0:i.font)||""))==null?void 0:r.size)})||e.nullItem,onChange:k,allowCustom:!0,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisTitleColor",labelText:s.toLanguageString(a.formatValueAxisTitleColor,a.messages.formatValueAxisTitleColor)},l.createElement(g.ColorPicker,{id:"valueAxisTitleColor",view:"gradient",value:((b=(F=n.valueAxis[0])==null?void 0:F.title)==null?void 0:b.color)||"",onChange:N,fillMode:"outline"})))),l.createElement(E.FormFieldSet,{legend:s.toLanguageString(a.formatValueAxisLabels,a.messages.formatValueAxisLabels)},l.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},l.createElement(m.FormField,{className:"k-col-span-2",editorId:"valueAxisLabelsFormat",labelText:s.toLanguageString(a.formatValueAxisLabelsFormat,a.messages.formatValueAxisLabelsFormat)},l.createElement(x.DropDownList,{id:"valueAxisLabelsFormat",data:c,textField:"text",dataItemKey:"value",defaultItem:d,value:c.find(t=>{var o,i;return t.value===((i=(o=n.valueAxis[0])==null?void 0:o.labels)==null?void 0:i.format)})||d,onChange:D,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{className:"k-col-span-2",editorId:"valueAxisLabelsFont",labelText:s.toLanguageString(a.formatValueAxisLabelsFont,a.messages.formatValueAxisLabelsFont)},l.createElement(x.ComboBox,{id:"valueAxisLabelsFont",data:e.fontNames,textField:"text",dataItemKey:"value",placeholder:s.toLanguageString(a.formatValueAxisLabelsFontPlaceholder,a.messages.formatValueAxisLabelsFontPlaceholder),value:e.fontNames.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.labels)==null?void 0:i.font)||""))==null?void 0:r.name)})||e.nullItem,onChange:q,itemRender:e.itemRender,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisLabelsFontSize",labelText:s.toLanguageString(a.formatValueAxisLabelsSize,a.messages.formatValueAxisLabelsSize)},l.createElement(x.ComboBox,{id:"valueAxisLabelsFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:s.toLanguageString(a.formatValueAxisLabelsSizePlaceholder,a.messages.formatValueAxisLabelsSizePlaceholder),value:e.fontSizes.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.labels)==null?void 0:i.font)||""))==null?void 0:r.size)})||e.nullItem,onChange:w,allowCustom:!0,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisLabelsColor",labelText:s.toLanguageString(a.formatValueAxisLabelsColor,a.messages.formatValueAxisLabelsColor)},l.createElement(g.ColorPicker,{id:"valueAxisLabelsColor",view:"gradient",value:((S=(L=n.valueAxis[0])==null?void 0:L.labels)==null?void 0:S.color)||"",onChange:K,fillMode:"outline"})),l.createElement(m.FormField,{editorId:"valueAxisLabelsRotation",labelText:s.toLanguageString(a.formatValueAxisLabelsRotation,a.messages.formatValueAxisLabelsRotation)},l.createElement(g.NumericTextBox,{id:"valueAxisLabelsRotation",value:typeof((C=(V=n.valueAxis[0])==null?void 0:V.labels)==null?void 0:C.rotation)=="number"?(p=(T=n.valueAxis[0])==null?void 0:T.labels)==null?void 0:p.rotation:null,placeholder:s.toLanguageString(a.formatValueAxisLabelsRotationAuto,a.messages.formatValueAxisLabelsRotationAuto),onChange:B,fillMode:"outline",min:-360,max:360,step:1}))))))))};exports.ValueAxisPanel=O;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),h=require("@progress/kendo-react-layout"),M=require("@progress/kendo-react-form"),E=require("../FormFieldSet.js"),m=require("../FormField.js"),g=require("@progress/kendo-react-inputs"),e=require("../../utils.js"),a=require("../../messages.js"),Y=require("@progress/kendo-react-intl"),j=require("@progress/kendo-react-animation"),x=require("@progress/kendo-react-dropdowns"),O=u=>{var f,v,F,b,L,S,V,C,T,p;const s=Y.useLocalization(),n=u.state,y=n.seriesType,d={text:s.toLanguageString(a.formatValueAxisLabelsFormatText,a.messages.formatValueAxisLabelsFormatText),value:""},c=[{value:"n0",text:s.toLanguageString(a.formatValueAxisLabelsFormatNumber,a.messages.formatValueAxisLabelsFormatNumber)},{value:"c0",text:s.toLanguageString(a.formatValueAxisLabelsFormatCurrency,a.messages.formatValueAxisLabelsFormatCurrency)},{value:"p0",text:s.toLanguageString(a.formatValueAxisLabelsFormatPercent,a.messages.formatValueAxisLabelsFormatPercent)}],[A,z]=l.useState(!1),I=l.useCallback(t=>{z(!t.expanded)},[]),P=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleText,t.target.value))},k=t=>{const o=t.target.value||e.nullItem;e.ensureValue(o)&&u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleFontSize,o.value))},R=t=>{const o=t.target.value||e.nullItem;u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleFontName,o.value))},N=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleColor,t.value))},w=t=>{const o=t.target.value||e.nullItem;e.ensureValue(o)&&u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsFontSize,o.value))},q=t=>{const o=t.target.value||e.nullItem;u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsFontName,o.value))},K=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsColor,t.value))},B=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsRotation,t.target.value))},D=t=>{const o=t.target.value;u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsFormat,o.value))};return l.createElement(h.ExpansionPanel,{style:{maxWidth:"576px"},title:y==="scatter"?s.toLanguageString(a.formatYAxis,a.messages.formatYAxis):s.toLanguageString(a.formatValueAxis,a.messages.formatValueAxis),expanded:A,tabIndex:0,onAction:I},l.createElement(j.Reveal,null,A&&l.createElement(h.ExpansionPanelContent,null,l.createElement(M.FormElement,{onKeyDown:e.stopPropagation},l.createElement(E.FormFieldSet,{legend:s.toLanguageString(a.formatValueAxisTitle,a.messages.formatValueAxisTitle)},l.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},l.createElement(m.FormField,{className:"k-col-span-2"},l.createElement(g.Input,{placeholder:s.toLanguageString(a.formatValueAxisTitlePlaceholder,a.messages.formatValueAxisTitlePlaceholder),value:((v=(f=n.valueAxis[0])==null?void 0:f.title)==null?void 0:v.text)||"",onChange:P})),l.createElement(m.FormField,{className:"k-col-span-2",editorId:"valueAxisTitleFont",labelText:s.toLanguageString(a.formatValueAxisTitleFont,a.messages.formatValueAxisTitleFont)},l.createElement(x.ComboBox,{id:"valueAxisTitleFont",data:e.fontNames,textField:"text",dataItemKey:"value",itemRender:e.itemRender,placeholder:s.toLanguageString(a.formatValueAxisTitleFontPlaceholder,a.messages.formatValueAxisTitleFontPlaceholder),value:e.fontNames.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.title)==null?void 0:i.font)||""))==null?void 0:r.name)})||e.nullItem,onChange:R,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisTitleFontSize",labelText:s.toLanguageString(a.formatValueAxisTitleSize,a.messages.formatValueAxisTitleSize)},l.createElement(x.ComboBox,{id:"valueAxisTitleFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:s.toLanguageString(a.formatValueAxisTitleSizePlaceholder,a.messages.formatValueAxisTitleSizePlaceholder),value:e.fontSizes.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.title)==null?void 0:i.font)||""))==null?void 0:r.size)})||e.nullItem,onChange:k,allowCustom:!0,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisTitleColor",labelText:s.toLanguageString(a.formatValueAxisTitleColor,a.messages.formatValueAxisTitleColor)},l.createElement(g.ColorPicker,{id:"valueAxisTitleColor",view:"gradient",value:((b=(F=n.valueAxis[0])==null?void 0:F.title)==null?void 0:b.color)||"",onChange:N,fillMode:"outline"})))),l.createElement(E.FormFieldSet,{legend:s.toLanguageString(a.formatValueAxisLabels,a.messages.formatValueAxisLabels)},l.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},l.createElement(m.FormField,{className:"k-col-span-2",editorId:"valueAxisLabelsFormat",labelText:s.toLanguageString(a.formatValueAxisLabelsFormat,a.messages.formatValueAxisLabelsFormat)},l.createElement(x.DropDownList,{id:"valueAxisLabelsFormat",data:c,textField:"text",dataItemKey:"value",defaultItem:d,value:c.find(t=>{var o,i;return t.value===((i=(o=n.valueAxis[0])==null?void 0:o.labels)==null?void 0:i.format)})||d,onChange:D,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{className:"k-col-span-2",editorId:"valueAxisLabelsFont",labelText:s.toLanguageString(a.formatValueAxisLabelsFont,a.messages.formatValueAxisLabelsFont)},l.createElement(x.ComboBox,{id:"valueAxisLabelsFont",data:e.fontNames,textField:"text",dataItemKey:"value",placeholder:s.toLanguageString(a.formatValueAxisLabelsFontPlaceholder,a.messages.formatValueAxisLabelsFontPlaceholder),value:e.fontNames.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.labels)==null?void 0:i.font)||""))==null?void 0:r.name)})||e.nullItem,onChange:q,itemRender:e.itemRender,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisLabelsFontSize",labelText:s.toLanguageString(a.formatValueAxisLabelsSize,a.messages.formatValueAxisLabelsSize)},l.createElement(x.ComboBox,{id:"valueAxisLabelsFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:s.toLanguageString(a.formatValueAxisLabelsSizePlaceholder,a.messages.formatValueAxisLabelsSizePlaceholder),value:e.fontSizes.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.labels)==null?void 0:i.font)||""))==null?void 0:r.size)})||e.nullItem,onChange:w,allowCustom:!0,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisLabelsColor",labelText:s.toLanguageString(a.formatValueAxisLabelsColor,a.messages.formatValueAxisLabelsColor)},l.createElement(g.ColorPicker,{id:"valueAxisLabelsColor",view:"gradient",value:((S=(L=n.valueAxis[0])==null?void 0:L.labels)==null?void 0:S.color)||"",onChange:K,fillMode:"outline"})),l.createElement(m.FormField,{editorId:"valueAxisLabelsRotation",labelText:s.toLanguageString(a.formatValueAxisLabelsRotation,a.messages.formatValueAxisLabelsRotation)},l.createElement(g.NumericTextBox,{id:"valueAxisLabelsRotation",value:typeof((C=(V=n.valueAxis[0])==null?void 0:V.labels)==null?void 0:C.rotation)=="number"?(p=(T=n.valueAxis[0])==null?void 0:T.labels)==null?void 0:p.rotation:null,placeholder:s.toLanguageString(a.formatValueAxisLabelsRotationAuto,a.messages.formatValueAxisLabelsRotationAuto),onChange:B,fillMode:"outline",min:-360,max:360,step:1}))))))))};exports.ValueAxisPanel=O;

package/components/panels/ValueAxisPanel.mjs

@@ -5,20 +5,21 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import a from "react";
 import { ExpansionPanel as J, ExpansionPanelContent as O } from "@progress/kendo-react-layout";
 import { FormElement as Q } from "@progress/kendo-react-form";
 import { FormFieldSet as N } from "../FormFieldSet.mjs";
 import { FormField as u } from "../FormField.mjs";
 import { Input as U, ColorPicker as y, NumericTextBox as X } from "@progress/kendo-react-inputs";
-import { stopPropagation as Z, fontNames as d, itemRender as k, parseFont as c, nullItem as g, dropdownlistCommonProps as A, fontSizes as f, updateState as m, ActionTypes as x, ensureValue as R } from "../../utils.mjs";
-import { formatValueAxisLabelsFormatText as $, messages as o, formatValueAxisLabelsFormatNumber as ee, formatValueAxisLabelsFormatCurrency as ae, formatValueAxisLabelsFormatPercent as te, formatYAxis as le, formatValueAxis as oe, formatValueAxisTitle as ie, formatValueAxisTitlePlaceholder as ne, formatValueAxisTitleFont as re, formatValueAxisTitleFontPlaceholder as se, formatValueAxisTitleSize as ue, formatValueAxisTitleSizePlaceholder as me, formatValueAxisTitleColor as xe, formatValueAxisLabels as ge, formatValueAxisLabelsFormat as Ae, formatValueAxisLabelsFont as de, formatValueAxisLabelsFontPlaceholder as ce, formatValueAxisLabelsSize as fe, formatValueAxisLabelsSizePlaceholder as ve, formatValueAxisLabelsColor as Le, formatValueAxisLabelsRotation as be, formatValueAxisLabelsRotationAuto as Ve } from "../../messages.mjs";
+import { stopPropagation as Z, fontNames as c, itemRender as k, parseFont as d, nullItem as g, dropdownlistCommonProps as A, fontSizes as f, updateState as m, ActionTypes as x, ensureValue as R } from "../../utils.mjs";
+import { formatValueAxisLabelsFormatText as $, messages as o, formatValueAxisLabelsFormatNumber as ee, formatValueAxisLabelsFormatCurrency as ae, formatValueAxisLabelsFormatPercent as te, formatYAxis as le, formatValueAxis as oe, formatValueAxisTitle as ie, formatValueAxisTitlePlaceholder as ne, formatValueAxisTitleFont as se, formatValueAxisTitleFontPlaceholder as re, formatValueAxisTitleSize as ue, formatValueAxisTitleSizePlaceholder as me, formatValueAxisTitleColor as xe, formatValueAxisLabels as ge, formatValueAxisLabelsFormat as Ae, formatValueAxisLabelsFont as ce, formatValueAxisLabelsFontPlaceholder as de, formatValueAxisLabelsSize as fe, formatValueAxisLabelsSizePlaceholder as ve, formatValueAxisLabelsColor as Le, formatValueAxisLabelsRotation as be, formatValueAxisLabelsRotationAuto as Ve } from "../../messages.mjs";
 import { useLocalization as Se } from "@progress/kendo-react-intl";
 import { Reveal as Fe } from "@progress/kendo-react-animation";
 import { ComboBox as v, DropDownList as Ce } from "@progress/kendo-react-dropdowns";
-const we = (s) => {
+const we = (r) => {
   var S, F, C, h, T, E, p, z, P, I;
-  const l = Se(), i = s.state, w = i.seriesType, L = {
+  const l = Se(), i = r.state, w = i.seriesType, L = {
     text: l.toLanguageString($, o.formatValueAxisLabelsFormatText),
     value: ""
   }, b = [
@@ -46,28 +47,28 @@ const we = (s) => {
   ], [V, K] = a.useState(!1), D = a.useCallback((e) => {
     K(!e.expanded);
   }, []), M = (e) => {
-    s.onStateChange(m(i, x.valueAxisTitleText, e.target.value));
+    r.onStateChange(m(i, x.valueAxisTitleText, e.target.value));
   }, B = (e) => {
     const t = e.target.value || g;
-    R(t) && s.onStateChange(m(i, x.valueAxisTitleFontSize, t.value));
+    R(t) && r.onStateChange(m(i, x.valueAxisTitleFontSize, t.value));
   }, Y = (e) => {
     const t = e.target.value || g;
-    s.onStateChange(m(i, x.valueAxisTitleFontName, t.value));
+    r.onStateChange(m(i, x.valueAxisTitleFontName, t.value));
   }, _ = (e) => {
-    s.onStateChange(m(i, x.valueAxisTitleColor, e.value));
+    r.onStateChange(m(i, x.valueAxisTitleColor, e.value));
   }, W = (e) => {
     const t = e.target.value || g;
-    R(t) && s.onStateChange(m(i, x.valueAxisLabelsFontSize, t.value));
+    R(t) && r.onStateChange(m(i, x.valueAxisLabelsFontSize, t.value));
   }, j = (e) => {
     const t = e.target.value || g;
-    s.onStateChange(m(i, x.valueAxisLabelsFontName, t.value));
+    r.onStateChange(m(i, x.valueAxisLabelsFontName, t.value));
   }, q = (e) => {
-    s.onStateChange(m(i, x.valueAxisLabelsColor, e.value));
+    r.onStateChange(m(i, x.valueAxisLabelsColor, e.value));
   }, G = (e) => {
-    s.onStateChange(m(i, x.valueAxisLabelsRotation, e.target.value));
+    r.onStateChange(m(i, x.valueAxisLabelsRotation, e.target.value));
   }, H = (e) => {
     const t = e.target.value;
-    s.onStateChange(m(i, x.valueAxisLabelsFormat, t.value));
+    r.onStateChange(m(i, x.valueAxisLabelsFormat, t.value));
   };
   return /* @__PURE__ */ a.createElement(
     J,
@@ -102,7 +103,7 @@ const we = (s) => {
           className: "k-col-span-2",
           editorId: "valueAxisTitleFont",
           labelText: l.toLanguageString(
-            re,
+            se,
             o.formatValueAxisTitleFont
           )
         },
@@ -110,18 +111,18 @@ const we = (s) => {
           v,
           {
             id: "valueAxisTitleFont",
-            data: d,
+            data: c,
             textField: "text",
             dataItemKey: "value",
             itemRender: k,
             placeholder: l.toLanguageString(
-              se,
+              re,
               o.formatValueAxisTitleFontPlaceholder
             ),
-            value: d.find(
+            value: c.find(
               (e) => {
-                var t, n, r;
-                return e.value === ((r = c(((n = (t = i.valueAxis[0]) == null ? void 0 : t.title) == null ? void 0 : n.font) || "")) == null ? void 0 : r.name);
+                var t, n, s;
+                return e.value === ((s = d(((n = (t = i.valueAxis[0]) == null ? void 0 : t.title) == null ? void 0 : n.font) || "")) == null ? void 0 : s.name);
               }
             ) || g,
             onChange: Y,
@@ -150,8 +151,8 @@ const we = (s) => {
             ),
             value: f.find(
               (e) => {
-                var t, n, r;
-                return e.value === ((r = c(((n = (t = i.valueAxis[0]) == null ? void 0 : t.title) == null ? void 0 : n.font) || "")) == null ? void 0 : r.size);
+                var t, n, s;
+                return e.value === ((s = d(((n = (t = i.valueAxis[0]) == null ? void 0 : t.title) == null ? void 0 : n.font) || "")) == null ? void 0 : s.size);
               }
             ) || g,
             onChange: B,
@@ -221,7 +222,7 @@ const we = (s) => {
           className: "k-col-span-2",
           editorId: "valueAxisLabelsFont",
           labelText: l.toLanguageString(
-            de,
+            ce,
             o.formatValueAxisLabelsFont
           )
         },
@@ -229,17 +230,17 @@ const we = (s) => {
           v,
           {
             id: "valueAxisLabelsFont",
-            data: d,
+            data: c,
             textField: "text",
             dataItemKey: "value",
             placeholder: l.toLanguageString(
-              ce,
+              de,
               o.formatValueAxisLabelsFontPlaceholder
             ),
-            value: d.find(
+            value: c.find(
               (e) => {
-                var t, n, r;
-                return e.value === ((r = c(((n = (t = i.valueAxis[0]) == null ? void 0 : t.labels) == null ? void 0 : n.font) || "")) == null ? void 0 : r.name);
+                var t, n, s;
+                return e.value === ((s = d(((n = (t = i.valueAxis[0]) == null ? void 0 : t.labels) == null ? void 0 : n.font) || "")) == null ? void 0 : s.name);
               }
             ) || g,
             onChange: j,
@@ -269,8 +270,8 @@ const we = (s) => {
             ),
             value: f.find(
               (e) => {
-                var t, n, r;
-                return e.value === ((r = c(((n = (t = i.valueAxis[0]) == null ? void 0 : t.labels) == null ? void 0 : n.font) || "")) == null ? void 0 : r.size);
+                var t, n, s;
+                return e.value === ((s = d(((n = (t = i.valueAxis[0]) == null ? void 0 : t.labels) == null ? void 0 : n.font) || "")) == null ? void 0 : s.size);
               }
             ) || g,
             onChange: W,