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

package/forms/FormPresenterHost.js

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

package/forms/MutuallyExclusiveSectionGroup.js

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

package/forms/NumberParser.js

@@ -1 +1 @@
-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}}
+export default class NumberParser{constructor(e){this._biDirectionalChars=/[\u061c\u200E\u200F]/;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){const r=e.trim().replace(this._biDirectionalChars,"").replace(this._group,"").replace(this._decimal,".").replace(this._minus,"-").replace(this._numeral,this._index);return r?+r:NaN}}

package/forms/components/AccordionGroup.js

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

package/forms/components/AutoComplete.js

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

package/forms/components/Button.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { Item } from "../FormDefinition";
+import type { ButtonProps as MuiButtonProps } from "@vertigis/react-ui/Button";
+interface ButtonProps extends MuiButtonProps {
+    item: Item;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/forms/components/Button.js

@@ -0,0 +1 @@
+import Button from"@vertigis/react-ui/Button";import*as icons from"@vertigis/react-ui/icons";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{forwardRef,Children}from"react";import{getBorderStyle,getEmphasis,getIconPosition,getItemSize}from"../utils.js";function emphasisToButtonProps(t,e){if("custom"===t)return{};switch(e&&(t="high"),t){case"low":return{variant:"text",color:"inherit"};case"medium":return{variant:"outlined",color:"inherit"};case"high":return{variant:"contained",color:"primary"};default:throw new Error(`Invalid value "${t}" for Emphasis.`)}}const PREFIX="workflow-button",ButtonClasses={iconOnly:`${PREFIX}-icon-only`,iconStacked:`${PREFIX}-icon-stacked`,styleRounded:`${PREFIX}-rounded`,border:`${PREFIX}-border`,noBorder:`${PREFIX}-noBorder`},StyledButton=styled(Button)({[`&.${ButtonClasses.border}`]:{border:1,borderStyle:"solid"},[`&.${ButtonClasses.border}:hover`]:{border:1,borderStyle:"solid",borderColor:"transparent"},[`&.${ButtonClasses.iconOnly}`]:{minWidth:"auto",padding:8,lineHeight:0,"&.MuiButton-sizeSmall":{padding:6},"&.MuiButton-sizeLarge":{padding:10},"& .MuiButton-startIcon":{margin:0},"& .MuiButton-endIcon":{margin:0}},[`&.${ButtonClasses.iconStacked}`]:{flexDirection:"column","& .MuiButton-startIcon":{marginTop:6,marginRight:0,marginLeft:0},"& .MuiButton-endIcon":{marginBottom:6,marginRight:0,marginLeft:0}},[`&.${ButtonClasses.styleRounded}`]:{borderRadius:"1000px"},[`&.${ButtonClasses.noBorder}`]:{border:0,outline:0}});export default forwardRef(({children:t,className:e,disabled:o,item:r,onClick:n,title:s},i)=>{const a=r.appearance??{},{icon:l}=a;let c,d;const u=getIconPosition(a.iconPosition);if(l){const t=icons[l];if(t){const e=React.createElement(t,null);switch(u){case"above":case"before":c=e;break;case"below":case"after":d=e}}}const m=getEmphasis(a.emphasis),B="low"!==m,g=getItemSize(a.size),f=getBorderStyle(a.borderStyle),p=(c??d)&&0===Children.toArray(t).length,h=clsx({classNameProp:e,[ButtonClasses.iconOnly]:p,[ButtonClasses.iconStacked]:!p&&("above"===u||"below"===u),[ButtonClasses.styleRounded]:"rounded"===f,[ButtonClasses.border]:B,[ButtonClasses.noBorder]:!B});return React.createElement(StyledButton,{className:h,disabled:o,endIcon:d,onClick:n,ref:i,size:g,startIcon:c,title:s,...emphasisToButtonProps(m,r.default)},t)});

package/forms/components/ButtonBar.js

@@ -1 +1 @@
-import Button from"@vertigis/react-ui/Button";import Stack,{stackClasses}from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,sortAndFilter}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${stackClasses.root}`]:{alignItems:"flex-start",flexWrap:"wrap",marginTop:e(1),marginBottom:e(1)}})),ButtonBar=({className:e,element:t,enabled:l,items:o,name:a,orientation:r,raiseEvent:c})=>{const d=useContext(HostContext),u=sortAndFilter(o),f=useFocusCallback(l,a,d);o=l?Object.entries(u).filter(e=>!1!==e[1].enabled&&!1!==e[1].visible)[0]:void 0;const p=o?o[0]:void 0;return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:t,name:a},React.createElement(Stack,{direction:r===Orientation.VERTICAL?"column":"row",spacing:1},Object.keys(u).map(e=>{var t,o,a=u[e],r=a.styleName?makeSafeClassName(a.styleName):void 0,n=!1!==a.visible,i=l&&!1!==a.enabled&&n,s=d.renderText(a.tooltip),m=u[e]["value"];return n?React.createElement(Button,{className:r,color:a.default?"primary":"inherit",disabled:!i,key:e,onClick:(t=e,o=m,function(){c("clicked",o,void 0,t)}),ref:p&&e===p?f:void 0,title:s,variant:a.default?"contained":"outlined"},React.createElement(Markdown,{inline:!0,text:a.label||""})):null})))};export default ButtonBar;
+import Stack,{stackClasses}from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,sortAndFilter}from"../utils.js";import Button from"./Button.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${stackClasses.root}`]:{alignItems:"flex-start",flexWrap:"wrap",marginTop:e(1),marginBottom:e(1)}})),ButtonBar=({className:e,element:t,enabled:o,items:a,name:r,orientation:n,raiseEvent:s})=>{const m=useContext(HostContext),l=sortAndFilter(a),i=useFocusCallback(o,r,m),c=o?Object.entries(l).filter(e=>!1!==e[1].enabled&&!1!==e[1].visible)[0]:void 0,d=c?c[0]:void 0,u=(e,t)=>function(){s("clicked",t,void 0,e)};return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:t,name:r},React.createElement(Stack,{direction:n===Orientation.VERTICAL?"column":"row",spacing:1},Object.keys(l).map(e=>{const t=l[e],a=!1!==t.visible;if(!a)return null;const r=t.styleName?makeSafeClassName(t.styleName):void 0,n=o&&!1!==t.enabled&&a,s=m.renderText(t.tooltip),{value:c}=l[e],f=t.label?React.createElement(Markdown,{inline:!0,text:t.label||""}):null;return React.createElement(Button,{className:r,disabled:!n,item:t,key:e,onClick:u(e,c),ref:d&&e===d?i:void 0,title:s},f)})))};export default ButtonBar;

package/forms/components/CheckBox.js

@@ -1 +1 @@
-import Checkbox from"@vertigis/react-ui/Checkbox";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import*as React from"react";import{useContext}from"react";import HostContext from"../hostContext.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const CheckBox=({checked:t,className:e,element:o,enabled:r,label:a,name:c,raiseEvent:m,setProperty:n,tooltip:l,value:s})=>{const i=useContext(HostContext),C=i.renderText(l),d=useFocusCallback(r,c,i),k=e=>{e=e.target.checked;n("checked",e),m("changed",e?s:void 0,e)};return React.createElement(FormElement,{className:e,element:o,name:c},e=>React.createElement(FormControlLabel,{control:React.createElement(Checkbox,{checked:t,onChange:k,slotProps:{input:{...e,ref:d}}}),disabled:!r,label:React.createElement(Markdown,{text:a}),title:C}))};export default CheckBox;
+import Checkbox from"@vertigis/react-ui/Checkbox";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import*as React from"react";import{useContext}from"react";import HostContext from"../hostContext.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const CheckBox=({checked:e,className:t,element:o,enabled:r,label:a,name:c,raiseEvent:m,setProperty:n,tooltip:l,value:s})=>{const i=useContext(HostContext),C=i.renderText(l),d=useFocusCallback(r,c,i),k=e=>{const t=e.target.checked;n("checked",t),m("changed",t?s:void 0,t)};return React.createElement(FormElement,{className:t,element:o,name:c},t=>React.createElement(FormControlLabel,{control:React.createElement(Checkbox,{checked:e,onChange:k,slotProps:{input:{...t,ref:d}}}),disabled:!r,label:React.createElement(Markdown,{text:a}),title:C}))};export default CheckBox;

package/forms/components/CheckGroup.js

@@ -1 +1 @@
-import Checkbox from"@vertigis/react-ui/Checkbox";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import FormGroup,{formGroupClasses}from"@vertigis/react-ui/FormGroup";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useState}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{arrayEqual}from"../listUtilities.js";import{makeSafeClassName,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${formGroupClasses.root}`]:{paddingBottom:e(2)}})),CheckGroup=({className:e,current:m,element:t,enabled:o,items:n,name:r,orientation:a,raiseEvent:s,setProperty:i,setValue:c,value:l})=>{const u=useContext(HostContext),[p,f]=useState([]),[d,h]=useState();useEffect(()=>{var e=inspectItems(m,n,l)["items"];h(e);const t=[],o=[];for(const s in e){var r=e[s];r.checked&&(t.push(s),o.push(r))}arrayEqual(p,t)||f(t);var a=0===o.length?void 0:{refValueType:"items",items:o};c(a,!1)},[n]),useEffect(()=>{const e=[];if(l)for(const t in n)l.items.includes(n[t])&&e.push(t);arrayEqual(p,e)||f(e)},[l]);var v=useFocusCallback(o,r,u);var C=(o,r)=>function(e){const t=d?d[o]:void 0;t&&(e=t.checked=e.currentTarget.checked,function(){const e=[],t=[];for(const a in d){var o=d[a];o.checked&&(e.push(o),t.push(a))}var r=0===e.length?void 0:{refValueType:"items",items:e};c(r,!1),i("current",void 0),arrayEqual(t,p)||f(t)}(),s("changed",e?r:void 0,e,o))};const k=[];for(const g in d){var E=d[g],y=-1!==p.indexOf(g),b=o&&!1!==E.enabled,F=u.renderText(E.tooltip),x=E.styleName?makeSafeClassName(E.styleName):void 0;k.push(React.createElement(FormControlLabel,{className:x,control:React.createElement(Checkbox,{checked:y,onChange:C(g,E.value),slotProps:{input:{ref:v}}}),disabled:!b,key:g,label:React.createElement(Markdown,{text:E.label}),title:F}))}return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:t,name:r},React.createElement(FormGroup,{row:a===Orientation.HORIZONTAL},k))};export default CheckGroup;
+import Checkbox from"@vertigis/react-ui/Checkbox";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import FormGroup,{formGroupClasses}from"@vertigis/react-ui/FormGroup";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useState}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{arrayEqual}from"../listUtilities.js";import{makeSafeClassName,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${formGroupClasses.root}`]:{paddingBottom:e(2)}})),CheckGroup=({className:e,current:t,element:o,enabled:r,items:s,name:n,orientation:a,raiseEvent:m,setProperty:c,setValue:i,value:l})=>{const u=useContext(HostContext),[p,f]=useState([]),[d,h]=useState();useEffect(()=>{const{items:e}=inspectItems(t,s,l);h(e);const o=[],r=[];for(const t in e){const s=e[t];s.checked&&(o.push(t),r.push(s))}arrayEqual(p,o)||f(o);const n=0===r.length?void 0:{refValueType:"items",items:r};i(n,!1)},[s]),useEffect(()=>{const e=[];if(l)for(const t in s)l.items.includes(s[t])&&e.push(t);arrayEqual(p,e)||f(e)},[l]);const C=useFocusCallback(r,n,u);const k=(e,t)=>function(o){const r=d?d[e]:void 0;if(!r)return;const s=r.checked=o.currentTarget.checked;!function(){const e=[],t=[];for(const o in d){const r=d[o];r.checked&&(e.push(r),t.push(o))}const o=0===e.length?void 0:{refValueType:"items",items:e};i(o,!1),c("current",void 0),arrayEqual(t,p)||f(t)}(),m("changed",s?t:void 0,s,e)},E=[];for(const e in d){const t=d[e],o=-1!==p.indexOf(e),s=r&&!1!==t.enabled,n=u.renderText(t.tooltip),a=t.styleName?makeSafeClassName(t.styleName):void 0;E.push(React.createElement(FormControlLabel,{className:a,control:React.createElement(Checkbox,{checked:o,onChange:k(e,t.value),slotProps:{input:{ref:C}}}),disabled:!s,key:e,label:React.createElement(Markdown,{text:t.label}),title:n}))}return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:o,name:n},React.createElement(FormGroup,{row:a===Orientation.HORIZONTAL},E))};export default CheckGroup;

package/forms/components/DatePicker.js

