@vertigis/workflow 5.41.0 → 5.43.0

package/forms/FormDefinition.d.ts

@@ -27,7 +27,7 @@ export type FormatRef = DateTimeFormat | NumberFormat | GeometryFormat | Section
  * References geometry format.
  * @product This is intended for internal use only within VertiGIS Studio products.
  */
-export type GeometryFormat = "polygon" | "polyline" | "point" | "polygon-freehand" | "polyline-freehand" | "extent" | "line";
+export type GeometryFormat = "multipoint" | "polygon" | "polyline" | "point" | "polygon-freehand" | "polyline-freehand" | "extent" | "line";
 /** Types of matching that can be performed when finding an Item within a Form Element. */
 export type ItemMatchType = "index" | "item" | "key" | "label" | "value";
 /**

package/forms/FormHost.d.ts

@@ -6,11 +6,11 @@ import type { FormatOptions } from "./numberFormatter";
 import type { ExternalEvent } from "../execution/ExternalEvent";
 import type { ComponentType, ReactNode } from "react";
 export { defs };
-export interface FormEventSubscription {
+interface FormEventSubscription {
     (): boolean;
     active: boolean;
 }
-export interface FormEventHandler {
+interface FormEventHandler {
     (event: defs.Event): void;
 }
 /** Exposes functionality for driving a form. */

package/forms/components/AccordionGroup.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";const StyledBox=styled(Box)(({theme:{spacing:e}})=>({marginBottom:e(4),marginTop:e(4)})),AccordionGroup=({className:e,component:o})=>{var o=o.props["children"];return React.createElement(StyledBox,{className:e},o)};export default AccordionGroup;
+import Box from"@vertigis/react-ui/Box";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";const StyledBox=styled(Box)(({theme:{spacing:e}})=>({marginBottom:e(2),marginTop:e(2)})),AccordionGroup=({className:e,component:o})=>{var o=o.props["children"];return React.createElement(StyledBox,{className:e},o)};export default AccordionGroup;

package/forms/components/AutoComplete.js

@@ -1 +1 @@
-import BaseAutoComplete,{autocompleteClasses,HighlightOption}from"@vertigis/react-ui/Autocomplete";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import Popper from"@vertigis/react-ui/Popper";import Skeleton from"@vertigis/react-ui/Skeleton";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{ExclusiveTimer}from"../ExclusiveTimer.js";import{autoCompletePropertyConstraints}from"../elements/AutoComplete.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{getItemId,inspectItems,makeSafeClassName,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StyledAutoComplete=styled(BaseAutoComplete)(()=>({[`.${autocompleteClasses.endAdornment}`]:{right:1}})),popperClasses={skeletonOption:"skeleton-option"},StyledPopper=styled(Popper)(()=>({[`.${autocompleteClasses.listbox}`]:{[`.${autocompleteClasses.option}`]:{display:"block",[`&.${popperClasses.skeletonOption}`]:{'&[data-option-index="0"]':{span:{width:"70%"}},'&[data-option-index="1"]':{span:{width:"85%"}},'&[data-option-index="2"]':{span:{width:"55%"}}}}}})),StyledSkeleton=styled(Skeleton)(()=>({fontSize:"1.25rem",lineHeight:"inherit"})),pendingOption={enabled:!1,label:""},pendingOptions=[pendingOption,pendingOption,pendingOption],AutoComplete=({className:e,component:t,current:u,delay:o,element:r,enabled:n,error:l,items:p,label:m,minLength:s,name:a,prompt:i,tooltip:c,raiseEvent:d,setProperty:f,setValue:g,value:C})=>{const v=useContext(HostContext),[y,x]=useState(),[b,h]=useState(""),[S,k]=useState([]),[E,O]=useState(null),P=useRef(!1),T=useRef(!1),I=`${makeUniqueId(a)}-input`,N=useRef(v.renderText({status:"trivial"})),R=v.renderText(i),F=v.renderText(c),A=useFocusCallback(n,a,v),L=useRef({}),j=useRef({}),w=useMemo(()=>{let e=o;return"number"==typeof e&&!isNaN(e)||(e=autoCompletePropertyConstraints.delay.default),Math.max(e,autoCompletePropertyConstraints.delay.minimum)},[o]),H=useMemo(()=>{let e=s;return"number"==typeof e&&!isNaN(e)||(e=autoCompletePropertyConstraints.minLength.default),Math.max(e,autoCompletePropertyConstraints.minLength.minimum)},[s]),M=t.timer||(t.timer=new ExclusiveTimer),$=()=>{d("suggest",C,b,void 0,M.cancellationToken),k(pendingOptions)},B=()=>{f("items",{}),f("label",void 0)};useEffect(()=>{"clear"===y?B():"input"===y&&(m&&f("label",void 0),P.current=!0,b.length>=H?(f("current",void 0),M.reset(),M.start(w,$)):0<Object.keys(p||{}).length&&B())},[y,b]),useEffect(()=>{var e,t,o=E?.value;C!==o&&(t=(e=getItemId(E,L.current))?j.current[e]:void 0,f("current",e),f("label",t),g(o,{argument:t}))},[E]),useEffect(()=>{const{current:e,items:t,label:o,value:r}=inspectItems(u,p,C);f("current",e),f("label",o||m),f("value",r,!1);const n={};let l=null;const s=[];for(const i in t){var a=t[i];s.push(a);const o=v.renderText(a.label).trim();n[i]=o,e&&i===e&&(l=a)}j.current=n,L.current=t,k(s),O(l)},[p]),useEffect(()=>{var e="string"==typeof u?u:void 0,t=e?L.current[e]:void 0,e=e?j.current[e]:void 0;t?(f("label",e),f("value",t.value),h(e||"")):(f("value",void 0),P.current||h("")),O(t||null)},[u]),useEffect(()=>{P.current||T.current||h(""),P.current=!1,T.current=!1},[m]);const K=v.renderText(m);return React.createElement(FormElement,{className:e,element:r,inputId:I,name:a},t=>React.createElement(StyledAutoComplete,{autoSelect:!0,clearOnEscape:!0,clearOnBlur:!1,disabled:!n,filterOptions:e=>e,getOptionDisabled:e=>!1===e.enabled,getOptionLabel:e=>{e=getItemId(e,L.current);return e?j.current[e]:""},inputValue:b,noOptionsText:N.current,onBlur:()=>{1===S.length&&b.toLowerCase()===j.current[0]?.toLowerCase()?(h(j.current[0]),O(S[0])):f("label",b)},onChange:(e,t,o,r)=>{T.current=!0,O(t)},onInputChange:(e,t,o)=>{h(t),x(o)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation()},options:S,PopperComponent:StyledPopper,renderOption:(e,t,{inputValue:o})=>{if(t===pendingOption){var r=clsx(e.className,popperClasses.skeletonOption);return React.createElement("li",{...e,className:r,key:e.id},React.createElement(StyledSkeleton,null))}r=getItemId(t,L.current),r={...e,className:clsx(e.className,t.styleName?makeSafeClassName(t.styleName):void 0),title:t.tooltip?v.renderText(t.tooltip):void 0,inputText:o,optionText:r?j.current[r]:""};return React.createElement(HighlightOption,{...r})},renderInput:e=>(e.inputProps={...e.inputProps,...t,id:I,value:e.inputProps.value||K,placeholder:R,title:F},React.createElement(FormLabelTextField,{error:!!l,...e,fullWidth:!0,inputRef:A})),value:E}))};export default AutoComplete;
+import BaseAutoComplete,{autocompleteClasses,HighlightOption}from"@vertigis/react-ui/Autocomplete";import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import Popper from"@vertigis/react-ui/Popper";import Skeleton from"@vertigis/react-ui/Skeleton";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{ExclusiveTimer}from"../ExclusiveTimer.js";import{autoCompletePropertyConstraints}from"../elements/AutoComplete.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{getItemId,inspectItems,makeSafeClassName}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StyledAutoComplete=styled(BaseAutoComplete)(()=>({[`.${autocompleteClasses.endAdornment}`]:{right:1}})),popperClasses={skeletonOption:"skeleton-option"},StyledPopper=styled(Popper)(()=>({[`.${autocompleteClasses.listbox}`]:{[`.${autocompleteClasses.option}`]:{display:"block",[`&.${popperClasses.skeletonOption}`]:{'&[data-option-index="0"]':{span:{width:"70%"}},'&[data-option-index="1"]':{span:{width:"85%"}},'&[data-option-index="2"]':{span:{width:"55%"}}}}}})),StyledSkeleton=styled(Skeleton)(()=>({fontSize:"1.25rem",lineHeight:"inherit"})),pendingOption={enabled:!1,label:""},pendingOptions=[pendingOption,pendingOption,pendingOption],AutoComplete=({className:e,component:t,current:u,delay:r,element:o,enabled:n,error:l,items:p,label:m,minLength:s,name:i,prompt:a,tooltip:c,raiseEvent:d,setProperty:f,setValue:g,value:C})=>{const v=useContext(HostContext),[y,x]=useState(),[b,h]=useState(""),[S,O]=useState([]),[E,k]=useState(null),P=useRef(!1),T=useRef(),R=useRef(!1),N=useRef(v.renderText({status:"trivial"})),I=v.renderText(a),F=v.renderText(c),A=useFocusCallback(n,i,v),L=useRef({}),j=useRef({}),w=useMemo(()=>{let e=r;return"number"==typeof e&&!isNaN(e)||(e=autoCompletePropertyConstraints.delay.default),Math.max(e,autoCompletePropertyConstraints.delay.minimum)},[r]),H=useMemo(()=>{let e=s;return"number"==typeof e&&!isNaN(e)||(e=autoCompletePropertyConstraints.minLength.default),Math.max(e,autoCompletePropertyConstraints.minLength.minimum)},[s]),M=t.timer||(t.timer=new ExclusiveTimer),B=()=>{d("suggest",C,b,void 0,M.cancellationToken),O(pendingOptions)},K=()=>{f("items",{}),f("label",void 0)};useEffect(()=>{"clear"===y?K():"input"===y&&(m&&f("label",void 0),P.current=!0,b.length>=H?(f("current",void 0),M.reset(),M.start(w,B)):0<Object.keys(p||{}).length&&K())},[y,b]),useEffect(()=>{var e,t,r=E?.value;C!==r&&(t=(e=getItemId(E,L.current))?j.current[e]:void 0,f("current",e),f("label",t),g(r,{argument:t}))},[E]),useEffect(()=>{const{current:e,items:t,label:r,value:o}=inspectItems(u,p,C);f("current",e),f("label",r||m),f("value",o,!1);const n={};let l=null;const s=[];for(const a in t){var i=t[a];s.push(i);const r=v.renderText(i.label).trim();n[a]=r,e&&a===e&&(l=i)}j.current=n,L.current=t,O(s),k(l)},[p]),useEffect(()=>{var e="string"==typeof u?u:void 0,t=e?L.current[e]:void 0,e=e?j.current[e]:void 0;t?(f("label",e),f("value",t.value),h(e||"")):(f("value",void 0),P.current||h("")),k(t||null)},[u]),useEffect(()=>{P.current||R.current||h(""),P.current=!1,R.current=!1},[m]);const $=v.renderText(m);return React.createElement(FormElement,{className:e,element:o,inputId:T.current,name:i},t=>React.createElement(StyledAutoComplete,{autoSelect:!0,clearOnEscape:!0,clearOnBlur:!1,disabled:!n,filterOptions:e=>e,getOptionDisabled:e=>!1===e.enabled,getOptionKey:e=>(e.index??-1).toString(),getOptionLabel:e=>{e=getItemId(e,L.current);return e?j.current[e]:""},inputValue:b,noOptionsText:N.current,onBlur:()=>{1===S.length&&b.toLowerCase()===j.current[0]?.toLowerCase()?(h(j.current[0]),k(S[0])):f("label",b)},onChange:(e,t,r,o)=>{R.current=!0,k(t)},onInputChange:(e,t,r)=>{h(t),x(r)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation()},options:S,PopperComponent:StyledPopper,renderOption:(e,t,{inputValue:r})=>{if(t===pendingOption){var o=clsx(e.className,popperClasses.skeletonOption);return React.createElement("li",{...e,className:o,key:e.id},React.createElement(StyledSkeleton,null))}o=getItemId(t,L.current),o={...e,className:clsx(e.className,t.styleName?makeSafeClassName(t.styleName):void 0),title:t.tooltip?v.renderText(t.tooltip):void 0,inputText:r,optionText:o?j.current[o]:""};return React.createElement(HighlightOption,{...o})},renderInput:e=>(e.inputProps={...e.inputProps,...t,value:e.inputProps.value||$,placeholder:I,title:F},T.current=e.id,React.createElement(FormLabelTextField,{error:!!l,...e,fullWidth:!0,inputRef:A})),value:E}))};export default AutoComplete;

package/forms/components/DatePicker.js

@@ -1 +1 @@
-import BaseDatePicker from"@vertigis/react-ui/DatePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{isDateTimeRef,makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DatePicker=({className:e,element:t,enabled:r,error:a,format:o,name:s,prompt:l,setProperty:i,setValue:n,tooltip:m,value:u})=>{const c=useContext(HostContext),[d,p]=useState(null),[f,x]=useState(!1),[E,D]=useState(!1),[v,F]=useState(null),g=useRef(),T=useRef(!0),k=useFocusCallback(r,s,c),C=c.renderText(m);const R={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},P=Calendar.useNative(),V="date",j=isInvalidError(a);useEffect(()=>{var e=makeProperValue(u,P),t=getNewElementValue(e,V,R,P);areValuesEqual(u,t)||n(t,!1),F(e||null)},[u]),useEffect(()=>{if(!E&&!f)if(d)j||i("error",{status:"invalid"});else{if(j&&i("error",void 0),T.current)return void(T.current=!1);let e=v||void 0;if(e&&isDateTimeRef(u)){const r=new Date(u.value);e=new Date(e),e.setHours(r.getHours()),e.setMinutes(r.getMinutes()),e.setSeconds(r.getSeconds()),e.setMilliseconds(r.getMilliseconds())}var t=getNewElementValue(e,V,R,P);areValuesEqual(u,t)||n(t)}T.current=!1},[d,f,E]);const{min:S,max:H}=getDateBounds(o),w=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),I=c.renderText(l);return React.createElement(FormElement,{className:e,element:t,inputId:w,name:s},e=>React.createElement(React.Fragment,null,j&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},g.current),React.createElement(BaseDatePicker,{disabled:!r,inputRef:e=>{e&&(g.current=e.dataset.formatString,k(e))},key:"date-picker",maxDate:H,minDate:S,onChange:e=>F(e),onClose:()=>D(!1),onError:e=>p(e),onOpen:()=>D(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!a,id:w,inputProps:{...e,placeholder:I},onBlur:()=>x(!1),onFocus:()=>x(!0),title:C}},value:v})))};export default DatePicker;
+import BaseDatePicker from"@vertigis/react-ui/DatePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{isDateTimeRef,makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DatePicker=({className:e,element:t,enabled:r,error:a,format:o,name:s,prompt:i,setProperty:l,setValue:n,tooltip:m,value:u})=>{const c=useContext(HostContext),[d,p]=useState(!1),[f,x]=useState(!1),[E,D]=useState(!1),[v,F]=useState(null),g=useRef(),T=useRef(!0),k=useFocusCallback(r,s,c),C=c.renderText(m);const R={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},P=Calendar.useNative(),V="date",j=isInvalidError(a);useEffect(()=>{var e=makeProperValue(u,P),t=getNewElementValue(e,V,R,P);areValuesEqual(u,t)||n(t,!1),F(e||null)},[u]),useEffect(()=>{if(!E&&!f)if(d)j||l("error",{status:"invalid"});else{if(j&&l("error",void 0),T.current)return void(T.current=!1);let e=v||void 0;if(e&&isDateTimeRef(u)){const r=new Date(u.value);e=new Date(e),e.setHours(r.getHours()),e.setMinutes(r.getMinutes()),e.setSeconds(r.getSeconds()),e.setMilliseconds(r.getMilliseconds())}var t=getNewElementValue(e,V,R,P);areValuesEqual(u,t)||n(t)}T.current=!1},[d,f,E]);const{min:S,max:H}=getDateBounds(o),w=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),I=c.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:w,name:s},e=>React.createElement(React.Fragment,null,j&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},g.current),React.createElement(BaseDatePicker,{disabled:!r,inputRef:e=>{e&&(g.current=e.dataset.formatString,k(e))},key:"date-picker",maxDate:H,minDate:S,onChange:e=>F(e),onClose:()=>D(!1),onError:e=>p(!!e),onOpen:()=>D(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!a,id:w,inputProps:{...e,placeholder:I},onBlur:()=>x(!1),onFocus:()=>x(!0),title:C}},value:v})))};export default DatePicker;

