@vertigis/workflow 5.33.1 → 5.35.0

package/forms/components/RadioGroup.js

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

package/forms/components/Scanner.d.ts

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

package/forms/components/Scanner.js

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

package/forms/components/Section.d.ts

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

package/forms/components/Section.js

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

package/forms/components/Signature.d.ts

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

package/forms/components/Signature.js

@@ -0,0 +1 @@
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import Dialog from"@vertigis/react-ui/Dialog";import IconButton from"@vertigis/react-ui/IconButton";import SignatureIcon from"@vertigis/react-ui/icons/Signature";import Trash from"@vertigis/react-ui/icons/Trash";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useState}from"react";import FormElement from"../FormElement.js";import{renderTitle}from"../common.js";import{signatureConfiguration}from"../elements/Signature.js";import{makeUniqueId}from"../utils.js";import Markdown from"./Markdown.js";import SignatureDialog from"./SignatureDialog.js";const PREFIX="Signature",signatureClasses={button:`${PREFIX}-button`,image:`${PREFIX}-image`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${signatureClasses.button}`]:{marginBottom:e(1),marginTop:e(1)},[`.${signatureClasses.image}`]:{alignItems:"flex-start",display:"flex",flexDirection:"row",gap:e(1),img:{border:"solid 1px grey",flexShrink:1,minWidth:0}}})),Signature=({className:e,component:t,element:i})=>{const r=t.props["host"],o=t.props.name,[a,n]=useState(),[s,l]=useState(500),m=r.renderText(i.tooltip),c=r.renderText("@common-clear");useEffect(()=>{var e=i.size;let t=signatureConfiguration.width.default;"number"!=typeof e||isNaN(e)?"object"!=typeof e||void 0===e.width||isNaN(e.width)||(t=e.width):t=e,t=Math.max(t,signatureConfiguration.width.minimum),t=Math.min(t,signatureConfiguration.width.maximum),l(t)},[i.size]),useEffect(()=>{var e=i.value;n(e?.dataUrl)},[i.value]);const u=async e=>{if(e){const a=await fetch(e);var t=await a.blob(),t=new File([t],`${o}.png`,{type:t.type});i.value={refValueType:"signature",dataUrl:e,file:t}}else i.value=void 0;n(e)};return React.createElement(Root,{className:e,component:t,element:i},a?React.createElement(Box,{className:signatureClasses.image},React.createElement("img",{src:a,alt:m}),React.createElement(IconButton,{"aria-label":c,disabled:!t.enabled,onClick:()=>u(void 0),title:c},React.createElement(Trash,null))):null,a?null:React.createElement(Box,{className:signatureClasses.button},React.createElement(Button,{color:"primary",disabled:!1===i.enabled,onClick:async()=>{const e=Math.round(.4*s);await r.displayDialog(a=>React.createElement(SignatureDialog,{cancelCaption:r.renderText("@common-cancel"),clearCaption:c,doneCaption:r.renderText("@common-done"),format:"image/png",height:e,helperText:React.createElement(Markdown,{host:r,inline:!0,text:i.label}),onClose:(e,t)=>{e&&u(t),a()},title:renderTitle(r,i,makeUniqueId(t.props.name+"-dialog")),undoCaption:r.renderText("@common-undo"),width:s}),Dialog)},startIcon:React.createElement(SignatureIcon,null),title:m,variant:"outlined"},React.createElement(Markdown,{host:r,inline:!0,text:i.prompt||""}))))};export default Signature;export{signatureClasses};

package/forms/components/SignatureDialog.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare const signatureDialogClasses: {
+    canvas: string;
+    canvasAnnotations: string;
+    container: string;
+    mark: string;
+    titleText: string;
+};
+export interface StyledDialogProps {
+    cancelCaption: string;
+    clearCaption: string;
+    doneCaption: string;
+    format: string;
+    helperText: JSX.Element | null;
+    height: number;
+    title: JSX.Element | null;
+    undoCaption: string;
+    width: number;
+    onClose: (confirm: boolean, dataUrl: string | undefined) => void;
+}
+declare const SignatureDialog: ({ cancelCaption, clearCaption, doneCaption, format, height, helperText, title, undoCaption, width, onClose, }: StyledDialogProps) => JSX.Element;
+export default SignatureDialog;

package/forms/components/SignatureDialog.js

@@ -0,0 +1 @@
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import DialogActions from"@vertigis/react-ui/DialogActions";import DialogContent from"@vertigis/react-ui/DialogContent";import DialogTitle from"@vertigis/react-ui/DialogTitle";import IconButton from"@vertigis/react-ui/IconButton";import Skeleton from"@vertigis/react-ui/Skeleton";import Stack from"@vertigis/react-ui/Stack";import Typography from"@vertigis/react-ui/Typography";import Trash from"@vertigis/react-ui/icons/Trash";import Undo from"@vertigis/react-ui/icons/Undo";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{lazy,Suspense}from"react";const SignaturePadWrapper=lazy(()=>import("react-signature-pad-wrapper")),DialogPrefix="SignatureDialog",signatureDialogClasses={canvas:`${DialogPrefix}-canvas`,canvasAnnotations:`${DialogPrefix}-canvas-annotations`,container:`${DialogPrefix}-container`,mark:`${DialogPrefix}-mark`,titleText:`${DialogPrefix}-title-text`},StyledDialogTitle=styled(DialogTitle)(()=>({display:"flex",[`.${signatureDialogClasses.titleText}`]:{flexGrow:1,flexShrink:1}})),StyledDialogContent=styled(DialogContent)(({theme:{spacing:e,typography:t}})=>({[`.${signatureDialogClasses.container}`]:{backgroundColor:"#eee",filter:"drop-shadow(2px 2px 2px grey)",[`.${signatureDialogClasses.canvas}`]:{position:"relative",zIndex:1},[`.${signatureDialogClasses.canvasAnnotations}`]:{alignItems:"center",display:"flex",flexDirection:"column",marginTop:t.pxToRem(-64),paddingLeft:e(1),paddingRight:e(1),position:"relative",zIndex:0,[`.${signatureDialogClasses.mark}`]:{fontSize:"large",borderBottom:"solid 1px black",width:"100%"}}}})),SignatureDialog=({cancelCaption:e,clearCaption:t,doneCaption:a,format:i,height:o,helperText:r,title:n,undoCaption:l,width:s,onClose:c})=>{let g,m,p;return React.createElement(React.Fragment,null,React.createElement(StyledDialogTitle,null,React.createElement("div",{className:signatureDialogClasses.titleText},n),React.createElement(Stack,{direction:"row"},React.createElement(IconButton,{"aria-label":l,onClick:async()=>{if(g){const e=g.toData();e.pop(),g.fromData(e)}},title:l},React.createElement(Undo,null)),React.createElement(IconButton,{"aria-label":t,onClick:async()=>{m&&m.clear()},title:t},React.createElement(Trash,null)))),React.createElement(StyledDialogContent,null,React.createElement(Box,{className:signatureDialogClasses.container,sx:{height:`${o}px`,width:`${s}px`}},React.createElement(Suspense,{fallback:React.createElement(Skeleton,{variant:"rectangular",width:s,height:o})},React.createElement(SignaturePadWrapper,{canvasProps:{className:signatureDialogClasses.canvas},ref:e=>{g=e||void 0,m=g?.instance||void 0,p=g?.canvas?.current||void 0,p&&(p.oncontextmenu=()=>!1,p.height=o,p.width=s)}}),React.createElement(Box,{className:signatureDialogClasses.canvasAnnotations},React.createElement(Typography,{"aria-hidden":!0,className:signatureDialogClasses.mark},"X"),React.createElement(Typography,{variant:"caption"},r))))),React.createElement(DialogActions,null,React.createElement(Button,{color:"primary",onClick:()=>{let e;m&&!m.isEmpty()&&(e=m.toDataURL(i)),c(!0,e)},variant:"contained"},React.createElement(Typography,null,a)),React.createElement(Button,{color:"inherit",onClick:()=>{c(!1,void 0)},variant:"outlined"},React.createElement(Typography,null,e))))};export default SignatureDialog;export{signatureDialogClasses};

package/forms/components/Text.d.ts

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

package/forms/components/Text.js

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

package/forms/components/TextArea.d.ts

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

package/forms/components/TextArea.js

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

package/forms/components/TextBox.d.ts

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

package/forms/components/TextBox.js

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

package/forms/components/TimePicker.d.ts

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

package/forms/components/TimePicker.js

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

package/forms/constants.d.ts

@@ -1,3 +1,19 @@
+/**
+ * All of the types of component used in forms within VertiGIS Studio Workflow.
+ * Most are containers that hold other things. In the case of "element",
+ * we use `FormElementTypes` to specify which type of element it represents.
+ */
+export declare const FormComponentTypes: {
+    ACCORDIONGROUP: string;
+    BODY: string;
+    ELEMENT: string;
+    FOOTER: string;
+    FORM: string;
+    HEADER: string;
+    MAIN: string;
+    ROW: string;
+    SECTION: string;
+};
 /**
  * All of the types of Form Element that are included in VertiGIS Studio Workflow.
  *
@@ -29,39 +45,15 @@ export declare const FormElementTypes: {
     RADIOGROUP: string;
     SCANNER: string;
     SECTION: string;
+    SIGNATURE: string;
     TEXT: string;
     TEXTAREA: string;
     TEXTBOX: string;
     TIMEPICKER: string;
 };
-export declare const CssClasses: {
-    /**
-     * The Form Element contains a drop down list.
-     */
-    DROPDOWN: string;
-    /**
-     * The Form Element has an error.
-     */
-    ERROR: string;
-    /**
-     * The Form Element cannot contain any more items.
-     */
-    FULL: string;
-    /**
-     * The Form Element is a Number or Number Slider.
-     */
-    NUMERIC: string;
-    /**
-     * The Form Element can only contain a single item.
-     */
-    SINGLE: string;
-    /**
-     * The Form Element allows increment by steps.
-     */
-    STEPPER: string;
-};
 /**
  * The way that Form Element Items are presented to the user.
+ * @public
  */
 export declare const Orientation: {
     /** The items are laid out side-by-side, in a row. */
@@ -77,13 +69,9 @@ export declare enum ScanType {
     BarCode = "barcode",
     QrCode = "qrcode"
 }
-/**
- * The default number of rows for a Text Area in the Scanner Form Element.
- * This is defined outside of scanner.tsx to prevent webpack from pulling @zxing/library into the designer.
- */
-export declare const SCANNER_DEFAULT_ROW_COUNT = 5;
 /**
  * The way that a Form Element's title is positioned relative to its content.
+ * @public
  */
 export declare const TitleLocation: {
     /** The title is shown above the element's content. */

package/forms/constants.js

@@ -1 +1 @@
-const FormElementTypes={AUTOCOMPLETE:"AutoComplete",BUTTONBAR:"ButtonBar",CHECKBOX:"CheckBox",CHECKGROUP:"CheckGroup",CUSTOM:"Custom",DATEPICKER:"DatePicker",DATERANGEPICKER:"DateRangePicker",DATETIMEPICKER:"DateTimePicker",DROPDOWNLIST:"DropDownList",FILEPICKER:"FilePicker",GEOMETRYPICKER:"GeometryPicker",HEADER:"Header",HORIZONTALRULE:"HorizontalRule",IMAGE:"Image",ITEMPICKER:"ItemPicker",LISTBOX:"ListBox",NUMBER:"Number",NUMBERRANGESLIDER:"NumberRangeSlider",NUMBERSLIDER:"NumberSlider",PASSWORDBOX:"PasswordBox",RADIOGROUP:"RadioGroup",SCANNER:"Scanner",SECTION:"Section",TEXT:"Text",TEXTAREA:"TextArea",TEXTBOX:"TextBox",TIMEPICKER:"TimePicker"},CssClasses={DROPDOWN:"dropdown",ERROR:"error",FULL:"full",NUMERIC:"Numeric",SINGLE:"single",STEPPER:"stepper"},Orientation={HORIZONTAL:"horizontal",VERTICAL:"vertical"};var ScanType;!function(e){e.BarCode="barcode",e.QrCode="qrcode"}(ScanType=ScanType||{});const SCANNER_DEFAULT_ROW_COUNT=5,TitleLocation={ABOVE:"above",BESIDE:"beside"};export{FormElementTypes,CssClasses,Orientation,ScanType,SCANNER_DEFAULT_ROW_COUNT,TitleLocation};
+const FormComponentTypes={ACCORDIONGROUP:"accordionGroup",BODY:"body",ELEMENT:"element",FOOTER:"footer",FORM:"form",HEADER:"header",MAIN:"main",ROW:"row",SECTION:"section"},FormElementTypes={AUTOCOMPLETE:"AutoComplete",BUTTONBAR:"ButtonBar",CHECKBOX:"CheckBox",CHECKGROUP:"CheckGroup",CUSTOM:"Custom",DATEPICKER:"DatePicker",DATERANGEPICKER:"DateRangePicker",DATETIMEPICKER:"DateTimePicker",DROPDOWNLIST:"DropDownList",FILEPICKER:"FilePicker",GEOMETRYPICKER:"GeometryPicker",HEADER:"Header",HORIZONTALRULE:"HorizontalRule",IMAGE:"Image",ITEMPICKER:"ItemPicker",LISTBOX:"ListBox",NUMBER:"Number",NUMBERRANGESLIDER:"NumberRangeSlider",NUMBERSLIDER:"NumberSlider",PASSWORDBOX:"PasswordBox",RADIOGROUP:"RadioGroup",SCANNER:"Scanner",SECTION:"Section",SIGNATURE:"Signature",TEXT:"Text",TEXTAREA:"TextArea",TEXTBOX:"TextBox",TIMEPICKER:"TimePicker"},Orientation={HORIZONTAL:"horizontal",VERTICAL:"vertical"};var ScanType;!function(e){e.BarCode="barcode",e.QrCode="qrcode"}(ScanType=ScanType||{});const TitleLocation={ABOVE:"above",BESIDE:"beside"};export{FormComponentTypes,FormElementTypes,Orientation,ScanType,TitleLocation};

package/forms/dateUtilities.d.ts

@@ -1,4 +1,14 @@
-import { DateRangeRef } from "./FormDefinition";
+import { Calendar } from "./Calendar";
+import { DateRangeRef, DateTimeFormat, DateTimeRef, DateTimeType } from "./FormDefinition";
+import { defs } from "./FormHost";
+import { FormPresenterHost } from "./FormPresenterHost";
+/**
+ * Checks if a form element's value is equal to the supplied value.
+ * @param element A Form Element to inspect.
+ * @param newValue A new value for the Form Element.
+ * @returns True if the element's current value and the new value are equal, false otherwise.
+ */
+export declare function areValuesEqual(element: defs.Element, newValue: DateTimeRef | DateRangeRef): boolean;
 /**
  * Checks if a given date is valid or not.
  * @param date The date object to check.
@@ -15,7 +25,7 @@ export declare function tryParseYear(year: string): string;
  * Returns undefined if input is valid.
  * @param month The string for the month.
  */
-export declare function tryParseMonth(month: string): string;
+export declare function tryParseMonth(month: string): string | undefined;
 /**
  * Converts a given string to a corresponding two digit day. Performs basic validation.
  * Returns undefined if input is valid.
@@ -53,12 +63,6 @@ export declare function getLocaleDateFormatSeparator(): string;
  * 1 for year position in mm/yyyy/dd and 0 for year position in yyyy/mm/dd.
  */
 export declare function getLocaleDateFormatTokenPosition(token: "yyyy" | "dd" | "MM"): number;
-/**
- * Returns a string formatted using the locale date format while always using 'yyyy', 'MM' and
- * 'dd' token styles ie two digit months and days and four digit years.
- * @param date The input date
- */
-export declare function getDateAsLocaleFormattedString(date: Date): string;
 /**
  * Inputs that can be converted to a DateRangeRef. Requires two values that can be converted into
  * start and end dates
@@ -75,7 +79,7 @@ export declare type DateRangeLike = (Date | number | string)[] | {
  *              DateRangeRef like object.
  * @returns A valid DateRangeRef if possible. Undefined otherwise.
  */
-export declare function convertToDateRangeRef(value: DateRangeLike): DateRangeRef;
+export declare function convertToDateRangeRef(value: DateRangeLike): DateRangeRef | undefined;
 /**
  * This function is for the sole purpose of facilitating testing. This should not be
  * used for any other purpose. An incorrect value set here will result in incorrect
@@ -83,3 +87,31 @@ 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 loadLocale(host: FormPresenterHost): Promise<Locale>;
+declare type Partial = void | boolean | number | string | {
+    [name: string]: any;
+    format?: Partial | void;
+    locale?: string;
+    timezone?: string;
+    refValueType?: string;
+    value?: number;
+};
+export declare function makeProperFormat(value: Partial, format: Partial): defs.DateTimeFormat;
+export declare function makeProperValue(value: number | string | Partial, calendar: Calendar): Date;
+export declare function isInvalidDate(date: Date | null): boolean;
+export declare function hasErrorChanged(element: defs.Element, error: defs.StatusRef | undefined): boolean;
+/**
+ * Updates `element.value` with a new `DateTimeRef` using the supplied parameters.
+ *
+ * Care is taken to ensure we don't replace `element.value` with an identical
+ * `DateTimeRef` as this can lead to infinite loops in react components
+ * when `element.value` is a dependency of a hook such as `useEffect`.
+ * @param element The element to be updated.
+ * @param date The new `Date` value to use.
+ * @param refValueType The type of value that this represents.
+ * @param format The format of the value.
+ * @param calendar A calendar to use to get a text representation of the date.
+ * @returns True if the value was updated, false otherwise.
+ */
+export declare function updateElementValue(element: defs.Element, date: Date | undefined | null, refValueType: DateTimeType, format: DateTimeFormat, calendar: Calendar): boolean;
+export {};

package/forms/dateUtilities.js

@@ -1 +1 @@
-import{parse,isAfter}from"date-fns";import{parseLocale}from"../definition/ProgramInspector.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 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]}`}}}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")).default;break;case"da":e=(await import("date-fns/locale/da")).default;break;case"de":e=(await import("date-fns/locale/de")).default;break;case"de-AT":e=(await import("date-fns/locale/de-AT")).default;break;case"en-AU":e=(await import("date-fns/locale/en-AU")).default;break;case"en-CA":e=(await import("date-fns/locale/en-CA")).default;break;case"en-GB":e=(await import("date-fns/locale/en-GB")).default;break;case"en-IN":e=(await import("date-fns/locale/en-IN")).default;break;case"en-NZ":e=(await import("date-fns/locale/en-NZ")).default;break;case"en-US":e=(await import("date-fns/locale/en-US")).default;break;case"en-ZA":e=(await import("date-fns/locale/en-ZA")).default;break;case"fr":e=(await import("date-fns/locale/fr")).default;break;case"fr-CA":e=(await import("date-fns/locale/fr-CA")).default;break;case"fr-CH":e=(await import("date-fns/locale/fr-CH")).default;break;case"it":e=(await import("date-fns/locale/it")).default;break;case"nb":e=(await import("date-fns/locale/nb")).default;break;case"nl":e=(await import("date-fns/locale/nl")).default;break;case"nl-BE":e=(await import("date-fns/locale/nl-BE")).default;break;case"nn":e=(await import("date-fns/locale/nn")).default;break;case"pt":e=(await import("date-fns/locale/pt")).default;break;case"pt-BR":e=(await import("date-fns/locale/pt-BR")).default}}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}function getDateAsLocaleFormattedString(e){if(!isValidDate(e))return"";var a=tryParseYear(e.getFullYear().toString()),t=tryParseMonth((e.getMonth()+1).toString()),e=tryParseDay(e.getDate().toString());let r=getLocaleDateFormat();return r=r.replace("yyyy",a),r=r.replace("MM",t),r=r.replace("dd",e),r}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=void 0,t=void 0,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}export{isValidDate,tryParseYear,tryParseMonth,tryParseDay,tryParseDateText,getDateFnsLocale,getLocaleDateFormat,getLocaleDateFormatSeparator,getLocaleDateFormatTokenPosition,getDateAsLocaleFormattedString,convertToDateRangeRef,__test__setlocaleDateFormatInCache};
+import{parse,isAfter}from"date-fns";import{DEFAULT_LOCALE}from"../constants.js";import{parseLocale}from"../definition/ProgramInspector.js";import{Calendar}from"./Calendar.js";import{isStatus}from"./textUtilities.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){const t=e.value;return void 0===t&&void 0===a||null===t&&null===a||(isDateTimeRef(t)&&isDateTimeRef(a)?t.display===a.display&&t.format===a.format&&t.refValueType===a.refValueType&&t.value===a.value:!(!isDateRangeRef(t)||!isDateRangeRef(a))&&(t.endDate?.valueOf()===a.endDate?.valueOf()&&t.refValueType===a.refValueType&&t.startDate?.valueOf()===a.startDate?.valueOf()))}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]}`}}}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")).default;break;case"da":e=(await import("date-fns/locale/da")).default;break;case"de":e=(await import("date-fns/locale/de")).default;break;case"de-AT":e=(await import("date-fns/locale/de-AT")).default;break;case"en-AU":e=(await import("date-fns/locale/en-AU")).default;break;case"en-CA":e=(await import("date-fns/locale/en-CA")).default;break;case"en-GB":e=(await import("date-fns/locale/en-GB")).default;break;case"en-IN":e=(await import("date-fns/locale/en-IN")).default;break;case"en-NZ":e=(await import("date-fns/locale/en-NZ")).default;break;case"en-US":e=(await import("date-fns/locale/en-US")).default;break;case"en-ZA":e=(await import("date-fns/locale/en-ZA")).default;break;case"fr":e=(await import("date-fns/locale/fr")).default;break;case"fr-CA":e=(await import("date-fns/locale/fr-CA")).default;break;case"fr-CH":e=(await import("date-fns/locale/fr-CH")).default;break;case"it":e=(await import("date-fns/locale/it")).default;break;case"nb":e=(await import("date-fns/locale/nb")).default;break;case"nl":e=(await import("date-fns/locale/nl")).default;break;case"nl-BE":e=(await import("date-fns/locale/nl-BE")).default;break;case"nn":e=(await import("date-fns/locale/nn")).default;break;case"pt":e=(await import("date-fns/locale/pt")).default;break;case"pt-BR":e=(await import("date-fns/locale/pt-BR")).default}}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 loadLocale(e){e=e.deriveLocale();if("inv"!==e&&"en"!==e&&e!==DEFAULT_LOCALE)return getDateFnsLocale(e)}function makeProperFormat(e,a){if("object"==typeof e&&null!==e)switch(e.refValueType){case"date":case"time":case"datetime":a=e.format}if("object"!=typeof a)return"app"===a?a:"device";if(null===a)return"device";var t=a.locale,r=a.timezone;return"string"==typeof t&&"string"==typeof r?{locale:t,timezone:r}:"device"}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 isInvalidDate(e){return e instanceof Date&&isNaN(e.getDate())}function hasErrorChanged(e,a){e=e.error;return(void 0!==e||void 0!==a)&&((null!==e||null!==a)&&(!isStatus(e)||!isStatus(a)||e.status!==a.status))}function updateElementValue(e,a,t,r,o){if(null!=a&&isFinite(a.valueOf())){a={refValueType:t,format:r,display:o.format(a,Calendar.fullFormat),value:a.valueOf()};if(!areValuesEqual(e,a))return e.value=a,!0}else if(void 0!==e.value)return!(e.value=void 0);return!1}export{areValuesEqual,isValidDate,tryParseYear,tryParseMonth,tryParseDay,tryParseDateText,getDateFnsLocale,getLocaleDateFormat,getLocaleDateFormatSeparator,getLocaleDateFormatTokenPosition,convertToDateRangeRef,__test__setlocaleDateFormatInCache,loadLocale,makeProperFormat,makeProperValue,isInvalidDate,hasErrorChanged,updateElementValue};

