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

package/components/ChartComponent.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),o=require("@progress/kendo-react-charts"),y=l.forwardRef((E,p)=>{var a,n,i,c,s,m,b,f,u,C,g,h,d;const t=E.state;return l.createElement(o.Chart,{style:{width:"100%",height:"100%"},transitions:!1,ref:p},l.createElement(o.ChartTitle,{text:(a=t.title)==null?void 0:a.text,font:(n=t.title)==null?void 0:n.font,color:((i=t.title)==null?void 0:i.color)||"#000"}),l.createElement(o.ChartSubtitle,{text:(c=t.subtitle)==null?void 0:c.text,font:(s=t.subtitle)==null?void 0:s.font,color:((m=t.subtitle)==null?void 0:m.color)||"#000"}),l.createElement(o.ChartArea,{background:(b=t.area)==null?void 0:b.background,margin:t.area.margin}),t.categoryAxis&&l.createElement(o.ChartCategoryAxis,null,t.categoryAxis.map((e,r)=>l.createElement(o.ChartCategoryAxisItem,{key:r,categories:e.categories,title:e.title&&{text:e.title.text,font:e.title.font,color:e.title.color},labels:e.labels&&{font:e.labels.font,color:e.labels.color,rotation:e.labels.rotation},reverse:e.reverse}))),t.valueAxis&&l.createElement(o.ChartValueAxis,null,t.valueAxis.map((e,r)=>l.createElement(o.ChartValueAxisItem,{key:r,title:e.title&&{text:e.title.text,font:e.title.font,color:e.title.color},labels:e.labels&&{format:e.labels.format,font:e.labels.font,color:e.labels.color,rotation:e.labels.rotation}}))),l.createElement(o.ChartSeries,null,t.series.map((e,r)=>l.createElement(o.ChartSeriesItem,{key:String(e.name)+r,...e}))),l.createElement(o.ChartLegend,{visible:(f=t.legend)==null?void 0:f.visible,position:(u=t.legend)==null?void 0:u.position,labels:{color:((g=(C=t.legend)==null?void 0:C.labels)==null?void 0:g.color)||void 0,font:((d=(h=t.legend)==null?void 0:h.labels)==null?void 0:d.font)||void 0}}))});y.displayName="ChartComponent";exports.ChartComponent=y;

package/components/ChartComponent.mjs

@@ -0,0 +1,69 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import l from "react";
+import { Chart as E, ChartTitle as y, ChartSubtitle as A, ChartArea as v, ChartCategoryAxis as k, ChartCategoryAxisItem as S, ChartValueAxis as I, ChartValueAxisItem as w, ChartSeries as R, ChartSeriesItem as V, ChartLegend as _ } from "@progress/kendo-react-charts";
+const L = l.forwardRef((d, p) => {
+  var r, a, n, i, c, m, s, b, f, g, C, h, u;
+  const t = d.state;
+  return /* @__PURE__ */ l.createElement(E, { style: { width: "100%", height: "100%" }, transitions: !1, ref: p }, /* @__PURE__ */ l.createElement(y, { text: (r = t.title) == null ? void 0 : r.text, font: (a = t.title) == null ? void 0 : a.font, color: ((n = t.title) == null ? void 0 : n.color) || "#000" }), /* @__PURE__ */ l.createElement(
+    A,
+    {
+      text: (i = t.subtitle) == null ? void 0 : i.text,
+      font: (c = t.subtitle) == null ? void 0 : c.font,
+      color: ((m = t.subtitle) == null ? void 0 : m.color) || "#000"
+    }
+  ), /* @__PURE__ */ l.createElement(v, { background: (s = t.area) == null ? void 0 : s.background, margin: t.area.margin }), t.categoryAxis && /* @__PURE__ */ l.createElement(k, null, t.categoryAxis.map((e, o) => /* @__PURE__ */ l.createElement(
+    S,
+    {
+      key: o,
+      categories: e.categories,
+      title: e.title && {
+        text: e.title.text,
+        font: e.title.font,
+        color: e.title.color
+      },
+      labels: e.labels && {
+        font: e.labels.font,
+        color: e.labels.color,
+        rotation: e.labels.rotation
+      },
+      reverse: e.reverse
+    }
+  ))), t.valueAxis && /* @__PURE__ */ l.createElement(I, null, t.valueAxis.map((e, o) => /* @__PURE__ */ l.createElement(
+    w,
+    {
+      key: o,
+      title: e.title && {
+        text: e.title.text,
+        font: e.title.font,
+        color: e.title.color
+      },
+      labels: e.labels && {
+        format: e.labels.format,
+        font: e.labels.font,
+        color: e.labels.color,
+        rotation: e.labels.rotation
+      }
+    }
+  ))), /* @__PURE__ */ l.createElement(R, null, t.series.map((e, o) => /* @__PURE__ */ l.createElement(V, { key: String(e.name) + o, ...e }))), /* @__PURE__ */ l.createElement(
+    _,
+    {
+      visible: (b = t.legend) == null ? void 0 : b.visible,
+      position: (f = t.legend) == null ? void 0 : f.position,
+      labels: {
+        color: ((C = (g = t.legend) == null ? void 0 : g.labels) == null ? void 0 : C.color) || void 0,
+        font: ((u = (h = t.legend) == null ? void 0 : h.labels) == null ? void 0 : u.font) || void 0
+      }
+    }
+  ));
+});
+L.displayName = "ChartComponent";
+export {
+  L as ChartComponent
+};

