@vertigis/workflow 5.32.2 → 5.33.0

package/forms/FormHost.js

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

package/forms/FormPresenterHost.d.ts

@@ -0,0 +1,50 @@
+import * as defs from "./FormDefinition";
+import { FormatOptions } from "./numberFormatter";
+/** 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;
+    /** Translates the supplied value. */
+    translateText(content: defs.Text): string | defs.MarkdownRef | undefined;
+    /** 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. */
+    formatNumber(value: number, options: FormatOptions): string;
+    /**
+     * Derives the current locale set by the host application (or default if undefined) will be returned.
+     */
+    deriveLocale(): 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/forms/LegacyStyles.d.ts

@@ -0,0 +1,498 @@
+/**
+ * The contents of this file have been based on `runtime/forms/styles/main.scss`
+ * allowing us to retain the appearance of old elements prior to them being migrated to react-ui.
+ */
+declare const styles: {
+    ".legacy-styled-element > * label": {
+        border: string;
+        color: string;
+        display: string;
+        marginBottom: string;
+        p: {
+            "&:first-child": {
+                marginTop: number;
+            };
+            "&:last-child": {
+                marginBottom: number;
+            };
+        };
+        "&:empty": {
+            display: string;
+        };
+        "&.focus": {
+            backgroundColor: string;
+        };
+    };
+    ".legacy-styled-element": {
+        button: {
+            marginRight: string;
+        };
+        div: {
+            "&.inline": {
+                display: string;
+            };
+        };
+        'input[type="checkbox"]': {
+            marginRight: string;
+            marginLeft: string;
+            verticalAlign: string;
+        };
+        'input[type="password"]': {
+            marginBottom: string;
+            fontSize: string;
+            border: string;
+            borderRadius: string;
+            padding: string;
+            display: string;
+            width: string;
+            boxSizing: string;
+        };
+        'input[type="radio"]': {
+            marginRight: string;
+            marginLeft: string;
+            verticalAlign: string;
+        };
+        'input[type="text"]': {
+            fontSize: string;
+            border: string;
+            borderRadius: string;
+            padding: string;
+            display: string;
+            width: string;
+            boxSizing: string;
+        };
+        select: {
+            "&:disabled": {
+                color: string;
+                backgroundColor: string;
+                option: {
+                    color: string;
+                    backgroundColor: string;
+                    "&:hover": {
+                        color: string;
+                        backgroundColor: string;
+                    };
+                };
+            };
+            option: {
+                padding: string;
+                "&:hover": {
+                    color: string;
+                    backgroundColor: string;
+                };
+                "&:disabled": {
+                    color: string;
+                    backgroundColor: string;
+                };
+            };
+            fontSize: string;
+            border: string;
+            borderRadius: string;
+            padding: string;
+            display: string;
+            width: string;
+            boxSizing: string;
+        };
+        textarea: {
+            fontFamily: string;
+            height: string;
+            fontSize: string;
+            border: string;
+            borderRadius: string;
+            padding: string;
+            display: string;
+            width: string;
+            boxSizing: string;
+        };
+        ".items": {
+            label: {
+                marginBottom: number;
+                "&:last-child": {
+                    marginBottom: string;
+                };
+            };
+        };
+        ".overlay": {
+            display: string;
+        };
+        ".relative": {
+            position: string;
+        };
+        ".TextEditor .shell": {
+            fontSize: string;
+            border: string;
+            borderRadius: string;
+            padding: string;
+            display: string;
+            width: string;
+            boxSizing: string;
+        };
+        "&.AutoComplete": {
+            'input[type="text"]': {
+                width: string;
+            };
+            ".suggestions": {
+                position: string;
+                width: string;
+                maxHeight: string;
+                border: string;
+                margin: number;
+                padding: number;
+                listStyleType: string;
+                overflow: string;
+                backgroundColor: string;
+                zIndex: number;
+                li: {
+                    padding: string;
+                    "&:hover": {
+                        color: string;
+                        backgroundColor: string;
+                    };
+                    "&.selected": {
+                        color: string;
+                        backgroundColor: string;
+                    };
+                    "&.disabled": {
+                        color: string;
+                        backgroundColor: string;
+                    };
+                };
+            };
+        };
+        "&.ButtonBar": {
+            marginTop: string;
+            ".items": {
+                lineHeight: number;
+                marginTop: string;
+                button: {
+                    marginBottom: string;
+                    p: {
+                        lineHeight: number;
+                    };
+                };
+                "&.vertical": {
+                    button: {
+                        display: string;
+                        marginBottom: string;
+                    };
+                };
+            };
+        };
+        "&.DateTimePicker, &.DatePicker, &.TimePicker, &.DateRangePicker": {
+            ".outer": {
+                display: string;
+                ".inner": {
+                    display: string;
+                    border: string;
+                    flexGrow: number;
+                    margin: string;
+                    backgroundColor: string;
+                    'input[type="text"]': {
+                        border: string;
+                        fontSize: string;
+                    };
+                    "input:focus": {
+                        backgroundColor: string;
+                        outline: string;
+                    };
+                };
+                ".buttonContainer": {
+                    position: string;
+                };
+                "button.calendarButton, button.clockButton": {
+                    margin: string;
+                    border: string;
+                    backgroundColor: string;
+                    cursor: string;
+                    flexShrink: number;
+                    fontSize: string;
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    outline: string;
+                    padding: string;
+                    textAlign: string;
+                    "&:hover": {
+                        backgroundColor: string;
+                    };
+                    "svg.calendar, svg.clock": {
+                        height: string;
+                        verticalAlign: string;
+                        textAlign: string;
+                        width: string;
+                        marginBottom: string;
+                    };
+                };
+            };
+            "&.error": {
+                ".outer": {
+                    color: string;
+                };
+            };
+            '.disabled, button:disabled, input[type="text"]:disabled': {
+                backgroundColor: string;
+                border: string;
+                pointerEvents: string;
+            };
+        };
+        "&.TimePicker .TimePickerInput, &.DateTimePicker .TimePickerInput": {
+            flexGrow: number;
+            input: {
+                height: string;
+                width: string;
+                boxSizing: string;
+            };
+            ".close": {
+                position: string;
+                display: string;
+                width: string;
+                maxWidth: string;
+            };
+            ".overlay": {
+                position: string;
+            };
+            ".side": {
+                boxSizing: string;
+                left: number;
+                position: string;
+                textAlign: string;
+                top: number;
+                width: string;
+            };
+            "@media screen": {
+                ".close": {
+                    ".content": {
+                        display: string;
+                    };
+                    ".symbol::after": {
+                        content: string;
+                    };
+                };
+                ".up .content, .down .content": {
+                    display: string;
+                };
+                ".up .symbol::after": {
+                    content: string;
+                    fontSize: string;
+                    color: string;
+                };
+                ".down .symbol::after": {
+                    content: string;
+                    fontSize: string;
+                    color: string;
+                };
+            };
+            ".rollers": {
+                position: string;
+                visibility: string;
+                backgroundColor: string;
+                textAlign: string;
+                boxSizing: string;
+                boxShadow: string;
+                opacity: string;
+                transition: string;
+                zIndex: string;
+                right: string;
+                top: string;
+                ".button": {
+                    display: string;
+                    width: string;
+                    textAlign: string;
+                    cursor: string;
+                    fontSize: string;
+                    transition: string;
+                };
+                ".button:hover": {
+                    backgroundColor: string;
+                    transition: string;
+                };
+            };
+            ".main": {
+                display: string;
+                margin: string;
+            };
+            ".overlay .button": {
+                position: string;
+                left: string;
+                top: string;
+                width: string;
+                padding: string;
+                boxSizing: string;
+                pointerEvents: string;
+                textAlign: string;
+                fontStyle: string;
+                color: string;
+            };
+            ".dropdown": {
+                position: string;
+                touchAction: string;
+            };
+            ".opened .rollers": {
+                visibility: string;
+                transition: string;
+                opacity: string;
+            };
+            ".bottom": {
+                marginBottom: string;
+                ".content": {
+                    fontStyle: string;
+                    color: string;
+                };
+                ".button": {
+                    cursor: string;
+                };
+                ".button:hover": {
+                    background: string;
+                };
+            };
+            ".up, .down, .value": {
+                position: string;
+                width: string;
+                maxWidth: string;
+                margin: string;
+                borderRadius: string;
+                ".button": {
+                    padding: string;
+                };
+            };
+            ".up, .down": {
+                ".button": {
+                    padding: string;
+                };
+                ".button:hover": {
+                    background: string;
+                    ".symbol::after": {
+                        color: string;
+                        transition: string;
+                    };
+                };
+            };
+            ".value": {
+                ".button": {
+                    lineHeight: string;
+                };
+                ".button:hover": {
+                    borderRadius: string;
+                };
+            };
+            ".hours,  .minutes": {
+                display: string;
+            };
+            ".hours, .minutes, .toggle": {
+                margin: string;
+                position: string;
+            };
+            ".toggle": {
+                display: string;
+            };
+            ".show-ampm .toggle": {
+                display: string;
+            };
+            ".tape": {
+                display: string;
+                position: string;
+                left: number;
+                top: number;
+                height: string;
+                width: string;
+                maxWidth: string;
+                maxHeight: string;
+                textAlign: string;
+                overflowX: string;
+                overflowY: string;
+            };
+            ".rolling .buttons": {
+                opacity: string;
+            };
+            ".rolling .tape": {
+                display: string;
+            };
+            ".tape, .tape *": {
+                pointerEvents: string;
+            };
+            ".tape .item, .tape .button": {
+                margin: string;
+                padding: string;
+            };
+            ".tape .item:nth-child(4)": {
+                fontWeight: string;
+            };
+            ".marker": {
+                top: string;
+                left: string;
+                width: string;
+                maxWidth: string;
+                height: string;
+                maxHeight: string;
+                marginLeft: string;
+                marginTop: string;
+                backgroundColor: string;
+                borderRadius: string;
+            };
+        };
+        "&.DateRangePicker": {
+            ".inner": {
+                'input[type="text"]': {
+                    textAlign: string;
+                    width: string;
+                };
+                "span.arrow": {
+                    margin: string;
+                    display: string;
+                    alignSelf: string;
+                    width: string;
+                    "svg.arrowRight": {
+                        display: string;
+                        width: string;
+                        height: string;
+                        margin: string;
+                    };
+                };
+            };
+        };
+        "&.DatePicker .time-part, &.TimePicker .date-part": {
+            display: string;
+        };
+        "&.NumberSlider, &.NumberRangeSlider": {
+            ".slider-container": {
+                padding: string;
+                lineHeight: string;
+                marginBottom: string;
+            };
+            ".inputs": {
+                display: string;
+                justifyContent: string;
+                flexWrap: string;
+                marginTop: string;
+                "span:first-child": {
+                    marginRight: string;
+                };
+                span: {
+                    display: string;
+                    flexDirection: string;
+                    alignItems: string;
+                    input: {
+                        marginLeft: string;
+                        width: string;
+                    };
+                };
+            };
+        };
+        "&.RadioGroup": {
+            marginBottom: string;
+            border: string;
+            color: string;
+        };
+        "&.Text": {
+            marginBottom: string;
+            border: string;
+            color: string;
+        };
+        "&.Image": {
+            marginBottom: string;
+            border: string;
+            color: string;
+        };
+    };
+};
+export default styles;

