@vertigis/workflow 5.36.0 → 5.37.0

package/forms/FormHost.js

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

package/forms/FormPresenterHost.d.ts

@@ -1,74 +1,62 @@
-import { FormComponent } from "./FormComponent";
-import * as defs from "./FormDefinition";
-import { FormatOptions } from "./numberFormatter";
-import type { ComponentType, ReactNode } from "react";
-/**
- * Exposes various features to components that require features of the environment.
- * @product This is intended for internal use only within VertiGIS Studio products.
- */
-export interface FormPresenterHost {
-    /** Indicates if the form is enabled or not. */
-    enabled: boolean;
-    /** 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 | undefined): string | defs.MarkdownRef | undefined;
-    /** References all elements. */
-    refs: {
-        [name: string]: FormComponent | undefined;
-    };
-    /** 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): void;
-    /**
-     * Returns `true` if the element has a `type` of `"Section"` and a `format` of `"accordion-section"`, `false` otherwise.
-     * @param element The element to be inspected.
-     */
-    isAccordionSection(element: defs.Element): boolean;
-    /**
-     * Returns `true` if the element has a `type` of `"Section"` and a `format` of `"collapsible-section"`, `false` otherwise.
-     * @param element The element to be inspected.
-     */
-    isCollapsibleSection(element: defs.Element): boolean;
-    /**
-     * Shows a dialog in the context of the running application.
-     * @param children A function that produces the children for the dialog.
-     * @param DialogComponent The type of component to use as the dialog.
-     */
-    displayDialog(children: (closeDialog: () => void) => ReactNode, DialogComponent: ComponentType<any>): Promise<void>;
-    /**
-     * Returns `true` if the element has a `type` of `"Section"` and at least one visible child with `error` equal to `true`.
-     * @param element
-     */
-    hasInvalidChild(element: defs.Element): boolean;
-}
+import { FormComponent } from "./FormComponent";
+import * as defs from "./FormDefinition";
+import { FormatOptions } from "./numberFormatter";
+import type { ComponentType, ReactNode } from "react";
+/**
+ * Exposes various features to components that require features of the environment.
+ * @product This is intended for internal use only within VertiGIS Studio products.
+ */
+export interface FormPresenterHost {
+    /** Indicates if the form is enabled or not. */
+    enabled: boolean;
+    /** 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 | undefined): string | defs.MarkdownRef | undefined;
+    /** References all elements. */
+    refs: Record<string, FormComponent | undefined>;
+    /** Renders the focus. */
+    renderFocus(target: Node, name?: string): boolean;
+    /** Renders form text to 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;
+    } | undefined): defs.Element | undefined;
+    /** 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): void;
+    /**
+     * Shows a dialog in the context of the running application.
+     * @param children A function that produces the children for the dialog.
+     * @param DialogComponent The type of component to use as the dialog.
+     */
+    displayDialog(children: (closeDialog: () => void) => ReactNode, DialogComponent: ComponentType<any>): Promise<void>;
+    /**
+     * Returns `true` if the element has a `type` of `"Section"` and at least one visible child with `error` equal to `true`.
+     * @param element
+     */
+    hasInvalidChild(element: defs.Element): boolean;
+}

package/forms/MutuallyExclusiveSectionGroup.d.ts

@@ -1,41 +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;
-}
+import * as defs from "./FormDefinition";
+/**
+ * The definition of a Form Element along with its name.
+ */
+export type ElementKeyValuePair = {
+    /** The name of the form element as defined in the form.  */
+    elementName: string;
+    /** The implementation of the element itself. */
+    element: defs.Element;
+};
+/**
+ * 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 | undefined;
+    /**
+     * Sets the currently expanded section in this group.
+     * All others are collapsed.
+     */
+    set expandedSection(element: defs.Element | undefined);
+    getElement(elementName: string): defs.Element | undefined;
+    /**
+     *  Gets a value indicating if a section is currently expanded in this group.
+     */
+    get hasExpandedSection(): boolean;
+}

package/forms/NumberParser.d.ts

@@ -1,26 +1,27 @@
-/**
- * Parses a number based on the specified locale.
- *
- * WARNING: This technique assumes a positional number system, which isn't always the case for every locale (e.g. Hebrew, Korean).
- *          It seems though that at the moment, in all major browsers, `Intl.NumberFormat` will format these non-positional number systems
- *          using Western Arabic numerals ("123..."), so this works for now. But if any browser ever implements proper
- *          number system support for these locales, then this algorithm will no longer parse those locales properly.
- */
-export default class NumberParser {
-    private _group;
-    private _decimal;
-    private _minus;
-    private _numeral;
-    private _index;
-    /**
-     * Creates a new instance of the {@link NumberParser} class.
-     * @param locale The locale to use for parsing the text.
-     */
-    constructor(locale: string);
-    /**
-     * Parses a localized string representation of a number and returns the numeric value.
-     * @param str A localized string representation of a number.
-     * @returns The numeric value of the string.
-     */
-    parse(str: string): number;
-}
+/**
+ * Parses a number based on the specified locale.
+ *
+ * WARNING: This technique assumes a positional number system, which isn't always the case for every locale (e.g. Hebrew, Korean).
+ *          It seems though that at the moment, in all major browsers, `Intl.NumberFormat` will format these non-positional number systems
+ *          using Western Arabic numerals ("123..."), so this works for now. But if any browser ever implements proper
+ *          number system support for these locales, then this algorithm will no longer parse those locales properly.
+ */
+export default class NumberParser {
+    private _biDirectionalChars;
+    private _group;
+    private _decimal;
+    private _minus;
+    private _numeral;
+    private _index;
+    /**
+     * Creates a new instance of the {@link NumberParser} class.
+     * @param locale The locale to use for parsing the text.
+     */
+    constructor(locale: string);
+    /**
+     * Parses a localized string representation of a number and returns the numeric value.
+     * @param str A localized string representation of a number.
+     * @returns The numeric value of the string.
+     */
+    parse(str: string): number;
+}