package/forms/elements/AutoComplete.d.ts

@@ -1,6 +1,13 @@
+import { FormElementPropertyConstraints, PropertyConstraintsWithDefault, PropertyConstraintsWithMinimum } from "../utils";
 import * as types from "./types";
 export interface AutoComplete extends types.ElementBase, types.EditableElement, types.ElementWithItems<Item>, types.ElementWithStringLabel, types.ElementWithRequire {
     /** Indicates the current value. */
     readonly value?: any;
 }
 export declare type Item = types.ElementItemBase<any>;
+interface AutoCompletePropertyConstraints extends FormElementPropertyConstraints {
+    delay: PropertyConstraintsWithDefault<number> & PropertyConstraintsWithMinimum<number>;
+    minLength: PropertyConstraintsWithDefault<number> & PropertyConstraintsWithMinimum<number>;
+}
+export declare const autoCompletePropertyConstraints: AutoCompletePropertyConstraints;
+export {};

package/forms/elements/AutoComplete.js

@@ -0,0 +1 @@
+const autoCompletePropertyConstraints={delay:{default:300,minimum:1},minLength:{default:3,minimum:1}};export{autoCompletePropertyConstraints};

package/forms/elements/Number.d.ts

@@ -1,6 +1,11 @@
 import { NumberRef } from "../FormDefinition";