package/forms/components/DateTimePicker.js

@@ -1 +1 @@
-import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import BaseDateTimePicker from"@vertigis/react-ui/DateTimePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{clockClasses}from"@vertigis/react-ui/TimeClock";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StylableDateTimePicker=e=>{let{className:t,slotProps:r,...a}=e;return r=r||{},React.createElement(BaseDateTimePicker,{slotProps:{...r,actionBar:{sx:{display:"none"}},popper:{...r.popper,className:t}},...a})},StyledDateTimePicker=styled(StylableDateTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),DateTimePicker=({className:e,element:t,enabled:r,error:a,format:o,name:s,prompt:i,setProperty:l,setValue:m,tooltip:n,value:u})=>{const c=useContext(HostContext),[p,d]=useState(!1),[f,T]=useState(!1),[k,x]=useState(!1),[E,v]=useState(null),C=useRef();const D={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},F=useRef(!0),P=useFocusCallback(r,s,c),g=c.renderText(n),B=Calendar.useNative(),R="datetime",y=isInvalidError(a);useEffect(()=>{var e=makeProperValue(u,B),t=getNewElementValue(e,R,D,B);areValuesEqual(u,t)||m(t,!1),v(e||null)},[u]),useEffect(()=>{if(!k&&!f)if(p)y||l("error",{status:"invalid"});else{if(y&&l("error",void 0),F.current)return void(F.current=!1);var e=getNewElementValue(E,R,D,B);areValuesEqual(u,e)||m(e)}F.current=!1},[p,f,k]);const{min:S,max:V}=getDateBounds(o),b=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),j=c.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:b,name:s},e=>React.createElement(React.Fragment,null,y&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},C.current),React.createElement(StyledDateTimePicker,{disabled:!r,key:"date-picker",inputRef:e=>{e&&(C.current=e.dataset.formatString,P(e))},maxDateTime:V,minDateTime:S,onChange:e=>v(e),onClose:()=>x(!1),onError:()=>d(!0),onOpen:()=>x(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!a,id:b,inputProps:{...e,placeholder:j},onBlur:()=>T(!1),onFocus:()=>T(!0),title:g}},value:E})))};export default DateTimePicker;
+import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import BaseDateTimePicker from"@vertigis/react-ui/DateTimePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{clockClasses}from"@vertigis/react-ui/TimeClock";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StylableDateTimePicker=e=>{let{className:t,slotProps:r,...a}=e;return r=r||{},React.createElement(BaseDateTimePicker,{slotProps:{...r,actionBar:{sx:{display:"none"}},popper:{...r.popper,className:t}},...a})},StyledDateTimePicker=styled(StylableDateTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),DateTimePicker=({className:e,element:t,enabled:r,error:a,format:o,name:s,prompt:i,setProperty:l,setValue:m,tooltip:n,value:u})=>{const c=useContext(HostContext),[p,d]=useState(!1),[f,T]=useState(!1),[k,x]=useState(!1),[E,v]=useState(null),C=useRef();const D={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},F=useRef(!0),P=useFocusCallback(r,s,c),g=c.renderText(n),B=Calendar.useNative(),R="datetime",y=isInvalidError(a);useEffect(()=>{var e=makeProperValue(u,B),t=getNewElementValue(e,R,D,B);areValuesEqual(u,t)||m(t,!1),v(e||null)},[u]),useEffect(()=>{if(!k&&!f)if(p)y||l("error",{status:"invalid"});else{if(y&&l("error",void 0),F.current)return void(F.current=!1);var e=getNewElementValue(E,R,D,B);areValuesEqual(u,e)||m(e)}F.current=!1},[p,f,k]);const{min:S,max:V}=getDateBounds(o),b=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),j=c.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:b,name:s},e=>React.createElement(React.Fragment,null,y&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},C.current),React.createElement(StyledDateTimePicker,{disabled:!r,key:"date-picker",inputRef:e=>{e&&(C.current=e.dataset.formatString,P(e))},maxDateTime:V,minDateTime:S,onChange:e=>v(e),onClose:()=>x(!1),onError:e=>d(!!e),onOpen:()=>x(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!a,id:b,inputProps:{...e,placeholder:j},onBlur:()=>T(!1),onFocus:()=>T(!0),title:g}},value:E})))};export default DateTimePicker;

package/forms/components/Form.js

