@vertigis/workflow 5.33.0 → 5.34.0

package/forms/components/DateRangePicker.d.ts

@@ -1,9 +1,11 @@
-import * as React from "react";
-import { FormComponent } from "../FormComponent";
-import { Element } from "../FormDefinition";
-interface DateRangePickerProps {
-    component: FormComponent;
-    element: Element;
-}
-declare const DateRangePicker: React.FC<DateRangePickerProps>;
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+export declare const dateRangePickerClasses: {
+    root: string;
+    toLabel: string;
+};
+/**
+ * The component for the "Date Range Picker" Form Element.
+ */
+declare const DateRangePicker: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
 export default DateRangePicker;

package/forms/components/DateRangePicker.js

@@ -1 +1 @@
-import{parse,isAfter,isBefore,isEqual}from"date-fns";import{useEffect,useRef,useState,lazy,Suspense}from"react";import*as React from"react";import{DEFAULT_LOCALE}from"../../constants.js";import FormElement from"../FormElement.js";import{renderArrowRight}from"../assets/arrow.js";import{renderCalendar}from"../assets/datetime.js";import{useFocusCallback}from"../common.js";import{CssClasses}from"../constants.js";import{convertToDateRangeRef,getDateAsLocaleFormattedString,getDateFnsLocale,getLocaleDateFormat,isValidDate,tryParseDateText}from"../dateUtilities.js";import{CSS}from"../styles/daterange.js";import{addStyleToDocument}from"../utils.js";const DateRange=lazy(()=>import("./DateRange"));var DateInputType;addStyleToDocument(CSS),function(e){e.Start="start",e.End="end"}(DateInputType=DateInputType||{});const dateFormat=getLocaleDateFormat();let currentLocale;const DateRangePicker=e=>{const t=e.component,r=e.element,n=useRef(),[a,o]=useState(!1),[l,c]=useState(),[s,i]=useState(""),[d,m]=useState(),[u,D]=useState("");var p=!t.enabled;const{host:v,name:g}=t.props;var f=v.renderText(r.tooltip),y=t.enabled?"inner":"inner disabled";useEffect(()=>{(async()=>{var e=v.deriveLocale();"inv"!==e&&"en"!==e&&e!==DEFAULT_LOCALE&&(currentLocale=await getDateFnsLocale(e))})()},[]),useEffect(()=>{var e;r.value!==n.current&&((e=convertToDateRangeRef(r.value))?(c(e.startDate),m(e.endDate),i(getDateAsLocaleFormattedString(e.startDate)),D(getDateAsLocaleFormattedString(e.endDate))):void 0===r.value&&(c(void 0),m(void 0),i(""),D("")),r.error&&C(),A(e?.startDate,e?.endDate,!1))},[r.value]);var E=useFocusCallback(t);const S=(e,t)=>{var a,r="string"==typeof e?e:e.target.value,n=""!==r&&void 0!==r,o=n?tryParseDateText(r):void 0,s=n?o?parse(o,dateFormat,0):new Date(NaN):void 0,e=t===DateInputType.Start,r=e?s:l,t=e?d:s;n?isValidDate(s)?e?(c(r),i(o),(a=!isValidDate(t)||isAfter(r,t))&&(m(r),D(o)),C(),a=a?r:t,T(r,a)):(m(t),D(o),(a=!isValidDate(r)||isBefore(t,r))&&(c(t),i(o)),C(),a=a?t:r,T(a,t)):(C({status:"invalid"}),T(),(e?c:m)(new Date(NaN))):((e?void 0===t||isValidDate(t):void 0===r||isValidDate(r))&&C(),T(),(e?c:m)(void 0))};const R=(e,t)=>{(t===DateInputType.Start?i:D)(e.target.value)},F=(e,t)=>{var a;e.stopPropagation(),"Enter"===e.key?(a=t===DateInputType.Start?s:u,S(a,t)):"Escape"===e.key&&(e=t===DateInputType.Start?getDateAsLocaleFormattedString(l):getDateAsLocaleFormattedString(d),S(e,t))},T=(e,t)=>{L(e,t)&&A(e,t)},L=(e,t)=>{var a=n.current;return!(e||t||!a)||(!(!e||!t||a)||!!(e&&t&&a)&&(!isEqual(e,a.startDate)||!isEqual(t,a.endDate)))},C=e=>{r.error=e,t.forceUpdate()},A=(e,t,a=!0)=>{t=e&&t?{refValueType:"daterange",startDate:e,endDate:t}:void 0;n.current=r.value=t,a&&v.post("changed",{name:g,value:r.value})};e={startDate:n.current?.startDate||new Date,endDate:n.current?.endDate||new Date,key:"selection",showDateDisplay:!1};return React.createElement(FormElement,{component:t,element:r,legacyMode:!0},React.createElement("div",{className:"outer",title:f},React.createElement("div",{className:y},React.createElement("input",{ref:E,disabled:p,type:"text",onChange:e=>R(e,DateInputType.Start),onBlur:e=>S(e,DateInputType.Start),onKeyDown:e=>F(e,DateInputType.Start),placeholder:dateFormat.toUpperCase(),value:s}),React.createElement("span",{className:"arrow"},renderArrowRight()),React.createElement("input",{disabled:p,type:"text",onChange:e=>R(e,DateInputType.End),onBlur:e=>S(e,DateInputType.End),onKeyDown:e=>F(e,DateInputType.End),placeholder:dateFormat.toUpperCase(),value:u})),React.createElement("div",{className:"buttonContainer"},React.createElement("button",{className:"calendarButton",disabled:p,onClick:()=>{o(!a)}},renderCalendar()),a&&React.createElement(Suspense,{fallback:null},React.createElement("div",{className:CssClasses.DROPDOWN},React.createElement(DateRange,{dateDisplayFormat:dateFormat,editableDateInputs:!1,months:1,direction:"horizontal",ranges:[e],onChange:e=>{var t=e.selection.startDate,e=e.selection.endDate;c(t),i(getDateAsLocaleFormattedString(t)),m(e),D(getDateAsLocaleFormattedString(e)),C(),T(t,e)},locale:currentLocale}),React.createElement("button",{className:"done",onClick:()=>{o(!1)}},v.renderText("@common-done")))))))};export default DateRangePicker;
+import Box from"@vertigis/react-ui/Box";import BaseDateRangePicker from"@vertigis/react-ui/DateRangePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useEffect,useRef,useState}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{areValuesEqual,convertToDateRangeRef,hasErrorChanged,isInvalidDate}from"../dateUtilities.js";import{makeUniqueId}from"../utils.js";const PREFIX="DateRangePicker",dateRangePickerClasses={root:`${PREFIX}-root`,toLabel:`${PREFIX}-toLabel`},Root=styled(FormElement)(({theme:{spacing:e}})=>({".MuiFormControl-root":{flexGrow:1},[`.${dateRangePickerClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}})),DateRangePicker=({className:e,component:t,element:r})=>{const[a,o]=useState(-1),[n,l]=useState([!1,!1]),s=useRef(),[i,c]=useState(!1),[m,u]=useState([null,null]),p=useRef(!0);useEffect(()=>{var e=convertToDateRangeRef(r.value),e=[e?.startDate||null,e?.endDate||null];u(e),E(e)},[r.value]),useEffect(()=>{var e,t;p.current?p.current=!1:(e=0===a?n[0]:isInvalidDate(m[0]),t=1===a?n[1]:isInvalidDate(m[1]),l([e,t]),e||t?d({status:"invalid"}):d(),i||-1!==a||r.error||E(m)&&f.post("changed",{name:g,value:r.value}))},[i,a]);const d=e=>{hasErrorChanged(r,e)&&(r.error=e,t.forceUpdate())};var R=!t.enabled;const{host:f,name:g}=t.props,v=f.renderText(r.tooltip),F=useFocusCallback(t),E=e=>{if(e[0]&&e[1]){e={refValueType:"daterange",startDate:e[0],endDate:e[1]};if(!areValuesEqual(r,e))return r.value=e,!0}else if(void 0!==r.value)return!(r.value=void 0);return!1},P=`${makeUniqueId(g)}-input`;return React.createElement(Root,{className:clsx(e,dateRangePickerClasses.root),component:t,element:r,inputId:P},r.error&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},s.current),React.createElement(BaseDateRangePicker,{disabled:R,onChange:e=>{u(e)},onOpen:()=>{c(!0)},onClose:()=>{c(!1)},renderInput:(e,t)=>(s.current=e.inputProps?.placeholder,e.error=!!r.error&&n[0],e.inputProps={...e.inputProps,id:P,title:v,onBlur:()=>{o(-1)},onFocus:()=>{o(0)}},e.inputRef=F,t.error=!!r.error&&n[1],t.inputProps={...t.inputProps,title:v,onBlur:()=>{o(-1)},onFocus:()=>{o(1)}},React.createElement(React.Fragment,null,React.createElement(FormLabelTextField,{...e}),React.createElement(Box,{className:dateRangePickerClasses.toLabel}," ",f.renderText("@common-to")," "),React.createElement(FormLabelTextField,{...t}))),value:m}))};export default DateRangePicker;export{dateRangePickerClasses};

package/forms/components/DateTimePicker.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
-import { FormComponent } from "../FormComponent";
-import { defs } from "../FormHost";
-interface DateTimePickerProps {
-    component: FormComponent;
-    element: defs.Element;
-}
-declare const _default: (props: DateTimePickerProps) => JSX.Element;
-export default _default;
+import { BaseFormElementProps } from "../FormElement";
+/**
+ * The component for the "Date Time Picker" Form Element.
+ */
+declare const DateTimePicker: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default DateTimePicker;

package/forms/components/DateTimePicker.js

