@vertigis/workflow 5.31.0

package/esm/forms/FormHost.d.ts

@@ -0,0 +1,207 @@
+import { Lookup } from "../Collections";
+import Bluebird from "../deps/bluebird_fork";
+import { Calendar } from "./Calendar";
+import * as defs from "./FormDefinition";
+import { FormPresenterHost, Facility } from "./FormPresenterHost";
+import { FormatOptions } from "./numberFormatter";
+export { defs, Facility };
+export interface FormEventSubscription {
+    (): boolean;
+    active: boolean;
+}
+export interface FormEventHandler {
+    (event: defs.Event): void;
+}
+/** Exposes functionality for driving a form. */
+export declare abstract class FormHost implements FormPresenterHost {
+    /** Indicates the overall state of the form. */
+    form: defs.Form;
+    /** Indicates all errors to be assigned. */
+    errors: Lookup<defs.Text>;
+    /** Indicates any reference information relevant to components. */
+    refs: {};
+    /** 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;
+    /** The next event index. */
+    protected eventIndex: number;
+    /** The event queue. */
+    protected eventQueue: defs.Event[];
+    /** The event promise, for when the consumer is waiting. */
+    private eventTask;
+    /**
+     * All elements of type "Section" with a format that is considered mutually exclusive, grouped based on continuity.
+     * If there is another element of type "Section" with a different format in between, two of the same mutually exclusive type,
+     * this represents the boundary between two different sets of mutually exclusive sections.
+     */
+    private mutuallyExclusiveSections;
+    private resolveEvent;
+    /** The timer handler for idle/busy handling. */
+    protected timerHandle: () => void;
+    /** Indicates a method to restore the last focus. */
+    protected lastFocus: {
+        target: HTMLElement;
+        name?: string;
+        rowIndex?: number;
+        rowNumber?: number;
+    };
+    /** Indicates the next element that should receive focus. */
+    protected nextFocus: boolean | string;
+    /** Indicates the next element that should receive a refresh. */
+    protected nextRefresh: boolean | Lookup<boolean>;
+    /** Indicates the focus observer. */
+    protected focusObserver: (event: FocusEvent) => void;
+    /** Indicates the style o */
+    protected style: HTMLStyleElement;
+    /** Mounts the form into the DOM. */
+    protected mount(): void;
+    /** Removes the form from the DOM. */
+    protected unmount(): void;
+    /** Intelligently tracks the last focus, */
+    protected observeFocus(target: EventTarget): void;
+    /** 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;
+    /** Shows the form in a disabled state. */
+    spin(): boolean;
+    /** Hides the form in a disabled state. */
+    hide(): boolean;
+    /** Disposes the form. */
+    dispose(): boolean;
+    /** Renders focus for just rendered elements. */
+    renderFocus(target: HTMLElement, name?: string): boolean;
+    /** Renders form text as HTML. */
+    renderHtml(content: defs.Text, htmlContentCategory?: defs.HTMLContentCategory): string;
+    /** Renders form text as plain text. */
+    renderText(content: defs.Text | undefined): string;
+    /** Renders the style for the form. */
+    renderStyle(css?: string): HTMLStyleElement;
+    /** Renders the form component. */
+    renderVisual(component: {}): any;
+    /** Qualifies an event with defaults. */
+    protected qualifyDefault(event: defs.Event): string;
+    /** 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): void;
+    /** 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;
+    /** Dequeues the next event (used by observe()). */
+    dequeue(): defs.Event;
+    /** Observes the form. */
+    observe(): Bluebird<defs.Event>;
+    /** Loads the form. */
+    load(): boolean;
+    /** Loads the form with a new definition. */
+    load(form: defs.Form, template?: defs.Form): boolean;
+    /** Routes an event to achieve default behavior. */
+    route(event: defs.Event): boolean;
+    /** Generates a new changed event given the source event. */
+    protected changed(event: defs.Event): boolean;
+    /**
+     * Returns true if the supplied element is considered valid, false otherwise.
+     * @param element The element to be tested.
+     * @param isInvisibleValid True if the element should be considered valid when not visible, false otherwise. Defaults to true.
+     * @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?: 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): boolean;
+    /**
+     * Returns true if the element has a value defined. False otherwise.
+     * @param element The element to be tested.
+     */
+    protected isElementValueDefined(element: defs.Element): boolean;
+    /**
+     * Attempts to trap the event. This is relevant during cascading behavior which affects
+     * other elements but afterwards.
+     */
+    trap(event: defs.Event): boolean;
+    /** Attempts to cascade the form. */
+    protected cascade(name: string): boolean;
+    /** Routes a click event. */
+    protected click(event: defs.Event): boolean;
+    /** Routes a prepare event. */
+    protected hydrate(event: defs.Event): boolean;
+    /** Determines if the event origin is a submit button. */
+    protected shouldTriggerValidation(event: defs.Event): boolean | 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;
+    }): defs.Element;
+    /** Finds the name of an element. */
+    findName(element: defs.Element): string;
+    /** Coerces a number. */
+    coerceNumber(value: string): number;
+    /** Formats a number. */
+    formatNumber(value: number, options: Intl.NumberFormatOptions | FormatOptions, useBrowserIntlApi?: boolean): string;
+    /** Renders a custom element. */
+    renderCustom(component: {}, element: defs.Element): JSX.Element;
+    /** 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?: {}): boolean;
+    /** Derives the locale for the given facility. */
+    deriveCalendar(format: defs.DateTimeFormat): Calendar;
+    /** Derives the locale for the given facility. */
+    deriveLocale(facility: Facility): string;
+    /** Derives the locale for the given facility. */
+    deriveTimeZone(facility: Facility): any;
+    private getParentSection;
+    private isSectionCollapsed;
+    private isElementPositionBeforeLastFocused;
+    private setLastFocus;
+    private isSection;
+    private isAccordionSection;
+    private getAllSectionElements;
+    private getMutuallyExclusiveSectionElements;
+    /**
+     * Collapses all neighbouring accordion sections except the one specified.
+     * @param expandedAccordionSectionName The name of the accordion section to be expanded. All others in the group will be collapsed.
+     */
+    updateAccordionSections(expandedAccordionSectionName: string): void;
+}

package/esm/forms/FormHost.js