package/forms/NumberParser.js

@@ -1 +1 @@
-export default class NumberParser{constructor(e){const r=new Intl.NumberFormat(e).formatToParts(-12345.6),t=Array.from(new Intl.NumberFormat(e,{useGrouping:!1}).format(9876543210)).reverse(),i=new Map(t.map((e,r)=>[e,r.toString()]));this._group=new RegExp(`[${r.find(e=>"group"===e.type).value}]`,"g"),this._decimal=new RegExp(`[${r.find(e=>"decimal"===e.type).value}]`),this._minus=new RegExp(`[${r.find(e=>"minusSign"===e.type).value}]`),this._numeral=new RegExp(`[${t.join("")}]`,"g"),this._index=e=>i.get(e)}parse(e){e=e.trim().replace(this._group,"").replace(this._decimal,".").replace(this._minus,"-").replace(this._numeral,this._index);return e?+e:NaN}}
+export default class NumberParser{constructor(e){this._biDirectionalChars=/[\u061c\u200E\u200F]/;const r=new Intl.NumberFormat(e).formatToParts(-12345.6),i=Array.from(new Intl.NumberFormat(e,{useGrouping:!1}).format(9876543210)).reverse(),t=new Map(i.map((e,r)=>[e,r.toString()]));this._group=new RegExp(`[${r.find(e=>"group"===e.type).value}]`,"g"),this._decimal=new RegExp(`[${r.find(e=>"decimal"===e.type).value}]`),this._minus=new RegExp(`[${r.find(e=>"minusSign"===e.type).value}]`),this._numeral=new RegExp(`[${i.join("")}]`,"g"),this._index=e=>t.get(e)}parse(e){e=e.trim().replace(this._biDirectionalChars,"").replace(this._group,"").replace(this._decimal,".").replace(this._minus,"-").replace(this._numeral,this._index);return e?+e:NaN}}

package/forms/common.d.ts