@@ -1 +1 @@
-import{useState}from"react";import*as React from"react";import{Calendar}from"../Calendar.js";import FormElement from"../FormElement.js";import{renderClock}from"../assets/datetime.js";import{useFocusCallback}from"../common.js";import DatePicker from"./DatePicker.js";import TimePickerInput from"./TimePickerInput.js";export default e=>{const[t,a]=useState(!1),[o,n]=useState(!1),{component:r,element:i}=e,{host:l,name:c}=r.props;var s=useFocusCallback(r),u=l.renderText(i.tooltip);const m=((e,t)=>{if("object"==typeof e&&null!==e)switch(e.refValueType){case"date":case"time":case"datetime":t=e.format}if("object"!=typeof t)return"app"===t?t:"device";if(null===t)return"device";var a=t.locale,o=t.timezone;return"string"==typeof a&&"string"==typeof o?{locale:a,timezone:o}:"device"})(i.value,i.format),d=Calendar.useNative(),p=((e,t)=>{if("object"==typeof e){if(null===e)return;switch(e.refValueType){case"date":case"time":case"datetime":break;default:return}e=e.value}if("number"==typeof e||"string"==typeof e){const a=t.coerceIntoValue(e);if(void 0!==a&&null!==a&&isFinite(a.valueOf()))return a}})(i.value,d);let f="datetime",v=(e=>{if("object"==typeof e&&null!==e)switch(e.refValueType){case"date":case"time":case"datetime":return e.refValueType}})(i.value);"DatePicker"===i.type&&(f="date"),"TimePicker"===i.type&&(f="time");let g=p;"datetime"===f&&"date"===v?g=void 0:v=f;e={calendar:d,disabled:!r.enabled,doneText:l.renderText("@common-done"),placeholder:l.renderText(i.prompt),title:u};function k(e,t){return void 0===(e=null!=e&&!isFinite(e.valueOf())?void 0:e)?void 0!==p:void 0===p||(v!==t||("date"===t&&((e=new Date(e)).setHours(p.getHours()),e.setMinutes(p.getMinutes()),e.setSeconds(p.getSeconds()),e.setMilliseconds(p.getMilliseconds())),"time"===t&&((e=new Date(e)).setFullYear(p.getFullYear()),e.setMonth(p.getMonth()),e.setDate(p.getDate())),p.valueOf()!==e.valueOf()))}u=()=>{var e=!o;n(e),e&&a(!1)};const y=[];function T(e,t){void 0!==e&&isFinite(e.valueOf())?i.value={refValueType:t,format:m,display:d.format(e,Calendar.fullFormat),value:e.valueOf()}:i.value=void 0}return"DatePicker"!==i.type&&"DateTimePicker"!==i.type||y.push(React.createElement(DatePicker,{component:r,element:i,isOpen:t,key:"date-picker",onChange:function(e){let t=f;if("datetime"===f&&void 0!==e&&("date"===v&&(t="date"),void 0!==p)){const a=d.coerceIntoLocal(p),o=d.coerceIntoLocal(e);o.setHours(a.getHours()),o.setMinutes(a.getMinutes()),o.setSeconds(a.getSeconds()),o.setMilliseconds(a.getMilliseconds()),e=d.coerceIntoValue(o)}k(e,t)&&(T(e,t),r.forceUpdate(),l.post("changed",{name:c,value:i.value}))},onPopupToggle:()=>{var e=!t;a(e),e&&n(!1)},value:p})),"TimePicker"!==i.type&&"DateTimePicker"!==i.type||y.push(React.createElement("div",{className:"outer",key:"time-picker"},React.createElement("div",{className:"inner"},React.createElement(TimePickerInput,{...e,isOpen:o,onChange:function(e){let t=f;if("datetime"===f&&void 0!==p)if(void 0!==e){const a=d.coerceIntoLocal(p),o=d.coerceIntoLocal(e);o.setFullYear(a.getFullYear()),o.setMonth(a.getMonth()),o.setDate(a.getDate()),e=d.coerceIntoValue(o)}else e=p,t="date";k(e,t)&&(T(e,t),r.forceUpdate(),l.post("changed",{name:c,value:i.value}))},onPopupToggle:u,ref:s,value:g})),React.createElement("button",{className:"clockButton",disabled:e.disabled,onClick:u},renderClock()))),T(p,v),React.createElement(FormElement,{component:r,element:i,legacyMode:!0},y)};
+import BaseDateTimePicker from"@vertigis/react-ui/DateTimePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useEffect,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{hasErrorChanged,isInvalidDate,makeProperFormat,makeProperValue,updateElementValue}from"../dateUtilities.js";import{makeUniqueId}from"../utils.js";const StylableDateTimePicker=e=>{const{PopperProps:t={},className:r,...a}=e;return React.createElement(BaseDateTimePicker,{PopperProps:{...t,className:clsx(t.className,r)},...a})},StyledDateTimePicker=styled(StylableDateTimePicker)(({theme:{palette:e}})=>({"& .MuiClock-amButton, .MuiClock-pmButton":{"&.Mui-focusVisible":{color:e.action.active}}})),DateTimePicker=({className:e,component:t,element:r})=>{const[a,o]=useState(!1),[l,m]=useState(!1),[i,s]=useState(null),n=useRef(),c=useRef(!0),{host:u,name:p}=t.props;var d=useFocusCallback(t);const f=u.renderText(r.tooltip),k=makeProperFormat(r.value,r.format),P=Calendar.useNative(),v="datetime";useEffect(()=>{var e=makeProperValue(r.value,P);updateElementValue(r,e,v,k,P),s(e||null)},[r.value]),useEffect(()=>{c.current?c.current=!1:l||a||(isInvalidDate(i)?F({status:"invalid"}):(F(),updateElementValue(r,i,v,k,P)&&u.post("changed",{name:p,value:r.value})))},[l,a]);const F=e=>{hasErrorChanged(r,e)&&(r.error=e,t.forceUpdate())},T=`${makeUniqueId(p)}-input`,E=u.renderText(r.prompt);return React.createElement(FormElement,{className:e,component:t,element:r,inputId:T},r.error&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},n.current),React.createElement(StyledDateTimePicker,{disabled:!t.enabled,key:"date-picker",inputRef:d,onChange:e=>{s(e)},onOpen:()=>{m(!0)},onClose:()=>{m(!1)},renderInput:e=>(n.current=e.inputProps?.placeholder,e.error=!!r.error,e.inputProps={...e.inputProps,id:T,onBlur:()=>{o(!1)},onFocus:()=>{o(!0)},placeholder:E||e.inputProps?.placeholder,title:f},React.createElement(FormLabelTextField,{...e})),value:i}))};export default DateTimePicker;

package/forms/components/DropDownList.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+/**
+ * The component for the "Drop Down List" Form Element.
+ */
+declare const DropDownList: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default DropDownList;

package/forms/components/DropDownList.js

@@ -0,0 +1 @@
+import NativeSelect from"@vertigis/react-ui/NativeSelect";import*as React from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{makeSafeClassName,makeUniqueId,sortItems}from"../utils.js";const DEFAULT_VALUE="__default",DropDownList=({className:e,component:a,element:r})=>{const{host:o,name:n}=a.props;var t=`${makeUniqueId(n)}-input`;const m=sortItems(r);var l=a.enabled,s=o.renderText(r.tooltip);return React.createElement(FormElement,{className:e,component:a,element:r,inputId:t},React.createElement(NativeSelect,{disabled:!l,inputProps:{id:t},inputRef:e=>renderFocus(e,n,o),onChange:e=>{var t=e.currentTarget.value,e=m[t].value;r.current=t,r.value=e,a.forceUpdate(),o.post("changed",{name:n,item:t,value:e})},title:s,value:r.current||DEFAULT_VALUE},void 0===r.current&&React.createElement("option",{key:"none",value:DEFAULT_VALUE,disabled:!0},o.renderText(r.prompt)),Object.keys(m).map(e=>{var t=m[e],a=o.renderText(t.label),r=t.styleName?makeSafeClassName(t.styleName):void 0;return React.createElement("option",{className:r,key:e,value:e,title:o.renderText(t.tooltip),disabled:!1===t.enabled},a)})))};export default DropDownList;

package/forms/components/FilePicker.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+export declare const filePickerClasses: {
+    file: string;
+    label: string;
+    list: string;
+};
+declare const FilePicker: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default FilePicker;

package/forms/components/FilePicker.js

@@ -0,0 +1 @@
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import IconButton from"@vertigis/react-ui/IconButton";import Stack from"@vertigis/react-ui/Stack";import Plus from"@vertigis/react-ui/icons/Plus";import Trash from"@vertigis/react-ui/icons/Trash";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{isFilesRef}from"../utils.js";import Markdown from"./Markdown.js";const PREFIX="FilePicker",filePickerClasses={file:`${PREFIX}-file`,label:`${PREFIX}-label`,list:`${PREFIX}-list`},Root=styled(FormElement)(({theme:{palette:e,spacing:t}})=>({[`.${filePickerClasses.list}`]:{marginBottom:t(1),marginTop:t(1),[`.${filePickerClasses.file}`]:{alignItems:"center",display:"flex",gap:t(1),[`.${filePickerClasses.label}`]:{border:`1px solid ${e.grey[200]}`,flexGrow:1,fontStyle:"italic",lineHeight:1,overflow:"hidden",padding:t(1),textOverflow:"ellipsis",whiteSpace:"nowrap"}}}})),FilePicker=({className:e,component:i,element:r})=>{const{host:a,name:t}=i.props;var l=r.size;let s=r.value,o=5,n;"number"==typeof l&&(o=1<l?Math.ceil(l):1),s&&(isFilesRef(s)&&Array.isArray(s.files)||(r.value=s=void 0));var c=a.renderText(r.tooltip);let m=i.enabled;const f=[];if(void 0!==s){m=i.enabled&&s.files.length<o;var p=a.renderText("@file-picker-remove-item-label");for(const d of s.files){var u=f.length;f.push(React.createElement(Box,{key:"$"+u,className:filePickerClasses.file},React.createElement("label",{className:filePickerClasses.label,title:d.name},d.name),React.createElement(IconButton,{"aria-label":p,disabled:!i.enabled,onClick:(e=>()=>{s?.files&&1<s.files.length?s.files.splice(e,1):r.value=void 0,i.forceUpdate(),a.post("changed",{name:t,value:r.value})})(u),ref:e=>renderFocus(e,t,a),title:p},React.createElement(Trash,null))))}}f.push(React.createElement(Box,{key:"footer"},React.createElement(Button,{color:"primary",disabled:!m,onClick:()=>{n&&(n.value="",n.click())},ref:e=>{renderFocus(e,t,a)},startIcon:React.createElement(Plus,null),title:c,variant:"outlined"},React.createElement(Markdown,{host:a,inline:!0,text:r.prompt||""}))));l=1!==o;return React.createElement(Root,{className:e,component:i,element:r},React.createElement(Stack,{className:filePickerClasses.list},f),React.createElement("input",{type:"file",style:{display:"none"},title:c,onChange:e=>(e=>{var t=e.files;if(t?.length){const l=s?.files||[];for(let e=0;e<t.length&&l.length!==o;e++)l.push(t[e]);e={refValueType:"files",files:l};r.value=e,i.forceUpdate(),a.post("changed",{name:i.props.name,value:e})}})(e.target),multiple:l,accept:r.fileTypes,ref:e=>{n=e}}))};export default FilePicker;export{filePickerClasses};

package/forms/components/Form.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { FormComponent } from "../FormComponent";
+interface FormProps {
+    /** The CSS class name of the root element. */
+    className?: string;
+    /**
+     * The `FormComponent` being used to render the Form Elements within this Component.
+     */
+    component: FormComponent;
+}
+export declare const formClasses: {
+    body: string;
+    footer: string;
+    formElementContent: string;
+    formElementTitle: string;
+    formElementWithTitleBeside: string;
+    header: string;
+    main: string;
+    root: string;
+    row: string;
+};
+declare const Form: ({ className, component }: FormProps) => JSX.Element;
+export default Form;

package/forms/components/Form.js