@@ -0,0 +1 @@
+import Globalize from"globalize";import"globalize";import"globalize/number";import moment from"moment-timezone";import{Task}from"../Task.js";import{DEFAULT_LOCALE}from"../constants.js";import Bluebird from"../deps/bluebird_fork.js";import{Calendar}from"./Calendar.js";import{FormComponent}from"./FormComponent.js";import*as defs from"./FormDefinition.js";import{LOCALE}from"./locales/stock.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 ensureTimeZone(){let e=moment.tz.names[0];return void 0===e&&moment.tz.setDefault(e=moment.tz.guess()),e}function ensureLocale(){let e=Globalize.locale();return void 0===e&&(Globalize.load(LOCALE),Globalize.locale(DEFAULT_LOCALE),e=Globalize.locale()),e.locale}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 n of i){var r=overlay(n,e[t]);void 0!==r&&(t<i.length?e[t]=r:e.push(r),++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}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}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());const t=[];var i,s=this.errors;for(const r in s){const n=this.form.elements[r];void 0!==n&&null!==n&&(n.error=s[r],this.invalidate(r),!1!==n.visible&&(i=this.getParentSection(n),this.isSectionCollapsed(i)&&t.push(i)))}return 0<t.length&&(t.forEach(e=>{var t;this.isAccordionSection(e)?(t=this.findName(e))&&this.updateAccordionSections(t):e.collapsed=!1}),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 i,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 r=null===(i=this.lastFocus)||void 0===i?void 0:i.target;if(!0===s&&r instanceof HTMLElement&&e.contains(r))return this.nextFocus=!1,r.focus(),!0}else if(!1===s&&t&&t!==(null===(s=this.lastFocus)||void 0===s?void 0:s.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):""}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 n in t){var i=t[n];if(null!=i&&!1!==i.visible&&i.enabled){if(i.default)return e.value=i.value,n;var s=sort(i.items);if(null!=s)for(const o in s){var r=s[o];if(null!=r&&r.visible&&r.enabled&&r.default)return e.item=o,e.value=r.value,n}}}}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)):(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,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){if(null==e)return!1;var t=this.getParentSection(e);return(!t||!1!==t.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 i=e.items;if(null!=i)for(const r in i){var s=i[r];if(null!=s&&!0===s.checked)return!0}return!1}trap(e){switch(e.type){case"populate":case"load":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 n in s){const o=s[n];var r=o.dependsOn;if("string"==typeof r){const a=this.find(r);void 0!==a&&"string"!=typeof a.dependsOn&&(a.dependsOn=!0),!0===i[r]&&(i[n]=!0,o.checked=!1,o.current=void 0,o.label=void 0,o.items=void 0,o.value=void 0,this.invalidate(n),this.enqueue("populate",{name:n}))}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 r=this.errors={};var i=sort(this.form.elements);for(const n in i){var s=i[n];null!=s&&(r[n]=void 0,this.enqueue("validate",{name:n}))}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){return!this.hasErrors()&&(this.enqueue("submit",{name:e.name,item:e.item,value:e.value}),!0)}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("globalize");return Globalize(t).parseNumber(e)}formatNumber(e,t,i=!1){if(i)return format(t,e);i=this.deriveLocale("globalize");return Globalize(i).formatNumber(e,t)}renderCustom(e,t){if(e instanceof FormComponent)return renderers.element.renderCustom(e,t)}renderState(e,t,i){return!1}deriveCalendar(e){return Calendar.useNative()}deriveLocale(e){return ensureLocale()}deriveTimeZone(e){return ensureTimeZone()}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,i=this.lastFocus;if(e&&i&&void 0!==i.rowNumber&&void 0!==i.rowIndex){e=null===(t=this.form.elements)||void 0===t?void 0:t[e];if(e)return void 0!==e.rowNumber&&void 0!==e.rowIndex?e.rowNumber<i.rowNumber||e.rowNumber===i.rowNumber&&e.rowIndex<i.rowIndex:e.index<i.rowNumber||e.index===i.rowNumber&&0<i.rowIndex}return!1}setLastFocus(e,t){this.lastFocus={target:e},t&&(this.lastFocus.name=t,(t=null===(e=this.form.elements)||void 0===e?void 0:e[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"===(null==e?void 0:e.type)}isAccordionSection(e){return this.isSection(e)&&"accordion-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}getMutuallyExclusiveSectionElements(t){let i=this.mutuallyExclusiveSections[t];if(!i){var e=this.find(t);if(!this.isAccordionSection(e))return{};i={[t]:e};e=this.getAllSectionElements();const n=Object.keys(sort(e,e=>e.rowNumber));t=n.indexOf(t);for(let e=t-1;0<=e;e--){const o=n[e];var s=this.find(o);if(!this.isAccordionSection(s))break;i[o]=s}for(let e=t+1;e<n.length;e++){const o=n[e];var r=this.find(o);if(!this.isAccordionSection(r))break;i[o]=r}Object.keys(i).forEach(e=>{this.mutuallyExclusiveSections[e]=i})}return i}updateAccordionSections(t){const i=this.getMutuallyExclusiveSectionElements(t);Object.keys(i).forEach(e=>{i[e].collapsed=e!==t}),presenter.refreshForm(this,this.container)}}export{defs,FormHost};

package/esm/forms/FormPresenterHost.d.ts

@@ -0,0 +1,56 @@
+import { Calendar } from "./Calendar";
+import * as defs from "./FormDefinition";
+import { FormatOptions } from "./numberFormatter";
+/** Concrete types of facilities which deviate in terms of functionality. */
+export declare type Facility = "browser" | "globalize" | "moment";
+/** Exposes various features to components that require features of the environment. */
+export interface FormPresenterHost {
+    /** Indicates if the form is enabled or not. */
+    enabled: boolean;
+    /** The form to render. */
+    form: defs.Form;
+    /** Posts an event. */
+    post(type: "changed" | "cancel" | "clicked" | "custom" | "dragged" | "suggest", event?: defs.Event): void;
+    /** Disposes the form. */
+    dispose(): void;
+    /** References all elements. */
+    refs: {};
+    /** Refreshes the entire form. */
+    refresh(): void;
+    /** Renders a custom element. */
+    renderCustom(component: {}, element: defs.Element): any;
+    /** Renders the focus. */
+    renderFocus(target: Node, name?: string): boolean;
+    /** Renders form text to HTML. */
+    renderHtml(text: defs.Text, htmlContentCategory?: defs.HTMLContentCategory): string;
+    /** Renders form text to display text. */
+    renderText(text: defs.Text | undefined): string;
+    /** Renders a component's visual. */
+    renderVisual(component: {}): 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?: {}): boolean;
+    /** Find the element. */
+    find(name: string | {
+        name: string;
+    }): defs.Element;
+    /** Coerces a number from a value. */
+    coerceNumber(value: string): number;
+    /** Formats a value into a string. If 'useBrowserIntlApi' is true then options must be of type 'FormatOptions'. */
+    formatNumber(value: number, options: Intl.NumberFormatOptions | FormatOptions, useBrowserIntlApi?: boolean): string;
+    /** Formats a value into a string. */
+    deriveCalendar(format: defs.DateTimeFormat): Calendar;
+    /**
+     * Derives the current locale based on the provided facility. If the facility is undefined
+     *  then the workflow locale set by the host application (or default if undefined) will be returned.
+     */
+    deriveLocale(facility?: Facility): string;
+    /** Derives the current time zone. */
+    deriveTimeZone(facility: Facility): string;
+    /**
+     * 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;
+}

package/esm/forms/assets/arrow.d.ts

@@ -0,0 +1,3 @@
+export declare function renderArrowHead(): JSX.Element;
+export declare function renderArrowRight(): JSX.Element;
+export declare function renderArrowRollup(): JSX.Element;

package/esm/forms/assets/arrow.js

@@ -0,0 +1 @@
+import React from"react";function renderArrowHead(){return React.createElement("svg",{className:"arrowHead",viewBox:"0 0 200 200",preserveAspectRatio:"none"},React.createElement("path",{d:"M 0 0 V 200 L 200 100 Z"}))}function renderArrowRight(){return React.createElement("svg",{className:"arrowRight",viewBox:"0 0 24 24",preserveAspectRatio:"none"},React.createElement("path",{d:"M20 12l-8-8-1.4 1.4 5.6 5.6H4v2h12.2l-5.6 5.6L12 20l8-8z"}))}function renderArrowRollup(){return React.createElement("svg",{className:"arrowRollup",viewBox:"0 0 200 200",preserveAspectRatio:"none"},React.createElement("circle",{cx:"100",cy:"100",r:"100"}),React.createElement("polyline",{points:"50 100 100 50 150 100"}),React.createElement("polyline",{points:"50 150 100 100 150 150"}))}export{renderArrowHead,renderArrowRight,renderArrowRollup};

package/esm/forms/assets/chevron.d.ts

@@ -0,0 +1,2 @@
+export declare function renderChevronUp(): JSX.Element;
+export declare function renderChevronDown(): JSX.Element;

package/esm/forms/assets/chevron.js

@@ -0,0 +1 @@
+import React from"react";function renderChevronUp(){return React.createElement("svg",{className:"chevronUp",viewBox:"0 0 24 24"},React.createElement("g",null,React.createElement("path",{d:"M20 15.3l-8-8-8 8 1.4 1.4 6.6-6.6 6.6 6.6 1.4-1.4z"})))}function renderChevronDown(){return React.createElement("svg",{className:"chevronDown",viewBox:"0 0 24 24"},React.createElement("g",null,React.createElement("path",{d:"M18.6 7.3L12 13.9 5.4 7.3 4 8.7l8 8 8-8-1.4-1.4z"})))}export{renderChevronUp,renderChevronDown};

package/esm/forms/assets/cross.d.ts

@@ -0,0 +1,2 @@
+export declare function renderCrossAdd(): JSX.Element;
+export declare function renderCrossDelete(): JSX.Element;

package/esm/forms/assets/cross.js

@@ -0,0 +1 @@
+import React from"react";function renderCrossAdd(){return React.createElement("svg",{className:"crossAdd",viewBox:"0 0 200 200",preserveAspectRatio:"none"},React.createElement("polyline",{points:"0 100 200 100"}),React.createElement("polyline",{points:"100 0  100 200"}))}function renderCrossDelete(){return React.createElement("svg",{className:"crossDelete",viewBox:"0 0 200 200",preserveAspectRatio:"none"},React.createElement("circle",{cx:"100",cy:"100",r:"100"}),React.createElement("polyline",{points:"50 50 150 150"}),React.createElement("polyline",{points:"50 150 150 50"}))}export{renderCrossAdd,renderCrossDelete};

package/esm/forms/assets/datetime.d.ts

@@ -0,0 +1,2 @@
+export declare function renderCalendar(): JSX.Element;
+export declare function renderClock(): JSX.Element;

package/esm/forms/assets/datetime.js

@@ -0,0 +1 @@
+import React from"react";function renderCalendar(){return React.createElement("svg",{className:"calendar",viewBox:"0 0 24 24"},React.createElement("path",{d:"M23 6v16c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V6m21-6H2C.9 0 0 .9 0 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z"}),React.createElement("path",{d:"M13 13h3v3h-3v-3zm-2-2H8V8h3v3zm5-3h-3v3h3V8zm5 0h-3v3h3V8zM6 13H3v3h3v-3zm5 0H8v3h3v-3zm10 0h-3v3h3v-3zM6 18H3v3h3v-3zm5 0H8v3h3v-3zm5 0h-3v3h3v-3z"}))}function renderClock(){return React.createElement("svg",{className:"clock",viewBox:"0 0 24 24"},React.createElement("path",{d:"M12.9748 11.6775C13.8937 12.9336 16 16 16 16s-4.4547-3.0477-4.7742-3.3673c-.1703-.1703-.2432-.4286-.2222-.6921C11.043 11.1284 12 4 12 4s.8257 6.1508.9748 7.6775zM12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2m0-2C5.3726 0 0 5.3726 0 12s5.3726 12 12 12 12-5.3726 12-12S18.6274 0 12 0z"}))}export{renderCalendar,renderClock};

package/esm/forms/assets/remove.d.ts

@@ -0,0 +1 @@
+export declare function renderRemove(): JSX.Element;

package/esm/forms/assets/remove.js

@@ -0,0 +1 @@
+import React from"react";function renderRemove(){return React.createElement("svg",{className:"remove",viewBox:"0 0 24 24"},React.createElement("path",{d:"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"}))}export{renderRemove};

package/esm/forms/assets/scan.d.ts

@@ -0,0 +1,3 @@
+export declare function renderScanBarcode(): JSX.Element;
+export declare function renderScanQrcode(): JSX.Element;
+export declare function renderScanMulti(): JSX.Element;

package/esm/forms/assets/scan.js

@@ -0,0 +1 @@
+import React from"react";function renderScanBarcode(){return React.createElement("svg",{className:"barcode",viewBox:"0 0 24 24"},React.createElement("path",{d:"M1 8V4.6666C1 2.65 2.65 1 4.6667 1H8v2H4.6667C3.7477 3 3 3.7477 3 4.6666V8H1zm15-5h3.3333C20.2523 3 21 3.7477 21 4.6666V8h2V4.6666C23 2.65 21.35 1 19.3333 1H16v2zM8 21H4.6667C3.7477 21 3 20.2523 3 19.3333V16H1v3.3333C1 21.35 2.65 23 4.6667 23H8v-2zm13-5v3.3333C21 20.2523 20.2523 21 19.3333 21H16v2h3.3333C21.35 23 23 21.35 23 19.3333V16h-2zM6 5H5v14h1V5zm3 0H7v14h2V5zm5 0h-2v14h2V5zm-3 0h-1v14h1V5zm5 0h-1v14h1V5zm3 0h-2v14h2V5z"}))}function renderScanQrcode(){return React.createElement("svg",{className:"qrCode",viewBox:"0 0 24 24"},React.createElement("path",{d:"M9 6v3H6V6h3m1-1H5v5h5V5zM8 7H7v1h1V7zm1 8v3H6v-3h3m1-1H5v5h5v-5zm-2 2H7v1h1v-1zM18 6v3h-3V6h3m1-1h-5v5h5V5zm-2 2h-1v1h1V7zm-5 1h1V7h-1v1zm0 1h-1v1h1V9zm2 5h-3v1h3v-1zm0 2h1v-1h-1v1zm-2 0h-1v1h1v-1zm0 2h1v-1h-1v1zm4-1h1v-1h-1v1zm-1 1v-1h-1v2h2v-1h-1zm2-4h-1v1h1v-1zm1 2h1v-2h-1v2zm0 3h1v-1h-1v1zm-6-1h-1v1h1v-1zm0-13h-1v2h1V5zm-6 6H5v1h1v-1zm12 0v1h-1v1h2v-2h-1zm-2 0h-1v1h1v-1zm-1 3h1v-1h-1v1zm-1-3h-2v2h1v-1h1v-1zm-4 1h1v-1h-1v1zm-2 0v-1H7v2h3v-1H8zM3 8V4.6666C3 3.7477 3.7477 3 4.6667 3H8V1H4.6667C2.65 1 1 2.65 1 4.6666V8h2zm13-5h3.3333C20.2523 3 21 3.7477 21 4.6666V8h2V4.6666C23 2.65 21.35 1 19.3333 1H16v2zM8 21H4.6667C3.7477 21 3 20.2523 3 19.3333V16H1v3.3333C1 21.35 2.65 23 4.6667 23H8v-2zm13-5v3.3333C21 20.2523 20.2523 21 19.3333 21H16v2h3.3333C21.35 23 23 21.35 23 19.3333V16h-2z"}))}function renderScanMulti(){return React.createElement("svg",{className:"barcodeOrQrCode",viewBox:"0 0 24 24"},React.createElement("path",{d:"M16 7h1v1h-1V7zM6 19V5H5v14h1zm1 0h2V5H7v14zm3 0h1V5h-1v14zm11 .3333C21 20.2523 20.2523 21 19.3333 21H16v2h3.3333C21.35 23 23 21.35 23 19.3333V16h-2v3.3333zM16 11h-1v1h1v-1zM3 4.6666C3 3.7477 3.7477 3 4.6667 3H8V1H4.6667C2.65 1 1 2.65 1 4.6666V8h2V4.6666zM14 11h-1v1h1v-1zm0 3h-1v1h1v-1zm1 2v-1h-1v1h1zm4.3333-15H16v2h3.3333C20.2523 3 21 3.7477 21 4.6666V8h2V4.6666C23 2.65 21.35 1 19.3333 1zM14 18h1v1h1v-2h-2v1zM3 19.3333V16H1v3.3333C1 21.35 2.65 23 4.6667 23H8v-2H4.6667C3.7477 21 3 20.2523 3 19.3333zM19 14h-1v2h1v-2zm-5-9v5h5V5h-5zm4 4h-3V6h3v3zm0 10h1v-1h-1v1zm-3-6v1h1v-1h-1zm2 1h-1v1h1v-1zm-1 3h1v-1h-1v1zm3-6h-1v1h-1v1h2v-2zm-5 7h-1v1h1v-1z"}))}export{renderScanBarcode,renderScanQrcode,renderScanMulti};

package/esm/forms/assets/stock.d.ts

@@ -0,0 +1,5 @@
+export * from "./arrow";
+export * from "./chevron";
+export * from "./cross";
+export * from "./remove";
+export * from "./scan";

package/esm/forms/assets/stock.js

@@ -0,0 +1 @@
+export*from"./arrow";export*from"./chevron";export*from"./cross";export*from"./remove";export*from"./scan";

package/esm/forms/common.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { FormComponent, FormPresenterHost } from "./FormComponent";
+import { defs } from "./FormHost";
+export declare function getTitleId(elementId: string): string;
+export declare function getDescriptionId(elementId: string): string;
+/**
+ * Renders a Form Element's title, or returns null if there is no text to show.
+ * @param element The Form Element whose title is to be rendered.
+ * @param host The FormPresenterHost responsible for rendering the Form Element.
+ * @param formElementId The id of the Form Element's outermost HTML Element.
+ * @param className (optional) Any additional classes to add to the element.
+ */
+export declare function renderTitle(element: defs.Element, host: FormPresenterHost, formElementId: string, className?: string): JSX.Element;
+/**
+ * Renders a Form Element's description, or returns null if there is no text to show.
+ * @param element The Form Element whose title is to be rendered.
+ * @param host The FormPresenterHost responsible for rendering the Form Element.
+ * @param formElementDomId The name of the Form Element's outermost DOM element.
+ * @param className (optional) Any additional classes to add to the element.
+ */
+export declare function renderDescription(element: defs.Element, host: FormPresenterHost, formElementDomId: string, className?: string): JSX.Element;
+export declare function renderError(element: defs.Element, host: FormPresenterHost): JSX.Element;
+/**
+ * Asks the host to focus the provided element when the form is initially shown.
+ * Ignores the specified target if it is null or disabled.
+ *
+ * NOTE: Some elements contain more elaborate forms of this element.
+ *       For simplicity, this one replaces the basic cases which were all identical.
+ * @param target The HTML Element to receive focus.
+ * @param name The name of the Form Element.
+ * @param host The form presenter host.
+ */
+export declare function renderFocus(target: HTMLElement & {
+    disabled?: boolean | undefined;
+}, name: string, 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 & {
+    disabled?: boolean;
+    thumbRefs?: any[];
+}) => void;

package/esm/forms/common.js

@@ -0,0 +1 @@
+import React,{useCallback}from"react";const DESCRIPTION_SUFFIX="-description",TITLE_SUFFIX="-title";function textToHtml(e,t){return{__html:t.renderHtml(e)}}function getTitleId(e){return`${e}${TITLE_SUFFIX}`}function getDescriptionId(e){return`${e}${DESCRIPTION_SUFFIX}`}function renderTitle(e,t,n,r){e=textToHtml(e.title,t);return 0<(null===(t=null==e?void 0:e.__html)||void 0===t?void 0:t.length)?(r=r||"form-element-title",React.createElement("span",{className:r,dangerouslySetInnerHTML:e,id:getTitleId(n)})):null}function renderDescription(e,t,n,r){e=textToHtml(e.description,t);return 0<(null===(t=null==e?void 0:e.__html)||void 0===t?void 0:t.length)?React.createElement("aside",{className:r,dangerouslySetInnerHTML:e,id:getDescriptionId(n)}):null}function renderError(e,t){e=textToHtml(e.error,t);return 0<(null===(t=null==e?void 0:e.__html)||void 0===t?void 0:t.length)?React.createElement("div",{className:"notice",dangerouslySetInnerHTML:e,role:"alert"}):null}function renderFocus(e,t,n){null===e||e.disabled||n.renderFocus(e,t)}function useFocusCallback(e){const{host:t,name:n}=e.props;return useCallback(e=>{null===(e=Array.isArray(null==e?void 0:e.thumbRefs)&&0<e.thumbRefs.length?e.thumbRefs[0].current:e)||e.disabled||t.renderFocus(e,n)},[e.enabled,n,t])}export{getTitleId,getDescriptionId,renderTitle,renderDescription,renderError,renderFocus,useFocusCallback};

package/esm/forms/components/DatePicker.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { FormComponent } from "../FormComponent";
+import { Element } from "../FormDefinition";
+interface DatePickerProps {
+    /** True if the popup is open, false otherwise. */
+    isOpen: boolean;
+    /** Callback for when the value changes. */
+    onChange: (value: Date) => void;
+    /** Callback for when the popup is opened or closed. */
+    onPopupToggle: (isOpen: boolean) => void;
+    /** Indicates the value for the date picker. */
+    value?: Date;
+    component: FormComponent;
+    element: Element;
+}
+declare const DatePicker: React.FC<DatePickerProps>;
+export default DatePicker;

package/esm/forms/components/DatePicker.js

@@ -0,0 +1 @@
+import{parse}from"date-fns";import React,{useEffect,useState}from"react";import{DEFAULT_LOCALE}from"../../constants.js";import{renderCalendar}from"../assets/datetime.js";import{useFocusCallback}from"../common.js";import{CssClasses}from"../constants.js";import{getDateAsLocaleFormattedString,getDateFnsLocale,getLocaleDateFormat,isValidDate,tryParseDateText}from"../dateUtilities.js";import{CSS}from"../styles/daterange.js";import{addStyleToDocument}from"../utils.js";const Calendar=React.lazy(()=>import("./ReactDateRangeCalendar"));addStyleToDocument(CSS);const dateFormat=getLocaleDateFormat();let currentLocale;const DatePicker=e=>{const{component:t,element:a,isOpen:o,onChange:r,onPopupToggle:n}=e,s=t.props["host"],[c,l]=useState(),[i,m]=useState();var d=s.renderText(a.tooltip),u=!t.enabled,p=u?"inner disabled":"inner";useEffect(()=>{(async()=>{var e=s.deriveLocale();"inv"!==e&&"en"!==e&&e!==DEFAULT_LOCALE&&(currentLocale=await getDateFnsLocale(e))})()},[]),useEffect(()=>{l(e.value),m(getDateAsLocaleFormattedString(e.value))},[e.value]);var f=useFocusCallback(t);const D=e=>{var t="string"==typeof e?e:e.target.value,a=""!==t&&void 0!==t,e=a?tryParseDateText(t):void 0,t=a?e?parse(e,dateFormat,0):new Date(NaN):void 0;a?isValidDate(t)?(l(t),m(e),v(),g(t)):(v({status:"invalid"}),l(new Date(NaN)),g(void 0)):(v(),l(void 0),g(void 0))};const g=e=>{"function"==typeof r&&r(e)};const v=e=>{a.error=e,t.forceUpdate()};return React.createElement("div",{className:"SimpleDatePicker outer",title:d},React.createElement("div",{className:p},React.createElement("input",{"aria-label":"Date Picker",ref:f,disabled:u,type:"text",onChange:e=>(e=>{m(e.target.value)})(e),onBlur:e=>D(e),onKeyDown:e=>(e=>{e.stopPropagation(),"Enter"===e.key?D(i):"Escape"===e.key&&D(getDateAsLocaleFormattedString(c))})(e),placeholder:dateFormat.toUpperCase(),value:i})),React.createElement("div",{className:"buttonContainer"},React.createElement("button",{className:"calendarButton",disabled:u,onClick:()=>{"function"==typeof n&&n(!o)}},renderCalendar()),o&&React.createElement(React.Suspense,{fallback:null},React.createElement("div",{className:CssClasses.DROPDOWN},React.createElement(Calendar,{format:dateFormat,editableDateInputs:!1,date:c,onChange:e=>{l(e),m(getDateAsLocaleFormattedString(e)),v(),g(e)},locale:currentLocale}),React.createElement("button",{className:"done",onClick:()=>{"function"==typeof n&&n(!1)}},s.renderText("@common-done"))))))};export default DatePicker;

package/esm/forms/components/DateRange.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This file is an intermediate module designed to ensure that tree shaking functions as intended for
+ * the named 'DateRange' export from 'react-date-range' when consumed using React.lazy().
+ * See https://reactjs.org/docs/code-splitting.html#named-exports
+ */
+export { DateRange as default } from "react-date-range";

package/esm/forms/components/DateRange.js

@@ -0,0 +1 @@
+export{DateRange as default}from"react-date-range";

package/esm/forms/components/DateRangePicker.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FormComponent } from "../FormComponent";
+import { Element } from "../FormDefinition";
+interface DateRangePickerProps {
+    component: FormComponent;
+    element: Element;
+}
+declare const DateRangePicker: React.FC<DateRangePickerProps>;
+export default DateRangePicker;