+import { NumberFormatConfiguration } from "../numberUtilities";
 import * as types from "./types";
 export interface Number extends types.ElementBase, types.EditableElement, types.ElementWithRequire {
     /** Indicates the current value. */
     readonly value: NumberRef;
 }
+/**
+ * Constraints that the Number element enforces on the bounds.
+ */
+export declare const numberFormatConfiguration: Partial<NumberFormatConfiguration>;

package/forms/elements/Number.js

@@ -0,0 +1 @@
+const numberFormatConfiguration={lowerBound:{default:void 0},upperBound:{default:void 0}};export{numberFormatConfiguration};

package/forms/elements/NumberRangeSlider.d.ts

@@ -1,8 +1,10 @@
+import { NumberFormatConfiguration } from "../numberUtilities";
 import * as types from "./types";
 export interface NumberRangeSlider extends types.ElementBase, types.EditableElement {
     /** Indicates the current value. */
     readonly value: number[];
 }
-export declare const MIN_DECIMALS = 0;
-export declare const DEFAULT_DECIMALS = 0;
-export declare const DEFAULT_STEP = 0;
+/**
+ * Constraints that the Number Range Slider enforces on the precision.
+ */
+export declare const numberFormatConfiguration: Partial<NumberFormatConfiguration>;

package/forms/elements/NumberRangeSlider.js