@@ -1 +1 @@
-import BaseDatePicker from"@vertigis/react-ui/DatePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{isDateTimeRef,makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DatePicker=({className:e,element:t,enabled:r,error:a,format:o,name:s,prompt:i,setProperty:l,setValue:n,tooltip:m,value:u})=>{const c=useContext(HostContext),[d,p]=useState(!1),[f,x]=useState(!1),[E,D]=useState(!1),[v,F]=useState(null),g=useRef(),T=useRef(!0),k=useFocusCallback(r,s,c),C=c.renderText(m);const R={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},P=Calendar.useNative(),V="date",j=isInvalidError(a);useEffect(()=>{var e=makeProperValue(u,P),t=getNewElementValue(e,V,R,P);areValuesEqual(u,t)||n(t,!1),F(e||null)},[u]),useEffect(()=>{if(!E&&!f)if(d)j||l("error",{status:"invalid"});else{if(j&&l("error",void 0),T.current)return void(T.current=!1);let e=v||void 0;if(e&&isDateTimeRef(u)){const r=new Date(u.value);e=new Date(e),e.setHours(r.getHours()),e.setMinutes(r.getMinutes()),e.setSeconds(r.getSeconds()),e.setMilliseconds(r.getMilliseconds())}var t=getNewElementValue(e,V,R,P);areValuesEqual(u,t)||n(t)}T.current=!1},[d,f,E]);const{min:S,max:H}=getDateBounds(o),w=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),I=c.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:w,name:s},e=>React.createElement(React.Fragment,null,j&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},g.current),React.createElement(BaseDatePicker,{disabled:!r,inputRef:e=>{e&&(g.current=e.dataset.formatString,k(e))},key:"date-picker",maxDate:H,minDate:S,onChange:e=>F(e),onClose:()=>D(!1),onError:e=>p(!!e),onOpen:()=>D(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!a,id:w,inputProps:{...e,placeholder:I},onBlur:()=>x(!1),onFocus:()=>x(!0),title:C}},value:v})))};export default DatePicker;
+import BaseDatePicker from"@vertigis/react-ui/DatePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{isInvalidError}from"../textUtilities.js";import{isDateTimeRef,makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DatePicker=({className:e,element:t,enabled:r,error:o,format:a,name:s,prompt:n,setProperty:i,setValue:l,tooltip:m,value:u})=>{const c=useContext(HostContext),[d,p]=useState(!1),[f,x]=useState(!1),[E,g]=useState(!1),[D,F]=useState(null),k=useRef(),v=useRef(!0),T=useFocusCallback(r,s,c),C=c.renderText(m),R={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},P=Calendar.useNative(),S="date",j=isInvalidError(o),V=()=>{let e=D||void 0;if(e&&isDateTimeRef(u)){const t=new Date(u.value);e=new Date(e),e.setHours(t.getHours()),e.setMinutes(t.getMinutes()),e.setSeconds(t.getSeconds()),e.setMilliseconds(t.getMilliseconds())}const t=getNewElementValue(e,S,R,P);areValuesEqual(u,t)||l(t)};useEffect(()=>{const e=makeProperValue(u,P),t=getNewElementValue(e,S,R,P);areValuesEqual(u,t)||l(t,!1),F(e||null)},[u]),useEffect(()=>{if(!E&&!f)if(d)j||i("error",{status:"invalid"});else{if(j&&i("error",void 0),v.current)return void(v.current=!1);V()}v.current=!1},[d,f,E]);const{min:w,max:H}=getDateBounds(a),y=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),I=c.renderText(n),M=e=>{"enter"!==getKeyString(e)||V()};return React.createElement(FormElement,{className:e,element:t,inputId:y,name:s},e=>React.createElement(React.Fragment,null,j&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},k.current),React.createElement(BaseDatePicker,{disabled:!r,inputRef:e=>{e&&(k.current=e.dataset.formatString,T(e))},key:"date-picker",maxDate:H,minDate:w,onChange:e=>F(e),onClose:()=>g(!1),onError:e=>p(!!e),onOpen:()=>g(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!o,id:y,inputProps:{...e,placeholder:I},onBlur:()=>x(!1),onFocus:()=>x(!0),onKeyDown:M,title:C}},value:D})))};export default DatePicker;

package/forms/components/DateRangePicker.js

@@ -1 +1 @@
-import BaseDateRangePicker from"@vertigis/react-ui/DateRangePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{areValuesEqual,convertToDateRangeRef,getDateBounds}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DateRangePickerField=e=>{const{FormHelperTextProps:t,InputProps:r,InputLabelProps:a,inputProps:o,SelectProps:s,...n}=e,l=n.slotProps??{};return delete n.slotProps,l.formHelperText={...t,...l.formHelperText},l.input={...r,...l.input},l.inputLabel={...a,...l.inputLabel},l.htmlInput={...o,...l.htmlInput},l.select={...s,...l.select},n.error=n.error||l.htmlInput["data-elementError"],delete l.htmlInput["data-elementError"],React.createElement(DateTimeTextField,{...n,slotProps:l})},PREFIX="DateRangePicker",dateRangePickerClasses={root:`${PREFIX}-root`,toLabel:`${PREFIX}-toLabel`},StyledDateRangePicker=styled(BaseDateRangePicker)({alignItems:"center"}),StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${dateRangePickerClasses.toLabel}`]:{paddingTop:e(3)}})),DateRangePicker=({className:e,element:t,enabled:r,error:a,format:o,name:s,setProperty:n,setValue:l,tooltip:i,value:m})=>{const u=useContext(HostContext),[c,d]=useState([null,null]),[p,f]=useState(-1),[R,g]=useState([!1,!1]),[x,P]=useState(!1),[E,D]=useState([null,null]),F=useRef(),k=useRef(!0),I=isInvalidError(a);useEffect(()=>{var e=convertToDateRangeRef(m),t=[e?.startDate||null,e?.endDate||null],e=C(t);areValuesEqual(m,e)||l(e,!1),D(t)},[m]),useEffect(()=>{var e=0===p?R[0]:!!c[0],t=1===p?R[1]:!!c[1];g([e,t]);t=e||t;if(t?I||n("error",{status:"invalid"}):I&&n("error",void 0),!x&&-1===p&&!t){if(k.current)return void(k.current=!1);t=C(E);areValuesEqual(m,t)||l(t)}k.current=!1},[c,p,x]);const T=u.renderText(i),v=useFocusCallback(r,s,u),C=e=>{if(e[0]&&e[1])return{refValueType:"daterange",startDate:e[0],endDate:e[1]}},b=useMemo(()=>`${makeUniqueId(s)}-input`,[s]);var S=R[0]||R[1],{min:i,max:o}=getDateBounds(o);return React.createElement(StyledFormElement,{className:clsx(e,dateRangePickerClasses.root),element:t,inputId:b,name:s},S&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},F.current),React.createElement(StyledDateRangePicker,{disabled:!r,maxDate:o,minDate:i,onChange:e=>D(e),onClose:()=>P(!1),onError:e=>d(e),onOpen:()=>P(!0),slots:{textField:DateRangePickerField},slotProps:{fieldSeparator:{children:u.renderText("@common-to"),className:dateRangePickerClasses.toLabel},textField:({position:e})=>({inputRef:e=>{"0"===e?.dataset.index&&(F.current=e.dataset.formatString,v(e))},onBlur:e=>{Number.parseInt(e.target.dataset.index)===p&&f(-1)},onFocus:e=>{e=Number.parseInt(e.target.dataset.index);f(e)},slotProps:{htmlInput:{id:"start"===e?b:void 0,"data-elementError":!!a,"data-index":"start"===e?0:1}},title:T})},value:E}))};export default DateRangePicker;export{dateRangePickerClasses};
+import BaseDateRangePicker from"@vertigis/react-ui/DateRangePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{areValuesEqual,convertToDateRangeRef,getDateBounds}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DateRangePickerField=e=>{const{FormHelperTextProps:t,InputProps:r,InputLabelProps:a,inputProps:o,SelectProps:s,...n}=e,l=n.slotProps??{};return delete n.slotProps,l.formHelperText={...t,...l.formHelperText},l.input={...r,...l.input},l.inputLabel={...a,...l.inputLabel},l.htmlInput={...o,...l.htmlInput},l.select={...s,...l.select},n.error=n.error||l.htmlInput["data-elementError"],delete l.htmlInput["data-elementError"],React.createElement(DateTimeTextField,{...n,slotProps:l})},PREFIX="DateRangePicker";export const dateRangePickerClasses={root:`${PREFIX}-root`,toLabel:`${PREFIX}-toLabel`};const StyledDateRangePicker=styled(BaseDateRangePicker)({alignItems:"center"}),StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${dateRangePickerClasses.toLabel}`]:{paddingTop:e(3)}})),DateRangePicker=({className:e,element:t,enabled:r,error:a,format:o,name:s,setProperty:n,setValue:l,tooltip:i,value:m})=>{const u=useContext(HostContext),[c,d]=useState([null,null]),[p,f]=useState(-1),[x,R]=useState([!1,!1]),[g,P]=useState(!1),[E,D]=useState([null,null]),F=useRef(),k=useRef(!0),I=isInvalidError(a);useEffect(()=>{const e=convertToDateRangeRef(m),t=[e?.startDate||null,e?.endDate||null],r=b(t);areValuesEqual(m,r)||l(r,!1),D(t)},[m]),useEffect(()=>{const e=0===p?x[0]:!!c[0],t=1===p?x[1]:!!c[1];R([e,t]);const r=e||t;if(r?I||n("error",{status:"invalid"}):I&&n("error",void 0),!g&&-1===p&&!r){if(k.current)return void(k.current=!1);const e=b(E);areValuesEqual(m,e)||l(e)}k.current=!1},[c,p,g]);const T=u.renderText(i),v=useFocusCallback(r,s,u),b=e=>{if(e[0]&&e[1])return{refValueType:"daterange",startDate:e[0],endDate:e[1]}},C=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),S=x[0]||x[1],{min:y,max:h}=getDateBounds(o);return React.createElement(StyledFormElement,{className:clsx(e,dateRangePickerClasses.root),element:t,inputId:C,name:s},S&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},F.current),React.createElement(StyledDateRangePicker,{disabled:!r,maxDate:h,minDate:y,onChange:e=>D(e),onClose:()=>P(!1),onError:e=>d(e),onOpen:()=>P(!0),slots:{textField:DateRangePickerField},slotProps:{fieldSeparator:{children:u.renderText("@common-to"),className:dateRangePickerClasses.toLabel},textField:({position:e})=>({inputRef:e=>{"0"===e?.dataset.index&&(F.current=e.dataset.formatString,v(e))},onBlur:e=>{Number.parseInt(e.target.dataset.index)===p&&f(-1)},onFocus:e=>{const t=Number.parseInt(e.target.dataset.index);f(t)},slotProps:{htmlInput:{id:"start"===e?C:void 0,"data-elementError":!!a,"data-index":"start"===e?0:1}},title:T})},value:E}))};export default DateRangePicker;

package/forms/components/DateTimePicker.js