package/esm/forms/components/DateRangePicker.js

@@ -0,0 +1 @@
+import{parse,isAfter,isBefore,isEqual}from"date-fns";import React,{useEffect,useRef,useState}from"react";import{DEFAULT_LOCALE}from"../../constants.js";import FormElementOuter from"../FormElementOuter.js";import{renderArrowRight}from"../assets/arrow.js";import{renderCalendar}from"../assets/datetime.js";import{useFocusCallback}from"../common.js";import{CssClasses}from"../constants.js";import{convertToDateRangeRef,getDateAsLocaleFormattedString,getDateFnsLocale,getLocaleDateFormat,isValidDate,tryParseDateText}from"../dateUtilities.js";import{CSS}from"../styles/daterange.js";import{addStyleToDocument,makeSafeClassName}from"../utils.js";const DateRange=React.lazy(()=>import("./DateRange"));var DateInputType;addStyleToDocument(CSS),function(e){e.Start="start",e.End="end"}(DateInputType=DateInputType||{});const dateFormat=getLocaleDateFormat();let currentLocale;const DateRangePicker=e=>{const t=e.component,r=e.element,n=useRef(),[a,o]=useState(!1),[l,c]=useState(),[s,i]=useState(),[d,m]=useState(),[u,D]=useState();var p=!t.enabled;const{host:v,name:g}=t.props;var f=v.renderText(r.tooltip),y=t.enabled?"inner":"inner disabled";const E=[r.type,makeSafeClassName(g)];useEffect(()=>{(async()=>{var e=v.deriveLocale();"inv"!==e&&"en"!==e&&e!==DEFAULT_LOCALE&&(currentLocale=await getDateFnsLocale(e))})()},[]),useEffect(()=>{var e;r.value!==n.current&&((e=convertToDateRangeRef(r.value))?(c(e.startDate),m(e.endDate),i(getDateAsLocaleFormattedString(e.startDate)),D(getDateAsLocaleFormattedString(e.endDate))):void 0===r.value&&(c(void 0),m(void 0),i(""),D("")),r.error&&A(),N(null==e?void 0:e.startDate,null==e?void 0:e.endDate,!1))},[r.value]);var S=useFocusCallback(t);const R=(e,t)=>{var a,r="string"==typeof e?e:e.target.value,n=""!==r&&void 0!==r,o=n?tryParseDateText(r):void 0,s=n?o?parse(o,dateFormat,0):new Date(NaN):void 0,e=t===DateInputType.Start,r=e?s:l,t=e?d:s;n?isValidDate(s)?e?(c(r),i(o),(a=!isValidDate(t)||isAfter(r,t))&&(m(r),D(o)),A(),a=a?r:t,C(r,a)):(m(t),D(o),(a=!isValidDate(r)||isBefore(t,r))&&(c(t),i(o)),A(),a=a?t:r,C(a,t)):(A({status:"invalid"}),C(),(e?c:m)(new Date(NaN))):((e?void 0===t||isValidDate(t):void 0===r||isValidDate(r))&&A(),C(),(e?c:m)(void 0))};const F=(e,t)=>{(t===DateInputType.Start?i:D)(e.target.value)},T=(e,t)=>{var a;e.stopPropagation(),"Enter"===e.key?(a=t===DateInputType.Start?s:u,R(a,t)):"Escape"===e.key&&(e=t===DateInputType.Start?getDateAsLocaleFormattedString(l):getDateAsLocaleFormattedString(d),R(e,t))},C=(e,t)=>{L(e,t)&&N(e,t)},L=(e,t)=>{var a=n.current;return!(e||t||!a)||(!(!e||!t||a)||!!(e&&t&&a)&&(!isEqual(e,a.startDate)||!isEqual(t,a.endDate)))},A=e=>{r.error=e,t.forceUpdate()},N=(e,t,a=!0)=>{t=e&&t?{refValueType:"daterange",startDate:e,endDate:t}:void 0;n.current=r.value=t,a&&v.post("changed",{name:g,value:r.value})};e={startDate:(null===(e=n.current)||void 0===e?void 0:e.startDate)||new Date,endDate:(null===(e=n.current)||void 0===e?void 0:e.endDate)||new Date,key:"selection",showDateDisplay:!1};return React.createElement(FormElementOuter,{className:E.join(" "),component:t,element:r},React.createElement("div",{className:"outer",title:f},React.createElement("div",{className:y},React.createElement("input",{ref:S,disabled:p,type:"text",onChange:e=>F(e,DateInputType.Start),onBlur:e=>R(e,DateInputType.Start),onKeyDown:e=>T(e,DateInputType.Start),placeholder:dateFormat.toUpperCase(),value:s}),React.createElement("span",{className:"arrow"},renderArrowRight()),React.createElement("input",{disabled:p,type:"text",onChange:e=>F(e,DateInputType.End),onBlur:e=>R(e,DateInputType.End),onKeyDown:e=>T(e,DateInputType.End),placeholder:dateFormat.toUpperCase(),value:u})),React.createElement("div",{className:"buttonContainer"},React.createElement("button",{className:"calendarButton",disabled:p,onClick:()=>{o(!a)}},renderCalendar()),a&&React.createElement(React.Suspense,{fallback:null},React.createElement("div",{className:CssClasses.DROPDOWN},React.createElement(DateRange,{dateDisplayFormat:dateFormat,editableDateInputs:!1,months:1,direction:"horizontal",ranges:[e],onChange:e=>{var t=e.selection.startDate,e=e.selection.endDate;c(t),i(getDateAsLocaleFormattedString(t)),m(e),D(getDateAsLocaleFormattedString(e)),A(),C(t,e)},locale:currentLocale}),React.createElement("button",{className:"done",onClick:()=>{o(!1)}},v.renderText("@common-done")))))))};export default DateRangePicker;