@@ -1,62 +1,67 @@
-import { ReactNode } from "react";
-import { FormPresenterHost } from "./FormComponent";
-import { defs } from "./FormHost";
-export declare function getTitleId(elementId: string): string;
-export declare function getDescriptionId(elementId: string): string;
-export declare function getErrorId(elementId: string): string;
-/**
- * Renders the title for a Form Element.
- * @param host The form host.
- * @param element The Form Element being represented.
- * @param elementId The id of the DOM element representing the Form Element.
- * @param inputId (optional) The id of the DOM element representing the main input for the Form Element.
- * When specified, the title is marked as "for" that DOM element.
- * @returns A title component, or `null` if there is no title.
- */
-export declare function renderTitle(host: FormPresenterHost, element: defs.Element, elementId: string, inputId?: string): JSX.Element;
-/**
- * Renders the description for a Form Element.
- * @param host The form host.
- * @param element The Form Element being represented.
- * @param elementId The id of the DOM element representing the Form Element.
- * @returns A description component, or `null` if there is no description.
- */
-export declare function renderDescription(host: FormPresenterHost, element: defs.Element, elementId: string, className?: string): JSX.Element;
-/**
- * Renders the accessible description for a Form Element.
- * @param host The form host.
- * @param element The Form Element being represented.
- * @param elementId The id of the DOM element representing the Form Element.
- * @returns An accessible description component, or `null` if there is no accessible description or description.
- */
-export declare function renderAccessibleDescription(host: FormPresenterHost, element: defs.Element, elementId: string): JSX.Element;
-/**
- * Renders the error for a Form Element.
- * @param host The form host.
- * @param element The Form Element being represented.
- * @returns An error component, or `null` if there is no error.
- */
-export declare function renderError(host: FormPresenterHost, element: defs.Element): 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;
-}) | null, name: string | undefined, host: FormPresenterHost): void;
-/**
- * Returns a memoized function which asks the host to focus the provided element when the form is
- * initially shown. Ignores the specified target if it is null or disabled.
- * @param component The form component
- * @returns A memoized function that focuses a target HTML element.
- */
-export declare function useFocusCallback(enabled: boolean, name: string | undefined, renderFocus: (target: Node, name?: string) => boolean): (target: (ReactNode & {
-    disabled?: boolean;
-    thumbRefs?: any[];
-}) | null) => void;
+import { ReactNode } from "react";
+import { FormPresenterHost } from "./FormComponent";
+import { defs } from "./FormHost";
+export declare function getTitleId(elementId: string): string;
+export declare function getDescriptionId(elementId: string): string;
+export declare function getErrorId(elementId: string): string;
+export type TranslateTextFunction = (content: defs.Text | undefined) => string | defs.MarkdownRef | undefined;
+/**
+ * Renders the title for a Form Element.
+ * @param elementId The id of the DOM element representing the Form Element.
+ * When specified, the title is marked as "for" that DOM element.
+ * @param required Indicates if the element is a required field. If so, the title is rendered with an asterisk beside it.
+ * @param title The title of the element.
+ * @param translateText A function for translating text, replacing placeholders as well.
+ * @param inputId (optional) The id of the DOM element representing the main input for the Form Element.
+ * @returns A title component, or `null` if there is no title.
+ */
+export declare function renderTitle(elementId: string, required: boolean | undefined, title: defs.Text | undefined, translateText: TranslateTextFunction, inputId?: string): JSX.Element | null;
+/**
+ * Renders the description for a Form Element.
+ * @param description The description of the Form Element.
+ * @param elementId The id of the DOM element representing the Form Element.
+ * @param enabled True if the Form Element is enabled, false otherwise.
+ * @param translateText A function for translating text, replacing placeholders as well.
+ * @param className (optional) A class name to add to the component.
+ * @returns A description component, or `null` if there is no description.
+ */
+export declare function renderDescription(description: defs.Text | undefined, elementId: string, enabled: boolean | undefined, translateText: TranslateTextFunction, className?: string): JSX.Element | null;
+/**
+ * Renders the accessible description for a Form Element.
+ * @param accessibleDescription The element's accessible description.
+ * @param description The element's description.
+ * @param elementId  The element's id.
+ * @param translateText The translate text function.
+ * @returns An accessible description component, or `null` if there is no accessible description or description.
+ */
+export declare function renderAccessibleDescription(accessibleDescription: string | undefined, description: defs.Text | undefined, elementId: string, translateText: TranslateTextFunction): JSX.Element | null;
+/**
+ * Renders the error for a Form Element.
+ * @param error The error to be rendered.
+ * @param translateText The translate text function.
+ * @returns An error component, or `null` if there is no error.
+ */
+export declare function renderError(error: defs.Text | undefined, translateText: TranslateTextFunction): JSX.Element | null;
+/**
+ * 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;
+}) | null, name: string | undefined, host: FormPresenterHost): void;
+/**
+ * Returns a memoized function which asks the host to focus the provided element when the form is
+ * initially shown. Ignores the specified target if it is null or disabled.
+ * @param component The form component
+ * @returns A memoized function that focuses a target HTML element.
+ */
+export declare function useFocusCallback(enabled: boolean, name: string | undefined, renderFocus: (target: Node, name?: string) => boolean): (target: (ReactNode & {
+    disabled?: boolean;
+    thumbRefs?: any[];
+}) | null) => void;

package/forms/common.js

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

package/forms/components/AccordionGroup.d.ts

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

package/forms/components/AutoComplete.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { FormElementProps } from "../..";
-import { defs } from "../FormHost";
-/**
- * The component for the "Auto Complete" Form Element.
- */
-declare const AutoComplete: ({ className, component, current, delay: elementDelay, element, enabled, error, items: elementItems, label, minLength: elementMinLength, name, prompt, tooltip, renderFocus, renderText, raiseEvent, setProperty, setValue, value, }: FormElementProps<defs.Value | undefined>) => JSX.Element;
-export default AutoComplete;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+import { defs } from "../FormHost";
+/**
+ * The component for the "Auto Complete" Form Element.
+ */
+declare const AutoComplete: ({ className, component, current, delay: elementDelay, element, enabled, error, items: elementItems, label, minLength: elementMinLength, name, prompt, tooltip, renderFocus, renderText, raiseEvent, setProperty, setValue, value, }: FormElementProps<defs.Value | undefined>) => JSX.Element;
+export default AutoComplete;

package/forms/components/ButtonBar.d.ts

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

package/forms/components/CheckBox.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { FormElementProps } from "../..";
-/**
- * The component for the "Check Box" Form Element.
- */
-declare const CheckBox: ({ checked, className, component, element, enabled, label, name, raiseEvent, renderFocus: hostRenderFocus, renderText, setProperty, tooltip: elementTooltip, translateText, value, }: FormElementProps) => JSX.Element;
-export default CheckBox;
+/// <reference types="react" />
+import { FormElementProps } from "../..";
+/**
+ * The component for the "Check Box" Form Element.
+ */
+declare const CheckBox: ({ checked, className, component, element, enabled, label, name, raiseEvent, renderFocus: hostRenderFocus, renderText, setProperty, tooltip: elementTooltip, translateText, value, }: FormElementProps) => JSX.Element;
+export default CheckBox;

package/forms/components/CheckGroup.d.ts

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