package/components/FormField.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),a=require("@progress/kendo-react-form"),l=require("@progress/kendo-react-labels"),r=require("../utils.js"),c=e=>t.createElement(a.FieldWrapper,{className:e.className},e.labelText&&e.editorId&&t.createElement(l.Label,{className:"k-form-label",editorId:e.editorId},e.labelText),t.createElement("div",{className:"k-form-field-wrap",onKeyDown:r.stopPropagation},e.children));exports.FormField=c;

package/components/FormField.mjs

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import t from "react";
+import { FieldWrapper as a } from "@progress/kendo-react-form";
+import { Label as l } from "@progress/kendo-react-labels";
+import { stopPropagation as r } from "../utils.mjs";
+const c = (e) => /* @__PURE__ */ t.createElement(a, { className: e.className }, e.labelText && e.editorId && /* @__PURE__ */ t.createElement(l, { className: "k-form-label", editorId: e.editorId }, e.labelText), /* @__PURE__ */ t.createElement("div", { className: "k-form-field-wrap", onKeyDown: r }, e.children));
+export {
+  c as FormField
+};

package/components/FormFieldSet.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),l=e=>t.createElement("fieldset",{className:"k-form-fieldset"},e.legend&&t.createElement("legend",{className:"k-form-legend"},e.legend),e.children);exports.FormFieldSet=l;

package/components/FormFieldSet.mjs

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import l from "react";
+const n = (e) => /* @__PURE__ */ l.createElement("fieldset", { className: "k-form-fieldset" }, e.legend && /* @__PURE__ */ l.createElement("legend", { className: "k-form-legend" }, e.legend), e.children);
+export {
+  n as FormFieldSet
+};

package/components/SeriesGrid.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),h=require("@progress/kendo-react-buttons"),o=require("@progress/kendo-react-grid"),D=require("@progress/kendo-react-intl"),I=require("@progress/kendo-svg-icons"),d=require("./SeriesGridCells.js"),x=require("../messages.js"),b=require("@progress/kendo-charts"),{messages:G}=b.ChartWizardCommon,s="inEdit",k=e=>{const[r,u]=n.useState(null),m=t=>{if(r===t)return;const a=e.data.slice(),i=a.findIndex(c=>c===r),l=a.findIndex(c=>c===t);a.splice(i,1),a.splice(l,0,r||a[0]),e.onChange.call(void 0,a)},C=t=>{u(t)},g=()=>{const t=e.initialData.find(a=>!e.data.find(i=>i.id===a.id));t&&e.onChange.call(void 0,[...e.data,t])},v=(t,a)=>{const i=e.data.map(l=>({...l,[s]:l.id===t.id?a:void 0}));e.onChange.call(void 0,i)},f=()=>{const t=e.data.map(a=>({...a,[s]:void 0}));e.onChange.call(void 0,t)},E=t=>{const a=t.field||"",i=e.data.map(l=>l.id===t.dataItem.id?{...l,[a]:t.value}:l);e.onChange.call(void 0,i)},S=t=>{const a=e.data.filter(i=>i.id!==t);e.onChange.call(void 0,a)};return n.createElement(d.RemoveSeriesContext.Provider,{value:{onRemove:S,count:e.data.length}},n.createElement(d.ReorderContext.Provider,{value:{reorder:m,dragStart:C}},n.createElement(d.SeriesEditContext.Provider,{value:{enterEdit:v,exitEdit:f}},n.createElement(o.Grid,{className:"k-series-grid",style:{width:"100%"},size:"medium",data:e.data,dataItemKey:"id",onItemChange:E,scrollable:"none",editField:s,cells:{headerCell:d.SeriesHeaderCell,data:d.SeriesDataCell,edit:{text:d.SeriesDataEditCell,boolean:d.SeriesDataEditCell,numeric:d.SeriesDataEditCell,date:d.SeriesDataEditCell}}},n.createElement(o.GridToolbar,null,n.createElement(h.Button,{type:"button",className:"k-toolbar-button",fillMode:"flat",onClick:g,disabled:e.data.length===e.initialData.length,svgIcon:I.plusIcon,icon:"plus"},D.useLocalization().toLanguageString(x.configurationSeriesAdd,G.configurationSeriesAdd))),n.createElement(o.GridColumn,{field:"reorder",width:"40px",editable:!1}),n.createElement(o.GridColumn,{field:"name",title:"Name"}),n.createElement(o.GridColumn,{field:"delete",width:"40px",editable:!1})))))};exports.SeriesGrid=k;