package/esm/forms/components/DateTimePicker.d.ts

@@ -0,0 +1,8 @@
+import { FormComponent } from "../FormComponent";
+import { defs } from "../FormHost";
+interface DateTimePickerProps {
+    component: FormComponent;
+    element: defs.Element;
+}
+declare const _default: (props: DateTimePickerProps) => JSX.Element;
+export default _default;

package/esm/forms/components/DateTimePicker.js

@@ -0,0 +1 @@
+import React,{useState}from"react";import{Calendar}from"../Calendar.js";import FormElementOuter from"../FormElementOuter.js";import{renderClock}from"../assets/datetime.js";import{useFocusCallback}from"../common.js";import{makeSafeClassName}from"../utils.js";import DatePicker from"./DatePicker.js";import TimePickerInput from"./TimePickerInput.js";export default e=>{const[t,a]=useState(!1),[o,n]=useState(!1),{component:r,element:l}=e,{host:i,name:c}=r.props;var s=useFocusCallback(r);const u=[l.type,makeSafeClassName(c)];var m=i.renderText(l.tooltip);const d=((e,t)=>{if("object"==typeof e&&null!==e)switch(e.refValueType){case"date":case"time":case"datetime":t=e.format}if("object"!=typeof t)return"app"===t?t:"device";if(null===t)return"device";var a=t.locale,o=t.timezone;return"string"==typeof a&&"string"==typeof o?{locale:a,timezone:o}:"device"})(l.value,l.format),p=i.deriveCalendar(d),f=((e,t)=>{if("object"==typeof e){if(null===e)return;switch(e.refValueType){case"date":case"time":case"datetime":break;default:return}e=e.value}if("number"==typeof e||"string"==typeof e){const a=t.coerceIntoValue(e);if(void 0!==a&&null!==a&&isFinite(a.valueOf()))return a}})(l.value,p);let v="datetime",g=(e=>{if("object"==typeof e&&null!==e)switch(e.refValueType){case"date":case"time":case"datetime":return e.refValueType}})(l.value);"DatePicker"===l.type&&(v="date"),"TimePicker"===l.type&&(v="time");let k=f;"datetime"===v&&"date"===g?k=void 0:g=v;e={calendar:p,disabled:!r.enabled,doneText:i.renderText("@common-done"),placeholder:i.renderText(l.prompt),title:m};function y(e,t){return void 0===(e=null!=e&&!isFinite(e.valueOf())?void 0:e)?void 0!==f:void 0===f||(g!==t||("date"===t&&((e=new Date(e)).setHours(f.getHours()),e.setMinutes(f.getMinutes()),e.setSeconds(f.getSeconds()),e.setMilliseconds(f.getMilliseconds())),"time"===t&&((e=new Date(e)).setFullYear(f.getFullYear()),e.setMonth(f.getMonth()),e.setDate(f.getDate())),f.valueOf()!==e.valueOf()))}m=()=>{var e=!o;n(e),e&&a(!1)};const T=[];function h(e,t){void 0!==e&&isFinite(e.valueOf())?l.value={refValueType:t,format:d,display:p.format(e,Calendar.fullFormat),value:e.valueOf()}:l.value=void 0}return"DatePicker"!==l.type&&"DateTimePicker"!==l.type||T.push(React.createElement(DatePicker,{component:r,element:l,isOpen:t,onChange:function(e){let t=v;if("datetime"===v&&void 0!==e&&("date"===g&&(t="date"),void 0!==f)){const a=p.coerceIntoLocal(f),o=p.coerceIntoLocal(e);o.setHours(a.getHours()),o.setMinutes(a.getMinutes()),o.setSeconds(a.getSeconds()),o.setMilliseconds(a.getMilliseconds()),e=p.coerceIntoValue(o)}y(e,t)&&(h(e,t),r.forceUpdate(),i.post("changed",{name:c,value:l.value}))},onPopupToggle:()=>{var e=!t;a(e),e&&n(!1)},value:f})),"TimePicker"!==l.type&&"DateTimePicker"!==l.type||T.push(React.createElement("div",{className:"outer"},React.createElement("div",{className:"inner"},React.createElement(TimePickerInput,{...e,isOpen:o,onChange:function(e){let t=v;if("datetime"===v&&void 0!==f)if(void 0!==e){const a=p.coerceIntoLocal(f),o=p.coerceIntoLocal(e);o.setFullYear(a.getFullYear()),o.setMonth(a.getMonth()),o.setDate(a.getDate()),e=p.coerceIntoValue(o)}else e=f,t="date";y(e,t)&&(h(e,t),r.forceUpdate(),i.post("changed",{name:c,value:l.value}))},onPopupToggle:m,ref:s,value:k})),React.createElement("button",{className:"clockButton",disabled:e.disabled,onClick:m},renderClock()))),h(f,g),React.createElement(FormElementOuter,{className:u.join(" "),component:r,element:l},T)};