@@ -1 +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{FormElementTypes}from"../constants.js";import{getLocale}from"../dateUtilities.js";import{getKeyString}from"../keyboard.js";import{isMutuallyExclusiveSection,sortAndFilter}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`},StyledBox=styled(Box)(()=>({"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("c14d2671e294e1c22b64a93ed8f2f0f9Tz04ODQ4NixFPTE3NDQ4MzUzNDMwMDAsUz1wcm8sTE09cGVycGV0dWFsLEtWPTI=");const Form=({className:e,component:t})=>{const[o,r]=useState(),l=t.props.host;if(useEffect(()=>{let t=!0;return getLocale(l).then(e=>{t?r(e):console.warn("Component was unmounted while loading the locale.")}),()=>{t=!1}},[]),!o)return null;const n={host:l,type:"header",children:[]},i={host:l,type:"body",children:[]},a={host:l,type:"main",children:[]},s={host:l,type:"footer",children:[]},m={host:l,type:"body",children:[]},c={},d=[];function f(e){return e!==FormElementTypes.SECTION}function p(e){return e===n||e===i||e===s?`${e.type}-section`:e.name}const h=sortAndFilter(t.props.host.form.elements);for(const $ in h){var u,y=h[$];if(!0!==(E=y).hoisted&&(!1!==E.visible&&f(E.type)))if(!0!==y.overlay){let e=function(e){if(void 0===e)return i;if("header"===e)return n;if("footer"===e)return s;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:l,name:t,type:"section",children:[]},d.push(o)),o}(y.section);void 0!==y.rowNumber&&(u=p(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:l,type:"row",children:[]}),r}(y.rowNumber,u)),e.children.push(React.createElement(FormElementComponent,{key:$,host:l,type:"element",name:$,children:[]}))}else m.children.push(React.createElement(FormElementComponent,{key:$,host:l,type:"element",name:$,children:[]}))}var E,F;const g=[];if(0<n.children.length&&g.push(React.createElement(FormComponent,{key:"header",...n})),0<m.children.length)g.push(React.createElement(FormComponent,{key:"main",...m}));else{T(i);let e,t,o=0;var C=()=>{if(e){switch(t){case"accordion-section":w(e,++o,"accordionGroup");break;case"tab-section":w(e,++o,"tabGroup")}e=void 0,t=void 0}};for(const k of d){var v=k.name,x=h[v],R=x.format;t&&R!==t&&C(),null!=(F=h[F=v])&&(f(F.type)||!0===F.hoisted||!1===F.visible)||(isMutuallyExclusiveSection(x)?e?e.push(k):(e=[k],t=R):T(k))}C(),0<a.children.length&&g.push(React.createElement(FormComponent,{key:"main",...a}))}function b(e){if(!function(e){var t=p(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===i?"body":`$${e.name}`;return React.createElement(FormComponent,{key:t,...e})}}function T(e){e=b(e);e&&a.children.push(e)}function w(e,t,o){const r=[];for(const i of e){var n=b(i);n&&r.push(n)}t=`${o}${t}`,o={children:r,host:l,name:t,type:o};a.children.push(React.createElement(FormComponent,{key:t,...o}))}return 0<s.children.length&&g.push(React.createElement(FormComponent,{key:"footer",...s})),React.createElement(StyledBox,{className:clsx(e,formClasses.root),onKeyDown:function(e){"enter"===getKeyString(e)&&(e.target instanceof HTMLButtonElement||l.post("clicked"))},ref:function(e){l.renderFocus(e)}},React.createElement(LocalizationProvider,{dateAdapter:AdapterDateFns,adapterLocale:o,localeText:{start:l.renderText("@date-range-picker-start-text"),end:l.renderText("@date-range-picker-end-text"),cancelButtonLabel:l.renderText("@common-cancel"),clearButtonLabel:l.renderText("@common-clear"),okButtonLabel:l.renderText("@common-ok"),todayButtonLabel:l.renderText("@common-today")}},g))};export default Form;export{formClasses};
+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{FormElementTypes}from"../constants.js";import{getLocale,getLocaleText}from"../dateUtilities.js";import{getKeyString}from"../keyboard.js";import{isMutuallyExclusiveSection,sortAndFilter}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`},StyledBox=styled(Box)(()=>({"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("c14d2671e294e1c22b64a93ed8f2f0f9Tz04ODQ4NixFPTE3NDQ4MzUzNDMwMDAsUz1wcm8sTE09cGVycGV0dWFsLEtWPTI=");const Form=({className:e,component:t})=>{const[o,r]=useState(),[n,i]=useState(),l=t.props.host;if(useEffect(()=>{let t=!0;var e=l.deriveLocale();return getLocale(e).then(e=>{t?r(e):console.warn("Component was unmounted while loading the locale.")}),getLocaleText(e).then(e=>{t?i(e):console.warn("Component was unmounted while loading the locale.")}),()=>{t=!1}},[]),!o)return null;const a={host:l,type:"header",children:[]},s={host:l,type:"body",children:[]},c={host:l,type:"main",children:[]},m={host:l,type:"footer",children:[]},d={host:l,type:"body",children:[]},f={},p=[];function h(e){return e!==FormElementTypes.SECTION}function u(e){return e===a||e===s||e===m?`${e.type}-section`:e.name}const y=sortAndFilter(t.props.host.form.elements);for(const I in y){var E,g=y[I];if(!0!==(F=g).hoisted&&(!1!==F.visible&&h(F.type)))if(!0!==g.overlay){let e=function(e){if(void 0===e)return s;if("header"===e)return a;if("footer"===e)return m;let t;t="object"==typeof e?e.name:e;let o=(e=>{for(const t of p)if(t.name===e)return t})(t);return void 0===o&&(o={host:l,name:t,type:"section",children:[]},p.push(o)),o}(g.section);void 0!==g.rowNumber&&(E=u(e),e=function(e,t){let o=f[t];o=o||(f[t]=[]);let r=o[e];return void 0===r&&(r=o[e]={host:l,type:"row",children:[]}),r}(g.rowNumber,E)),e.children.push(React.createElement(FormElementComponent,{key:I,host:l,type:"element",name:I,children:[]}))}else d.children.push(React.createElement(FormElementComponent,{key:I,host:l,type:"element",name:I,children:[]}))}var F,v;const C=[];if(0<a.children.length&&C.push(React.createElement(FormComponent,{key:"header",...a})),0<d.children.length)C.push(React.createElement(FormComponent,{key:"main",...d}));else{$(s);let e,t,o=0;var x=()=>{if(e){switch(t){case"accordion-section":k(e,++o,"accordionGroup");break;case"tab-section":k(e,++o,"tabGroup")}e=void 0,t=void 0}};for(const L of p){var T=L.name,w=y[T],R=w.format;t&&R!==t&&x(),null!=(v=y[v=T])&&(h(v.type)||!0===v.hoisted||!1===v.visible)||(isMutuallyExclusiveSection(w)?e?e.push(L):(e=[L],t=R):$(L))}x(),0<c.children.length&&C.push(React.createElement(FormComponent,{key:"main",...c}))}function b(e){if(!function(e){var t=u(e),o=f[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===s?"body":`$${e.name}`;return React.createElement(FormComponent,{key:t,...e})}}function $(e){e=b(e);e&&c.children.push(e)}function k(e,t,o){const r=[];for(const i of e){var n=b(i);n&&r.push(n)}t=`${o}${t}`,o={children:r,host:l,name:t,type:o};c.children.push(React.createElement(FormComponent,{key:t,...o}))}return 0<m.children.length&&C.push(React.createElement(FormComponent,{key:"footer",...m})),React.createElement(StyledBox,{className:clsx(e,formClasses.root),onKeyDown:function(e){"enter"===getKeyString(e)&&(e.target instanceof HTMLButtonElement||l.post("clicked"))},ref:function(e){l.renderFocus(e)}},React.createElement(LocalizationProvider,{dateAdapter:AdapterDateFns,adapterLocale:o,localeText:{...n,start:l.renderText("@date-range-picker-start-text"),end:l.renderText("@date-range-picker-end-text"),cancelButtonLabel:l.renderText("@common-cancel"),clearButtonLabel:l.renderText("@common-clear"),okButtonLabel:l.renderText("@common-ok"),todayButtonLabel:l.renderText("@common-today")}},C))};export default Form;export{formClasses};

package/forms/components/FormElement.js

@@ -1 +1 @@
-import FormControl from"@vertigis/react-ui/FormControl";import clsx from"clsx";import{forwardRef,useContext}from"react";import*as React from"react";import{TitleLocation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,makeUniqueId}from"../utils.js";import{formClasses}from"./Form.js";import{renderAccessibleDescription,renderDescription,renderError,renderTitle}from"./common.js";export default forwardRef((e,r)=>{var{children:t,className:o,component:i,element:s,inputId:n,name:a}=e,l=useContext(HostContext),m=makeUniqueId(a),c=renderTitle(m,s.require,s.title,n,"fieldset"===i?"legend":void 0),e=renderDescription(s.description,m,s.enabled),n=renderAccessibleDescription(s.accessibleDescription,s.description,m,l),l=renderError(s.error);const d={className:clsx(o,s.type,{[formClasses.formElementWithTitleBeside]:s.titleLocation===TitleLocation.BESIDE,[makeSafeClassName(a)]:!!a,[makeSafeClassName(s.styleName)]:!!s.styleName}),component:i,error:!!l,id:m,ref:r,required:s.require};m=c?.props?.id,r=n?.props?.id;const p=t instanceof Function?t:void 0;let f=t instanceof Function?void 0:t;p?f=p({"aria-labelledby":m,"aria-describedby":r}):(d["aria-labelledby"]=m,d["aria-describedby"]=r);let u=[c];return s.titleLocation===TitleLocation.BESIDE?u.push(React.createElement("div",{className:formClasses.formElementContent},e,n,l,f)):(u.push(e),u.push(n),u.push(l),u.push(f)),React.createElement(FormControl,{fullWidth:!0,...d},...u)});
+import FormControl from"@vertigis/react-ui/FormControl";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{forwardRef,useContext}from"react";import*as React from"react";import{TitleLocation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,makeUniqueId}from"../utils.js";import{formClasses}from"./Form.js";import{renderAccessibleDescription,renderDescription,renderError,renderTitle}from"./common.js";const StyledFormControl=styled(FormControl)(({theme:{palette:e,spacing:r}})=>({code:{backgroundColor:"rgba(0, 0, 0, .06)",fontFamily:'"Consolas", monospace'},table:{borderCollapse:"collapse","td, th":{border:`1px solid ${e.grey[400]}`,padding:r(.5)},th:{backgroundColor:e.grey[100]}}}));export default forwardRef((e,r)=>{var{children:o,className:t,component:s,element:i,inputId:a,name:n}=e,l=useContext(HostContext),m=makeUniqueId(n),c=renderTitle(m,i.require,i.title,a,"fieldset"===s?"legend":void 0),e=renderDescription(i.description,m,i.enabled),a=renderAccessibleDescription(i.accessibleDescription,i.description,m,l),l=renderError(i.error);const d={className:clsx(t,i.type,{[formClasses.formElementWithTitleBeside]:i.titleLocation===TitleLocation.BESIDE,[makeSafeClassName(n)]:!!n,[makeSafeClassName(i.styleName)]:!!i.styleName}),component:s,error:!!l,id:m,ref:r,required:i.require};m=c?.props?.id,r=a?.props?.id;const p=o instanceof Function?o:void 0;let f=o instanceof Function?void 0:o;p?f=p({"aria-labelledby":m,"aria-describedby":r}):(d["aria-labelledby"]=m,d["aria-describedby"]=r);let u=[c];return i.titleLocation===TitleLocation.BESIDE?u.push(React.createElement("div",{className:formClasses.formElementContent},e,a,l,f)):(u.push(e),u.push(a),u.push(l),u.push(f)),React.createElement(StyledFormControl,{fullWidth:!0,...d},...u)});

package/forms/components/FormLabelNumberField.d.ts

@@ -10,7 +10,7 @@ interface FormLabelNumberFieldProps {
     label: string;
     value: number;
     max: number;
-    maxDecimalPlaces: number;
+    maxDecimalPlaces?: number;
     min: number;
 }
 declare const FormLabelNumberField: (props: FormLabelNumberFieldProps) => React.JSX.Element;

package/forms/components/ListBox.d.ts

@@ -7,5 +7,5 @@ export declare const listBoxClasses: {
 /**
  * The component for the "List Box" Form Element.
  */
-declare const ListBox: ({ className, current, element, enabled, items: elementItems, name, require, setItemProperty, setValue: setElementValue, size: elementSize, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.ItemsRef | undefined>) => React.JSX.Element;
+declare const ListBox: ({ className, current, element, enabled, items: elementItems, name, require, setValue: setElementValue, size: elementSize, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.ItemsRef | undefined>) => React.JSX.Element;
 export default ListBox;

package/forms/components/ListBox.js

@@ -1 +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{useContext,useEffect,useState}from"react";import HostContext from"../hostContext.js";import{areValuesEqual,arrayEqual}from"../listUtilities.js";import{makeSafeClassName,makeUniqueId,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="ListBox",listBoxClasses={select:`${PREFIX}-select`},StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({"&&&":{[`.${listBoxClasses.select}`]:{paddingRight:e(1)}}})),ListBox=({className:e,current:t,element:s,enabled:a,items:l,name:o,require:r,setItemProperty:m,setValue:i,size:c,tooltip:n,value:u})=>{const d=useContext(HostContext),p=`${makeUniqueId(o)}-input`,f=inspectItems(t,l,u)["items"],[x,h]=useState([]),v=useFocusCallback(a,o,d);useEffect(()=>{const e=[];for(const t in l)l[t].checked&&e.push(t);arrayEqual(x,e)||h(e),E(e,!1)});const E=(e,t)=>{e=0===e.length?void 0:{refValueType:"items",items:e.map(e=>f[e])};areValuesEqual(u,e)||i(e,t)},C=e=>{const t=e.target["options"],s=[];for(let e=0;e<t.length;e++){var a=t.item(e),l=a.value;a.selected&&s.push(l)}for(const i in f){var o=f[i].checked,r=-1!==s.indexOf(i);o!==r&&m(i,"checked",r)}E(s,!0)},k=[];for(const q in f){const I=f[q];var y=d.renderText(I.label);const F=d.renderText(I.tooltip);I.checked=!0===I.checked;var b=clsx(I.styleName?makeSafeClassName(I.styleName):void 0),g=!1===I.enabled?void 0:!!I.checked;k.push(React.createElement("option",{"aria-selected":g,className:b,key:q,title:F,value:q,disabled:!1===I.enabled},y))}const F=d.renderText(n)||void 0;let S;return"number"==typeof c&&(S=c),React.createElement(StyledFormElement,{className:e,element:s,inputId:p,name:o},e=>React.createElement(Select,{disabled:!a||0===k.length,inputProps:{...e,"aria-multiselectable":!0,"aria-orientation":"vertical","aria-required":r,className:listBoxClasses.select,id:p,role:"listbox",size:S,title:F},inputRef:v,multiple:!0,native:!0,onChange:C,value:x},k))};export default ListBox;export{listBoxClasses};
+import Select from"@vertigis/react-ui/Select";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useState}from"react";import HostContext from"../hostContext.js";import{areValuesEqual,arrayEqual}from"../listUtilities.js";import{makeSafeClassName,makeUniqueId,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="ListBox",listBoxClasses={select:`${PREFIX}-select`},StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({"&&&":{[`.${listBoxClasses.select}`]:{paddingRight:e(1)}}})),ListBox=({className:e,current:t,element:s,enabled:a,items:l,name:o,require:i,setValue:r,size:c,tooltip:m,value:n})=>{const u=useContext(HostContext),d=`${makeUniqueId(o)}-input`,p=inspectItems(t,l,n)["items"],[f,x]=useState([]),h=useFocusCallback(a,o,u);useEffect(()=>{const e=[];for(const t in l)l[t].checked&&e.push(t);arrayEqual(f,e)||x(e),v(e,!1)});const v=(e,t)=>{e=0===e.length?void 0:{refValueType:"items",items:e.map(e=>p[e])};areValuesEqual(n,e)||r(e,t)},E=e=>{const t=e.target["options"],s=[];for(let e=0;e<t.length;e++){var a=t.item(e),l=a.value;a.selected&&s.push(l)}for(const r in p){var o=p[r].checked,i=-1!==s.indexOf(r);o!==i&&(p[r].checked=i)}v(s,!0)},C=[];for(const S in p){const q=p[S];var k=u.renderText(q.label);const g=u.renderText(q.tooltip);q.checked=!0===q.checked;var y=clsx(q.styleName?makeSafeClassName(q.styleName):void 0),b=!1===q.enabled?void 0:!!q.checked;C.push(React.createElement("option",{"aria-selected":b,className:y,key:S,title:g,value:S,disabled:!1===q.enabled},k))}const g=u.renderText(m)||void 0;let F;return"number"==typeof c&&(F=c),React.createElement(StyledFormElement,{className:e,element:s,inputId:d,name:o},e=>React.createElement(Select,{disabled:!a||0===C.length,inputProps:{...e,"aria-multiselectable":!0,"aria-orientation":"vertical","aria-required":i,className:listBoxClasses.select,id:d,role:"listbox",size:F,title:g},inputRef:h,multiple:!0,native:!0,onChange:E,value:f},C))};export default ListBox;export{listBoxClasses};

package/forms/components/Markdown.d.ts

@@ -4,7 +4,7 @@ import type { MarkdownProps as BaseMarkdownProps } from "@vertigis/react-ui/Mark
 /**
  * Properties for the `Markdown` component.
  */
-export interface MarkdownProps extends Omit<BaseMarkdownProps, "markdown" | "sanitize"> {
+interface MarkdownProps extends Omit<BaseMarkdownProps, "markdown" | "sanitize"> {
     /** The text to be rendered. */
     text: defs.Text | undefined;
 }

package/forms/components/Markdown.js

@@ -1 +1 @@
-import BaseMarkdown from"@vertigis/react-ui/Markdown";import*as React from"react";import{useContext}from"react";import HostContext from"../hostContext.js";import{hasContent,isMarkdown}from"../textUtilities.js";const Markdown=({text:t,escapeHtml:e=!0,linkTarget:a="_blank",...o})=>{const r=useContext(HostContext);t=r.translateText(t);return hasContent(t)?isMarkdown(t)?React.createElement(BaseMarkdown,{markdown:t.markdown,escapeHtml:e,linkTarget:a,...o}):React.createElement(React.Fragment,null,t):null};export default Markdown;
+import BaseMarkdown from"@vertigis/react-ui/Markdown";import*as React from"react";import{useContext}from"react";import HostContext from"../hostContext.js";import{hasContent,isMarkdown}from"../textUtilities.js";const Markdown=({text:t,escapeHtml:e=!0,linkTarget:a="_blank",...o})=>{const r=useContext(HostContext);t=r.translateText(t);return hasContent(t)?isMarkdown(t)?React.createElement(BaseMarkdown,{markdown:t.markdown,escapeHtml:e,linkTarget:a,...o}):React.createElement("div",{className:o.className,role:o.role},React.createElement("p",null,t)):null};export default Markdown;

package/forms/components/Number.js

@@ -1 +1 @@
-import{inputClasses}from"@vertigis/react-ui/Input";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{FormElementSize}from"../constants.js";import{numberFormatConfiguration}from"../elements/Number.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{NumberDisplayFormat,DEFAULT_CURRENCY}from"../numberFormatter.js";import{areValuesEqual,countDecimalsInCustomFormat,enforceConstraints,getCurrencySymbolInfo,getNumberConstraints,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{isNumber,isNumberRef,isString,makeUniqueId,useLocale}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Number",numberClasses={large:`${PREFIX}-large`,medium:`${PREFIX}-medium`,small:`${PREFIX}-small`},StyledFormElement=styled(FormElement)(()=>({[`.${inputClasses.root}`]:{[`&.${numberClasses.large}`]:{width:"50%"},[`&.${numberClasses.medium}`]:{width:"33%"},[`&.${numberClasses.small}`]:{width:"25%"}}})),NumberComponent=({className:e,element:r,enabled:t,error:o,format:l,name:m,prompt:n,require:s,tooltip:a,value:i,setValue:u})=>{const c=useContext(HostContext),[p,f]=useState(!1),[d,b]=useState(),C=useRef(!0),F=`${makeUniqueId(m)}-input`,y=useLocale(),N=c.renderText(n),g=c.renderText(a),{currency:E,customDisplayFormat:v,decimals:R,displayFormat:I,endAdornment:D,isPercent:S,numberConstraints:x,startAdornment:P}=useMemo(()=>{var e,r,t=l,o=t?.currency||DEFAULT_CURRENCY,m=t?.displayFormat,n=m===NumberDisplayFormat.PERCENT,s=getNumberConstraints(t,numberFormatConfiguration),a=t?.customDisplayFormat,t=m===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(a):t?.precision,t=sanitizePrecision(t,s.step,numberFormatConfiguration);let i=null,u=null;return m===NumberDisplayFormat.CURRENCY||m===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(y,o))&&(r=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?i=r:u=r):!n||(e=getPercentSymbolInfo(y))&&(r=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?i=r:u=r),{currency:o,customDisplayFormat:a,decimals:t,displayFormat:m,endAdornment:u,isPercent:n,numberConstraints:s,startAdornment:i}},[l]),{maximum:A,minimum:U,step:z}=x;a=S?R-2:R;const T={currency:E,customDisplayFormat:v,format:I,fractionalDigits:a=Math.max(0,a),locale:y},j=e=>{if("number"==typeof e)return{refValueType:"number",format:{lowerBound:U,precision:R,step:z,upperBound:A},display:c.formatNumber(e,T),numeric:e}},$=()=>{e=void 0===(e=d)?void 0:enforceConstraints(e,x),e=j(e);areValuesEqual(i,e)||u(e);var e=e?.numeric;e!==d&&b(e)};useEffect(()=>{C.current?C.current=!1:p||$()},[p,d]),useEffect(()=>{var e=h(i),r=void 0===e?void 0:j(e);areValuesEqual(i,r)||u(r,!1),e!==d&&b(e)},[i]);const h=e=>{let r;if(isNumber(e))r=e;else if(isString(e)){if(!e)return;r=c.coerceNumber(e)}else"number"==typeof e?.numeric&&(r=e.numeric);return"number"==typeof r&&0*r!=0&&(r=void 0),void 0===r?r:enforceConstraints(r,x)},q=e=>{var r,t=getKeyString(e);return"enter"===t?(r=e,$(),r.currentTarget.select(),r.stopPropagation(),r.preventDefault(),!1):"escape"===t?(t=e,(e=isNumberRef(i)?i.numeric:void 0)!==d&&b(e),t.currentTarget.select(),t.stopPropagation(),t.preventDefault(),!1):void 0},w=useFocusCallback(t,m,c);a="string"==typeof r.size?r.size:FormElementSize.Full;const k=clsx({[numberClasses.large]:a===FormElementSize.Large,[numberClasses.medium]:a===FormElementSize.Medium,[numberClasses.small]:a===FormElementSize.Small});return React.createElement(StyledFormElement,{className:e,element:r,inputId:F,name:m},e=>React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{S&&(e*=100);var r={fractionalDigits:T.fractionalDigits,locale:T.locale};return c.formatNumber(e,r)},parseNumber:e=>{let r=c.coerceNumber(e);return S&&(r=preciseRound(r/100,R)),r}}},React.createElement(NumberInput,{allowUndefined:!0,className:k,correctOnBlur:!0,disabled:!t,endAdornment:D,error:!!o,inputProps:{...e,id:F,onKeyDown:q,title:g},inputRef:w,max:A,maxDecimalPlaces:R,min:U,onBlur:()=>{f(!1)},onChange:e=>b(e),onFocus:()=>{f(!0)},placeholder:N,required:s,size:"small",startAdornment:P,value:d})))};export default NumberComponent;export{numberClasses};
+import{inputClasses}from"@vertigis/react-ui/Input";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{FormElementSize}from"../constants.js";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import{numberFormatConfiguration}from"../elements/Number.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{NumberDisplayFormat,DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT}from"../numberFormatter.js";import{areValuesEqual,enforceConstraints,getCurrencySymbolInfo,getNumberConstraints,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{isNumber,isNumberRef,isString,makeUniqueId,useLocale}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Number",numberClasses={large:`${PREFIX}-large`,medium:`${PREFIX}-medium`,small:`${PREFIX}-small`},StyledFormElement=styled(FormElement)(()=>({[`.${inputClasses.root}`]:{[`&.${numberClasses.large}`]:{width:"50%"},[`&.${numberClasses.medium}`]:{width:"33%"},[`&.${numberClasses.small}`]:{width:"25%"}}})),NumberComponent=({className:e,element:r,enabled:t,error:o,format:c,name:m,prompt:n,require:s,tooltip:a,value:i,setValue:u})=>{const l=useContext(HostContext),[p,b]=useState(!1),[f,d]=useState(),C=useRef(!0),F=`${makeUniqueId(m)}-input`,N=useLocale(),y=l.renderText(n),g=l.renderText(a),{currency:E,customDisplayFormat:R,decimals:v,displayFormat:D,endAdornment:S,isCustom:I,isPercent:x,numberConstraints:T,startAdornment:A}=useMemo(()=>{var e,r,t=c,o=t?.currency||DEFAULT_CURRENCY,m=t?.displayFormat,n=m===NumberDisplayFormat.CUSTOM,s=m===NumberDisplayFormat.PERCENT,a=getNumberConstraints(t,numberFormatConfiguration),i=t?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,t=m===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(t?.precision,a.step,numberFormatConfiguration);let u=null,l=null;return m===NumberDisplayFormat.CURRENCY||m===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(N,o))&&(r=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?u=r:l=r):!s||(e=getPercentSymbolInfo(N))&&(r=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?u=r:l=r),{currency:o,customDisplayFormat:i,decimals:t,displayFormat:m,endAdornment:l,isCustom:n,isPercent:s,numberConstraints:a,startAdornment:u}},[c]);n=useMemo(()=>D===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(R,f):-1,[f]);const{maximum:U,minimum:P,step:M}=T;a=x?v-2:v,a=Math.max(0,a);const j={currency:E,customDisplayFormat:R,format:D,fractionalDigits:a,locale:N},z=e=>{if("number"==typeof e)return{refValueType:"number",format:{lowerBound:P,precision:v,step:M,upperBound:U},display:l.formatNumber(e,j),numeric:e}},O=()=>{e=void 0===(e=f)?void 0:enforceConstraints(e,T),e=z(e);areValuesEqual(i,e)||u(e);var e=e?.numeric;e!==f&&d(e)};useEffect(()=>{C.current?C.current=!1:p||O()},[p,f]),useEffect(()=>{var e=$(i),r=void 0===e?void 0:z(e);areValuesEqual(i,r)||u(r,!1),e!==f&&d(e)},[i]);const $=e=>{let r;if(isNumber(e))r=e;else if(isString(e)){if(!e)return;r=l.coerceNumber(e)}else"number"==typeof e?.numeric&&(r=e.numeric);return"number"==typeof r&&0*r!=0&&(r=void 0),void 0===r?r:enforceConstraints(r,T)},h=e=>{var r,t=getKeyString(e);return"enter"===t?(r=e,O(),r.currentTarget.select(),r.stopPropagation(),r.preventDefault(),!1):"escape"===t?(t=e,(e=isNumberRef(i)?i.numeric:void 0)!==f&&d(e),t.currentTarget.select(),t.stopPropagation(),t.preventDefault(),!1):void 0},q=useFocusCallback(t,m,l);a="string"==typeof r.size?r.size:FormElementSize.Full;const L=I?n:v,w=clsx({[numberClasses.large]:a===FormElementSize.Large,[numberClasses.medium]:a===FormElementSize.Medium,[numberClasses.small]:a===FormElementSize.Small});return React.createElement(StyledFormElement,{className:e,element:r,inputId:F,name:m},e=>React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(I)return customFormatNumber(e,R,j.locale);x&&(e*=100);var r={fractionalDigits:j.fractionalDigits,locale:j.locale};return l.formatNumber(e,r)},parseNumber:e=>{if(I)return parseCustomFormattedNumber(e,R,j.locale);let r=l.coerceNumber(e);return x&&(r=preciseRound(r/100,v)),r}}},React.createElement(NumberInput,{allowUndefined:!0,className:w,correctOnBlur:!0,disabled:!t,endAdornment:S,error:!!o,inputProps:{...e,id:F,onKeyDown:h,title:g},inputRef:q,max:U,maxDecimalPlaces:L,min:P,onBlur:()=>{b(!1)},onChange:e=>d(e),onFocus:()=>{b(!0)},placeholder:y,required:s,size:"small",startAdornment:A,value:f})))};export default NumberComponent;export{numberClasses};