package/{SeriesGrid.mjs → components/SeriesGrid.mjs}

@@ -12,7 +12,7 @@ import { Grid as D, GridToolbar as I, GridColumn as c } from "@progress/kendo-re
 import { useLocalization as S } from "@progress/kendo-react-intl";
 import { plusIcon as b } from "@progress/kendo-svg-icons";
 import { RemoveSeriesContext as w, ReorderContext as A, SeriesEditContext as G, SeriesHeaderCell as R, SeriesDataCell as k, SeriesDataEditCell as l } from "./SeriesGridCells.mjs";
-import { configurationSeriesAdd as y } from "./messages.mjs";
+import { configurationSeriesAdd as y } from "../messages.mjs";
 import { ChartWizardCommon as z } from "@progress/kendo-charts";
 const { messages: L } = z, m = "inEdit", M = (e) => {
   const [o, s] = i.useState(null), f = (t) => {
@@ -74,7 +74,10 @@ const { messages: L } = z, m = "inEdit", M = (e) => {
         svgIcon: b,
         icon: "plus"
       },
-      S().toLanguageString(y, L.configurationSeriesAdd)
+      S().toLanguageString(
+        y,
+        L.configurationSeriesAdd
+      )
     )),
     /* @__PURE__ */ i.createElement(c, { field: "reorder", width: "40px", editable: !1 }),
     /* @__PURE__ */ i.createElement(c, { field: "name", title: "Name" }),

package/components/SeriesTypeButton.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),n=require("@progress/kendo-react-common"),l=e=>{const a=c.useCallback(t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),e.onClick.call(void 0))},[e.onClick]);return c.createElement("div",{className:n.classNames("k-icon-text-wrapper",{"k-selected":e.selected}),onClick:e.onClick},c.createElement("div",{className:"k-icon-background-area",tabIndex:0,onKeyDown:a},c.createElement(n.IconWrap,{name:e.iconName,icon:e.icon,size:"xlarge",className:"k-svg-i-chart-bar-clustered"})),e.children)};exports.SeriesTypeButton=l;

package/components/SeriesTypeButton.mjs

@@ -0,0 +1,30 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import c from "react";
+import { classNames as n, IconWrap as l } from "@progress/kendo-react-common";
+const o = (e) => {
+  const t = c.useCallback(
+    (a) => {
+      (a.key === "Enter" || a.key === " ") && (a.preventDefault(), e.onClick.call(void 0));
+    },
+    [e.onClick]
+  );
+  return /* @__PURE__ */ c.createElement("div", { className: n("k-icon-text-wrapper", { "k-selected": e.selected }), onClick: e.onClick }, /* @__PURE__ */ c.createElement("div", { className: "k-icon-background-area", tabIndex: 0, onKeyDown: t }, /* @__PURE__ */ c.createElement(
+    l,
+    {
+      name: e.iconName,
+      icon: e.icon,
+      size: "xlarge",
+      className: "k-svg-i-chart-bar-clustered"
+    }
+  )), e.children);
+};
+export {
+  o as SeriesTypeButton
+};