@@ -1 +1 @@
-const MIN_DECIMALS=0,DEFAULT_DECIMALS=0,DEFAULT_STEP=0;export{MIN_DECIMALS,DEFAULT_DECIMALS,DEFAULT_STEP};
+const numberFormatConfiguration={precision:{default:0,minimum:0}};export{numberFormatConfiguration};

package/forms/elements/NumberSlider.d.ts

@@ -4,6 +4,3 @@ export interface NumberSlider extends types.ElementBase, types.EditableElement {
     /** Indicates the current value. */
     readonly value: NumberRef;
 }
-export declare const MIN_DECIMALS = -20;
-export declare const DEFAULT_DECIMALS = 3;
-export declare const DEFAULT_STEP = 1;

package/forms/elements/NumberSlider.js

@@ -1 +0,0 @@
-const MIN_DECIMALS=-20,DEFAULT_DECIMALS=3,DEFAULT_STEP=1;export{MIN_DECIMALS,DEFAULT_DECIMALS,DEFAULT_STEP};

package/forms/elements/Scanner.d.ts

@@ -1,4 +1,5 @@
 import { ScanRef } from "../FormDefinition";
+import { FormElementPropertyConstraints, PropertyConstraintsWithDefault, PropertyConstraintsWithMinimum } from "../utils";
 import * as types from "./types";
 export interface Scanner extends types.ElementBase, types.EditableElement, types.ElementWithAutoActivate, types.ElementWithRequire {
     /** True if this element should support manual user entry, false otherwise. */
@@ -8,3 +9,11 @@ export interface Scanner extends types.ElementBase, types.EditableElement, types
     /** Indicates the current value. */
     readonly value: ScanRef;
 }