@@ -0,0 +1 @@
+import AdapterDateFns from"@vertigis/react-ui/AdapterDateFns";import Box from"@vertigis/react-ui/Box";import{LicenseInfo}from"@vertigis/react-ui/LicenseInfo";import LocalizationProvider from"@vertigis/react-ui/LocalizationProvider";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useEffect,useState}from"react";import{FormComponent,FormElementComponent}from"../FormComponent.js";import{loadLocale}from"../dateUtilities.js";import{getKeyString}from"../keyboard.js";import{sort}from"../utils.js";const PREFIX="Form",formClasses={body:`${PREFIX}-body`,footer:`${PREFIX}-footer`,formElementContent:`${PREFIX}-element-content`,formElementTitle:`${PREFIX}-element-title`,formElementWithTitleBeside:`${PREFIX}-element-with-title-beside`,header:`${PREFIX}-header`,main:`${PREFIX}-main`,root:`${PREFIX}-root`,row:`${PREFIX}-row`},Root=styled(Box)(e=>({"h1, h2, h3":{margin:0},[`.${formClasses.formElementWithTitleBeside}`]:{alignItems:"start",display:"grid",gridTemplateColumns:"1fr 2fr",[`> .${formClasses.formElementTitle}`]:{gridColumnStart:1,margin:0,overflowWrap:"anywhere"},[`> .${formClasses.formElementContent}`]:{display:"inline-flex",flexDirection:"column",gridColumnStart:2,overflow:"auto"}},[`.${formClasses.row}`]:{display:"flex",gap:"0.5em","> *":{flexGrow:1},"> .CheckBox, > .CheckGroup, > .Image, > .Number, > .RadioGroup":{flexGrow:0},[`.${formClasses.formElementWithTitleBeside}`]:{gridTemplateColumns:"1fr 1fr"}}}));LicenseInfo.setLicenseKey("dc21e4b722db0484344d94e6f3db523fT1JERVI6NjQ4MTMsRVhQSVJZPTE3MTM2Nzk1MDEyNzQsS0VZVkVSU0lPTj0x");const Form=({className:e,component:t})=>{const[o,r]=useState();useEffect(()=>{let t=!0;return loadLocale(i).then(e=>{t?r(e):console.warn("Component was unmounted while loading the locale.")}),()=>{t=!1}},[]);const i=t.props.host,n={host:i,type:"header",children:[]},a={host:i,type:"body",children:[]},l={host:i,type:"main",children:[]},m={host:i,type:"footer",children:[]},s={host:i,type:"body",children:[]},c={},d=[];function f(e){return"Section"!==e}function p(e){e=u[e];return null==e||!f(e.type)&&(!0!==e.hoisted&&!1!==e.visible)}function h(e){return e===n||e===a||e===m?`${e.type}-section`:e.name}const u=sort(t.props.host.form.elements);for(const b in u){var y,E=u[b];if(!0!==(g=E).hoisted&&(!1!==g.visible&&f(g.type)))if(!0!==E.overlay){let e=function(e){if(void 0===e)return a;if("header"===e)return n;if("footer"===e)return m;let t;t="object"==typeof e?e.name:e;let o=(e=>{for(const t of d)if(t.name===e)return t})(t);return void 0===o&&(o={host:i,name:t,type:"section",children:[]},d.push(o)),o}(E.section);void 0!==E.rowNumber&&(y=h(e),e=function(e,t){let o=c[t];o=o||(c[t]=[]);let r=o[e];return void 0===r&&(r=o[e]={host:i,type:"row",children:[]}),r}(E.rowNumber,y)),e.children.push(React.createElement(FormElementComponent,{key:b,host:i,type:"element",name:b}))}else s.children.push(React.createElement(FormElementComponent,{key:b,host:i,type:"element",name:b}))}var g;const C=[];if(0<n.children.length&&C.push(React.createElement(FormComponent,{key:"header",...n})),0<s.children.length)C.push(React.createElement(FormComponent,{key:"main",...s}));else{R(a);let e=void 0,t=0;for(const k of d){var F=k.name;i.isAccordionSection(u[F])?p(F)&&(e?e.push(k):e=[k]):(e&&(x(e,++t),e=void 0),p(F)&&R(k))}e&&(x(e,++t),e=void 0),0<l.children.length&&C.push(React.createElement(FormComponent,{key:"main",...l}))}function v(e){if(!function(e){var t=h(e),o=c[t];if(o)for(const i of Object.keys(o).sort((e,t)=>parseInt(e)-parseInt(t))){var r,n=o[i];1<n.children.length?(r=`row-${i}`,e.children.push(React.createElement(FormComponent,{key:r,...n}))):1===n.children.length&&e.children.push(...n.children)}}(e),0<e.children.length){var t=e===a?"body":`$${e.name}`;return React.createElement(FormComponent,{key:t,...e})}}function R(e){e=v(e);e&&l.children.push(e)}function x(e,t){const o=[];for(const n of e){var r=v(n);r&&o.push(r)}e={children:o,host:i,name:`accordionGroup${t}`,type:"accordionGroup"};l.children.push(React.createElement(FormComponent,{key:`accordionGroup${t}`,...e}))}return 0<m.children.length&&C.push(React.createElement(FormComponent,{key:"footer",...m})),React.createElement(Root,{className:clsx(e,formClasses.root),onKeyDown:function(e){"enter"===getKeyString(e)&&(e.target instanceof HTMLButtonElement||i.post("clicked"))},ref:function(e){i.renderFocus(e)}},React.createElement(LocalizationProvider,{dateAdapter:AdapterDateFns,adapterLocale:o,localeText:{start:i.renderText("@date-range-picker-start-text"),end:i.renderText("@date-range-picker-end-text"),cancelButtonLabel:i.renderText("@common-cancel"),clearButtonLabel:i.renderText("@common-clear"),okButtonLabel:i.renderText("@common-ok"),todayButtonLabel:i.renderText("@common-today")}},C))};export default Form;export{formClasses};

package/forms/components/GeometryPicker.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+declare const GeometryPicker: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default GeometryPicker;

package/forms/components/GeometryPicker.js

@@ -0,0 +1 @@
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import IconButton from"@vertigis/react-ui/IconButton";import List from"@vertigis/react-ui/List";import ListItemButton from"@vertigis/react-ui/ListItemButton";import Plus from"@vertigis/react-ui/icons/Plus";import Trash from"@vertigis/react-ui/icons/Trash";import*as React from"react";import{useState}from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{sanitizeGeometryRef,text}from"../utils.js";import GeometryPickerListItem from"./GeometryPickerListItem.js";import Markdown from"./Markdown.js";const GeometryPicker=({className:e,component:t,element:r})=>{const{host:i,name:n}=t.props;var o=r.size;let a=5;"number"==typeof o&&(a=1<o?Math.ceil(o):1),"number"==typeof o&&(a=1<o?Math.ceil(o):1);let l=[],c=[],s="",m=r.value=sanitizeGeometryRef(r.value);void 0!==m&&(l=m.geometry,B=r.itemLabel,Array.isArray(B)?c=B:(c=[],text.isMarkdown(B)?B.markdown&&(s=B):text.isStatus(B)?B.status&&(s=B.status):B&&(s=B)));let u=r.state;void 0!==u&&null!==u||(u=r.state=[]);const[d,p]=useState([]);const f=e=>{let t=u[e];return void 0!==t&&null!==t||(u.length<=e&&(u.length=e,u.push({})),t=u[e]),t},v=t=>()=>{1<l.length?(l.splice(t,1),u.splice(t,1),t<c.length&&c.splice(t,1)):(r.value=void 0,r.state=void 0);let e=[];for(const m of d)m<t?e.push(m):m>t&&e.push(m-1);p(e),i.post("changed",{name:n,value:m})};var h=e=>{t.enabled&&v(e)()},g=(e,t,r)=>{const o=f(e);o.focused=t,o.pending=r,i.renderState(n,"geometry",u)};let k=t.enabled;const y=[];if(void 0!==m){k=t.enabled&&m.geometry.length<a;var b=i.renderText("@geometry-picker-remove-item-label");for(const I of m.geometry){var x=y.length;f(x).content=I;var E=`checkbox-list-label-${x}`;y.push(React.createElement(GeometryPickerListItem,{deleteItem:h,disablePadding:!0,itemIndex:x,key:"$"+x,secondaryAction:React.createElement(IconButton,{"aria-label":b,className:"delete",disabled:!t.enabled,edge:"end",onClick:v(x),ref:e=>renderFocus(e,n,i),title:b},React.createElement(Trash,null)),updateHighlight:g},React.createElement(ListItemButton,{onClick:(o=>()=>{var e=d.indexOf(o);const t=[...d],r=f(o);-1===e?(r.checked=!0,t.push(o)):(r.checked=!1,t.splice(e,1)),p(t)})(x),ref:(t=>e=>{null!==e&&(e.disabled||i.renderFocus(e,n),e.checked=!!f(t).checked)})(x),selected:-1!==d.indexOf(x)},React.createElement(Markdown,{host:i,id:E,inline:!0,text:c[x]||s}))))}}const R=()=>{i.post("clicked",{name:n,value:m})};var B=i.renderText(r.tooltip);return t.enabled&&r.autoActivate&&(k&&setTimeout(()=>R()),delete r.autoActivate),React.createElement(FormElement,{className:e,component:t,element:r,ref:e=>{i.renderState(n,"geometry",null===e?void 0:u)}},React.createElement(List,null,y),React.createElement(Box,null,React.createElement(Button,{color:"primary",disabled:!k,onClick:R,ref:e=>renderFocus(e,n,i),startIcon:React.createElement(Plus,null),title:B,variant:"outlined"},React.createElement(Markdown,{host:i,inline:!0,text:r.prompt||""}))))};export default GeometryPicker;

package/forms/components/GeometryPickerListItem.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { ListItemProps } from "@vertigis/react-ui/ListItem";
+interface GeometryPickerListItemProps extends ListItemProps {
+    /**
+     * Numeric index referring to this item's position in the list.
+     */
+    itemIndex: number;
+    /**
+     * Callback for when the user presses "Delete" while this item is focused.
+     */
+    deleteItem: (itemIndex: number) => void;
+    /**
+     * Callback for updating the highlight style of the associated graphic on the map.
+     */
+    updateHighlight: (itemIndex: number, focused: boolean, hovered: boolean) => void;
+}
+declare const _default: (props: GeometryPickerListItemProps) => JSX.Element;
+/**
+ * A GeometryPickerListItem is shown in the Geometry Picker form element.
+ * Its purpose is to aid with detecting changes in focus and hover state to
+ * aid with updating the styling of the corresponding graphics on the map.
+ */
+export default _default;

package/forms/components/GeometryPickerListItem.js

@@ -0,0 +1 @@
+import ListItem from"@vertigis/react-ui/ListItem";import*as React from"react";import{useEffect,useState}from"react";import{getKeyString}from"../keyboard.js";export default e=>{const[t,r]=useState(!1),[a,o]=useState(!1),{children:s,className:u,itemIndex:i,deleteItem:m,updateHighlight:c,...n}=e;return useEffect(()=>{c(i,t,a)},[t,a]),React.createElement(ListItem,{className:u,onBlurCapture:()=>r(!1),onFocusCapture:()=>r(!0),onKeyDownCapture:e=>{"delete"===getKeyString(e)&&m(i)},onMouseOut:()=>o(!1),onMouseOver:()=>o(!0),...n},s)};

package/forms/components/HorizontalRule.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+/**
+ * The component for the "Horizontal Rule" Form Element.
+ */
+declare const HorizontalRule: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default HorizontalRule;

package/forms/components/HorizontalRule.js

@@ -0,0 +1 @@
+import Divider from"@vertigis/react-ui/Divider";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{FormElementTypes}from"../constants.js";import{makeSafeClassName}from"../utils.js";const Root=styled(Divider)(({theme:{spacing:e}})=>({marginBottom:e(3),marginTop:e(3)})),HorizontalRule=({className:e,component:t,element:m})=>React.createElement(Root,{className:clsx(e,FormElementTypes.HORIZONTALRULE,{[makeSafeClassName(t.props.name)]:!!t.props.name,[makeSafeClassName(m.styleName)]:!!m.styleName})});export default HorizontalRule;

package/forms/components/Image.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+/**
+ * The component for the "Image" Form Element.
+ */
+declare const Image: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default Image;

package/forms/components/Image.js

@@ -0,0 +1 @@
+import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import FormElement from"../FormElement.js";const Root=styled(FormElement)(()=>({overflow:"hidden",img:{alignSelf:"start"}})),Image=({className:e,component:t,element:o})=>{const r=t.props["host"];let m,l;var n=o.size;"number"==typeof n&&(l=n,m=n),"object"==typeof n&&("number"==typeof n.width&&(m=n.width),"number"==typeof n.height&&(l=n.height));let a;n=o.value;"string"==typeof n&&(a=n);n=r.renderText(o.tooltip);return React.createElement(Root,{className:e,component:t,element:o},React.createElement("img",{src:a,alt:n,title:n,width:m,height:l}))};export default Image;

