@vertigis/workflow 5.48.2 → 5.50.0

package/forms/FormHost.d.ts

@@ -32,33 +32,54 @@ interface LastFocusInfo {
 }
 /** Exposes functionality for driving a form. */
 export declare abstract class FormHost implements FormPresenterHost {
-    /** Indicates the overall state of the form. */
-    form: defs.Form;
-    deriveLocale(): string;
+    /** The DOM container node. */
+    container: HTMLElement | undefined;
+    /** Indicates if the form is a custom form. */
+    custom: boolean;
+    /** Indicates if the form should be dismissed. */
+    dismiss: boolean;
+    /** Indicates if the form is enabled. */
+    enabled: boolean;
     /** Indicates all errors to be assigned. */
     errors: Record<string, defs.Text | undefined>;
+    /** Indicates the overall state of the form. */
+    form: defs.Form;
     /** Indicates any reference information relevant to components. */
     refs: Record<string, FormComponent | undefined>;
-    /** Indicates if the form is enabled. */
-    enabled: boolean;
     /** Indicates if the form is visible. */
     visible: boolean;
-    /** Indicates if the form should be dismissed. */
-    dismiss: boolean;
-    /** Indicates if the form is a custom form. */
-    custom: boolean;
-    /** The DOM container node. */
-    container: HTMLElement | undefined;
-    /** The next event index. */
-    protected eventIndex: number;
-    /** The event queue. */
-    protected eventQueue: defs.Event[];
     /**
      * We keep track of the outermost DOM element for each form element here
      * so that when any DOM element gains focus in the form we can determine which element
      * it belongs to. This helps with deciding where to move focus to when validation fails.
      */
     protected domContainers: Record<string, HTMLElement>;
+    /** The next event index. */
+    protected eventIndex: number;
+    /** The event queue. */
+    protected eventQueue: defs.Event[];
+    /** Indicates the focus observer. */
+    protected focusObserver: ((event: FocusEvent) => void) | undefined;
+    /** Indicates a method to restore the last focus. */
+    protected lastFocus: LastFocusInfo | undefined;
+    /** Indicates the next element that should receive focus. */
+    protected nextFocus: boolean | string;
+    /** Indicates the next element that should receive a refresh. */
+    protected nextRefresh: boolean | Record<string, boolean>;
+    /**
+     * This stores values which are to be re-applied after elements have been refreshed
+     * due to the value of a depended-upon element changing. The values here are copied from elements prior to
+     * the "populate" or "suggest" handler being executed, so they may not be the same exact Items
+     * as next time around, but the underlying values can still be used to find the equivalent and select them.
+     */
+    protected pendingValues: Record<string, {
+        label?: defs.Text | undefined;
+        value: defs.Value;
+    }>;
+    /** Indicates the style o */
+    protected style: HTMLStyleElement | undefined;
+    /** The timer handler for idle/busy handling. */
+    protected timerHandle: (() => void) | undefined;
     /** The event promise, for when the consumer is waiting. */
     private eventTask;
     /**
@@ -70,56 +91,99 @@ export declare abstract class FormHost implements FormPresenterHost {
      */
     private mutuallyExclusiveSections;
     private resolveEvent;
-    /** The timer handler for idle/busy handling. */
-    protected timerHandle: (() => void) | undefined;
-    /** Indicates a method to restore the last focus. */
-    protected lastFocus: LastFocusInfo | undefined;
-    /** Indicates the next element that should receive focus. */
-    protected nextFocus: boolean | string;
-    /** Indicates the next element that should receive a refresh. */
-    protected nextRefresh: boolean | Record<string, boolean>;
-    /** Indicates the focus observer. */
-    protected focusObserver: ((event: FocusEvent) => void) | undefined;
-    /** Indicates the style o */
-    protected style: HTMLStyleElement | undefined;
-    /** Mounts the form into the DOM. */
-    protected mount(): void;
-    /** Removes the form from the DOM. */
-    protected unmount(): void;
     /**
-     * Intelligently tracks the last focus, in response to focus events within
-     * the form container. We attempt to determine which form element `target` belongs to,
-     * so that we can have a better idea where we are in the order of elements.
-     *
-     * This comes into play later when we might want to decide where to move focus
-     * based on where we currently are.
-     * @param target The DOM element that has just gained focus.
+     * This method is used to update the values of form elements that depend on another
+     * and have "Persist Value on Refresh" set to true.
      */
-    protected observeFocus(target: EventTarget): void;
+    applyPendingValues(): void;
+    /** Starts the busy timer. */
+    busy(): void;
+    /** Coerces a number. */
+    coerceNumber(value: string, locale?: string): number;
+    /** Dequeues the next event (used by observe()). */
+    dequeue(): defs.Event | undefined;
+    deriveLocale(): string;
+    displayDialog(children: (closeDialog: () => void) => ReactNode, DialogComponent: ComponentType<any>): Promise<void>;
+    /** Disposes the form. */
+    dispose(): boolean;
+    /** Enqueues an event (used by publish()). */
+    enqueue(type: defs.EventType, event?: defs.Event): defs.Event;
+    /**
+     * Pass on an external event to the queue.
+     * This method is an arrow function so that the consumer can use it without an object reference.
+     * @param event The event to be added to the queue.
+     */
+    enqueueExternalEvent: (event: ExternalEvent) => void;
+    /** Finds an element. */
+    find(name: string | {
+        name: string;
+    } | undefined): defs.Element | undefined;
+    /** Finds the name of an element. */
+    findName(element: defs.Element | undefined): string | undefined;
     /** Focuses the form. */
     focus(): void;
     /** Focuses the form optionally focusing the initial element. */
     focus(initial: boolean): void;
     /** Focuses the form focusing the named element. */
     focus(name: string): void;
-    /** Shows the form. */
-    show(): boolean;
-    private isInvalid;
-    private getInvalidElements;
+    /** Formats a number. */
+    formatNumber(value: number, options?: FormatOptions): string;
+    /** Checks the form's validity. */
+    hasErrors(): 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;
     hasInvalidChild(element: defs.Element): boolean;
-    /** Shows the form in a disabled state. */
-    spin(): boolean;
     /** Hides the form in a disabled state. */
     hide(): boolean;
-    /** Disposes the form. */
-    dispose(): boolean;
+    /** Clears the busy timer. */
+    idle(): void;
+    /** Invalidates the form with a full refresh. */
+    invalidate(): void;
+    /** Invalidates the form with optionally a full refresh. */
+    invalidate(full: boolean): void;
+    /** Invalidates the form refreshing a single element. */
+    invalidate(name: string | undefined): void;
+    /** Loads the form. */
+    load(form?: defs.Form, template?: defs.Form): boolean;
+    /** Observes the form. */
+    observe(): Bluebird<defs.Event | undefined>;
+    /** Posts an event. */
+    post(type: defs.EventType, event?: defs.Event): void;
+    /** Publishes an event (used by post()). */
+    publish(type: defs.EventType, event?: defs.Event): defs.Event;
+    /** Forcefully refresh the form (use this with care). */
+    refresh(name?: string): void;
     /**
      * This method renders focus for just rendered elements.
      * It also moves focus to another element when `nextFocus` is the name of an element.
      */
     renderFocus(target: HTMLElement, name?: string): boolean;
+    /** Renders a component's state. */
+    renderState(name: string, type: "geometry", state?: defs.GeometryState[]): boolean;
+    /** Renders a component's state. */
+    renderState(name: string, type: "item-picker", state?: defs.ItemPickerState): boolean;
+    /** Renders a component's state. */
+    renderState(name: string, type: string, state?: object): boolean;
     /** Renders form text as plain text. */
     renderText(content: defs.Text | undefined): string;
+    /** Renders the form component. */
+    renderVisual(component: FormComponent): any;
+    /** Routes an event to achieve default behavior. */
+    route(event: defs.Event): boolean;
+    /** Shows the form. */
+    show(): boolean;
+    /** Shows the form in a disabled state. */
+    spin(): boolean;
+    /** Subscribes to all posted events (this does not capture enqueued events). */
+    subscribe(action: FormEventHandler): FormEventSubscription;
     /**
      * Translates the text. This is a bit of a no-op as we only have access to
      * the language strings in FormRenderer.
@@ -141,50 +205,37 @@ export declare abstract class FormHost implements FormPresenterHost {
      * @returns The underlying text.
      */
     translateText(content: defs.Text | undefined): string | defs.MarkdownRef | undefined;
-    /** Renders the form component. */
-    renderVisual(component: FormComponent): any;
-    /** Qualifies an event with defaults. */
-    protected qualifyDefault(event: defs.Event): string | undefined;
-    /** Qualifies an event. */
-    protected qualify(type: defs.EventType, event?: defs.Event): defs.Event;
-    /** Posts an event. */
-    post(type: defs.EventType, event?: defs.Event): void;
-    /** Subscribes to all posted events (this does not capture enqueued events). */
-    subscribe(action: FormEventHandler): FormEventSubscription;
-    /** Forcefully refresh the form (use this with care). */
-    refresh(name?: string): void;
-    /** Invalidates the form with a full refresh. */
-    invalidate(): void;
-    /** Invalidates the form with optionally a full refresh. */
-    invalidate(full: boolean): void;
-    /** Invalidates the form refreshing a single element. */
-    invalidate(name: string | undefined): void;
+    /**
+     * Attempts to trap the event. This is relevant during cascading behavior which affects
+     * other elements but afterwards.
+     */
+    trap(event: defs.Event): boolean;
     /** Updates the form if appropriate. */
     update(): void;
-    /** Clears the busy timer. */
-    idle(): void;
-    /** Starts the busy timer. */
-    busy(): void;
-    /** Publishes an event (used by post()). */
-    publish(type: defs.EventType, event?: defs.Event): defs.Event;
-    /** Enqueues an event (used by publish()). */
-    enqueue(type: defs.EventType, event?: defs.Event): defs.Event;
     /**
-     * Pass on an external event to the queue.
-     * This method is an arrow function so that the consumer can use it without an object reference.
-     * @param event The event to be added to the queue.
+     * Collapses all neighbouring sections except the one specified.
+     * @param expandedSectionName The name of the mutually exclusive section to be expanded. All others in the group will be collapsed.
      */
-    enqueueExternalEvent: (event: ExternalEvent) => void;
-    /** Dequeues the next event (used by observe()). */
-    dequeue(): defs.Event | undefined;
-    /** Observes the form. */
-    observe(): Bluebird<defs.Event | undefined>;
-    /** Loads the form. */
-    load(form?: defs.Form, template?: defs.Form): boolean;
-    /** Routes an event to achieve default behavior. */
-    route(event: defs.Event): boolean;
+    updateMutuallyExclusiveSections(expandedSectionName: string): void;
+    /**
+     * 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;
     /** Generates a new changed event given the source event. */
     protected changed(event: defs.Event): boolean;
+    /** Routes a click event. */
+    protected click(event: defs.Event): boolean;
+    /** Routes a prepare event. */
+    protected hydrate(event: defs.Event): boolean;
+    /**
+     * Returns true if the supplied element is effectively visible (i.e. has parent
+     * section - if it exists - visible) as well as itself, false otherwise.
+     * @param element The element to be tested.
+     */
+    protected isElementEffectivelyVisible(element: defs.Element | undefined): boolean;
     /**
      * Returns true if the supplied element is considered valid, false otherwise.
      * @param element The element to be tested.
@@ -192,73 +243,44 @@ export declare abstract class FormHost implements FormPresenterHost {
      * @param result An optional object which can be passed in to capture the error status, if any.
      */
     protected isElementValid(element: defs.Element, isInvisibleValid?: boolean, result?: Partial<defs.StatusRef>): boolean;
-    /**
-     * Returns true if the supplied element is effectively visible (i.e. has parent
-     * section - if it exists - visible) as well as itself, false otherwise.
-     * @param element The element to be tested.
-     */
-    protected isElementEffectivelyVisible(element: defs.Element | undefined): boolean;
     /**
      * Returns true if the element has a value defined. False otherwise.
      * @param element The element to be tested.
      */
     protected isElementValueDefined(element: defs.Element | undefined): boolean;
+    /** Mounts the form into the DOM. */
+    protected mount(): void;
     /**
-     * Attempts to trap the event. This is relevant during cascading behavior which affects
-     * other elements but afterwards.
-     */
-    trap(event: defs.Event): 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.
+     * Intelligently tracks the last focus, in response to focus events within
+     * the form container. We attempt to determine which form element `target` belongs to,
+     * so that we can have a better idea where we are in the order of elements.
      *
-     * 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.
+     * This comes into play later when we might want to decide where to move focus
+     * based on where we currently are.
+     * @param target The DOM element that has just gained focus.
      */
-    hasInitialSelectionToDependOn(elementName: string): boolean;
-    /** Routes a prepare event. */
-    protected hydrate(event: defs.Event): boolean;
+    protected observeFocus(target: EventTarget): void;
+    /** Qualifies an event. */
+    protected qualify(type: defs.EventType, event?: defs.Event): defs.Event;
+    /** Qualifies an event with defaults. */
+    protected qualifyDefault(event: defs.Event): string | undefined;
     /** Determines if the event origin is a submit button. */
     protected shouldTriggerValidation(event: defs.Event): boolean | void;
+    /** Routes a submit event. */
+    protected submit(event: defs.Event): boolean;
+    /** Routes a suggest event. */
+    protected suggest(event: defs.Event): boolean;
+    /** Removes the form from the DOM. */
+    protected unmount(): void;
     /** Routes a validate event. */
     protected validate(event: defs.Event): boolean;
     /** Verifies the element given the event. */
     protected verify(event: defs.Event): boolean;
-    /** Routes a suggest event. */
-    protected suggest(event: defs.Event): boolean;
-    /** Routes a submit event. */
-    protected submit(event: defs.Event): boolean;
-    /** Checks the form's validity. */
-    hasErrors(): boolean;
-    /** Finds an element. */
-    find(name: string | {
-        name: string;
-    } | undefined): defs.Element | undefined;
-    /** Finds the name of an element. */
-    findName(element: defs.Element | undefined): string | undefined;
-    /** Coerces a number. */
-    coerceNumber(value: string, locale?: string): number;
-    /** Formats a number. */
-    formatNumber(value: number, options?: FormatOptions): string;
-    /** Renders a component's state. */
-    renderState(name: string, type: "geometry", state?: defs.GeometryState[]): boolean;
-    /** Renders a component's state. */
-    renderState(name: string, type: "item-picker", state?: defs.ItemPickerState): boolean;
-    /** Renders a component's state. */
-    renderState(name: string, type: string, state?: object): boolean;
+    private enforceMutuallyExclusiveConstraints;
+    private getAllSectionElements;
+    private getInvalidElements;
+    private getMutuallyExclusiveSectionGroup;
     private getParentSection;
-    private isSectionCollapsed;
     /**
      * This method checks if the specified element is considered before the current value of `this.lastFocus`.
      * When the form is initially loading, we focus the first visible element in the form, regardless of error state.
@@ -268,6 +290,8 @@ export declare abstract class FormHost implements FormPresenterHost {
      * @returns True if the named element is considered before the one specified in `this.lastFocus`.
      */
     private isElementPositionBeforeLastFocused;
+    private isInvalid;
+    private isSectionCollapsed;
     /**
      *
      * @param target The DOM element that was focused
@@ -278,13 +302,4 @@ export declare abstract class FormHost implements FormPresenterHost {
      * @returns
      */
     private setLastFocus;
-    private getAllSectionElements;
-    private getMutuallyExclusiveSectionGroup;
-    /**
-     * Collapses all neighbouring sections except the one specified.
-     * @param expandedSectionName The name of the mutually exclusive section to be expanded. All others in the group will be collapsed.
-     */
-    updateMutuallyExclusiveSections(expandedSectionName: string): void;
-    private enforceMutuallyExclusiveConstraints;
-    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*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{isCollapsibleSection,isMutuallyExclusiveSection,isSection,sortAndFilter,text}from"./utils.js";export{defs};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(e,t){switch(typeof e){case"boolean":case"number":case"string":return e;case"object":break;default:return t}if(null===e)return t;if(e instanceof Array){let s=t;null==s&&(s=[]);let i=0;for(const t of e){const n=overlay(t,s[i]);void 0!==n&&(i<e.length?s[i]=n:s.push(n),++i)}return s}let s=t;void 0===s&&(s={});for(const t in e)s[t]=overlay(e[t],s[t]);return s}function createSubscription(e){const t=function(){return void 0!==e&&(t.active=!1,e(),!0)};return t.active=!0,t}export 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.domContainers={},this.mutuallyExclusiveSections={},this.nextFocus=!1,this.nextRefresh=!1,this.enqueueExternalEvent=e=>{const t={type:`external$${e.name}`,name:"header",argument:e};this.enqueue(t.type,t)}}deriveLocale(){return DEFAULT_LOCALE}mount(){const e=this.container,t=e.parentNode;null==t&&document.body.appendChild(e),this.update()}unmount(){const e=this.container,t=e.parentNode;null!=t&&t.removeChild(e)}observeFocus(e){if(this.enabled&&e instanceof HTMLElement&&(!this.lastFocus||this.lastFocus.target!==e)){let t=Object.entries(this.domContainers).filter(t=>t[1].contains(e));t.length>1&&(t=t.filter(e=>this.form.elements[e[0]].type!==FormElementTypes.SECTION));const s=t.length>0?t[0][0]:void 0;this.setLastFocus(e,s)}}focus(e){null==e&&(e=!1),!0===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.enforceMutuallyExclusiveConstraints();const t=this.errors;for(const e in t){const s=this.form.elements[e];null!=s&&(s.error=t[e],this.invalidate(e))}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 t in this.form.elements){const s=this.form.elements[t];if(this.isInvalid(s)&&this.getParentSection(s)===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){this.dismiss=!0;const e=this.container;e.dispatchEvent(createEvent(eventName));let t=this.focusObserver;return void 0!==t&&(e.removeEventListener("focus",t,!0),t=void 0),this.idle(),this.unmount(),this.refs={},presenter.releaseForm(this.container),this.container=void 0,this.lastFocus=void 0,this.eventTask=void 0,!0}return!1}renderFocus(e,t){if(!(this.enabled&&e instanceof HTMLElement&&!1!==this.nextFocus))return!1;const s=this.nextFocus;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 t=this.lastFocus?.target;if(!0===s&&t instanceof HTMLElement&&e.contains(t))return this.nextFocus=!1,t.focus(),!0}return!1}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,t=>{t&&e.props.name&&(this.domContainers[e.props.name]=t)})||presenter.renderNone(e)}qualifyDefault(e){const t=sortAndFilter(this.form.elements);for(const s in t){const i=t[s];if(null!=i&&!1!==i.visible&&i.enabled){if(i.default)return e.value=i.value,s;const t=sortAndFilter(i.items);if(null!=t)for(const i in t){const n=t[i];if(null!=n&&n.visible&&n.enabled&&n.default)return e.item=i,e.value=n.value,s}}}}qualify(e,t){if(null==t&&(t={}),"clicked"===e&&void 0===t.name&&(t.name=this.qualifyDefault(t)),t.type=e,void 0===t.routingKey){const s=t.name;t.routingKey=void 0!==s?e+"$"+s:e}return t}post(e,t){t=this.publish(e,t);const s=this.container;void 0!==s&&s.dispatchEvent(createEvent(eventName,t))}subscribe(e){let t=e;const s=this.container;if(void 0===s)return createSubscription();const i=function(){t=void 0,s.removeEventListener(eventName,n)},n=function(e){const s=e.detail;void 0!==s?Bluebird.resolve().then(function(){"function"==typeof t&&t(s)}):i()};return s.addEventListener(eventName,n),createSubscription(i)}refresh(e){if(!this.custom)if("string"==typeof e){const t=this.refs[e];presenter.refresh(t)}else 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(){const 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),this.eventQueue.length>0&&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,t):(this.eventQueue.push(t),t)}dequeue(){const e=this.eventQueue;if(e.length>0){let t=this.eventIndex;const s=e[t++];return t>=e.length?e.length=this.eventIndex=0:this.eventIndex=t,s}}observe(){return Bluebird.attempt(()=>{if(void 0!==this.eventTask)return this.eventTask;const e=this.dequeue();return void 0!==e?e:this.show()?(this.eventTask=new Task(e=>{this.resolveEvent=e}),this.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){let s={defaults:{},elements:{}};s=overlay(e,s),this.form=overlay(t,s);for(const e in this.form.elements){const t={showFilter:!1,checked:!1,enabled:!0,hoisted:!1,visible:!0,overlay:!1,default:!1,validates:!1,readOnly:!1,require:!1,autoActivate:!1};let s=this.form.elements[e];if(s=overlay(s,t),s.items)for(const e in s.items){const t={enabled:!0,checked:!1,visible:!0,default:!1,validates:!1};s.items[e]=overlay(s.items[e],t)}this.form.elements[e]=s}}return!0}route(e){switch(e.type){case"changed":return this.cascade(e.name);case"checked":return this.changed(e);case"clicked":return this.click(e);case"prepare":return this.hydrate(e);case"suggest":return this.suggest(e);case"validate":return this.verify(e);case"verify":return this.submit(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.isInvalidError(e.error)?(s.status="invalid",!1):!0!==e.require||(this.isElementEffectivelyVisible(e)?!!this.isElementValueDefined(e)||(s.status="missing",!1):t))}isElementEffectivelyVisible(e){if(null==e)return!1;const t=this.getParentSection(e);return!1!==t?.visible&&!1!==e.visible}isElementValueDefined(e){if(null==e)return!1;if(e.type===FormElementTypes.CHECKBOX)return!0;const t=e.current;if(null!=t)return!0;const s=e.value;if(null!=s&&""!==s)return!0;const i=e.items;if(null!=i)for(const e in i){const t=i[e];if(null!=t&&!0===t.checked)return!0}return!1}trap(e){switch(e.type){case"populate":case"load":case"suggest":break;default:return!1}const t=e.name,s=this.find(t);if(null==s)return!1;const i=s.dependsOn;if("string"!=typeof i)return!1;const n=this.find(i);return s.enabled=this.isElementEffectivelyVisible(n)&&this.isElementValueDefined(n),this.invalidate(t),!s.enabled}cascade(e){const t=this.find(e);if(null==t||!1===t.dependsOn)return!1;const s={[e]:!0},i=sortAndFilter(this.form.elements);for(const t in i){const n=i[t],r=n.dependsOn;if("string"==typeof r){const i=this.find(r);void 0!==i&&"string"!=typeof i.dependsOn&&(i.dependsOn=!0),!0===s[r]&&(s[t]=!0,n.checked=!1,n.current=void 0,n.label=void 0,n.items=void 0,n.value=void 0,this.invalidate(t),n.dependsOn===e&&this.enqueue("populate",{name:t}))}else n.dependsOn=!1}return!0}click(e){const t=this.form.elements[e.name];return null!=t&&t.type==FormElementTypes.BUTTONBAR&&this.validate(e)}hasInitialSelectionToDependOn(e){const t=this.form.elements[e];return t.type===FormElementTypes.DROPDOWNLIST&&(void 0!==t.current&&null!==t.current)}hydrate(e){const t=sortAndFilter(this.form.elements);for(const e in t){const t=this.form.elements[e].dependsOn;("string"!=typeof t||this.hasInitialSelectionToDependOn(t))&&this.enqueue("populate",{name:e}),this.enqueue("load",{name:e})}return!0}shouldTriggerValidation(e){const t=this.find(e.name);if(null!=t&&"string"==typeof e.value){const s=e.item;if("string"==typeof s){const e=t.items;if(null!=e){const t=e[s];if(null!=t)return!0===t.validates}return}return!0===t.validates}}validate(e){const t=this.shouldTriggerValidation(e);if(!0===t){const t=this.errors={},s=sortAndFilter(this.form.elements);for(const e in s){const i=s[e];null!=i&&(t[e]=void 0,this.enqueue("validate",{name:e}))}return this.enqueue("verify",{name:e.name,item:e.item,value:e.value,routingKey:"verify"}),!0}return!1===t&&(this.enqueue("end",{name:e.name,item:e.item,value:e.value,routingKey:"end"}),!0)}verify(e){const t=e.name,s=this.form.elements[t],i={status:void 0},n=this.isElementValid(s,!0,i);return t===this.lastFocus?.name&&(this.lastFocus.isInvalid=!n),!n&&(i.status&&(this.errors[t]={status:i.status}),!1===this.nextFocus&&t!==this.lastFocus?.name&&this.isElementPositionBeforeLastFocused(t,!0)&&this.focus(t),!0)}suggest(e){const t=this.form.elements[e.name];return null!=t&&(t.items={message:{label:{status:"trivial"},enabled:!1}},this.invalidate(e.name),!0)}submit(e){if(!this.hasErrors()){for(const e in this.form.elements)this.form.elements[e].error=void 0;return this.enqueue("submit",{name:e.name,item:e.item,value:e.value}),!0}const t=this.errors;for(const e in t){const s=this.form.elements[e];null!=s&&(s.error=t[e],this.invalidate(e))}const s=this.getInvalidElements(),i=[];let n=!1;for(const e of s){const t=this.getParentSection(e);if(isMutuallyExclusiveSection(t)){const e=this.findName(t),s=this.getMutuallyExclusiveSectionGroup(e);if(s){const e=i.find(e=>e.group===s);e?e.element.rowNumber>t.rowNumber&&(e.element=t):(i.push({group:s,element:t}),n=!0)}}else this.isSectionCollapsed(t)&&(t.collapsed=!1,n=!0)}for(const e of i)e.group.expandedSection=e.element;return n&&this.invalidate(),this.errors={},!1}hasErrors(){const e=this.errors;for(const t in e){const s=e[t];if(null!=s)return!0}return!1}find(e){if(null!=e)return"object"==typeof e&&(e=e.name),"string"==typeof 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,t){return t=t||this.deriveLocale(),new NumberParser(t).parse(e)}formatNumber(e,t){return t||(t={locale:this.deriveLocale()}),format(t,e)}renderState(e,t,s){return!1}getParentSection(e){const t=e.section;if(!t)return;const s="string"==typeof t?t:t.name;return this.form.elements[s]}isSectionCollapsed(e){return!(!e||e.type!==FormElementTypes.SECTION||!isCollapsibleSection(e)&&!isMutuallyExclusiveSection(e))&&!0===e.collapsed}isElementPositionBeforeLastFocused(e,t=!1){const s=this.lastFocus;if(!s)return!0;if(t&&!s.isInvalid)return!0;if("footer"===e)return!1;if("footer"===s.name)return!0;if(e&&void 0!==s.rowNumber&&void 0!==s.rowIndex){const t=this.form.elements?.[e];if(t)return void 0!==t.rowNumber&&void 0!==t.rowIndex?t.rowNumber<s.rowNumber||t.rowNumber===s.rowNumber&&t.rowIndex<s.rowIndex:t.index<s.rowNumber||t.index===s.rowNumber&&s.rowIndex>0}return!1}setLastFocus(e,t,s){if(this.lastFocus={target:e},!t)return;this.lastFocus.name=t;const i=this.form.elements?.[t];i&&(void 0!==i.rowNumber&&void 0!==i.rowIndex?(this.lastFocus.rowNumber=i.rowNumber,this.lastFocus.rowIndex=i.rowIndex):(this.lastFocus.rowNumber=i.index,this.lastFocus.rowIndex=0),this.lastFocus.isInvalid=s??!!i.error)}getAllSectionElements(){const e={};for(const t in this.form.elements){const s=this.form.elements[t];isSection(s)&&(e[t]=s)}return e}getMutuallyExclusiveSectionGroup(e){let t=this.mutuallyExclusiveSections[e];if(!t){const s=this.find(e);if(!s||!isMutuallyExclusiveSection(s))return;t=new MutuallyExclusiveSectionGroup({elementName:e,element:s});const i=s.format,n=this.getAllSectionElements(),r=Object.keys(sortAndFilter(n,e=>e.rowNumber)),o=r.indexOf(e);for(let e=o-1;e>=0;e--){const s=r[e],n=this.find(s);if(n.format!==i)break;t.unshift({elementName:s,element:n})}for(let e=o+1;e<r.length;e++){const s=r[e],n=this.find(s);if(n.format!==i)break;t.push({elementName:s,element:n})}t.forEach(e=>{this.mutuallyExclusiveSections[e.elementName]=t})}return t}updateMutuallyExclusiveSections(e){this.getMutuallyExclusiveSectionGroup(e).forEach(t=>{t.element.collapsed=t.elementName!==e}),this.refresh()}enforceMutuallyExclusiveConstraints(){const e=Object.keys(this.form.elements).map(e=>({elementName:e,element:this.form.elements[e]})).filter(e=>isMutuallyExclusiveSection(e.element)&&!1!==e.element.visible&&!0!==e.element.collapsed).sort((e,t)=>e.element.rowNumber-t.element.rowNumber),t=[];for(const s of e){const e=this.getMutuallyExclusiveSectionGroup(s.elementName);-1===t.indexOf(e)?t.push(e):s.element.collapsed=!0}}async displayDialog(e,t){await Promise.resolve()}}
+import Bluebird from"bluebird";import{Task}from"../Task.js";import{DEFAULT_LOCALE}from"../constants.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{isCollapsibleSection,isItemsRef,isMutuallyExclusiveSection,isSection,sortAndFilter,text}from"./utils.js";export{defs};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(e,t){switch(typeof e){case"boolean":case"number":case"string":return e;case"object":break;default:return t}if(null===e)return t;if(e instanceof Array){let s=t;null==s&&(s=[]);let i=0;for(const t of e){const n=overlay(t,s[i]);void 0!==n&&(i<e.length?s[i]=n:s.push(n),++i)}return s}let s=t;void 0===s&&(s={});for(const t in e)s[t]=overlay(e[t],s[t]);return s}function createSubscription(e){const t=function(){return void 0!==e&&(t.active=!1,e(),!0)};return t.active=!0,t}export class FormHost{constructor(){this.container=document.createElement("div"),this.custom=!1,this.dismiss=!1,this.enabled=!1,this.errors={},this.form={defaults:{},elements:{}},this.refs={},this.visible=!1,this.domContainers={},this.eventIndex=0,this.eventQueue=[],this.nextFocus=!1,this.nextRefresh=!1,this.pendingValues={},this.mutuallyExclusiveSections={},this.enqueueExternalEvent=e=>{const t={type:`external$${e.name}`,name:"header",argument:e};this.enqueue(t.type,t)}}applyPendingValues(){if(!(this.eventQueue.length>0))for(const[e,t]of Object.entries(this.pendingValues)){const s=this.form.elements[e];if(s){switch(s.type){case"AutoComplete":{const e=Object.entries(s.items??{}).find(([,e])=>e.value===t.value);if(e){const[t,i]=e;s.current=t,s.label=i.label,s.value=i.value}break}case"CheckGroup":case"ItemPicker":case"ListBox":{const e=Object.values(s.items??{}),{value:i}=t;if(e.length>0&&isItemsRef(i)){const t=[];for(const s of i.items){const i=e.find(e=>e.value===s.value);i&&t.push(i)}if(t.length>0){for(const s of e)s.checked=t.includes(s);s.value={refValueType:"items",items:t}}}break}case"DropDownList":case"RadioGroup":{const e=Object.values(s.items??{}).find(e=>e.value===t.value);e&&(s.value=e.value);break}default:throw new Error(`Element type does not support pending values: ${s.type}`)}delete this.pendingValues[e]}else console.warn(`Failed to find element to apply pending values to: ${e}`),delete this.pendingValues[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)}}}coerceNumber(e,t){return t=t||this.deriveLocale(),new NumberParser(t).parse(e)}dequeue(){const e=this.eventQueue;if(e.length>0){let t=this.eventIndex;const s=e[t++];return t>=e.length?e.length=this.eventIndex=0:this.eventIndex=t,s}}deriveLocale(){return DEFAULT_LOCALE}async displayDialog(e,t){await Promise.resolve()}dispose(){if(!this.dismiss){this.dismiss=!0;const e=this.container;e.dispatchEvent(createEvent(eventName));let t=this.focusObserver;return void 0!==t&&(e.removeEventListener("focus",t,!0),t=void 0),this.idle(),this.unmount(),this.refs={},presenter.releaseForm(this.container),this.container=void 0,this.lastFocus=void 0,this.eventTask=void 0,!0}return!1}enqueue(e,t){return t=this.qualify(e,t),void 0!==this.eventTask?(this.resolveEvent(t),this.eventTask=void 0,t):(this.eventQueue.push(t),t)}find(e){if(null!=e)return"object"==typeof e&&(e=e.name),"string"==typeof e?this.form.elements[e]:void 0}findName(e){for(const t in this.form.elements)if(this.form.elements[t]===e)return t}focus(e){null==e&&(e=!1),!0===e&&(this.lastFocus=void 0),!1===e&&!1===(e=this.nextFocus)&&(e=!0),this.nextFocus=e,this.invalidate(!0!==e?e:void 0)}formatNumber(e,t){return t||(t={locale:this.deriveLocale()}),format(t,e)}hasErrors(){const e=this.errors;for(const t in e){const s=e[t];if(null!=s)return!0}return!1}hasInitialSelectionToDependOn(e){const t=this.form.elements[e];return t.type===FormElementTypes.DROPDOWNLIST&&(void 0!==t.current&&null!==t.current)}hasInvalidChild(e){for(const t in this.form.elements){const s=this.form.elements[t];if(this.isInvalid(s)&&this.getParentSection(s)===e)return!0}return!1}hide(){return void 0!==this.container&&(this.idle(),this.visible&&(this.enabled=!1,this.visible=!1,this.unmount()),!0)}idle(){const e=this.timerHandle;void 0!==e&&(this.timerHandle=void 0,e())}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={})}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){let s={defaults:{},elements:{}};s=overlay(e,s),this.form=overlay(t,s);for(const e in this.form.elements){const t={showFilter:!1,checked:!1,enabled:!0,hoisted:!1,visible:!0,overlay:!1,default:!1,validates:!1,readOnly:!1,require:!1,autoActivate:!1};let s=this.form.elements[e];if(s=overlay(s,t),s.items)for(const e in s.items){const t={enabled:!0,checked:!1,visible:!0,default:!1,validates:!1};s.items[e]=overlay(s.items[e],t)}this.form.elements[e]=s}}return!0}observe(){return Bluebird.attempt(()=>{if(void 0!==this.eventTask)return this.eventTask;const e=this.dequeue();return void 0!==e?e:this.show()?(this.eventTask=new Task(e=>{this.resolveEvent=e}),this.eventTask):void 0})}post(e,t){t=this.publish(e,t);const s=this.container;void 0!==s&&s.dispatchEvent(createEvent(eventName,t))}publish(e,t){return this.enabled?(t=this.enqueue(e,t),this.eventQueue.length>0&&this.spin(),t):this.qualify(e,t)}refresh(e){if(!this.custom)if("string"==typeof e){const t=this.refs[e];presenter.refresh(t)}else this.refs={},presenter.refreshForm(this,this.container)}renderFocus(e,t){if(!(this.enabled&&e instanceof HTMLElement&&!1!==this.nextFocus))return!1;const s=this.nextFocus;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 t=this.lastFocus?.target;if(!0===s&&t instanceof HTMLElement&&e.contains(t))return this.nextFocus=!1,t.focus(),!0}return!1}renderState(e,t,s){return!1}renderText(e){return"string"==typeof e?e:text.isMarkdown(e)?text.markdownToText(e.markdown):""}renderVisual(e){return presenter.render(e,t=>{t&&e.props.name&&(this.domContainers[e.props.name]=t)})||presenter.renderNone(e)}route(e){switch(e.type){case"changed":return this.cascade(e.name);case"checked":return this.changed(e);case"clicked":return this.click(e);case"prepare":return this.hydrate(e);case"suggest":return this.suggest(e);case"validate":return this.verify(e);case"verify":return this.submit(e)}return!1}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.enforceMutuallyExclusiveConstraints();const t=this.errors;for(const e in t){const s=this.form.elements[e];null!=s&&(s.error=t[e],this.invalidate(e))}return 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)}subscribe(e){let t=e;const s=this.container;if(void 0===s)return createSubscription();const i=function(){t=void 0,s.removeEventListener(eventName,n)},n=function(e){const s=e.detail;void 0!==s?Bluebird.resolve().then(function(){"function"==typeof t&&t(s)}):i()};return s.addEventListener(eventName,n),createSubscription(i)}translateText(e){return"string"==typeof e||text.isMarkdown(e)?e:text.isStatus(e)?e.status:void 0}trap(e){switch(e.type){case"populate":case"load":case"suggest":break;default:return!1}const t=e.name,s=this.find(t);if(null==s)return!1;const i=s.dependsOn;if("string"!=typeof i)return!1;const n=this.find(i);return s.enabled=this.isElementEffectivelyVisible(n)&&this.isElementValueDefined(n),this.invalidate(t),!s.enabled}update(){const 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)}}updateMutuallyExclusiveSections(e){this.getMutuallyExclusiveSectionGroup(e).forEach(t=>{t.element.collapsed=t.elementName!==e}),this.refresh()}cascade(e){const t=this.find(e);if(null==t||!1===t.dependsOn)return!1;const s={[e]:!0},i=sortAndFilter(this.form.elements);for(const t in i){const n=i[t],r=n.dependsOn;if("string"==typeof r){const i=this.find(r);if(void 0!==i&&"string"!=typeof i.dependsOn&&(i.dependsOn=!0),!0===s[r]&&(s[t]=!0,void 0!==n.value&&n.dependsOn===e&&n.persistValueOnRefresh&&(this.pendingValues[t]={label:n.label,value:n.value}),n.checked=!1,n.current=void 0,n.label=void 0,n.items=void 0,n.value=void 0,this.invalidate(t),n.dependsOn===e)){const e=this.pendingValues[t];"AutoComplete"===n.type&&e?this.enqueue("suggest",{name:t,argument:e.label?.toString()}):this.enqueue("populate",{name:t})}}else n.dependsOn=!1}return!0}changed(e){return this.enqueue("changed",{name:e.name,item:e.item,value:e.value}),!0}click(e){const t=this.form.elements[e.name];return null!=t&&t.type==FormElementTypes.BUTTONBAR&&this.validate(e)}hydrate(e){const t=sortAndFilter(this.form.elements);for(const e in t){const t=this.form.elements[e].dependsOn;("string"!=typeof t||this.hasInitialSelectionToDependOn(t))&&this.enqueue("populate",{name:e}),this.enqueue("load",{name:e})}return!0}isElementEffectivelyVisible(e){if(null==e)return!1;const t=this.getParentSection(e);return!1!==t?.visible&&!1!==e.visible}isElementValid(e,t=!0,s={status:void 0}){return null!=e&&(s.status=void 0,text.isInvalidError(e.error)?(s.status="invalid",!1):!0!==e.require||(this.isElementEffectivelyVisible(e)?!!this.isElementValueDefined(e)||(s.status="missing",!1):t))}isElementValueDefined(e){if(null==e)return!1;if(e.type===FormElementTypes.CHECKBOX)return!0;const t=e.current;if(null!=t)return!0;const s=e.value;if(null!=s&&""!==s)return!0;const i=e.items;if(null!=i)for(const e in i){const t=i[e];if(null!=t&&!0===t.checked)return!0}return!1}mount(){const e=this.container,t=e.parentNode;null==t&&document.body.appendChild(e),this.update()}observeFocus(e){if(this.enabled&&e instanceof HTMLElement&&(!this.lastFocus||this.lastFocus.target!==e)){let t=Object.entries(this.domContainers).filter(t=>t[1].contains(e));t.length>1&&(t=t.filter(e=>this.form.elements[e[0]].type!==FormElementTypes.SECTION));const s=t.length>0?t[0][0]:void 0;this.setLastFocus(e,s)}}qualify(e,t){if(null==t&&(t={}),"clicked"===e&&void 0===t.name&&(t.name=this.qualifyDefault(t)),t.type=e,void 0===t.routingKey){const s=t.name;t.routingKey=void 0!==s?e+"$"+s:e}return t}qualifyDefault(e){const t=sortAndFilter(this.form.elements);for(const s in t){const i=t[s];if(null!=i&&!1!==i.visible&&i.enabled){if(i.default)return e.value=i.value,s;const t=sortAndFilter(i.items);if(null!=t)for(const i in t){const n=t[i];if(null!=n&&n.visible&&n.enabled&&n.default)return e.item=i,e.value=n.value,s}}}}shouldTriggerValidation(e){const t=this.find(e.name);if(null!=t&&"string"==typeof e.value){const s=e.item;if("string"==typeof s){const e=t.items;if(null!=e){const t=e[s];if(null!=t)return!0===t.validates}return}return!0===t.validates}}submit(e){if(!this.hasErrors()){for(const e in this.form.elements)this.form.elements[e].error=void 0;return this.enqueue("submit",{name:e.name,item:e.item,value:e.value}),!0}const t=this.errors;for(const e in t){const s=this.form.elements[e];null!=s&&(s.error=t[e],this.invalidate(e))}const s=this.getInvalidElements(),i=[];let n=!1;for(const e of s){const t=this.getParentSection(e);if(isMutuallyExclusiveSection(t)){const e=this.findName(t),s=this.getMutuallyExclusiveSectionGroup(e);if(s){const e=i.find(e=>e.group===s);e?e.element.rowNumber>t.rowNumber&&(e.element=t):(i.push({group:s,element:t}),n=!0)}}else this.isSectionCollapsed(t)&&(t.collapsed=!1,n=!0)}for(const e of i)e.group.expandedSection=e.element;return n&&this.invalidate(),this.errors={},!1}suggest(e){const t=this.form.elements[e.name];return null!=t&&(t.items={message:{label:{status:"trivial"},enabled:!1}},this.invalidate(e.name),!0)}unmount(){const e=this.container,t=e.parentNode;null!=t&&t.removeChild(e)}validate(e){const t=this.shouldTriggerValidation(e);if(!0===t){const t=this.errors={},s=sortAndFilter(this.form.elements);for(const e in s){const i=s[e];null!=i&&(t[e]=void 0,this.enqueue("validate",{name:e}))}return this.enqueue("verify",{name:e.name,item:e.item,value:e.value,routingKey:"verify"}),!0}return!1===t&&(this.enqueue("end",{name:e.name,item:e.item,value:e.value,routingKey:"end"}),!0)}verify(e){const t=e.name,s=this.form.elements[t],i={status:void 0},n=this.isElementValid(s,!0,i);return t===this.lastFocus?.name&&(this.lastFocus.isInvalid=!n),!n&&(i.status&&(this.errors[t]={status:i.status}),!1===this.nextFocus&&t!==this.lastFocus?.name&&this.isElementPositionBeforeLastFocused(t,!0)&&this.focus(t),!0)}enforceMutuallyExclusiveConstraints(){const e=Object.keys(this.form.elements).map(e=>({elementName:e,element:this.form.elements[e]})).filter(e=>isMutuallyExclusiveSection(e.element)&&!1!==e.element.visible&&!0!==e.element.collapsed).sort((e,t)=>e.element.rowNumber-t.element.rowNumber),t=[];for(const s of e){const e=this.getMutuallyExclusiveSectionGroup(s.elementName);-1===t.indexOf(e)?t.push(e):s.element.collapsed=!0}}getAllSectionElements(){const e={};for(const t in this.form.elements){const s=this.form.elements[t];isSection(s)&&(e[t]=s)}return e}getInvalidElements(){return Object.keys(this.form.elements).map(e=>this.form.elements[e]).filter(this.isInvalid)}getMutuallyExclusiveSectionGroup(e){let t=this.mutuallyExclusiveSections[e];if(!t){const s=this.find(e);if(!s||!isMutuallyExclusiveSection(s))return;t=new MutuallyExclusiveSectionGroup({elementName:e,element:s});const i=s.format,n=this.getAllSectionElements(),r=Object.keys(sortAndFilter(n,e=>e.rowNumber)),o=r.indexOf(e);for(let e=o-1;e>=0;e--){const s=r[e],n=this.find(s);if(n.format!==i)break;t.unshift({elementName:s,element:n})}for(let e=o+1;e<r.length;e++){const s=r[e],n=this.find(s);if(n.format!==i)break;t.push({elementName:s,element:n})}t.forEach(e=>{this.mutuallyExclusiveSections[e.elementName]=t})}return t}getParentSection(e){const t=e.section;if(!t)return;const s="string"==typeof t?t:t.name;return this.form.elements[s]}isElementPositionBeforeLastFocused(e,t=!1){const s=this.lastFocus;if(!s)return!0;if(t&&!s.isInvalid)return!0;if("footer"===e)return!1;if("footer"===s.name)return!0;if(e&&void 0!==s.rowNumber&&void 0!==s.rowIndex){const t=this.form.elements?.[e];if(t)return void 0!==t.rowNumber&&void 0!==t.rowIndex?t.rowNumber<s.rowNumber||t.rowNumber===s.rowNumber&&t.rowIndex<s.rowIndex:t.index<s.rowNumber||t.index===s.rowNumber&&s.rowIndex>0}return!1}isInvalid(e){return!!e.error&&!1!==e.visible}isSectionCollapsed(e){return!(!e||e.type!==FormElementTypes.SECTION||!isCollapsibleSection(e)&&!isMutuallyExclusiveSection(e))&&!0===e.collapsed}setLastFocus(e,t,s){if(this.lastFocus={target:e},!t)return;this.lastFocus.name=t;const i=this.form.elements?.[t];i&&(void 0!==i.rowNumber&&void 0!==i.rowIndex?(this.lastFocus.rowNumber=i.rowNumber,this.lastFocus.rowIndex=i.rowIndex):(this.lastFocus.rowNumber=i.index,this.lastFocus.rowIndex=0),this.lastFocus.isInvalid=s??!!i.error)}}

package/forms/FormPresenterHost.d.ts

@@ -12,10 +12,50 @@ export interface FormPresenterHost {
     enabled: boolean;
     /** The form to render. */
     form: defs.Form;
-    /** Posts an event. */
-    post(type: "changed" | "cancel" | "clicked" | "custom" | "dragged" | "suggest", event?: defs.Event): void;
+    /** References all elements. */
+    refs: Record<string, FormComponent | undefined>;
+    /** Coerces a number from a value. */
+    coerceNumber(value: string, locale?: string): number;
+    /**
+     * Derives the current locale set by the host application (or default if undefined) will be returned.
+     */
+    deriveLocale(): string;
+    /**
+     * 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>;
     /** Disposes the form. */
     dispose(): void;
+    /**
+     * Passes on an external event (from the host application) to the form's event queue.
+     * @param event An event received from the host application.
+     */
+    enqueueExternalEvent(event: ExternalEvent): void;
+    /** Find the element. */
+    find(name: string | {
+        name: string;
+    } | undefined): defs.Element | undefined;
+    /** Formats a value into a string. */
+    formatNumber(value: number, options?: FormatOptions): string;
+    /**
+     * 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;
+    /** Posts an event. */
+    post(type: "changed" | "cancel" | "clicked" | "custom" | "dragged" | "suggest", event?: defs.Event): void;
+    /** Renders the focus. */
+    renderFocus(target: Node, name?: string): boolean;
+    /** Renders a component's state. */
+    renderState(name: string, type: "geometry", state?: defs.GeometryState[]): boolean;
+    /** Renders a component's state. */
+    renderState(name: string, type: string, state?: object): boolean;
+    /** Renders form text to display text. */
+    renderText(text: defs.Text | undefined): string;
+    /** Renders a component's visual. */
+    renderVisual(component: object): any;
     /**
      * Translates the supplied value.
      * @param content The string or {@link defs.StatusRef} to be translated.
@@ -32,49 +72,9 @@ export interface FormPresenterHost {
      * @param content The {@link defs.Text} to be translated.
      */
     translateText(content: defs.Text | undefined): string | defs.MarkdownRef | undefined;
-    /** References all elements. */
-    refs: Record<string, FormComponent | undefined>;
-    /** Renders the focus. */
-    renderFocus(target: Node, name?: string): boolean;
-    /** Renders form text to display text. */
-    renderText(text: defs.Text | undefined): string;
-    /** Renders a component's visual. */
-    renderVisual(component: object): any;
-    /** Renders a component's state. */
-    renderState(name: string, type: "geometry", state?: defs.GeometryState[]): boolean;
-    /** Renders a component's state. */
-    renderState(name: string, type: string, state?: object): boolean;
-    /** Find the element. */
-    find(name: string | {
-        name: string;
-    } | undefined): defs.Element | undefined;
-    /** Coerces a number from a value. */
-    coerceNumber(value: string, locale?: string): number;
-    /** Formats a value into a string. */
-    formatNumber(value: number, options?: FormatOptions): string;
-    /**
-     * Derives the current locale set by the host application (or default if undefined) will be returned.
-     */
-    deriveLocale(): string;
-    /**
-     * Passes on an external event (from the host application) to the form's event queue.
-     * @param event An event received from the host application.
-     */
-    enqueueExternalEvent(event: ExternalEvent): void;
     /**
      * Collapses all neighbouring mutually exclusive sections except the one specified.
      * @param expandedSection The name of the section to be expanded. All others in the group will be collapsed.
      */
     updateMutuallyExclusiveSections(expandedSection: string): void;
-    /**
-     * 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/MutuallyExclusiveSectionGroup.d.ts

@@ -3,10 +3,10 @@ import type * as defs from "./FormDefinition";
  * The definition of a Form Element along with its name.
  */
 export type ElementKeyValuePair = {
-    /** The name of the form element as defined in the form.  */
-    elementName: string;
     /** The implementation of the element itself. */
     element: defs.Element;
+    /** The name of the form element as defined in the form.  */
+    elementName: string;
 };
 /**
  * This facilitates the lookup of related Section form elements, for cases where
@@ -28,14 +28,14 @@ export default class MutuallyExclusiveSectionGroup extends Array<ElementKeyValue
      * if none are expanded, this returns undefined.
      */
     get expandedSection(): defs.Element | undefined;
+    /**
+     *  Gets a value indicating if a section is currently expanded in this group.
+     */
+    get hasExpandedSection(): boolean;
     /**
      * Sets the currently expanded section in this group.
      * All others are collapsed.
      */
     set expandedSection(element: defs.Element | undefined);
     getElement(elementName: string): defs.Element | undefined;
-    /**
-     *  Gets a value indicating if a section is currently expanded in this group.
-     */
-    get hasExpandedSection(): boolean;
 }

package/forms/MutuallyExclusiveSectionGroup.js

@@ -1 +1 @@
-export default class MutuallyExclusiveSectionGroup extends Array{get expandedSection(){return this.find(e=>!0!==e.element.collapsed)?.element}set expandedSection(e){const t=this.find(t=>t.element===e);if(!t)throw new Error("Element is not present in the group.");this.forEach(e=>e.element.collapsed=e!==t)}getElement(e){return this.find(t=>t.elementName===e)?.element}get hasExpandedSection(){return void 0!==this.expandedSection}}
+export default class MutuallyExclusiveSectionGroup extends Array{get expandedSection(){return this.find(e=>!0!==e.element.collapsed)?.element}get hasExpandedSection(){return void 0!==this.expandedSection}set expandedSection(e){const t=this.find(t=>t.element===e);if(!t)throw new Error("Element is not present in the group.");this.forEach(e=>e.element.collapsed=e!==t)}getElement(e){return this.find(t=>t.elementName===e)?.element}}

package/forms/NumberParser.d.ts

@@ -8,11 +8,11 @@
  */
 export default class NumberParser {
     private _biDirectionalChars;
-    private _group;
     private _decimal;
+    private _group;
+    private _index;
     private _minus;
     private _numeral;
-    private _index;
     /**
      * Creates a new instance of the {@link NumberParser} class.
      * @param locale The locale to use for parsing the text.

package/forms/branding/WorkflowColor.d.ts

@@ -3,15 +3,15 @@
  */
 export default class WorkflowColor {
     private values;
-    get r(): number;
-    get g(): number;
-    get b(): number;
-    get a(): number;
     constructor(value: number[] | string);
+    get a(): number;
+    get b(): number;
+    get g(): number;
+    get r(): number;
+    static fromJSON(value: number[]): WorkflowColor;
     clone(): WorkflowColor;
     equals(other: WorkflowColor): boolean;
     toCss(): string;
     toJSON(): number[];
     toString(): string;
-    static fromJSON(value: number[]): WorkflowColor;
 }