+interface ScannerConfiguration extends FormElementPropertyConstraints {
+    rows: PropertyConstraintsWithDefault<number> & PropertyConstraintsWithMinimum<number>;
+}
+/**
+ * Constraints that the Scanner enforces on the rows.
+ */
+export declare const scannerConfiguration: ScannerConfiguration;
+export {};

package/forms/elements/Scanner.js

@@ -0,0 +1 @@
+const scannerConfiguration={rows:{default:5,minimum:1}};export{scannerConfiguration};

package/forms/elements/Signature.d.ts

@@ -0,0 +1,16 @@
+import { SignatureRef } from "../FormDefinition";
+import { FormElementPropertyConstraints, PropertyConstraintsWithDefault, PropertyConstraintsWithMaximum, PropertyConstraintsWithMinimum } from "../utils";
+import * as types from "./types";
+export interface Signature extends types.ElementBase, types.EditableElement, types.ElementWithRequire {
+    /** Indicates the current value. */
+    readonly value: SignatureRef;
+}
+interface SignatureConfiguration extends FormElementPropertyConstraints {
+    height: PropertyConstraintsWithDefault<number>;
+    width: PropertyConstraintsWithDefault<number> & PropertyConstraintsWithMaximum<number> & PropertyConstraintsWithMinimum<number>;
+}
+/**
+ * Constraints that the Signature enforces on the size.
+ */
+export declare const signatureConfiguration: SignatureConfiguration;
+export {};