package/forms/LegacyStyles.js

@@ -0,0 +1 @@
+const constants={action:{normal:"#197dc8",light:"#5caeeb",veryLight:"#e4f2fc"},alarm:"#b71d1d",bgColor:"#eee",border:"#ccc",button:"#eee",font:{light:"#777777",dark:"#333"}},inputStyles={fontSize:"1em",border:"1px solid #cccccc",borderRadius:"1px",padding:"3px 6px",display:"block",width:"100%",boxSizing:"border-box"},autoCompleteStyles={'input[type="text"]':{width:"100%"},".suggestions":{position:"absolute",width:"100%",maxHeight:"15.1em",border:"0.063em solid #cccccc",margin:0,padding:0,listStyleType:"none",overflow:"auto",backgroundColor:"white",zIndex:1,li:{padding:"0.35em","&:hover":{color:"#fff",backgroundColor:"#197dc8"},"&.selected":{color:"#fff",backgroundColor:"#197dc8"},"&.disabled":{color:constants.font.light,backgroundColor:"transparent"}}}},buttonBarStyles={marginTop:"1.5em",".items":{lineHeight:1,marginTop:"2px",button:{marginBottom:"0.313em",p:{lineHeight:1.15}},"&.vertical":{button:{display:"block",marginBottom:"6px"}}}},dateTimePickerStyles={".outer":{display:"flex",".inner":{display:"flex",border:"solid 1px",flexGrow:1,margin:"0.25rem",backgroundColor:"#ffffff",'input[type="text"]':{border:"none !important",fontSize:"medium !important"},"input:focus":{backgroundColor:"#eee",outline:"none"}},".buttonContainer":{position:"relative"},"button.calendarButton, button.clockButton":{margin:"0.17em 0",border:"none",backgroundColor:"#efefef",cursor:"pointer",flexShrink:0,fontSize:"medium",height:"2.25em",width:"2.25em",borderRadius:"50%",outline:"none",padding:"6px",textAlign:"center","&:hover":{backgroundColor:"#ccc"},"svg.calendar, svg.clock":{height:"16px",verticalAlign:"middle",textAlign:"center",width:"16px",marginBottom:"2px"}}},"&.error":{".outer":{color:`${constants.alarm} !important`}},'.disabled, button:disabled, input[type="text"]:disabled':{backgroundColor:`${constants.bgColor} !important`,border:"none !important",pointerEvents:"none"}},timePickerInputStyles={flexGrow:1,input:{height:"2.025em",width:"100%",boxSizing:"border-box"},".close":{position:"relative",display:"inline-block",width:"2em",maxWidth:"2em"},".overlay":{position:"relative"},".side":{boxSizing:"border-box",left:0,position:"absolute",textAlign:"right",top:0,width:"100%"},"@media screen":{".close":{".content":{display:"none"},".symbol::after":{content:'"\\2716"'}},".up .content, .down .content":{display:"none"},".up .symbol::after":{content:'"\\25B2"',fontSize:"1.15em",color:constants.action.normal},".down .symbol::after":{content:'"\\25BC"',fontSize:"1.15em",color:constants.action.normal}},".rollers":{position:"absolute",visibility:"hidden",backgroundColor:"white",textAlign:"center",boxSizing:"border-box",boxShadow:"0 0.313em 0.8em rgba(0, 0, 0, 0.2)",opacity:"0",transition:"all 0.3s ease-in-out",zIndex:"1",right:"-2em",top:"0.25em",".button":{display:"block",width:"auto",textAlign:"center",cursor:"pointer",fontSize:"small",transition:"all 0.2s ease-in-out"},".button:hover":{backgroundColor:constants.action.veryLight,transition:"all 0.2s ease-in-out"}},".main":{display:"inline-block",margin:"0.625em 0 1em"},".overlay .button":{position:"absolute",left:"0",top:"0",width:"100%",padding:"2px 4px 2px 4px",boxSizing:"border-box",pointerEvents:"none",textAlign:"right",fontStyle:"italic",color:"#808080"},".dropdown":{position:"relative",touchAction:"none"},".opened .rollers":{visibility:"visible",transition:"all 0.3s ease-in-out",opacity:"1"},".bottom":{marginBottom:"0.5em",".content":{fontStyle:"italic",color:"#999"},".button":{cursor:"default"},".button:hover":{background:"none"}},".up, .down, .value":{position:"relative",width:"1.4em",maxWidth:"1.4em",margin:"0 0.5em",borderRadius:"50px",".button":{padding:"0.2em 0.2em 0.1em"}},".up, .down":{".button":{padding:"0"},".button:hover":{background:"none",".symbol::after":{color:constants.action.light,transition:"all 0.2s ease-in-out"}}},".value":{".button":{lineHeight:"1.675em"},".button:hover":{borderRadius:"50px"}},".hours,  .minutes":{display:"inline-block"},".hours, .minutes, .toggle":{margin:"0 0.5em",position:"relative"},".toggle":{display:"none"},".show-ampm .toggle":{display:"inline-block"},".tape":{display:"none",position:"absolute",left:0,top:0,height:"100%",width:"100%",maxWidth:"100%",maxHeight:"100%",textAlign:"center",overflowX:"hidden",overflowY:"hidden"},".rolling .buttons":{opacity:"0"},".rolling .tape":{display:"block"},".tape, .tape *":{pointerEvents:"none"},".tape .item, .tape .button":{margin:"0",padding:"0"},".tape .item:nth-child(4)":{fontWeight:"bold"},".marker":{top:"50%",left:"50%",width:"1.5em",maxWidth:"1.5em",height:"1.5em",maxHeight:"1.5em",marginLeft:"-0.75em",marginTop:"-0.75em",backgroundColor:"lightblue",borderRadius:"0.75em"}},dateRangePickerStyles={".inner":{'input[type="text"]':{textAlign:"center",width:"45%"},"span.arrow":{margin:"0 0.5rem",display:"inline",alignSelf:"center",width:"10%","svg.arrowRight":{display:"block",width:"18px",height:"18px",margin:"auto"}}}},numberSliderStyles={".slider-container":{padding:"6px 12px",lineHeight:"1",marginBottom:"0.5em"},".inputs":{display:"flex",justifyContent:"flex-start",flexWrap:"wrap",marginTop:"1.5em","span:first-child":{marginRight:"0.5em"},span:{display:"flex",flexDirection:"row",alignItems:"baseline",input:{marginLeft:"0.5em !important",width:"5.25em !important"}}}},styles={".legacy-styled-element > * label":{border:"none",color:"#333333",display:"block",marginBottom:"0.5em",p:{"&:first-child":{marginTop:0},"&:last-child":{marginBottom:0}},"&:empty":{display:"none"},"&.focus":{backgroundColor:"#eee"}},".legacy-styled-element":{button:{marginRight:"6px"},div:{"&.inline":{display:"inline-block"}},'input[type="checkbox"]':{marginRight:"0.25em",marginLeft:"0.25em",verticalAlign:"baseline"},'input[type="password"]':{...inputStyles,marginBottom:"1em"},'input[type="radio"]':{marginRight:"0.25em",marginLeft:"0.25em",verticalAlign:"baseline"},'input[type="text"]':inputStyles,select:{...inputStyles,"&:disabled":{color:constants.font.light,backgroundColor:"transparent",option:{color:constants.font.light,backgroundColor:"transparent","&:hover":{color:constants.font.light,backgroundColor:"transparent"}}},option:{padding:"2px 2px 0","&:hover":{color:"#fff",backgroundColor:"#197dc8"},"&:disabled":{color:constants.font.light,backgroundColor:"transparent"}}},textarea:{...inputStyles,fontFamily:"inherit",height:"auto"},".items":{label:{marginBottom:0,"&:last-child":{marginBottom:"1em"}}},".overlay":{display:"none"},".relative":{position:"relative"},".TextEditor .shell":inputStyles,"&.AutoComplete":autoCompleteStyles,"&.ButtonBar":buttonBarStyles,"&.DateTimePicker, &.DatePicker, &.TimePicker, &.DateRangePicker":dateTimePickerStyles,"&.TimePicker .TimePickerInput, &.DateTimePicker .TimePickerInput":timePickerInputStyles,"&.DateRangePicker":dateRangePickerStyles,"&.DatePicker .time-part, &.TimePicker .date-part":{display:"none"},"&.NumberSlider, &.NumberRangeSlider":numberSliderStyles,"&.RadioGroup":{marginBottom:"0.75em",border:"none",color:"#333333"},"&.Text":{marginBottom:"0.75em",border:"none",color:"#333333"},"&.Image":{marginBottom:"0.75em",border:"none",color:"#333333"}}};export default styles;