package/forms/components/NumberRangeSlider.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import{formControlClasses}from"@vertigis/react-ui/FormControl";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{numberFormatConfiguration}from"../elements/NumberRangeSlider.js";import HostContext from"../hostContext.js";import{DEFAULT_CURRENCY,NumberDisplayFormat}from"../numberFormatter.js";import{countDecimalsInCustomFormat,getCurrencySymbolInfo,getPercentSymbolInfo,preciseRound}from"../numberUtilities.js";import{getMarks,getNumberConstraints,getNumberSliderValues,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle,useLocale}from"../utils.js";import FormElement from"./FormElement.js";import FormLabelNumberField from"./FormLabelNumberField.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberRangeSlider",numberRangeSliderClasses={container:`${PREFIX}-container`,inputContainer:`${PREFIX}-input-container`,toLabel:`${PREFIX}-to-label`},StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberRangeSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${numberRangeSliderClasses.inputContainer}`]:{marginTop:e(1),[`.${formControlClasses.root}`]:{flexGrow:1},[`.${numberRangeSliderClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}}}})),NumberRangeSlider=({className:e,element:t,enabled:r,format:u,manualEntry:a,showMinMaxLabels:n,showTickMarks:o,name:m,raiseEvent:i,title:s,tooltip:l,value:c,setValue:d})=>{const p=useContext(HostContext),b=useLocale(),{currency:g,customDisplayFormat:f,decimals:C,displayFormat:F,endAdornment:R,isPercent:N,numberConstraints:y,startAdornment:x}=useMemo(()=>{var e,t,r=u,a=r?.currency||DEFAULT_CURRENCY,n=r?.displayFormat,o=n===NumberDisplayFormat.PERCENT,m=getNumberConstraints(r,numberFormatConfiguration),i=r?.customDisplayFormat,r=n===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(i):r?.precision,r=sanitizePrecision(r,m.step,numberFormatConfiguration);let s=null,l=null;return n===NumberDisplayFormat.CURRENCY||n===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(b,a))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?s=t:l=t):!o||(e=getPercentSymbolInfo(b))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?s=t:l=t),{currency:a,customDisplayFormat:i,decimals:r,displayFormat:n,endAdornment:l,isPercent:o,numberConstraints:m,startAdornment:s}},[u]);var S=y["step"];const v=y.maximum,E=y.minimum,[A,D]=useState(!1),[I,L]=useState(!1),[P,h]=useState([E,v]),T=useRef(!0),[$,k]=useMemo(()=>{var e=makeUniqueId(m);return[e,`${e}-slider-input`]},[m]);var M=!1!==n,U=!!o,n=!1!==a,o=N?C-2:C;const j={currency:g,customDisplayFormat:f,format:F,fractionalDigits:o=Math.max(0,o),locale:b};useEffect(()=>{var e;T.current?T.current=!1:I?B(P):A||(e=getNumberSliderValues(P,y),P[0]===e[0]&&P[1]===e[1]||h(e),w(c,e)||d(e))},[A,I,P]),useEffect(()=>{var e=getNumberSliderValues(c,y);w(c,e)||d(e,!1),w(P,e)||h(e)},[c]);const w=(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])),B=useMemo(()=>throttle(e=>{i("dragged",e)}),[]),V=useFocusCallback(r,m,p);a=p.renderText(l),o=!r&&!I,l=n?{max:v,min:E,onBlur:()=>{D(!1)},onFocus:()=>{D(!0)},step:S,title:a}:void 0;return React.createElement(StyledFormElement,{className:e,element:t,inputId:`${k}-0`,name:m},React.createElement(Box,{className:numberRangeSliderClasses.container},React.createElement(Slider,{disabled:o,getAriaLabel:()=>p.renderText(s),getAriaValueText:e=>p.formatNumber(e,j),marks:getMarks(v,E,S,j,M,U),max:v,min:E,onChange:(e,t)=>{L(!0),Array.isArray(t)&&h(t)},onChangeCommitted:()=>{L(!1)},slotProps:{input:()=>({ref:e=>(null===e||e.id||(e.id=`${k}-${e.attributes["data-index"].value}`),V(e))})},step:S,title:a,value:P,valueLabelDisplay:"on",valueLabelFormat:(e,t)=>p.formatNumber(e,j)}),!1!=n&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{N&&(e*=100);var t={fractionalDigits:j.fractionalDigits,locale:j.locale};return p.formatNumber(e,t)},parseNumber:e=>{let t=p.coerceNumber(e);return N&&(t=preciseRound(t/100,C)),t}}},React.createElement(Stack,{direction:"row",className:numberRangeSliderClasses.inputContainer},React.createElement(FormLabelNumberField,{disabled:!r,id:`${$}-startInput`,inputProps:l,endAdornment:R,label:p.renderText("@common-start"),max:v,maxDecimalPlaces:C,min:E,onChange:e=>{void 0===e&&(e=E),h([e,P[1]])},startAdornment:x,value:P[0]}),React.createElement(Box,{className:numberRangeSliderClasses.toLabel}," ",p.renderText("@common-to")," "),React.createElement(FormLabelNumberField,{disabled:!r,endAdornment:R,id:`${$}-endInput`,inputProps:l,label:p.renderText("@common-end"),max:v,maxDecimalPlaces:C,min:E,onChange:e=>{void 0===e&&(e=v),h([P[0],e])},startAdornment:x,value:P[1]})))))};export default NumberRangeSlider;export{numberRangeSliderClasses};
+import Box from"@vertigis/react-ui/Box";import{formControlClasses}from"@vertigis/react-ui/FormControl";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import{numberFormatConfiguration}from"../elements/NumberRangeSlider.js";import HostContext from"../hostContext.js";import{DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT,NumberDisplayFormat}from"../numberFormatter.js";import{getCurrencySymbolInfo,getPercentSymbolInfo,preciseRound}from"../numberUtilities.js";import{getMarks,getNumberConstraints,getNumberSliderValues,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle,useLocale}from"../utils.js";import FormElement from"./FormElement.js";import FormLabelNumberField from"./FormLabelNumberField.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberRangeSlider",numberRangeSliderClasses={container:`${PREFIX}-container`,inputContainer:`${PREFIX}-input-container`,toLabel:`${PREFIX}-to-label`},StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberRangeSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${numberRangeSliderClasses.inputContainer}`]:{marginTop:e(1),[`.${formControlClasses.root}`]:{flexGrow:1},[`.${numberRangeSliderClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}}}})),NumberRangeSlider=({className:e,element:t,enabled:r,format:c,manualEntry:a,showMinMaxLabels:o,showTickMarks:n,name:m,raiseEvent:i,title:s,tooltip:l,value:u,setValue:d})=>{const p=useContext(HostContext),b=useLocale(),{currency:C,customDisplayFormat:f,decimals:F,displayFormat:g,endAdornment:N,isCustom:R,isPercent:y,numberConstraints:S,startAdornment:x}=useMemo(()=>{var e,t,r=c,a=r?.currency||DEFAULT_CURRENCY,o=r?.displayFormat,n=o===NumberDisplayFormat.CUSTOM,m=o===NumberDisplayFormat.PERCENT,i=getNumberConstraints(r,numberFormatConfiguration),s=r?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,r=o===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(r?.precision,i.step,numberFormatConfiguration);let l=null,u=null;return o===NumberDisplayFormat.CURRENCY||o===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(b,a))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?l=t:u=t):!m||(e=getPercentSymbolInfo(b))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?l=t:u=t),{currency:a,customDisplayFormat:s,decimals:r,displayFormat:o,endAdornment:u,isCustom:n,isPercent:m,numberConstraints:i,startAdornment:l}},[c]);var E=S["step"];const v=S.maximum,A=S.minimum,[D,T]=useState(!1),[I,L]=useState(!1),[M,P]=useState([A,v]);var U=useMemo(()=>g===NumberDisplayFormat.CUSTOM?[countDecimalsInCustomFormat(f,M[0]),countDecimalsInCustomFormat(f,M[1])]:[-1,-1],[M]);const h=useRef(!0),[$,k]=useMemo(()=>{var e=makeUniqueId(m);return[e,`${e}-slider-input`]},[m]);var j=!1!==o,O=!!n,o=!1!==a,n=y?F-2:F,n=Math.max(0,n);const _={currency:C,customDisplayFormat:f,format:g,fractionalDigits:n,locale:b};useEffect(()=>{var e;h.current?h.current=!1:I?B(M):D||(e=getNumberSliderValues(M,S),M[0]===e[0]&&M[1]===e[1]||P(e),w(u,e)||d(e))},[D,I,M]),useEffect(()=>{var e=getNumberSliderValues(u,S);w(u,e)||d(e,!1),w(M,e)||P(e)},[u]);const w=(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])),B=useMemo(()=>throttle(e=>{i("dragged",e)}),[]),V=useFocusCallback(r,m,p);a=p.renderText(l),n=!r&&!I,l=o?{max:v,min:A,onBlur:()=>{T(!1)},onFocus:()=>{T(!0)},step:E,title:a}:void 0,U=R?U:[F,F];return React.createElement(StyledFormElement,{className:e,element:t,inputId:`${k}-0`,name:m},React.createElement(Box,{className:numberRangeSliderClasses.container},React.createElement(Slider,{disabled:n,getAriaLabel:()=>p.renderText(s),getAriaValueText:e=>p.formatNumber(e,_),marks:getMarks(v,A,E,_,j,O),max:v,min:A,onChange:(e,t)=>{L(!0),Array.isArray(t)&&P(t)},onChangeCommitted:()=>{L(!1)},slotProps:{input:()=>({ref:e=>(null===e||e.id||(e.id=`${k}-${e.attributes["data-index"].value}`),V(e))})},step:E,title:a,value:M,valueLabelDisplay:"on",valueLabelFormat:(e,t)=>p.formatNumber(e,_)}),!1!=o&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(R)return customFormatNumber(e,f,_.locale);y&&(e*=100);var t={fractionalDigits:_.fractionalDigits,locale:_.locale};return p.formatNumber(e,t)},parseNumber:e=>{if(R)return parseCustomFormattedNumber(e,f,_.locale);let t=p.coerceNumber(e);return y&&(t=preciseRound(t/100,F)),t}}},React.createElement(Stack,{direction:"row",className:numberRangeSliderClasses.inputContainer},React.createElement(FormLabelNumberField,{disabled:!r,id:`${$}-startInput`,inputProps:l,endAdornment:N,label:p.renderText("@common-start"),max:v,maxDecimalPlaces:U[0],min:A,onChange:e=>{void 0===e&&(e=A),P([e,M[1]])},startAdornment:x,value:M[0]}),React.createElement(Box,{className:numberRangeSliderClasses.toLabel}," ",p.renderText("@common-to")," "),React.createElement(FormLabelNumberField,{disabled:!r,endAdornment:N,id:`${$}-endInput`,inputProps:l,label:p.renderText("@common-end"),max:v,maxDecimalPlaces:U[1],min:A,onChange:e=>{void 0===e&&(e=v),P([M[0],e])},startAdornment:x,value:M[1]})))))};export default NumberRangeSlider;export{numberRangeSliderClasses};