@@ -1 +1 @@
-import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import BaseDateTimePicker from"@vertigis/react-ui/DateTimePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{clockClasses}from"@vertigis/react-ui/TimeClock";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getAmPm,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StylableDateTimePicker=e=>{const{className:t,slotProps:r,...a}=e;return React.createElement(BaseDateTimePicker,{slotProps:{...r,actionBar:{sx:{display:"none"}},popper:{...r?.popper,className:t}},...a})},StyledDateTimePicker=styled(StylableDateTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),DateTimePicker=({className:e,element:t,enabled:r,error:a,format:o,name:s,prompt:i,setProperty:l,setValue:m,tooltip:n,value:u})=>{const c=useContext(HostContext),[p,d]=useState(!1),[f,T]=useState(!1),[k,x]=useState(!1),[E,v]=useState(null),C=useRef();const P={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},D=useRef(!0),F=useFocusCallback(r,s,c),g=c.renderText(n),B=Calendar.useNative(),R="datetime",y=isInvalidError(a);useEffect(()=>{var e=makeProperValue(u,B),t=getNewElementValue(e,R,P,B);areValuesEqual(u,t)||m(t,!1),v(e||null)},[u]),useEffect(()=>{if(!k&&!f)if(p)y||l("error",{status:"invalid"});else{if(y&&l("error",void 0),D.current)return void(D.current=!1);var e=getNewElementValue(E,R,P,B);areValuesEqual(u,e)||m(e)}D.current=!1},[p,f,k]);const{min:S,max:V}=getDateBounds(o),b=getAmPm(o),j=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),N=c.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:j,name:s},e=>React.createElement(React.Fragment,null,y&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},C.current),React.createElement(StyledDateTimePicker,{ampm:b,disabled:!r,key:"date-picker",inputRef:e=>{e&&(C.current=e.dataset.formatString,F(e))},maxDateTime:V,minDateTime:S,onChange:e=>v(e),onClose:()=>x(!1),onError:e=>d(!!e),onOpen:()=>x(!0),slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!a,id:j,inputProps:{...e,placeholder:N},onBlur:()=>T(!1),onFocus:()=>T(!0),title:g}},value:E})))};export default DateTimePicker;
+import{buttonBaseClasses}from"@vertigis/react-ui/ButtonBase";import BaseDateTimePicker from"@vertigis/react-ui/DateTimePicker";import FormHelperText from"@vertigis/react-ui/FormHelperText";import{clockClasses}from"@vertigis/react-ui/TimeClock";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{Calendar}from"../Calendar.js";import{areValuesEqual,getAmPm,getDateBounds,getNewElementValue,makeProperValue}from"../dateUtilities.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{isInvalidError}from"../textUtilities.js";import{makeUniqueId,useLocale}from"../utils.js";import DateTimeTextField from"./DateTimeTextField.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const StylableDateTimePicker=e=>{const{className:t,slotProps:r,...a}=e;return React.createElement(BaseDateTimePicker,{slotProps:{...r,actionBar:{sx:{display:"none"}},popper:{...r?.popper,className:t}},...a})},StyledDateTimePicker=styled(StylableDateTimePicker)(({theme:{palette:e}})=>({[`& .${clockClasses.amButton}, .${clockClasses.pmButton}`]:{[`&.${buttonBaseClasses.focusVisible}`]:{color:e.action.active}}})),DateTimePicker=({className:e,element:t,enabled:r,error:a,format:o,name:s,prompt:i,setProperty:m,setValue:l,tooltip:n,value:u})=>{const c=useContext(HostContext),[p,d]=useState(!1),[f,T]=useState(!1),[k,x]=useState(!1),[E,g]=useState(null),C=useRef(),D={locale:useLocale(),timezone:(new Intl.DateTimeFormat).resolvedOptions().timeZone},P=useRef(!0),v=useFocusCallback(r,s,c),F=c.renderText(n),y=Calendar.useNative(),B="datetime",S=isInvalidError(a);useEffect(()=>{const e=makeProperValue(u,y),t=getNewElementValue(e,B,D,y);areValuesEqual(u,t)||l(t,!1),g(e||null)},[u]),useEffect(()=>{if(!k&&!f)if(p)S||m("error",{status:"invalid"});else{if(S&&m("error",void 0),P.current)return void(P.current=!1);R()}P.current=!1},[p,f,k]);const R=()=>{const e=getNewElementValue(E,B,D,y);areValuesEqual(u,e)||l(e)},b=e=>{"enter"!==getKeyString(e)||R()},{min:V,max:j}=getDateBounds(o),N=getAmPm(o),I=useMemo(()=>`${makeUniqueId(s)}-input`,[s]),q=c.renderText(i);return React.createElement(FormElement,{className:e,element:t,inputId:I,name:s},e=>React.createElement(React.Fragment,null,S&&React.createElement(FormHelperText,{component:"div",error:!0,role:"alert"},C.current),React.createElement(StyledDateTimePicker,{ampm:N,disabled:!r,key:"date-picker",inputRef:e=>{e&&(C.current=e.dataset.formatString,v(e))},maxDateTime:j,minDateTime:V,onChange:e=>g(e),onClose:()=>x(!1),onError:e=>d(!!e),onOpen:()=>x(!0),open:k,slots:{textField:DateTimeTextField},slotProps:{textField:{error:!!a,id:I,inputProps:{...e,placeholder:q},onBlur:()=>T(!1),onFocus:()=>T(!0),onKeyDown:b,title:F}},value:E})))};export default DateTimePicker;

package/forms/components/DateTimeTextField.js

@@ -1 +1 @@
-import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import*as React from"react";const DateTimeTextField=t=>{const{placeholder:e,inputProps:r,InputProps:l,...o}=t,a=o.slotProps??{};var{htmlInput:p,input:t}=a;return a.htmlInput={...r,...p,"data-format-string":e},a.htmlInput.placeholder||(a.htmlInput.placeholder=e),a.input={...l,...t},delete o.slotProps,React.createElement(FormLabelTextField,{...o,slotProps:a})};export default DateTimeTextField;
+import FormLabelTextField from"@vertigis/react-ui/FormLabelTextField";import*as React from"react";const DateTimeTextField=t=>{const{placeholder:e,inputProps:l,InputProps:r,...o}=t,p=o.slotProps??{},{htmlInput:a,input:i}=p;return p.htmlInput={...l,...a,"data-format-string":e},p.htmlInput.placeholder||(p.htmlInput.placeholder=e),p.input={...r,...i},delete o.slotProps,React.createElement(FormLabelTextField,{...o,slotProps:p})};export default DateTimeTextField;

package/forms/components/DropDownList.js

@@ -1 +1 @@
-import NativeSelect from"@vertigis/react-ui/NativeSelect";import*as React from"react";import{useContext,useEffect,useState}from"react";import HostContext from"../hostContext.js";import{getInputId,inspectItems,makeSafeClassName,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DEFAULT_VALUE="__default",DropDownList=({className:e,current:l,element:t,enabled:a,items:o,name:r,prompt:n,raiseEvent:s,setProperty:m,setValue:i,tooltip:c,value:u})=>{const p=useContext(HostContext);var d=makeUniqueId(r);const v=getInputId(d),[f,E]=useState({});useEffect(()=>{var{current:e,items:t,label:a,value:r}=inspectItems(l,o,u);m("current",e),m("label",a),m("value",r,!1),E(t)},[o]);const b=p.renderText(c),x=e=>{var t=e.currentTarget.value,e=f[t].value;m("current",t),m("label",f[t].label),e!==u?i(e,{item:t}):s("changed",e,void 0,t)},C=useFocusCallback(a,r,p);return React.createElement(FormElement,{className:e,element:t,inputId:v,name:r},e=>React.createElement(NativeSelect,{disabled:!a,inputProps:{...e,id:v},inputRef:C,onChange:x,title:b,value:l||DEFAULT_VALUE},void 0===l&&React.createElement("option",{key:"none",value:DEFAULT_VALUE,disabled:!0},p.renderText(n)),Object.keys(f).map(e=>{var t=f[e],a=p.renderText(t.label),r=t.styleName?makeSafeClassName(t.styleName):void 0;return React.createElement("option",{className:r,key:e,value:e,title:p.renderText(t.tooltip),disabled:!1===t.enabled},a)})))};export default DropDownList;
+import NativeSelect from"@vertigis/react-ui/NativeSelect";import*as React from"react";import{useContext,useEffect,useState}from"react";import HostContext from"../hostContext.js";import{getInputId,inspectItems,makeSafeClassName,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const DEFAULT_VALUE="__default",DropDownList=({className:e,current:t,element:a,enabled:l,items:o,name:r,prompt:n,raiseEvent:s,setProperty:m,setValue:c,tooltip:i,value:u})=>{const d=useContext(HostContext),p=makeUniqueId(r),f=getInputId(p),[v,b]=useState({});useEffect(()=>{const{current:e,items:a,label:l,value:r}=inspectItems(t,o,u);m("current",e),m("label",l),m("value",r,!1),b(a)},[o]);const E=d.renderText(i),x=e=>{const t=e.currentTarget.value,a=v[t].value;m("current",t),m("label",v[t].label),a!==u?c(a,{item:t}):s("changed",a,void 0,t)},C=useFocusCallback(l,r,d);return React.createElement(FormElement,{className:e,element:a,inputId:f,name:r},e=>React.createElement(NativeSelect,{disabled:!l,inputProps:{...e,id:f},inputRef:C,onChange:x,title:E,value:t||"__default"},void 0===t&&React.createElement("option",{key:"none",value:"__default",disabled:!0},d.renderText(n)),Object.keys(v).map(e=>{const t=v[e],a=d.renderText(t.label),l=t.styleName?makeSafeClassName(t.styleName):void 0;return React.createElement("option",{className:l,key:e,value:e,title:d.renderText(t.tooltip),disabled:!1===t.enabled},a)})))};export default DropDownList;

package/forms/components/FilePicker.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import IconButton from"@vertigis/react-ui/IconButton";import Stack from"@vertigis/react-ui/Stack";import Plus from"@vertigis/react-ui/icons/Plus";import Trash from"@vertigis/react-ui/icons/Trash";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect}from"react";import HostContext from"../hostContext.js";import{isFilesRef}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const PREFIX="FilePicker",filePickerClasses={file:`${PREFIX}-file`,label:`${PREFIX}-label`,list:`${PREFIX}-list`},StyledFormElement=styled(FormElement)(({theme:{palette:e,spacing:t}})=>({[`.${filePickerClasses.list}`]:{marginBottom:t(1),marginTop:t(1),[`.${filePickerClasses.file}`]:{alignItems:"center",display:"flex",gap:t(1),[`.${filePickerClasses.label}`]:{border:`1px solid ${e.grey[200]}`,flexGrow:1,fontStyle:"italic",lineHeight:1,overflow:"hidden",padding:t(1),textOverflow:"ellipsis",whiteSpace:"nowrap"}}}})),FilePicker=({className:e,element:t,enabled:l,fileTypes:i,name:r,setValue:s,size:a,value:o})=>{const n=useContext(HostContext);let c=5,m;"number"==typeof a&&(c=1<a?Math.ceil(a):1),useEffect(()=>{o&&(isFilesRef(o)&&Array.isArray(o.files)||s(void 0,!1))},[o]);var f=n.renderText(t.tooltip);let p=l;const u=[];var d=useFocusCallback(l,r,n);if(void 0!==o){p=l&&o.files.length<c;var k=n.renderText("@file-picker-remove-item-label");for(const E of o.files){var g=u.length;u.push(React.createElement(Box,{key:"$"+g,className:filePickerClasses.file},React.createElement("label",{className:filePickerClasses.label,title:E.name},E.name),React.createElement(IconButton,{"aria-label":k,disabled:!l,onClick:(l=>()=>{let e;if(o?.files&&1<o.files.length){const t=[...o.files];t.splice(l,1),e={...o,files:t}}s(e)})(g),ref:d,title:k},React.createElement(Trash,null))))}}u.push(React.createElement(Box,{key:"footer"},React.createElement(Button,{disabled:!p,onClick:()=>{m&&(m.value="",m.click())},ref:d,startIcon:React.createElement(Plus,null),title:f,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:t.prompt||""}))));a=1!==c;return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:t,name:r},React.createElement(Stack,{className:filePickerClasses.list},u),React.createElement("input",{type:"file",style:{display:"none"},title:f,onChange:e=>(e=>{var t=e.files;if(t?.length){const l=o?.files||[];for(let e=0;e<t.length&&l.length!==c;e++)l.push(t[e]);e={refValueType:"files",files:l};s(e)}})(e.target),multiple:a,accept:i,ref:e=>{m=e}}))};export default FilePicker;export{filePickerClasses};
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import IconButton from"@vertigis/react-ui/IconButton";import Stack from"@vertigis/react-ui/Stack";import Plus from"@vertigis/react-ui/icons/Plus";import Trash from"@vertigis/react-ui/icons/Trash";import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext,useEffect}from"react";import HostContext from"../hostContext.js";import{isFilesRef}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const PREFIX="FilePicker";export const filePickerClasses={file:`${PREFIX}-file`,label:`${PREFIX}-label`,list:`${PREFIX}-list`};const StyledFormElement=styled(FormElement)(({theme:{palette:e,spacing:t}})=>({[`.${filePickerClasses.list}`]:{marginBottom:t(1),marginTop:t(1),[`.${filePickerClasses.file}`]:{alignItems:"center",display:"flex",gap:t(1),[`.${filePickerClasses.label}`]:{border:`1px solid ${e.grey[200]}`,flexGrow:1,fontStyle:"italic",lineHeight:1,overflow:"hidden",padding:t(1),textOverflow:"ellipsis",whiteSpace:"nowrap"}}}})),FilePicker=({className:e,element:t,enabled:l,fileTypes:i,name:s,setValue:r,size:o,value:a})=>{const n=useContext(HostContext);let c,m=5;"number"==typeof o&&(m=o>1?Math.ceil(o):1),useEffect(()=>{a&&(isFilesRef(a)&&Array.isArray(a.files)||r(void 0,!1))},[a]);const f=n.renderText(t.tooltip);let p=l;const u=[],d=useFocusCallback(l,s,n);if(void 0!==a){const e=e=>()=>{let t;if(a?.files&&a.files.length>1){const l=[...a.files];l.splice(e,1),t={...a,files:l}}r(t)};p=l&&a.files.length<m;const t=n.renderText("@file-picker-remove-item-label");for(const i of a.files){const s=u.length;u.push(React.createElement(Box,{key:"$"+s,className:filePickerClasses.file},React.createElement("label",{className:filePickerClasses.label,title:i.name},i.name),React.createElement(IconButton,{"aria-label":t,disabled:!l,onClick:e(s),ref:d,title:t},React.createElement(Trash,null))))}}u.push(React.createElement(Box,{key:"footer"},React.createElement(Button,{disabled:!p,onClick:()=>{c&&(c.value="",c.click())},ref:d,startIcon:React.createElement(Plus,null),title:f,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:t.prompt||""}))));const k=1!==m;return React.createElement(StyledFormElement,{className:e,component:"fieldset",element:t,name:s},React.createElement(Stack,{className:filePickerClasses.list},u),React.createElement("input",{type:"file",style:{display:"none"},title:f,onChange:e=>(e=>{const t=e.files;if(t?.length){const e=a?.files||[];for(let l=0;l<t.length&&e.length!==m;l++)e.push(t[l]);r({refValueType:"files",files:e})}})(e.target),multiple:k,accept:i,ref:e=>{c=e}}))};export default FilePicker;