package/esm/forms/components/Navigator.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/forms/components/Navigator.js

@@ -0,0 +1 @@
+import React from"react";const domReferenceKey="__navigator";class Navigator extends React.Component{static find(t){let e=t.target;for(;e!==t.currentTarget&&e instanceof HTMLElement;){var r=e[domReferenceKey];if(r instanceof Navigator)return r;e=e.parentNode}}init(t){const e=this.target;void 0!==e&&(this.target=void 0,e[domReferenceKey]=void 0),null!==t&&((this.target=t)[domReferenceKey]=this)}focus(){this.target.focus()}scrollTo(t){var e=this.props.children;if(Array.isArray(e)){const a=this.target;var r=a.scrollHeight/e.length,s=r/2,e=t%r,e=(a.scrollHeight-a.clientHeight)/2+(e+(e<-s?r:s<=e?-r:0));return a.scrollTop=e,Math.round(t/r)}return 0}hasStates(){var t=this.state;if(null==t)return!1;t=t.states;return null!=t}render(){var t=this.props,e=this.state||{},r=e.states;const s=[t.className];if(null!=r)for(const a in r)!0===r[a]&&s.push(a);return React.createElement("div",{className:s.join(" "),tabIndex:e.tabIndex,ref:t=>this.init(t)},this.props.children)}}export{Navigator};