package/forms/components/ItemPicker.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+export declare const itemPickerClasses: {
+    button: string;
+    clearIcon: string;
+    horizontal: string;
+    item: string;
+    items: string;
+};
+export interface ItemPickerProps extends BaseFormElementProps {
+    /**
+     * Defines the space between immediate children.
+     */
+    spacing?: number;
+}
+declare const ItemPicker: ({ className, component, element, spacing }: ItemPickerProps) => JSX.Element;
+export default ItemPicker;

package/forms/components/ItemPicker.js

@@ -0,0 +1 @@
+import Button from"@vertigis/react-ui/Button";import ButtonGroup from"@vertigis/react-ui/ButtonGroup";import Checkbox from"@vertigis/react-ui/Checkbox";import IconButton from"@vertigis/react-ui/IconButton";import Input from"@vertigis/react-ui/Input";import InputAdornment from"@vertigis/react-ui/InputAdornment";import List from"@vertigis/react-ui/List";import ListItem from"@vertigis/react-ui/ListItem";import ListItemButton from"@vertigis/react-ui/ListItemButton";import ListItemIcon from"@vertigis/react-ui/ListItemIcon";import ListItemText from"@vertigis/react-ui/ListItemText";import Radio from"@vertigis/react-ui/Radio";import Stack from"@vertigis/react-ui/Stack";import Close from"@vertigis/react-ui/icons/Close";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{Orientation}from"../constants.js";import{getKeyString}from"../keyboard.js";import{isDataRef,isGeometryRef,makeSafeClassName}from"../utils.js";import Markdown from"./Markdown.js";const PREFIX="ItemPicker",itemPickerClasses={button:`${PREFIX}-list-item-button`,clearIcon:`${PREFIX}-clear-button`,horizontal:`${PREFIX}-horizontal`,item:`${PREFIX}-list-item`,items:`${PREFIX}-list-items`},Root=styled(FormElement)(({theme:{typography:e}})=>({[`.${itemPickerClasses.clearIcon}`]:{height:e.pxToRem(20),width:e.pxToRem(20)},[`.${itemPickerClasses.items}`]:{[`&.${itemPickerClasses.horizontal}`]:{display:"flex",flexWrap:"wrap",[`.${itemPickerClasses.item}`]:{width:"auto"}},[`.${itemPickerClasses.item}`]:{[`.${itemPickerClasses.button}`]:{paddingBottom:0,paddingTop:0,".MuiListItemText-primary":{fontWeight:e.fontWeightRegular}}}}})),ItemPicker=({className:e,component:r,element:n,spacing:t})=>{const a=r.props["host"],i=r.props.name;void 0===t&&(t=1);const s=n.items||{};let c,m,l,d=n.state;function u(){const e=[];for(const o in s){var t=s[o];t.checked&&e.push(t)}c=0===e.length?n.value=void 0:n.value={refValueType:"items",items:e}}function p(e,t=!0){let o=d.keyToIndex[e];if(null==o||null===o){if(!t)return;d.keyToIndex[e]=d.length,d.push({}),o=d.keyToIndex[e]}return d[o]}function f(e,t){s[e].checked=t;const o=p(e);o&&(o.checked=t)}function o(t){return function(e){null!==e&&(e.disabled||a.renderFocus(e,i),e=!0===s[t].checked,p(t).checked=e)}}u(),function(){void 0!==d&&null!==d||(d=n.state=[]),d.keyToIndex||(d.keyToIndex={});const e={};for(const o in n.items){var t=p(o,!1);t&&(e[o]=t)}d=n.state=[],d.keyToIndex={};for(const i in e)d.keyToIndex[i]=d.length,d.push(e[i])}();const g=[];let k;switch(n.selectionMode){case"single":k="radio";break;case"multiple":k="checkbox"}for(const P in s){var I,v,h,R,x=s[P];p(P).content=function(e){if(e){if(isGeometryRef(e))return e.geometry;if(isDataRef(e)&&e.data)return e.data.geometry}}(x.value),!1!==x.visible&&(v=(I=r.enabled&&!1!==x.enabled)&&!!k,h=a.renderText(x.tooltip),R=clsx(itemPickerClasses.item,x.styleName?makeSafeClassName(x.styleName):void 0),x=React.createElement(Markdown,{host:a,text:x.label}),g.push(React.createElement(ListItem,{className:R,disabled:!I,disablePadding:!0,key:P},React.createElement(ListItemButton,{className:itemPickerClasses.button,onClick:v?(o=>()=>{var e=s[o].checked;if("single"===n.selectionMode){if(!e)for(const t in s)f(t,t===o)}else f(o,!e);u(),r.forceUpdate(),a.post("changed",{name:i,value:c}),a.renderState(i,"geometry",d)})(P):void 0,tabIndex:I?void 0:-1,title:h,"data-id":P,onBlur:I?e=>{delete p(e.currentTarget.dataset.id).focused,a.renderState(i,"geometry",d)}:void 0,onFocus:I?e=>{p(e.currentTarget.dataset.id).focused=!0,a.renderState(i,"geometry",d)}:void 0,onMouseOver:I?e=>{p(e.currentTarget.dataset.id).pending=!0,a.renderState(i,"geometry",d)}:void 0,onMouseOut:I?e=>{delete p(e.currentTarget.dataset.id).pending,a.renderState(i,"geometry",d)}:void 0},"checkbox"===k&&React.createElement(ListItemIcon,null,React.createElement(Checkbox,{edge:"start",checked:!0===s[P]?.checked,disableRipple:!0,inputRef:o(P),tabIndex:-1,value:P})),"radio"===k&&React.createElement(ListItemIcon,null,React.createElement(Radio,{edge:"start",checked:!0===s[P]?.checked,disableRipple:!0,inputRef:o(P),name:r.id,tabIndex:-1,value:P})),React.createElement(ListItemText,null,x)))))}var b=a.renderText(n.prompt);function y(){var e=m.value.toLowerCase();for(const t in s){const o=s[t];if(e){const i=a.renderText(o.label).toLowerCase();o.visible=-1!==i.indexOf(e)}else o.visible=!0}l.hidden=!e,r.forceUpdate()}function C(){m.value="",y()}var E="multiple"===n.selectionMode&&0<g.length,T=clsx(itemPickerClasses.items,{[itemPickerClasses.horizontal]:n.orientation===Orientation.HORIZONTAL});return React.createElement(Root,{className:e,component:r,element:n,ref:function(e){null===e?a.renderState(i,"geometry"):a.renderState(i,"geometry",d)}},React.createElement(Stack,{spacing:t},n.showFilter&&React.createElement(Input,{disabled:!r.enabled,endAdornment:React.createElement(InputAdornment,{position:"end"},React.createElement(IconButton,{disabled:!r.enabled,onClick:C,ref:e=>l=e,title:a.renderText("@common-clear")},React.createElement(Close,{className:itemPickerClasses.clearIcon}))),error:!1,fullWidth:!0,inputRef:e=>{m=e,renderFocus(e,i,a)},onChange:y,onKeyDown:e=>{"escape"===getKeyString(e)&&C()},placeholder:b,type:"text"}),E&&React.createElement(ButtonGroup,{color:"primary",variant:"outlined"},React.createElement(Button,{disabled:!r.enabled,onClick:function(){for(const e in s)f(e,!0);u(),r.forceUpdate(),a.post("changed",{name:i,value:c})}},a.renderText("@common-all")),React.createElement(Button,{disabled:!r.enabled,onClick:function(){for(const e in s)f(e,!1);u(),r.forceUpdate(),a.post("changed",{name:i,value:c})}},a.renderText("@common-none"))),React.createElement(List,{className:T,dense:!0},g)))};export default ItemPicker;export{itemPickerClasses};

package/forms/components/ListBox.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+export declare const listBoxClasses: {
+    select: string;
+};
+declare const ListBox: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default ListBox;

package/forms/components/ListBox.js