package/forms/components/NumberSlider.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{inputBaseClasses}from"@vertigis/react-ui/InputBase";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import{styled}from"@vertigis/react-ui/styles";import{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import HostContext from"../hostContext.js";import{DEFAULT_CURRENCY,NumberDisplayFormat}from"../numberFormatter.js";import{areValuesEqual,countDecimalsInCustomFormat,getCurrencySymbolInfo,getMarks,getNumberConstraints,getNumberSliderValues,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle,useLocale}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberSlider",numberSliderClasses={container:`${PREFIX}-container`},StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${inputBaseClasses.root}`]:{marginTop:e(1)}}})),NumberSlider=({className:e,element:t,enabled:r,error:a,format:u,manualEntry:o,showMinMaxLabels:s,showTickMarks:m,name:n,raiseEvent:i,title:l,tooltip:c,value:p,setValue:d})=>{const b=useContext(HostContext),f=useLocale(),{currency:y,customDisplayFormat:C,decimals:N,displayFormat:g,endAdornment:F,isPercent:E,numberConstraints:x,startAdornment:S}=useMemo(()=>{var e,t,r=u,a=r?.currency||DEFAULT_CURRENCY,o=r?.displayFormat,s=o===NumberDisplayFormat.PERCENT,m=getNumberConstraints(r),n=r?.customDisplayFormat,r=o===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(n):r?.precision,r=sanitizePrecision(r,m.step);let i=null,l=null;return o===NumberDisplayFormat.CURRENCY||o===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(f,a))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?i=t:l=t):!s||(e=getPercentSymbolInfo(f))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?i=t:l=t),{currency:a,customDisplayFormat:n,decimals:r,displayFormat:o,endAdornment:l,isPercent:s,numberConstraints:m,startAdornment:i}},[u]),R=x["step"],v=x.maximum,D=x.minimum,[I,A]=useState(!1),[P,h]=useState(!1),[T,k]=useState(D),B=useRef(!0);var L=`${makeUniqueId(n)}-input`,M=!1!==s,U=!!m,s=!1!==o,m=E?N-2:N,m=Math.max(0,m);const V={currency:y,customDisplayFormat:C,format:g,fractionalDigits:m,locale:f},j=e=>({refValueType:"number",format:{currency:y,customDisplayFormat:C,displayFormat:g,lowerBound:D,precision:N,step:R,upperBound:v},display:b.formatNumber(e,V),numeric:e});useEffect(()=>{var e;B.current?B.current=!1:P?q(T):I||((e=getNumberSliderValues(T,x,!0)[0])!==T&&k(e),e=j(e),areValuesEqual(p,e)||d(e))},[I,P,T]),useEffect(()=>{var e=getNumberSliderValues(p,x,!0)[0],t=j(e);areValuesEqual(p,t)||d(t,!1),T!==e&&k(e)},[p]);const q=useMemo(()=>throttle(e=>{i("dragged",j(e))}),[]);o=useFocusCallback(r,n,b),m=b.renderText(c),c=!r&&!P,r=!r;return React.createElement(StyledFormElement,{className:e,element:t,inputId:L,name:n},React.createElement(Box,{className:numberSliderClasses.container},React.createElement(Slider,{disabled:c,getAriaLabel:()=>b.renderText(l),getAriaValueText:e=>b.formatNumber(e,V),marks:getMarks(v,D,R,V,M,U),max:v,min:D,onChange:(e,t)=>{h(!0);t=Array.isArray(t)?t[0]:t;k(t)},onChangeCommitted:()=>{h(!1)},slotProps:{input:{id:L,ref:o}},step:R,title:m,value:"number"==typeof T?T:0,valueLabelDisplay:"on",valueLabelFormat:(e,t)=>b.formatNumber(e,V)}),!1!=s&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{E&&(e*=100);var t={fractionalDigits:V.fractionalDigits,locale:V.locale};return b.formatNumber(e,t)},parseNumber:e=>{let t=b.coerceNumber(e);return E&&(t=preciseRound(t/100,N)),t}}},React.createElement(NumberInput,{correctOnBlur:!0,disabled:r,endAdornment:F,error:!!a,inputProps:{step:R,title:m},max:v,maxDecimalPlaces:N,min:D,onChange:e=>{void 0===e?k(D):k(e)},onFocus:()=>{A(!0)},onBlur:()=>{A(!1)},size:"small",startAdornment:S,value:T}))))};export default NumberSlider;export{numberSliderClasses};
+import Box from"@vertigis/react-ui/Box";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{inputBaseClasses}from"@vertigis/react-ui/InputBase";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import{styled}from"@vertigis/react-ui/styles";import{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import HostContext from"../hostContext.js";import{DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT,NumberDisplayFormat}from"../numberFormatter.js";import{areValuesEqual,getCurrencySymbolInfo,getMarks,getNumberConstraints,getNumberSliderValues,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle,useLocale}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberSlider",numberSliderClasses={container:`${PREFIX}-container`},StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${inputBaseClasses.root}`]:{marginTop:e(1)}}})),NumberSlider=({className:e,element:t,enabled:r,error:a,format:c,manualEntry:o,showMinMaxLabels:m,showTickMarks:s,name:n,raiseEvent:i,title:u,tooltip:l,value:p,setValue:d})=>{const b=useContext(HostContext),f=useLocale(),{currency:C,customDisplayFormat:F,decimals:y,displayFormat:N,endAdornment:g,isCustom:E,isPercent:S,numberConstraints:x,startAdornment:D}=useMemo(()=>{var e,t,r=c,a=r?.currency||DEFAULT_CURRENCY,o=r?.displayFormat,m=o===NumberDisplayFormat.CUSTOM,s=o===NumberDisplayFormat.PERCENT,n=getNumberConstraints(r),i=r?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,r=o===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(r?.precision,n.step);let u=null,l=null;return o===NumberDisplayFormat.CURRENCY||o===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(f,a))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?u=t:l=t):!s||(e=getPercentSymbolInfo(f))&&(t=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?u=t:l=t),{currency:a,customDisplayFormat:i,decimals:r,displayFormat:o,endAdornment:l,isCustom:m,isPercent:s,numberConstraints:n,startAdornment:u}},[c]),R=x["step"],v=x.maximum,A=x.minimum,[I,T]=useState(!1),[M,U]=useState(!1),[P,h]=useState(A);var L=useMemo(()=>N===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(F,P):-1,[P]);const k=useRef(!0);var B=`${makeUniqueId(n)}-input`,O=!1!==m,V=!!s,m=!1!==o,s=S?y-2:y,s=Math.max(0,s);const j={currency:C,customDisplayFormat:F,format:N,fractionalDigits:s,locale:f},_=e=>({refValueType:"number",format:{currency:C,customDisplayFormat:F,displayFormat:N,lowerBound:A,precision:y,step:R,upperBound:v},display:b.formatNumber(e,j),numeric:e});useEffect(()=>{var e;k.current?k.current=!1:M?q(P):I||((e=getNumberSliderValues(P,x,!0)[0])!==P&&h(e),e=_(e),areValuesEqual(p,e)||d(e))},[I,M,P]),useEffect(()=>{var e=getNumberSliderValues(p,x,!0)[0],t=_(e);areValuesEqual(p,t)||d(t,!1),P!==e&&h(e)},[p]);const q=useMemo(()=>throttle(e=>{i("dragged",_(e))}),[]);o=useFocusCallback(r,n,b),s=b.renderText(l),l=!r&&!M,r=!r,L=E?L:y;return React.createElement(StyledFormElement,{className:e,element:t,inputId:B,name:n},React.createElement(Box,{className:numberSliderClasses.container},React.createElement(Slider,{disabled:l,getAriaLabel:()=>b.renderText(u),getAriaValueText:e=>b.formatNumber(e,j),marks:getMarks(v,A,R,j,O,V),max:v,min:A,onChange:(e,t)=>{U(!0);t=Array.isArray(t)?t[0]:t;h(t)},onChangeCommitted:()=>{U(!1)},slotProps:{input:{id:B,ref:o}},step:R,title:s,value:"number"==typeof P?P:0,valueLabelDisplay:"on",valueLabelFormat:(e,t)=>b.formatNumber(e,j)}),!1!=m&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(E)return customFormatNumber(e,F,j.locale);S&&(e*=100);var t={fractionalDigits:j.fractionalDigits,locale:j.locale};return b.formatNumber(e,t)},parseNumber:e=>{if(E)return parseCustomFormattedNumber(e,F,j.locale);let t=b.coerceNumber(e);return S&&(t=preciseRound(t/100,y)),t}}},React.createElement(NumberInput,{correctOnBlur:!0,disabled:r,endAdornment:g,error:!!a,inputProps:{step:R,title:s},max:v,maxDecimalPlaces:L,min:A,onChange:e=>{void 0===e?h(A):h(e)},onFocus:()=>{T(!0)},onBlur:()=>{T(!1)},size:"small",startAdornment:D,value:P}))))};export default NumberSlider;export{numberSliderClasses};

package/forms/components/Scanner.js

@@ -1 +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,useContext}from"react";import*as React from"react";import{ScanType}from"../constants.js";import{scannerConfiguration}from"../elements/Scanner.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{isScanRef,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Scanner",scannerClasses={container:`${PREFIX}-container`,button:`${PREFIX}-button`,inputContainer:`${PREFIX}-inner`},StyledFormElement=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=({autoActivate:e,className:t,element:a,enabled:r,manualEntry:n,name:o,raiseEvent:c,require:s,scanType:i,setProperty:l,setValue:u,size:m,tooltip:d,value:p})=>{const E=useContext(HostContext),[f,S]=useState(!0),[C,y]=useState(null),[v,g]=useState(""),[F,R]=useState(!1),[T,B]=useState(scannerConfiguration.rows.default),M=useRef(null);var h=`${makeUniqueId(o)}-input`;const w="barcode"!==i;useEffect(()=>{let e=scannerConfiguration.rows.default;"number"==typeof m&&(e=Math.max(scannerConfiguration.rows.minimum,m)),B(e)},[m]),useEffect(()=>(R(!0),()=>R(!1)),[]),useEffect(()=>{F&&r&&e&&(l("autoActivate",!1),b())},[F]),useEffect(()=>{const e=()=>{S(!1),setTimeout(()=>{F&&S(!0)},CAMERA_READY_TIMEOUT_MS)};return C&&e(),()=>{C&&(C.reset(),e())}},[C]);var A=useFocusCallback(r,o,E);useEffect(()=>{let e=p;!isScanRef(e)&&e&&(e=convertToScanRef(e),u(e,!1));var t=e?.value||"";v!==t&&g(t)},[p]);var I=E.renderText(d),d=!r,n=d||!n;const _=(e,t,a)=>{e&&p?.value!==e&&(a=convertToScanRef(e,t,a),u(a),g(e))},D=async e=>{var t=await import("@zxing/library");let a;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(C)return y(null),void c("cancel",void 0);if(F){var e=await(async e=>{var t=await import("@zxing/library"),e=await D(e);const a=new Map;return a.set(t.DecodeHintType.POSSIBLE_FORMATS,e),a})(i);const t=await import("@zxing/library");e=new t.BrowserMultiFormatReader(e);y(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,M.current||void 0),n=await D(ScanType.QrCode);var a=n.indexOf(r.getBarcodeFormat())<0?ScanType.BarCode:ScanType.QrCode;_(r.toString(),EntryMethod.Camera,a),y(null)}catch(e){e instanceof DOMException&&(l("error",e.message),y(null))}})(e)}};return React.createElement(StyledFormElement,{className:t,element:a,inputId:h,name:o},React.createElement(Stack,{className:scannerClasses.container},React.createElement("video",{hidden:!C,ref:M}),React.createElement(Stack,{className:scannerClasses.inputContainer,direction:"row"},React.createElement(Input,{disabled:n,fullWidth:!0,id:h,inputProps:{title:I},inputRef:A,multiline:w,onBlur:e=>{0<e.currentTarget.value.length&&(y(null),_(e.currentTarget.value,EntryMethod.Manual))},onChange:e=>{g(e.currentTarget.value)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation(),w||(e=e.currentTarget,y(null),_(e.value,EntryMethod.Manual))},required:s,rows:w?T:void 0,spellCheck:!1,value:v}),React.createElement(Button,{className:scannerClasses.button,color:"primary",disabled:d||!f,onClick:b,ref:A,title:I},C?React.createElement(CloseIcon,null):i===ScanType.BarCode?React.createElement(ScanBarcode,null):i===ScanType.QrCode?React.createElement(ScanQr,null):React.createElement(ScanMulti,null)))))};export default Scanner;export{scannerClasses};
+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,useContext}from"react";import*as React from"react";import{ScanType}from"../constants.js";import{scannerConfiguration}from"../elements/Scanner.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{isScanRef,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Scanner",scannerClasses={container:`${PREFIX}-container`,button:`${PREFIX}-button`,inputContainer:`${PREFIX}-inner`},StyledFormElement=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,n)=>{var a=typeof e,a="number"==a||"string"==a?e.toString():e?.value?.toString();if(a)return t=t||e?.entryMethod||EntryMethod.Manual,{refValueType:"scan",value:a,scanType:n=n||e?.scanType,entryMethod:t}},Scanner=({autoActivate:e,className:t,element:n,enabled:a,manualEntry:r,name:o,raiseEvent:c,require:s,scanType:i,setProperty:l,setValue:u,size:m,tooltip:d,value:p})=>{const E=useContext(HostContext),[f,C]=useState(!0),[S,v]=useState(null),[y,g]=useState(""),[R,T]=useState(!1),[M,w]=useState(scannerConfiguration.rows.default),h=useRef(null);var A=`${makeUniqueId(o)}-input`;const I="barcode"!==i;useEffect(()=>{let e=scannerConfiguration.rows.default;"number"==typeof m&&(e=Math.max(scannerConfiguration.rows.minimum,m)),w(e)},[m]),useEffect(()=>(T(!0),()=>T(!1)),[]),useEffect(()=>{R&&a&&e&&(l("autoActivate",!1),x())},[R]),useEffect(()=>{S&&(C(!1),setTimeout(()=>{R&&C(!0)},CAMERA_READY_TIMEOUT_MS))},[S]);var _=useFocusCallback(a,o,E);useEffect(()=>{let e=p;!isScanRef(e)&&e&&(e=convertToScanRef(e),u(e,!1));var t=e?.value||"";y!==t&&g(t)},[p]);var D=E.renderText(d),d=!a,r=d||!r;const F=(e,t,n)=>{e&&p?.value!==e&&(n=convertToScanRef(e,t,n),u(n),g(e))},b=async e=>{var t=(await import("@zxing/browser"))["BarcodeFormat"];let n;return e===ScanType.QrCode?n=[t.AZTEC,t.DATA_MATRIX,t.MAXICODE,t.PDF_417,t.QR_CODE]:e===ScanType.BarCode&&(n=[t.CODABAR,t.CODE_39,t.CODE_93,t.CODE_128,t.EAN_8,t.EAN_13,t.ITF,t.RSS_14,t.RSS_EXPANDED,t.UPC_A,t.UPC_E,t.UPC_EAN_EXTENSION]),n},x=async()=>{if(S)return v(null),void c("cancel",void 0);const{BrowserCodeReader:o,BrowserMultiFormatReader:e}=await import("@zxing/browser");var t;R&&(t=await(async e=>{var t=(await import("@zxing/library"))["DecodeHintType"],e=await b(e);const n=new Map;return n.set(t.POSSIBLE_FORMATS,e),n})(i),t=new e(t),v(t),await(async e=>{try{var t=await o.listVideoInputDevices();if(!t||0==t.length)throw new DOMException("No video input devices detected.");const a=await e.decodeOnceFromVideoDevice(void 0,h.current||void 0),r=await b(ScanType.QrCode);var n=r.indexOf(a.getBarcodeFormat())<0?ScanType.BarCode:ScanType.QrCode;F(a.toString(),EntryMethod.Camera,n),v(null)}catch(e){e instanceof DOMException&&(l("error",e.message),v(null))}})(t))};return React.createElement(StyledFormElement,{className:t,element:n,inputId:A,name:o},React.createElement(Stack,{className:scannerClasses.container},React.createElement("video",{hidden:!S,ref:h}),React.createElement(Stack,{className:scannerClasses.inputContainer,direction:"row"},React.createElement(Input,{disabled:r,fullWidth:!0,id:A,inputProps:{title:D},inputRef:_,multiline:I,onBlur:e=>{0<e.currentTarget.value.length&&(v(null),F(e.currentTarget.value,EntryMethod.Manual))},onChange:e=>{g(e.currentTarget.value)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation(),I||(e=e.currentTarget,v(null),F(e.value,EntryMethod.Manual))},required:s,rows:I?M:void 0,spellCheck:!1,value:y}),React.createElement(Button,{className:scannerClasses.button,color:"primary",disabled:d||!f,onClick:x,ref:_,title:D},S?React.createElement(CloseIcon,null):i===ScanType.BarCode?React.createElement(ScanBarcode,null):i===ScanType.QrCode?React.createElement(ScanQr,null):React.createElement(ScanMulti,null)))))};export default Scanner;export{scannerClasses};