package/{common/get-wizard-data-from-data-rows.js → components/SeriesTypesWrap.js}

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@progress/kendo-charts"),{getWizardDataFromDataRows:a}=t.ChartWizardCommon;exports.getWizardDataFromDataRows=a;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),t=require("../utils.js"),s=e=>r.createElement("div",{className:"k-chart-types-wrapper",onKeyDown:t.stopPropagation},e.children);exports.SeriesTypesWrap=s;

package/{common/get-wizard-data-from-data-rows.mjs → components/SeriesTypesWrap.mjs}

@@ -6,8 +6,9 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import { ChartWizardCommon as o } from "@progress/kendo-charts";
-const { getWizardDataFromDataRows: a } = o;
+import r from "react";
+import { stopPropagation as t } from "../utils.mjs";
+const p = (e) => /* @__PURE__ */ r.createElement("div", { className: "k-chart-types-wrapper", onKeyDown: t }, e.children);
 export {
-  a as getWizardDataFromDataRows
+  p as SeriesTypesWrap
 };

package/components/panels/BarChartPanel.js

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

package/components/panels/BarChartPanel.mjs

@@ -0,0 +1,71 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as e from "react";
+import { Reveal as x } from "@progress/kendo-react-animation";
+import { useLocalization as E } from "@progress/kendo-react-intl";
+import { ExpansionPanel as f, ExpansionPanelContent as y } from "@progress/kendo-react-layout";
+import { SeriesTypesWrap as T } from "../SeriesTypesWrap.mjs";
+import { SeriesTypeButton as s } from "../SeriesTypeButton.mjs";
+import { stackState as L, mergeStates as i, createState as l, updateState as d, ActionTypes as S, stackNormal as N, stack100 as I } from "../../utils.mjs";
+import { barChart as A, messages as c, barChartBar as P, barChartStackedBar as w, barChart100StackedBar as z } from "../../messages.mjs";
+import { chartBarClusteredIcon as R, chartBarStackedIcon as W, chartBarStacked100Icon as v } from "@progress/kendo-svg-icons";
+const M = (r) => {
+  const n = E(), t = r.state, o = t.seriesType, { isStackFalse: h, isStackNormal: k, isStack100: p } = L(t), [m, C] = e.useState(!0), b = e.useCallback((a) => {
+    C(!a.expanded);
+  }, []), g = () => {
+    r.onStateChange(i(t, l(t.data, "bar")));
+  }, u = () => {
+    const a = i(t, l(t.data, "bar"));
+    r.onStateChange(d(a, S.stacked, N));
+  }, B = () => {
+    const a = i(t, l(t.data, "bar"));
+    r.onStateChange(d(a, S.stacked, I));
+  };
+  return /* @__PURE__ */ e.createElement(
+    f,
+    {
+      style: { maxWidth: "576px" },
+      title: n.toLanguageString(A, c.barChart),
+      expanded: m,
+      tabIndex: 0,
+      onAction: b
+    },
+    /* @__PURE__ */ e.createElement(x, null, m && /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(T, null, /* @__PURE__ */ e.createElement(
+      s,
+      {
+        selected: o === "bar" && h,
+        onClick: g,
+        icon: R,
+        iconName: "chart-bar-clustered"
+      },
+      n.toLanguageString(P, c.barChartBar)
+    ), /* @__PURE__ */ e.createElement(
+      s,
+      {
+        selected: o === "bar" && k,
+        onClick: u,
+        icon: W,
+        iconName: "chart-bar-stacked"
+      },
+      n.toLanguageString(w, c.barChartStackedBar)
+    ), /* @__PURE__ */ e.createElement(
+      s,
+      {
+        selected: o === "bar" && p,
+        onClick: B,
+        icon: v,
+        iconName: "chart-bar-stacked100"
+      },
+      n.toLanguageString(z, c.barChart100StackedBar)
+    ))))
+  );
+};
+export {
+  M as BarChartPanel
+};