@@ -0,0 +1 @@
+import Select from"@vertigis/react-ui/Select";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import FormElement from"../FormElement.js";import{renderFocus}from"../common.js";import{makeSafeClassName,makeUniqueId,sortItems}from"../utils.js";const PREFIX="ListBox",listBoxClasses={select:`${PREFIX}-select`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.MuiNativeSelect-select.MuiNativeSelect-standard.MuiNativeSelect-multiple.MuiInputBase-input.MuiInput-input.${listBoxClasses.select}`]:{paddingRight:e(1)}})),ListBox=({className:e,component:l,element:a})=>{const{host:o,name:i}=l.props;var t=`${makeUniqueId(i)}-input`;const r=sortItems(a);!function(){const e=[];for(const s in r){var t=r[s];t.checked&&e.push(t)}0===e.length?a.value=void 0:a.value={refValueType:"items",items:e}}();const s=[],n=[];for(const v in r){const f=r[v];var c=o.renderText(f.label);const u=o.renderText(f.tooltip);f.checked=!0===f.checked;var m=clsx(f.styleName?makeSafeClassName(f.styleName):void 0);f.checked&&n.push(v);var d=!1===f.enabled?void 0:!!f.checked;s.push(React.createElement("option",{"aria-selected":d,className:m,key:v,title:u,value:v,disabled:!1===f.enabled},c))}s.length<1&&(l.enabled=!1);const u=o.renderText(a.tooltip)||void 0;let p;return"number"==typeof a.size&&(p=a.size),React.createElement(Root,{className:e,component:l,element:a,inputId:t},React.createElement(Select,{disabled:!l.enabled,inputProps:{"aria-multiselectable":!0,"aria-orientation":"vertical","aria-required":a.require,className:listBoxClasses.select,id:t,role:"listbox",size:p,title:u},inputRef:e=>renderFocus(e,i,o),multiple:!0,native:!0,onChange:e=>{const t=e.target["options"];for(let e=0;e<t.length;e++){var s=t.item(e),a=s.value;r[a].checked=s.selected}l.forceUpdate(),o.post("changed",{name:i})},value:n},s))};export default ListBox;export{listBoxClasses};

package/forms/components/Markdown.d.ts

@@ -9,7 +9,7 @@ export interface MarkdownProps extends Omit<BaseMarkdownProps, "markdown" | "san
     /** The host that translatest text. */
     host: FormPresenterHost;
     /** The text to be rendered. */
-    text: defs.Text;
+    text: defs.Text | undefined;
 }
 declare const Markdown: ({ host, text, escapeHtml, linkTarget, ...otherProps }: MarkdownProps) => JSX.Element;
 export default Markdown;

package/forms/components/Markdown.js

@@ -1 +1 @@
-import BaseMarkdown from"@vertigis/react-ui/Markdown";import*as React from"react";import{isMarkdown}from"../textUtilities.js";const Markdown=({host:t,text:e,escapeHtml:a=!0,linkTarget:r="_blank",...n})=>{var o,i=t.translateText(e);return("string"==typeof(o=i)?o:isMarkdown(o)&&o.markdown)?isMarkdown(i)?React.createElement(BaseMarkdown,{markdown:i.markdown,escapeHtml:a,linkTarget:r,...n}):React.createElement(React.Fragment,null,i):null};export default Markdown;
+import BaseMarkdown from"@vertigis/react-ui/Markdown";import*as React from"react";import{hasContent,isMarkdown}from"../textUtilities.js";const Markdown=({host:t,text:e,escapeHtml:a=!0,linkTarget:r="_blank",...n})=>{e=t.translateText(e);return hasContent(e)?isMarkdown(e)?React.createElement(BaseMarkdown,{markdown:e.markdown,escapeHtml:a,linkTarget:r,...n}):React.createElement(React.Fragment,null,e):null};export default Markdown;

package/forms/components/Number.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+/**
+ * The component for the "Number" Form Elements.
+ */
+declare const NumberComponent: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default NumberComponent;

package/forms/components/Number.js

@@ -0,0 +1 @@
+import Input from"@vertigis/react-ui/Input";import*as React from"react";import{useEffect,useMemo,useRef,useState}from"react";import{DEFAULT_LOCALE}from"../../constants.js";import FormElement from"../FormElement.js";import{numberFormatConfiguration}from"../elements/Number.js";import{getKeyString}from"../keyboard.js";import{areValuesEqual,enforceConstraints,getNumberConstraints,sanitizePrecision}from"../numberUtilities.js";import{isNumber,isNumberRef,isNumeric,isString,makeUniqueId}from"../utils.js";const NumberComponent=({className:e,component:r,element:o})=>{const{host:t,name:n}=r.props;var u=!r.enabled;const[i,a]=useState(!1),[m,s]=useState(""),l=useRef(!0),c=useRef(!1);var p=`${makeUniqueId(n)}-input`;const{decimals:f,inputNumberFormat:d,numberConstraints:b}=useMemo(()=>{var e=o.format,r=getNumberConstraints(e,numberFormatConfiguration),t=sanitizePrecision(e?.precision,r.step,numberFormatConfiguration),n=0<=t?t:void 0,e=0<=t?t:void 0;return{decimals:t,inputNumberFormat:new Intl.NumberFormat(DEFAULT_LOCALE,{minimumFractionDigits:n,maximumFractionDigits:e,useGrouping:!1}),numberConstraints:r}},[o.format]),{maximum:v,minimum:g,step:N}=b,F={fractionalDigits:f,locale:t.deriveLocale()},C=e=>{if("number"==typeof e)return{refValueType:"number",format:{lowerBound:g,precision:f,step:N,upperBound:v},display:t.formatNumber(e,F),numeric:e}},E=e=>null===e?"":d.format(e),y=()=>{var e=isNumeric(m)?parseFloat(m):null,e=null===(e=e)?null:enforceConstraints(e,b),e=C(e);areValuesEqual(o,e)||(o.value=e,t.post("changed",{name:n,value:e}));e=E(e?e.numeric:null);e!==m&&s(e)};useEffect(()=>{l.current?l.current=!1:i||y()},[i,m]),useEffect(()=>{var e=D(o.value),r=null===e?void 0:C(e);areValuesEqual(o,r)||(o.value=r);e=null===e?"":E(e);e!==m&&s(e)},[o.value]);const D=e=>{let r=void 0;if(isNumber(e))r=e;else if(isString(e)){if(!e)return null;r=t.coerceNumber(e)}else"number"==typeof e?.numeric&&(r=e.numeric);return"number"==typeof r&&0*r!=0&&(r=void 0),void 0===r?null:enforceConstraints(r,b)};var R=t.renderText(o.prompt),q=t.renderText(o.tooltip),u=u&&!c.current;return React.createElement(FormElement,{className:e,component:r,element:o,inputId:p},React.createElement(Input,{disabled:u,error:!!o.error,inputProps:{id:p,max:v,min:g,onKeyDown:e=>{var r,t=getKeyString(e);return"enter"===t?(r=e,y(),r.currentTarget.select(),r.stopPropagation(),r.preventDefault(),!1):"escape"===t?(t=e,(e=null===(e=isNumberRef(o.value)?o.value.numeric:null)?"":E(e))!==m&&s(e),t.currentTarget.select(),t.stopPropagation(),t.preventDefault(),!1):void 0},step:N,title:q},inputRef:e=>{null===e||e.disabled||t.renderFocus(e,n)},onBlur:()=>{a(!1)},onChange:e=>{s(e.target.value)},onFocus:()=>{a(!0)},onMouseDown:()=>{c.current=!0},onMouseUp:()=>{c.current=!1},placeholder:R,required:o.require,size:"small",title:q,type:"number",value:m}))};export default NumberComponent;

package/forms/components/NumberRangeSlider.d.ts

@@ -1,9 +1,12 @@
-import * as React from "react";
-import { FormComponent } from "../FormComponent";
-import { Element } from "../FormDefinition";
-interface NumberRangeSliderProps {
-    component: FormComponent;
-    element: Element;
-}
-declare const NumberRangeSlider: React.FC<NumberRangeSliderProps>;
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+export declare const numberRangeSliderClasses: {
+    container: string;
+    inputContainer: string;
+    toLabel: string;
+};
+/**
+ * The component for the "Number Range Slider" Form Element.
+ */
+declare const NumberRangeSlider: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
 export default NumberRangeSlider;

package/forms/components/NumberRangeSlider.js

@@ -1 +1 @@
-import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{Range,getTrackBackground}from"react-range";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{DEFAULT_DECIMALS,DEFAULT_STEP,MIN_DECIMALS}from"../elements/NumberRangeSlider.js";import{getProcessedNumberFormat,getNumberSliderValues}from"../numberSliderUtilities.js";import{throttle}from"../utils.js";const NumberRangeSlider=e=>{const a=e.component,t=e.element,r=useMemo(()=>getProcessedNumberFormat(t.format,MIN_DECIMALS,DEFAULT_DECIMALS,DEFAULT_STEP),[]),o=useRef(null),n=e=>{t.value=o.current=e},[l,c]=useState(),[s,u]=useState();useEffect(()=>{var e;null!==o.current&&t.value===o.current||(e=getNumberSliderValues(t.value,r),n(e),M(e))},[t.value]);const{host:m,name:i}=a.props,p=!a.enabled;var d=useFocusCallback(a);const{lowerBound:g,upperBound:f,precision:v}=r,{showMinMaxLabels:x,manualEntry:b}=t;let y=r.step,E=t.showTickMarks;E=0<y&&E,0===y&&(y=1/Math.pow(10,v));const h={currency:r.currency,customDisplayFormat:r.customDisplayFormat,format:r.displayFormat,fractionalDigits:v,locale:m.deriveLocale()};e=m.renderText(t.tooltip);const N=e=>{e=A(e),M(e),(Array.isArray(o.current)||e[0]===g&&e[1]===f)&&(!Array.isArray(o.current)||e[0]===o.current[0]&&e[1]===o.current[1])||(n(e),m.post("changed",{name:i,value:t.value}))};const R=e=>{a.autoInput=!0},k=e=>e.target.select(),A=e=>{let t=e[0]<g?g:e[0]>f?f:e[0],r=e[1]>f?f:e[1]<g?g:e[1];return[t,r].sort((e,t)=>e-t)},S=useMemo(()=>throttle(e=>{m.post("dragged",{name:i,value:e})}),[]),F=(e,t)=>{const r=l.slice();let a=""!==e?Number(e):NaN;isNaN(a)?M(r):(0===t?(a<g&&(a=g),a>r[1]&&(a=r[1])):(a>f&&(a=f),a<r[0]&&(a=r[0])),r[t]=a,N(r))},M=e=>{c(e),u(e)};const T=(e,t,r,a,o="#fff",n="#197dc8")=>React.createElement("div",{style:{position:"absolute",top:t,color:o,fontWeight:"bold",fontSize:"14px",fontFamily:"Arial,Helvetica Neue,Helvetica,sans-serif",padding:"4px",borderRadius:"5px",backgroundColor:n,left:r,right:a,whiteSpace:"nowrap"}},e);return l?React.createElement(FormElement,{component:a,element:t,legacyMode:!0},React.createElement("div",{className:"slider-container",title:e},React.createElement(Range,{draggableTrack:!0,step:y,min:g,max:f,values:l,onChange:e=>{e=A(e),M(e),Array.isArray(t.value)&&e[0]===t.value[0]&&e[1]===t.value[1]||S(e)},onFinalChange:N,renderMark:e=>{var{props:t,index:r}=e,e=g+r*y,r=e>f,e=e>l[0]&&e<l[1]?"#197dc8":"#ccc";return E&&!r&&React.createElement("div",{...t,style:{...t.style,height:"16px",width:"2px",backgroundColor:e}})},renderTrack:e=>{var{props:t,children:e}=e;return React.createElement("div",{...t,style:{...t.style,height:"6px",margin:"50px 0px 24px",width:"100%",background:getTrackBackground({values:l,colors:["#ccc","#197dc8","#ccc"],min:g,max:f,rtl:!1})}},!1!==x&&T(m.formatNumber(g,h),"20px","-12px",void 0,"#333","#fff"),!1!==x&&T(m.formatNumber(f,h),"20px",void 0,"-12px","#333","#fff"),e)},renderThumb:e=>{var{props:t,value:r,index:a}=e,o=f-g,e=r-g,r=e<o/10?"0":"auto",e=9*o/10<e?"0":"auto";return React.createElement("div",{...t,style:{...t.style,height:"24px",width:"24px",borderRadius:"12px",backgroundColor:"#197dc8",display:"flex",justifyContent:"center",alignItems:"center",boxShadow:"0px 2px 4px #AAA",outline:"none"}},T(m.formatNumber(l[a],h),"-32px",r,e))},disabled:p,ref:d})),b||!s?null:React.createElement("div",{className:"inputs"},s.map((e,t)=>React.createElement("span",{key:t},0===t?m.renderText("@common-start"):m.renderText("@common-end"),React.createElement("input",{key:t,type:"number",disabled:p,min:0===t?g:l[0],max:0===t?l[1]:f,step:y,title:e+"",value:e,onBlur:e=>((e,t)=>{F(e.target.value,t)})(e,t),onChange:e=>((e,t)=>{const r=s.slice();r[t]=e.target.value,u(r),a.autoInput&&F(e.target.value,t)})(e,t),onKeyDown:e=>((e,t)=>{e.stopPropagation(),a.autoInput=!1,"Enter"===e.key?F(s[t]+"",t):"Escape"===e.key&&M(l.slice())})(e,t),onMouseDown:R,onFocus:k}))))):null};export default NumberRangeSlider;
+import Box from"@vertigis/react-ui/Box";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import Slider from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{DEFAULT_LOCALE}from"../../constants.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{numberFormatConfiguration}from"../elements/NumberRangeSlider.js";import{DEFAULT_CURRENCY}from"../numberFormatter.js";import{getMarks,getNumberConstraints,getNumberSliderValues,sanitizePrecision}from"../numberUtilities.js";import{isNumeric,makeUniqueId,throttle}from"../utils.js";const PREFIX="NumberRangeSlider",numberRangeSliderClasses={container:`${PREFIX}-container`,inputContainer:`${PREFIX}-input-container`,toLabel:`${PREFIX}-to-label`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberRangeSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",".MuiSlider-markLabel":{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${numberRangeSliderClasses.inputContainer}`]:{marginTop:e(1)," .MuiFormControl-root":{flexGrow:1},[`.${numberRangeSliderClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}}}})),NumberRangeSlider=({className:e,component:t,element:i})=>{const{host:r,name:a}=t.props;var n=!t.enabled;const{currency:o,customDisplayFormat:m,decimals:s,displayFormat:l,inputNumberFormat:u,numberConstraints:c}=useMemo(()=>{var e=i.format,t=getNumberConstraints(e,numberFormatConfiguration),r=sanitizePrecision(e?.precision,t.step,numberFormatConfiguration),a=0<=r?r:void 0,n=0<=r?r:void 0,n=new Intl.NumberFormat(DEFAULT_LOCALE,{minimumFractionDigits:a,maximumFractionDigits:n,useGrouping:!1});return{currency:e?.currency||DEFAULT_CURRENCY,customDisplayFormat:e?.customDisplayFormat,decimals:r,displayFormat:e?.displayFormat,inputNumberFormat:n,numberConstraints:t}},[i.format]);var d=c["step"],p=c.maximum,g=c.minimum;const[b,f]=useState(!1),[F,v]=useState(!1),[R,C]=useState(["",""]),[S,x]=useState([g,p]),E=useRef(!0),y=useRef(!1),L=`${makeUniqueId(a)}-input`;var N=!1!==i.showMinMaxLabels,T=!!i.showTickMarks,h=!1!==i.manualEntry;const D={currency:o,customDisplayFormat:m,format:l,fractionalDigits:s,locale:r.deriveLocale()},k=e=>null===e?"":u.format(e);useEffect(()=>{if(E.current)E.current=!1;else if(F)M(S);else if(!b){let t=[...S];for(let e=0;e<R.length;e++)isNumeric(R[e])&&(t[e]=parseFloat(R[e]));t=getNumberSliderValues(t,c),S[0]===t[0]&&S[1]===t[1]||x(t),A(i.value,t)||(i.value=t,r.post("changed",{name:a,value:i.value}));var e=[k(t[0]),k(t[1])];e[0]===R[0]&&e[1]===R[1]||C(e)}},[b,F,R]),useEffect(()=>{var e=getNumberSliderValues(i.value,c);A(i.value,e)||(i.value=e),A(S,e)||x(e);e=[k(e[0]),k(e[1])];R[0]===e[0]&&R[1]===e[1]||C(e)},[i.value]);const A=(e,t)=>void 0===e&&void 0===t[0]&&void 0===t[1]||(void 0===e&&null===t[0]&&null===t[1]||!(!Array.isArray(e)||2!==e.length||e[0]!==t[0]||e[1]!==t[1])),M=useMemo(()=>throttle(e=>{r.post("dragged",{name:a,value:e})}),[]),U=useFocusCallback(t);var $=r.renderText(i.tooltip),P=n&&!F,I=n&&!y.current,n=h?{max:p,min:g,onBlur:()=>{f(!1)},onFocus:()=>{f(!0)},onMouseDown:()=>{y.current=!0},onMouseUp:()=>{y.current=!1},step:d,title:$}:void 0;return React.createElement(Root,{className:e,component:t,element:i,inputId:`${L}-0`},React.createElement(Box,{className:numberRangeSliderClasses.container},React.createElement(Slider,{disabled:P,getAriaLabel:()=>r.renderText(i.title),getAriaValueText:e=>r.formatNumber(e,D),marks:getMarks(p,g,d,D,N,T),max:p,min:g,onChange:(e,t)=>{v(!0),Array.isArray(t)&&(x(t),C([k(t[0]),k(t[1])]))},onChangeCommitted:()=>{v(!1)},slotProps:{input:()=>({ref:e=>(null===e||e.id||(e.id=`${L}-${e.attributes["data-index"].value}`),U(e))})},step:d,title:$,value:S,valueLabelDisplay:"on",valueLabelFormat:(e,t)=>r.formatNumber(e,D)}),!1!=h&&React.createElement(Stack,{direction:"row",className:numberRangeSliderClasses.inputContainer},React.createElement(FormLabelTextField,{disabled:I,inputProps:n,label:r.renderText("@common-start"),onChange:e=>{C([e.target.value,R[1]])},size:"small",type:"number",value:R[0]}),React.createElement(Box,{className:numberRangeSliderClasses.toLabel}," ",r.renderText("@common-to")," "),React.createElement(FormLabelTextField,{disabled:I,inputProps:n,label:r.renderText("@common-end"),onChange:e=>{C([R[0],e.target.value])},size:"small",type:"number",value:R[1]}))))};export default NumberRangeSlider;export{numberRangeSliderClasses};

package/forms/components/NumberSlider.d.ts

@@ -1,9 +1,10 @@
-import * as React from "react";
-import { FormComponent } from "../FormComponent";
-import { Element } from "../FormDefinition";
-interface NumberRangeSliderProps {
-    component: FormComponent;
-    element: Element;
-}
-declare const NumberSlider: React.FC<NumberRangeSliderProps>;
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+export declare const numberSliderClasses: {
+    container: string;
+};
+/**
+ * The component for the "Number Slider" Form Element.
+ */
+declare const NumberSlider: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
 export default NumberSlider;

package/forms/components/NumberSlider.js

@@ -1 +1 @@
-import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{Range}from"react-range";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{DEFAULT_DECIMALS,DEFAULT_STEP,MIN_DECIMALS}from"../elements/NumberSlider.js";import{getProcessedNumberFormat,getNumberSliderValues}from"../numberSliderUtilities.js";const NumberSlider=e=>{const t=e.component,{host:n,name:r}=t.props,a=e.element,o=!t.enabled,l=useMemo(()=>getProcessedNumberFormat(a.format,MIN_DECIMALS,DEFAULT_DECIMALS,DEFAULT_STEP),[]),u=useRef(null),{lowerBound:s,upperBound:m,precision:c}=l,{showMinMaxLabels:i,manualEntry:p}=a,d={format:l.displayFormat,fractionalDigits:c,locale:n.deriveLocale()},f=e=>{var t;a.value=(t=e,{refValueType:"number",format:l,display:n.formatNumber(t,d),numeric:t}),u.current=e},[b,g]=useState(s),[v,x]=useState("");useEffect(()=>{var e=a.value;null!==u.current&&e?.numeric===u.current||(e=getNumberSliderValues(e,l,!0),f(e[0]),A(e[0]))},[a.value]);var E=useFocusCallback(t);let h=l.step,N=a.showTickMarks;N=0<h&&N,0===h&&(h=1/Math.pow(10,c));e=n.renderText(a.tooltip);const y=e=>{e=k(e),A(e),e!==u.current&&(f(e),n.post("changed",{name:r,value:a.value}))},S=e=>{x(e.target.value),t.autoInput&&w(e.target.value)},R=e=>{w(e.target.value)},F=e=>{e.stopPropagation(),t.autoInput=!1,"Enter"===e.key?w(v+""):"Escape"===e.key&&A(b)},M=e=>{t.autoInput=!0},C=e=>e.target.select(),k=e=>e<s?s:e>m?m:e,w=e=>{let t=""!==e?Number(e):NaN;isNaN(t)?A(t):(t<s&&(t=s),t>m&&(t=m),y(t))},A=e=>{g(e),x(e)};const D=(e,t,r,a,o="#fff",n="#197dc8")=>React.createElement("div",{style:{position:"absolute",top:t,color:o,fontWeight:"bold",fontSize:"14px",fontFamily:"Arial,Helvetica Neue,Helvetica,sans-serif",padding:"4px",borderRadius:"5px",backgroundColor:n,left:r,right:a,whiteSpace:"nowrap"}},e);return React.createElement(FormElement,{component:t,element:a,legacyMode:!0},React.createElement("div",{className:"slider-container",title:e},React.createElement(Range,{step:h,min:s,max:m,values:[b],onChange:e=>(e=>{e=k(e),A(e)})(e[0]),onFinalChange:e=>y(e[0]),renderMark:e=>{var{props:t,index:e}=e,e=s+e*h>m;return N&&!e&&React.createElement("div",{...t,style:{...t.style,height:"16px",width:"2px",backgroundColor:"#ccc"}})},renderTrack:e=>{var{props:t,children:e}=e;return React.createElement("div",{...t,style:{...t.style,height:"6px",margin:"50px 0px 24px",width:"100%",background:"#ccc"}},!1!==i&&D(n.formatNumber(s,d),"20px","-12px",void 0,"#333","#fff"),!1!==i&&D(n.formatNumber(m,d),"20px",void 0,"-12px","#333","#fff"),e)},renderThumb:e=>{var{props:t,value:r}=e,a=m-s,o=r-s,e=o<a/10?"0":"auto",o=9*a/10<o?"0":"auto";return React.createElement("div",{...t,style:{...t.style,height:"24px",width:"24px",borderRadius:"12px",backgroundColor:"#197dc8",display:"flex",justifyContent:"center",alignItems:"center",boxShadow:"0px 2px 4px #AAA",outline:"none"}},D(n.formatNumber(r,d),"-32px",e,o))},disabled:o,ref:E})),!1===p?null:React.createElement("div",{className:"inputs"},React.createElement("span",null,React.createElement("input",{type:"number",disabled:o,min:s,max:m,step:h,title:v+"",value:v,onBlur:R,onChange:S,onKeyDown:F,onMouseDown:M,onFocus:C}))))};export default NumberSlider;
+import Box from"@vertigis/react-ui/Box";import Input from"@vertigis/react-ui/Input";import Slider from"@vertigis/react-ui/Slider";import{styled}from"@vertigis/react-ui/styles";import{useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{DEFAULT_LOCALE}from"../../constants.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{DEFAULT_CURRENCY}from"../numberFormatter.js";import{getNumberSliderValues,areValuesEqual,getMarks,getNumberConstraints,sanitizePrecision}from"../numberUtilities.js";import{isNumeric,makeUniqueId,throttle}from"../utils.js";const PREFIX="NumberSlider",numberSliderClasses={container:`${PREFIX}-container`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",".MuiSlider-markLabel":{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},".MuiInputBase-root":{marginTop:e(1)}}})),NumberSlider=({className:e,component:r,element:i})=>{const{host:t,name:a}=r.props;var o=!r.enabled;const{currency:s,customDisplayFormat:m,decimals:n,displayFormat:u,inputNumberFormat:l,numberConstraints:c}=useMemo(()=>{var e=i.format,r=getNumberConstraints(e),t=sanitizePrecision(e?.precision,r.step),a=0<=t?t:void 0,o=0<=t?t:void 0,o=new Intl.NumberFormat(DEFAULT_LOCALE,{minimumFractionDigits:a,maximumFractionDigits:o,useGrouping:!1});return{currency:e?.currency||DEFAULT_CURRENCY,customDisplayFormat:e?.customDisplayFormat,decimals:t,displayFormat:e?.displayFormat,inputNumberFormat:o,numberConstraints:r}},[i.format]),p=c["step"],d=c.maximum,f=c.minimum,[b,g]=useState(!1),[F,y]=useState(!1),[v,E]=useState(""),[N,C]=useState(f),S=useRef(!0),R=useRef(!1);var x=`${makeUniqueId(a)}-input`,D=!1!==i.showMinMaxLabels,L=!!i.showTickMarks,h=!1!==i.manualEntry;const M={currency:s,customDisplayFormat:m,format:u,fractionalDigits:n,locale:t.deriveLocale()},T=e=>({refValueType:"number",format:{currency:s,customDisplayFormat:m,displayFormat:u,lowerBound:f,precision:n,step:p,upperBound:d},display:t.formatNumber(e,M),numeric:e}),k=e=>null===e?"":l.format(e);useEffect(()=>{var e;S.current?S.current=!1:F?A(N):b||((e=isNumeric(v)?getNumberSliderValues(parseFloat(v),c,!0)[0]:f)!==N&&C(e),e=T(e),areValuesEqual(i,e)||(i.value=e,t.post("changed",{name:a,value:i.value})))},[b,F,v]),useEffect(()=>{var e=getNumberSliderValues(i.value,c,!0)[0],r=T(e);areValuesEqual(i,r)||(i.value=r),N!==e&&C(e);e=k(e);v!==e&&E(e)},[i.value]);const A=useMemo(()=>throttle(e=>{t.post("dragged",{name:a,value:T(e)})}),[]);var I=useFocusCallback(r),U=t.renderText(i.tooltip),V=o&&!F,o=o&&!R.current;return React.createElement(Root,{className:e,component:r,element:i,inputId:x},React.createElement(Box,{className:numberSliderClasses.container},React.createElement(Slider,{disabled:V,getAriaLabel:()=>t.renderText(i.title),getAriaValueText:e=>t.formatNumber(e,M),marks:getMarks(d,f,p,M,D,L),max:d,min:f,onChange:(e,r)=>{y(!0);r=Array.isArray(r)?r[0]:r;C(r),E(k(r))},onChangeCommitted:()=>{y(!1)},slotProps:{input:{id:x,ref:I}},step:p,title:U,value:"number"==typeof N?N:0,valueLabelDisplay:"on",valueLabelFormat:(e,r)=>t.formatNumber(e,M)}),!1!=h&&React.createElement(Input,{disabled:o,error:!!i.error,inputProps:{max:d,min:f,step:p,title:U},onChange:e=>{E(e.target.value)},onFocus:()=>{g(!0)},onBlur:()=>{g(!1)},onMouseDown:()=>{R.current=!0},onMouseUp:()=>{R.current=!1},size:"small",type:"number",value:v})))};export default NumberSlider;export{numberSliderClasses};

package/forms/components/RadioGroup.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+/**
+ * The component for the "Radio Group" Form Element.
+ */
+declare const RadioGroup: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default RadioGroup;

package/forms/components/RadioGroup.js

@@ -0,0 +1 @@
+import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import Radio from"@vertigis/react-ui/Radio";import BaseRadioGroup from"@vertigis/react-ui/RadioGroup";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{Orientation}from"../constants.js";import{makeSafeClassName,sortItems as sortAndFilterItems}from"../utils.js";import Markdown from"./Markdown.js";const Root=styled(FormElement)(({theme:{spacing:e}})=>({marginBottom:e(1.5)})),RadioGroup=({className:e,component:t,element:o})=>{const[r,a]=useState(""),{host:m,name:n}=t.props;var s=sortAndFilterItems(o);useEffect(()=>{a(o.current||"")},[o.current]);var i=e=>{null===e||e.disabled||m.renderFocus(e,n)};const l=[];for(const p in s){const f=s[p];var c=t.enabled&&!1!==f.enabled,u=m.renderText(f.tooltip),d=f.styleName?makeSafeClassName(f.styleName):void 0;l.push(React.createElement(FormControlLabel,{className:d,control:React.createElement(Radio,{inputRef:i,onClick:e=>{o.current!==p&&(o.current=p,o.value=f.value,m.post("changed",{name:n,item:p,value:f.value}),a(p))}}),disabled:!c,key:p,label:React.createElement(Markdown,{host:m,text:f.label}),title:u,value:p}))}return React.createElement(Root,{className:e,component:t,element:o},React.createElement(BaseRadioGroup,{name:t.id,row:o.orientation===Orientation.HORIZONTAL,value:r},l))};export default RadioGroup;

package/forms/components/Scanner.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+export declare const scannerClasses: {
+    container: string;
+    button: string;
+    inputContainer: string;
+};
+declare const Scanner: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default Scanner;

package/forms/components/Scanner.js

@@ -0,0 +1 @@
+import Button from"@vertigis/react-ui/Button";import Input from"@vertigis/react-ui/Input";import Stack from"@vertigis/react-ui/Stack";import{Close as CloseIcon,ScanBarcode,ScanMulti,ScanQr}from"@vertigis/react-ui/icons";import{styled}from"@vertigis/react-ui/styles";import{useState,useEffect,useRef}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{ScanType}from"../constants.js";import{scannerConfiguration}from"../elements/Scanner.js";import{getKeyString}from"../keyboard.js";import{isScanRef,makeUniqueId}from"../utils.js";const PREFIX="Scanner",scannerClasses={container:`${PREFIX}-container`,button:`${PREFIX}-button`,inputContainer:`${PREFIX}-inner`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${scannerClasses.container}`]:{gap:e(.5),video:{width:"100%"},[`.${scannerClasses.inputContainer}`]:{alignItems:"flex-start",gap:e(.5),[`.${scannerClasses.button}`]:{minWidth:0,padding:e(.5)}}}})),CAMERA_READY_TIMEOUT_MS=1500;var EntryMethod;!function(e){e.Camera="camera",e.Manual="manual"}(EntryMethod=EntryMethod||{});const convertToScanRef=(e,t,a)=>{var r=typeof e,r="number"==r||"string"==r?e.toString():e?.value?.toString();if(r)return t=t||e?.entryMethod||EntryMethod.Manual,{refValueType:"scan",value:r,scanType:a=a||e?.scanType,entryMethod:t}},Scanner=({className:e,component:t,element:o})=>{const[a,r]=useState(!0),[n,c]=useState(null),[s,i]=useState(""),[l,u]=useState(!1),[m,d]=useState(scannerConfiguration.rows.default),p=useRef(null),{host:f,name:E}=t.props;var S=`${makeUniqueId(E)}-input`;const v="barcode"!==o.scanType;useEffect(()=>{let e=scannerConfiguration.rows.default;"number"==typeof o.size&&(e=Math.max(scannerConfiguration.rows.minimum,o.size)),d(e)},[o.size]),useEffect(()=>(u(!0),()=>u(!1)),[]),useEffect(()=>{l&&o.enabled&&o.autoActivate&&(o.autoActivate=!1,B())},[l]),useEffect(()=>{const e=()=>{r(!1),setTimeout(()=>{l&&r(!0)},CAMERA_READY_TIMEOUT_MS)};return n&&e(),()=>{n&&(n.reset(),e())}},[n]);var y=useFocusCallback(t);useEffect(()=>{let e=o.value;!isScanRef(e)&&e&&(o.value=e=convertToScanRef(e));var t=e?.value||"";s!==t&&i(t)},[o.value]);var C=f.renderText(o.tooltip),g=!t.enabled,R=g||!o.manualEntry;const T=(e,t,a)=>{e&&o.value?.value!==e&&(a=convertToScanRef(e,t,a),o.value=a,i(e),f.post("changed",{name:E,value:a}))},F=async e=>{var t=await import("@zxing/library");let a=void 0;return e===ScanType.QrCode?a=[t.BarcodeFormat.AZTEC,t.BarcodeFormat.DATA_MATRIX,t.BarcodeFormat.MAXICODE,t.BarcodeFormat.PDF_417,t.BarcodeFormat.QR_CODE]:e===ScanType.BarCode&&(a=[t.BarcodeFormat.CODABAR,t.BarcodeFormat.CODE_39,t.BarcodeFormat.CODE_93,t.BarcodeFormat.CODE_128,t.BarcodeFormat.EAN_8,t.BarcodeFormat.EAN_13,t.BarcodeFormat.ITF,t.BarcodeFormat.RSS_14,t.BarcodeFormat.RSS_EXPANDED,t.BarcodeFormat.UPC_A,t.BarcodeFormat.UPC_E,t.BarcodeFormat.UPC_EAN_EXTENSION]),a},B=async()=>{if(n)return c(null),void f.post("cancel",{name:E,type:"cancel"});if(l){var e=await(async e=>{var t=await import("@zxing/library"),e=await F(e);const a=new Map;return a.set(t.DecodeHintType.POSSIBLE_FORMATS,e),a})(o.scanType);const t=await import("@zxing/library");e=new t.BrowserMultiFormatReader(e);c(e),await(async e=>{try{var t=await e.listVideoInputDevices();if(!t||0==t.length)throw new DOMException("No video input devices detected.");const r=await e.decodeOnceFromVideoDevice(void 0,p.current||void 0),n=await F(ScanType.QrCode);var a=n.indexOf(r.getBarcodeFormat())<0?ScanType.BarCode:ScanType.QrCode;T(r.toString(),EntryMethod.Camera,a),c(null)}catch(e){e instanceof DOMException&&(o.error=e.message,c(null))}})(e)}};return React.createElement(Root,{className:e,component:t,element:o,inputId:S},React.createElement(Stack,{className:scannerClasses.container},React.createElement("video",{hidden:!n,ref:p}),React.createElement(Stack,{className:scannerClasses.inputContainer,direction:"row"},React.createElement(Input,{disabled:R,fullWidth:!0,id:S,inputProps:{title:C},inputRef:y,multiline:v,onBlur:e=>{0<e.currentTarget.value.length&&(c(null),T(e.currentTarget.value,EntryMethod.Manual))},onChange:e=>{i(e.currentTarget.value)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation(),v||(e=e.currentTarget,c(null),T(e.value,EntryMethod.Manual))},required:o.require,rows:v?m:void 0,spellCheck:!1,value:s}),React.createElement(Button,{className:scannerClasses.button,color:"primary",disabled:g||!a,onClick:B,ref:y,title:C},n?React.createElement(CloseIcon,null):o.scanType===ScanType.BarCode?React.createElement(ScanBarcode,null):o.scanType===ScanType.QrCode?React.createElement(ScanQr,null):React.createElement(ScanMulti,null)))))};export default Scanner;export{scannerClasses};

