@vertigis/workflow 5.36.0 → 5.37.1

package/forms/components/NumberRangeSlider.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { FormElementProps } from "../..";
-export declare const numberRangeSliderClasses: {
-    container: string;
-    inputContainer: string;
-    toLabel: string;
-};
-/**
- * The component for the "Number Range Slider" Form Element.
- */
-declare const NumberRangeSlider: ({ className, coerceNumber, component, deriveLocale, element, enabled, format, formatNumber, manualEntry: elementManualEntry, showMinMaxLabels: elementShowMinMaxLabels, showTickMarks: elementShowTickMarks, name, raiseEvent, renderFocus, renderText, title, tooltip: elementTooltip, value: elementValue, setValue: setElementValue, }: FormElementProps<number[] | undefined>) => JSX.Element;
-export default NumberRangeSlider;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+export declare const numberRangeSliderClasses: {
+    container: string;
+    inputContainer: string;
+    toLabel: string;
+};
+/**
+ * The component for the "Number Range Slider" Form Element.
+ */
+declare const NumberRangeSlider: ({ className, coerceNumber, component, deriveLocale, element, enabled, format, formatNumber, manualEntry: elementManualEntry, showMinMaxLabels: elementShowMinMaxLabels, showTickMarks: elementShowTickMarks, name, raiseEvent, renderFocus, renderText, title, tooltip: elementTooltip, value: elementValue, setValue: setElementValue, }: FormElementProps<number[] | undefined>) => JSX.Element;
+export default NumberRangeSlider;

package/forms/components/NumberSlider.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { FormElementProps } from "../..";
-import { NumberRef } from "../FormDefinition";
-export declare const numberSliderClasses: {
-    container: string;
-};
-/**
- * The component for the "Number Slider" Form Element.
- */
-declare const NumberSlider: ({ className, coerceNumber, component, deriveLocale, element, enabled, error, format, formatNumber, manualEntry: elementManualEntry, showMinMaxLabels: elementShowMinMaxLabels, showTickMarks: elementShowTickMarks, name, raiseEvent, renderFocus, renderText, title, tooltip: elementTooltip, value: elementValue, setValue: setElementValue, }: FormElementProps<NumberRef | undefined>) => JSX.Element;
-export default NumberSlider;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+import { NumberRef } from "../FormDefinition";
+export declare const numberSliderClasses: {
+    container: string;
+};
+/**
+ * The component for the "Number Slider" Form Element.
+ */
+declare const NumberSlider: ({ className, coerceNumber, component, deriveLocale, element, enabled, error, format, formatNumber, manualEntry: elementManualEntry, showMinMaxLabels: elementShowMinMaxLabels, showTickMarks: elementShowTickMarks, name, raiseEvent, renderFocus, renderText, title, tooltip: elementTooltip, value: elementValue, setValue: setElementValue, }: FormElementProps<NumberRef | undefined>) => JSX.Element;
+export default NumberSlider;

package/forms/components/RadioGroup.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { FormElementProps } from "../..";
-import { defs } from "../FormHost";
-/**
- * The component for the "Radio Group" Form Element.
- */
-declare const RadioGroup: ({ className, component, current, element, enabled, id, items: elementItems, label, name, orientation, raiseEvent, renderFocus: hostRenderFocus, renderText, setProperty, setValue, translateText, value, }: FormElementProps<defs.Value | undefined>) => JSX.Element;
-export default RadioGroup;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+import { defs } from "../FormHost";
+/**
+ * The component for the "Radio Group" Form Element.
+ */
+declare const RadioGroup: ({ className, component, current, element, enabled, id, items: elementItems, label, name, orientation, raiseEvent, renderFocus: hostRenderFocus, renderText, setProperty, setValue, translateText, value, }: FormElementProps<defs.Value | undefined>) => JSX.Element;
+export default RadioGroup;

package/forms/components/Scanner.d.ts

@@ -1,9 +1,11 @@
-/// <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;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+import * as defs from "../FormDefinition";
+import { ScanRef } from "../FormDefinition";
+export declare const scannerClasses: {
+    container: string;
+    button: string;
+    inputContainer: string;
+};
+declare const Scanner: ({ autoActivate, className, component, element, enabled, manualEntry, name, raiseEvent, renderFocus, renderText, require, scanType, setProperty, setValue: setElementValue, size, tooltip: elementTooltip, value: elementValue, }: FormElementProps<defs.ScanRef | undefined>) => JSX.Element;
+export default Scanner;