package/forms/components/Form.js

@@ -1 +1 @@
-import AdapterDateFns from"@vertigis/react-ui/AdapterDateFns";import Box from"@vertigis/react-ui/Box";import{LicenseInfo}from"@vertigis/react-ui/LicenseInfo";import LocalizationProvider from"@vertigis/react-ui/LocalizationProvider";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useEffect,useState}from"react";import{FormComponent,FormElementComponent}from"../FormComponent.js";import{FormElementTypes}from"../constants.js";import{getLocale,getLocaleText}from"../dateUtilities.js";import{getKeyString}from"../keyboard.js";import{isMutuallyExclusiveSection}from"../utils.js";const PREFIX="Form",formClasses={body:`${PREFIX}-body`,footer:`${PREFIX}-footer`,formElementContent:`${PREFIX}-element-content`,formElementTitle:`${PREFIX}-element-title`,formElementWithTitleBeside:`${PREFIX}-element-with-title-beside`,header:`${PREFIX}-header`,main:`${PREFIX}-main`,root:`${PREFIX}-root`,row:`${PREFIX}-row`},StyledBox=styled(Box)(()=>({"h1, h2, h3":{margin:0},[`.${formClasses.formElementWithTitleBeside}`]:{alignItems:"start",display:"grid",gridTemplateColumns:"1fr 2fr",[`> .${formClasses.formElementTitle}`]:{gridColumnStart:1,margin:0,overflowWrap:"anywhere"},[`> .${formClasses.formElementContent}`]:{display:"inline-flex",flexDirection:"column",gridColumnStart:2,overflow:"auto"}},[`.${formClasses.row}`]:{display:"flex",gap:"0.5em","> *":{flexGrow:1},"> .CheckBox, > .CheckGroup, > .Image, > .Number, > .RadioGroup":{flexGrow:0},[`.${formClasses.formElementWithTitleBeside}`]:{gridTemplateColumns:"1fr 1fr"}}}));LicenseInfo.setLicenseKey("c14d2671e294e1c22b64a93ed8f2f0f9Tz04ODQ4NixFPTE3NDQ4MzUzNDMwMDAsUz1wcm8sTE09cGVycGV0dWFsLEtWPTI=");const Form=({className:e,component:t})=>{const[o,r]=useState(),[n,i]=useState(),a=t.props["host"];var l,m,t=a["form"];if(useEffect(()=>{let t=!0;var e=a.deriveLocale();return getLocale(e).then(e=>{t?r(e):console.warn("Component was unmounted while loading the locale.")}),getLocaleText(e).then(e=>{t?i(e):console.warn("Component was unmounted while loading the locale.")}),()=>{t=!1}},[]),!o)return null;const s={host:a,type:"header",children:[]},c={host:a,type:"body",children:[]},d={host:a,type:"main",children:[]},f={host:a,type:"footer",children:[]},u={host:a,type:"body",children:[]},p={},h=[];function y(e){return e!==FormElementTypes.SECTION}function E(e){return e===s||e===c||e===f?`${e.type}-section`:e.name}const g=t.elements;for(const L of Object.keys(g).map(e=>[e,g[e]]).sort((e,t)=>{var o=e[1].section,r=t[1].section;return"header"===o||"footer"===r?Number.MIN_SAFE_INTEGER:"footer"===o||"header"===r?Number.MAX_SAFE_INTEGER:e[1].rowNumber===t[1].rowNumber?e[1].rowIndex-t[1].rowIndex:e[1].rowNumber-t[1].rowNumber})){var F,[v,x]=L;if(!0!==(l=x).hoisted&&(!1!==l.visible&&y(l.type)))if(!0!==x.overlay){let e=function(e){if(void 0===e)return c;if("header"===e)return s;if("footer"===e)return f;let t;t="object"==typeof e?e.name:e;let o=(e=>{for(const t of h)if(t.name===e)return t})(t);return void 0===o&&(o={host:a,name:t,type:"section",children:[]},h.push(o)),o}(x.section);void 0!==x.rowNumber&&(F=E(e),e=function(e,t){let o=p[t];o=o||(p[t]=[]);let r=o[e];return void 0===r&&(r=o[e]={host:a,type:"row",children:[]}),r}(x.rowNumber,F)),e.children.push(React.createElement(FormElementComponent,{key:v,host:a,type:"element",name:v,children:[]}))}else u.children.push(React.createElement(FormElementComponent,{key:v,host:a,type:"element",name:v,children:[]}))}const C=[];if(0<s.children.length&&C.push(React.createElement(FormComponent,{key:"header",...s})),0<u.children.length)C.push(React.createElement(FormComponent,{key:"main",...u}));else{k(c);let e,t,o=0;var b=()=>{if(e){switch(t){case"accordion-section":$(e,++o,"accordionGroup");break;case"tab-section":$(e,++o,"tabGroup")}e=void 0,t=void 0}};for(const N of h){var w=N.name,T=g[w],R=T.format;t&&R!==t&&b(),null!=(m=g[m=w])&&(y(m.type)||!0===m.hoisted||!1===m.visible)||(isMutuallyExclusiveSection(T)?e?e.push(N):(e=[N],t=R):k(N))}b(),0<d.children.length&&C.push(React.createElement(FormComponent,{key:"main",...d}))}function I(e){if(!function(e){var t=E(e),o=p[t];if(o)for(const i of Object.keys(o).map(e=>parseInt(e)).sort((e,t)=>e-t)){var r,n=o[i];1<n.children.length?(r=`row-${i}`,e.children.push(React.createElement(FormComponent,{key:r,...n}))):1===n.children.length&&e.children.push(...n.children)}}(e),0<e.children.length){var t=e===c?"body":`$${e.name}`;return React.createElement(FormComponent,{key:t,...e})}}function k(e){e=I(e);e&&d.children.push(e)}function $(e,t,o){const r=[];for(const i of e){var n=I(i);n&&r.push(n)}t=`${o}${t}`,o={children:r,host:a,name:t,type:o};d.children.push(React.createElement(FormComponent,{key:t,...o}))}return 0<f.children.length&&C.push(React.createElement(FormComponent,{key:"footer",...f})),React.createElement(StyledBox,{className:clsx(e,formClasses.root),onKeyDown:function(e){"enter"===getKeyString(e)&&(e.target instanceof HTMLButtonElement||a.post("clicked"))},ref:function(e){a.renderFocus(e)}},React.createElement(LocalizationProvider,{dateAdapter:AdapterDateFns,adapterLocale:o,localeText:{...n,start:a.renderText("@date-range-picker-start-text"),end:a.renderText("@date-range-picker-end-text"),cancelButtonLabel:a.renderText("@common-cancel"),clearButtonLabel:a.renderText("@common-clear"),okButtonLabel:a.renderText("@common-ok"),todayButtonLabel:a.renderText("@common-today")}},C))};export default Form;export{formClasses};
+import AdapterDateFns from"@vertigis/react-ui/AdapterDateFns";import Box from"@vertigis/react-ui/Box";import{LicenseInfo}from"@vertigis/react-ui/LicenseInfo";import LocalizationProvider from"@vertigis/react-ui/LocalizationProvider";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useEffect,useState}from"react";import{FormComponent,FormElementComponent}from"../FormComponent.js";import{FormElementTypes}from"../constants.js";import{getLocale,getLocaleText}from"../dateUtilities.js";import{getKeyString}from"../keyboard.js";import{isMutuallyExclusiveSection}from"../utils.js";const PREFIX="Form";export const formClasses={body:"Form-body",footer:"Form-footer",formElementContent:"Form-element-content",formElementTitle:"Form-element-title",formElementWithTitleBeside:"Form-element-with-title-beside",header:"Form-header",main:"Form-main",root:"Form-root",row:"Form-row"};const StyledBox=styled(Box)(()=>({"h1, h2, h3":{margin:0},[`.${formClasses.formElementWithTitleBeside}`]:{alignItems:"start",display:"grid",gridTemplateColumns:"1fr 2fr",[`> .${formClasses.formElementTitle}`]:{gridColumnStart:1,margin:0,overflowWrap:"anywhere"},[`> .${formClasses.formElementContent}`]:{display:"inline-flex",flexDirection:"column",gridColumnStart:2,overflow:"auto"}},[`.${formClasses.row}`]:{display:"flex",gap:"0.5em","> *":{flexGrow:1},"> .CheckBox, > .CheckGroup, > .Image, > .Number, > .RadioGroup":{flexGrow:0},[`.${formClasses.formElementWithTitleBeside}`]:{gridTemplateColumns:"1fr 1fr"}}}));LicenseInfo.setLicenseKey("c14d2671e294e1c22b64a93ed8f2f0f9Tz04ODQ4NixFPTE3NDQ4MzUzNDMwMDAsUz1wcm8sTE09cGVycGV0dWFsLEtWPTI=");const Form=({className:e,component:t})=>{const[o,r]=useState(),[n,i]=useState(),{host:c}=t.props,{form:s}=c;if(useEffect(()=>{let e=!0;const t=c.deriveLocale();return getLocale(t).then(t=>{e?r(t):console.warn("Component was unmounted while loading the locale.")}),getLocaleText(t).then(t=>{e?i(t):console.warn("Component was unmounted while loading the locale.")}),()=>{e=!1}},[]),!o)return null;const m={host:c,type:"header",children:[]},l={host:c,type:"body",children:[]},a={host:c,type:"main",children:[]},d={host:c,type:"footer",children:[]},f={host:c,type:"body",children:[]},u={},p=[];function h(e,t){let o=u[t];o||(o=u[t]=[]);let r=o[e];return void 0===r&&(r=o[e]={host:c,type:"row",children:[]}),r}function y(e){if(void 0===e)return l;if("header"===e)return m;if("footer"===e)return d;let t;t="object"==typeof e?e.name:e;let o=(e=>{for(const t of p)if(t.name===e)return t})(t);return void 0===o&&(o={host:c,name:t,type:"section",children:[]},p.push(o)),o}function E(e){return e!==FormElementTypes.SECTION}function g(e){return!0!==e.hoisted&&(!1!==e.visible&&E(e.type))}function F(e){const t=C[e];return null==t||!E(t.type)&&(!0!==t.hoisted&&!1!==t.visible)}function x(e){return e===m||e===l||e===d?`${e.type}-section`:e.name}const C=s.elements,b=Object.keys(C).map(e=>[e,C[e]]).sort((e,t)=>{const o=e[1].section,r=t[1].section;return"header"===o||"footer"===r?Number.MIN_SAFE_INTEGER:"footer"===o||"header"===r?Number.MAX_SAFE_INTEGER:e[1].rowNumber===t[1].rowNumber?e[1].rowIndex-t[1].rowIndex:e[1].rowNumber-t[1].rowNumber});for(const e of b){const[t,o]=e;if(g(o))if(!0!==o.overlay){let e=y(o.section);if(void 0!==o.rowNumber){const t=x(e);e=h(o.rowNumber,t)}e.children.push(React.createElement(FormElementComponent,{key:t,host:c,type:"element",name:t,children:[]}))}else f.children.push(React.createElement(FormElementComponent,{key:t,host:c,type:"element",name:t,children:[]}))}const w=[];if(m.children.length>0&&w.push(React.createElement(FormComponent,{key:"header",...m})),f.children.length>0)w.push(React.createElement(FormComponent,{key:"main",...f}));else{let e,t;v(l);let o=0;const r=()=>{if(e){switch(t){case"accordion-section":k(e,++o,"accordionGroup");break;case"tab-section":k(e,++o,"tabGroup")}e=void 0,t=void 0}};for(const o of p){const n=o.name,i=C[n],c=i.format;t&&c!==t&&r(),F(n)&&(isMutuallyExclusiveSection(i)?e?e.push(o):(e=[o],t=c):v(o))}r(),a.children.length>0&&w.push(React.createElement(FormComponent,{key:"main",...a}))}function T(e){if(function(e){const t=x(e),o=u[t];if(o){const t=Object.keys(o).map(e=>parseInt(e)).sort((e,t)=>e-t);for(const r of t){const t=o[r];if(t.children.length>1){const o=`row-${r}`;e.children.push(React.createElement(FormComponent,{key:o,...t}))}else 1===t.children.length&&e.children.push(...t.children)}}}(e),e.children.length>0){const t=e===l?"body":`$${e.name}`;return React.createElement(FormComponent,{key:t,...e})}}function v(e){const t=T(e);t&&a.children.push(t)}function k(e,t,o){const r=[];for(const t of e){const e=T(t);e&&r.push(e)}const n=`${o}${t}`,i={children:r,host:c,name:n,type:o};a.children.push(React.createElement(FormComponent,{key:n,...i}))}return d.children.length>0&&w.push(React.createElement(FormComponent,{key:"footer",...d})),React.createElement(StyledBox,{className:clsx(e,formClasses.root),onKeyDown:function(e){"enter"===getKeyString(e)&&(e.target instanceof HTMLButtonElement||c.post("clicked"))},ref:function(e){c.renderFocus(e)}},React.createElement(LocalizationProvider,{dateAdapter:AdapterDateFns,adapterLocale:o,localeText:{...n,start:c.renderText("@date-range-picker-start-text"),end:c.renderText("@date-range-picker-end-text"),cancelButtonLabel:c.renderText("@common-cancel"),clearButtonLabel:c.renderText("@common-clear"),okButtonLabel:c.renderText("@common-ok"),todayButtonLabel:c.renderText("@common-today")}},w))};export default Form;