package/forms/components/Section.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+export declare const sectionClasses: {
+    root: string;
+    basicSection: string;
+    fieldSetSection: string;
+    title: string;
+    description: string;
+};
+/**
+ * The component for the "Section" Form Element.
+ */
+declare const Section: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default Section;

package/forms/components/Section.js

@@ -0,0 +1 @@
+import Accordion from"@vertigis/react-ui/Accordion";import AccordionSummary from"@vertigis/react-ui/AccordionSummary";import Box from"@vertigis/react-ui/Box";import Typography from"@vertigis/react-ui/Typography/index.js";import ChevronDown from"@vertigis/react-ui/icons/ChevronDown";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{defs}from"../FormHost.js";import{renderAccessibleDescription,renderDescription,renderError}from"../common.js";import{hasContent}from"../textUtilities.js";import{makeSafeClassName,makeUniqueId}from"../utils.js";import Markdown from"./Markdown.js";const PREFIX="WorkflowSection",sectionClasses={root:`${PREFIX}-root`,basicSection:`${PREFIX}-basicSection`,fieldSetSection:`${PREFIX}-fieldSetSection`,title:`${PREFIX}-title`,description:`${PREFIX}-description`},AccordionRoot=styled(Accordion)(({theme:{spacing:e}})=>({".MuiAccordion-region":{padding:e(1),[`.${sectionClasses.description} p`]:{marginBottom:0,marginTop:0,padding:e(.5)}}})),BoxRoot=styled(Box)(({theme:{palette:e,spacing:o,typography:{pxToRem:t}}})=>({marginBottom:o(4),marginTop:o(4),[`.${sectionClasses.description} p`]:{marginBottom:0,marginTop:0,padding:o(.5)},[`&.${sectionClasses.basicSection}`]:{borderLeft:`6px solid ${e.primary[500]}`,paddingLeft:o(1),paddingRight:o(1)},[`&.${sectionClasses.fieldSetSection}`]:{position:"relative",border:`3px solid ${e.primary[500]}`,borderLeft:"none",borderRight:"none",paddingTop:o(3),paddingBottom:o(2),[`.${sectionClasses.title}`]:{backgroundColor:e.background.default,position:"absolute",top:t(-22),left:0,padding:0,"& span":{paddingRight:o(1)}}}})),Section=({className:e,component:t,element:i})=>{const{host:r,name:s}=t.props;let o;null!=i&&i.format&&(o=i.format),o=void 0!==o&&null!==o?o:defs.DEFAULT_SECTION_FORMAT;const n=r.isAccordionSection(i);var a,c,l=n||r.isCollapsibleSection(i),d=`${makeUniqueId(s)}-input`,p=(a=i,c=d,hasContent(a.title)?React.createElement(Typography,{className:sectionClasses.title,id:`${c}-label`,variant:"h6"},React.createElement(Markdown,{host:r,inline:!0,text:a.title})):null),m=renderDescription(r,i,d,sectionClasses.description),f=renderAccessibleDescription(r,i,d),g=renderError(r,i),d={"aria-labelledby":p?.props?.id,"aria-details":m?.props?.id,"aria-describedby":f?.props?.id},g=[m,f,g,t.props.children],e=clsx(e,i.type,sectionClasses.root,{[sectionClasses.basicSection]:"basic-section"===o,[sectionClasses.fieldSetSection]:"fieldset-section"===o,[makeSafeClassName(s)]:!!s,[makeSafeClassName(i.styleName)]:!!i.styleName});return l?React.createElement(AccordionRoot,{className:e,expanded:!0!==i.collapsed,onChange:(e,o)=>{n&&o?r.updateAccordionSections(s):(i.collapsed=!o,t.forceUpdate())},...d},React.createElement(AccordionSummary,{expandIcon:React.createElement(ChevronDown,null),ref:e=>{null!==e&&i.collapsed&&r.renderFocus(e,s)}},p),...g):React.createElement(BoxRoot,{className:e,component:"section",...d},p,React.createElement(Box,null,...g))};export default Section;export{sectionClasses};