package/forms/elements/Signature.js

@@ -0,0 +1 @@
+const signatureConfiguration={height:{default:160},width:{default:400,maximum:550,minimum:200}};export{signatureConfiguration};

package/forms/elements/types.d.ts

@@ -1,6 +1,8 @@
 import * as defs from "../FormDefinition";
-/** We re-define Text here to hide defs.StatusRef from the end user.
- *  It is only for internal use, and adds no value in this context.
+/**
+ * We re-define Text here to hide defs.StatusRef from the end user.
+ * It is only for internal use, and adds no value in this context.
+ * @public
  */
 export declare type Text = string | defs.MarkdownRef;
 /** Properties common to all Elements, except the Header. */

package/forms/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-export * from "./constants";
-import { Text } from "./elements/types";
+export { Orientation, TitleLocation } from "./constants";
+export type { Text } from "./elements/types";
+/** @public */
 export interface FormElementProps<TValue = undefined> extends FormElementSettableProps<TValue> {
     /** The description of the element. */
     description?: Text;
@@ -35,12 +36,14 @@ export interface FormElementProps<TValue = undefined> extends FormElementSettabl
      */
     setValue: (value: this["value"]) => void;
 }
+/** @public */
 export interface FormElementSettableProps<TValue = undefined> {
     /** The value of the element. */
     value: TValue;
 }
 declare type SettablePropsFromProps<TProps extends FormElementProps> = Omit<TProps, keyof FormElementProps> & FormElementSettableProps<TProps["value"]>;
 declare type Unionize<T> = T[keyof T];