package/forms/components/SignatureDialog.d.ts

@@ -7,7 +7,7 @@ export declare const signatureDialogClasses: {
     mark: string;
     titleText: string;
 };
-export interface StyledDialogProps {
+interface StyledDialogProps {
     cancelCaption: string;
     clearCaption: string;
     doneCaption: string;

package/forms/components/SketchDialog.d.ts

@@ -12,7 +12,7 @@ export type HistoryItem = DrawingHistoryItem | ImageHistoryItem;
 /**
  * A history item for the end user drawing a line on the dialog.
  */
-export type DrawingHistoryItem = {
+type DrawingHistoryItem = {
     /** The tool used to draw the line. This determines which canvas the line is drawn onto. */
     tool: ToolType;
     /** The style for the ends of the line. */
@@ -40,7 +40,7 @@ export interface SketchDialogResult {
     width: number;
     height: number;
 }
-export interface StyledDialogProps {
+interface StyledDialogProps {
     dataUrl: string | undefined;
     height: number | undefined;
     history: HistoryItem[];

package/forms/components/TimePicker.js

@@ -1 +1 @@
-import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{clockClasses}from"@vertigis/react-ui/TimeClock";import BaseTimePicker from"@vertigis/react-ui/TimePicker";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StylableTimePicker=e=>{let{className:t,slotProps:r,...o}=e;return r=r||{},React.createElement(BaseTimePicker,{slotProps:{...r,popper:{...r.popper,className:t}},...o})},StyledTimePicker=styled(StylableTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),TimePicker=({className:e,element:t,enabled:r,error:o,format:a,name:s,prompt:i,setProperty:l,setValue:m,tooltip:n,value:u})=>{const c=useContext(HostContext),[p,d]=useState(!1),[f,T]=useState(!1),[k,E]=useState(!1),[x,v]=useState(null),C=useRef();const F={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},P=useRef(!0),g=useFocusCallback(r,s,c),B=c.renderText(n),R=Calendar.useNative(),S="time",V=isInvalidError(o);useEffect(()=>{var e=makeProperValue(u,R),t=getNewElementValue(e,S,F,R);areValuesEqual(u,t)||m(t,!1),v(e||null)},[u]),useEffect(()=>{if(!k&&!f)if(p)V||l("error",{status:"invalid"});else{if(V&&l("error",void 0),P.current)return void(P.current=!1);var e=getNewElementValue(x,S,F,R);areValuesEqual(u,e)||m(e)}P.current=!1},[p,f,k]);const{min:b,max:y}=getDateBounds(a),j=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),N=c.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:j,name:s},e=>React.createElement(React.Fragment,null,V&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},C.current),React.createElement(StyledTimePicker,{disabled:!r,inputRef:e=>{e&&(C.current=e.dataset.formatString,g(e))},key:"date-picker",maxTime:y,minTime:b,onChange:e=>v(e),onClose:()=>E(!1),onError:()=>d(!0),onOpen:()=>E(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!o,id:j,inputProps:{...e,placeholder:N},onBlur:()=>T(!1),onFocus:()=>T(!0),title:B}},value:x})))};export default TimePicker;
+import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{clockClasses}from"@vertigis/react-ui/TimeClock";import BaseTimePicker from"@vertigis/react-ui/TimePicker";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StylableTimePicker=e=>{let{className:t,slotProps:r,...o}=e;return r=r||{},React.createElement(BaseTimePicker,{slotProps:{...r,popper:{...r.popper,className:t}},...o})},StyledTimePicker=styled(StylableTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),TimePicker=({className:e,element:t,enabled:r,error:o,format:a,name:s,prompt:i,setProperty:l,setValue:m,tooltip:n,value:u})=>{const c=useContext(HostContext),[p,d]=useState(!1),[f,T]=useState(!1),[k,E]=useState(!1),[x,v]=useState(null),C=useRef();const F={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},P=useRef(!0),g=useFocusCallback(r,s,c),B=c.renderText(n),R=Calendar.useNative(),S="time",V=isInvalidError(o);useEffect(()=>{var e=makeProperValue(u,R),t=getNewElementValue(e,S,F,R);areValuesEqual(u,t)||m(t,!1),v(e||null)},[u]),useEffect(()=>{if(!k&&!f)if(p)V||l("error",{status:"invalid"});else{if(V&&l("error",void 0),P.current)return void(P.current=!1);var e=getNewElementValue(x,S,F,R);areValuesEqual(u,e)||m(e)}P.current=!1},[p,f,k]);const{min:b,max:y}=getDateBounds(a),j=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),N=c.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:j,name:s},e=>React.createElement(React.Fragment,null,V&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},C.current),React.createElement(StyledTimePicker,{disabled:!r,inputRef:e=>{e&&(C.current=e.dataset.formatString,g(e))},key:"date-picker",maxTime:y,minTime:b,onChange:e=>v(e),onClose:()=>E(!1),onError:e=>d(!!e),onOpen:()=>E(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!o,id:j,inputProps:{...e,placeholder:N},onBlur:()=>T(!1),onFocus:()=>T(!0),title:B}},value:x})))};export default TimePicker;

package/forms/components/common.d.ts

@@ -2,7 +2,6 @@ import * as React from "react";
 import type { defs } from "../FormHost";
 import type { FormHostMembers } from "../hostContext";
 import type { ElementType } from "react";
-export type TranslateTextFunction = (content: defs.Text | undefined) => string | defs.MarkdownRef | undefined;
 /**
  * Renders the title for a Form Element.
  * @param elementId The id of the DOM element representing the Form Element.

package/forms/customNumberFormat.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Similar to a `NumberFormatPart` returned from NumberFormat.formatToParts, this represents and individual part
+ * of a custom number format string.
+ */
+interface CustomNumberFormatPart {
+    /** True if the placeholder is required, false or undefined otherwise. This is used to distinguish between `0` and `#` characters. */
+    required?: boolean;
+    type: "decimal" | "exponentInteger" | "exponentMinusSign" | "exponentPlusSign" | "exponentSeparator" | "fraction" | "group" | "integer" | "literal" | "minusSign" | "percentSign" | "permilleSign";
+    value: string;
+}
+/**
+ * Counts the number of decimal places in the specified custom format string and returns the result.
+ * The supplied value is treated as one of Microsoft's [Custom numeric format strings](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-numeric-format-strings)
+ *
+ * There are lots of unusual ways you can combine the supported characters, but for simplicity, we support the most common use case
+ * which is using `#` and `0` as placeholders.
+ *
+ * In cases where the `;` section separator is used, the number of decimals in the format may vary depending on the current value being negative, positive or zero.
+ *
+ * @param customFormat The custom format to be inspected.
+ * @param value The number being formatted.
+ * @returns The number of decimal places in the section of `customFormat` used for the specified value.
+ */
+export declare function countDecimalsInCustomFormat(customFormat: string | undefined, value: number | undefined): number | undefined;
+/**
+ * Inspects the supplied {@link customFormat} to determine which features of custom formatting are defined within.
+ * @param customFormat The custom format string to be inspected.
+ * @returns Details of the various features of custom formatting that are enabled.
+ */
+export declare function inspectCustomFormat(customFormat: string): {
+    /** The value to multiply the actual value by before presenting it. For example, percentages are multiplied by 100. */
+    multiplier: number;
+    /** All of the individual parts of the custom format string that will be visible. Group characters are added after the placeholders are populated. */
+    parts: CustomNumberFormatPart[];
+    /** True if the formatted value should include grouping characters between sets of integer digits. */
+    useGrouping: boolean;
+};
+/**
+ * Formats a number using the specified custom numeric format string.
+ *
+ * This follows the behaviour of Microsoft's .NET custom format strings as described here:
+ *
+ * https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-numeric-format-strings
+ *
+ * At this time, it does not yet support the `"\"` escape character or the `";"` section separator.
+ *
+ * @param value The numerical value to be formatted using a custom format.
+ * @param customFormat The custom format string describing how to format the value.
+ * @param locale The locale to be used to format the value.
+ * @returns A string representation of the value, formatted based on the {@link customFormat}.
+ */
+export declare function customFormatNumber(value: number, customFormat: string, locale?: string): string;
+/**
+ * Inspects a value that was formatted using a custom numeric format string and split it into parts.
+ * This allows for inspection of the parts before ultimately combining them and converting the result
+ * to a number.
+ * @param formattedNumber A string representation of a value that was previously formatted using the {@link customFormat}.
+ * @param locale The locale that was used to format the value.
+ * @returns The previously formatted string broken into parts.
+ */
+export declare function parseCustomFormattedNumberToParts(formattedNumber: string, locale?: string): Intl.NumberFormatPart[];
+/**
+ * Parses a value that was formatted using the specified custom numeric format string.
+ * @param formattedNumber A string representation of a value that was previously formatted using the {@link customFormat}.
+ * @param customFormat The custom format string describing how the value was formatted.
+ * @param locale The locale that was used to format the value.
+ * @returns The numeric value represented by the previously formatted string.
+ */
+export declare function parseCustomFormattedNumber(formattedNumber: string, customFormat: string, locale?: string): number;
+export {};

package/forms/customNumberFormat.js