package/forms/components/Text.d.ts

@@ -4,5 +4,5 @@ import { BaseFormElementProps } from "../FormElement";
  * The component for the "Text" Form Element.
  * It just exposes the Title and Description which are common to all.
  */
-declare const Text: ({ component, element }: BaseFormElementProps) => JSX.Element;
+declare const Text: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
 export default Text;

package/forms/components/Text.js

@@ -1 +1 @@
-import*as React from"react";import FormElement from"../FormElement.js";const Text=({component:e,element:t})=>React.createElement(FormElement,{component:e,element:t});export default Text;
+import*as React from"react";import FormElement from"../FormElement.js";const Text=({className:e,component:t,element:m})=>React.createElement(FormElement,{className:e,component:t,element:m});export default Text;

package/forms/components/TextArea.d.ts

@@ -3,5 +3,5 @@ import { BaseFormElementProps } from "../FormElement";
 /**
  * The component for the "Text Area" Form Element.
  */
-declare const TextArea: ({ component, element }: BaseFormElementProps) => JSX.Element;
+declare const TextArea: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
 export default TextArea;

package/forms/components/TextArea.js

@@ -1 +1 @@
-import Input from"@vertigis/react-ui/Input";import{useEffect,useState}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{makeUniqueId}from"../utils.js";const TextArea=({component:e,element:r})=>{const[t,a]=useState(8),[n,o]=useState(""),[l,u]=useState("soft"),{host:p,name:i}=e.props;var m=`${makeUniqueId(i)}-input`,s=r.maxLength,d=p.renderText(r.prompt),f=r.readOnly,c=p.renderText(r.tooltip);useEffect(()=>{let e="";var t=r.value;"string"==typeof t&&(e=t),r.value=e,o(e),"number"==typeof r.size&&a(r.size),"string"==typeof r.wrap&&-1!==["hard","soft","off"].indexOf(r.wrap)&&u(r.wrap)},[]);return React.createElement(FormElement,{component:e,element:r,inputId:m},React.createElement(Input,{color:"primary",disabled:!e.enabled,fullWidth:!0,id:m,inputProps:{maxLength:s,onKeyDown:e=>{e.stopPropagation()},title:c,wrap:l},inputRef:e=>{null===e||e.disabled||p.renderFocus(e,i)},multiline:!0,onBlur:e=>{e=e.target.value;e!=r.value&&(r.value=e,p.post("changed",{name:i,value:e}))},onChange:e=>{e=e.target.value;e!=n&&o(e)},placeholder:d,readOnly:f,required:r.require,rows:t,value:n}))};export default TextArea;
+import Input from"@vertigis/react-ui/Input";import{useEffect,useState}from"react";import*as React from"react";import FormElement from"../FormElement.js";import{makeUniqueId}from"../utils.js";const TextArea=({className:e,component:t,element:r})=>{const[a,n]=useState(8),[o,u]=useState(""),[l,s]=useState("soft"),{host:m,name:p}=t.props;var i=`${makeUniqueId(p)}-input`,f=r.maxLength,c=m.renderText(r.prompt),d=r.readOnly,v=m.renderText(r.tooltip);useEffect(()=>{"number"==typeof r.size&&n(r.size)},[r.size]),useEffect(()=>{let e="";var t=r.value;"string"==typeof t&&(e=t),r.value=e,u(e)},[r.value]),useEffect(()=>{"string"==typeof r.wrap&&-1!==["hard","soft","off"].indexOf(r.wrap)&&s(r.wrap)},[r.wrap]);return React.createElement(FormElement,{className:e,component:t,element:r,inputId:i},React.createElement(Input,{disabled:!t.enabled,fullWidth:!0,id:i,inputProps:{maxLength:f,onKeyDown:e=>{e.stopPropagation()},title:v,wrap:l},inputRef:e=>{null===e||e.disabled||m.renderFocus(e,p)},multiline:!0,onBlur:e=>{e=e.target.value;e!=r.value&&(r.value=e,m.post("changed",{name:p,value:e}))},onChange:e=>{e=e.target.value;e!=o&&u(e)},placeholder:c,readOnly:d,required:r.require,rows:a,value:o}))};export default TextArea;