package/forms/MutuallyExclusiveSectionGroup.d.ts

@@ -0,0 +1,41 @@
+import * as defs from "./FormDefinition";
+/**
+ * The definition of a Form Element along with its name.
+ */
+export declare type ElementKeyValuePair = {
+    /** The name of the form element as defined in the form.  */
+    elementName: string;
+    /** The implementation of the element itself. */
+    element: defs.Element;
+};
+/**
+ * This facilitates the lookup of related Section form elements, for cases where
+ * mutually-exclusive operations must be performed, such as expand/collapse.
+ *
+ * You can use the name of a known Section form element to find all of the other Section form elements in the same group.
+ * This is only relevant to special types of section that care about mutual exclusion. Regular sections are not added here.
+ *
+ * The key is the name of a Section form element.
+ * The value is an object representing all elements in the same run as the named one.
+ * The value has its own keys and values to keep track of both the names and actual elements.
+ *
+ * The same value is present for all elements in the run, to facilitate faster lookup.
+ * The element objects are included as well as the names to avoid the need for extra lookup.
+ */
+export default class MutuallyExclusiveSectionGroup extends Array<ElementKeyValuePair> {
+    /**
+     * Gets the currently expanded section in this group.
+     * if none are expanded, this returns undefined.
+     */
+    get expandedSection(): defs.Element;
+    /**
+     * Sets the currently expanded section in this group.
+     * All others are collapsed.
+     */
+    set expandedSection(element: defs.Element);
+    getElement(elementName: string): defs.Element;
+    /**
+     *  Gets a value indicating if a section is currently expanded in this group.
+     */
+    get hasExpandedSection(): boolean;
+}

package/forms/MutuallyExclusiveSectionGroup.js

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

package/forms/assets/arrow.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function renderArrowHead(): JSX.Element;
+export declare function renderArrowRight(): JSX.Element;
+export declare function renderArrowRollup(): JSX.Element;

package/forms/assets/chevron.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function renderChevronUp(): JSX.Element;
+export declare function renderChevronDown(): JSX.Element;

package/forms/assets/cross.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function renderCrossAdd(): JSX.Element;
+export declare function renderCrossDelete(): JSX.Element;

package/forms/assets/datetime.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function renderCalendar(): JSX.Element;
+export declare function renderClock(): JSX.Element;

package/forms/assets/remove.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function renderRemove(): JSX.Element;

package/forms/assets/scan.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function renderScanBarcode(): JSX.Element;
+export declare function renderScanQrcode(): JSX.Element;
+export declare function renderScanMulti(): JSX.Element;