package/esm/forms/components/NumberRangeSlider.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { FormComponent } from "../FormComponent";
+import { Element } from "../FormDefinition";
+export declare const MIN_DECIMALS = 0;
+export declare const DEFAULT_DECIMALS = 0;
+export declare const DEFAULT_STEP = 0;
+interface NumberRangeSliderProps {
+    component: FormComponent;
+    element: Element;
+}
+declare const NumberRangeSlider: React.FC<NumberRangeSliderProps>;
+export default NumberRangeSlider;

package/esm/forms/components/NumberRangeSlider.js

@@ -0,0 +1 @@
+import React,{useEffect,useMemo,useRef,useState}from"react";import{Range,getTrackBackground}from"react-range";import FormElementOuter from"../FormElementOuter.js";import{useFocusCallback}from"../common.js";import{CssClasses}from"../constants.js";import{getProcessedNumberFormat,getNumberSliderValues}from"../numberSliderUtilities.js";import{makeSafeClassName,throttle}from"../utils.js";const MIN_DECIMALS=0,DEFAULT_DECIMALS=0,DEFAULT_STEP=0,NumberRangeSlider=e=>{const a=e.component,t=e.element,r=useMemo(()=>getProcessedNumberFormat(t.format,MIN_DECIMALS,DEFAULT_DECIMALS,DEFAULT_STEP),[]),o=useRef(null),n=e=>{t.value=o.current=e},[s,l]=useState(),[c,u]=useState();useEffect(()=>{var e;null!==o.current&&t.value===o.current||(e=getNumberSliderValues(t.value,r),n(e),M(e))},[t.value]);const{host:m,name:i}=a.props,p=!a.enabled;var d=useFocusCallback(a);const{lowerBound:f,upperBound:g,precision:E}=r,{showMinMaxLabels:v,manualEntry:x}=t;let b=r.step,y=t.showTickMarks;y=0<b&&y,0===b&&(b=1/Math.pow(10,E));const h={currency:r.currency,customDisplayFormat:r.customDisplayFormat,format:r.displayFormat,fractionalDigits:E,locale:m.deriveLocale()};e=m.renderText(t.tooltip);const N=[t.type,makeSafeClassName(i)],A=e=>{e=S(e),M(e),(Array.isArray(o.current)||e[0]===f&&e[1]===g)&&(!Array.isArray(o.current)||e[0]===o.current[0]&&e[1]===o.current[1])||(n(e),m.post("changed",{name:i,value:t.value}))};const C=e=>{a.autoInput=!0},R=e=>e.target.select(),S=e=>{let t=e[0]<f?f:e[0]>g?g:e[0],r=e[1]>g?g:e[1]<f?f:e[1];return[t,r].sort((e,t)=>e-t)},k=useMemo(()=>throttle(e=>{m.post("dragged",{name:i,value:e})}),[]),F=(e,t)=>{const r=s.slice();let a=""!==e?Number(e):NaN;isNaN(a)?M(r):(0===t?(a<f&&(a=f),a>r[1]&&(a=r[1])):(a>g&&(a=g),a<r[0]&&(a=r[0])),r[t]=a,A(r))},M=e=>{l(e),u(e)};const T=(e,t,r,a,o="#fff",n="#197dc8")=>React.createElement("div",{style:{position:"absolute",top:t,color:o,fontWeight:"bold",fontSize:"14px",fontFamily:"Arial,Helvetica Neue,Helvetica,sans-serif",padding:"4px",borderRadius:"5px",backgroundColor:n,left:r,right:a,whiteSpace:"nowrap"}},e);return s?React.createElement(FormElementOuter,{className:N.join(" "),component:a,element:t,errorClassName:CssClasses.ERROR},React.createElement("div",{className:"slider-container",title:e},React.createElement(Range,{draggableTrack:!0,step:b,min:f,max:g,values:s,onChange:e=>{e=S(e),M(e),Array.isArray(t.value)&&e[0]===t.value[0]&&e[1]===t.value[1]||k(e)},onFinalChange:A,renderMark:e=>{var{props:t,index:r}=e,e=f+r*b,r=e>g,e=e>s[0]&&e<s[1]?"#197dc8":"#ccc";return y&&!r&&React.createElement("div",{...t,style:{...t.style,height:"16px",width:"2px",backgroundColor:e}})},renderTrack:e=>{var{props:t,children:e}=e;return React.createElement("div",{...t,style:{...t.style,height:"6px",margin:"50px 0px 24px",width:"100%",background:getTrackBackground({values:s,colors:["#ccc","#197dc8","#ccc"],min:f,max:g,rtl:!1})}},!1!==v&&T(m.formatNumber(f,h,!0),"20px","-12px",void 0,"#333","#fff"),!1!==v&&T(m.formatNumber(g,h,!0),"20px",void 0,"-12px","#333","#fff"),e)},renderThumb:e=>{var{props:t,value:r,index:a}=e,o=g-f,e=r-f,r=e<o/10?"0":"auto",e=9*o/10<e?"0":"auto";return React.createElement("div",{...t,style:{...t.style,height:"24px",width:"24px",borderRadius:"12px",backgroundColor:"#197dc8",display:"flex",justifyContent:"center",alignItems:"center",boxShadow:"0px 2px 4px #AAA",outline:"none"}},T(m.formatNumber(s[a],h,!0),"-32px",r,e))},disabled:p,ref:d})),x||!c?null:React.createElement("div",{className:"inputs"},c.map((e,t)=>React.createElement("span",null,0===t?m.renderText("@common-start"):m.renderText("@common-end"),React.createElement("input",{key:t,type:"number",disabled:p,min:0===t?f:s[0],max:0===t?s[1]:g,step:b,title:e+"",value:e,onBlur:e=>((e,t)=>{F(e.target.value,t)})(e,t),onChange:e=>((e,t)=>{const r=c.slice();r[t]=e.target.value,u(r),a.autoInput&&F(e.target.value,t)})(e,t),onKeyDown:e=>((e,t)=>{e.stopPropagation(),a.autoInput=!1,"Enter"===e.key?F(c[t]+"",t):"Escape"===e.key&&M(s.slice())})(e,t),onMouseDown:C,onFocus:R}))))):null};export default NumberRangeSlider;export{MIN_DECIMALS,DEFAULT_DECIMALS,DEFAULT_STEP};