package/forms/components/FormElement.js

@@ -1 +1 @@
-import FormControl from"@vertigis/react-ui/FormControl";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{forwardRef,useContext}from"react";import*as React from"react";import{TitleLocation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,makeUniqueId}from"../utils.js";import{formClasses}from"./Form.js";import{renderAccessibleDescription,renderDescription,renderError,renderTitle}from"./common.js";const StyledFormControl=styled(FormControl)(({theme:{palette:e,spacing:r}})=>({code:{backgroundColor:"rgba(0, 0, 0, .06)",fontFamily:'"Consolas", monospace'},table:{borderCollapse:"collapse","td, th":{border:`1px solid ${e.grey[400]}`,padding:r(.5)},th:{backgroundColor:e.grey[100]}}}));export default forwardRef((e,r)=>{var{children:o,className:t,component:s,element:i,inputId:a,name:n}=e,l=useContext(HostContext),m=makeUniqueId(n),c=renderTitle(m,i.require,i.title,a,"fieldset"===s?"legend":void 0),e=renderDescription(i.description,m,i.enabled),a=renderAccessibleDescription(i.accessibleDescription,i.description,m,l),l=renderError(i.error);const d={className:clsx(t,i.type,{[formClasses.formElementWithTitleBeside]:i.titleLocation===TitleLocation.BESIDE,[makeSafeClassName(n)]:!!n,[makeSafeClassName(i.styleName)]:!!i.styleName}),component:s,error:!!l,id:m,ref:r,required:i.require};m=c?.props?.id,r=a?.props?.id;const p=o instanceof Function?o:void 0;let f=o instanceof Function?void 0:o;p?f=p({"aria-labelledby":m,"aria-describedby":r}):(d["aria-labelledby"]=m,d["aria-describedby"]=r);const u=[c];return i.titleLocation===TitleLocation.BESIDE?u.push(React.createElement("div",{className:formClasses.formElementContent},e,a,l,f)):(u.push(e),u.push(a),u.push(l),u.push(f)),React.createElement(StyledFormControl,{fullWidth:!0,...d},...u)});
+import FormControl from"@vertigis/react-ui/FormControl";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{forwardRef,useContext}from"react";import*as React from"react";import{TitleLocation}from"../constants.js";import HostContext from"../hostContext.js";import{makeSafeClassName,makeUniqueId}from"../utils.js";import{formClasses}from"./Form.js";import{renderAccessibleDescription,renderDescription,renderError,renderTitle}from"./common.js";const StyledFormControl=styled(FormControl)(({theme:{palette:e,spacing:r}})=>({code:{backgroundColor:"rgba(0, 0, 0, .06)",fontFamily:'"Consolas", monospace'},table:{borderCollapse:"collapse","td, th":{border:`1px solid ${e.grey[400]}`,padding:r(.5)},th:{backgroundColor:e.grey[100]}}}));export default forwardRef((e,r)=>{const{children:o,className:t,component:s,element:i,inputId:a,name:n}=e,l=useContext(HostContext),m=makeUniqueId(n),c=renderTitle(m,i.require,i.title,a,"fieldset"===s?"legend":void 0),d=renderDescription(i.description,m,i.enabled),p=renderAccessibleDescription(i.accessibleDescription,i.description,m,l),f=renderError(i.error),u={className:clsx(t,i.type,{[formClasses.formElementWithTitleBeside]:i.titleLocation===TitleLocation.BESIDE,[makeSafeClassName(n)]:!!n,[makeSafeClassName(i.styleName)]:!!i.styleName}),component:s,error:!!f,id:m,ref:r,required:i.require},C=c?.props?.id,b=p?.props?.id,y=o instanceof Function?o:void 0;let h=o instanceof Function?void 0:o;y?h=y({"aria-labelledby":C,"aria-describedby":b}):(u["aria-labelledby"]=C,u["aria-describedby"]=b);const g=[c];return i.titleLocation===TitleLocation.BESIDE?g.push(React.createElement("div",{className:formClasses.formElementContent},d,p,f,h)):(g.push(d),g.push(p),g.push(f),g.push(h)),React.createElement(StyledFormControl,{fullWidth:!0,...u},...g)});

package/forms/components/FormLabelNumberField.d.ts

@@ -1,11 +1,13 @@
 import * as React from "react";
 import type { InputBaseProps } from "@vertigis/react-ui/InputBase";
+import type { KeyboardEvent } from "react";
 interface FormLabelNumberFieldProps {
     disabled: boolean;
     endAdornment?: React.ReactNode;
     id?: string;
     inputProps: InputBaseProps["inputProps"];
     onChange: (value: number | undefined) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
     startAdornment?: React.ReactNode;
     label: string;
     value: number;

package/forms/components/FormLabelNumberField.js

@@ -1 +1 @@
-import FormControl from"@vertigis/react-ui/FormControl";import FormLabel from"@vertigis/react-ui/FormLabel";import NumberInput from"@vertigis/react-ui/NumberInput";import{useId}from"@vertigis/react-ui/utils/react";import*as React from"react";const FormLabelNumberField=e=>{var{disabled:r,endAdornment:t,id:a,inputProps:m,label:o,max:i,maxDecimalPlaces:l,min:n,onChange:u,startAdornment:s,value:c}=e,e=useId(a),a=`${e}-label`;return React.createElement(FormControl,{disabled:r},React.createElement(FormLabel,{htmlFor:e,id:a},o),React.createElement(NumberInput,{id:e,inputProps:m,endAdornment:t,max:i,maxDecimalPlaces:l,min:n,onChange:u,size:"small",startAdornment:s,value:c}))};export default FormLabelNumberField;
+import FormControl from"@vertigis/react-ui/FormControl";import FormLabel from"@vertigis/react-ui/FormLabel";import NumberInput from"@vertigis/react-ui/NumberInput";import{useId}from"@vertigis/react-ui/utils/react";import*as React from"react";const FormLabelNumberField=e=>{const{disabled:r,endAdornment:t,id:m,inputProps:o,label:a,max:n,maxDecimalPlaces:i,min:l,onChange:u,onKeyDown:s,startAdornment:c,value:d}=e,b=useId(m),p=`${b}-label`;return React.createElement(FormControl,{disabled:r},React.createElement(FormLabel,{htmlFor:b,id:p},a),React.createElement(NumberInput,{id:b,inputProps:o,endAdornment:t,max:n,maxDecimalPlaces:i,min:l,onChange:u,onKeyDown:s,size:"small",startAdornment:c,value:d}))};export default FormLabelNumberField;

package/forms/components/GeometryPicker.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import IconButton from"@vertigis/react-ui/IconButton";import List from"@vertigis/react-ui/List";import ListItemButton from"@vertigis/react-ui/ListItemButton";import Plus from"@vertigis/react-ui/icons/Plus";import Trash from"@vertigis/react-ui/icons/Trash";import*as React from"react";import{useContext,useEffect,useRef,useState}from"react";import HostContext from"../hostContext.js";import{sanitizeGeometryRef,text}from"../utils.js";import FormElement from"./FormElement.js";import GeometryPickerListItem from"./GeometryPickerListItem.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const GeometryPicker=({autoActivate:e,className:t,element:r,enabled:o,itemLabel:i,name:n,prompt:s,raiseEvent:a,setProperty:c,setValue:l,size:m,state:u,tooltip:d,value:f})=>{const p=useContext(HostContext),[g,v]=useState([]),[h,k]=useState(""),y=u,x=useRef(!1);let E=5;"number"==typeof m&&(E=1<m?Math.ceil(m):1),useEffect(()=>{var e=sanitizeGeometryRef(f);f!==e&&l(e,!1),void 0!==f&&(Array.isArray(i)?v(i):(v([]),text.isMarkdown(i)?i.markdown&&k(i):text.isStatus(i)?i.status&&k(i.status):i&&k(i))),void 0!==y&&null!==y||c("state",[])},[f]);const[R,b]=useState([]),B=useFocusCallback(o,n,p);const I=e=>{let t=y[e];return void 0!==t&&null!==t||(y.length<=e&&(y.length=e,y.push({})),t=y[e]),t},C=n=>()=>{let e;if(1<f.geometry.length){const r=[...f.geometry];if(r.splice(n,1),e={...f,geometry:r},y.splice(n,1),n<g.length){const o=[...g];o.splice(n,1),v(o)}}else y.length=0;const t=[];for(const i of R)i<n?t.push(i):i>n&&t.push(i-1);b(t),l(e,{argument:"remove"})};var L=e=>{o&&C(e)()},P=(e,t,r)=>{const o=I(e);o.focused=t,o.pending=r,p.renderState(n,"geometry",y)};let G=o;const S=[];if(void 0!==f&&void 0!==y){G=o&&f.geometry.length<E;var j=p.renderText("@geometry-picker-remove-item-label");for(const A of f.geometry){var w=S.length;I(w).content=A;var M=`checkbox-list-label-${w}`;S.push(React.createElement(GeometryPickerListItem,{deleteItem:L,disablePadding:!0,itemIndex:w,key:"$"+w,secondaryAction:React.createElement(IconButton,{"aria-label":j,className:"delete",disabled:!o,edge:"end",onClick:C(w),ref:B,title:j},React.createElement(Trash,null)),updateHighlight:P},React.createElement(ListItemButton,{onClick:(o=>()=>{var e=R.indexOf(o);const t=[...R],r=I(o);-1===e?(r.checked=!0,t.push(o)):(r.checked=!1,t.splice(e,1)),b(t)})(w),ref:(t=>e=>{B(e),null!==e&&(e.checked=!!I(t).checked)})(w),selected:-1!==R.indexOf(w)},React.createElement(Markdown,{id:M,inline:!0,text:g[w]||h}))))}}const T=()=>{a("clicked",f)};d=p.renderText(d);return o&&e&&!x.current&&(setTimeout(()=>{c("autoActivate",void 0),x.current=!1,G&&T()}),x.current=!0),React.createElement(FormElement,{className:t,component:"fieldset",element:r,name:n,ref:e=>{let t=y;null===e&&(r.visible||c("state",[]),t=void 0),p.renderState(n,"geometry",t)}},React.createElement(List,null,S),React.createElement(Box,null,React.createElement(Button,{disabled:!G,onClick:T,ref:B,startIcon:React.createElement(Plus,null),title:d,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:s||""}))))};export default GeometryPicker;
+import Box from"@vertigis/react-ui/Box";import Button from"@vertigis/react-ui/Button";import IconButton from"@vertigis/react-ui/IconButton";import List from"@vertigis/react-ui/List";import ListItemButton from"@vertigis/react-ui/ListItemButton";import Plus from"@vertigis/react-ui/icons/Plus";import Trash from"@vertigis/react-ui/icons/Trash";import*as React from"react";import{useContext,useEffect,useRef,useState}from"react";import HostContext from"../hostContext.js";import{sanitizeGeometryRef,text}from"../utils.js";import FormElement from"./FormElement.js";import GeometryPickerListItem from"./GeometryPickerListItem.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const GeometryPicker=({autoActivate:e,className:t,element:o,enabled:r,itemLabel:n,name:i,prompt:s,raiseEvent:c,setProperty:a,setValue:l,size:m,state:u,tooltip:d,value:f})=>{const p=useContext(HostContext),[g,h]=useState([]),[k,y]=useState(""),v=u,x=useRef(!1);let E=5;"number"==typeof m&&(E=m>1?Math.ceil(m):1),useEffect(()=>{const e=sanitizeGeometryRef(f);f!==e&&l(e,!1),void 0!==f&&(Array.isArray(n)?h(n):(h([]),text.isMarkdown(n)?n.markdown&&y(n):text.isStatus(n)?n.status&&y(n.status):n&&y(n))),null==v&&a("state",[])},[f]);const[R,b]=useState([]),B=useFocusCallback(r,i,p),I=e=>()=>{const t=R.indexOf(e),o=[...R],r=C(e);-1===t?(r.checked=!0,o.push(e)):(r.checked=!1,o.splice(t,1)),b(o)},C=e=>{let t=v[e];return null==t&&(v.length<=e&&(v.length=e,v.push({})),t=v[e]),t},L=e=>()=>{let t;if(f.geometry.length>1){const o=[...f.geometry];if(o.splice(e,1),t={...f,geometry:o},v.splice(e,1),e<g.length){const t=[...g];t.splice(e,1),h(t)}}else v.length=0;const o=[];for(const t of R)t<e?o.push(t):t>e&&o.push(t-1);b(o),l(t,{argument:"remove"})},P=e=>t=>{B(t),null!==t&&(t.checked=!!C(e).checked)},G=e=>{r&&L(e)()},S=(e,t,o)=>{const r=C(e);r.focused=t,r.pending=o,p.renderState(i,"geometry",v)};let j=r;const w=[];if(void 0!==f&&void 0!==v){j=r&&f.geometry.length<E;const e=p.renderText("@geometry-picker-remove-item-label");for(const t of f.geometry){const o=w.length;C(o).content=t;const n=`checkbox-list-label-${o}`;w.push(React.createElement(GeometryPickerListItem,{deleteItem:G,disablePadding:!0,itemIndex:o,key:"$"+o,secondaryAction:React.createElement(IconButton,{"aria-label":e,className:"delete",disabled:!r,edge:"end",onClick:L(o),ref:B,title:e},React.createElement(Trash,null)),updateHighlight:S},React.createElement(ListItemButton,{onClick:I(o),ref:P(o),selected:-1!==R.indexOf(o)},React.createElement(Markdown,{id:n,inline:!0,text:g[o]||k}))))}}const M=()=>{c("clicked",f)},T=p.renderText(d);return r&&e&&!x.current&&(setTimeout(()=>{a("autoActivate",void 0),x.current=!1,j&&M()}),x.current=!0),React.createElement(FormElement,{className:t,component:"fieldset",element:o,name:i,ref:e=>{let t=v;null===e&&(o.visible||null==v&&a("state",[]),t=void 0),p.renderState(i,"geometry",t)}},React.createElement(List,null,w),React.createElement(Box,null,React.createElement(Button,{disabled:!j,onClick:M,ref:B,startIcon:React.createElement(Plus,null),title:T,variant:"outlined"},React.createElement(Markdown,{inline:!0,text:s||""}))))};export default GeometryPicker;

package/forms/components/Image.js

@@ -1 +1 @@
-import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext}from"react";import HostContext from"../hostContext.js";import FormElement from"./FormElement.js";const StyledFormElement=styled(FormElement)(()=>({overflow:"hidden",img:{alignSelf:"start"}})),Image=({className:e,element:t,name:o,size:m,tooltip:r,value:l})=>{const n=useContext(HostContext);let s,a;"number"==typeof m&&(a=m,s=m),"object"==typeof m&&("number"==typeof m.width&&(s=m.width),"number"==typeof m.height&&(a=m.height));let i;"string"==typeof l&&(i=l);r=n.renderText(r);return React.createElement(StyledFormElement,{className:e,element:t,name:o},React.createElement("img",{src:i,alt:r,title:r,width:s,height:a}))};export default Image;
+import{styled}from"@vertigis/react-ui/styles";import*as React from"react";import{useContext}from"react";import HostContext from"../hostContext.js";import FormElement from"./FormElement.js";const StyledFormElement=styled(FormElement)(()=>({overflow:"hidden",img:{alignSelf:"start"}})),Image=({className:e,element:t,name:o,size:m,tooltip:r,value:n})=>{const l=useContext(HostContext);let s,a,i;"number"==typeof m&&(a=m,s=m),"object"==typeof m&&("number"==typeof m.width&&(s=m.width),"number"==typeof m.height&&(a=m.height)),"string"==typeof n&&(i=n);const c=l.renderText(r);return React.createElement(StyledFormElement,{className:e,element:t,name:o},React.createElement("img",{src:i,alt:c,title:c,width:s,height:a}))};export default Image;