@@ -0,0 +1 @@
+import{DEFAULT_LOCALE}from"../constants.js";import{getPercentSymbolInfo,preciseRound}from"./numberUtilities.js";const CustomSpecifiers={Comma:",",DecimalPoint:".",Hash:"#",Percent:"%",Permille:"‰",Semicolon:";",Zero:"0"};function countDecimalsInCustomFormat(e,t){if(!e)return 0;const r=inspectCustomFormat(e=chooseCustomFormatSection(e.split(CustomSpecifiers.Semicolon),t))["parts"];return r.some(e=>"exponentSeparator"===e.type)?void 0:r.some(e=>"decimal"===e.type)?r.filter(e=>"fraction"===e.type).length+2*r.filter(e=>"percentSign"===e.type).length+3*r.filter(e=>"permilleSign"===e.type).length:0}function inspectCustomFormat(e){const t=[];let r=!1,n=!1,i=!1,a=!1;const o=/,|0|#|%|‰|[Ee]|[+-]|\.|\\.|(["'])[^\1]+\1|[^,0#%‰Ee+-\.\\"'+]+/g;for(var l;null!==(l=o.exec(e));){const g=l[0];switch(g){case CustomSpecifiers.Comma:!a||r||n||t.push({type:"group",value:CustomSpecifiers.Comma});break;case CustomSpecifiers.DecimalPoint:r||(t.push({type:"decimal",value:CustomSpecifiers.DecimalPoint}),r=!0);break;case CustomSpecifiers.Hash:n?t.push({type:"exponentInteger",value:CustomSpecifiers.Hash}):r?t.push({type:"fraction",value:CustomSpecifiers.Hash}):(t.push({type:"integer",value:CustomSpecifiers.Hash}),a=!0);break;case CustomSpecifiers.Percent:t.push({type:"percentSign",value:CustomSpecifiers.Percent});break;case CustomSpecifiers.Permille:t.push({type:"permilleSign",value:CustomSpecifiers.Permille});break;case CustomSpecifiers.Zero:n?t.push({type:"exponentInteger",value:CustomSpecifiers.Zero}):r?t.push({required:!0,type:"fraction",value:CustomSpecifiers.Zero}):(t.push({required:!0,type:"integer",value:CustomSpecifiers.Zero}),a=!0);break;case"E":case"e":n?t.push({type:"literal",value:g}):(t.push({type:"exponentSeparator",value:g}),n=!0);break;case"+":n&&!i?(t.push({type:"exponentPlusSign",value:g}),i=!0):t.push({type:"literal",value:g});break;case"-":n&&!i?(t.push({type:"exponentMinusSign",value:g}),i=!0):t.push({type:"literal",value:g});break;default:g.startsWith("\\")?t.push({type:"literal",value:g[1]}):g.startsWith('"')||g.startsWith("'")?t.push({type:"literal",value:g.substring(1,g.length-1)}):t.push({type:"literal",value:g})}}let u=1;var p=t.findLastIndex(e=>"integer"===e.type);if(-1!==p)for(var s=p+1;"group"===t[s]?.type;)u/=1e3,t.splice(s,1);p=t.some(e=>"group"===e.type);let m=t.findIndex(e=>"group"===e.type);for(;-1!==m;)t.splice(m,1),m=t.findIndex(e=>"group"===e.type);var c=t.filter(e=>"percentSign"===e.type).length;for(let e=0;e<c;e++)u*=100;var f=t.filter(e=>"permilleSign"===e.type).length;for(let e=0;e<f;e++)u*=1e3;return{multiplier:u,parts:t,useGrouping:p}}function chooseCustomFormatSection(e,t){var[r,n,i]=e;if(void 0===t)return r;switch(e.length){case 3:if(0===t)return i;case 2:if(t<0&&n)return n;default:return r}}function customFormatNumber(t,e,r=DEFAULT_LOCALE){if(!e){const b=new Intl.NumberFormat(r);return b.format(t)}var n=e.split(CustomSpecifiers.Semicolon),i=(e=chooseCustomFormatSection(n,t))===n[0]&&t<0;const{multiplier:a,parts:o,useGrouping:l}=inspectCustomFormat(e),u={minimumFractionDigits:0,maximumFractionDigits:0};t*=a;var p=o.filter(e=>"fraction"===e.type&&!e.required).length,s=o.filter(e=>"fraction"===e.type&&e.required).length,n=s+p+2*o.filter(e=>"percentSign"===e.type).length+3*o.filter(e=>"permilleSign"===e.type).length;let m=[];var c=t=>{for(let e=t.length-1;0<=e;e--)if(""===t[e].value||0===e)return t[e]};if(o.some(e=>"exponentSeparator"===e.type)){const E=o.filter(e=>"integer"===e.type);var f,e=E.findIndex(e=>"integer"===e.type&&e.required),p=E.findIndex(e=>"integer"===e.type&&!e.required),e=-1===e?0:E.length-e,g=-1===p?e:Math.max(e,E.length-p);if(g<=1)m=new Intl.NumberFormat(r,{maximumFractionDigits:n,minimumFractionDigits:s,notation:"scientific",useGrouping:!1}).formatToParts(t);else{const _=new Intl.NumberFormat(r,{maximumFractionDigits:20,minimumFractionDigits:1,minimumIntegerDigits:1,useGrouping:!1});m=_.formatToParts(t);const T=m.find(e=>"integer"===e.type),P=m.find(e=>"fraction"===e.type);let e=0;for(;T.value.length>g;){var v=T.value[T.value.length-1];P.value=v+P.value,T.value=T.value.substring(0,T.value.length-1),e++}for(;"0"===T.value||T.value.length<g;)0===P.value.length?T.value=T.value.padStart(g,"0"):(f=P.value[0],"0"===T.value?T.value=f:T.value+=f,P.value=P.value.substring(1),e--);var y=preciseRound(parseFloat(m.map(e=>e.value).join("")),n);m=_.formatToParts(y),m.push({type:"exponentSeparator",value:"E"}),e<0&&m.push({type:"exponentMinusSign",value:"-"}),m.push({type:"exponentInteger",value:Math.abs(e).toString()})}const R=o.find(e=>"exponentMinusSign"===e.type||"exponentPlusSign"===e.type);p="+"===R?.value?"always":"negativeOnly",y=m.some(e=>"exponentMinusSign"===e.type);"always"==p&&y?R.value="-":"negativeOnly"==p&&(y?R||(y=o.findIndex(e=>"exponentSeparator"===e.type)+1,o.splice(y,0,{type:"exponentMinusSign",value:"-"})):R&&(R.value="")),o.filter(e=>"exponentInteger"===e.type).forEach(e=>e.value="");var h=m.find(e=>"exponentInteger"===e.type)?.value.split("")||[],C=o.filter(e=>"exponentInteger"===e.type);for(let e=h.length-1;0<=e;e--){const L=c(C);if(!L)break;L.value=h[e]+L.value}o.filter(e=>"exponentInteger"===e.type&&""===e.value).forEach(e=>e.value="0")}else{(0<s||0<n)&&(u.minimumFractionDigits=s,u.maximumFractionDigits=n);const D=new Intl.NumberFormat(r,u);m=D.formatToParts(t)}o.filter(e=>"integer"===e.type||"fraction"===e.type).forEach(e=>e.value="");var S=m.filter(e=>"integer"===e.type).map(e=>e.value.split("")).flat();if(1<S.length||"0"!==S[0]){var I=o.filter(e=>"integer"===e.type);for(let e=S.length-1;0<=e;e--){const H=c(I);if(!H)break;H.value=S[e]+H.value}}var d=m.filter(e=>"fraction"===e.type).map(e=>e.value.split("")).flat();const A=o.filter(e=>"fraction"===e.type);for(let e=0;e<d.length;e++){const M=(()=>{for(let e=0;e<A.length;e++)if(""===A[e].value)return A[e]})();if(!M)break;M.value=d[e]}if(o.filter(e=>e.required&&""===e.value).forEach(e=>e.value="0"),l){for(let t=0;t<o.length;t++){const V=o[t];if("integer"===V.type&&1<V.value.length){var N=V.type,x=V.value.split("");o[t]={type:N,value:x[0]};for(let e=1;e<x.length;e++)o.splice(t+e,0,{type:N,value:x[e]})}}let e=o.findLastIndex(e=>"integer"===e.type);for(;1<=e;){var F=e-2;if("integer"!==o[F-1]?.type)break;o.splice(F,0,{type:"group",value:","}),e=F-1}}if(r!==DEFAULT_LOCALE){const{decimalChar:k,groupChar:w}=getNumberFormatChars(r);k!==INVARIANT_DECIMAL_CHAR&&o.filter(e=>"decimal"===e.type).forEach(e=>e.value=k),w!==INVARIANT_GROUP_CHAR&&o.filter(e=>"group"===e.type).forEach(e=>e.value=w);const O=getPercentSymbolInfo(r)?.symbol||INVARIANT_PERCENT_CHAR;O!==INVARIANT_PERCENT_CHAR&&o.filter(e=>"percentSign"===e.type).forEach(e=>e.value=O)}return!i||-1!==(i=o.findIndex(e=>"integer"===e.type))&&o.splice(i,0,{type:"minusSign",value:"-"}),o.map(e=>e.value).join("")}const INVARIANT_DECIMAL_CHAR=".",INVARIANT_GROUP_CHAR=",",INVARIANT_LOCALE="en-US",INVARIANT_MINUS_SIGN="-",INVARIANT_PERCENT_CHAR="%";function getNumberFormatChars(e){let t=INVARIANT_DECIMAL_CHAR,r=INVARIANT_GROUP_CHAR;const n=new Intl.NumberFormat(e),i=n.formatToParts(1234.5);e=i.find(e=>"group"===e.type);e&&(r=e.value);e=i.find(e=>"decimal"===e.type);return e&&(t=e.value),{groupChar:r,decimalChar:t}}function parseCustomFormattedNumberToParts(e,t=DEFAULT_LOCALE){var{groupChar:r,decimalChar:n}=getNumberFormatChars(t),t=getPercentSymbolInfo(t)?.symbol||INVARIANT_PERCENT_CHAR;const i=[];let a={},o;const l=[n,r,t];var u=e=>{i.push(e),a[e.type]=!0},p={exponentInteger:!0,fraction:!0,integer:!0};for(const m of e){let e=o?.type||"unknown";var s=/[0-9\u0660-\u0669\u06f0-\u06f9]/.test(m);l.includes(m)?(e=m===n?"decimal":m===r?"group":"percentSign",o={type:e,value:m},u(o)):"‰"!==m?"e"!==m.toLowerCase()?"-"!==m.toLocaleLowerCase()?s?o?e in p?o.value+=m:(e=a.decimal?a.fraction?"exponentInteger":"fraction":"integer",o={type:e,value:m},u(o)):(o={type:"integer",value:m},u(o)):"literal"==o?.type?o.value+=m:(o={type:"literal",value:m},u(o)):(e=a.integer||a.decimal?a.exponentSeparator?"exponentMinusSign":"literal":"minusSign",o={type:e,value:m},u(o)):(o={type:"exponentSeparator",value:m},u(o)):(u({type:"literal",value:m}),o=void 0)}return i}function parseCustomFormattedNumber(e,t,r=DEFAULT_LOCALE){let n=parseCustomFormattedNumberToParts(e,r);const i=t.split(CustomSpecifiers.Semicolon),a=i.map(e=>inspectCustomFormat(e));var o=a.map(e=>e.parts.filter(e=>"percentSign"===e.type).length),l=a.map(e=>e.parts.filter(e=>"permilleSign"===e.type).length);const u=["group","literal","percentSign"];n=n.filter(e=>!u.includes(e.type)),r!=INVARIANT_LOCALE&&(n.filter(e=>"decimal"===e.type).forEach(e=>e.value=INVARIANT_DECIMAL_CHAR),n.filter(e=>"minusSign"===e.type||"exponentMinusSign"===e.type).forEach(e=>e.value=INVARIANT_MINUS_SIGN),n.filter(e=>"integer"===e.type||"fraction"===e.type||"exponentInteger"===e.type).forEach(e=>e.value=e.value.replaceAll(/[\u0660-\u0669\u06f0-\u06f9]/g,e=>(15&e.charCodeAt(0)).toString())));t=n.map(e=>e.value).join("");let p=parseFloat(t);if(0===p)return p;let s=n.filter(e=>"fraction"===e.type).map(e=>e.value).join("").length;!n.some(e=>"exponentMinusSign"===e.type)||(m=n.find(e=>"exponentInteger"===e.type))&&(c=parseInt(m.value),s+=c);var m=i[1];if(m){const f=a[1]["multiplier"];var c=p;c/=f;const g=s+2*o[1]+3*l[1];if(customFormatNumber(c=preciseRound(p,g),m,r)===e)return c<0?c:-c}const f=a[0]["multiplier"];p/=f;const g=s+2*o[0]+3*l[0];return p=preciseRound(p,g),p}export{countDecimalsInCustomFormat,inspectCustomFormat,customFormatNumber,parseCustomFormattedNumberToParts,parseCustomFormattedNumber};

package/forms/dateUtilities.d.ts

@@ -1,9 +1,8 @@
 import { Calendar } from "./Calendar";
 import type { DateRangeRef, DateTimeFormat, DateTimeRef, DateTimeType, FormatRef } from "./FormDefinition";
 import type { defs } from "./FormHost";
-import type { FormPresenterHost } from "./FormPresenterHost";
+import type { PickersLocaleText } from "@mui/x-date-pickers";
 import type { Locale } from "date-fns";
-export declare const SUPPORTED_DATE_FNS_LOCALES: string[];
 /**
  * Checks if a form element's value is equal to the supplied value.
  * @param elementValue The current value of a Form Element.
@@ -64,6 +63,7 @@ export declare function getDateBounds(format: FormatRef | undefined): {
  * @param language The target language to retrieve the locale for.
  */
 export declare function getDateFnsLocale(language: string): Promise<Locale | undefined>;
+export declare function getLocaleText(language: string): Promise<Partial<PickersLocaleText<any>> | undefined>;
 /**
  * Gets the date format based on the current browser locale. This function will always return four digit year tokens
  * and two digit month and day tokens. The browser locale however, will determine their placement and the separator.
@@ -99,15 +99,15 @@ export declare function convertToDateRangeRef(value: DateRangeLike): DateRangeRe
  * @param dateFormat The date format to set in cache.
  */
 export declare function __test__setlocaleDateFormatInCache(dateFormat: string): void;
-export declare function getLocale(host: FormPresenterHost): Promise<Locale | undefined>;
-type Partial = void | boolean | number | string | {
+export declare function getLocale(language: string): Promise<Locale | undefined>;
+type PartialValue = void | boolean | number | string | {
     [name: string]: any;
-    format?: Partial | void;
+    format?: PartialValue | void;
     locale?: string;
     timezone?: string;
     refValueType?: string;
     value?: number;
 };
-export declare function makeProperValue(value: number | string | Partial, calendar: Calendar): Date | undefined;
+export declare function makeProperValue(value: number | string | PartialValue, calendar: Calendar): Date | undefined;
 export declare function getNewElementValue(date: Date | undefined | null, refValueType: DateTimeType, format: DateTimeFormat, calendar: Calendar): DateTimeRef | undefined;
 export {};

package/forms/dateUtilities.js

@@ -1 +1 @@
-import{parse,isAfter}from"date-fns";import{parseLocale}from"../definition/ProgramInspector.js";import{Calendar}from"./Calendar.js";import{isDateRangeRef,isDateTimeRef}from"./utils.js";const CURRENT_CENTURY_YEAR_CUTOFF=29,SUPPORTED_DATE_FNS_LOCALES=["cs","da","de","de-AT","en-AU","en-CA","en-GB","en-IN","en-NZ","en-US","en-ZA","fr","fr-CA","fr-CH","it","nb","nl","nl-BE","nn","pt","pt-BR"];let localeDateFormat="",dateFormatSeparator;function areValuesEqual(e,a){return void 0===e&&void 0===a||null===e&&null===a||(isDateTimeRef(e)&&a&&isDateTimeRef(a)?e.display===a.display&&e.refValueType===a.refValueType&&e.value===a.value&&areFormatsEqual(e.format,a.format):!!(isDateRangeRef(e)&&a&&isDateRangeRef(a))&&(e.endDate?.valueOf()===a.endDate?.valueOf()&&e.refValueType===a.refValueType&&e.startDate?.valueOf()===a.startDate?.valueOf()))}function areFormatsEqual(e,a){return void 0===e&&void 0===a||("string"==typeof e&&"string"==typeof a?e===a:"object"==typeof e&&"object"==typeof a&&(null===e||null===a?e===a:e.locale===a.locale&&e.timezone===a.timezone))}function isValidDate(e){return e instanceof Date&&!isNaN(e.valueOf())}function tryParseYear(e){if(/^\d+$/.test(e)&&!(4<e.length)){for(2===e.length&&(e=`${CURRENT_CENTURY_YEAR_CUTOFF>=parseInt(e,10)?20:19}${e}`);e.length<4;)e=`0${e}`;return e}}function tryParseMonth(e){if(/^\d+$/.test(e)&&!(2<e.length)){1===e.length&&(e=`0${e}`);var a=parseInt(e,10);if(!(a<1||12<a))return e}}function tryParseDay(e){if(/^\d+$/.test(e)&&!(2<e.length)){1===e.length&&(e=`0${e}`);var a=parseInt(e,10);if(!(a<1||31<a))return e}}function tryParseDateText(e){if(e){const r=(e=e.replace(/\\/g,"\\\\")).match(/(\d+)/g);if(3===r?.length){var e=getLocaleDateFormatSeparator(),a=getLocaleDateFormatTokenPosition("yyyy"),t=getLocaleDateFormatTokenPosition("MM");for(let e=0;e<3;e++){switch(e){case a:r[e]=tryParseYear(r[e]);break;case t:r[e]=tryParseMonth(r[e]);break;default:r[e]=tryParseDay(r[e])}if(void 0===r[e])return}return`${r[0]}${e}${r[1]}${e}${r[2]}`}}}function getDateBounds(e){var{lowerBound:a,upperBound:e}=e||{};return{min:"number"==typeof a?new Date(a):void 0,max:"number"==typeof e?new Date(e):void 0}}async function getDateFnsLocale(e){const a=[];e=parseLocale(e);if(e){e.territory&&a.push(`${e.language}-${e.territory}`),a.push(e.language);for(const t of a)if(-1!==SUPPORTED_DATE_FNS_LOCALES.indexOf(t)){let e;try{switch(t){case"cs":e=(await import("date-fns/locale/cs")).cs;break;case"da":e=(await import("date-fns/locale/da")).da;break;case"de":e=(await import("date-fns/locale/de")).de;break;case"de-AT":e=(await import("date-fns/locale/de-AT")).deAT;break;case"en-AU":e=(await import("date-fns/locale/en-AU")).enAU;break;case"en-CA":e=(await import("date-fns/locale/en-CA")).enCA;break;case"en-GB":e=(await import("date-fns/locale/en-GB")).enGB;break;case"en-IN":e=(await import("date-fns/locale/en-IN")).enIN;break;case"en-NZ":e=(await import("date-fns/locale/en-NZ")).enNZ;break;case"en-US":e=(await import("date-fns/locale/en-US")).enUS;break;case"en-ZA":e=(await import("date-fns/locale/en-ZA")).enZA;break;case"fr":e=(await import("date-fns/locale/fr")).fr;break;case"fr-CA":e=(await import("date-fns/locale/fr-CA")).frCA;break;case"fr-CH":e=(await import("date-fns/locale/fr-CH")).frCH;break;case"it":e=(await import("date-fns/locale/it")).it;break;case"nb":e=(await import("date-fns/locale/nb")).nb;break;case"nl":e=(await import("date-fns/locale/nl")).nl;break;case"nl-BE":e=(await import("date-fns/locale/nl-BE")).nlBE;break;case"nn":e=(await import("date-fns/locale/nn")).nn;break;case"pt":e=(await import("date-fns/locale/pt")).pt;break;case"pt-BR":e=(await import("date-fns/locale/pt-BR")).ptBR}}catch{continue}if(e?.localize)return e}}}function getLocaleDateFormat(){if(localeDateFormat)return localeDateFormat;const e=new Date(1999,11,31,0,0,0);return localeDateFormat=e.toLocaleDateString(void 0,{year:"numeric",month:"numeric",day:"numeric"}),localeDateFormat=localeDateFormat.replace("1999","yyyy"),localeDateFormat=localeDateFormat.replace("99","yyyy"),localeDateFormat=localeDateFormat.replace("12","MM"),localeDateFormat=localeDateFormat.replace("31","dd"),localeDateFormat}function getLocaleDateFormatSeparator(){var e;return void 0===dateFormatSeparator&&(e=/[^dMy]+/.exec(getLocaleDateFormat()),dateFormatSeparator=e?e[0]:""),dateFormatSeparator}function getLocaleDateFormatTokenPosition(e){const a=getLocaleDateFormat();var t=a.indexOf("yyyy"),r=a.indexOf("MM"),o=a.indexOf("dd");return"yyyy"===e?0===t?0:r<t&&o<t?2:1:"MM"===e?0===r?0:o<r&&t<r?2:1:0===o?0:r<o&&t<o?2:1}const coerceIntoDate=e=>{if(e instanceof Date&&isValidDate(e))return new Date(e.valueOf());if("string"==typeof e)if(/^\d+$/.test(e))e=Number(e);else{var a=tryParseDateText(e);if(a){var t=getLocaleDateFormat(),t=parse(a,t,0);if(isValidDate(t))return t}}if("number"==typeof e){e=new Date(e);if(isValidDate(e))return e}};function convertToDateRangeRef(e){let a,t,r=!1;Array.isArray(e)?(a=coerceIntoDate(e[0]),t=coerceIntoDate(e[1]),r=!0):"object"==typeof e&&(a=coerceIntoDate(e.startDate),t=coerceIntoDate(e.endDate));var o=!!a&&!!t;let n=o&&!isAfter(a,t);return r&&o&&!n&&(e=a,a=t,t=e,n=!0),o&&n?{refValueType:"daterange",startDate:a,endDate:t}:void 0}function __test__setlocaleDateFormatInCache(e){localeDateFormat=e,dateFormatSeparator=void 0}async function getLocale(e){return getDateFnsLocale(e.deriveLocale())}function makeProperValue(e,a){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 t=a.coerceIntoValue(e);if(void 0!==t&&null!==t&&isFinite(t.valueOf()))return t}}function getNewElementValue(e,a,t,r){if(null!=e&&isFinite(e.valueOf()))return{refValueType:a,format:t,display:r.format(e,Calendar.fullFormat),value:e.valueOf()}}export{SUPPORTED_DATE_FNS_LOCALES,areValuesEqual,isValidDate,tryParseYear,tryParseMonth,tryParseDay,tryParseDateText,getDateBounds,getDateFnsLocale,getLocaleDateFormat,getLocaleDateFormatSeparator,getLocaleDateFormatTokenPosition,convertToDateRangeRef,__test__setlocaleDateFormatInCache,getLocale,makeProperValue,getNewElementValue};
+import{parse,isAfter}from"date-fns";import{DEFAULT_LOCALE}from"../constants.js";import{parseLocale}from"../definition/ProgramInspector.js";import{Calendar}from"./Calendar.js";import{isDateRangeRef,isDateTimeRef}from"./utils.js";const CURRENT_CENTURY_YEAR_CUTOFF=29,SUPPORTED_DATE_FNS_LOCALES=["cs","da","de","de-AT","en-AU","en-CA","en-GB","en-IN","en-NZ","en-US","en-ZA","fr","fr-CA","fr-CH","it","nb","nl","nl-BE","nn","pt","pt-BR"];let localeDateFormat="",dateFormatSeparator;function areValuesEqual(e,a){return void 0===e&&void 0===a||null===e&&null===a||(isDateTimeRef(e)&&a&&isDateTimeRef(a)?e.display===a.display&&e.refValueType===a.refValueType&&e.value===a.value&&areFormatsEqual(e.format,a.format):!!(isDateRangeRef(e)&&a&&isDateRangeRef(a))&&(e.endDate?.valueOf()===a.endDate?.valueOf()&&e.refValueType===a.refValueType&&e.startDate?.valueOf()===a.startDate?.valueOf()))}function areFormatsEqual(e,a){return void 0===e&&void 0===a||("string"==typeof e&&"string"==typeof a?e===a:"object"==typeof e&&"object"==typeof a&&(null===e||null===a?e===a:e.locale===a.locale&&e.timezone===a.timezone))}function isValidDate(e){return e instanceof Date&&!isNaN(e.valueOf())}function tryParseYear(e){if(/^\d+$/.test(e)&&!(4<e.length)){for(2===e.length&&(e=`${CURRENT_CENTURY_YEAR_CUTOFF>=parseInt(e,10)?20:19}${e}`);e.length<4;)e=`0${e}`;return e}}function tryParseMonth(e){if(/^\d+$/.test(e)&&!(2<e.length)){1===e.length&&(e=`0${e}`);var a=parseInt(e,10);if(!(a<1||12<a))return e}}function tryParseDay(e){if(/^\d+$/.test(e)&&!(2<e.length)){1===e.length&&(e=`0${e}`);var a=parseInt(e,10);if(!(a<1||31<a))return e}}function tryParseDateText(e){if(e){const r=(e=e.replace(/\\/g,"\\\\")).match(/(\d+)/g);if(3===r?.length){var e=getLocaleDateFormatSeparator(),a=getLocaleDateFormatTokenPosition("yyyy"),t=getLocaleDateFormatTokenPosition("MM");for(let e=0;e<3;e++){switch(e){case a:r[e]=tryParseYear(r[e]);break;case t:r[e]=tryParseMonth(r[e]);break;default:r[e]=tryParseDay(r[e])}if(void 0===r[e])return}return`${r[0]}${e}${r[1]}${e}${r[2]}`}}}function getDateBounds(e){var{lowerBound:a,upperBound:e}=e||{};return{min:"number"==typeof a?new Date(a):void 0,max:"number"==typeof e?new Date(e):void 0}}function getTargetLanguages(e){e=parseLocale(e);if(!e)return[DEFAULT_LOCALE];const a=[];return e.territory&&a.push(`${e.language}-${e.territory}`),a.push(e.language),a.push(DEFAULT_LOCALE),a}async function getDateFnsLocale(e){for(const a of getTargetLanguages(e))if(-1!==SUPPORTED_DATE_FNS_LOCALES.indexOf(a)){let e;try{switch(a){case"cs":e=(await import("date-fns/locale/cs")).cs;break;case"da":e=(await import("date-fns/locale/da")).da;break;case"de":e=(await import("date-fns/locale/de")).de;break;case"de-AT":e=(await import("date-fns/locale/de-AT")).deAT;break;case"en-AU":e=(await import("date-fns/locale/en-AU")).enAU;break;case"en-CA":e=(await import("date-fns/locale/en-CA")).enCA;break;case"en-GB":e=(await import("date-fns/locale/en-GB")).enGB;break;case"en-IN":e=(await import("date-fns/locale/en-IN")).enIN;break;case"en-NZ":e=(await import("date-fns/locale/en-NZ")).enNZ;break;case"en-US":e=(await import("date-fns/locale/en-US")).enUS;break;case"en-ZA":e=(await import("date-fns/locale/en-ZA")).enZA;break;case"fr":e=(await import("date-fns/locale/fr")).fr;break;case"fr-CA":e=(await import("date-fns/locale/fr-CA")).frCA;break;case"fr-CH":e=(await import("date-fns/locale/fr-CH")).frCH;break;case"it":e=(await import("date-fns/locale/it")).it;break;case"nb":e=(await import("date-fns/locale/nb")).nb;break;case"nl":e=(await import("date-fns/locale/nl")).nl;break;case"nl-BE":e=(await import("date-fns/locale/nl-BE")).nlBE;break;case"nn":e=(await import("date-fns/locale/nn")).nn;break;case"pt":e=(await import("date-fns/locale/pt")).pt;break;case"pt-BR":e=(await import("date-fns/locale/pt-BR")).ptBR}}catch{continue}if(e?.localize)return e}}async function getLocaleText(e){for(const a of getTargetLanguages(e))if(-1!==SUPPORTED_DATE_FNS_LOCALES.indexOf(a)){let e;try{switch(a){case"cs":e=(await import("@mui/x-date-pickers/locales/csCZ")).csCZ;break;case"da":e=(await import("@mui/x-date-pickers/locales/daDK")).daDK;break;case"de":case"de-AT":e=(await import("@mui/x-date-pickers/locales/deDE")).deDE;break;case"en-AU":case"en-CA":case"en-GB":case"en-IN":case"en-NZ":case"en-US":case"en-ZA":case"nn":e=(await import("@mui/x-date-pickers/locales/enUS")).enUS;break;case"fr":case"fr-CA":case"fr-CH":e=(await import("@mui/x-date-pickers/locales/frFR")).frFR;break;case"it":e=(await import("@mui/x-date-pickers/locales/itIT")).itIT;break;case"nb":e=(await import("@mui/x-date-pickers/locales/nbNO")).nbNO;break;case"nl":case"nl-BE":e=(await import("@mui/x-date-pickers/locales/nlNL")).nlNL;break;case"pt":case"pt-BR":e=(await import("@mui/x-date-pickers/locales/ptBR")).ptBR}}catch{continue}return e?e.components.MuiLocalizationProvider.defaultProps.localeText:{}}}function getLocaleDateFormat(){if(localeDateFormat)return localeDateFormat;const e=new Date(1999,11,31,0,0,0);return localeDateFormat=e.toLocaleDateString(void 0,{year:"numeric",month:"numeric",day:"numeric"}),localeDateFormat=localeDateFormat.replace("1999","yyyy"),localeDateFormat=localeDateFormat.replace("99","yyyy"),localeDateFormat=localeDateFormat.replace("12","MM"),localeDateFormat=localeDateFormat.replace("31","dd"),localeDateFormat}function getLocaleDateFormatSeparator(){var e;return void 0===dateFormatSeparator&&(e=/[^dMy]+/.exec(getLocaleDateFormat()),dateFormatSeparator=e?e[0]:""),dateFormatSeparator}function getLocaleDateFormatTokenPosition(e){const a=getLocaleDateFormat();var t=a.indexOf("yyyy"),r=a.indexOf("MM"),o=a.indexOf("dd");return"yyyy"===e?0===t?0:r<t&&o<t?2:1:"MM"===e?0===r?0:o<r&&t<r?2:1:0===o?0:r<o&&t<o?2:1}const coerceIntoDate=e=>{if(e instanceof Date&&isValidDate(e))return new Date(e.valueOf());if("string"==typeof e)if(/^\d+$/.test(e))e=Number(e);else{var a=tryParseDateText(e);if(a){var t=getLocaleDateFormat(),t=parse(a,t,0);if(isValidDate(t))return t}}if("number"==typeof e){e=new Date(e);if(isValidDate(e))return e}};function convertToDateRangeRef(e){let a,t,r=!1;Array.isArray(e)?(a=coerceIntoDate(e[0]),t=coerceIntoDate(e[1]),r=!0):"object"==typeof e&&(a=coerceIntoDate(e.startDate),t=coerceIntoDate(e.endDate));var o=!!a&&!!t;let n=o&&!isAfter(a,t);return r&&o&&!n&&(e=a,a=t,t=e,n=!0),o&&n?{refValueType:"daterange",startDate:a,endDate:t}:void 0}function __test__setlocaleDateFormatInCache(e){localeDateFormat=e,dateFormatSeparator=void 0}async function getLocale(e){return getDateFnsLocale(e)}function makeProperValue(e,a){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 t=a.coerceIntoValue(e);if(void 0!==t&&null!==t&&isFinite(t.valueOf()))return t}}function getNewElementValue(e,a,t,r){if(null!=e&&isFinite(e.valueOf()))return{refValueType:a,format:t,display:r.format(e,Calendar.fullFormat),value:e.valueOf()}}export{areValuesEqual,isValidDate,tryParseYear,tryParseMonth,tryParseDay,tryParseDateText,getDateBounds,getDateFnsLocale,getLocaleText,getLocaleDateFormat,getLocaleDateFormatSeparator,getLocaleDateFormatTokenPosition,convertToDateRangeRef,__test__setlocaleDateFormatInCache,getLocale,makeProperValue,getNewElementValue};

package/forms/hostContext.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 declare const HostContext: import("react").Context<FormHostMembers>;
-export {};
+export declare const HostProvider: import("react").Provider<FormHostMembers>;
+export default HostContext;

package/forms/keyboard.d.ts

@@ -1,9 +1,3 @@
-export interface KeyboardEvent {
-    altKey: boolean;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    shiftKey: boolean;
-    key: string;
-}
+/// <reference types="react" />
 /** @product This is intended for internal use only within VertiGIS Studio products. */
-export declare function getKeyString(event: KeyboardEvent): string | undefined;
+export declare function getKeyString(event: React.KeyboardEvent): string | undefined;