+/** @public */
 export declare type PropertyChangeEvent<TSettableProps, TSetProperty> = Unionize<{
     [K in keyof Required<TSettableProps>]: {
         properties: Readonly<TSettableProps>;
@@ -48,6 +51,7 @@ export declare type PropertyChangeEvent<TSettableProps, TSetProperty> = Unionize
         setProperty: TSetProperty;
     };
 }>;
+/** @public */
 export interface FormElementRegistration<TProps extends FormElementProps<any> = FormElementProps, TSettableProps extends SettablePropsFromProps<TProps> = SettablePropsFromProps<TProps>> {
     /** The React component definition of the form element. */
     component: React.ComponentType<TProps>;

package/forms/index.js

@@ -1 +1 @@
-export*from"./constants.js";
+export{Orientation,TitleLocation}from"./constants.js";

package/forms/keyboard.d.ts

@@ -5,4 +5,5 @@ export interface KeyboardEvent {
     shiftKey: boolean;
     key: string;
 }
+/** @product This is intended for internal use only within VertiGIS Studio products. */
 export declare function getKeyString(event: KeyboardEvent): string;

package/forms/numberFormatter.d.ts

@@ -24,7 +24,7 @@ export declare enum NumberDisplayFormat {
      */
     ACCOUNTING = "a",
     /**
-     * A localized representation of a percentage (e.g. 0.99 -> "99%" in the
+     * A localized representation of a percentage (e.g. 0.99 -\> "99%" in the
      * en-US locale).
      */
     PERCENT = "p",
@@ -48,16 +48,15 @@ export declare enum NumberDisplayFormat {
  */
 export interface FormatOptions {
     /**
-     * The locale to use when formatting the number. If not specified, the
-     * current locale is used (see locale module).
+     * The locale to use when formatting the number.
      */
-    locale?: string;
+    locale: string;
     /**
      * The number format. See {@link NumberFormatter.format}.
      */
     format?: NumberDisplayFormat;
     /**
-     * See {@link NumberSettings.currency}.
+     * See NumberFormat.currency.
      */
     currency?: string;
     /**
@@ -65,7 +64,7 @@ export interface FormatOptions {
      */
     customDisplayFormat?: string;
     /**
-     * See {@link NumberSettings.fractionalDigits}.
+     * See NumberFormat.precision.
      */
     fractionalDigits?: number;
 }