@progress/kendo-react-chart-wizard/components/panels/TitlePanel.mjs

React Chart Wizard lets you create a chart using data from a Grid, another data-bound component, or an external source

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
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";
import { FormField as u } from "../FormField.mjs";
import { stopPropagation as w, dropdownlistCommonProps as f, fontNames as p, parseFont as x, nullItem as g, itemRender as C, fontSizes as S, ActionTypes as n, updateState as T, ensureValue as K } from "../../utils.mjs";
import { DropDownList as D, ComboBox as h } from "@progress/kendo-react-dropdowns";
import { Input as R, ColorPicker as B } from "@progress/kendo-react-inputs";
import { useLocalization as M } from "@progress/kendo-react-intl";
import { formatTitleChartTitle as V, messages as o, formatTitleChartSubtitle as W, formatTitle as j, formatTitleApplyTo as q, formatTitleLabel as G, formatTitleFont as H, formatTitleFontPlaceholder as J, formatTitleSize as O, formatTitleSizePlaceholder as Q, formatTitleColor as U } from "../../messages.mjs";
import { Reveal as X } from "@progress/kendo-react-animation";
const nt = (c) => {
  const l = M(), m = c.state, [v, F] = t.useState(!1), b = t.useCallback((e) => {
    F(!e.expanded);
  }, []), a = [
    {
      value: "chartTitle",
      text: l.toLanguageString(V, o.formatTitleChartTitle)
    },
    {
      value: "chartSubtitle",
      text: l.toLanguageString(W, o.formatTitleChartSubtitle)
    }
  ], [i, E] = t.useState(a[0]), z = t.useCallback((e) => {
    E(e.target.value);
  }, []), L = (e) => {
    const r = i.value === a[0].value ? n.titleText : n.subtitleText;
    c.onStateChange(T(m, r, e.target.value));
  }, y = (e) => {
    const r = i.value === a[0].value ? n.titleFontName : n.subtitleFontName, d = e.target.value || g;
    c.onStateChange(T(m, r, d.value));
  }, I = (e) => {
    const r = i.value === a[0].value ? n.titleFontSize : n.subtitleFontSize, d = e.target.value || g;
    K(d) && c.onStateChange(T(m, r, d.value));
  }, k = (e) => {
    const r = i.value === a[0].value ? n.titleColor : n.subtitleColor;
    c.onStateChange(T(m, r, e.value));
  }, s = (i.value === a[0].value ? m.title : m.subtitle) || {
    text: "",
    font: "",
    color: ""
  };
  return /* @__PURE__ */ t.createElement(
    P,
    {
      style: { maxWidth: "576px" },
      title: l.toLanguageString(j, o.formatTitle),
      expanded: v,
      tabIndex: 0,
      onAction: b
    },
    /* @__PURE__ */ t.createElement(X, null, v && /* @__PURE__ */ t.createElement(N, null, /* @__PURE__ */ t.createElement(A, { onKeyDown: w }, /* @__PURE__ */ t.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ t.createElement(
      u,
      {
        className: "k-col-span-2",
        editorId: "apply-to-title",
        labelText: l.toLanguageString(
          q,
          o.formatTitleApplyTo
        )
      },
      /* @__PURE__ */ t.createElement(
        D,
        {
          id: "apply-to-title",
          data: a,
          textField: "text",
          dataItemKey: "value",
          value: a.find((e) => e.value === i.value),
          onChange: z,
          ...f
        }
      )
    ), /* @__PURE__ */ t.createElement(
      u,
      {
        className: "k-col-span-2",
        editorId: "titleText",
        labelText: l.toLanguageString(
          G,
          o.formatTitleLabel
        )
      },
      /* @__PURE__ */ t.createElement(
        R,
        {
          id: "titleText",
          placeholder: i.value === a[0].value ? a[0].text : a[1].text,
          value: s.text,
          onChange: L
        }
      )
    ), /* @__PURE__ */ t.createElement(
      u,
      {
        className: "k-col-span-2",
        editorId: "titleFont",
        labelText: l.toLanguageString(H, o.formatTitleFont)
      },
      /* @__PURE__ */ t.createElement(
        h,
        {
          id: "titleFont",
          data: p,
          textField: "text",
          dataItemKey: "value",
          placeholder: l.toLanguageString(
            J,
            o.formatTitleFontPlaceholder
          ),
          value: p.find((e) => e.value === x(s.font).name) || g,
          onChange: y,
          itemRender: C,
          ...f
        }
      )
    ), /* @__PURE__ */ t.createElement(
      u,
      {
        editorId: "titleFontSize",
        labelText: l.toLanguageString(O, o.formatTitleSize)
      },
      /* @__PURE__ */ t.createElement(
        h,
        {
          id: "titleFontSize",
          data: S,
          textField: "text",
          dataItemKey: "value",
          placeholder: l.toLanguageString(
            Q,
            o.formatTitleSizePlaceholder
          ),
          value: S.find((e) => e.value === x(s.font).size) || g,
          onChange: I,
          itemRender: C,
          allowCustom: !0,
          ...f
        }
      )
    ), /* @__PURE__ */ t.createElement(
      u,
      {
        editorId: "titleColor",
        labelText: l.toLanguageString(
          U,
          o.formatTitleColor
        )
      },
      /* @__PURE__ */ t.createElement(
        B,
        {
          id: "titleColor",
          value: s.color || "",
          onChange: k,
          view: "gradient",
          fillMode: "outline"
        }
      )
    )))))
  );
};
export {
  nt as TitlePanel
};