@vertigis/workflow 5.33.1 → 5.35.0

package/forms/FormComponent.d.ts

@@ -4,11 +4,12 @@ import { FormPresenterHost } from "./FormPresenterHost";
 import type { FormElementProps, FormElementRegistration } from "./index";
 export { FormPresenterHost };
 export interface FormComponentProps {
-    host?: FormPresenterHost;
-    type?: "form" | "body" | "row" | "header" | "main" | "footer" | "element" | "section";
+    host: FormPresenterHost;
+    type?: "form" | "body" | "row" | "header" | "main" | "footer" | "element" | "section" | "accordionGroup";
     name?: string;
     children?: JSX.Element[];
 }
+/** @product This is intended for internal use only within VertiGIS Studio products. */
 export declare class FormComponent extends Component<FormComponentProps, {}> {
     id: string;
     autoInput: boolean;
@@ -22,7 +23,7 @@ export declare class FormComponent extends Component<FormComponentProps, {}> {
     setProperty: FormElementProps<any>["setProperty"];
     setValue: FormElementProps["setValue"];
 }
-export declare class FormElement extends FormComponent {
+export declare class FormElementComponent extends FormComponent {
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;

package/forms/FormComponent.js

@@ -1 +1 @@
-import{Component}from"react";import{makeId}from"./utils.js";class FormComponent extends Component{constructor(){super(...arguments),this.raiseEvent=(e,t)=>this.props.host?.post(e,{name:this.props.name,value:t}),this.setProperty=(e,t)=>{const s=this.props.host;var n=this.props.name;s.assignElementProperty(n,e,t)},this.setValue=e=>this.setProperty("value",e)}get elementRegistration(){const e=this.props["host"];if(isFormRenderer(e))return e.getElementRegistration(this.element)}get element(){const{host:e,name:t}=this.props;if(t)return e.find(t)}prepare(){var e;void 0===this.id&&(this.id=makeId()),this.enabled=!0;const t=this.props.host;return!1===t.enabled&&(this.enabled=!1),void 0!==this.element&&(void 0!==(e=t.find(this.element.section))&&!1===e.enabled&&(this.enabled=!1),!1===this.element.enabled&&(this.enabled=!1)),this.element}render(){return this.props.host.renderVisual(this)}}class FormElement extends FormComponent{componentDidMount(){const e=this.props;e.host.refs[e.name]=this}componentDidUpdate(){const e=this.props;e.host.refs[e.name]=this}componentWillUnmount(){const e=this.props;e.host.refs[e.name]=void 0}}function isFormRenderer(e){return!!e&&"function"==typeof e.getElementRegistration}export{FormComponent,FormElement};
+import{Component}from"react";import{makeId}from"./utils.js";class FormComponent extends Component{constructor(){super(...arguments),this.raiseEvent=(e,t)=>this.props.host?.post(e,{name:this.props.name,value:t}),this.setProperty=(e,t)=>{const s=this.props.host;var n=this.props.name;s.assignElementProperty(n,e,t)},this.setValue=e=>this.setProperty("value",e)}get elementRegistration(){const e=this.props["host"];if(isFormRenderer(e))return e.getElementRegistration(this.element)}get element(){const{host:e,name:t}=this.props;if(t)return e.find(t)}prepare(){var e;void 0===this.id&&(this.id=makeId()),this.enabled=!0;const t=this.props.host;return!1===t.enabled&&(this.enabled=!1),void 0!==this.element&&(void 0!==(e=t.find(this.element.section))&&!1===e.enabled&&(this.enabled=!1),!1===this.element.enabled&&(this.enabled=!1)),this.element}render(){return this.props.host.renderVisual(this)}}class FormElementComponent extends FormComponent{componentDidMount(){const e=this.props;e.host.refs[e.name]=this}componentDidUpdate(){const e=this.props;e.host.refs[e.name]=this}componentWillUnmount(){const e=this.props;e.host.refs[e.name]=void 0}}function isFormRenderer(e){return!!e&&"function"==typeof e.getElementRegistration}export{FormComponent,FormElementComponent};

package/forms/FormDefinition.d.ts

@@ -1,5 +1,9 @@
+import { Lookup } from "../Collections";
 import { NumberDisplayFormat } from "./numberFormatter";
-/** References a container. */
+/**
+ * References a container.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export declare type ContainerRef = "default" | "modal" | {
     /** Indicates the name of the container. */
     name: string;
@@ -54,12 +58,18 @@ export interface GeometryRef {
     /** Indicates the geometry. */
     geometry: {}[];
 }
-/** References one or more items within the element. */
+/**
+ * References one or more items within the element.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface ItemsRef {
     /** The items that were selected. */
     items: Item[];
 }
-/** Indicates the number. */
+/**
+ * Indicates the number.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface NumberRef {
     /** Indicates the format for the number. */
     format: NumberFormat;
@@ -68,7 +78,10 @@ export interface NumberRef {
     /** Indicates the numeric value. */
     numeric: number;
 }
-/** References markdown for a markdown-based value. */
+/**
+ * References markdown for a markdown-based value.
+ * @public
+ */
 export interface MarkdownRef {
     markdown: string;
 }
@@ -84,7 +97,16 @@ export interface ScanRef {
     /** Indicates the returned scanner data. */
     value: string;
 }
-/** References an error, warnings, and statuses. */
+export interface SignatureRef {
+    /** A Data URL describing the image as a PNG. */
+    dataUrl: string;
+    /** A File object for a PNG image of the signature. */
+    file: File;
+}
+/**
+ * References an error, warnings, and statuses.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface StatusRef {
     /** missing - Input is missing. */
     /** invalid - Input is invalid. */
@@ -93,17 +115,26 @@ export interface StatusRef {
     /** trivial - Input items are empty, not relevant, not significant etc. */
     status: "missing" | "invalid" | "failure" | "pending" | "trivial";
 }
-/** References any kind of text. */
+/**
+ * References any kind of text.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export declare type Text = string | MarkdownRef | StatusRef;
 /**
  * Indicates how a form element's title should be positioned relative to its content.
  */
 export declare type TitleLocation = "above" | "beside";
-/** References any kind of value appropriate for a form element. */
-export declare type Value = boolean | number | number[] | string | DataRef | DateRangeRef | DateTimeRef | FilesRef | GeometryRef | ItemsRef | NumberRef | ScanRef;
+/**
+ * References any kind of value appropriate for a form element.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
+export declare type Value = boolean | number | number[] | string | DataRef | DateRangeRef | DateTimeRef | FilesRef | GeometryRef | ItemsRef | NumberRef | ScanRef | SignatureRef;
 /** Types of matching that can be performed when finding an Item within a Form Element. */
 export declare type ItemMatchType = "index" | "item" | "key" | "label" | "value";
-/** References what kind of elements exist. */
+/**
+ * References what kind of elements exist.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export declare type ElementType = "DropDownEdit" | "DropDownList" | "GeometryPicker" | "Header";
 /** References the format types. */
 export declare type FormatRef = DateTimeFormat | NumberFormat | GeometryFormat | SectionFormat;
@@ -116,7 +147,34 @@ export declare type DateTimeFormat = "app" | "device" | {
     /** Indicates the time zone for the date/time value. */
     timezone: string;
 };
-/** References the number format criteria. */
+/**
+ * Constraints to be applied to numeric values within form elements that deal with selecting numbers.
+ */
+export interface NumberConstraints {
+    /**
+     * The highest accepted value. Values higher than this value should be replaced by it.
+     * If this is `undefined`, there is no upper limit.
+     */
+    maximum: number | undefined;
+    /**
+     * The lowest accepted value. Values lower than this value should be replaced by it.
+     * If this is `undefined`, there is no lower limit.
+     */
+    minimum: number | undefined;
+    /**
+     * The amount that the number changes when the user increments/decrements the value.
+     * This must be a value > 0.
+     *
+     * If `minimum` is also defined, values must fall on `minimum + step * n` where `n` is an integer.
+     * Values that do not should be rounded to the nearest valud step. If `minimum` is not defined,
+     * the formula becomes `step * n`.
+     */
+    step: number;
+}
+/**
+ * References the number format criteria.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface NumberFormat {
     /**
      * The 3-letter ISO 4217 currency code (e.g "USD", "CAD"). Required when
@@ -134,17 +192,31 @@ export interface NumberFormat {
     displayFormat?: NumberDisplayFormat;
     /** Indicates the lower bound. */
     lowerBound?: number;
-    /** Indicates the minimum increment/decrement and precision of values. */
+    /**
+     * Indicates the minimum increment/decrement and precision of values.
+     *
+     * Positive precision values indicates the number of decimal places to round to.
+     * For example, `1` would round to `0.1`, `2` would round to `0.01` etc.
+     *
+     * Negative precision values indicates the number of whole digits to round to.
+     * For example, `-1` would round to `10`, `-2` would round to `100` etc.
+     */
     precision?: number;
     /** Indicates the step size which is the amount to increment/decrement. */
     step?: number;
     /** Indicates the upper bound. */
     upperBound?: number;
 }
-/** References geometry format. */
+/**
+ * References geometry format.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export declare type GeometryFormat = "polygon" | "polyline" | "point" | "polygon-freehand" | "polyline-freehand" | "extent" | "line";
 export declare type SectionFormat = "accordion-section" | "unstyled-section" | "fieldset-section" | "basic-section" | "collapsible-section";
-/** The `SectionFormat` to use when no value is specified. */
+/**
+ * The `SectionFormat` to use when no value is specified.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export declare const DEFAULT_SECTION_FORMAT = "unstyled-section";
 /** References a two-dimensional size. */
 export interface Size {
@@ -153,7 +225,10 @@ export interface Size {
     /** The width. */
     width?: number;
 }
-/** Defines a form. */
+/**
+ * Defines a form.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface Form {
     /** Indicates the defaults for the form. */
     defaults?: {
@@ -164,7 +239,10 @@ export interface Form {
         [name: string]: Element;
     };
 }
-/** Defines any element used in a form. */
+/**
+ * Defines any element used in a form.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface Element {
     /**
      * An accessible description to be used by assistive technologies such as screen readers.
@@ -210,9 +288,7 @@ export interface Element {
     /** Indicates the item label for items which are opaquely constructed such as geometries in the Geometry Picker. */
     itemLabel?: Text | Text[];
     /** Indicates the items. */
-    items?: {
-        [key: string]: Item;
-    };
+    items?: Lookup<Item>;
     /** Indicates the label for the element. */
     label?: Text;
     /** Indicates the locally unique identifier for application specific use. */
@@ -280,7 +356,10 @@ export interface Element {
     /** Indicates how the control wraps text. */
     wrap?: "hard" | "soft" | "off";
 }
-/** Defines an ad hoc item. */
+/**
+ * Defines an ad hoc item.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface Item {
     /** Indicates the placement of the item. */
     index?: number;
@@ -304,6 +383,7 @@ export interface Item {
     styleName?: string;
 }
 export declare type EventType = "load" | "cancel" | "checked" | "changed" | "clicked" | "custom" | "dragged" | "suggest" | "submit" | "end" | "verify" | "validate" | "populate" | "prepare";
+/** @product This is intended for internal use only within VertiGIS Studio products. */
 export interface Event {
     /** Indicates the name of the element raising the event. */
     name?: string;
@@ -320,6 +400,7 @@ export interface Event {
     /** Indicates the cancellation token fro the event. */
     cancellationToken?: PromiseLike<void>;
 }
+/** @product This is intended for internal use only within VertiGIS Studio products. */
 export interface GeometryState {
     /** Indicates the application specific context. */
     context?: {};

package/forms/FormElement.d.ts

@@ -6,6 +6,8 @@ import { defs } from "./FormHost";
  * Properties common to all Form Elements.
  */
 export interface BaseFormElementProps {
+    /** The CSS class name of the root element. */
+    className?: string;
     /**
      * The `FormComponent` being used to render the Form Element within this Component.
      */
@@ -15,27 +17,11 @@ export interface BaseFormElementProps {
      */
     element: defs.Element;
 }
-interface FormElementProps {
-    /**
-     * Custom classes for this element. Use sparingly.
-     */
-    classNames?: string[];
-    /**
-     * The `FormComponent` being used to render the Form Element within this Component.
-     */
-    component: FormComponent;
-    /**
-     * The Form Element to be rendered within this Component.
-     */
-    element: defs.Element;
+interface FormElementProps extends BaseFormElementProps {
     /**
      * The id of the default input to be associated with the title.
      */
     inputId?: string;
-    /**
-     * True if the component should render with older styles, because it has not yet been migrated to use `react-ui` components.
-     */
-    legacyMode?: boolean;
     /**
      * Callback for when the Form Element receives focus.
      * @param event The focus event.

package/forms/FormElement.js

@@ -1 +1 @@
-import FormControl from"@vertigis/react-ui/FormControl";import{forwardRef}from"react";import*as React from"react";import{renderAccessibleDescription,renderDescription,renderError,renderTitle}from"./common.js";import{TitleLocation}from"./constants.js";import{makeSafeClassName,makeUniqueId}from"./utils.js";export default forwardRef((e,r)=>{const{children:t,classNames:o,component:a,element:s,inputId:i,legacyMode:n,...l}=e;var m=a.props.host,p=makeUniqueId(a.props.name),c=renderTitle(m,s,p,i),d=renderDescription(m,s,p),f=renderAccessibleDescription(m,s,p),u=renderError(m,s),h=c?.props?.id,e=d?.props?.id,m=f?.props?.id;const y=[s.type,makeSafeClassName(a.props.name)];n&&y.push("legacy-styled-element"),s.titleLocation===TitleLocation.BESIDE&&y.push("inline-title"),s.styleName&&y.push(makeSafeClassName(s.styleName)),o&&y.push(...o);r={"aria-labelledby":h,"aria-details":e,"aria-describedby":m,className:y.join(" "),error:!!u,id:p,ref:r,...l};let E=[c];return s.titleLocation===TitleLocation.BESIDE?E.push(React.createElement("div",{className:"form-element-content"},d,f,u,t)):(E.push(d),E.push(f),E.push(u),E.push(t)),React.createElement(FormControl,{fullWidth:!0,...r},...E)});
+import FormControl from"@vertigis/react-ui/FormControl";import clsx from"clsx";import{forwardRef}from"react";import*as React from"react";import{renderAccessibleDescription,renderDescription,renderError,renderTitle}from"./common.js";import{formClasses}from"./components/Form.js";import{TitleLocation}from"./constants.js";import{makeSafeClassName,makeUniqueId}from"./utils.js";export default forwardRef((e,r)=>{const{children:o,className:t,component:s,element:a,inputId:i,...m}=e;var n=s.props.host,l=makeUniqueId(s.props.name),p=renderTitle(n,a,l,i),c=renderDescription(n,a,l),e=renderAccessibleDescription(n,a,l),n=renderError(n,a),r={"aria-labelledby":p?.props?.id,"aria-details":c?.props?.id,"aria-describedby":e?.props?.id,className:clsx(t,a.type,{[formClasses.formElementWithTitleBeside]:a.titleLocation===TitleLocation.BESIDE,[makeSafeClassName(s.props.name)]:!!s.props.name,[makeSafeClassName(a.styleName)]:!!a.styleName}),error:!!n,id:l,ref:r,required:a.require,...m};let d=[p];return a.titleLocation===TitleLocation.BESIDE?d.push(React.createElement("div",{className:formClasses.formElementContent},c,e,n,o)):(d.push(c),d.push(e),d.push(n),d.push(o)),React.createElement(FormControl,{fullWidth:!0,...r},...d)});

package/forms/FormHost.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
 import Bluebird from "bluebird";
 import { Lookup } from "../Collections";
+import { FormComponent } from "./FormComponent";
 import * as defs from "./FormDefinition";
 import { FormPresenterHost } from "./FormPresenterHost";
 import { FormatOptions } from "./numberFormatter";
+import type { ComponentType, ReactNode } from "react";
 export { defs };
 export interface FormEventSubscription {
     (): boolean;
@@ -20,7 +21,9 @@ export declare abstract class FormHost implements FormPresenterHost {
     /** Indicates all errors to be assigned. */
     errors: Lookup<defs.Text>;
     /** Indicates any reference information relevant to components. */
-    refs: {};
+    refs: {
+        [name: string]: FormComponent | undefined;
+    };
     /** Indicates if the form is enabled. */
     enabled: boolean;
     /** Indicates if the form is visible. */
@@ -77,6 +80,9 @@ export declare abstract class FormHost implements FormPresenterHost {
     focus(name: string): void;
     /** Shows the form. */
     show(): boolean;
+    private isInvalid;
+    private getInvalidElements;
+    hasInvalidChild(element: defs.Element): boolean;
     /** Shows the form in a disabled state. */
     spin(): boolean;
     /** Hides the form in a disabled state. */
@@ -96,8 +102,6 @@ export declare abstract class FormHost implements FormPresenterHost {
      * @returns The original text
      */
     translateText(content: defs.Text | undefined): string | defs.MarkdownRef;
-    /** Renders the style for the form. */
-    renderStyle(css?: string): HTMLStyleElement;
     /** Renders the form component. */
     renderVisual(component: {}): any;
     /** Qualifies an event with defaults. */
@@ -161,10 +165,25 @@ export declare abstract class FormHost implements FormPresenterHost {
      * other elements but afterwards.
      */
     trap(event: defs.Event): boolean;
-    /** Attempts to cascade the form. */
-    protected cascade(name: string): boolean;
+    /**
+     * Cascade the form by clearing the value of any elements downstream of the specified one
+     * and triggering the "populate" event for any elements that depend on it directly.
+     * @param elementName The name of an elements which has just changed.
+     * @returns True if the operation was a success, false otherwise.
+     */
+    protected cascade(elementName: string): boolean;
     /** Routes a click event. */
     protected click(event: defs.Event): boolean;
+    /**
+     * Checks the specified element to determine if it has a selection,
+     * which would justify a dependent being populated at this time.
+     *
+     * This function is only interested in _initial_ selection defined in the designer
+     * rather than changes made in an element's `load` event. Those are handled separately.
+     * @param elementName The name of the element being depended upon.
+     * @returns True if the element has a selection at this time.
+     */
+    hasInitialSelectionToDependOn(elementName: string): boolean;
     /** Routes a prepare event. */
     protected hydrate(event: defs.Event): boolean;
     /** Determines if the event origin is a submit button. */
@@ -188,7 +207,7 @@ export declare abstract class FormHost implements FormPresenterHost {
     /** Coerces a number. */
     coerceNumber(value: string): number;
     /** Formats a number. */
-    formatNumber(value: number, options: FormatOptions): string;
+    formatNumber(value: number, options?: FormatOptions): string;
     /** Renders a custom element. */
     renderCustom(component: {}, element: defs.Element): JSX.Element;
     /** Renders a component's state. */
@@ -200,7 +219,8 @@ export declare abstract class FormHost implements FormPresenterHost {
     private isElementPositionBeforeLastFocused;
     private setLastFocus;
     private isSection;
-    private isAccordionSection;
+    isAccordionSection(element?: defs.Element): boolean;
+    isCollapsibleSection(element?: defs.Element): boolean;
     private getAllSectionElements;
     private getMutuallyExclusiveSectionGroup;
     /**
@@ -209,4 +229,5 @@ export declare abstract class FormHost implements FormPresenterHost {
      */
     updateAccordionSections(expandedAccordionSectionName: string): void;
     private enforceAccordionConstraints;
+    displayDialog(children: (closeDialog: () => void) => ReactNode, DialogComponent: ComponentType<any>): Promise<void>;
 }

package/forms/FormHost.js

@@ -1 +1 @@
-import Bluebird from"bluebird";import{Task}from"../Task.js";import{DEFAULT_LOCALE}from"../constants.js";import{FormComponent}from"./FormComponent.js";import*as defs from"./FormDefinition.js";import MutuallyExclusiveSectionGroup from"./MutuallyExclusiveSectionGroup.js";import NumberParser from"./NumberParser.js";import{format}from"./numberFormatter.js";import*as presenter from"./presenter.js";import*as renderers from"./renderers.js";import{CSS}from"./styles/stock.js";import{addStyleToDocument,sort,text}from"./utils.js";const guid="C0166F74-982A-464E-9FB6-9605CB7649C1:",eventName=guid+"FormEvent";function createEvent(e,t){return new CustomEvent(e,{bubbles:!1,cancelable:!1,detail:t})}function overlay(s,i){switch(typeof s){case"boolean":case"number":case"string":return s;case"object":break;default:return i}if(null===s)return i;if(s instanceof Array){let e=i;void 0!==e&&null!==e||(e=[]);let t=0;for(const r of s){var n=overlay(r,e[t]);void 0!==n&&(t<s.length?e[t]=n:e.push(n),++t)}return e}let e=i;void 0===e&&(e={});for(const t in s)e[t]=overlay(s[t],e[t]);return e}function createSubscription(e){function t(){return void 0!==e&&(t.active=!1,e(),!0)}return t.active=!0,t}let staticStyle=void 0;class FormHost{constructor(){this.form={defaults:{},elements:{}},this.errors={},this.refs={},this.enabled=!1,this.visible=!1,this.dismiss=!1,this.custom=!1,this.container=document.createElement("div"),this.eventIndex=0,this.eventQueue=[],this.mutuallyExclusiveSections={},this.nextFocus=!1,this.nextRefresh=!1,this.style=void 0}deriveLocale(){return DEFAULT_LOCALE}mount(){var e=this.container,t=e.parentNode;null==t&&document.body.appendChild(e),this.update()}unmount(){var e=this.container;const t=e.parentNode;void 0!==t&&null!==t&&t.removeChild(e)}observeFocus(e){this.enabled&&e instanceof HTMLElement&&(this.lastFocus&&this.lastFocus.target===e||this.setLastFocus(e))}focus(e){!0===(e=null==e?!1:e)&&(this.lastFocus=void 0),!1===e&&!1===(e=this.nextFocus)&&(e=!0),this.nextFocus=e,this.invalidate(!0!==e?e:void 0)}show(){const e=this.container;if(void 0===e)return!1;this.custom||void 0!==this.focusObserver||e.addEventListener("focus",this.focusObserver=e=>this.observeFocus(e.target),!0),this.enabled||(this.nextRefresh=!0,this.focus()),this.enforceAccordionConstraints();var t=this.errors;for(const r in t){const o=this.form.elements[r];void 0!==o&&null!==o&&(o.error=t[r],this.invalidate(r))}const s=[];let i=!1;for(const a of Object.keys(this.form.elements).map(e=>this.form.elements[e]).filter(e=>!!e.error&&!1!==e.visible)){const l=this.getParentSection(a);if(this.isAccordionSection(l)){var n=this.findName(l);const u=this.getMutuallyExclusiveSectionGroup(n);if(u){const c=s.find(e=>e.group===u);c?c.element.rowNumber>l.rowNumber&&(c.element=l):(s.push({group:u,element:l}),i=!0)}}else this.isSectionCollapsed(l)&&(l.collapsed=!1,i=!0)}for(const h of s)h.group.expandedSection=h.element;return i&&this.invalidate(),this.errors={},this.idle(),!1!==this.nextRefresh&&(this.enabled=!0,this.visible=!0,this.mount()),this.enabled}spin(){return void 0!==this.container&&(this.idle(),this.visible&&!this.enabled||(this.nextRefresh=!0,this.enabled=!1,this.visible=!0,this.mount()),this.visible)}hide(){return void 0!==this.container&&(this.idle(),this.visible&&(this.enabled=!1,this.visible=!1,this.unmount()),!0)}dispose(){if(this.dismiss)return!1;{this.dismiss=!0;const t=this.container;t.dispatchEvent(createEvent(eventName));var e=this.focusObserver;return void 0!==e&&t.removeEventListener("focus",e,!0),this.idle(),this.unmount(),this.refs={},presenter.releaseForm(this.container),this.container=void 0,this.lastFocus=void 0,!(this.eventTask=void 0)}}renderFocus(e,t){var s=this.nextFocus;if(this.enabled&&e instanceof HTMLElement)if(!1!==s)if(void 0!==t){if(t===s||!0===s&&void 0===this.lastFocus)return this.nextFocus=!1,this.setLastFocus(e,t),e.focus(),!0}else{const i=this.lastFocus?.target;if(!0===s&&i instanceof HTMLElement&&e.contains(i))return this.nextFocus=!1,i.focus(),!0}else if(!1===s&&t&&t!==this.lastFocus?.name&&this.isElementPositionBeforeLastFocused(t))return this.setLastFocus(e,t),e.focus(),!0;return!1}renderHtml(e,t){return"string"==typeof e?text.textToHtml(e):text.isMarkdown(e)?text.markdownToHtml(e.markdown,t):""}renderText(e){return"string"==typeof e?e:text.isMarkdown(e)?text.markdownToText(e.markdown):""}translateText(e){return"string"==typeof e||text.isMarkdown(e)?e:text.isStatus(e)?e.status:void 0}renderStyle(e){return"string"==typeof e?addStyleToDocument(e):staticStyle=staticStyle||addStyleToDocument(CSS)}renderVisual(e){return presenter.render(e)||presenter.renderNone(e)}qualifyDefault(e){var t=sort(this.form.elements);for(const r in t){var s=t[r];if(null!=s&&!1!==s.visible&&s.enabled){if(s.default)return e.value=s.value,r;var i=sort(s.items);if(null!=i)for(const o in i){var n=i[o];if(null!=n&&n.visible&&n.enabled&&n.default)return e.item=o,e.value=n.value,r}}}}qualify(e,t){var s;return null==t&&(t={}),"clicked"===e&&void 0===t.name&&(t.name=this.qualifyDefault(t)),t.type=e,void 0===t.routingKey&&(s=t.name,t.routingKey=void 0!==s?e+"$"+s:e),t}post(e,t){t=this.publish(e,t);const s=this.container;void 0!==s&&s.dispatchEvent(createEvent(eventName,t))}subscribe(s){const e=this.container;if(void 0===e)return createSubscription();const i=function(){s=void 0,e.removeEventListener(eventName,t)},t=function(e){const t=e.detail;void 0!==t?Bluebird.resolve().then(function(){"function"==typeof s&&s(t)}):i()};return e.addEventListener(eventName,t),createSubscription(i)}refresh(e){this.custom||("string"==typeof e?(e=this.refs[e],presenter.refresh(e)):(void 0===this.style&&(this.style=this.renderStyle()),this.refs={},presenter.refreshForm(this,this.container)))}invalidate(e){const t=this.nextRefresh;"string"==typeof e&&!0!==t&&(!1===t?this.nextRefresh={[e]:!0}:t[e]=!0),void 0!==e&&!0!==e||(this.nextRefresh=!0),!1===e&&!1===t&&(this.nextRefresh={})}update(){var e=this.nextRefresh;if(!0===e&&(this.nextRefresh=!1,this.refresh()),"object"==typeof e){this.nextRefresh=!1;for(const t in e)!0===e[t]&&this.refresh(t)}}idle(){const e=this.timerHandle;void 0!==e&&(this.timerHandle=void 0,e())}busy(){if(void 0===this.timerHandle&&void 0!==this.container){let e=setTimeout(()=>this.spin());this.timerHandle=function(){void 0!==e&&(clearTimeout(e),e=void 0)}}}publish(e,t){return this.enabled?(t=this.enqueue(e,t),0<this.eventQueue.length&&this.spin(),t):this.qualify(e,t)}enqueue(e,t){return t=this.qualify(e,t),void 0!==this.eventTask?(this.resolveEvent(t),this.eventTask=void 0):this.eventQueue.push(t),t}dequeue(){const e=this.eventQueue;if(0<e.length){var t=this.eventIndex,s=e[t++];return t>=e.length?e.length=this.eventIndex=0:this.eventIndex=t,s}}observe(){const t=this;return Bluebird.attempt(function(){if(void 0!==t.eventTask)return t.eventTask;var e=t.dequeue();return void 0!==e?e:t.show()?(t.eventTask=new Task(e=>{t.resolveEvent=e}),t.eventTask):void 0})}load(e,t){if(void 0===this.container)return!1;if(this.eventQueue.length=this.eventIndex=0,this.eventTask=void 0,this.errors={},this.lastFocus=void 0,this.nextFocus=!0,this.nextRefresh=!0,this.enqueue("load"),this.enqueue("prepare"),null!=e){e=overlay(e,e={defaults:{},elements:{}});this.form=overlay(t,e);for(const s in this.form.elements){let e=this.form.elements[s];if(e=overlay(e,{showFilter:!1,checked:!1,enabled:!0,hoisted:!1,visible:!0,overlay:!1,default:!1,validates:!1,readOnly:!1,require:!1,autoActivate:!1}),e.items)for(const i in e.items)e.items[i]=overlay(e.items[i],{enabled:!0,checked:!1,visible:!0,default:!1,validates:!1});this.form.elements[s]=e}}return!0}route(e){switch(e.type){case"changed":return this.cascade(e.name);case"prepare":return this.hydrate(e);case"suggest":return this.suggest(e);case"clicked":return this.click(e);case"validate":return this.verify(e);case"verify":return this.submit(e);case"checked":return this.changed(e)}return!1}changed(e){return this.enqueue("changed",{name:e.name,item:e.item,value:e.value}),!0}isElementValid(e,t=!0,s={status:void 0}){return null!=e&&(s.status=void 0,text.isStatus(e.error)&&"invalid"===e.error.status?!(s.status="invalid"):!0!==e.require||(this.isElementEffectivelyVisible(e)?!!this.isElementValueDefined(e)||!(s.status="missing"):t))}isElementEffectivelyVisible(e){return null!=e&&(!1!==this.getParentSection(e)?.visible&&!1!==e.visible)}isElementValueDefined(e){if(null==e)return!1;if("CheckBox"===e.type)return!0;var t=e.current;if(null!=t)return!0;t=e.value;if(null!=t&&""!==t)return!0;t=e.label;if(null!=t&&""!==t)return!0;var s=e.items;if(null!=s)for(const n in s){var i=s[n];if(null!=i&&!0===i.checked)return!0}return!1}trap(e){switch(e.type){case"populate":case"load":break;default:return!1}var t=e.name;const s=this.find(t);if(void 0===s||null===s)return!1;e=s.dependsOn;if("string"!=typeof e)return!1;e=this.find(e);return s.enabled=this.isElementEffectivelyVisible(e)&&this.isElementValueDefined(e),this.invalidate(t),!s.enabled}cascade(e){var t=this.find(e);if(null==t||!1===t.dependsOn)return!1;const s={[e]:!0};var i=sort(this.form.elements);for(const r in i){const o=i[r];var n=o.dependsOn;if("string"==typeof n){const a=this.find(n);void 0!==a&&"string"!=typeof a.dependsOn&&(a.dependsOn=!0),!0===s[n]&&(s[r]=!0,o.checked=!1,o.current=void 0,o.label=void 0,o.items=void 0,o.value=void 0,this.invalidate(r),this.enqueue("populate",{name:r}))}else o.dependsOn=!1}return!0}click(e){var t=this.form.elements[e.name];return null!=t&&"ButtonBar"==t.type&&this.validate(e)}hydrate(e){for(const t in sort(this.form.elements))this.enqueue("populate",{name:t}),this.enqueue("load",{name:t});return!0}shouldTriggerValidation(e){var t=this.find(e.name);if(null!=t&&"string"==typeof e.value){e=e.item;if("string"!=typeof e)return!0===t.validates;t=t.items;if(null!=t){e=t[e];if(null!=e)return!0===e.validates}}}validate(e){var t=this.shouldTriggerValidation(e);if(!0!==t)return!1===t&&(this.enqueue("end",{name:e.name,item:e.item,value:e.value,routingKey:"end"}),!0);{const n=this.errors={};var s=sort(this.form.elements);for(const r in s){var i=s[r];null!=i&&(n[r]=void 0,this.enqueue("validate",{name:r}))}return this.enqueue("verify",{name:e.name,item:e.item,value:e.value,routingKey:"verify"}),!0}}verify(e){var t=e.name,s=this.form.elements[t],e={status:void 0};return!this.isElementValid(s,!0,e)&&(e.status&&(this.errors[t]={status:e.status}),!1===this.nextFocus&&this.focus(t),!0)}suggest(e){const t=this.form.elements[e.name];return void 0!==t&&null!==t&&(t.items={message:{label:{status:"trivial"},enabled:!1}},this.invalidate(e.name),!0)}submit(e){return!this.hasErrors()&&(this.enqueue("submit",{name:e.name,item:e.item,value:e.value}),!0)}hasErrors(){var e=this.errors;for(const s in e){var t=e[s];if(null!=t)return!0}return!1}find(e){if(null!=e)return"string"==typeof(e="object"==typeof e?e.name:e)?this.form.elements[e]:void 0}findName(e){for(const t in this.form.elements)if(this.form.elements[t]===e)return t}coerceNumber(e){var t=this.deriveLocale();return new NumberParser(t).parse(e)}formatNumber(e,t){return t?.locale||((t=t||{}).locale=this.deriveLocale()),format(t,e)}renderCustom(e,t){if(e instanceof FormComponent)return renderers.element.renderCustom(e,t)}renderState(e,t,s){return!1}getParentSection(e){e=e.section;if(e){e="string"==typeof e?e:e.name;return this.form.elements[e]}}isSectionCollapsed(e){return!(!e||"Section"!==e.type||"collapsible-section"!==e.format&&"accordion-section"!==e.format)&&!0===e.collapsed}isElementPositionBeforeLastFocused(e){var t=this.lastFocus;if(e&&void 0!==t?.rowNumber&&void 0!==t.rowIndex){e=this.form.elements?.[e];if(e)return void 0!==e.rowNumber&&void 0!==e.rowIndex?e.rowNumber<t.rowNumber||e.rowNumber===t.rowNumber&&e.rowIndex<t.rowIndex:e.index<t.rowNumber||e.index===t.rowNumber&&0<t.rowIndex}return!1}setLastFocus(e,t){this.lastFocus={target:e},t&&(this.lastFocus.name=t,(t=this.form.elements?.[t])&&(void 0!==t.rowNumber&&void 0!==t.rowIndex?(this.lastFocus.rowNumber=t.rowNumber,this.lastFocus.rowIndex=t.rowIndex):(this.lastFocus.rowNumber=t.index,this.lastFocus.rowIndex=0)))}isSection(e){return"Section"===e?.type}isAccordionSection(e){return this.isSection(e)&&"accordion-section"===e.format}getAllSectionElements(){const e={};for(const s in this.form.elements){var t=this.form.elements[s];this.isSection(t)&&(e[s]=t)}return e}getMutuallyExclusiveSectionGroup(t){let s=this.mutuallyExclusiveSections[t];if(!s){var e=this.find(t);if(!this.isAccordionSection(e))return;s=new MutuallyExclusiveSectionGroup({elementName:t,element:e});e=this.getAllSectionElements();const r=Object.keys(sort(e,e=>e.rowNumber));t=r.indexOf(t);for(let e=t-1;0<=e;e--){const o=r[e];var i=this.find(o);if(!this.isAccordionSection(i))break;s.unshift({elementName:o,element:i})}for(let e=t+1;e<r.length;e++){const o=r[e];var n=this.find(o);if(!this.isAccordionSection(n))break;s.push({elementName:o,element:n})}s.forEach(e=>{this.mutuallyExclusiveSections[e.elementName]=s})}return s}updateAccordionSections(t){const e=this.getMutuallyExclusiveSectionGroup(t);e.forEach(e=>{e.element.collapsed=e.elementName!==t}),presenter.refreshForm(this,this.container)}enforceAccordionConstraints(){const e=[];for(const s of Object.keys(this.form.elements).map(e=>({elementName:e,element:this.form.elements[e]})).filter(e=>this.isAccordionSection(e.element)&&!1!==e.element.visible&&!0!==e.element.collapsed).sort((e,t)=>e.element.rowNumber-t.element.rowNumber)){var t=this.getMutuallyExclusiveSectionGroup(s.elementName);-1===e.indexOf(t)?e.push(t):s.element.collapsed=!0}}}export{defs,FormHost};
+import Bluebird from"bluebird";import{Task}from"../Task.js";import{DEFAULT_LOCALE}from"../constants.js";import{FormComponent}from"./FormComponent.js";import*as defs from"./FormDefinition.js";import MutuallyExclusiveSectionGroup from"./MutuallyExclusiveSectionGroup.js";import NumberParser from"./NumberParser.js";import{FormElementTypes}from"./constants.js";import{format}from"./numberFormatter.js";import*as presenter from"./presenter.js";import{renderElement}from"./renderers.js";import{sort,text}from"./utils.js";const guid="C0166F74-982A-464E-9FB6-9605CB7649C1:",eventName=guid+"FormEvent";function createEvent(e,t){return new CustomEvent(e,{bubbles:!1,cancelable:!1,detail:t})}function overlay(i,s){switch(typeof i){case"boolean":case"number":case"string":return i;case"object":break;default:return s}if(null===i)return s;if(i instanceof Array){let e=s;void 0!==e&&null!==e||(e=[]);let t=0;for(const r of i){var n=overlay(r,e[t]);void 0!==n&&(t<i.length?e[t]=n:e.push(n),++t)}return e}let e=s;void 0===e&&(e={});for(const t in i)e[t]=overlay(i[t],e[t]);return e}function createSubscription(e){function t(){return void 0!==e&&(t.active=!1,e(),!0)}return t.active=!0,t}class FormHost{constructor(){this.form={defaults:{},elements:{}},this.errors={},this.refs={},this.enabled=!1,this.visible=!1,this.dismiss=!1,this.custom=!1,this.container=document.createElement("div"),this.eventIndex=0,this.eventQueue=[],this.mutuallyExclusiveSections={},this.nextFocus=!1,this.nextRefresh=!1,this.style=void 0}deriveLocale(){return DEFAULT_LOCALE}mount(){var e=this.container,t=e.parentNode;null==t&&document.body.appendChild(e),this.update()}unmount(){var e=this.container;const t=e.parentNode;void 0!==t&&null!==t&&t.removeChild(e)}observeFocus(e){this.enabled&&e instanceof HTMLElement&&(this.lastFocus&&this.lastFocus.target===e||this.setLastFocus(e))}focus(e){!0===(e=null==e?!1:e)&&(this.lastFocus=void 0),!1===e&&!1===(e=this.nextFocus)&&(e=!0),this.nextFocus=e,this.invalidate(!0!==e?e:void 0)}show(){const e=this.container;if(void 0===e)return!1;this.custom||void 0!==this.focusObserver||e.addEventListener("focus",this.focusObserver=e=>this.observeFocus(e.target),!0),this.enabled||(this.nextRefresh=!0,this.focus()),this.enforceAccordionConstraints();var t=this.errors;for(const i in t){const s=this.form.elements[i];void 0!==s&&null!==s&&(s.error=t[i],this.invalidate(i))}return this.idle(),!1!==this.nextRefresh&&(this.enabled=!0,this.visible=!0,this.mount()),this.enabled}isInvalid(e){return!!e.error&&!1!==e.visible}getInvalidElements(){return Object.keys(this.form.elements).map(e=>this.form.elements[e]).filter(this.isInvalid)}hasInvalidChild(e){for(const i in this.form.elements){var t=this.form.elements[i];if(this.isInvalid(t)&&this.getParentSection(t)===e)return!0}return!1}spin(){return void 0!==this.container&&(this.idle(),this.visible&&!this.enabled||(this.nextRefresh=!0,this.enabled=!1,this.visible=!0,this.mount()),this.visible)}hide(){return void 0!==this.container&&(this.idle(),this.visible&&(this.enabled=!1,this.visible=!1,this.unmount()),!0)}dispose(){if(this.dismiss)return!1;{this.dismiss=!0;const t=this.container;t.dispatchEvent(createEvent(eventName));var e=this.focusObserver;return void 0!==e&&t.removeEventListener("focus",e,!0),this.idle(),this.unmount(),this.refs={},presenter.releaseForm(this.container),this.container=void 0,this.lastFocus=void 0,!(this.eventTask=void 0)}}renderFocus(e,t){var i=this.nextFocus;if(this.enabled&&e instanceof HTMLElement)if(!1!==i)if(void 0!==t){if(t===i||!0===i&&void 0===this.lastFocus)return this.nextFocus=!1,this.setLastFocus(e,t),e.focus(),!0}else{const s=this.lastFocus?.target;if(!0===i&&s instanceof HTMLElement&&e.contains(s))return this.nextFocus=!1,s.focus(),!0}else if(!1===i&&t&&t!==this.lastFocus?.name&&this.isElementPositionBeforeLastFocused(t))return this.setLastFocus(e,t),e.focus(),!0;return!1}renderHtml(e,t){return"string"==typeof e?text.textToHtml(e):text.isMarkdown(e)?text.markdownToSafeHtml(e.markdown,{inline:t===defs.HTMLContentCategory.Phrasing}):""}renderText(e){return"string"==typeof e?e:text.isMarkdown(e)?text.markdownToText(e.markdown):""}translateText(e){return"string"==typeof e||text.isMarkdown(e)?e:text.isStatus(e)?e.status:void 0}renderVisual(e){return presenter.render(e)||presenter.renderNone(e)}qualifyDefault(e){var t=sort(this.form.elements);for(const r in t){var i=t[r];if(null!=i&&!1!==i.visible&&i.enabled){if(i.default)return e.value=i.value,r;var s=sort(i.items);if(null!=s)for(const o in s){var n=s[o];if(null!=n&&n.visible&&n.enabled&&n.default)return e.item=o,e.value=n.value,r}}}}qualify(e,t){var i;return null==t&&(t={}),"clicked"===e&&void 0===t.name&&(t.name=this.qualifyDefault(t)),t.type=e,void 0===t.routingKey&&(i=t.name,t.routingKey=void 0!==i?e+"$"+i:e),t}post(e,t){t=this.publish(e,t);const i=this.container;void 0!==i&&i.dispatchEvent(createEvent(eventName,t))}subscribe(i){const e=this.container;if(void 0===e)return createSubscription();const s=function(){i=void 0,e.removeEventListener(eventName,t)},t=function(e){const t=e.detail;void 0!==t?Bluebird.resolve().then(function(){"function"==typeof i&&i(t)}):s()};return e.addEventListener(eventName,t),createSubscription(s)}refresh(e){this.custom||("string"==typeof e?(e=this.refs[e],presenter.refresh(e)):(this.refs={},presenter.refreshForm(this,this.container)))}invalidate(e){const t=this.nextRefresh;"string"==typeof e&&!0!==t&&(!1===t?this.nextRefresh={[e]:!0}:t[e]=!0),void 0!==e&&!0!==e||(this.nextRefresh=!0),!1===e&&!1===t&&(this.nextRefresh={})}update(){var e=this.nextRefresh;if(!0===e&&(this.nextRefresh=!1,this.refresh()),"object"==typeof e){this.nextRefresh=!1;for(const t in e)!0===e[t]&&this.refresh(t)}}idle(){const e=this.timerHandle;void 0!==e&&(this.timerHandle=void 0,e())}busy(){if(void 0===this.timerHandle&&void 0!==this.container){let e=setTimeout(()=>this.spin());this.timerHandle=function(){void 0!==e&&(clearTimeout(e),e=void 0)}}}publish(e,t){return this.enabled?(t=this.enqueue(e,t),0<this.eventQueue.length&&this.spin(),t):this.qualify(e,t)}enqueue(e,t){return t=this.qualify(e,t),void 0!==this.eventTask?(this.resolveEvent(t),this.eventTask=void 0):this.eventQueue.push(t),t}dequeue(){const e=this.eventQueue;if(0<e.length){var t=this.eventIndex,i=e[t++];return t>=e.length?e.length=this.eventIndex=0:this.eventIndex=t,i}}observe(){const t=this;return Bluebird.attempt(function(){if(void 0!==t.eventTask)return t.eventTask;var e=t.dequeue();return void 0!==e?e:t.show()?(t.eventTask=new Task(e=>{t.resolveEvent=e}),t.eventTask):void 0})}load(e,t){if(void 0===this.container)return!1;if(this.eventQueue.length=this.eventIndex=0,this.eventTask=void 0,this.errors={},this.lastFocus=void 0,this.nextFocus=!0,this.nextRefresh=!0,this.enqueue("load"),this.enqueue("prepare"),null!=e){e=overlay(e,e={defaults:{},elements:{}});this.form=overlay(t,e);for(const i in this.form.elements){let e=this.form.elements[i];if(e=overlay(e,{showFilter:!1,checked:!1,enabled:!0,hoisted:!1,visible:!0,overlay:!1,default:!1,validates:!1,readOnly:!1,require:!1,autoActivate:!1}),e.items)for(const s in e.items)e.items[s]=overlay(e.items[s],{enabled:!0,checked:!1,visible:!0,default:!1,validates:!1});this.form.elements[i]=e}}return!0}route(e){switch(e.type){case"changed":return this.cascade(e.name);case"prepare":return this.hydrate(e);case"suggest":return this.suggest(e);case"clicked":return this.click(e);case"validate":return this.verify(e);case"verify":return this.submit(e);case"checked":return this.changed(e)}return!1}changed(e){return this.enqueue("changed",{name:e.name,item:e.item,value:e.value}),!0}isElementValid(e,t=!0,i={status:void 0}){return null!=e&&(i.status=void 0,text.isStatus(e.error)&&"invalid"===e.error.status?!(i.status="invalid"):!0!==e.require||(this.isElementEffectivelyVisible(e)?!!this.isElementValueDefined(e)||!(i.status="missing"):t))}isElementEffectivelyVisible(e){return null!=e&&(!1!==this.getParentSection(e)?.visible&&!1!==e.visible)}isElementValueDefined(e){if(null==e)return!1;if("CheckBox"===e.type)return!0;var t=e.current;if(null!=t)return!0;t=e.value;if(null!=t&&""!==t)return!0;if("Signature"!==e.type){t=e.label;if(null!=t&&""!==t)return!0}var i=e.items;if(null!=i)for(const n in i){var s=i[n];if(null!=s&&!0===s.checked)return!0}return!1}trap(e){switch(e.type){case"populate":case"load":case"suggest":break;default:return!1}var t=e.name;const i=this.find(t);if(void 0===i||null===i)return!1;e=i.dependsOn;if("string"!=typeof e)return!1;e=this.find(e);return i.enabled=this.isElementEffectivelyVisible(e)&&this.isElementValueDefined(e),this.invalidate(t),!i.enabled}cascade(e){var t=this.find(e);if(null==t||!1===t.dependsOn)return!1;const i={[e]:!0};var s=sort(this.form.elements);for(const r in s){const o=s[r];var n=o.dependsOn;if("string"==typeof n){const l=this.find(n);void 0!==l&&"string"!=typeof l.dependsOn&&(l.dependsOn=!0),!0===i[n]&&(i[r]=!0,o.checked=!1,o.current=void 0,o.label=void 0,o.items=void 0,o.value=void 0,this.invalidate(r),o.dependsOn===e&&this.enqueue("populate",{name:r}))}else o.dependsOn=!1}return!0}click(e){var t=this.form.elements[e.name];return null!=t&&"ButtonBar"==t.type&&this.validate(e)}hasInitialSelectionToDependOn(e){e=this.form.elements[e];return e.type===FormElementTypes.DROPDOWNLIST&&(void 0!==e.current&&null!==e.current)}hydrate(e){for(const i in sort(this.form.elements)){var t=this.form.elements[i].dependsOn;"string"==typeof t&&!this.hasInitialSelectionToDependOn(t)||this.enqueue("populate",{name:i}),this.enqueue("load",{name:i})}return!0}shouldTriggerValidation(e){var t=this.find(e.name);if(null!=t&&"string"==typeof e.value){e=e.item;if("string"!=typeof e)return!0===t.validates;t=t.items;if(null!=t){e=t[e];if(null!=e)return!0===e.validates}}}validate(e){var t=this.shouldTriggerValidation(e);if(!0!==t)return!1===t&&(this.enqueue("end",{name:e.name,item:e.item,value:e.value,routingKey:"end"}),!0);{const n=this.errors={};var i=sort(this.form.elements);for(const r in i){var s=i[r];null!=s&&(n[r]=void 0,this.enqueue("validate",{name:r}))}return this.enqueue("verify",{name:e.name,item:e.item,value:e.value,routingKey:"verify"}),!0}}verify(e){var t=e.name,i=this.form.elements[t],e={status:void 0};return!this.isElementValid(i,!0,e)&&(e.status&&(this.errors[t]={status:e.status}),!1===this.nextFocus&&this.focus(t),!0)}suggest(e){const t=this.form.elements[e.name];return void 0!==t&&null!==t&&(t.items={message:{label:{status:"trivial"},enabled:!1}},this.invalidate(e.name),!0)}submit(e){if(!this.hasErrors()){for(const r in this.form.elements)this.form.elements[r].error=void 0;return this.enqueue("submit",{name:e.name,item:e.item,value:e.value}),!0}var t=this.errors;for(const o in t){const l=this.form.elements[o];void 0!==l&&null!==l&&(l.error=t[o],this.invalidate(o))}const i=[];let s=!1;for(const a of this.getInvalidElements()){const u=this.getParentSection(a);if(this.isAccordionSection(u)){var n=this.findName(u);const h=this.getMutuallyExclusiveSectionGroup(n);if(h){const c=i.find(e=>e.group===h);c?c.element.rowNumber>u.rowNumber&&(c.element=u):(i.push({group:h,element:u}),s=!0)}}else this.isSectionCollapsed(u)&&(u.collapsed=!1,s=!0)}for(const d of i)d.group.expandedSection=d.element;return s&&this.invalidate(),!(this.errors={})}hasErrors(){var e=this.errors;for(const i in e){var t=e[i];if(null!=t)return!0}return!1}find(e){if(null!=e)return"string"==typeof(e="object"==typeof e?e.name:e)?this.form.elements[e]:void 0}findName(e){for(const t in this.form.elements)if(this.form.elements[t]===e)return t}coerceNumber(e){var t=this.deriveLocale();return new NumberParser(t).parse(e)}formatNumber(e,t){return t=t||{locale:this.deriveLocale()},format(t,e)}renderCustom(e,t){if(e instanceof FormComponent)return renderElement(FormElementTypes.CUSTOM,e,t)}renderState(e,t,i){return!1}getParentSection(e){e=e.section;if(e){e="string"==typeof e?e:e.name;return this.form.elements[e]}}isSectionCollapsed(e){return!(!e||"Section"!==e.type||!this.isCollapsibleSection(e)&&!this.isAccordionSection(e))&&!0===e.collapsed}isElementPositionBeforeLastFocused(e){var t=this.lastFocus;if(e&&void 0!==t?.rowNumber&&void 0!==t.rowIndex){e=this.form.elements?.[e];if(e)return void 0!==e.rowNumber&&void 0!==e.rowIndex?e.rowNumber<t.rowNumber||e.rowNumber===t.rowNumber&&e.rowIndex<t.rowIndex:e.index<t.rowNumber||e.index===t.rowNumber&&0<t.rowIndex}return!1}setLastFocus(e,t){this.lastFocus={target:e},t&&(this.lastFocus.name=t,(t=this.form.elements?.[t])&&(void 0!==t.rowNumber&&void 0!==t.rowIndex?(this.lastFocus.rowNumber=t.rowNumber,this.lastFocus.rowIndex=t.rowIndex):(this.lastFocus.rowNumber=t.index,this.lastFocus.rowIndex=0)))}isSection(e){return"Section"===e?.type}isAccordionSection(e){return this.isSection(e)&&"accordion-section"===e.format}isCollapsibleSection(e){return this.isSection(e)&&"collapsible-section"===e.format}getAllSectionElements(){const e={};for(const i in this.form.elements){var t=this.form.elements[i];this.isSection(t)&&(e[i]=t)}return e}getMutuallyExclusiveSectionGroup(t){let i=this.mutuallyExclusiveSections[t];if(!i){var e=this.find(t);if(!this.isAccordionSection(e))return;i=new MutuallyExclusiveSectionGroup({elementName:t,element:e});e=this.getAllSectionElements();const r=Object.keys(sort(e,e=>e.rowNumber));t=r.indexOf(t);for(let e=t-1;0<=e;e--){const o=r[e];var s=this.find(o);if(!this.isAccordionSection(s))break;i.unshift({elementName:o,element:s})}for(let e=t+1;e<r.length;e++){const o=r[e];var n=this.find(o);if(!this.isAccordionSection(n))break;i.push({elementName:o,element:n})}i.forEach(e=>{this.mutuallyExclusiveSections[e.elementName]=i})}return i}updateAccordionSections(t){const e=this.getMutuallyExclusiveSectionGroup(t);e.forEach(e=>{e.element.collapsed=e.elementName!==t}),presenter.refreshForm(this,this.container)}enforceAccordionConstraints(){const e=[];for(const i of Object.keys(this.form.elements).map(e=>({elementName:e,element:this.form.elements[e]})).filter(e=>this.isAccordionSection(e.element)&&!1!==e.element.visible&&!0!==e.element.collapsed).sort((e,t)=>e.element.rowNumber-t.element.rowNumber)){var t=this.getMutuallyExclusiveSectionGroup(i.elementName);-1===e.indexOf(t)?e.push(t):i.element.collapsed=!0}}async displayDialog(e,t){await Promise.resolve()}}export{defs,FormHost};

package/forms/FormPresenterHost.d.ts

@@ -1,6 +1,11 @@
+import { FormComponent } from "./FormComponent";
 import * as defs from "./FormDefinition";
 import { FormatOptions } from "./numberFormatter";
-/** Exposes various features to components that require features of the environment. */
+import type { ComponentType, ReactNode } from "react";
+/**
+ * Exposes various features to components that require features of the environment.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
 export interface FormPresenterHost {
     /** Indicates if the form is enabled or not. */
     enabled: boolean;
@@ -11,11 +16,11 @@ export interface FormPresenterHost {
     /** Disposes the form. */
     dispose(): void;
     /** Translates the supplied value. */
-    translateText(content: defs.Text): string | defs.MarkdownRef | undefined;
+    translateText(content: defs.Text | undefined): string | defs.MarkdownRef | undefined;
     /** References all elements. */
-    refs: {};
-    /** Refreshes the entire form. */
-    refresh(): void;
+    refs: {
+        [name: string]: FormComponent | undefined;
+    };
     /** Renders a custom element. */
     renderCustom(component: {}, element: defs.Element): any;
     /** Renders the focus. */
@@ -37,7 +42,7 @@ export interface FormPresenterHost {
     /** Coerces a number from a value. */
     coerceNumber(value: string): number;
     /** Formats a value into a string. */
-    formatNumber(value: number, options: FormatOptions): string;
+    formatNumber(value: number, options?: FormatOptions): string;
     /**
      * Derives the current locale set by the host application (or default if undefined) will be returned.
      */
@@ -46,5 +51,26 @@ export interface FormPresenterHost {
      * Collapses all neighbouring accordion sections except the one specified.
      * @param expandedAccordionSection The name of the accordion section to be expanded. All others in the group will be collapsed.
      */
-    updateAccordionSections(expandedAccordionSection: string): any;
+    updateAccordionSections(expandedAccordionSection: string): void;
+    /**
+     * Returns `true` if the element has a `type` of `"Section"` and a `format` of `"accordion-section"`, `false` otherwise.
+     * @param element The element to be inspected.
+     */
+    isAccordionSection(element: defs.Element): boolean;
+    /**
+     * Returns `true` if the element has a `type` of `"Section"` and a `format` of `"collapsible-section"`, `false` otherwise.
+     * @param element The element to be inspected.
+     */
+    isCollapsibleSection(element: defs.Element): boolean;
+    /**
+     * Shows a dialog in the context of the running application.
+     * @param children A function that produces the children for the dialog.
+     * @param DialogComponent The type of component to use as the dialog.
+     */
+    displayDialog(children: (closeDialog: () => void) => ReactNode, DialogComponent: ComponentType<any>): Promise<void>;
+    /**
+     * Returns `true` if the element has a `type` of `"Section"` and at least one visible child with `error` equal to `true`.
+     * @param element
+     */
+    hasInvalidChild(element: defs.Element): boolean;
 }

package/forms/common.d.ts

@@ -11,10 +11,9 @@ export declare function getErrorId(elementId: string): string;
  * @param elementId The id of the DOM element representing the Form Element.
  * @param inputId (optional) The id of the DOM element representing the main input for the Form Element.
  * When specified, the title is marked as "for" that DOM element.
- * @param className (optional) An alternative class name to use instead of the default. This is used when some types of section present the title within a button.
  * @returns A title component, or `null` if there is no title.
  */
-export declare function renderTitle(host: FormPresenterHost, element: defs.Element, elementId: string, inputId?: string, className?: string): JSX.Element;
+export declare function renderTitle(host: FormPresenterHost, element: defs.Element, elementId: string, inputId?: string): JSX.Element;
 /**
  * Renders the description for a Form Element.
  * @param host The form host.
@@ -22,7 +21,7 @@ export declare function renderTitle(host: FormPresenterHost, element: defs.Eleme
  * @param elementId The id of the DOM element representing the Form Element.
  * @returns A description component, or `null` if there is no description.
  */
-export declare function renderDescription(host: FormPresenterHost, element: defs.Element, elementId: string): JSX.Element;
+export declare function renderDescription(host: FormPresenterHost, element: defs.Element, elementId: string, className?: string): JSX.Element;
 /**
  * Renders the accessible description for a Form Element.
  * @param host The form host.
@@ -48,16 +47,16 @@ export declare function renderError(host: FormPresenterHost, element: defs.Eleme
  * @param name The name of the Form Element.
  * @param host The form presenter host.
  */
-export declare function renderFocus(target: HTMLElement & {
+export declare function renderFocus(target: (HTMLElement & {
     disabled?: boolean | undefined;
-}, name: string, host: FormPresenterHost): void;
+}) | null, name: string | undefined, host: FormPresenterHost): void;
 /**
  * Returns a memoized function which asks the host to focus the provided element when the form is
  * initially shown. Ignores the specified target if it is null or disabled.
  * @param component The form component
  * @returns A memoized function that focuses a target HTML element.
  */
-export declare function useFocusCallback(component: FormComponent): (target: ReactNode & {
+export declare function useFocusCallback(component: FormComponent): (target: (ReactNode & {
     disabled?: boolean;
     thumbRefs?: any[];
-}) => void;
+}) | null) => void;

package/forms/common.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabel from"@vertigis/react-ui/FormLabel";import{useCallback}from"react";import*as React from"react";import Markdown from"./components/Markdown.js";import{isMarkdown,markdownToText}from"./textUtilities.js";const ERROR_SUFFIX="-error",DESCRIPTION_SUFFIX="-description",TITLE_SUFFIX="-title";function getTitleId(e){return`${e}${TITLE_SUFFIX}`}function getDescriptionId(e){return`${e}${DESCRIPTION_SUFFIX}`}function getErrorId(e){return`${e}${ERROR_SUFFIX}`}function renderTitle(e,r,t,n,o){return r.title?(o=o||"form-element-title",React.createElement(FormLabel,{className:o,htmlFor:n,id:`${t}-label`},React.createElement(Markdown,{host:e,inline:!0,text:r.title}))):null}function renderDescription(e,r,t){return r.description?React.createElement(FormHelperText,{component:"div",disabled:!r.enabled,error:!1,id:`${t}-description`},React.createElement(Markdown,{host:e,text:r.description})):null}function renderAccessibleDescription(e,r,t){let n=e.translateText(r.accessibleDescription);return n||(r=e.translateText(r.description),n=isMarkdown(r)?markdownToText(r.markdown):r),n?React.createElement(Box,{sx:{display:"none"},id:`${t}-accessible-description`},n):null}function renderError(e,r){return r.error?React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},React.createElement(Markdown,{host:e,text:r.error})):null}function renderFocus(e,r,t){null===e||e.disabled||t.renderFocus(e,r)}function useFocusCallback(e){const{host:r,name:t}=e.props;return useCallback(e=>{null===(e=Array.isArray(e?.thumbRefs)&&0<e.thumbRefs.length?e.thumbRefs[0].current:e)||e.disabled||r.renderFocus(e,t)},[e.enabled,t,r])}export{getTitleId,getDescriptionId,getErrorId,renderTitle,renderDescription,renderAccessibleDescription,renderError,renderFocus,useFocusCallback};
+import Box from"@vertigis/react-ui/Box";import FormHelperText from"@vertigis/react-ui/FormHelperText";import FormLabel from"@vertigis/react-ui/FormLabel";import{useCallback}from"react";import*as React from"react";import{formClasses}from"./components/Form.js";import Markdown from"./components/Markdown.js";import{hasContent,isMarkdown,markdownToText}from"./textUtilities.js";const ERROR_SUFFIX="-error",DESCRIPTION_SUFFIX="-description",TITLE_SUFFIX="-title";function getTitleId(e){return`${e}${TITLE_SUFFIX}`}function getDescriptionId(e){return`${e}${DESCRIPTION_SUFFIX}`}function getErrorId(e){return`${e}${ERROR_SUFFIX}`}function renderTitle(e,r,t,n){return hasContent(r.title)?React.createElement(FormLabel,{className:formClasses.formElementTitle,htmlFor:n,id:`${t}-label`,required:!!r.require},React.createElement(Markdown,{host:e,inline:!0,text:r.title})):null}function renderDescription(e,r,t,n){return hasContent(r.description)?React.createElement(FormHelperText,{className:n,component:"div",disabled:!r.enabled,error:!1,id:`${t}-description`},React.createElement(Markdown,{host:e,text:r.description})):null}function renderAccessibleDescription(e,r,t){let n=e.translateText(r.accessibleDescription);return n||(r=e.translateText(r.description),n=isMarkdown(r)?markdownToText(r.markdown):r),n?React.createElement(Box,{sx:{display:"none"},id:`${t}-accessible-description`},n):null}function renderError(e,r){return hasContent(r.error)?React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},React.createElement(Markdown,{host:e,text:r.error})):null}function renderFocus(e,r,t){null===e||e.disabled||t.renderFocus(e,r)}function useFocusCallback(e){const{host:r,name:t}=e.props;return useCallback(e=>{null===(e=Array.isArray(e?.thumbRefs)&&0<e.thumbRefs.length?e.thumbRefs[0].current:e)||e.disabled||r.renderFocus(e,t)},[e.enabled,t,r])}export{getTitleId,getDescriptionId,getErrorId,renderTitle,renderDescription,renderAccessibleDescription,renderError,renderFocus,useFocusCallback};

package/forms/components/AccordionGroup.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FormComponent } from "../FormComponent";
+interface AccordionGroupProps {
+    /** The CSS class name of the root element. */
+    className?: string;
+    /**
+     * The `FormComponent` being used to render the Form Elements within this Component.
+     */
+    component: FormComponent;
+}
+/**
+ * This component contains a set of "Section" Form Elements with a `format` of `"accordion-section"`.
+ */
+declare const AccordionGroup: ({ className, component }: AccordionGroupProps) => JSX.Element;
+export default AccordionGroup;

package/forms/components/AccordionGroup.js

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

package/forms/components/AutoComplete.d.ts

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

package/forms/components/AutoComplete.js

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