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

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
 *-------------------------------------------------------------------------------------------
 */
"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;