package/esm/forms/components/NumberSlider.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { FormComponent } from "../FormComponent";
+import { Element } from "../FormDefinition";
+export declare const MIN_DECIMALS = -20;
+export declare const DEFAULT_DECIMALS = 3;
+export declare const DEFAULT_STEP = 1;
+interface NumberRangeSliderProps {
+    component: FormComponent;
+    element: Element;
+}
+declare const NumberSlider: React.FC<NumberRangeSliderProps>;
+export default NumberSlider;

package/esm/forms/components/NumberSlider.js

@@ -0,0 +1 @@
+import React,{useEffect,useMemo,useRef,useState}from"react";import{Range}from"react-range";import FormElementOuter from"../FormElementOuter.js";import{useFocusCallback}from"../common.js";import{CssClasses}from"../constants.js";import{NumberDisplayFormat}from"../numberFormatter.js";import{getProcessedNumberFormat,getNumberSliderValues}from"../numberSliderUtilities.js";import{makeSafeClassName}from"../utils.js";const MIN_DECIMALS=-20,DEFAULT_DECIMALS=3,DEFAULT_STEP=1,NumberSlider=e=>{const t=e.component,{host:n,name:r}=t.props,a=e.element,o=!t.enabled,l=useMemo(()=>getProcessedNumberFormat(a.format,MIN_DECIMALS,DEFAULT_DECIMALS,DEFAULT_STEP),[]),s=useRef(null),{lowerBound:m,upperBound:u,precision:c}=l,{showMinMaxLabels:i,manualEntry:p}=a,d={currency:l.currency,customDisplayFormat:l.customDisplayFormat,format:l.displayFormat,fractionalDigits:c,locale:n.deriveLocale()},f={...d,format:NumberDisplayFormat.FIXED_POINT},E=e=>{a.value=s.current=(e=e,{refValueType:"number",format:l,display:n.formatNumber(e,d,!0),numeric:e})},[b,v]=useState(),[g,x]=useState();useEffect(()=>{var e;null!==s.current&&a.value===s.current||(e=getNumberSliderValues(a.value,l,!0),E(e[0]),k(e[0]))},[a.value]);var N=useFocusCallback(t);let y=l.step,h=a.showTickMarks;h=0<y&&h,0===y&&(y=1/Math.pow(10,c));e=n.renderText(a.tooltip);const F=[a.type,makeSafeClassName(r)],C=e=>{var t=e[0],t=I(t);k(t),t!==(null===(e=s.current)||void 0===e?void 0:e.numeric)&&(E(t),n.post("changed",{name:r,value:a.value}))};const S=e=>{x(e.target.value),t.autoInput&&T(e.target.value)},D=e=>{T(e.target.value)},R=e=>{e.stopPropagation(),t.autoInput=!1,"Enter"===e.key?T(g+""):"Escape"===e.key&&k(b)},M=e=>{t.autoInput=!0},A=e=>e.target.select(),I=e=>e<m?m:e>u?u:e,T=e=>{let t=""!==e?Number(e):NaN;isNaN(t)?k(t):(t<m&&(t=m),t>u&&(t=u),C([t]))},k=e=>{v(e),x(n.formatNumber(e,f,!0))};const L=(e,t,r,a,o="#fff",n="#197dc8")=>React.createElement("div",{style:{position:"absolute",top:t,color:o,fontWeight:"bold",fontSize:"14px",fontFamily:"Arial,Helvetica Neue,Helvetica,sans-serif",padding:"4px",borderRadius:"5px",backgroundColor:n,left:r,right:a,whiteSpace:"nowrap"}},e);return React.createElement(FormElementOuter,{className:F.join(" "),component:t,element:a,errorClassName:CssClasses.ERROR},React.createElement("div",{className:"slider-container",title:e},React.createElement(Range,{step:y,min:m,max:u,values:[b],onChange:e=>{e=e[0],e=I(e);k(e)},onFinalChange:C,renderMark:e=>{var{props:t,index:e}=e,e=m+e*y>u;return h&&!e&&React.createElement("div",{...t,style:{...t.style,height:"16px",width:"2px",backgroundColor:"#ccc"}})},renderTrack:e=>{var{props:t,children:e}=e;return React.createElement("div",{...t,style:{...t.style,height:"6px",margin:"50px 0px 24px",width:"100%",background:"#ccc"}},!1!==i&&L(n.formatNumber(m,d,!0),"20px","-12px",void 0,"#333","#fff"),!1!==i&&L(n.formatNumber(u,d,!0),"20px",void 0,"-12px","#333","#fff"),e)},renderThumb:e=>{var{props:t,value:r}=e,a=u-m,o=r-m,e=o<a/10?"0":"auto",o=9*a/10<o?"0":"auto";return React.createElement("div",{...t,style:{...t.style,height:"24px",width:"24px",borderRadius:"12px",backgroundColor:"#197dc8",display:"flex",justifyContent:"center",alignItems:"center",boxShadow:"0px 2px 4px #AAA",outline:"none"}},L(n.formatNumber(r,d,!0),"-32px",e,o))},disabled:o,ref:N})),!1===p?null:React.createElement("div",{className:"inputs"},React.createElement("span",null,React.createElement("input",{type:"number",disabled:o,min:m,max:u,step:y,title:g+"",value:g,onBlur:D,onChange:S,onKeyDown:R,onMouseDown:M,onFocus:A}))))};export default NumberSlider;export{MIN_DECIMALS,DEFAULT_DECIMALS,DEFAULT_STEP};