package/forms/components/Scanner.js

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

package/forms/components/Section.d.ts

@@ -1,14 +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;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+export declare const sectionClasses: {
+    root: string;
+    basicSection: string;
+    fieldSetSection: string;
+    title: string;
+    description: string;
+};
+/**
+ * The component for the "Section" Form Element.
+ */
+declare const Section: ({ accessibleDescription: elementAccessibleDescription, className, collapsed, component, description: elementDescription, element, enabled, error: elementError, hasInvalidChild, name, refs, renderFocus, setProperty, translateText, updateAccordionSections, }: FormElementProps) => JSX.Element;
+export default Section;

package/forms/components/Section.js

@@ -1 +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,{inline:!0,text:l.title,translateText:r.translateText.bind(r)}))),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};
+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{isAccordionSection,isCollapsibleSection,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=({accessibleDescription:e,className:o,collapsed:t,component:i,description:r,element:s,enabled:n,error:a,hasInvalidChild:c,name:l,refs:d,renderFocus:m,setProperty:p,translateText:f,updateAccordionSections:g})=>{let u;null!=s&&s.format&&(u=s.format),u=void 0!==u&&null!==u?u:defs.DEFAULT_SECTION_FORMAT;const S=isAccordionSection(s),b=S||isCollapsibleSection(s);var C=`${makeUniqueId(l)}-input`;useEffect(()=>(d[l]=i,()=>{d[l]=void 0}),[]);var R,x,E=(R=s,x=C,React.createElement(FormLabel,{className:sectionClasses.title,error:b&&(c(R)||!!a),id:`${x}-label`,component:"h6"},React.createElement(Markdown,{inline:!0,text:R.title,translateText:f}))),n=renderDescription(r,C,n,f,sectionClasses.description),e=renderAccessibleDescription(e,r,C,f),r=renderError(a,f),C={"aria-labelledby":E?.props?.id,"aria-details":n?.props?.id,"aria-describedby":e?.props?.id},r=[n,e,r,i.props.children],s=clsx(o,s.type,sectionClasses.root,{[sectionClasses.basicSection]:"basic-section"===u,[sectionClasses.fieldSetSection]:"fieldset-section"===u,[makeSafeClassName(l)]:!!l,[makeSafeClassName(s.styleName)]:!!s.styleName});return b?React.createElement(AccordionRoot,{className:s,expanded:!0!==t,onChange:(e,o)=>{S&&o?g(l):p("collapsed",!o)},...C},React.createElement(AccordionSummary,{expandIcon:React.createElement(ChevronDown,null),ref:e=>{null!==e&&t&&m(e,l)}},E),...r):React.createElement(BoxRoot,{className:s,component:"section",...C},E,React.createElement(Box,null,...r))};export default Section;export{sectionClasses};

package/forms/components/Signature.d.ts

@@ -1,11 +1,12 @@
-/// <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;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+import * as defs from "../FormDefinition";
+export declare const signatureClasses: {
+    button: string;
+    image: string;
+};
+/**
+ * The component for the "Signature" Form Element.
+ */
+declare const Signature: ({ className, component, displayDialog, element, enabled, label, name, prompt, renderFocus, renderText, require, setValue, size, title, tooltip: elementTooltip, translateText, value, }: FormElementProps<defs.SignatureRef | undefined>) => JSX.Element;
+export default Signature;

package/forms/components/Signature.js

@@ -1 +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 a=t["enabled"],r=t.props["host"],n=t.props.name,[o,s]=useState(),[l,m]=useState(500),c=r.renderText(i.tooltip),u=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),m(t)},[i.size]),useEffect(()=>{var e=i.value;s(e?.dataUrl)},[i.value]);const g=async e=>{if(e){const a=await fetch(e);var t=await a.blob(),t=new File([t],`${n}.png`,{type:t.type});i.value={refValueType:"signature",dataUrl:e,file:t}}else i.value=void 0;s(e)};return React.createElement(Root,{className:e,component:t,element:i},o?React.createElement(Box,{className:signatureClasses.image},React.createElement("img",{src:o,alt:c}),React.createElement(IconButton,{"aria-label":u,disabled:!a,onClick:()=>g(void 0),title:u},React.createElement(Trash,null))):null,o?null:React.createElement(Box,{className:signatureClasses.button},React.createElement(Button,{disabled:!a,onClick:async()=>{const e=Math.round(.4*l);await r.displayDialog(a=>React.createElement(SignatureDialog,{cancelCaption:r.renderText("@common-cancel"),clearCaption:u,doneCaption:r.renderText("@common-done"),format:"image/png",height:e,helperText:React.createElement(Markdown,{inline:!0,text:i.label,translateText:r.translateText.bind(r)}),onClose:(e,t)=>{e&&g(t),a()},title:renderTitle(r,i,makeUniqueId(t.props.name+"-dialog")),undoCaption:r.renderText("@common-undo"),width:l}),Dialog)},startIcon:React.createElement(SignatureIcon,null),title:c,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:i.prompt||"",translateText:r.translateText.bind(r)}))))};export default Signature;export{signatureClasses};
+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,displayDialog:a,element:i,enabled:n,label:r,name:o,prompt:l,renderFocus:s,renderText:m,require:c,setValue:u,size:g,title:d,tooltip:p,translateText:f,value:h})=>{const[x,E]=useState(),[C,R]=useState(500),w=m(p),b=m("@common-clear");useEffect(()=>{let e=signatureConfiguration.width.default;"number"!=typeof g||isNaN(g)?"object"!=typeof g||void 0===g.width||isNaN(g.width)||(e=g.width):e=g,e=Math.max(e,signatureConfiguration.width.minimum),e=Math.min(e,signatureConfiguration.width.maximum),R(e)},[g]),useEffect(()=>{E(h?.dataUrl)},[h]);const S=async e=>{if(e){const a=await fetch(e);var t=await a.blob(),t=new File([t],`${o}.png`,{type:t.type});u({refValueType:"signature",dataUrl:e,file:t})}else u(void 0);E(e)};return React.createElement(Root,{className:e,component:t,element:i},x?React.createElement(Box,{className:signatureClasses.image},React.createElement("img",{src:x,alt:w}),React.createElement(IconButton,{"aria-label":b,disabled:!n,onClick:()=>S(void 0),title:b},React.createElement(Trash,null))):null,x?null:React.createElement(Box,{className:signatureClasses.button},React.createElement(Button,{disabled:!n,onClick:async()=>{const e=Math.round(.4*C);await a(a=>React.createElement(SignatureDialog,{cancelCaption:m("@common-cancel"),clearCaption:b,doneCaption:m("@common-done"),format:"image/png",height:e,helperText:React.createElement(Markdown,{inline:!0,text:r,translateText:f}),onClose:(e,t)=>{e&&S(t),a()},title:renderTitle(makeUniqueId(o+"-dialog"),c,d,f),undoCaption:m("@common-undo"),width:C}),Dialog)},ref:e=>{null===e||e.disabled||s(e,o)},startIcon:React.createElement(SignatureIcon,null),title:w,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:l||"",translateText:f}))))};export default Signature;export{signatureClasses};