package/forms/components/ItemPicker.d.ts

@@ -10,6 +10,6 @@ export declare const itemPickerClasses: {
     items: string;
 };
 declare const ItemPicker: ({ className, component, element, enabled, items: elementItems, name, orientation, prompt, selectionMode, setProperty, setValue, showFilter, spacing, state: elementState, value, }: FormElementProps<defs.ItemsRef | undefined> & {
-    spacing?: number | undefined;
+    spacing?: number;
 }) => React.JSX.Element;
 export default ItemPicker;

package/forms/components/ItemPicker.js

@@ -1 +1 @@
-import Checkbox from"@vertigis/react-ui/Checkbox";import FormControl from"@vertigis/react-ui/FormControl";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import FormLabel from"@vertigis/react-ui/FormLabel";import IconButton from"@vertigis/react-ui/IconButton";import Input from"@vertigis/react-ui/Input";import InputAdornment from"@vertigis/react-ui/InputAdornment";import List from"@vertigis/react-ui/List";import ListItem from"@vertigis/react-ui/ListItem";import ListItemButton from"@vertigis/react-ui/ListItemButton";import ListItemIcon from"@vertigis/react-ui/ListItemIcon";import ListItemText,{listItemTextClasses}from"@vertigis/react-ui/ListItemText";import Radio from"@vertigis/react-ui/Radio";import RadioGroup from"@vertigis/react-ui/RadioGroup";import Stack from"@vertigis/react-ui/Stack";import Typography from"@vertigis/react-ui/Typography";import Close from"@vertigis/react-ui/icons/Close";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useMemo,useState}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{areValuesEqual}from"../listUtilities.js";import{debounce,isDataRef,isGeometryRef,makeSafeClassName,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const PREFIX="ItemPicker",itemPickerClasses={allNone:`${PREFIX}-all-none`,button:`${PREFIX}-list-item-button`,clearIcon:`${PREFIX}-clear-button`,horizontal:`${PREFIX}-horizontal`,item:`${PREFIX}-list-item`,items:`${PREFIX}-list-items`},StyledFormElement=styled(FormElement)(({theme:{typography:e,spacing:t}})=>({[`.${itemPickerClasses.allNone}`]:{marginLeft:t(2)},[`.${itemPickerClasses.clearIcon}`]:{height:e.pxToRem(20),width:e.pxToRem(20)},[`.${itemPickerClasses.items}`]:{[`&.${itemPickerClasses.horizontal}`]:{display:"flex",flexWrap:"wrap",[`.${itemPickerClasses.item}`]:{width:"auto"}},[`.${itemPickerClasses.item}`]:{[`.${itemPickerClasses.button}`]:{paddingBottom:0,paddingTop:0,[`.${listItemTextClasses.primary}`]:{fontWeight:e.fontWeightRegular}}}}})),ItemPicker=({className:e,component:o,element:t,enabled:r,items:a,name:i,orientation:s,prompt:n,selectionMode:l,setProperty:c,setValue:m,showFilter:d,spacing:u,state:p,value:f})=>{const k=useContext(HostContext);void 0===u&&(u=1);const[g,I]=useState(""),h=a||{};let R=p;const v=useFocusCallback(r,i,k),b=e=>{const t=[];for(const o in h){var r=h[o];r.checked&&t.push(r)}let i;0<t.length&&(i={refValueType:"items",items:t}),areValuesEqual(f,i)||m(i,e)};useEffect(()=>{void 0!==R&&null!==R||(R={items:[],keyToIndex:{}});const e={};for(const r in a){var t=x(r,!1);t&&(e[r]=t)}R.items.length=0,R.keyToIndex={};for(const i in e)R.keyToIndex[i]=R.items.length,R.items.push(e[i]);p!==R&&c("state",R),b(!1)});const x=(e,t=!0)=>{let r=R.keyToIndex[e];if(null==r||null===r){if(!t)return;R.keyToIndex[e]=R.items.length,R.items.push({}),r=R.keyToIndex[e]}return R.items[r]},C=(e,t)=>{h[e].checked=t;const r=x(e);r&&(r.checked=t)};var E=t=>e=>{null!==e&&(v(e),e=!0===h[t].checked,x(t).checked=e)};const y=[];let T;switch(l){case"single":T="radio";break;case"multiple":T="checkbox"}const P={},L={};if(R)for(const K in h){var F,S,$,N,w=h[K];w.checked&&(P[K]=w),x(K).content=(e=>{if(e){if(isGeometryRef(e))return e.geometry;if(isDataRef(e)&&e.data)return e.data.geometry}})(w.value),!1!==w.visible&&(L[K]=w,S=(F=r&&!1!==w.enabled)&&!!T,$=k.renderText(w.tooltip),N=clsx(itemPickerClasses.item,w.styleName?makeSafeClassName(w.styleName):void 0),w=React.createElement(Markdown,{text:w.label}),y.push(React.createElement(ListItem,{className:N,disablePadding:!0,key:K},React.createElement(ListItemButton,{className:itemPickerClasses.button,disabled:!F,onClick:S?(r=>()=>{var e=h[r].checked;if("single"===l){if(!e)for(const t in h)C(t,t===r)}else C(r,!e);b(!0),k.renderState(i,"item-picker",R)})(K):void 0,tabIndex:F?void 0:-1,title:$,"data-id":K,onBlur:F?e=>{delete x(e.currentTarget.dataset.id).focused,k.renderState(i,"item-picker",R)}:void 0,onFocus:F?e=>{x(e.currentTarget.dataset.id).focused=!0,k.renderState(i,"item-picker",R)}:void 0,onMouseOver:F?e=>{x(e.currentTarget.dataset.id).pending=!0,k.renderState(i,"item-picker",R)}:void 0,onMouseOut:F?e=>{delete x(e.currentTarget.dataset.id).pending,k.renderState(i,"item-picker",R)}:void 0},"checkbox"===T&&React.createElement(ListItemIcon,null,React.createElement(Checkbox,{edge:"start",checked:!0===h[K]?.checked,disabled:!F,disableRipple:!0,slotProps:{input:{ref:E(K)}},tabIndex:-1,value:K})),"radio"===T&&React.createElement(ListItemIcon,null,React.createElement(Radio,{edge:"start",checked:!0===h[K]?.checked,disabled:!F,disableRipple:!0,name:i,slotProps:{input:{ref:E(K)}},tabIndex:-1,value:K})),React.createElement(ListItemText,null,w)))))}var M=k.renderText(n);const j=useMemo(()=>e=>{for(const t in h){const r=h[t];if(e){const i=k.renderText(r.label).toLowerCase();r.visible=0<=i.indexOf(e)}else r.visible=!0}o.forceUpdate()},[h]),B=useMemo(()=>debounce(j),[h]);const O=()=>{I(""),j("")};var X="multiple"===l&&0<y.length,z=clsx(itemPickerClasses.items,{[itemPickerClasses.horizontal]:s===Orientation.HORIZONTAL});let A,G=0,q=0,U=0,V=0;for(const Z in h){var W=L[Z];W?(U++,W.checked&&G++):(V++,h[Z].checked&&q++)}0===G?A="none":G===U&&(A="all");n=g?React.createElement(InputAdornment,{position:"end"},React.createElement(IconButton,{disabled:!r,onClick:O,title:k.renderText("@common-clear")},React.createElement(Close,{className:itemPickerClasses.clearIcon}))):null,s=d?`${makeUniqueId(i)}-filter`:void 0;let D,H=k.renderText("@item-picker-select");return X&&0<V&&(H=k.renderText("@item-picker-select-visible"),0<q&&(D=1===q?k.renderText("@item-picker-hidden-selected-item"):`${q} ${k.renderText("@item-picker-hidden-selected-items")}`)),React.createElement(StyledFormElement,{className:e,component:"fieldset",element:t,inputId:s,name:i,ref:e=>{null===e?k.renderState(i,"item-picker"):k.renderState(i,"item-picker",R)}},React.createElement(Stack,{spacing:u},d&&React.createElement(Input,{disabled:!r,endAdornment:n,error:!1,fullWidth:!0,id:s,inputRef:v,onChange:e=>{const t=e.target.value;I(t),B(t.toLowerCase())},onKeyDown:e=>{"escape"===getKeyString(e)&&O()},placeholder:M,type:"text",value:g}),X&&React.createElement(FormControl,{className:itemPickerClasses.allNone},React.createElement(FormLabel,null,H),React.createElement(RadioGroup,{color:"primary",row:!0},React.createElement(FormControlLabel,{value:"all",checked:"all"===A,control:React.createElement(Radio,{size:"small"}),disabled:!r,inputRef:v,onClick:()=>{for(const e in L)C(e,!0);b(!0)},label:k.renderText("@common-all")}),React.createElement(FormControlLabel,{value:"none",checked:"none"===A,control:React.createElement(Radio,{size:"small"}),disabled:!r,onClick:()=>{for(const e in L)C(e,!1);b(!0)},label:k.renderText("@common-none")})),D&&React.createElement(Typography,{variant:"subtitle2"},D)),React.createElement(List,{className:z,dense:!0},y)))};export default ItemPicker;export{itemPickerClasses};
+import Checkbox from"@vertigis/react-ui/Checkbox";import FormControl from"@vertigis/react-ui/FormControl";import FormControlLabel from"@vertigis/react-ui/FormControlLabel";import FormLabel from"@vertigis/react-ui/FormLabel";import IconButton from"@vertigis/react-ui/IconButton";import Input from"@vertigis/react-ui/Input";import InputAdornment from"@vertigis/react-ui/InputAdornment";import List from"@vertigis/react-ui/List";import ListItem from"@vertigis/react-ui/ListItem";import ListItemButton from"@vertigis/react-ui/ListItemButton";import ListItemIcon from"@vertigis/react-ui/ListItemIcon";import ListItemText,{listItemTextClasses}from"@vertigis/react-ui/ListItemText";import Radio from"@vertigis/react-ui/Radio";import RadioGroup from"@vertigis/react-ui/RadioGroup";import Stack from"@vertigis/react-ui/Stack";import Typography from"@vertigis/react-ui/Typography";import Close from"@vertigis/react-ui/icons/Close";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useMemo,useState}from"react";import{Orientation}from"../constants.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{areValuesEqual}from"../listUtilities.js";import{debounce,isDataRef,isGeometryRef,makeSafeClassName,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import Markdown from"./Markdown.js";import{useFocusCallback}from"./common.js";const PREFIX="ItemPicker";export const itemPickerClasses={allNone:`${PREFIX}-all-none`,button:`${PREFIX}-list-item-button`,clearIcon:`${PREFIX}-clear-button`,horizontal:`${PREFIX}-horizontal`,item:`${PREFIX}-list-item`,items:`${PREFIX}-list-items`};const StyledFormElement=styled(FormElement)(({theme:{typography:e,spacing:t}})=>({[`.${itemPickerClasses.allNone}`]:{marginLeft:t(2)},[`.${itemPickerClasses.clearIcon}`]:{height:e.pxToRem(20),width:e.pxToRem(20)},[`.${itemPickerClasses.items}`]:{[`&.${itemPickerClasses.horizontal}`]:{display:"flex",flexWrap:"wrap",[`.${itemPickerClasses.item}`]:{width:"auto"}},[`.${itemPickerClasses.item}`]:{[`.${itemPickerClasses.button}`]:{paddingBottom:0,paddingTop:0,[`.${listItemTextClasses.primary}`]:{fontWeight:e.fontWeightRegular}}}}})),ItemPicker=({className:e,component:t,element:i,enabled:r,items:o,name:s,orientation:a,prompt:n,selectionMode:c,setProperty:l,setValue:m,showFilter:d,spacing:u,state:p,value:f})=>{const k=useContext(HostContext);void 0===u&&(u=1);const g=e=>()=>{const t=R[e].checked;if("single"===c){if(!t)for(const t in R)E(t,t===e)}else E(e,!t);C(!0),k.renderState(s,"item-picker",b)},[I,h]=useState(""),R=o||{};let b=p;const x=useFocusCallback(r,s,k),C=e=>{const t=[];for(const e in R){const i=R[e];i.checked&&t.push(i)}let i;t.length>0&&(i={refValueType:"items",items:t}),areValuesEqual(f,i)||m(i,e)};useEffect(()=>{null==b&&(b={items:[],keyToIndex:{}});const e={};for(const t in o){const i=v(t,!1);i&&(e[t]=i)}b.items.length=0,b.keyToIndex={};for(const t in e)b.keyToIndex[t]=b.items.length,b.items.push(e[t]);p!==b&&l("state",b),C(!1)});const v=(e,t=!0)=>{let i=b.keyToIndex[e];if(null==i||null===i){if(!t)return;b.keyToIndex[e]=b.items.length,b.items.push({}),i=b.keyToIndex[e]}return b.items[i]},E=(e,t)=>{R[e].checked=t;const i=v(e);i&&(i.checked=t)},y=e=>t=>{if(null!==t){x(t);const i=!0===R[e].checked;v(e).checked=i}},T=e=>{if(e){if(isGeometryRef(e))return e.geometry;if(isDataRef(e)&&e.data)return e.data.geometry}},P=[];let L;switch(c){case"single":L="radio";break;case"multiple":L="checkbox"}const F={},S={};if(b)for(const e in R){const t=R[e];if(t.checked&&(F[e]=t),v(e).content=T(t.value),!1!==t.visible){S[e]=t;const i=r&&!1!==t.enabled,o=i&&!!L,a=k.renderText(t.tooltip),n=clsx(itemPickerClasses.item,t.styleName?makeSafeClassName(t.styleName):void 0),c=React.createElement(Markdown,{text:t.label});P.push(React.createElement(ListItem,{className:n,disablePadding:!0,key:e},React.createElement(ListItemButton,{className:itemPickerClasses.button,disabled:!i,onClick:o?g(e):void 0,tabIndex:i?void 0:-1,title:a,"data-id":e,onBlur:i?e=>{delete v(e.currentTarget.dataset.id).focused,k.renderState(s,"item-picker",b)}:void 0,onFocus:i?e=>{v(e.currentTarget.dataset.id).focused=!0,k.renderState(s,"item-picker",b)}:void 0,onMouseOver:i?e=>{v(e.currentTarget.dataset.id).pending=!0,k.renderState(s,"item-picker",b)}:void 0,onMouseOut:i?e=>{delete v(e.currentTarget.dataset.id).pending,k.renderState(s,"item-picker",b)}:void 0},"checkbox"===L&&React.createElement(ListItemIcon,null,React.createElement(Checkbox,{edge:"start",checked:!0===R[e]?.checked,disabled:!i,disableRipple:!0,slotProps:{input:{ref:y(e)}},tabIndex:-1,value:e})),"radio"===L&&React.createElement(ListItemIcon,null,React.createElement(Radio,{edge:"start",checked:!0===R[e]?.checked,disabled:!i,disableRipple:!0,name:s,slotProps:{input:{ref:y(e)}},tabIndex:-1,value:e})),React.createElement(ListItemText,null,c))))}}const $=k.renderText(n),N=useMemo(()=>e=>{for(const t in R){const i=R[t];if(e){const t=k.renderText(i.label).toLowerCase();i.visible=t.indexOf(e)>=0}else i.visible=!0}t.forceUpdate()},[R]),w=useMemo(()=>debounce(N),[R]),M=()=>{h(""),N("")},j="multiple"===c&&P.length>0,B=clsx(itemPickerClasses.items,{[itemPickerClasses.horizontal]:a===Orientation.HORIZONTAL});let O,X=0,z=0,A=0,G=0;for(const e in R){const t=S[e];t?(A++,t.checked&&X++):(G++,R[e].checked&&z++)}0===X?O="none":X===A&&(O="all");const q=I?React.createElement(InputAdornment,{position:"end"},React.createElement(IconButton,{disabled:!r,onClick:M,title:k.renderText("@common-clear")},React.createElement(Close,{className:itemPickerClasses.clearIcon}))):null,U=d?`${makeUniqueId(s)}-filter`:void 0;let V,W=k.renderText("@item-picker-select");return j&&G>0&&(W=k.renderText("@item-picker-select-visible"),z>0&&(V=1===z?k.renderText("@item-picker-hidden-selected-item"):`${z} ${k.renderText("@item-picker-hidden-selected-items")}`)),React.createElement(StyledFormElement,{className:e,component:"fieldset",element:i,inputId:U,name:s,ref:e=>{null===e?k.renderState(s,"item-picker"):k.renderState(s,"item-picker",b)}},React.createElement(Stack,{spacing:u},d&&React.createElement(Input,{disabled:!r,endAdornment:q,error:!1,fullWidth:!0,id:U,inputRef:x,onChange:e=>{const t=e.target.value;h(t),w(t.toLowerCase())},onKeyDown:e=>{"escape"===getKeyString(e)&&M()},placeholder:$,type:"text",value:I}),j&&React.createElement(FormControl,{className:itemPickerClasses.allNone},React.createElement(FormLabel,null,W),React.createElement(RadioGroup,{color:"primary",row:!0},React.createElement(FormControlLabel,{value:"all",checked:"all"===O,control:React.createElement(Radio,{size:"small"}),disabled:!r,inputRef:x,onClick:()=>{for(const e in S)E(e,!0);C(!0)},label:k.renderText("@common-all")}),React.createElement(FormControlLabel,{value:"none",checked:"none"===O,control:React.createElement(Radio,{size:"small"}),disabled:!r,onClick:()=>{for(const e in S)E(e,!1);C(!0)},label:k.renderText("@common-none")})),V&&React.createElement(Typography,{variant:"subtitle2"},V)),React.createElement(List,{className:B,dense:!0},P)))};export default ItemPicker;