package/components/panels/CategoryAxisPanel.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),f=require("@progress/kendo-react-layout"),P=require("@progress/kendo-react-form"),b=require("../FormFieldSet.js"),g=require("../FormField.js"),c=require("@progress/kendo-react-inputs"),e=require("../../utils.js"),a=require("../../messages.js"),N=require("@progress/kendo-react-intl"),q=require("@progress/kendo-react-animation"),m=require("@progress/kendo-react-dropdowns"),w=i=>{var x,u,C,y,A;const r=N.useLocalization(),o=i.state,S=o.seriesType,[d,F]=t.useState(!1),L=t.useCallback(l=>{F(!l.expanded)},[]),T=t.useCallback(l=>{i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisTitleText,l.target.value))},[o]),h=t.useCallback(l=>{const n=l.target.value||e.nullItem;e.ensureValue(n)&&i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisTitleFontSize,n.value))},[o]),p=t.useCallback(l=>{const n=l.target.value||e.nullItem;i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisTitleFontName,n.value))},[o]),v=t.useCallback(l=>{i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisTitleColor,l.value))},[o]),k=t.useCallback(l=>{const n=l.target.value||e.nullItem;e.ensureValue(n)&&i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisLabelsFontSize,n.value))},[o]),E=t.useCallback(l=>{const n=l.target.value||e.nullItem;i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisLabelsFontName,n.value))},[o]),z=t.useCallback(l=>{i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisLabelsColor,l.value))},[o]),R=t.useCallback(l=>{i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisLabelsRotation,l.target.value))},[o]),I=t.useCallback(l=>{i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisReverseOrder,l.value))},[o]);return t.createElement(f.ExpansionPanel,{style:{maxWidth:"576px"},title:S==="scatter"?r.toLanguageString(a.formatXAxis,a.messages.formatXAxis):r.toLanguageString(a.formatCategoryAxis,a.messages.formatCategoryAxis),expanded:d,tabIndex:0,onAction:L},t.createElement(q.Reveal,null,d&&t.createElement(f.ExpansionPanelContent,null,t.createElement(P.FormElement,{onKeyDown:e.stopPropagation},t.createElement(b.FormFieldSet,{legend:r.toLanguageString(a.formatCategoryAxisTitle,a.messages.formatCategoryAxisTitle)},t.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},t.createElement(g.FormField,{className:"k-col-span-2"},t.createElement(c.Input,{placeholder:r.toLanguageString(a.formatCategoryAxisTitlePlaceholder,a.messages.formatCategoryAxisTitlePlaceholder),value:((x=o.categoryAxis[0].title)==null?void 0:x.text)||"",onChange:T})),t.createElement(g.FormField,{className:"k-col-span-2",editorId:"categoryAxisTitleFont",labelText:r.toLanguageString(a.formatCategoryAxisTitleFont,a.messages.formatCategoryAxisTitleFont)},t.createElement(m.ComboBox,{id:"categoryAxisTitleFont",data:e.fontNames,textField:"text",dataItemKey:"value",itemRender:e.itemRender,placeholder:r.toLanguageString(a.formatCategoryAxisTitleFontPlaceholder,a.messages.formatCategoryAxisTitleFontPlaceholder),value:e.fontNames.find(l=>{var n,s;return l.value===((s=e.parseFont(((n=o.categoryAxis[0].title)==null?void 0:n.font)||""))==null?void 0:s.name)})||e.nullItem,onChange:p,...e.dropdownlistCommonProps})),t.createElement(g.FormField,{editorId:"categoryAxisTitleFontSize",labelText:r.toLanguageString(a.formatCategoryAxisTitleSize,a.messages.formatCategoryAxisTitleSize)},t.createElement(m.ComboBox,{id:"categoryAxisTitleFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:r.toLanguageString(a.formatCategoryAxisTitleSizePlaceholder,a.messages.formatCategoryAxisTitleSizePlaceholder),value:e.fontSizes.find(l=>{var n,s;return l.value===((s=e.parseFont(((n=o.categoryAxis[0].title)==null?void 0:n.font)||""))==null?void 0:s.size)})||e.nullItem,onChange:h,allowCustom:!0,...e.dropdownlistCommonProps})),t.createElement(g.FormField,{editorId:"categoryAxisTitleColor",labelText:r.toLanguageString(a.formatCategoryAxisTitleColor,a.messages.formatCategoryAxisTitleColor)},t.createElement(c.ColorPicker,{id:"categoryAxisTitleColor",view:"gradient",value:((u=o.categoryAxis[0].title)==null?void 0:u.color)||"",onChange:v,fillMode:"outline"})))),t.createElement(b.FormFieldSet,{legend:r.toLanguageString(a.formatCategoryAxisLabels,a.messages.formatCategoryAxisLabels)},t.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},t.createElement(g.FormField,{className:"k-col-span-2",editorId:"categoryAxisLabelsFont",labelText:r.toLanguageString(a.formatCategoryAxisLabelsFont,a.messages.formatCategoryAxisLabelsFont)},t.createElement(m.ComboBox,{id:"categoryAxisLabelsFont",data:e.fontNames,textField:"text",dataItemKey:"value",placeholder:r.toLanguageString(a.formatCategoryAxisLabelsFontPlaceholder,a.messages.formatCategoryAxisLabelsFontPlaceholder),value:e.fontNames.find(l=>{var n,s;return l.value===((s=e.parseFont(((n=o.categoryAxis[0].labels)==null?void 0:n.font)||""))==null?void 0:s.name)})||e.nullItem,onChange:E,itemRender:e.itemRender,...e.dropdownlistCommonProps})),t.createElement(g.FormField,{editorId:"categoryAxisLabelsFontSize",labelText:r.toLanguageString(a.formatCategoryAxisLabelsSize,a.messages.formatCategoryAxisLabelsSize)},t.createElement(m.ComboBox,{id:"categoryAxisLabelsFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:r.toLanguageString(a.formatCategoryAxisLabelsSizePlaceholder,a.messages.formatCategoryAxisLabelsSizePlaceholder),value:e.fontSizes.find(l=>{var n,s;return l.value===((s=e.parseFont(((n=o.categoryAxis[0].labels)==null?void 0:n.font)||""))==null?void 0:s.size)})||e.nullItem,onChange:k,allowCustom:!0,...e.dropdownlistCommonProps})),t.createElement(g.FormField,{editorId:"categoryAxisLabelsColor",labelText:r.toLanguageString(a.formatCategoryAxisLabelsColor,a.messages.formatCategoryAxisLabelsColor)},t.createElement(c.ColorPicker,{id:"categoryAxisLabelsColor",view:"gradient",value:((C=o.categoryAxis[0].labels)==null?void 0:C.color)||"",onChange:z,fillMode:"outline"})),t.createElement(g.FormField,{editorId:"categoryAxisLabelsRotation",labelText:r.toLanguageString(a.formatCategoryAxisLabelsRotation,a.messages.formatCategoryAxisLabelsRotation)},t.createElement(c.NumericTextBox,{id:"categoryAxisLabelsRotation",value:typeof((y=o.categoryAxis[0].labels)==null?void 0:y.rotation)=="number"?(A=o.categoryAxis[0].labels)==null?void 0:A.rotation:null,placeholder:r.toLanguageString(a.formatCategoryAxisLabelsRotationAuto,a.messages.formatCategoryAxisLabelsRotationAuto),onChange:R,fillMode:"outline",min:-360,max:360,step:1})),t.createElement(g.FormField,{className:"k-col-span-2"},t.createElement(c.Checkbox,{label:r.toLanguageString(a.formatCategoryAxisLabelsReverseOrder,a.messages.formatCategoryAxisLabelsReverseOrder),checked:o.categoryAxis[0].reverse||!1,onChange:I}))))))))};exports.CategoryAxisPanel=w;