package/esm/forms/components/ReactDateRangeCalendar.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This file is an intermediate module designed to ensure that tree shaking functions as intended for
+ * the named 'Calendar' export from 'react-date-range' when consumed using React.lazy().
+ * See https://reactjs.org/docs/code-splitting.html#named-exports
+ */
+export { Calendar as default } from "react-date-range";

package/esm/forms/components/ReactDateRangeCalendar.js

@@ -0,0 +1 @@
+export{Calendar as default}from"react-date-range";

package/esm/forms/components/SyntheticButton.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/forms/components/SyntheticButton.js

@@ -0,0 +1 @@
+import React from"react";const domReferenceKey="__synthetic_button";class SyntheticButton extends React.Component{static find(e){let t=e.target;for(;t!==e.currentTarget&&t instanceof HTMLElement;){var n=t[domReferenceKey];if(n instanceof SyntheticButton)return n;t=t.parentNode}}static search(e){const t=e.querySelectorAll("div"),n=[];for(let e=0;e<t.length;e++){var a=t.item(e)[domReferenceKey];a instanceof SyntheticButton&&n.push(a)}return n}init(e){const t=this.target;void 0!==t&&(this.target=void 0,t[domReferenceKey]=void 0),null!==e&&((this.target=e)[domReferenceKey]=this)}render(){var e=this.props,t=this.state||{},n=t.states;const a=["button"];if(null!=n)for(const s in n)!0===n[s]&&a.push(s);var r=t.content,t=t.symbol;return React.createElement("div",{className:this.props.className,ref:e=>this.init(e)},React.createElement("div",{className:a.join(" "),"aria-label":e.ariaLabel},React.createElement("span",{className:"content"},r),React.createElement("span",{className:"symbol"},t)))}}export{SyntheticButton};

package/esm/forms/components/TimePickerInput.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { Calendar } from "../Calendar";
+export interface TimePickerInputProps {
+    /** Indicates what calendar to use for the time picker. */
+    calendar?: Calendar;
+    /** Indicates if the component should be disabled. */
+    disabled?: boolean;
+    /** Aria label for the "done" button. */
+    doneText: string;
+    /** True if the popup is open, false otherwise. */
+    isOpen?: boolean;
+    /** Callback for when the value changes. */
+    onChange?: (value: Date) => void;
+    /** Callback for when the popup is opened or closed. */
+    onPopupToggle: (isOpen: boolean) => void;
+    /** Indicates the placeholder for the time picker. */
+    placeholder?: string;
+    /** Indicates the title for the time picker. */
+    title?: string;
+    /** Indicates the value for the time picker. */
+    value?: Date | number | string;
+}
+declare const _default: React.ForwardRefExoticComponent<TimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;