package/forms/components/TextBox.d.ts

@@ -17,5 +17,5 @@ interface TextBoxProps extends BaseFormElementProps {
 /**
  * The component for the "Text Box" and "Password Box" Form Elements.
  */
-declare const TextBox: ({ component, element, type }: TextBoxProps) => JSX.Element;
+declare const TextBox: ({ className, component, element, type }: TextBoxProps) => JSX.Element;
 export default TextBox;

package/forms/components/TextBox.js

@@ -1 +1 @@
-import Input from"@vertigis/react-ui/Input";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{getKeyString}from"../keyboard.js";import{makeUniqueId}from"../utils.js";const TextBox=({component:e,element:a,type:t})=>{const[r,n]=useState(""),{host:o,name:u}=e.props;var l=`${makeUniqueId(u)}-input`,p="password"===t,i=p?void 0:a.maxLength,m=o.renderText(a.prompt),s=p?void 0:a.readOnly,p=o.renderText(a.tooltip);useEffect(()=>{let e="";var t=a.value;"string"==typeof t?e=t:"number"==typeof t&&(e=o.formatNumber(t,{useGrouping:!0})),a.value=e,n(e)},[]);const c=e=>{a.value=e,o.post("changed",{name:u,value:e})};return React.createElement(FormElement,{component:e,element:a,inputId:l},React.createElement(Input,{color:"primary",disabled:!e.enabled,fullWidth:!0,id:l,inputProps:{maxLength:i,onKeyDown:e=>{var t=getKeyString(e);return"enter"===t?(e=>{const t=e.currentTarget;var r=t.value;if(r!==a.value)return c(r),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):"escape"===t?(e=>{const t=e.currentTarget;if(t.value!==a.value)return n(a.value),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):void 0},title:p},inputRef:e=>{null===e||e.disabled||o.renderFocus(e,u)},onBlur:e=>{e=e.target.value;e!=a.value&&c(e)},onChange:e=>{e=e.target.value;e!=r&&n(e)},placeholder:m,readOnly:s,required:a.require,type:t,value:r}))};export default TextBox;
+import Input from"@vertigis/react-ui/Input";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{getKeyString}from"../keyboard.js";import{makeUniqueId}from"../utils.js";const TextBox=({className:e,component:r,element:a,type:t})=>{const[n,o]=useState(""),{host:u,name:l}=r.props;var p=`${makeUniqueId(l)}-input`,m="password"===t,i=m?void 0:a.maxLength,s=u.renderText(a.prompt),c=m?void 0:a.readOnly,m=u.renderText(a.tooltip);useEffect(()=>{let e="";var t=a.value;"string"==typeof t?e=t:"number"==typeof t&&(e=u.formatNumber(t)),a.value!==e&&(a.value=e,r.forceUpdate()),o(e)},[a.value]);const d=e=>{a.value=e,u.post("changed",{name:l,value:e})};return React.createElement(FormElement,{className:e,component:r,element:a,inputId:p},React.createElement(Input,{disabled:!r.enabled,fullWidth:!0,id:p,inputProps:{maxLength:i,onKeyDown:e=>{var t=getKeyString(e);return"enter"===t?(e=>{const t=e.currentTarget;var r=t.value;if(r!==a.value)return d(r),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):"escape"===t?(e=>{const t=e.currentTarget;if(t.value!==a.value)return o(a.value),t.select(),e.stopPropagation(),e.preventDefault(),!1})(e):void 0},title:m},inputRef:e=>{null===e||e.disabled||u.renderFocus(e,l)},onBlur:e=>{e=e.target.value;e!=a.value&&d(e)},onChange:e=>{e=e.target.value;e!=n&&o(e)},placeholder:s,readOnly:c,required:a.require,type:t,value:n}))};export default TextBox;

package/forms/components/TimePicker.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseFormElementProps } from "../FormElement";
+/**
+ * The component for the "Time Picker" Form Element.
+ */
+declare const TimePicker: ({ className, component, element }: BaseFormElementProps) => JSX.Element;
+export default TimePicker;

package/forms/components/TimePicker.js

@@ -0,0 +1 @@
+import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import BaseTimePicker from"@vertigis/react-ui/TimePicker";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useEffect,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import FormElement from"../FormElement.js";import{useFocusCallback}from"../common.js";import{hasErrorChanged,isInvalidDate,makeProperFormat,makeProperValue,updateElementValue}from"../dateUtilities.js";import{makeUniqueId}from"../utils.js";const StylableTimePicker=e=>{const{PopperProps:r={},className:t,...a}=e;return React.createElement(BaseTimePicker,{PopperProps:{...r,className:clsx(r.className,t)},...a})},StyledTimePicker=styled(StylableTimePicker)(({theme:{palette:e}})=>({"& .MuiClock-amButton, .MuiClock-pmButton":{"&.Mui-focusVisible":{color:e.action.active}}})),TimePicker=({className:e,component:r,element:t})=>{const[a,o]=useState(!1),[l,m]=useState(!1),[i,s]=useState(null),n=useRef(),c=useRef(!0),{host:u,name:p}=r.props;var d=useFocusCallback(r);const f=u.renderText(t.tooltip),k=makeProperFormat(t.value,t.format),P=Calendar.useNative(),v="time";useEffect(()=>{var e=makeProperValue(t.value,P);updateElementValue(t,e,v,k,P),s(e||null)},[t.value]),useEffect(()=>{c.current?c.current=!1:l||a||(isInvalidDate(i)?F({status:"invalid"}):(F(),updateElementValue(t,i,v,k,P)&&u.post("changed",{name:p,value:t.value})))},[l,a]);const F=e=>{hasErrorChanged(t,e)&&(t.error=e,r.forceUpdate())},T=`${makeUniqueId(p)}-input`,E=u.renderText(t.prompt);return React.createElement(FormElement,{className:e,component:r,element:t,inputId:T},t.error&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},n.current),React.createElement(StyledTimePicker,{disabled:!r.enabled,key:"date-picker",inputRef:d,onChange:e=>{s(e)},onOpen:()=>{m(!0)},onClose:()=>{m(!1)},renderInput:e=>(n.current=e.inputProps?.placeholder,e.error=!!t.error,e.inputProps={...e.inputProps,id:T,onBlur:()=>{o(!1)},onFocus:()=>{o(!0)},placeholder:E||e.inputProps?.placeholder,title:f},React.createElement(FormLabelTextField,{...e})),value:i}))};export default TimePicker;