package/components/panels/CategoryAxisPanel.mjs

@@ -0,0 +1,315 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import e from "react";
+import { ExpansionPanel as X, ExpansionPanelContent as _ } from "@progress/kendo-react-layout";
+import { FormElement as D } from "@progress/kendo-react-form";
+import { FormFieldSet as T } from "../FormFieldSet.mjs";
+import { FormField as s } from "../FormField.mjs";
+import { Input as V, ColorPicker as v, NumericTextBox as W, Checkbox as j } from "@progress/kendo-react-inputs";
+import { updateState as g, ActionTypes as c, nullItem as m, ensureValue as F, stopPropagation as q, fontNames as x, itemRender as E, parseFont as C, dropdownlistCommonProps as y, fontSizes as d } from "../../utils.mjs";
+import { formatXAxis as G, messages as r, formatCategoryAxis as H, formatCategoryAxisTitle as J, formatCategoryAxisTitlePlaceholder as Q, formatCategoryAxisTitleFont as U, formatCategoryAxisTitleFontPlaceholder as Y, formatCategoryAxisTitleSize as Z, formatCategoryAxisTitleSizePlaceholder as $, formatCategoryAxisTitleColor as ee, formatCategoryAxisLabels as te, formatCategoryAxisLabelsFont as ae, formatCategoryAxisLabelsFontPlaceholder as oe, formatCategoryAxisLabelsSize as le, formatCategoryAxisLabelsSizePlaceholder as re, formatCategoryAxisLabelsColor as ie, formatCategoryAxisLabelsRotation as ne, formatCategoryAxisLabelsRotationAuto as se, formatCategoryAxisLabelsReverseOrder as ge } from "../../messages.mjs";
+import { useLocalization as ce } from "@progress/kendo-react-intl";
+import { Reveal as me } from "@progress/kendo-react-animation";
+import { ComboBox as A } from "@progress/kendo-react-dropdowns";
+const Te = (n) => {
+  var f, b, L, S, h;
+  const l = ce(), t = n.state, k = t.seriesType, [u, p] = e.useState(!1), z = e.useCallback((a) => {
+    p(!a.expanded);
+  }, []), P = e.useCallback(
+    (a) => {
+      n.onStateChange(g(t, c.categoryAxisTitleText, a.target.value));
+    },
+    [t]
+  ), R = e.useCallback(
+    (a) => {
+      const o = a.target.value || m;
+      F(o) && n.onStateChange(g(t, c.categoryAxisTitleFontSize, o.value));
+    },
+    [t]
+  ), I = e.useCallback(
+    (a) => {
+      const o = a.target.value || m;
+      n.onStateChange(g(t, c.categoryAxisTitleFontName, o.value));
+    },
+    [t]
+  ), N = e.useCallback(
+    (a) => {
+      n.onStateChange(g(t, c.categoryAxisTitleColor, a.value));
+    },
+    [t]
+  ), w = e.useCallback(
+    (a) => {
+      const o = a.target.value || m;
+      F(o) && n.onStateChange(g(t, c.categoryAxisLabelsFontSize, o.value));
+    },
+    [t]
+  ), K = e.useCallback(
+    (a) => {
+      const o = a.target.value || m;
+      n.onStateChange(g(t, c.categoryAxisLabelsFontName, o.value));
+    },
+    [t]
+  ), M = e.useCallback(
+    (a) => {
+      n.onStateChange(g(t, c.categoryAxisLabelsColor, a.value));
+    },
+    [t]
+  ), O = e.useCallback(
+    (a) => {
+      n.onStateChange(g(t, c.categoryAxisLabelsRotation, a.target.value));
+    },
+    [t]
+  ), B = e.useCallback(
+    (a) => {
+      n.onStateChange(g(t, c.categoryAxisReverseOrder, a.value));
+    },
+    [t]
+  );
+  return /* @__PURE__ */ e.createElement(
+    X,
+    {
+      style: { maxWidth: "576px" },
+      title: k === "scatter" ? l.toLanguageString(G, r.formatXAxis) : l.toLanguageString(H, r.formatCategoryAxis),
+      expanded: u,
+      tabIndex: 0,
+      onAction: z
+    },
+    /* @__PURE__ */ e.createElement(me, null, u && /* @__PURE__ */ e.createElement(_, null, /* @__PURE__ */ e.createElement(D, { onKeyDown: q }, /* @__PURE__ */ e.createElement(
+      T,
+      {
+        legend: l.toLanguageString(
+          J,
+          r.formatCategoryAxisTitle
+        )
+      },
+      /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(s, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
+        V,
+        {
+          placeholder: l.toLanguageString(
+            Q,
+            r.formatCategoryAxisTitlePlaceholder
+          ),
+          value: ((f = t.categoryAxis[0].title) == null ? void 0 : f.text) || "",
+          onChange: P
+        }
+      )), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          className: "k-col-span-2",
+          editorId: "categoryAxisTitleFont",
+          labelText: l.toLanguageString(
+            U,
+            r.formatCategoryAxisTitleFont
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          A,
+          {
+            id: "categoryAxisTitleFont",
+            data: x,
+            textField: "text",
+            dataItemKey: "value",
+            itemRender: E,
+            placeholder: l.toLanguageString(
+              Y,
+              r.formatCategoryAxisTitleFontPlaceholder
+            ),
+            value: x.find(
+              (a) => {
+                var o, i;
+                return a.value === ((i = C(((o = t.categoryAxis[0].title) == null ? void 0 : o.font) || "")) == null ? void 0 : i.name);
+              }
+            ) || m,
+            onChange: I,
+            ...y
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          editorId: "categoryAxisTitleFontSize",
+          labelText: l.toLanguageString(
+            Z,
+            r.formatCategoryAxisTitleSize
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          A,
+          {
+            id: "categoryAxisTitleFontSize",
+            data: d,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(
+              $,
+              r.formatCategoryAxisTitleSizePlaceholder
+            ),
+            value: d.find(
+              (a) => {
+                var o, i;
+                return a.value === ((i = C(((o = t.categoryAxis[0].title) == null ? void 0 : o.font) || "")) == null ? void 0 : i.size);
+              }
+            ) || m,
+            onChange: R,
+            allowCustom: !0,
+            ...y
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          editorId: "categoryAxisTitleColor",
+          labelText: l.toLanguageString(
+            ee,
+            r.formatCategoryAxisTitleColor
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          v,
+          {
+            id: "categoryAxisTitleColor",
+            view: "gradient",
+            value: ((b = t.categoryAxis[0].title) == null ? void 0 : b.color) || "",
+            onChange: N,
+            fillMode: "outline"
+          }
+        )
+      ))
+    ), /* @__PURE__ */ e.createElement(
+      T,
+      {
+        legend: l.toLanguageString(
+          te,
+          r.formatCategoryAxisLabels
+        )
+      },
+      /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(
+        s,
+        {
+          className: "k-col-span-2",
+          editorId: "categoryAxisLabelsFont",
+          labelText: l.toLanguageString(
+            ae,
+            r.formatCategoryAxisLabelsFont
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          A,
+          {
+            id: "categoryAxisLabelsFont",
+            data: x,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(
+              oe,
+              r.formatCategoryAxisLabelsFontPlaceholder
+            ),
+            value: x.find(
+              (a) => {
+                var o, i;
+                return a.value === ((i = C(((o = t.categoryAxis[0].labels) == null ? void 0 : o.font) || "")) == null ? void 0 : i.name);
+              }
+            ) || m,
+            onChange: K,
+            itemRender: E,
+            ...y
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          editorId: "categoryAxisLabelsFontSize",
+          labelText: l.toLanguageString(
+            le,
+            r.formatCategoryAxisLabelsSize
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          A,
+          {
+            id: "categoryAxisLabelsFontSize",
+            data: d,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(
+              re,
+              r.formatCategoryAxisLabelsSizePlaceholder
+            ),
+            value: d.find(
+              (a) => {
+                var o, i;
+                return a.value === ((i = C(((o = t.categoryAxis[0].labels) == null ? void 0 : o.font) || "")) == null ? void 0 : i.size);
+              }
+            ) || m,
+            onChange: w,
+            allowCustom: !0,
+            ...y
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          editorId: "categoryAxisLabelsColor",
+          labelText: l.toLanguageString(
+            ie,
+            r.formatCategoryAxisLabelsColor
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          v,
+          {
+            id: "categoryAxisLabelsColor",
+            view: "gradient",
+            value: ((L = t.categoryAxis[0].labels) == null ? void 0 : L.color) || "",
+            onChange: M,
+            fillMode: "outline"
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          editorId: "categoryAxisLabelsRotation",
+          labelText: l.toLanguageString(
+            ne,
+            r.formatCategoryAxisLabelsRotation
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          W,
+          {
+            id: "categoryAxisLabelsRotation",
+            value: typeof ((S = t.categoryAxis[0].labels) == null ? void 0 : S.rotation) == "number" ? (h = t.categoryAxis[0].labels) == null ? void 0 : h.rotation : null,
+            placeholder: l.toLanguageString(
+              se,
+              r.formatCategoryAxisLabelsRotationAuto
+            ),
+            onChange: O,
+            fillMode: "outline",
+            min: -360,
+            max: 360,
+            step: 1
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(s, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
+        j,
+        {
+          label: l.toLanguageString(
+            ge,
+            r.formatCategoryAxisLabelsReverseOrder
+          ),
+          checked: t.categoryAxis[0].reverse || !1,
+          onChange: B
+        }
+      )))
+    ))))
+  );
+};
+export {
+  Te as CategoryAxisPanel
+};