package/forms/components/ListBox.js

@@ -1 +1 @@
-import Select from"@vertigis/react-ui/Select";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useState}from"react";import HostContext from"../hostContext.js";import{areValuesEqual,arrayEqual}from"../listUtilities.js";import{makeSafeClassName,makeUniqueId,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="ListBox",listBoxClasses={select:`${PREFIX}-select`},StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({"&&&":{[`.${listBoxClasses.select}`]:{paddingRight:e(1)}}})),ListBox=({className:e,current:t,element:s,enabled:a,items:l,name:o,require:i,setValue:r,size:c,tooltip:m,value:n})=>{const u=useContext(HostContext),d=`${makeUniqueId(o)}-input`,p=inspectItems(t,l,n)["items"],[f,x]=useState([]),h=useFocusCallback(a,o,u);useEffect(()=>{const e=[];for(const t in l)l[t].checked&&e.push(t);arrayEqual(f,e)||x(e),v(e,!1)});const v=(e,t)=>{e=0===e.length?void 0:{refValueType:"items",items:e.map(e=>p[e])};areValuesEqual(n,e)||r(e,t)},E=e=>{const t=e.target["options"],s=[];for(let e=0;e<t.length;e++){var a=t.item(e),l=a.value;a.selected&&s.push(l)}for(const r in p){var o=p[r].checked,i=-1!==s.indexOf(r);o!==i&&(p[r].checked=i)}v(s,!0)},C=[];for(const S in p){const q=p[S];var k=u.renderText(q.label);const g=u.renderText(q.tooltip);q.checked=!0===q.checked;var y=clsx(q.styleName?makeSafeClassName(q.styleName):void 0),b=!1===q.enabled?void 0:!!q.checked;C.push(React.createElement("option",{"aria-selected":b,className:y,key:S,title:g,value:S,disabled:!1===q.enabled},k))}const g=u.renderText(m)||void 0;let F;return"number"==typeof c&&(F=c),React.createElement(StyledFormElement,{className:e,element:s,inputId:d,name:o},e=>React.createElement(Select,{disabled:!a||0===C.length,inputProps:{...e,"aria-multiselectable":!0,"aria-orientation":"vertical","aria-required":i,className:listBoxClasses.select,id:d,role:"listbox",size:F,title:g},inputRef:h,multiple:!0,native:!0,onChange:E,value:f},C))};export default ListBox;export{listBoxClasses};
+import Select from"@vertigis/react-ui/Select";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useState}from"react";import HostContext from"../hostContext.js";import{areValuesEqual,arrayEqual}from"../listUtilities.js";import{makeSafeClassName,makeUniqueId,inspectItems}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="ListBox";export const listBoxClasses={select:`${PREFIX}-select`};const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({"&&&":{[`.${listBoxClasses.select}`]:{paddingRight:e(1)}}})),ListBox=({className:e,current:t,element:s,enabled:a,items:l,name:o,require:i,setValue:r,size:c,tooltip:n,value:m})=>{const u=useContext(HostContext),d=`${makeUniqueId(o)}-input`,{items:p}=inspectItems(t,l,m),[f,x]=useState([]),h=useFocusCallback(a,o,u);useEffect(()=>{const e=[];for(const t in l)l[t].checked&&e.push(t);arrayEqual(f,e)||x(e),E(e,!1)});const E=(e,t)=>{const s=0===e.length?void 0:{refValueType:"items",items:e.map(e=>p[e])};areValuesEqual(m,s)||r(s,t)},k=e=>{const{options:t}=e.target,s=[];for(let e=0;e<t.length;e++){const a=t.item(e),l=a.value;a.selected&&s.push(l)}for(const e in p){const t=p[e].checked,a=-1!==s.indexOf(e);t!==a&&(p[e].checked=a)}E(s,!0)},C=[];for(const e in p){const t=p[e],s=u.renderText(t.label),a=u.renderText(t.tooltip);t.checked=!0===t.checked;const l=clsx(t.styleName?makeSafeClassName(t.styleName):void 0),o=!1===t.enabled?void 0:!!t.checked;C.push(React.createElement("option",{"aria-selected":o,className:l,key:e,title:a,value:e,disabled:!1===t.enabled},s))}const v=u.renderText(n)||void 0;let y;return"number"==typeof c&&(y=c),React.createElement(StyledFormElement,{className:e,element:s,inputId:d,name:o},e=>React.createElement(Select,{disabled:!a||0===C.length,inputProps:{...e,"aria-multiselectable":!0,"aria-orientation":"vertical","aria-required":i,className:listBoxClasses.select,id:d,role:"listbox",size:y,title:v},inputRef:h,multiple:!0,native:!0,onChange:k,value:f},C))};export default ListBox;

