@vertigis/workflow 5.38.1 → 5.39.1

package/forms/components/SignatureDialog.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 export declare const signatureDialogClasses: {
     canvas: string;
     canvasAnnotations: string;
@@ -11,12 +11,12 @@ export interface StyledDialogProps {
     clearCaption: string;
     doneCaption: string;
     format: string;
-    helperText: JSX.Element | null;
+    helperText: React.JSX.Element | null;
     height: number;
-    title: JSX.Element | null;
+    title: React.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;
+declare const SignatureDialog: ({ cancelCaption, clearCaption, doneCaption, format, height, helperText, title, undoCaption, width, onClose, }: StyledDialogProps) => React.JSX.Element;
 export default SignatureDialog;

package/forms/components/SignatureDialog.js

@@ -1 +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"},a),React.createElement(Button,{color:"inherit",onClick:()=>{c(!1,void 0)},variant:"outlined"},e)))};export default SignatureDialog;export{signatureDialogClasses};
+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%"}}}})),NonItalicCaption=styled(Typography)(()=>({fontStyle:"inherit"})),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(NonItalicCaption,{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"},a),React.createElement(Button,{color:"inherit",onClick:()=>{c(!1,void 0)},variant:"outlined"},e)))};export default SignatureDialog;export{signatureDialogClasses};

package/forms/components/Sketch.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { FormElementProps } from "../..";
+import type * as defs from "../FormDefinition";
+export declare const sketchClasses: {
+    button: string;
+    imagePanel: string;
+    imageScroller: string;
+};
+/**
+ * The component for the "Sketch" Form Element.
+ */
+declare const Sketch: ({ className, component, displayDialog, element, enabled, name, prompt, renderFocus, renderText, require, setValue, size, source, title, tooltip: elementTooltip, translateText, value, }: FormElementProps<defs.SketchRef | undefined>) => React.JSX.Element;
+export default Sketch;

package/forms/components/Sketch.js

@@ -0,0 +1 @@
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import Dialog,{dialogClasses}from"@vertigis/react-ui/Dialog";import IconButton from"@vertigis/react-ui/IconButton";import Stack from"@vertigis/react-ui/Stack";import Edit from"@vertigis/react-ui/icons/Edit";import Trash from"@vertigis/react-ui/icons/Trash";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useEffect,useRef,useState}from"react";import FormElement from"../FormElement.js";import{renderTitle}from"../common.js";import{makeUniqueId}from"../utils.js";import Markdown from"./Markdown.js";import SketchDialog from"./SketchDialog.js";const PREFIX="Sketch",sketchClasses={button:`${PREFIX}-button`,imagePanel:`${PREFIX}-image-panel`,imageScroller:`${PREFIX}-image-scroller`},Root=styled(FormElement)(({theme:{spacing:e}})=>({[`.${sketchClasses.button}`]:{marginBottom:e(1),marginTop:e(1)},[`.${sketchClasses.imagePanel}`]:{alignItems:"flex-start",display:"flex",flexDirection:"row",gap:e(1),img:{border:"solid 1px grey",maxWidth:"100%",minWidth:0}}})),StyledDialog=styled(Dialog)(()=>({[`.${dialogClasses.paper}`]:{maxWidth:"inherit"}})),Sketch=({className:e,component:t,displayDialog:a,element:r,enabled:i,name:o,prompt:l,renderFocus:s,renderText:c,require:n,setValue:m,size:u,source:d,title:g,tooltip:f,translateText:h,value:p})=>{const[R,k]=useState(),[E,v]=useState(),[b,y]=useState(),[x,S]=useState(),w=useRef([]),B=useRef(),C=c(f);useEffect(()=>{var e,t;"object"==typeof u&&(e=void 0===u.height||isNaN(u.height)?void 0:u.height,t=void 0===u.width||isNaN(u.width)?void 0:u.width,v(e),S(t))},[u]),useEffect(()=>{k("object"==typeof p?p.dataUrl:void 0)},[p]),useEffect(()=>{var e;return B.current&&(URL.revokeObjectURL(B.current),B.current=void 0),"string"==typeof d?y(d):d instanceof File&&(e=URL.createObjectURL(d),y(e),B.current=e),()=>{B.current&&URL.revokeObjectURL(B.current)}},[d]);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});m({refValueType:"sketch",dataUrl:e,file:t})}else m(void 0);k(e)},I=!!b&&!!R,T=async()=>{await a(a=>React.createElement(SketchDialog,{dataUrl:R,height:E,history:w.current,onClose:(e,t)=>{e&&t&&(U(t.dataUrl),S(t.width),v(t.height),w.current=t.history),a()},renderText:c,source:b,title:renderTitle(makeUniqueId(o+"-dialog"),n,g,h),width:x}),StyledDialog)};return React.createElement(Root,{className:e,component:t,element:r},(()=>{if(!R&&!b)return null;var e=R||b,t=c("@common-clear"),a=c("@common-edit");return React.createElement(Box,{className:sketchClasses.imagePanel},React.createElement("img",{src:e,alt:C}),I&&React.createElement(Stack,null,React.createElement(IconButton,{"aria-label":a,disabled:!i,onClick:T,title:a},React.createElement(Edit,null)),React.createElement(IconButton,{"aria-label":t,disabled:!i,onClick:()=>{U(void 0),w.current=[]},title:t},React.createElement(Trash,null))))})(),I?null:React.createElement(Box,{className:sketchClasses.button},React.createElement(Button,{disabled:!i||!b,onClick:T,ref:e=>{null===e||e.disabled||s(e,o)},title:C,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:l||"",translateText:h}))))};export default Sketch;export{sketchClasses};

package/forms/components/SketchDialog.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+import type { defs } from "../FormHost";
+export declare const sketchDialogClasses: {
+    canvasContainer: string;
+    canvasScroller: string;
+    drawingCanvas: string;
+    highlightCanvas: string;
+    size: string;
+    titleText: string;
+};
+export type HistoryItem = DrawingHistoryItem | ImageHistoryItem;
+/**
+ * A history item for the end user drawing a line on the dialog.
+ */
+export 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. */
+    lineCap: CanvasLineCap;
+    /** The thickness of the line. */
+    lineWidth: number;
+    /** The points that comprise the line. */
+    points: Point[];
+    /** The style used to draw the line. This is typically a colour. */
+    strokeStyle: string | CanvasGradient | CanvasPattern;
+};
+/**
+ * A history item for re-editing an existing sketch.
+ * This replaces the `DrawingHistoryItem` entries from the initial editing of the form.
+ */
+type ImageHistoryItem = {
+    /** The pen tool is specified here to ensure the image is drawn on the correct canvas. */
+    tool: "pen";
+    /** A data url representing the previous annotations.  */
+    dataUrl: string;
+};
+export interface SketchDialogResult {
+    dataUrl: string;
+    history: HistoryItem[];
+    width: number;
+    height: number;
+}
+export interface StyledDialogProps {
+    dataUrl: string | undefined;
+    height: number | undefined;
+    history: HistoryItem[];
+    onClose: (confirm: boolean, result?: SketchDialogResult) => void;
+    /**
+     * Renders form text as a string.
+     * If `text` is a reference to a language string (e.g. `"@my-language-string"`), it is translated.
+     * If `text` is a `MarkdownRef`, it is converted to plain text.
+     */
+    renderText: (text: defs.Text | undefined) => string;
+    source: string;
+    title: React.JSX.Element | null;
+    width: number | undefined;
+}
+/**
+ * The type of tool being used to draw on the image.
+ */
+type ToolType = "pen" | "highlighter";
+type Point = {
+    x: number;
+    y: number;
+};
+declare const SketchDialog: ({ dataUrl, height, history: previousHistory, onClose, renderText, source, title, width, }: StyledDialogProps) => React.JSX.Element;
+export default SketchDialog;