package/forms/components/SignatureDialog.d.ts

@@ -1,22 +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;
+/// <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/Text.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { 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;
-export default Text;
+/// <reference types="react" />
+import { 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;
+export default Text;

package/forms/components/TextArea.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { 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;
-export default TextArea;
+/// <reference types="react" />
+import { 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;
+export default TextArea;

package/forms/components/TextBox.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { 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;
-export default TextBox;
+/// <reference types="react" />
+import { 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;
+export default TextBox;

package/forms/components/TimePicker.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { FormElementProps } from "../..";
-import { defs } from "../FormHost";
-/**
- * The component for the "Time Picker" Form Element.
- */
-declare const TimePicker: ({ className, component, deriveLocale, element, enabled, error, name, prompt, renderFocus, renderText, tooltip: elementTooltip, value: elementValue, setProperty, setValue: setElementValue, }: FormElementProps<defs.DateTimeRef | undefined>) => JSX.Element;
-export default TimePicker;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+import { 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;
+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,hasErrorChanged,isInvalidDate,makeProperValue}from"../dateUtilities.js";import{getNewElementValue}from"../dateUtilities.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:s,prompt:i,renderFocus:m,renderText:c,tooltip:n,value:u,setProperty:p,setValue:d})=>{const[f,k]=useState(!1),[P,E]=useState(!1),[v,F]=useState(null),T=useRef(),C=useRef(!0);m=useFocusCallback(o,s,m);const b=c(n),g={locale:r(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},x=Calendar.useNative(),R="time";useEffect(()=>{var e=makeProperValue(u,x),t=getNewElementValue(e,R,g,x);areValuesEqual(u,t)||d(t,!1),F(e||null)},[u]),useEffect(()=>{var e;C.current?C.current=!1:P||f||(isInvalidDate(v)?V({status:"invalid"}):(V(),e=getNewElementValue(v,R,g,x),areValuesEqual(u,e)||d(e)))},[P,f]);const V=e=>{hasErrorChanged(l,e)&&p("error",e)},h=`${makeUniqueId(s)}-input`,y=c(i);return React.createElement(FormElement,{className:e,component:t,element:a,inputId:h},l&&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:()=>{E(!0)},onClose:()=>{E(!1)},renderInput:e=>(T.current=e.inputProps?.placeholder,e.error=!!l,e.inputProps={...e.inputProps,id:h,onBlur:()=>{k(!1)},onFocus:()=>{k(!0)},placeholder:y||e.inputProps?.placeholder,title:b},React.createElement(FormLabelTextField,{...e})),value:v}))};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,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;

package/forms/constants.d.ts

@@ -1,81 +1,81 @@
-/**
- * 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.
- *
- * IMPORTANT: These are used as element classes when the form is rendered.
- *            Changing these values could introduce breaking changes to
- *           custom styling of existing workflows.
- */
-export declare const FormElementTypes: {
-    AUTOCOMPLETE: string;
-    BUTTONBAR: string;
-    CHECKBOX: string;
-    CHECKGROUP: string;
-    CUSTOM: string;
-    DATEPICKER: string;
-    DATERANGEPICKER: string;
-    DATETIMEPICKER: string;
-    DROPDOWNLIST: string;
-    FILEPICKER: string;
-    GEOMETRYPICKER: string;
-    HEADER: string;
-    HORIZONTALRULE: string;
-    IMAGE: string;
-    ITEMPICKER: string;
-    LISTBOX: string;
-    NUMBER: string;
-    NUMBERRANGESLIDER: string;
-    NUMBERSLIDER: string;
-    PASSWORDBOX: string;
-    RADIOGROUP: string;
-    SCANNER: string;
-    SECTION: string;
-    SIGNATURE: string;
-    TEXT: string;
-    TEXTAREA: string;
-    TEXTBOX: string;
-    TIMEPICKER: 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. */
-    HORIZONTAL: string;
-    /** The items are laid out one above the other, in a column */
-    VERTICAL: string;
-};
-/**
- * The type of scan being performed in a Scanner Form Element.
- * This is defined outside of scanner.tsx to prevent webpack from pulling @zxing/library into the designer.
- */
-export declare enum ScanType {
-    BarCode = "barcode",
-    QrCode = "qrcode"
-}
-/**
- * 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. */
-    ABOVE: string;
-    /** The title is shown before the element's content. */
-    BESIDE: string;
-};
+/**
+ * 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.
+ *
+ * IMPORTANT: These are used as element classes when the form is rendered.
+ *            Changing these values could introduce breaking changes to
+ *           custom styling of existing workflows.
+ */
+export declare const FormElementTypes: {
+    AUTOCOMPLETE: string;
+    BUTTONBAR: string;
+    CHECKBOX: string;
+    CHECKGROUP: string;
+    CUSTOM: string;
+    DATEPICKER: string;
+    DATERANGEPICKER: string;
+    DATETIMEPICKER: string;
+    DROPDOWNLIST: string;
+    FILEPICKER: string;
+    GEOMETRYPICKER: string;
+    HEADER: string;
+    HORIZONTALRULE: string;
+    IMAGE: string;
+    ITEMPICKER: string;
+    LISTBOX: string;
+    NUMBER: string;
+    NUMBERRANGESLIDER: string;
+    NUMBERSLIDER: string;
+    PASSWORDBOX: string;
+    RADIOGROUP: string;
+    SCANNER: string;
+    SECTION: string;
+    SIGNATURE: string;
+    TEXT: string;
+    TEXTAREA: string;
+    TEXTBOX: string;
+    TIMEPICKER: 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. */
+    HORIZONTAL: string;
+    /** The items are laid out one above the other, in a column */
+    VERTICAL: string;
+};
+/**
+ * The type of scan being performed in a Scanner Form Element.
+ * This is defined outside of scanner.tsx to prevent webpack from pulling @zxing/library into the designer.
+ */
+export declare enum ScanType {
+    BarCode = "barcode",
+    QrCode = "qrcode"
+}
+/**
+ * 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. */
+    ABOVE: string;
+    /** The title is shown before the element's content. */
+    BESIDE: string;
+};