package/forms/components/Markdown.js

@@ -1 +1 @@
-import BaseMarkdown from"@vertigis/react-ui/Markdown";import*as React from"react";import{useContext}from"react";import HostContext from"../hostContext.js";import{hasContent,isMarkdown}from"../textUtilities.js";const Markdown=({text:t,escapeHtml:e=!0,linkTarget:a="_blank",...o})=>{const r=useContext(HostContext);t=r.translateText(t);return hasContent(t)?isMarkdown(t)?React.createElement(BaseMarkdown,{markdown:t.markdown,escapeHtml:e,linkTarget:a,...o}):React.createElement("div",{className:o.className,role:o.role},React.createElement("p",null,t)):null};export default Markdown;
+import BaseMarkdown from"@vertigis/react-ui/Markdown";import*as React from"react";import{useContext}from"react";import HostContext from"../hostContext.js";import{hasContent,isMarkdown}from"../textUtilities.js";const Markdown=({text:t,escapeHtml:e=!0,linkTarget:a="_blank",...o})=>{const r=useContext(HostContext).translateText(t);return hasContent(r)?isMarkdown(r)?React.createElement(BaseMarkdown,{markdown:r.markdown,escapeHtml:e,linkTarget:a,...o}):React.createElement("div",{className:o.className,role:o.role},React.createElement("p",null,r)):null};export default Markdown;

package/forms/components/Number.js

@@ -1 +1 @@
-import{inputClasses}from"@vertigis/react-ui/Input";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{FormElementSize}from"../constants.js";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import{numberFormatConfiguration}from"../elements/Number.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{NumberDisplayFormat,DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT}from"../numberFormatter.js";import{areValuesEqual,enforceConstraints,getCurrencySymbolInfo,getNumberConstraints,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{isNumber,isNumberRef,isString,makeUniqueId,useLocale}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Number",numberClasses={large:`${PREFIX}-large`,medium:`${PREFIX}-medium`,small:`${PREFIX}-small`},StyledFormElement=styled(FormElement)(()=>({[`.${inputClasses.root}`]:{[`&.${numberClasses.large}`]:{width:"50%"},[`&.${numberClasses.medium}`]:{width:"33%"},[`&.${numberClasses.small}`]:{width:"25%"}}})),NumberComponent=({className:e,element:r,enabled:t,error:m,format:p,name:o,prompt:s,require:n,tooltip:a,value:i,setValue:u})=>{const l=useContext(HostContext),[c,f]=useState(!1),[b,d]=useState(),F=useRef(!0),C=`${makeUniqueId(o)}-input`,N=useLocale(),y=l.renderText(s),E=l.renderText(a),{currency:g,customDisplayFormat:R,decimals:D,displayFormat:I,endAdornment:S,isCustom:v,isFixedPoint:x,isPercent:P,numberConstraints:T,startAdornment:A}=useMemo(()=>{var e,r,t=p,m=t?.currency||DEFAULT_CURRENCY,o=t?.displayFormat,s=o===NumberDisplayFormat.CUSTOM,n=o===NumberDisplayFormat.FIXED_POINT,a=o===NumberDisplayFormat.PERCENT,i=getNumberConstraints(t,numberFormatConfiguration),u=t?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,t=o===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(t?.precision,i.step,numberFormatConfiguration);let l=null,c=null;return o===NumberDisplayFormat.CURRENCY||o===NumberDisplayFormat.ACCOUNTING?(e=getCurrencySymbolInfo(N,m))&&(r=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?l=r:c=r):!a||(e=getPercentSymbolInfo(N))&&(r=React.createElement(InputAdornment,{position:e.position},e.symbol),"start"===e.position?l=r:c=r),{currency:m,customDisplayFormat:u,decimals:t,displayFormat:o,endAdornment:c,isCustom:s,isFixedPoint:n,isPercent:a,numberConstraints:i,startAdornment:l}},[p]);s=useMemo(()=>I===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(R,b):-1,[b]);const{maximum:U,minimum:M,step:j}=T;a=P?D-2:D,a=Math.max(0,a);const z={currency:g,customDisplayFormat:R,format:I,fractionalDigits:a,locale:N},O=e=>{if("number"==typeof e)return{refValueType:"number",format:{lowerBound:M,precision:D,step:j,upperBound:U},display:l.formatNumber(e,z),numeric:e}},$=()=>{e=void 0===(e=b)?void 0:enforceConstraints(e,T),e=O(e);areValuesEqual(i,e)||u(e);var e=e?.numeric;e!==b&&d(e)};useEffect(()=>{F.current?F.current=!1:c||$()},[c,b]),useEffect(()=>{var e=h(i),r=void 0===e?void 0:O(e);areValuesEqual(i,r)||u(r,!1),e!==b&&d(e)},[i]);const h=e=>{let r;if(isNumber(e))r=e;else if(isString(e)){if(!e)return;r=l.coerceNumber(e,N)}else"number"==typeof e?.numeric&&(r=e.numeric);return"number"==typeof r&&0*r!=0&&(r=void 0),void 0===r?r:enforceConstraints(r,T)},q=e=>{var r=getKeyString(e);if("enter"===r)$();else if("escape"===r)return r=e,(e=isNumberRef(i)?i.numeric:void 0)!==b&&d(e),r.currentTarget.select(),r.stopPropagation(),r.preventDefault(),!1},L=useFocusCallback(t,o,l);a="string"==typeof r.size?r.size:FormElementSize.Full;const _=v?s:D,w=clsx({[numberClasses.large]:a===FormElementSize.Large,[numberClasses.medium]:a===FormElementSize.Medium,[numberClasses.small]:a===FormElementSize.Small});return React.createElement(StyledFormElement,{className:e,element:r,inputId:C,name:o},e=>React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(v)return customFormatNumber(e,R,z.locale);P&&(e*=100);var r={format:x?z.format:void 0,fractionalDigits:z.fractionalDigits,locale:z.locale};return l.formatNumber(e,r)},parseNumber:e=>{if(v)return parseCustomFormattedNumber(e,R,z.locale);let r=l.coerceNumber(e,N);return P&&(r=preciseRound(r/100,D)),r}}},React.createElement(NumberInput,{allowUndefined:!0,className:w,correctOnBlur:!0,disabled:!t,endAdornment:S,error:!!m,inputProps:{...e,id:C,onKeyDown:q,title:E},inputRef:L,max:U,maxDecimalPlaces:_,min:M,onBlur:()=>{f(!1)},onChange:e=>d(e),onFocus:()=>{f(!0)},placeholder:y,required:n,size:"small",startAdornment:A,value:b})))};export default NumberComponent;export{numberClasses};
+import{inputClasses}from"@vertigis/react-ui/Input";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import*as React from"react";import{useContext,useEffect,useMemo,useRef,useState}from"react";import{FormElementSize}from"../constants.js";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import{numberFormatConfiguration}from"../elements/Number.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{NumberDisplayFormat,DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT}from"../numberFormatter.js";import{areValuesEqual,enforceConstraints,getCurrencySymbolInfo,getNumberConstraints,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{isNumber,isNumberRef,isString,makeUniqueId,useLocale}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Number";export const numberClasses={large:`${PREFIX}-large`,medium:`${PREFIX}-medium`,small:`${PREFIX}-small`};const StyledFormElement=styled(FormElement)(()=>({[`.${inputClasses.root}`]:{[`&.${numberClasses.large}`]:{width:"50%"},[`&.${numberClasses.medium}`]:{width:"33%"},[`&.${numberClasses.small}`]:{width:"25%"}}})),NumberComponent=({className:e,element:t,enabled:r,error:o,format:m,name:n,prompt:s,require:i,tooltip:a,value:u,setValue:l})=>{const c=useContext(HostContext),[p,f]=useState(!1),[b,d]=useState(),F=useRef(!0),C=`${makeUniqueId(n)}-input`,N=useLocale(),y=c.renderText(s),E=c.renderText(a),{currency:g,customDisplayFormat:R,decimals:D,displayFormat:I,endAdornment:S,isCustom:x,isFixedPoint:v,isPercent:P,numberConstraints:T,startAdornment:A}=useMemo(()=>{const e=m,t=e?.currency||DEFAULT_CURRENCY,r=e?.displayFormat,o=r===NumberDisplayFormat.CUSTOM,n=r===NumberDisplayFormat.FIXED_POINT,s=r===NumberDisplayFormat.PERCENT,i=getNumberConstraints(e,numberFormatConfiguration),a=e?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,u=r===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(e?.precision,i.step,numberFormatConfiguration);let l=null,c=null;if(r===NumberDisplayFormat.CURRENCY||r===NumberDisplayFormat.ACCOUNTING){const e=getCurrencySymbolInfo(N,t);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?l=t:c=t}}else if(s){const e=getPercentSymbolInfo(N);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?l=t:c=t}}return{currency:t,customDisplayFormat:a,decimals:u,displayFormat:r,endAdornment:c,isCustom:o,isFixedPoint:n,isPercent:s,numberConstraints:i,startAdornment:l}},[m]),U=useMemo(()=>I===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(R,b):-1,[b]),{maximum:M,minimum:j,step:z}=T;let O=P?D-2:D;O=Math.max(0,O);const $={currency:g,customDisplayFormat:R,format:I,fractionalDigits:O,locale:N},h=e=>{if("number"==typeof e)return{refValueType:"number",format:{lowerBound:j,precision:D,step:z,upperBound:M},display:c.formatNumber(e,$),numeric:e}},q=()=>{const e=(e=>void 0===e?void 0:enforceConstraints(e,T))(b),t=h(e);areValuesEqual(u,t)||l(t);const r=t?.numeric;r!==b&&d(r)};useEffect(()=>{F.current?F.current=!1:p||q()},[p,b]),useEffect(()=>{const e=L(u),t=void 0===e?void 0:h(e);areValuesEqual(u,t)||l(t,!1),e!==b&&d(e)},[u]);const L=e=>{let t;if(isNumber(e))t=e;else if(isString(e)){if(!e)return;t=c.coerceNumber(e,N)}else"number"==typeof e?.numeric&&(t=e.numeric);return"number"==typeof t&&0*t!=0&&(t=void 0),void 0===t?t:enforceConstraints(t,T)},_=e=>{const t=getKeyString(e);if("enter"!==t)return"escape"===t?(e=>{const t=isNumberRef(u)?u.numeric:void 0;return t!==b&&d(t),e.currentTarget.select(),e.stopPropagation(),e.preventDefault(),!1})(e):void 0;q()},w=useFocusCallback(r,n,c),k="string"==typeof t.size?t.size:FormElementSize.Full,V=x?U:D,X=clsx({[numberClasses.large]:k===FormElementSize.Large,[numberClasses.medium]:k===FormElementSize.Medium,[numberClasses.small]:k===FormElementSize.Small});return React.createElement(StyledFormElement,{className:e,element:t,inputId:C,name:n},e=>React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(x)return customFormatNumber(e,R,$.locale);P&&(e*=100);const t={format:v?$.format:void 0,fractionalDigits:$.fractionalDigits,locale:$.locale};return c.formatNumber(e,t)},parseNumber:e=>{if(x)return parseCustomFormattedNumber(e,R,$.locale);let t=c.coerceNumber(e,N);return P&&(t=preciseRound(t/100,D)),t}}},React.createElement(NumberInput,{allowUndefined:!0,className:X,correctOnBlur:!0,disabled:!r,endAdornment:S,error:!!o,inputProps:{...e,id:C,onKeyDown:_,title:E},inputRef:w,max:M,maxDecimalPlaces:V,min:j,onBlur:()=>{f(!1)},onChange:e=>d(e),onFocus:()=>{f(!0)},placeholder:y,required:i,size:"small",startAdornment:A,value:b})))};export default NumberComponent;