package/forms/components/SketchDialog.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 FormControl from"@vertigis/react-ui/FormControl";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import FormLabel from"@vertigis/react-ui/FormLabel";import FormLabelColorField from"@vertigis/react-ui/FormLabelColorField";import IconButton from"@vertigis/react-ui/IconButton";import Radio from"@vertigis/react-ui/Radio";import RadioGroup from"@vertigis/react-ui/RadioGroup";import Slider from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";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{useEffect,useRef,useState}from"react";const DialogPrefix="SketchDialog",sketchDialogClasses={canvasContainer:`${DialogPrefix}-canvas-container`,canvasScroller:`${DialogPrefix}-canvas-scroller`,drawingCanvas:`${DialogPrefix}-drawing-canvas`,highlightCanvas:`${DialogPrefix}-highlight-canvas`,size:`${DialogPrefix}-size`,titleText:`${DialogPrefix}-title-text`},StyledDialogTitle=styled(DialogTitle)(()=>({display:"flex",[`.${sketchDialogClasses.titleText}`]:{flexGrow:1,flexShrink:1}})),StyledDialogContent=styled(DialogContent)(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",alignItems:"center",[`.${sketchDialogClasses.size}`]:{marginLeft:e(2),width:"15rem"},[`.${sketchDialogClasses.canvasScroller}`]:{maxWidth:"100%",overflow:"auto",[`.${sketchDialogClasses.canvasContainer}`]:{lineHeight:0,overflow:"clip",canvas:{position:"relative",[`&.${sketchDialogClasses.highlightCanvas}`]:{opacity:.5}}}}}));function isDrawingHistoryItem(e){return Array.isArray(e.points)}const PenColours=["#F13B2F","#42A345","#049FF1","#FFE600","#000000","#FFFFFF"],HighlighterColours=["#FFE600","#26E600","#44C8F5","#EC008C","#FF5500","#6600CC"],SketchDialog=({dataUrl:n,height:e,history:c,onClose:r,renderText:t,source:s,title:a,width:o})=>{const[g,u]=useState(e||0),[m,h]=useState(o||0),[d,l]=useState(PenColours[0]),[C,i]=useState(3),[p,f]=useState(HighlighterColours[0]),[v,R]=useState(12),[x,D]=useState("pen"),y="highlighter"===x,k=useRef(null),E=useRef(null),F=useRef(null),S=useRef([]),w=useRef([]),b=useRef(!1),T=useRef(!1),P=e=>(e?"highlighter"!==e?F:E:y?E:F).current,$=async e=>{let r,a;var t=new Promise((e,t)=>{r=e,a=t});const o=new Image;return o.crossOrigin="anonymous",o.onerror=e=>{a(e)},o.onload=()=>{r(o)},o.src=e,o.complete&&r(o),t};useEffect(()=>{(async()=>{const a=k.current,o=F.current;if(a&&o&&!b.current){let r;try{r=await $(s)}catch(e){console.error(`Error loading image from ${s}.`,e)}if(r){let e=Math.max(m,0),t=Math.max(g,0);var{height:l,width:i}=r;0==e&&0==t?(t=l,e=i):0===t?t=e*(l/i):0===e&&(e=t*(i/l)),a.height=t,a.width=e,o.height=t,o.width=e,a.getContext("2d").drawImage(r,0,0,a.width,a.height),0<c.length?(w.current=[...c],await U()):n&&(w.current=[{tool:"pen",dataUrl:n}],await U()),u(t),h(e),b.current=!0}else I()}})()},[k.current,F.current]);const B=(e,t)=>{t=t.getBoundingClientRect();return{x:e.clientX-t.left,y:e.clientY-t.top}};var L=()=>{if(T.current){T.current=!1;const e=P(),t=e.getContext("2d");t.closePath(),w.current.push({lineCap:t.lineCap,lineWidth:t.lineWidth,points:[...S.current],strokeStyle:t.strokeStyle,tool:x}),S.current.length=0}};const I=()=>{r(!1)};const U=async e=>{for(const l of w.current)if(!e||l.tool===e){const i=P(l.tool);if(isDrawingHistoryItem(l)){const n=i.getContext("2d");n.beginPath(),n.lineCap=l.lineCap,n.lineWidth=l.lineWidth,n.strokeStyle=l.strokeStyle;var t=l["points"];for(let e=0;e<t.length;e++){var{x:r,y:a}=t[e];0===e?n.moveTo(r,a):(n.lineTo(r,a),n.stroke())}n.closePath()}else{var o=await $(l.dataUrl);i.getContext("2d").drawImage(o,0,0,i.width,i.height)}}};e=t("@common-clear"),o=t("@common-undo");return React.createElement(React.Fragment,null,React.createElement(StyledDialogTitle,null,React.createElement("div",{className:sketchDialogClasses.titleText},a),React.createElement(Stack,{direction:"row"},React.createElement(IconButton,{"aria-label":o,onClick:async()=>{if(0!==w.current.length){var e=w.current.pop()["tool"];const t=P(e),r=t.getContext("2d");r.clearRect(0,0,m,g),await U(e)}},title:o},React.createElement(Undo,null)),React.createElement(IconButton,{"aria-label":e,onClick:()=>{E.current.getContext("2d").clearRect(0,0,m,g),F.current.getContext("2d").clearRect(0,0,m,g),w.current=[]},title:e},React.createElement(Trash,null)))),React.createElement(StyledDialogContent,null,React.createElement(Box,null,React.createElement(FormControl,null,React.createElement(FormLabel,null,t("@sketch-tool")),React.createElement(RadioGroup,{onChange:e=>D(e.currentTarget.value),row:!0,value:x},React.createElement(FormControlLabel,{control:React.createElement(Radio,null),value:"pen",label:t("@sketch-tool-pen")}),React.createElement(FormControlLabel,{control:React.createElement(Radio,null),value:"highlighter",label:t("@sketch-tool-highlighter")}))),React.createElement(FormLabelColorField,{label:t("@common-color"),value:y?p:d,ColorInputProps:{presetColors:y?HighlighterColours:PenColours},onChange:e=>{(y?f:l)(e)}}),React.createElement(FormControl,{className:sketchDialogClasses.size},React.createElement(FormLabel,null,t("@sketch-size")),React.createElement(Slider,{min:1,value:y?v:C,onChange:(e,t)=>{(y?R:i)(t)}}))),React.createElement(Box,{className:sketchDialogClasses.canvasScroller},React.createElement(Box,{sx:{width:`${m}px`,height:`${g}px`},className:sketchDialogClasses.canvasContainer},React.createElement("canvas",{ref:k}),React.createElement("canvas",{className:sketchDialogClasses.highlightCanvas,height:g,ref:E,style:{top:`-${g}px`},width:m}),React.createElement("canvas",{className:sketchDialogClasses.drawingCanvas,onMouseDown:e=>{const t=P(),r=t.getContext("2d");var{x:a,y:o}=B(e,t),{lineCap:l,lineWidth:i,strokeStyle:e}=y?{lineCap:"butt",lineWidth:v,strokeStyle:p}:{lineCap:"round",lineWidth:C,strokeStyle:d};r.beginPath(),r.lineCap=l,r.lineWidth=i,r.strokeStyle=e,r.moveTo(a,o),S.current.length=0,S.current.push({x:a,y:o}),T.current=!0},onMouseLeave:L,onMouseMove:e=>{if(T.current){const r=P(),a=r.getContext("2d");var{x:t,y:e}=B(e,r);a.lineTo(t,e),a.stroke(),S.current.push({x:t,y:e})}},onMouseUp:L,ref:F,style:{top:`-${2*g}px`}})))),React.createElement(DialogActions,null,React.createElement(Button,{color:"primary",onClick:()=>{if(0!==w.current.length){const t=k.current.getContext("2d");t.globalAlpha=.5,t.drawImage(E.current,0,0),t.globalAlpha=1,t.drawImage(F.current,0,0);var e=k.current.toDataURL("image/png");r(!0,{dataUrl:e,history:[...w.current],width:m,height:g})}else I()},variant:"contained"},t("@common-done")),React.createElement(Button,{color:"inherit",onClick:I,variant:"outlined"},t("@common-cancel"))))};export default SketchDialog;export{sketchDialogClasses};

package/forms/components/TabGroup.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormComponent } from "../FormComponent";
 interface TabGroupProps {
     /** The CSS class name of the root element. */
@@ -11,5 +11,5 @@ interface TabGroupProps {
 /**
  * This component contains a set of "Section" Form Elements with a `format` of `"tab-section"`.
  */
-declare const TabGroup: ({ className, component }: TabGroupProps) => JSX.Element;
+declare const TabGroup: ({ className, component }: TabGroupProps) => React.JSX.Element;
 export default TabGroup;

package/forms/components/Text.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 /**
  * The component for the "Text" Form Element.
  * It just exposes the Title and Description which are common to all.
  */
-declare const Text: ({ className, component, element }: FormElementProps) => JSX.Element;
+declare const Text: ({ className, component, element }: FormElementProps) => React.JSX.Element;
 export default Text;

package/forms/components/TextArea.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 /**
  * The component for the "Text Area" Form Element.
  */
-declare const TextArea: ({ className, component, element, enabled, name, maxLength, prompt, readOnly, renderFocus: hostRenderFocus, require, size, tooltip, value: elementValue, wrap: elementWrap, renderText, setValue: setElementValue, }: FormElementProps<string | undefined>) => JSX.Element;
+declare const TextArea: ({ className, component, element, enabled, name, maxLength, prompt, readOnly, renderFocus: hostRenderFocus, require, size, tooltip, value: elementValue, wrap: elementWrap, renderText, setValue: setElementValue, }: FormElementProps<string | undefined>) => React.JSX.Element;
 export default TextArea;

package/forms/components/TextBox.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 /**
  * The component for the "Text Box" and "Password Box" Form Elements.
  */
-declare const TextBox: ({ className, component, element, enabled, formatNumber, type: elementType, maxLength: elementMaxLength, name, prompt, readOnly: elementReadOnly, renderFocus: hostRenderFocus, require, tooltip, value: elementValue, renderText, setValue: setElementValue, }: FormElementProps<string | undefined>) => JSX.Element;
+declare const TextBox: ({ className, component, element, enabled, formatNumber, type: elementType, maxLength: elementMaxLength, name, prompt, readOnly: elementReadOnly, renderFocus: hostRenderFocus, require, tooltip, value: elementValue, renderText, setValue: setElementValue, }: FormElementProps<string | undefined>) => React.JSX.Element;
 export default TextBox;

package/forms/components/TimePicker.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormElementProps } from "../..";
 import type { defs } from "../FormHost";
 /**
  * The component for the "Time Picker" Form Element.
  */
-declare const TimePicker: ({ className, component, deriveLocale, element, enabled, error, name, prompt, renderFocus, renderText, setProperty, setValue: setElementValue, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.DateTimeRef | undefined>) => JSX.Element;
+declare const TimePicker: ({ className, component, deriveLocale, element, enabled, error, format: elementFormat, name, prompt, renderFocus, renderText, setProperty, setValue: setElementValue, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.DateTimeRef | undefined>) => React.JSX.Element;
 export default TimePicker;

package/forms/components/TimePicker.js

@@ -1 +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{areValuesEqual,isInvalidDate,makeProperValue}from"../dateUtilities.js";import{getNewElementValue}from"../dateUtilities.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId}from"../utils.js";const StylableTimePicker=e=>{const{PopperProps:t={},className:r,...a}=e;return React.createElement(BaseTimePicker,{PopperProps:{...t,className:clsx(t.className,r)},...a})},StyledTimePicker=styled(StylableTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),TimePicker=({className:e,component:t,deriveLocale:r,element:a,enabled:o,error:l,name:i,prompt:s,renderFocus:m,renderText:c,setProperty:n,setValue:u,tooltip:p,value:d})=>{const[f,k]=useState(!1),[v,P]=useState(!1),[E,F]=useState(null),T=useRef(),C=useRef(!0);m=useFocusCallback(o,i,m);const b=c(p),x={locale:r(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},g=Calendar.useNative(),R="time",V=isInvalidError(l);useEffect(()=>{var e=makeProperValue(d,g),t=getNewElementValue(e,R,x,g);areValuesEqual(d,t)||u(t,!1),F(e||null)},[d]),useEffect(()=>{var e;C.current?C.current=!1:v||f||(isInvalidDate(E)?V||n("error",{status:"invalid"}):(V&&n("error",void 0),e=getNewElementValue(E,R,x,g),areValuesEqual(d,e)||u(e)))},[v,f]);const y=`${makeUniqueId(i)}-input`,B=c(s);return React.createElement(FormElement,{className:e,component:t,element:a,inputId:y},V&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},T.current),React.createElement(StyledTimePicker,{disabled:!o,key:"date-picker",inputRef:m,onChange:e=>{F(e)},onOpen:()=>{P(!0)},onClose:()=>{P(!1)},renderInput:e=>(T.current=e.inputProps?.placeholder,e.error=!!l,e.inputProps={...e.inputProps,id:y,onBlur:()=>{k(!1)},onFocus:()=>{k(!0)},placeholder:B||e.inputProps?.placeholder,title:b},React.createElement(FormLabelTextField,{...e})),value:E}))};export default TimePicker;
+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{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId}from"../utils.js";const StylableTimePicker=e=>{const{PopperProps:t={},className:r,...o}=e;return React.createElement(BaseTimePicker,{PopperProps:{...t,className:clsx(t.className,r)},...o})},StyledTimePicker=styled(StylableTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),TimePicker=({className:e,component:t,deriveLocale:r,element:o,enabled:a,error:l,format:i,name:s,prompt:m,renderFocus:n,renderText:c,setProperty:u,setValue:p,tooltip:d,value:f})=>{const[k,v]=useState(null),[P,E]=useState(!1),[T,F]=useState(!1),[x,C]=useState(null),b=useRef(),g=useRef(!0);n=useFocusCallback(a,s,n);const B=c(d),R={locale:r(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},V=Calendar.useNative(),y="time",N=isInvalidError(l);useEffect(()=>{var e=makeProperValue(f,V),t=getNewElementValue(e,y,R,V);areValuesEqual(f,t)||p(t,!1),C(e||null)},[f]),useEffect(()=>{if(!T&&!P)if(k)N||u("error",{status:"invalid"});else{if(N&&u("error",void 0),g.current)return void(g.current=!1);var e=getNewElementValue(x,y,R,V);areValuesEqual(f,e)||p(e)}g.current=!1},[k,P,T]);var{min:r,max:i}=getDateBounds(i);const S=`${makeUniqueId(s)}-input`,I=c(m);return React.createElement(FormElement,{className:e,component:t,element:o,inputId:S},N&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},b.current),React.createElement(StyledTimePicker,{disabled:!a,inputRef:n,key:"date-picker",maxTime:i,minTime:r,onChange:e=>C(e),onClose:()=>F(!1),onError:e=>v(e),onOpen:()=>F(!0),renderInput:e=>(b.current=e.inputProps?.placeholder,e.error=!!l,e.inputProps={...e.inputProps,id:S,onBlur:()=>{E(!1)},onFocus:()=>{E(!0)},placeholder:I||e.inputProps?.placeholder,title:B},React.createElement(FormLabelTextField,{...e})),value:x}))};export default TimePicker;

package/forms/constants.d.ts

@@ -47,11 +47,18 @@ export declare const FormElementTypes: {
     SCANNER: string;
     SECTION: string;
     SIGNATURE: string;
+    SKETCH: string;
     TEXT: string;
     TEXTAREA: string;
     TEXTBOX: string;
     TIMEPICKER: string;
 };
+export declare enum FormElementSize {
+    Full = "full",
+    Large = "large",
+    Medium = "medium",
+    Small = "small"
+}
 /**
  * The way that Form Element Items are presented to the user.
  * @public

package/forms/constants.js

@@ -1 +1 @@
-const FormComponentTypes={ACCORDIONGROUP:"accordionGroup",BODY:"body",ELEMENT:"element",FOOTER:"footer",FORM:"form",HEADER:"header",MAIN:"main",ROW:"row",SECTION:"section",TABGROUP:"tabGroup"},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};
+const FormComponentTypes={ACCORDIONGROUP:"accordionGroup",BODY:"body",ELEMENT:"element",FOOTER:"footer",FORM:"form",HEADER:"header",MAIN:"main",ROW:"row",SECTION:"section",TABGROUP:"tabGroup"},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",SKETCH:"Sketch",TEXT:"Text",TEXTAREA:"TextArea",TEXTBOX:"TextBox",TIMEPICKER:"TimePicker"};var FormElementSize,ScanType;!function(e){e.Full="full",e.Large="large",e.Medium="medium",e.Small="small"}(FormElementSize=FormElementSize||{});const Orientation={HORIZONTAL:"horizontal",VERTICAL:"vertical"};!function(e){e.BarCode="barcode",e.QrCode="qrcode"}(ScanType=ScanType||{});const TitleLocation={ABOVE:"above",BESIDE:"beside"};export{FormComponentTypes,FormElementTypes,FormElementSize,Orientation,ScanType,TitleLocation};

package/forms/dateUtilities.d.ts

@@ -1,5 +1,5 @@
 import { Calendar } from "./Calendar";
-import type { DateRangeRef, DateTimeFormat, DateTimeRef, DateTimeType } from "./FormDefinition";
+import type { DateRangeRef, DateTimeFormat, DateTimeRef, DateTimeType, FormatRef } from "./FormDefinition";
 import type { defs } from "./FormHost";
 import type { FormPresenterHost } from "./FormPresenterHost";
 /**
@@ -43,6 +43,16 @@ export declare function tryParseDay(day: string): string | undefined;
  * @param input The input date text.
  */
 export declare function tryParseDateText(input: string): string | undefined;
+/**
+ * Uses the `lowerBound` and `upperBound` properties of the supplied format
+ * to construct dates for the minimum and maximum values to be returned.
+ * @param format The format property from a form element.
+ * @returns The minimum and maximum values as Dates.
+ */
+export declare function getDateBounds(format: FormatRef | undefined): {
+    min: Date | undefined;
+    max: Date | undefined;
+};
 /**
  * Retrieves the DateFns locale corresponding to the specified language. This function will return undefined
  * if the locale is not found.
@@ -97,6 +107,5 @@ type Partial = void | boolean | number | string | {
     value?: number;
 };
 export declare function makeProperValue(value: number | string | Partial, calendar: Calendar): Date | undefined;
-export declare function isInvalidDate(date: Date | null): boolean;
 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{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]}`}}}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 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 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,getDateFnsLocale,getLocaleDateFormat,getLocaleDateFormatSeparator,getLocaleDateFormatTokenPosition,convertToDateRangeRef,__test__setlocaleDateFormatInCache,loadLocale,makeProperValue,isInvalidDate,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}}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 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,getLocaleDateFormat,getLocaleDateFormatSeparator,getLocaleDateFormatTokenPosition,convertToDateRangeRef,__test__setlocaleDateFormatInCache,loadLocale,makeProperValue,getNewElementValue};

package/forms/elements/Sketch.d.ts

@@ -0,0 +1,8 @@
+import type * as types from "./types";
+import type { SketchRef } from "../FormDefinition";
+export interface Sketch extends types.ElementBase, types.EditableElement, types.ElementWithRequire {
+    /** The source image to be sketched upon. */
+    readonly source?: string | File;
+    /** Indicates the current value. */
+    readonly value?: SketchRef;
+}

package/forms/index.d.ts

@@ -76,7 +76,7 @@ export interface FormElementProps<TValue = undefined> extends FormElementSettabl
 /**
  * Properties of a Form Element that can be read via the component's properties.
  */
-interface FormElementGettableProps extends Pick<defs.Element, "accessibleDescription" | "autoActivate" | "checked" | "collapsed" | "current" | "customType" | "delay" | "description" | "error" | "fileTypes" | "format" | "itemLabel" | "items" | "label" | "manualEntry" | "maxLength" | "minLength" | "orientation" | "prompt" | "readOnly" | "require" | "scanType" | "selectionMode" | "showFilter" | "showMinMaxLabels" | "showTickMarks" | "size" | "state" | "title" | "tooltip" | "type" | "wrap"> {
+interface FormElementGettableProps extends Pick<defs.Element, "accessibleDescription" | "autoActivate" | "checked" | "collapsed" | "current" | "customType" | "delay" | "description" | "error" | "fileTypes" | "format" | "itemLabel" | "items" | "label" | "manualEntry" | "maxLength" | "minLength" | "orientation" | "prompt" | "readOnly" | "require" | "scanType" | "selectionMode" | "showFilter" | "showMinMaxLabels" | "showTickMarks" | "size" | "source" | "state" | "title" | "tooltip" | "type" | "wrap"> {
 }
 /**
  * Properties of a Form Element that can be set using `SetProperty()`.

package/forms/manifest.js

@@ -1 +1 @@
-import AutoComplete from"./components/AutoComplete.js";import ButtonBar from"./components/ButtonBar.js";import CheckBox from"./components/CheckBox.js";import CheckGroup from"./components/CheckGroup.js";import Custom from"./components/Custom.js";import DatePicker from"./components/DatePicker.js";import DateRangePicker from"./components/DateRangePicker.js";import DateTimePicker from"./components/DateTimePicker.js";import DropDownList from"./components/DropDownList.js";import FilePicker from"./components/FilePicker.js";import GeometryPicker from"./components/GeometryPicker.js";import HorizontalRule from"./components/HorizontalRule.js";import Image from"./components/Image.js";import ItemPicker from"./components/ItemPicker.js";import ListBox from"./components/ListBox.js";import Number from"./components/Number.js";import NumberRangeSlider from"./components/NumberRangeSlider.js";import NumberSlider from"./components/NumberSlider.js";import RadioGroup from"./components/RadioGroup.js";import Scanner from"./components/Scanner.js";import Section from"./components/Section.js";import Signature from"./components/Signature.js";import Text from"./components/Text.js";import TextArea from"./components/TextArea.js";import TextBox from"./components/TextBox.js";import TimePicker from"./components/TimePicker.js";import{FormElementTypes}from"./constants.js";const BuiltInFormElements={[FormElementTypes.AUTOCOMPLETE]:{id:FormElementTypes.AUTOCOMPLETE,component:AutoComplete},[FormElementTypes.BUTTONBAR]:{id:FormElementTypes.BUTTONBAR,component:ButtonBar},[FormElementTypes.CHECKBOX]:{id:FormElementTypes.CHECKBOX,component:CheckBox},[FormElementTypes.CHECKGROUP]:{id:FormElementTypes.CHECKGROUP,component:CheckGroup},[FormElementTypes.CUSTOM]:{id:FormElementTypes.CUSTOM,component:Custom},[FormElementTypes.DATEPICKER]:{id:FormElementTypes.DATEPICKER,component:DatePicker},[FormElementTypes.DATERANGEPICKER]:{id:FormElementTypes.DATERANGEPICKER,component:DateRangePicker},[FormElementTypes.DATETIMEPICKER]:{id:FormElementTypes.DATETIMEPICKER,component:DateTimePicker},[FormElementTypes.DROPDOWNLIST]:{id:FormElementTypes.DROPDOWNLIST,component:DropDownList},[FormElementTypes.FILEPICKER]:{id:FormElementTypes.FILEPICKER,component:FilePicker},[FormElementTypes.GEOMETRYPICKER]:{id:FormElementTypes.GEOMETRYPICKER,component:GeometryPicker},[FormElementTypes.HORIZONTALRULE]:{id:FormElementTypes.HORIZONTALRULE,component:HorizontalRule},[FormElementTypes.IMAGE]:{id:FormElementTypes.IMAGE,component:Image},[FormElementTypes.ITEMPICKER]:{id:FormElementTypes.ITEMPICKER,component:ItemPicker},[FormElementTypes.LISTBOX]:{id:FormElementTypes.LISTBOX,component:ListBox},[FormElementTypes.NUMBER]:{id:FormElementTypes.NUMBER,component:Number},[FormElementTypes.NUMBERRANGESLIDER]:{id:FormElementTypes.NUMBERRANGESLIDER,component:NumberRangeSlider},[FormElementTypes.NUMBERSLIDER]:{id:FormElementTypes.NUMBERSLIDER,component:NumberSlider},[FormElementTypes.PASSWORDBOX]:{id:FormElementTypes.PASSWORDBOX,component:TextBox},[FormElementTypes.RADIOGROUP]:{id:FormElementTypes.RADIOGROUP,component:RadioGroup},[FormElementTypes.SCANNER]:{id:FormElementTypes.SCANNER,component:Scanner},[FormElementTypes.SECTION]:{id:FormElementTypes.SECTION,component:Section},[FormElementTypes.SIGNATURE]:{id:FormElementTypes.SIGNATURE,component:Signature},[FormElementTypes.TEXT]:{id:FormElementTypes.TEXT,component:Text},[FormElementTypes.TEXTAREA]:{id:FormElementTypes.TEXTAREA,component:TextArea},[FormElementTypes.TEXTBOX]:{id:FormElementTypes.TEXTBOX,component:TextBox},[FormElementTypes.TIMEPICKER]:{id:FormElementTypes.TIMEPICKER,component:TimePicker}};export{BuiltInFormElements};
+import AutoComplete from"./components/AutoComplete.js";import ButtonBar from"./components/ButtonBar.js";import CheckBox from"./components/CheckBox.js";import CheckGroup from"./components/CheckGroup.js";import Custom from"./components/Custom.js";import DatePicker from"./components/DatePicker.js";import DateRangePicker from"./components/DateRangePicker.js";import DateTimePicker from"./components/DateTimePicker.js";import DropDownList from"./components/DropDownList.js";import FilePicker from"./components/FilePicker.js";import GeometryPicker from"./components/GeometryPicker.js";import HorizontalRule from"./components/HorizontalRule.js";import Image from"./components/Image.js";import ItemPicker from"./components/ItemPicker.js";import ListBox from"./components/ListBox.js";import Number from"./components/Number.js";import NumberRangeSlider from"./components/NumberRangeSlider.js";import NumberSlider from"./components/NumberSlider.js";import RadioGroup from"./components/RadioGroup.js";import Scanner from"./components/Scanner.js";import Section from"./components/Section.js";import Signature from"./components/Signature.js";import Sketch from"./components/Sketch.js";import Text from"./components/Text.js";import TextArea from"./components/TextArea.js";import TextBox from"./components/TextBox.js";import TimePicker from"./components/TimePicker.js";import{FormElementTypes}from"./constants.js";const BuiltInFormElements={[FormElementTypes.AUTOCOMPLETE]:{id:FormElementTypes.AUTOCOMPLETE,component:AutoComplete},[FormElementTypes.BUTTONBAR]:{id:FormElementTypes.BUTTONBAR,component:ButtonBar},[FormElementTypes.CHECKBOX]:{id:FormElementTypes.CHECKBOX,component:CheckBox},[FormElementTypes.CHECKGROUP]:{id:FormElementTypes.CHECKGROUP,component:CheckGroup},[FormElementTypes.CUSTOM]:{id:FormElementTypes.CUSTOM,component:Custom},[FormElementTypes.DATEPICKER]:{id:FormElementTypes.DATEPICKER,component:DatePicker},[FormElementTypes.DATERANGEPICKER]:{id:FormElementTypes.DATERANGEPICKER,component:DateRangePicker},[FormElementTypes.DATETIMEPICKER]:{id:FormElementTypes.DATETIMEPICKER,component:DateTimePicker},[FormElementTypes.DROPDOWNLIST]:{id:FormElementTypes.DROPDOWNLIST,component:DropDownList},[FormElementTypes.FILEPICKER]:{id:FormElementTypes.FILEPICKER,component:FilePicker},[FormElementTypes.GEOMETRYPICKER]:{id:FormElementTypes.GEOMETRYPICKER,component:GeometryPicker},[FormElementTypes.HORIZONTALRULE]:{id:FormElementTypes.HORIZONTALRULE,component:HorizontalRule},[FormElementTypes.IMAGE]:{id:FormElementTypes.IMAGE,component:Image},[FormElementTypes.ITEMPICKER]:{id:FormElementTypes.ITEMPICKER,component:ItemPicker},[FormElementTypes.LISTBOX]:{id:FormElementTypes.LISTBOX,component:ListBox},[FormElementTypes.NUMBER]:{id:FormElementTypes.NUMBER,component:Number},[FormElementTypes.NUMBERRANGESLIDER]:{id:FormElementTypes.NUMBERRANGESLIDER,component:NumberRangeSlider},[FormElementTypes.NUMBERSLIDER]:{id:FormElementTypes.NUMBERSLIDER,component:NumberSlider},[FormElementTypes.PASSWORDBOX]:{id:FormElementTypes.PASSWORDBOX,component:TextBox},[FormElementTypes.RADIOGROUP]:{id:FormElementTypes.RADIOGROUP,component:RadioGroup},[FormElementTypes.SCANNER]:{id:FormElementTypes.SCANNER,component:Scanner},[FormElementTypes.SECTION]:{id:FormElementTypes.SECTION,component:Section},[FormElementTypes.SIGNATURE]:{id:FormElementTypes.SIGNATURE,component:Signature},[FormElementTypes.SKETCH]:{id:FormElementTypes.SKETCH,component:Sketch},[FormElementTypes.TEXT]:{id:FormElementTypes.TEXT,component:Text},[FormElementTypes.TEXTAREA]:{id:FormElementTypes.TEXTAREA,component:TextArea},[FormElementTypes.TEXTBOX]:{id:FormElementTypes.TEXTBOX,component:TextBox},[FormElementTypes.TIMEPICKER]:{id:FormElementTypes.TIMEPICKER,component:TimePicker}};export{BuiltInFormElements};

package/forms/presenter.js

@@ -1 +1 @@
-import{createElement}from"react";import*as React from"react";import{unmountComponentAtNode,render as reactRender}from"react-dom";import{FormComponent}from"./FormComponent.js";import Custom from"./components/Custom.js";import{FormComponentTypes,FormElementTypes}from"./constants.js";import{renderComponent,renderNone as renderers_renderNone}from"./renderers.js";import{getElementProps}from"./utils.js";function refresh(e){e instanceof FormComponent&&e.forceUpdate()}function refreshForm(e,r){reactRender(React.createElement(FormComponent,{host:e,type:"form",children:[]}),r)}function releaseForm(e){unmountComponentAtNode(e)}function render(e){if(e instanceof FormComponent){var r=e.props.type;if(r!==FormComponentTypes.ELEMENT&&r!==FormComponentTypes.SECTION)return renderComponent(e);var n=e.prepare();if(null==n)return;r=n.type;if("string"!=typeof r)return;if(r===FormElementTypes.CUSTOM)return createElement(Custom,getElementProps(e,n));if(e.elementRegistration)return createElement(e.elementRegistration.component,getElementProps(e,n))}}function renderNone(e){if(e instanceof FormComponent)return renderers_renderNone(e)}export{refresh,refreshForm,releaseForm,render,renderNone};
+import{createElement}from"react";import*as React from"react";import{createRoot}from"react-dom/client";import{FormComponent}from"./FormComponent.js";import Custom from"./components/Custom.js";import{FormComponentTypes,FormElementTypes}from"./constants.js";import{renderComponent,renderNone as renderers_renderNone}from"./renderers.js";import{getElementProps}from"./utils.js";function refresh(e){e instanceof FormComponent&&e.forceUpdate()}const rootMap=new WeakMap;function refreshForm(e,r){rootMap.has(r)||rootMap.set(r,createRoot(r)),rootMap.get(r).render(React.createElement(FormComponent,{host:e,type:"form",children:[]}))}function releaseForm(e){rootMap.has(e)&&(rootMap.get(e).unmount(),rootMap.delete(e))}function render(e){if(e instanceof FormComponent){var r=e.props.type;if(r!==FormComponentTypes.ELEMENT&&r!==FormComponentTypes.SECTION)return renderComponent(e);var o=e.prepare();if(null==o)return;r=o.type;if("string"!=typeof r)return;if(r===FormElementTypes.CUSTOM)return createElement(Custom,getElementProps(e,o));if(e.elementRegistration)return createElement(e.elementRegistration.component,getElementProps(e,o))}}function renderNone(e){if(e instanceof FormComponent)return renderers_renderNone(e)}export{refresh,refreshForm,releaseForm,render,renderNone};

package/forms/renderers.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { FormComponent } from "./FormComponent";
 /** @product This is intended for internal use only within VertiGIS Studio products. */
-export declare function renderComponent(component: FormComponent): JSX.Element | null;
+export declare function renderComponent(component: FormComponent): React.JSX.Element | null;
 export declare function renderNone(component: FormComponent): any;

package/forms/utils.d.ts

@@ -145,6 +145,8 @@ export declare function isItemsRef(value: defs.Value | undefined): value is defs
 /** @product This is intended for internal use only within VertiGIS Studio products. */
 export declare function isNumberRef(value: defs.Value | undefined): value is defs.NumberRef;
 /** @product This is intended for internal use only within VertiGIS Studio products. */
+export declare function isSketchRef(value: defs.Value | undefined): value is defs.SketchRef;
+/** @product This is intended for internal use only within VertiGIS Studio products. */
 export declare function sanitizeGeometryRef(value: defs.Value | undefined): defs.GeometryRef | undefined;
 /** @product This is intended for internal use only within VertiGIS Studio products. */
 export declare function createGeometryRef(format: defs.GeometryFormat): defs.GeometryRef;

package/forms/utils.js

@@ -1 +1 @@
-import{FormElementTypes}from"./constants.js";import*as text from"./textUtilities.js";const DEFAULT_DEBOUNCE_DELAY=300,DEFAULT_THROTTLE_DELAY=100;let next=0,seed=(new Date).valueOf();const guid="5DDC9A38-AAAB-44C1-AD87-415160F43D75";function makeId(){return 2147483648<=next&&(seed=(new Date).valueOf(),next=0),`${guid}:${seed}:${next++}`}function indexOf(e,t){if(null!=e){e=e.index;return"number"==typeof e?e:t}}function compareIndex(e,t){return compareNumber(e.index,t.index)}function compareNumber(e,t){return e<t?-1:t<e?1:0}function sortAndFilter(e,t){void 0===t&&(t=indexOf);const n={};if("object"!=typeof e||null===e)return n;let i=0;const r=[];for(const a in e){var s=e[a],o=t(s,i++);"number"==typeof o&&r.push({key:a,index:o,item:s})}for(const c of r.sort(compareIndex))n[c.key]=c.item;return n}function inspectItems(e,t,n){let i;var r=sortAndFilter(t,function(e,t){if(null!=e&&!1!==e.visible){e=e.index;return"number"==typeof e?e:t}});if(void 0===(e=null==e||void 0===r[e]?void 0:e)&&null!=n)for(const s in r){if(r[s].value===n){e=s;break}e=void 0}return n=void 0!==e?(i=r[e].label,r[e].value):i=void 0,{current:e,items:r,label:i,value:n}}function stripClassName(e,t){return e.className.split(" ").filter(e=>0<e.length&&e!==t).join(" ")}function makeSafeClassName(e){return`gcx-forms-${e?.replace(/[\W]/g,"")||"element"}`}let idSuffix=0;function makeUniqueId(e){return`${makeSafeClassName(e)}-${++idSuffix}`}function addClass(e,t){void 0!==e.classList?e.classList.add(t):e.className=stripClassName(e,t)+" "+t}function removeClass(e,t){void 0!==e.classList?e.classList.remove(t):e.className=stripClassName(e,t)}function setClass(e,t,n){(n?addClass:removeClass)(e,t)}function isObjectType(e,t){return"object"==typeof e&&null!==e&&(!Array.isArray(e)&&e.refValueType===t)}function isSection(e){return e?.type===FormElementTypes.SECTION}function isAccordionSection(e){return isSection(e)&&"accordion-section"===e.format}function isCollapsibleSection(e){return isSection(e)&&"collapsible-section"===e.format}function isMutuallyExclusiveSection(e){return isAccordionSection(e)||isTabSection(e)}function isTabSection(e){return isSection(e)&&"tab-section"===e.format}function isBoolean(e){return"boolean"==typeof e}function isNumber(e){return"number"==typeof e}function isString(e){return"string"==typeof e}function isDataRef(e){return isObjectType(e,"data")}function isDateRangeRef(e){return isObjectType(e,"daterange")}function isDateTimeRef(e){return isObjectType(e,"date")||isObjectType(e,"time")||isObjectType(e,"datetime")}function isFilesRef(e){return isObjectType(e,"files")}function isScanRef(e){return isObjectType(e,"scan")}function isGeometryRef(e){return isObjectType(e,"geometry")}function isItemsRef(e){return isObjectType(e,"items")}function isNumberRef(e){return isObjectType(e,"number")}function sanitizeGeometryRef(e){if(isGeometryRef(e)){var t=e.geometry;if(Array.isArray(t)&&0<t.length)switch(e.format){case"point":case"polygon":case"polyline":case"polygon-freehand":case"polyline-freehand":case"extent":case"line":return e}}}function createGeometryRef(e){return{refValueType:"geometry",format:e,geometry:[]}}function debounce(t,n=DEFAULT_DEBOUNCE_DELAY){let i;return function(){const e=()=>{i=void 0,t.apply(this,arguments)};return clearTimeout(i),i=setTimeout(e,n),{now:()=>{i&&(clearTimeout(i),e())},cancel:()=>{i&&(clearTimeout(i),i=void 0)}}}}function throttle(n,i=DEFAULT_THROTTLE_DELAY){let r,s;return function(){var e=Date.now(),t=()=>{s=void 0,r=Date.now(),n.apply(this,arguments)};r&&e<r+i?(clearTimeout(s),s=setTimeout(t,i)):t()}}function isNumeric(e){return!isNaN(parseFloat(e))&&isFinite(e)}const HostMap=new WeakMap;function getElementProps(e,t){var{enabled:n,id:i,raiseEvent:r,setItemProperty:s,setProperty:o,setValue:a}=e;const c=e.props["host"];let u=HostMap.get(c);u||(u={coerceNumber:c.coerceNumber.bind(c),deriveLocale:c.deriveLocale.bind(c),displayDialog:c.displayDialog.bind(c),formatNumber:c.formatNumber.bind(c),hasInvalidChild:c.hasInvalidChild.bind(c),refs:c.refs,renderFocus:c.renderFocus.bind(c),renderState:c.renderState.bind(c),renderText:c.renderText.bind(c),translateText:c.translateText.bind(c),updateMutuallyExclusiveSections:c.updateMutuallyExclusiveSections.bind(c)},HostMap.set(c,u));var{format:l,manualEntry:f,showMinMaxLabels:m,showTickMarks:d,size:p,type:y,value:b,wrap:T}=t;return{...t,enabled:!!n,id:i,raiseEvent:r,setItemProperty:s,setProperty:o,setValue:a,format:l,manualEntry:f,showMinMaxLabels:m,showTickMarks:d,size:p,type:y,value:b,wrap:T,coerceNumber:u.coerceNumber,displayDialog:u.displayDialog,deriveLocale:u.deriveLocale,formatNumber:u.formatNumber,hasInvalidChild:u.hasInvalidChild,refs:u.refs,renderFocus:u.renderFocus,renderState:u.renderState,renderText:u.renderText,translateText:u.translateText,updateMutuallyExclusiveSections:u.updateMutuallyExclusiveSections,element:t,name:e.props.name,component:e}}function getItemId(e,t){if(e)for(const n in t)if(t[n]===e)return n}export{text,makeId,sortAndFilter,inspectItems,makeSafeClassName,makeUniqueId,addClass,removeClass,setClass,isSection,isAccordionSection,isCollapsibleSection,isMutuallyExclusiveSection,isTabSection,isBoolean,isNumber,isString,isDataRef,isDateRangeRef,isDateTimeRef,isFilesRef,isScanRef,isGeometryRef,isItemsRef,isNumberRef,sanitizeGeometryRef,createGeometryRef,debounce,throttle,isNumeric,getElementProps,getItemId};
+import{FormElementTypes}from"./constants.js";import*as text from"./textUtilities.js";const DEFAULT_DEBOUNCE_DELAY=300,DEFAULT_THROTTLE_DELAY=100;let next=0,seed=(new Date).valueOf();const guid="5DDC9A38-AAAB-44C1-AD87-415160F43D75";function makeId(){return 2147483648<=next&&(seed=(new Date).valueOf(),next=0),`${guid}:${seed}:${next++}`}function indexOf(e,t){if(null!=e){e=e.index;return"number"==typeof e?e:t}}function compareIndex(e,t){return compareNumber(e.index,t.index)}function compareNumber(e,t){return e<t?-1:t<e?1:0}function sortAndFilter(e,t){void 0===t&&(t=indexOf);const n={};if("object"!=typeof e||null===e)return n;let i=0;const r=[];for(const a in e){var s=e[a],o=t(s,i++);"number"==typeof o&&r.push({key:a,index:o,item:s})}for(const c of r.sort(compareIndex))n[c.key]=c.item;return n}function inspectItems(e,t,n){let i;var r=sortAndFilter(t,function(e,t){if(null!=e&&!1!==e.visible){e=e.index;return"number"==typeof e?e:t}});if(void 0===(e=null==e||void 0===r[e]?void 0:e)&&null!=n)for(const s in r){if(r[s].value===n){e=s;break}e=void 0}return n=void 0!==e?(i=r[e].label,r[e].value):i=void 0,{current:e,items:r,label:i,value:n}}function stripClassName(e,t){return e.className.split(" ").filter(e=>0<e.length&&e!==t).join(" ")}function makeSafeClassName(e){return`gcx-forms-${e?.replace(/[\W]/g,"")||"element"}`}let idSuffix=0;function makeUniqueId(e){return`${makeSafeClassName(e)}-${++idSuffix}`}function addClass(e,t){void 0!==e.classList?e.classList.add(t):e.className=stripClassName(e,t)+" "+t}function removeClass(e,t){void 0!==e.classList?e.classList.remove(t):e.className=stripClassName(e,t)}function setClass(e,t,n){(n?addClass:removeClass)(e,t)}function isObjectType(e,t){return"object"==typeof e&&null!==e&&(!Array.isArray(e)&&e.refValueType===t)}function isSection(e){return e?.type===FormElementTypes.SECTION}function isAccordionSection(e){return isSection(e)&&"accordion-section"===e.format}function isCollapsibleSection(e){return isSection(e)&&"collapsible-section"===e.format}function isMutuallyExclusiveSection(e){return isAccordionSection(e)||isTabSection(e)}function isTabSection(e){return isSection(e)&&"tab-section"===e.format}function isBoolean(e){return"boolean"==typeof e}function isNumber(e){return"number"==typeof e}function isString(e){return"string"==typeof e}function isDataRef(e){return isObjectType(e,"data")}function isDateRangeRef(e){return isObjectType(e,"daterange")}function isDateTimeRef(e){return isObjectType(e,"date")||isObjectType(e,"time")||isObjectType(e,"datetime")}function isFilesRef(e){return isObjectType(e,"files")}function isScanRef(e){return isObjectType(e,"scan")}function isGeometryRef(e){return isObjectType(e,"geometry")}function isItemsRef(e){return isObjectType(e,"items")}function isNumberRef(e){return isObjectType(e,"number")}function isSketchRef(e){return isObjectType(e,"sketch")}function sanitizeGeometryRef(e){if(isGeometryRef(e)){var t=e.geometry;if(Array.isArray(t)&&0<t.length)switch(e.format){case"point":case"polygon":case"polyline":case"polygon-freehand":case"polyline-freehand":case"extent":case"line":return e}}}function createGeometryRef(e){return{refValueType:"geometry",format:e,geometry:[]}}function debounce(t,n=DEFAULT_DEBOUNCE_DELAY){let i;return function(){const e=()=>{i=void 0,t.apply(this,arguments)};return clearTimeout(i),i=setTimeout(e,n),{now:()=>{i&&(clearTimeout(i),e())},cancel:()=>{i&&(clearTimeout(i),i=void 0)}}}}function throttle(n,i=DEFAULT_THROTTLE_DELAY){let r,s;return function(){var e=Date.now(),t=()=>{s=void 0,r=Date.now(),n.apply(this,arguments)};r&&e<r+i?(clearTimeout(s),s=setTimeout(t,i)):t()}}function isNumeric(e){return!isNaN(parseFloat(e))&&isFinite(e)}const HostMap=new WeakMap;function getElementProps(e,t){var{enabled:n,id:i,raiseEvent:r,setItemProperty:s,setProperty:o,setValue:a}=e;const c=e.props["host"];let u=HostMap.get(c);u||(u={coerceNumber:c.coerceNumber.bind(c),deriveLocale:c.deriveLocale.bind(c),displayDialog:c.displayDialog.bind(c),formatNumber:c.formatNumber.bind(c),hasInvalidChild:c.hasInvalidChild.bind(c),refs:c.refs,renderFocus:c.renderFocus.bind(c),renderState:c.renderState.bind(c),renderText:c.renderText.bind(c),translateText:c.translateText.bind(c),updateMutuallyExclusiveSections:c.updateMutuallyExclusiveSections.bind(c)},HostMap.set(c,u));var{format:l,manualEntry:f,showMinMaxLabels:m,showTickMarks:d,size:p,type:y,value:b,wrap:T}=t;return{...t,enabled:!!n,id:i,raiseEvent:r,setItemProperty:s,setProperty:o,setValue:a,format:l,manualEntry:f,showMinMaxLabels:m,showTickMarks:d,size:p,type:y,value:b,wrap:T,coerceNumber:u.coerceNumber,displayDialog:u.displayDialog,deriveLocale:u.deriveLocale,formatNumber:u.formatNumber,hasInvalidChild:u.hasInvalidChild,refs:u.refs,renderFocus:u.renderFocus,renderState:u.renderState,renderText:u.renderText,translateText:u.translateText,updateMutuallyExclusiveSections:u.updateMutuallyExclusiveSections,element:t,name:e.props.name,component:e}}function getItemId(e,t){if(e)for(const n in t)if(t[n]===e)return n}export{text,makeId,sortAndFilter,inspectItems,makeSafeClassName,makeUniqueId,addClass,removeClass,setClass,isSection,isAccordionSection,isCollapsibleSection,isMutuallyExclusiveSection,isTabSection,isBoolean,isNumber,isString,isDataRef,isDateRangeRef,isDateTimeRef,isFilesRef,isScanRef,isGeometryRef,isItemsRef,isNumberRef,isSketchRef,sanitizeGeometryRef,createGeometryRef,debounce,throttle,isNumeric,getElementProps,getItemId};

package/libs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "5.38.1+5";
+export declare const VERSION = "5.39.1+3";

package/libs/version.js

@@ -1 +1 @@
-const VERSION="5.38.1+5";export{VERSION};
+const VERSION="5.39.1+3";export{VERSION};

package/licensing/LicenseChecker.js

@@ -1 +1 @@
-import{validate}from"@vertigis-internal/licensing";import*as React from"react";import{render}from"react-dom";import Watermark from"./Watermark.js";const workflowSkuCode="GCXWFL";let div;function show(){void 0===div&&(div=document.createElement("div")),div.parentNode!==document.body&&(null!==div.parentNode&&div.parentNode.removeChild(div),document.body.appendChild(div));render(React.createElement(Watermark,{hide:()=>{null!==div.parentNode&&div.parentNode.removeChild(div)},message:"VertiGIS Studio Workflow must be licensed for use in production applications."}),div)}async function check(i,o){if("localhost"!==location.hostname&&"127.0.0.1"!==location.hostname){o=o?`-${workflowSkuCode}-${o}-`:`${workflowSkuCode}-`;if(void 0===div&&(div=document.createElement("div")),null===div.parentNode){let e=i?.licenseInfo?.licenseeId;i=i?.licenseInfo?.licenseUrl;i&&!e&&(e="a");try{const t=await validate({sku:o,orgId:e,url:i});if(!t?.isValid){if(t&&!t.isEval&&t.expires)if(((new Date).getTime()-t.expires.getTime())/864e5<60)return;show()}}catch{show()}}}}export{check};
+import{validate}from"@vertigis-internal/licensing";import*as React from"react";import{createRoot}from"react-dom/client";import Watermark from"./Watermark.js";const workflowSkuCode="GCXWFL";let div,root;function show(){void 0===div&&(div=document.createElement("div"),root=createRoot(div)),div.parentNode!==document.body&&(null!==div.parentNode&&div.parentNode.removeChild(div),document.body.appendChild(div));root.render(React.createElement(Watermark,{hide:()=>{null!==div?.parentNode&&div.parentNode.removeChild(div)},message:"VertiGIS Studio Workflow must be licensed for use in production applications."}))}async function check(o,t){if("localhost"!==location.hostname&&"127.0.0.1"!==location.hostname){t=t?`-${workflowSkuCode}-${t}-`:`${workflowSkuCode}-`;if(void 0===div&&(div=document.createElement("div"),root=createRoot(div)),null===div.parentNode){let e=o?.licenseInfo?.licenseeId;o=o?.licenseInfo?.licenseUrl;o&&!e&&(e="a");try{const i=await validate({sku:t,orgId:e,url:o});if(!i?.isValid){if(i&&!i.isEval&&i.expires)if(((new Date).getTime()-i.expires.getTime())/864e5<60)return;show()}}catch{show()}}}}export{check};

package/licensing/Watermark.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 interface WatermarkProps {
     hide: () => void;
     message: string;
 }
-declare const Watermark: ({ hide, message }: WatermarkProps) => JSX.Element;
+declare const Watermark: ({ hide, message }: WatermarkProps) => React.JSX.Element;
 export default Watermark;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/workflow",
-  "version": "5.38.1",
+  "version": "5.39.1",
   "author": "VertiGIS",
   "dependencies": {
     "@zxing/library": "^0.20.0",
@@ -13,14 +13,16 @@
   "type": "module",
   "devDependencies": {
     "@arcgis/core": "4.28.10",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
     "@swc/core": "^1.3.95",
     "@swc/jest": "^0.2.29",
     "@types/autosuggest-highlight": "^3.2.0",
     "@types/jest": "^29.2.3",
-    "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.18",
+    "@types/react": "18.2.46",
+    "@types/react-dom": "18.2.18",
     "@vertigis-internal/licensing": "^5.0.102868",
-    "@vertigis/react-ui": "13.3.1",
+    "@vertigis/react-ui": "15.2.2",
     "cross-env": "7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -28,20 +30,20 @@
     "jest-runtime": "^29.3.1",
     "nock": "^13.2.9",
     "node-fetch": "^3.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "tslib": "^2.3.1",
     "typescript": "5.2.2"
   },
   "peerDependencies": {
     "@arcgis/core": ">= 4.28.10  < 5.0.0",
     "@vertigis/react-ui": ">= 13.0.0-0 < 14.0.0-0",
-    "react": ">= 17 < 19",
-    "react-dom": ">= 17 < 19"
+    "react": ">= 18 < 19",
+    "react-dom": ">= 18 < 19"
   },
   "resolutions": {
-    "@types/react": "17.0.53",
-    "@types/react-dom": "17.0.18"
+    "@types/react": "18.2.46",
+    "@types/react-dom": "18.2.18"
   },
   "homepage": "https://developers.vertigisstudio.com/docs/workflow/overview/",
   "license": "SEE LICENSE IN LICENSE",