@vertigis/workflow 5.48.1 → 5.49.0

package/LanguageStringUtils.js

@@ -1 +1 @@
-const defaultStrings={"common-all":"All","common-cancel":"Cancel","common-clear":"Clear","common-close":"Close","common-color":"Color","common-done":"Done","common-edit":"Edit","common-end":"End","common-none":"None","common-ok":"OK","common-open":"Open","common-start":"Start","common-to":"to","common-today":"Today","common-undo":"Undo","date-range-picker-end-text":"End Date","date-range-picker-start-text":"Start Date","file-picker-remove-item-label":"Remove file","form-element-status-failure":"Failure","form-element-status-invalid":"Invalid input","form-element-status-missing":"Required","form-element-status-pending":"Working...","form-element-status-trivial":"No data","geometry-picker-remove-item-label":"Remove location","item-picker-hidden-selected-item":"1 hidden item is also selected.","item-picker-hidden-selected-items":"hidden items are also selected.","item-picker-select":"Select","item-picker-select-visible":"Select Visible","printing-gen2-address":"Address","printing-gen2-city":"City","printing-gen2-company":"Company","printing-gen2-copyright":"Copyright","printing-gen2-country":"Country","printing-gen2-created":"Created","printing-gen2-creator":"Creator","printing-gen2-current-time":"Time","printing-gen2-department":"Department","printing-gen2-disclaimer":"Disclaimer","printing-gen2-division":"Division","printing-gen2-email":"E-Mail","printing-gen2-end-time":"End Time","printing-gen2-fax":"Fax","printing-gen2-first-name":"First Name","printing-gen2-last-name":"Last Name","printing-gen2-map-view":"Map View","printing-gen2-mobile-phone":"Mobile Phone","printing-gen2-organization":"Organization","printing-gen2-overview-scale":"Overview Scale","printing-gen2-page":"Page","printing-gen2-phone":"Phone","printing-gen2-range":"Range","printing-gen2-scale":"Scale","printing-gen2-spatial-reference":"Spatial Reference","printing-gen2-start-end-time":"Start / End Time","printing-gen2-start-time":"Start Time","printing-gen2-street":"Street","printing-gen2-time":"Time","printing-gen2-title":"Title","printing-gen2-zip-code":"ZIP Code","sketch-size":"Size","sketch-tool":"Tool","sketch-tool-highlighter":"Highlighter","sketch-tool-pen":"Pen"};export function getStringsForProgram(e,n){const i={...defaultStrings};if(n.strings)for(const e of Object.keys(n.strings))i[e]=n.strings[e];const t=e.getStrings(n.locale);for(const e of Object.keys(t))i[e]=t[e];return i}
+const defaultStrings={"common-all":"All","common-cancel":"Cancel","common-clear":"Clear","common-close":"Close","common-color":"Color","common-done":"Done","common-edit":"Edit","common-end":"End","common-none":"None","common-ok":"OK","common-open":"Open","common-start":"Start","common-to":"to","common-today":"Today","common-undo":"Undo","common-value":"Value","date-range-picker-end-text":"End Date","date-range-picker-start-text":"Start Date","file-picker-remove-item-label":"Remove file","form-element-status-failure":"Failure","form-element-status-invalid":"Invalid input","form-element-status-missing":"Required","form-element-status-pending":"Working...","form-element-status-trivial":"No data","geometry-picker-remove-item-label":"Remove location","item-picker-hidden-selected-item":"1 hidden item is also selected.","item-picker-hidden-selected-items":"hidden items are also selected.","item-picker-select":"Select","item-picker-select-visible":"Select Visible","printing-gen2-address":"Address","printing-gen2-city":"City","printing-gen2-company":"Company","printing-gen2-copyright":"Copyright","printing-gen2-country":"Country","printing-gen2-created":"Created","printing-gen2-creator":"Creator","printing-gen2-current-time":"Time","printing-gen2-department":"Department","printing-gen2-disclaimer":"Disclaimer","printing-gen2-division":"Division","printing-gen2-email":"E-Mail","printing-gen2-end-time":"End Time","printing-gen2-fax":"Fax","printing-gen2-first-name":"First Name","printing-gen2-last-name":"Last Name","printing-gen2-map-view":"Map View","printing-gen2-mobile-phone":"Mobile Phone","printing-gen2-organization":"Organization","printing-gen2-overview-scale":"Overview Scale","printing-gen2-page":"Page","printing-gen2-phone":"Phone","printing-gen2-range":"Range","printing-gen2-scale":"Scale","printing-gen2-spatial-reference":"Spatial Reference","printing-gen2-start-end-time":"Start / End Time","printing-gen2-start-time":"Start Time","printing-gen2-street":"Street","printing-gen2-time":"Time","printing-gen2-title":"Title","printing-gen2-zip-code":"ZIP Code","sketch-size":"Size","sketch-tool":"Tool","sketch-tool-highlighter":"Highlighter","sketch-tool-pen":"Pen"};export function getStringsForProgram(e,n){const i={...defaultStrings};if(n.strings)for(const e of Object.keys(n.strings))i[e]=n.strings[e];const t=e.getStrings(n.locale);for(const e of Object.keys(t))i[e]=t[e];return i}

package/activities/arcgis/RunPrint.d.ts

@@ -11,7 +11,7 @@ export interface RunPrintInputs {
     scale?: number;
     parameters?: Record<string, any>;
     resultFileName?: string;
-    resolution?: number;
+    resolution?: 72 | 96 | 120 | 300 | number;
     rotation?: number;
 }
 /** Defines outputs for the RunPrint activity. */

package/activities/forms/DisplayForm.js

@@ -1 +1 @@
-var DisplayForm_1;import{__decorate}from"tslib";import Bluebird from"bluebird";import{activate}from"../../Hooks.js";import{setFormForElement}from"./FormElementMap.js";import{FormRenderer}from"./FormRenderer.js";function loop(e,t){let o,r;const n=new Bluebird((e,t)=>{o=e,r=t});let s=e();return function n(){for(;s.isFulfilled();){const r=s.value();if(void 0===r)break;const n=t(r);if(void 0!==n){o(n);break}s=e()}s.isPending()&&s.then(n),s.isRejected()&&r(s.reason())}(),n}let DisplayForm=DisplayForm_1=class{static createRenderer(e,t,o){let r=t.luid;const n=!1!==e.reset,s=e.name;"string"==typeof s&&(r=":"+s);const i=this.renderers;let l,a=i[r];if(a&&(!1===n&&(l=a.form),delete i[r],a=void 0),void 0===a){a=i[r]=o.create(),l&&(a.form=l);const e=function(){delete i[r],a.dispose()};(a.state=t.ambient).completion.then(e,e)}l?a.load():a.load(e.form,e.template);const u="string"==typeof e.container?e.container:"default",m="string"==typeof e.region?e.region:void 0;return a.form.defaults.container=void 0!==m||"default"!==u&&"modal"!==u?{name:u,region:m}:u,a}execute(e,t,o){let r=t.state;if(void 0!==r){const e=r.outputs,o=t.caught;if(void 0!==o){const n=e.event,s=n?`Error in ${n.name} element's ${n.type} event in`:"Error in a subworkflow of";return console.error(`${s} a Display Form activity: ${o.message}`,o),t.fork("catch"),r.busy(),r.outputs={actor:r,state:r.form.elements,event:e.event,route:!1,error:o},DisplayForm_1.updateElementMap(r.outputs),r.cancelTool(),Promise.resolve(r.outputs)}const n=e.result;if("string"==typeof n)return r.spinNoBlock(),r.outputs={actor:r,state:r.form.elements,event:e.event,route:!1,result:n,status:n},DisplayForm_1.updateElementMap(r.outputs),r.cancelTool(),Promise.resolve(r.outputs);if("object"==typeof n&&null!==n)return r.spinNoBlock(),Bluebird.reject(n);e.route&&r.route(e.event)}else r=DisplayForm_1.createRenderer(e,t,o),t.persist(r);t.ambient.setExternalEventHandler(r.enqueueExternalEvent);return r.outputs=void 0,loop(function(){const e=r.observe();return e.isFulfilled()&&void 0===e.value()&&(console.warn("Error detected observing form. Promise is fulfilled with no value."),r.dispose()),e},e=>{let o;const n=e.value,s=("submit"===e.type||"end"===e.type)&&"string"==typeof n?n:void 0,i=()=>(o=r.outputs={actor:r,state:r.form.elements,event:e,route:!1,result:s,status:s},DisplayForm_1.updateElementMap(r.outputs),r.cancelTool(),t.ambient.removeExternalEventHandler(r.enqueueExternalEvent),r.outputs);if(!r.trap(e)&&t.hasBranch(e.routingKey)){const n=e.cancellationToken;if(null!=n){if(Bluebird.resolve(n).isFulfilled())return void r.route(e);n.then(function(){r.outputs===o&&t.goto()})}else r.busy();return t.fork(e.routingKey),t.registerForErrors(),i()}if(void 0!==s)return r.spinNoBlock(),i();r.route(e)})}static updateElementMap(e){if(e&&e.state)for(const t in e.state)setFormForElement(e.state[t],e)}};DisplayForm.renderers={},DisplayForm.action="gcx:wf:forms:form:DisplayForm",DisplayForm.suite="gcx:wf:builtin",DisplayForm=DisplayForm_1=__decorate([activate(FormRenderer)],DisplayForm);export{DisplayForm};
+var DisplayForm_1;import{__decorate}from"tslib";import Bluebird from"bluebird";import{activate}from"../../Hooks.js";import{setFormForElement}from"./FormElementMap.js";import{FormRenderer}from"./FormRenderer.js";function loop(e,t){let o,r;const n=new Bluebird((e,t)=>{o=e,r=t});let s=e();return function n(){for(;s.isFulfilled();){const r=s.value();if(void 0===r)break;const n=t(r);if(void 0!==n){o(n);break}s=e()}s.isPending()&&s.then(n),s.isRejected()&&r(s.reason())}(),n}let DisplayForm=DisplayForm_1=class{static createRenderer(e,t,o){let r=t.luid;const n=!1!==e.reset,s=e.name;"string"==typeof s&&(r=":"+s);const i=this.renderers;let l,a=i[r];if(a&&(!1===n&&(l=a.form),delete i[r],a=void 0),void 0===a){a=i[r]=o.create(),l&&(a.form=l);const e=function(){delete i[r],a.dispose()};(a.state=t.ambient).completion.then(e,e)}l?a.load():a.load(e.form,e.template);const u="string"==typeof e.container?e.container:"default",m="string"==typeof e.region?e.region:void 0;return a.form.defaults.container=void 0!==m||"default"!==u&&"modal"!==u?{name:u,region:m}:u,a}execute(e,t,o){let r=t.state;if(void 0!==r){const e=r.outputs,o=t.caught;if(void 0!==o){const n=e.event,s=n?`Error in ${n.name} element's ${n.type} event in`:"Error in a subworkflow of";return console.error(`${s} a Display Form activity: ${o.message}`,o),t.fork("catch"),r.busy(),r.outputs={actor:r,state:r.form.elements,event:e.event,route:!1,error:o},DisplayForm_1.updateElementMap(r.outputs),r.cancelTool(),Promise.resolve(r.outputs)}const n=e.result;if("string"==typeof n)return r.spinNoBlock(),r.outputs={actor:r,state:r.form.elements,event:e.event,route:!1,result:n,status:n},DisplayForm_1.updateElementMap(r.outputs),r.cancelTool(),Promise.resolve(r.outputs);if("object"==typeof n&&null!==n)return r.spinNoBlock(),Bluebird.reject(n);e.route&&r.route(e.event)}else r=DisplayForm_1.createRenderer(e,t,o),t.persist(r);t.ambient.setExternalEventHandler(r.enqueueExternalEvent);return r.applyPendingValues(),r.outputs=void 0,loop(function(){const e=r.observe();return e.isFulfilled()&&void 0===e.value()&&(console.warn("Error detected observing form. Promise is fulfilled with no value."),r.dispose()),e},e=>{let o;const n=e.value,s=("submit"===e.type||"end"===e.type)&&"string"==typeof n?n:void 0,i=()=>(o=r.outputs={actor:r,state:r.form.elements,event:e,route:!1,result:s,status:s},DisplayForm_1.updateElementMap(r.outputs),r.cancelTool(),t.ambient.removeExternalEventHandler(r.enqueueExternalEvent),r.outputs);if(!r.trap(e)&&t.hasBranch(e.routingKey)){const n=e.cancellationToken;if(null!=n){if(Bluebird.resolve(n).isFulfilled())return void r.route(e);n.then(function(){r.outputs===o&&t.goto()})}else r.busy();return t.fork(e.routingKey),t.registerForErrors(),i()}if(void 0!==s)return r.spinNoBlock(),i();r.route(e)})}static updateElementMap(e){if(e&&e.state)for(const t in e.state)setFormForElement(e.state[t],e)}};DisplayForm.renderers={},DisplayForm.action="gcx:wf:forms:form:DisplayForm",DisplayForm.suite="gcx:wf:builtin",DisplayForm=DisplayForm_1=__decorate([activate(FormRenderer)],DisplayForm);export{DisplayForm};

package/activities/forms/SetFormElementProperty.d.ts

@@ -5,7 +5,7 @@ export interface SetFormElementPropertyInputs {
     form: DisplayFormOutputs;
     /** The ID of the form element to modify. */
     elementName?: string | defs.Element;
-    propertyName: "accessibleDescription" | "autoActivate" | "checked" | "collapsed" | "current" | "delay" | "dependsOn" | "description" | "enabled" | "error" | "fileTypes" | "format" | "itemLabel" | "items" | "label" | "manualEntry" | "maxLength" | "minLength" | "orientation" | "prompt" | "readOnly" | "require" | "rowIndex" | "rowNumber" | "selectionMode" | "showFilter" | "showMinMaxLabels" | "showTickMarks" | "size" | "source" | "styleName" | "title" | "titleLocation" | "tooltip" | "type" | "validates" | "value" | "visible" | "wrap" | string;
+    propertyName: "accessibleDescription" | "autoActivate" | "checked" | "collapsed" | "current" | "delay" | "dependsOn" | "description" | "enabled" | "error" | "fileTypes" | "format" | "itemLabel" | "items" | "label" | "manualEntry" | "maxLength" | "minLength" | "orientation" | "persistValueOnRefresh" | "prompt" | "readOnly" | "require" | "rowIndex" | "rowNumber" | "selectionMode" | "showFilter" | "showMinMaxLabels" | "showTickMarks" | "size" | "source" | "styleName" | "title" | "titleLocation" | "tooltip" | "type" | "validates" | "value" | "visible" | "wrap" | string;
     propertyValue: any;
     markdown?: boolean;
 }

package/forms/FormDefinition.d.ts

@@ -311,6 +311,14 @@ export interface Element {
     orientation?: Orientation;
     /** Indicates that the element is in overlay mode. */
     overlay?: boolean;
+    /**
+     * Indicates if the current value should be retained when the element is refreshed.
+     * This is used in conjunction with dependsOn when options in an element are valid
+     * for more than one option in the element that it depends upon.
+     * This does not just mean the items have the same value, but they have the same meaning.
+     * Default is false.
+     */
+    persistValueOnRefresh?: boolean;
     /** Indicates the prompt for the element. */
     prompt?: Text;
     /** Indicates if the element is read only. */

package/forms/FormHost.d.ts

@@ -59,6 +59,16 @@ export declare abstract class FormHost implements FormPresenterHost {
      * it belongs to. This helps with deciding where to move focus to when validation fails.
      */
     protected domContainers: Record<string, HTMLElement>;
+    /**
+     * This stores values which are to be re-applied after elements have been refreshed
+     * due to the value of a depended-upon element changing. The values here are copied from elements prior to
+     * the "populate" or "suggest" handler being executed, so they may not be the same exact Items
+     * as next time around, but the underlying values can still be used to find the equivalent and select them.
+     */
+    protected pendingValues: Record<string, {
+        label?: defs.Text | undefined;
+        value: defs.Value;
+    }>;
     /** The event promise, for when the consumer is waiting. */
     private eventTask;
     /**
@@ -96,6 +106,11 @@ export declare abstract class FormHost implements FormPresenterHost {
      * @param target The DOM element that has just gained focus.
      */
     protected observeFocus(target: EventTarget): void;
+    /**
+     * This method is used to update the values of form elements that depend on another
+     * and have "Persist Value on Refresh" set to true.
+     */
+    applyPendingValues(): void;
     /** Focuses the form. */
     focus(): void;
     /** Focuses the form optionally focusing the initial element. */

package/forms/FormHost.js

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

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{forwardRef,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=forwardRef(({className:e,component:t,current:o,delay:r,element:n,enabled:l,error:s,items:a,label:i,minLength:p,name:u,prompt:m,tooltip:c,raiseEvent:d,setProperty:f,setValue:x,value:g},C)=>{const y=useContext(HostContext),[v,T]=useState(),[b,h]=useState(""),[O,S]=useState([]),[E,k]=useState(null),P=useRef(!1),R=useRef(),I=useRef(!1),N=useFocusCallback(l,u,y),F=useRef({}),w=useRef({}),A=useMemo(()=>{let e=r;return("number"!=typeof e||isNaN(e))&&(e=autoCompletePropertyConstraints.delay.default),Math.max(e,autoCompletePropertyConstraints.delay.minimum)},[r]),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:M,noOptionsText:H,openText:B,placeholder:K,title:$}=useMemo(()=>({clearText:y.renderText("@common-clear"),closeText:y.renderText("@common-close"),noOptionsText:y.renderText({status:"trivial"}),openText:y.renderText("@common-open"),placeholder:y.renderText(m),title:y.renderText(c)}),[y,m,c]),V=t.timer||(t.timer=new ExclusiveTimer),D=()=>{d("suggest",g,b,void 0,V.cancellationToken),S(pendingOptions)},z=()=>{f("items",{}),f("label",void 0)};useEffect(()=>{"clear"===v?z():"input"===v&&(i&&f("label",void 0),P.current=!0,b.length>=L?(f("current",void 0),V.reset(),V.start(A,D)):Object.keys(a||{}).length>0&&z())},[v,b]),useEffect(()=>{const e=E?.value;if(g!==e){const t=getItemId(E,F.current),o=t?w.current[t]:void 0;f("current",t),f("label",o),x(e,{argument:o})}},[E]),useEffect(()=>{const{current:e,items:t,label:r,value:n}=inspectItems(o,a,g);f("current",e),f("label",r||i),f("value",n,!1);const l={};let s=null;const p=[];for(const o in t){const r=t[o];p.push(r);const n=y.renderText(r.label).trim();l[o]=n,e&&o===e&&(s=r)}w.current=l,F.current=t,S(p),k(s)},[a]),useEffect(()=>{const e="string"==typeof o?o:void 0,t=e?F.current[e]:void 0,r=e?w.current[e]:void 0;t?(f("label",r),f("value",t.value),h(r||"")):(f("value",void 0),P.current||h("")),k(t||null)},[o]),useEffect(()=>{P.current||I.current||h(""),P.current=!1,I.current=!1},[i]);const W=y.renderText(i);return React.createElement(FormElement,{className:e,element:n,inputId:R.current,name:u,ref:C},e=>React.createElement(StyledAutoComplete,{autoSelect:!0,clearOnBlur:!1,clearOnEscape:!0,clearText:j,closeText:M,disabled:!l,filterOptions:e=>e,getOptionDisabled:e=>!1===e.enabled,getOptionKey:e=>getItemId(e,F.current)||"",getOptionLabel:e=>{const t=getItemId(e,F.current);return t?w.current[t]:""},inputValue:b,noOptionsText:H,onBlur:()=>{1===O.length&&b.toLowerCase()===w.current[0]?.toLowerCase()?(h(w.current[0]),k(O[0])):f("label",b)},onChange:(e,t)=>{I.current=!0,k(t)},onInputChange:(e,t,o)=>{h(t),T(o)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation()},openText:B,options:O,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 r=getItemId(t,F.current),n={...e,className:clsx(e.className,t.styleName?makeSafeClassName(t.styleName):void 0),title:t.tooltip?y.renderText(t.tooltip):void 0,inputText:o,optionText:r?w.current[r]:""};return React.createElement(HighlightOption,{...n})},renderInput:t=>(t.inputProps={...t.inputProps,...e,value:t.inputProps.value||W,placeholder:K,title:$},R.current=t.id,React.createElement(FormLabelTextField,{error:!!s,...t,fullWidth:!0,inputRef:N})),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{forwardRef,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=forwardRef(({className:e,component:t,current:o,delay:r,element:n,enabled:l,error:s,items:a,label:i,minLength:p,name:u,prompt:m,tooltip:c,raiseEvent:d,setProperty:f,setValue:x,value:g},C)=>{const y=useContext(HostContext),[v,T]=useState(),[b,h]=useState(""),[O,S]=useState([]),[E,k]=useState(null),I=useRef(!1),P=useRef(),R=useRef(!1),N=useFocusCallback(l,u,y),F=useRef({}),w=useRef({}),A=useMemo(()=>{let e=r;return("number"!=typeof e||isNaN(e))&&(e=autoCompletePropertyConstraints.delay.default),Math.max(e,autoCompletePropertyConstraints.delay.minimum)},[r]),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:M,noOptionsText:H,openText:B,placeholder:K,title:$}=useMemo(()=>({clearText:y.renderText("@common-clear"),closeText:y.renderText("@common-close"),noOptionsText:y.renderText({status:"trivial"}),openText:y.renderText("@common-open"),placeholder:y.renderText(m),title:y.renderText(c)}),[y,m,c]),V=t.timer||(t.timer=new ExclusiveTimer),D=()=>{d("suggest",g,b,void 0,V.cancellationToken),S(pendingOptions)},z=()=>{f("items",{}),f("label",void 0)};useEffect(()=>{"clear"===v?z():"input"===v&&(i&&f("label",void 0),I.current=!0,b.length>=L?(f("current",void 0),V.reset(),V.start(A,D)):Object.keys(a||{}).length>0&&z())},[v,b]),useEffect(()=>{const e=E?.value;if(g!==e){const t=getItemId(E,F.current),o=t?w.current[t]:void 0;f("current",t),f("label",o),x(e,{argument:o})}},[E]),useEffect(()=>{const{current:e,items:t,label:r,value:n}=inspectItems(o,a,g);f("current",e),f("label",r||i),f("value",n,!1);const l={};let s=null;const p=[];for(const o in t){const r=t[o];p.push(r);const n=y.renderText(r.label).trim();l[o]=n,e&&o===e&&(s=r)}w.current=l,F.current=t,S(p),k(s)},[a]),useEffect(()=>{const e="string"==typeof o?o:void 0,t=e?F.current[e]:void 0,r=e?w.current[e]:void 0;t?(f("label",r),f("value",t.value),h(r||"")):(f("value",void 0),I.current||h("")),k(t||null)},[o]),useEffect(()=>{I.current||R.current||h(""),I.current=!1,R.current=!1},[i]);const W=y.renderText(i);return React.createElement(FormElement,{className:e,element:n,inputId:P.current,name:u,ref:C},e=>React.createElement(StyledAutoComplete,{autoSelect:!0,clearOnBlur:!1,clearOnEscape:!0,clearText:j,closeText:M,disabled:!l,filterOptions:e=>e,getOptionDisabled:e=>!1===e.enabled,getOptionKey:e=>getItemId(e,F.current)||"",getOptionLabel:e=>{const t=getItemId(e,F.current);return t?w.current[t]:""},inputValue:b,noOptionsText:H,onBlur:()=>{1===O.length&&b.toLowerCase()===w.current[0]?.toLowerCase()?(h(w.current[0]),k(O[0])):f("label",b)},onChange:(e,t)=>{R.current=!0,k(t)},onInputChange:(e,t,o)=>{h(t),T(o)},onKeyDown:e=>{"enter"===getKeyString(e)&&e.stopPropagation()},openText:B,options:O,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 r=getItemId(t,F.current),n={...e,className:clsx(e.className,t.styleName?makeSafeClassName(t.styleName):void 0),title:t.tooltip?y.renderText(t.tooltip):void 0,inputText:o,optionText:r?w.current[r]:""};return React.createElement(HighlightOption,{...n})},renderInput:t=>(t.inputProps={...t.inputProps,...e,value:t.inputProps.value||W,placeholder:K,title:$},P.current=t.id,React.createElement(FormLabelTextField,{error:!!s,...t,fullWidth:!0,inputRef:N})),slotProps:{clearIndicator:{"aria-label":j},popper:{component:StyledPopper}},value:E}))});export default AutoComplete;

package/forms/components/ButtonBar.d.ts

@@ -4,5 +4,5 @@ import type { defs } from "../FormHost";
 /**
  * The component for the "Button Bar" Form Element.
  */
-declare const ButtonBar: React.ForwardRefExoticComponent<FormElementProps<defs.Value | undefined> & React.RefAttributes<HTMLDivElement>>;
+declare const ButtonBar: React.ForwardRefExoticComponent<FormElementProps<defs.Value | undefined> & React.RefAttributes<HTMLFieldSetElement>>;
 export default ButtonBar;

package/forms/components/CheckGroup.d.ts

@@ -4,5 +4,5 @@ import type { defs } from "../FormHost";
 /**
  * The component for the "Check Group" Form Element.
  */
-declare const CheckGroup: React.ForwardRefExoticComponent<FormElementProps<defs.ItemsRef | undefined> & React.RefAttributes<HTMLDivElement>>;
+declare const CheckGroup: React.ForwardRefExoticComponent<FormElementProps<defs.ItemsRef | undefined> & React.RefAttributes<HTMLFieldSetElement>>;
 export default CheckGroup;

package/forms/components/FilePicker.d.ts

@@ -9,5 +9,5 @@ export declare const filePickerClasses: {
 /**
  * The component for the "File Picker" Form Element.
  */
-declare const FilePicker: React.ForwardRefExoticComponent<FormElementProps<defs.FilesRef | undefined> & React.RefAttributes<HTMLDivElement>>;
+declare const FilePicker: React.ForwardRefExoticComponent<FormElementProps<defs.FilesRef | undefined> & React.RefAttributes<HTMLFieldSetElement>>;
 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{getDateFnsLocale,getMuiLocaleText}from"../dateUtilities.js";import{getKeyString}from"../keyboard.js";import{compareElementIndex,compareRowNumberAndRowIndex,isMutuallyExclusiveSection,isSingleColumnLayout}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,n]=useState(),[r,i]=useState(),{host:c}=t.props,{form:l}=c;if(useEffect(()=>{let e=!0;const t=c.deriveLocale();return getDateFnsLocale(t).then(t=>{e?n(t):console.warn("Component was unmounted while loading the locale.")}),getMuiLocaleText(t).then(t=>{e?i(t):console.warn("Component was unmounted while loading the locale.")}),()=>{e=!1}},[]),!o)return null;const s={host:c,type:"header",children:[]},m={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 n=o[e];return void 0===n&&(n=o[e]={host:c,type:"row",children:[]}),n}function y(e){if(void 0===e)return m;if("header"===e)return s;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 g(e){return e!==FormElementTypes.SECTION}function E(e){return!0!==e.hoisted&&(!1!==e.visible&&g(e.type))}function F(e){const t=l.elements[e];return null==t||!g(t.type)&&(!0!==t.hoisted&&!1!==t.visible)}function x(e){return e===s||e===m||e===d?`${e.type}-section`:e.name}const C=Object.entries(l.elements).sort(isSingleColumnLayout(l.elements)?compareElementIndex:compareRowNumberAndRowIndex);for(const e of C){const[t,o]=e;if(E(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(s.children.length>0&&w.push(React.createElement(FormComponent,{key:"header",...s})),f.children.length>0)w.push(React.createElement(FormComponent,{key:"main",...f}));else{let e,t;T(m);let o=0;const n=()=>{if(e){switch(t){case"accordion-section":v(e,++o,"accordionGroup");break;case"tab-section":v(e,++o,"tabGroup")}e=void 0,t=void 0}};for(const o of p){const r=o.name,i=l.elements[r],c=i.format;t&&c!==t&&n(),F(r)&&(isMutuallyExclusiveSection(i)?e?e.push(o):(e=[o],t=c):T(o))}n(),a.children.length>0&&w.push(React.createElement(FormComponent,{key:"main",...a}))}function b(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 n of t){const t=o[n];if(t.children.length>1){const o=`row-${n}`;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===m?"body":`$${e.name}`;return React.createElement(FormComponent,{key:t,...e})}}function T(e){const t=b(e);t&&a.children.push(t)}function v(e,t,o){const n=[];for(const t of e){const e=b(t);e&&n.push(e)}const r=`${o}${t}`,i={children:n,host:c,name:r,type:o};a.children.push(React.createElement(FormComponent,{key:r,...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:{...r,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;
+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{getDateFnsLocale,getMuiLocaleText}from"../dateUtilities.js";import{getKeyString}from"../keyboard.js";import{compareElementIndex,compareRowNumberAndRowIndex,isMutuallyExclusiveSection,isSingleColumnLayout}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","> legend":{float:"left"},[`> .${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,n]=useState(),[r,i]=useState(),{host:l}=t.props,{form:c}=l;if(useEffect(()=>{let e=!0;const t=l.deriveLocale();return getDateFnsLocale(t).then(t=>{e?n(t):console.warn("Component was unmounted while loading the locale.")}),getMuiLocaleText(t).then(t=>{e?i(t):console.warn("Component was unmounted while loading the locale.")}),()=>{e=!1}},[]),!o)return null;const s={host:l,type:"header",children:[]},m={host:l,type:"body",children:[]},a={host:l,type:"main",children:[]},d={host:l,type:"footer",children:[]},f={host:l,type:"body",children:[]},u={},p=[];function h(e,t){let o=u[t];o||(o=u[t]=[]);let n=o[e];return void 0===n&&(n=o[e]={host:l,type:"row",children:[]}),n}function y(e){if(void 0===e)return m;if("header"===e)return s;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:l,name:t,type:"section",children:[]},p.push(o)),o}function g(e){return e!==FormElementTypes.SECTION}function E(e){return!0!==e.hoisted&&(!1!==e.visible&&g(e.type))}function F(e){const t=c.elements[e];return null==t||!g(t.type)&&(!0!==t.hoisted&&!1!==t.visible)}function x(e){return e===s||e===m||e===d?`${e.type}-section`:e.name}const C=Object.entries(c.elements).sort(isSingleColumnLayout(c.elements)?compareElementIndex:compareRowNumberAndRowIndex);for(const e of C){const[t,o]=e;if(E(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:l,type:"element",name:t,children:[]}))}else f.children.push(React.createElement(FormElementComponent,{key:t,host:l,type:"element",name:t,children:[]}))}const w=[];if(s.children.length>0&&w.push(React.createElement(FormComponent,{key:"header",...s})),f.children.length>0)w.push(React.createElement(FormComponent,{key:"main",...f}));else{let e,t;T(m);let o=0;const n=()=>{if(e){switch(t){case"accordion-section":v(e,++o,"accordionGroup");break;case"tab-section":v(e,++o,"tabGroup")}e=void 0,t=void 0}};for(const o of p){const r=o.name,i=c.elements[r],l=i.format;t&&l!==t&&n(),F(r)&&(isMutuallyExclusiveSection(i)?e?e.push(o):(e=[o],t=l):T(o))}n(),a.children.length>0&&w.push(React.createElement(FormComponent,{key:"main",...a}))}function b(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 n of t){const t=o[n];if(t.children.length>1){const o=`row-${n}`;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===m?"body":`$${e.name}`;return React.createElement(FormComponent,{key:t,...e})}}function T(e){const t=b(e);t&&a.children.push(t)}function v(e,t,o){const n=[];for(const t of e){const e=b(t);e&&n.push(e)}const r=`${o}${t}`,i={children:n,host:l,name:r,type:o};a.children.push(React.createElement(FormComponent,{key:r,...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||l.post("clicked"))},ref:function(e){l.renderFocus(e)}},React.createElement(LocalizationProvider,{dateAdapter:AdapterDateFns,adapterLocale:o,localeText:{...r,start:l.renderText("@date-range-picker-start-text"),end:l.renderText("@date-range-picker-end-text"),cancelButtonLabel:l.renderText("@common-cancel"),clearButtonLabel:l.renderText("@common-clear"),okButtonLabel:l.renderText("@common-ok"),todayButtonLabel:l.renderText("@common-today")}},w))};export default Form;

package/forms/components/FormElement.d.ts

@@ -33,5 +33,5 @@ interface FormElementProps {
      */
     name: string | undefined;
 }
-declare const _default: React.ForwardRefExoticComponent<FormElementProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.ForwardRefExoticComponent<FormElementProps & React.RefAttributes<HTMLDivElement | HTMLFieldSetElement>>;
 export default _default;

package/forms/components/GeometryPicker.d.ts

@@ -4,5 +4,5 @@ import type * as defs from "../FormDefinition";
 /**
  * The component for the "Geometry Picker" Form Element.
  */
-declare const GeometryPicker: React.ForwardRefExoticComponent<FormElementProps<defs.GeometryRef | undefined> & React.RefAttributes<HTMLDivElement>>;
+declare const GeometryPicker: React.ForwardRefExoticComponent<FormElementProps<defs.GeometryRef | undefined> & React.RefAttributes<HTMLFieldSetElement>>;
 export default GeometryPicker;

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

package/forms/components/ItemPicker.d.ts

@@ -11,5 +11,5 @@ export declare const itemPickerClasses: {
 };
 declare const ItemPicker: React.ForwardRefExoticComponent<FormElementProps<defs.ItemsRef | undefined> & {
     spacing?: number;
-} & React.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLFieldSetElement>>;
 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{forwardRef,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=forwardRef(({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},k)=>{const g=useContext(HostContext);void 0===u&&(u=1);const I=e=>()=>{const t=b[e].checked;if("single"===c){if(!t)for(const t in b)y(t,t===e)}else y(e,!t);v(!0),g.renderState(s,"item-picker",x)},[R,h]=useState(""),b=o||{};let x=p;const C=useFocusCallback(r,s,g),v=e=>{const t=[];for(const e in b){const i=b[e];i.checked&&t.push(i)}let i;t.length>0&&(i={refValueType:"items",items:t}),areValuesEqual(f,i)||m(i,e)};useEffect(()=>{B(k.current)},[k]),useEffect(()=>{null==x&&(x={items:[],keyToIndex:{}});const e={};for(const t in o){const i=E(t,!1);i&&(e[t]=i)}x.items.length=0,x.keyToIndex={};for(const t in e)x.keyToIndex[t]=x.items.length,x.items.push(e[t]);p!==x&&l("state",x),v(!1)});const E=(e,t=!0)=>{let i=x.keyToIndex[e];if(null==i||null===i){if(!t)return;x.keyToIndex[e]=x.items.length,x.items.push({}),i=x.keyToIndex[e]}return x.items[i]},y=(e,t)=>{b[e].checked=t;const i=E(e);i&&(i.checked=t)},T=e=>t=>{if(C(t),null!==t){const t=!0===b[e].checked;E(e).checked=t}},P=e=>{if(e){if(isGeometryRef(e))return e.geometry;if(isDataRef(e)&&e.data)return e.data.geometry}},L=[];let F;switch(c){case"single":F="radio";break;case"multiple":F="checkbox"}const S={},$={};if(x)for(const e in b){const t=b[e];if(t.checked&&(S[e]=t),E(e).content=P(t.value),!1!==t.visible){$[e]=t;const i=r&&!1!==t.enabled,o=i&&!!F,a=g.renderText(t.tooltip),n=clsx(itemPickerClasses.item,t.styleName?makeSafeClassName(t.styleName):void 0),c=React.createElement(Markdown,{text:t.label});L.push(React.createElement(ListItem,{className:n,disablePadding:!0,key:e},React.createElement(ListItemButton,{className:itemPickerClasses.button,disabled:!i,onClick:o?I(e):void 0,tabIndex:i?void 0:-1,title:a,"data-id":e,onBlur:i?e=>{delete E(e.currentTarget.dataset.id).focused,g.renderState(s,"item-picker",x)}:void 0,onFocus:i?e=>{E(e.currentTarget.dataset.id).focused=!0,g.renderState(s,"item-picker",x)}:void 0,onMouseOver:i?e=>{E(e.currentTarget.dataset.id).pending=!0,g.renderState(s,"item-picker",x)}:void 0,onMouseOut:i?e=>{delete E(e.currentTarget.dataset.id).pending,g.renderState(s,"item-picker",x)}:void 0},"checkbox"===F&&React.createElement(ListItemIcon,null,React.createElement(Checkbox,{edge:"start",checked:!0===b[e]?.checked,disabled:!i,disableRipple:!0,slotProps:{input:{ref:T(e)}},tabIndex:-1,value:e})),"radio"===F&&React.createElement(ListItemIcon,null,React.createElement(Radio,{edge:"start",checked:!0===b[e]?.checked,disabled:!i,disableRipple:!0,name:s,slotProps:{input:{ref:T(e)}},tabIndex:-1,value:e})),React.createElement(ListItemText,null,c))))}}const N=g.renderText(n),w=useMemo(()=>e=>{for(const t in b){const i=b[t];if(e){const t=g.renderText(i.label).toLowerCase();i.visible=t.indexOf(e)>=0}else i.visible=!0}t.forceUpdate()},[b]),M=useMemo(()=>debounce(w),[b]),j=()=>{h(""),w("")},B=e=>{null===e?g.renderState(s,"item-picker"):g.renderState(s,"item-picker",x)},O="multiple"===c&&L.length>0,X=clsx(itemPickerClasses.items,{[itemPickerClasses.horizontal]:a===Orientation.HORIZONTAL});let z,A=0,G=0,q=0,U=0;for(const e in b){const t=$[e];t?(q++,t.checked&&A++):(U++,b[e].checked&&G++)}0===A?z="none":A===q&&(z="all");const V=R?React.createElement(InputAdornment,{position:"end"},React.createElement(IconButton,{disabled:!r,onClick:j,title:g.renderText("@common-clear")},React.createElement(Close,{className:itemPickerClasses.clearIcon}))):null,W=d?`${makeUniqueId(s)}-filter`:void 0;let D,H=g.renderText("@item-picker-select");return O&&U>0&&(H=g.renderText("@item-picker-select-visible"),G>0&&(D=1===G?g.renderText("@item-picker-hidden-selected-item"):`${G} ${g.renderText("@item-picker-hidden-selected-items")}`)),React.createElement(StyledFormElement,{className:e,component:"fieldset",element:i,inputId:W,name:s,ref:k},React.createElement(Stack,{spacing:u},d&&React.createElement(Input,{disabled:!r,endAdornment:V,error:!1,fullWidth:!0,id:W,inputRef:C,onChange:e=>{const t=e.target.value;h(t),M(t.toLowerCase())},onKeyDown:e=>{"escape"===getKeyString(e)&&j()},placeholder:N,type:"text",value:R}),O&&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"===z,control:React.createElement(Radio,{size:"small"}),disabled:!r,inputRef:C,onClick:()=>{for(const e in $)y(e,!0);v(!0)},label:g.renderText("@common-all")}),React.createElement(FormControlLabel,{value:"none",checked:"none"===z,control:React.createElement(Radio,{size:"small"}),disabled:!r,onClick:()=>{for(const e in $)y(e,!1);v(!0)},label:g.renderText("@common-none")})),D&&React.createElement(Typography,{variant:"subtitle2"},D)),React.createElement(List,{className:X,dense:!0},L)))});export default ItemPicker;
+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{forwardRef,useContext,useEffect,useImperativeHandle,useMemo,useRef,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=forwardRef(({className:e,component:t,element:r,enabled:i,items:o,name:a,orientation:s,prompt:n,selectionMode:c,setProperty:l,setValue:m,showFilter:d,spacing:u,state:p,value:f},k)=>{const g=useRef(null),I=useContext(HostContext);void 0===u&&(u=1),useImperativeHandle(k,()=>(O(),g.current)),useEffect(()=>()=>{O()},[g.current]);const R=e=>()=>{const t=x[e].checked;if("single"===c){if(!t)for(const t in x)T(t,t===e)}else T(e,!t);E(!0),I.renderState(a,"item-picker",C)},[h,b]=useState(""),x=o||{};let C=p;const v=useFocusCallback(i,a,I),E=e=>{const t=[];for(const e in x){const r=x[e];r.checked&&t.push(r)}let r;t.length>0&&(r={refValueType:"items",items:t}),areValuesEqual(f,r)||m(r,e)};useEffect(()=>{null==C&&(C={items:[],keyToIndex:{}});const e={};for(const t in o){const r=y(t,!1);r&&(e[t]=r)}C.items.length=0,C.keyToIndex={};for(const t in e)C.keyToIndex[t]=C.items.length,C.items.push(e[t]);p!==C&&l("state",C),E(!1)});const y=(e,t=!0)=>{let r=C.keyToIndex[e];if(null==r||null===r){if(!t)return;C.keyToIndex[e]=C.items.length,C.items.push({}),r=C.keyToIndex[e]}return C.items[r]},T=(e,t)=>{x[e].checked=t;const r=y(e);r&&(r.checked=t)},P=e=>t=>{if(v(t),null!==t){const t=!0===x[e].checked;y(e).checked=t}},L=e=>{if(e){if(isGeometryRef(e))return e.geometry;if(isDataRef(e)&&e.data)return e.data.geometry}},F=[];let S;switch(c){case"single":S="radio";break;case"multiple":S="checkbox"}const $={},N={};if(C)for(const e in x){const t=x[e];if(t.checked&&($[e]=t),y(e).content=L(t.value),!1!==t.visible){N[e]=t;const r=i&&!1!==t.enabled,o=r&&!!S,s=I.renderText(t.tooltip),n=clsx(itemPickerClasses.item,t.styleName?makeSafeClassName(t.styleName):void 0),c=React.createElement(Markdown,{text:t.label});F.push(React.createElement(ListItem,{className:n,disablePadding:!0,key:e},React.createElement(ListItemButton,{className:itemPickerClasses.button,disabled:!r,onClick:o?R(e):void 0,tabIndex:r?void 0:-1,title:s,"data-id":e,onBlur:r?e=>{delete y(e.currentTarget.dataset.id).focused,I.renderState(a,"item-picker",C)}:void 0,onFocus:r?e=>{y(e.currentTarget.dataset.id).focused=!0,I.renderState(a,"item-picker",C)}:void 0,onMouseOver:r?e=>{y(e.currentTarget.dataset.id).pending=!0,I.renderState(a,"item-picker",C)}:void 0,onMouseOut:r?e=>{delete y(e.currentTarget.dataset.id).pending,I.renderState(a,"item-picker",C)}:void 0},"checkbox"===S&&React.createElement(ListItemIcon,null,React.createElement(Checkbox,{edge:"start",checked:!0===x[e]?.checked,disabled:!r,disableRipple:!0,slotProps:{input:{ref:P(e)}},tabIndex:-1,value:e})),"radio"===S&&React.createElement(ListItemIcon,null,React.createElement(Radio,{edge:"start",checked:!0===x[e]?.checked,disabled:!r,disableRipple:!0,name:a,slotProps:{input:{ref:P(e)}},tabIndex:-1,value:e})),React.createElement(ListItemText,null,c))))}}const w=I.renderText(n),M=useMemo(()=>e=>{for(const t in x){const r=x[t];if(e){const t=I.renderText(r.label).toLowerCase();r.visible=t.indexOf(e)>=0}else r.visible=!0}t.forceUpdate()},[x]),j=useMemo(()=>debounce(M),[x]),B=()=>{b(""),M("")},O=()=>{null===g.current?I.renderState(a,"item-picker"):I.renderState(a,"item-picker",C)},X="multiple"===c&&F.length>0,z=clsx(itemPickerClasses.items,{[itemPickerClasses.horizontal]:s===Orientation.HORIZONTAL});let A,G=0,H=0,q=0,U=0;for(const e in x){const t=N[e];t?(q++,t.checked&&G++):(U++,x[e].checked&&H++)}0===G?A="none":G===q&&(A="all");const V=I.renderText("@common-clear"),W=h?React.createElement(InputAdornment,{position:"end"},React.createElement(IconButton,{"aria-label":V,disabled:!i,onClick:B,title:V},React.createElement(Close,{className:itemPickerClasses.clearIcon}))):null,D=d?`${makeUniqueId(a)}-filter`:void 0;let K,Z=I.renderText("@item-picker-select");return X&&U>0&&(Z=I.renderText("@item-picker-select-visible"),H>0&&(K=1===H?I.renderText("@item-picker-hidden-selected-item"):`${H} ${I.renderText("@item-picker-hidden-selected-items")}`)),React.createElement(StyledFormElement,{className:e,component:"fieldset",element:r,inputId:D,name:a,ref:g},React.createElement(Stack,{spacing:u},d&&React.createElement(Input,{disabled:!i,endAdornment:W,error:!1,fullWidth:!0,id:D,inputRef:v,onChange:e=>{const t=e.target.value;b(t),j(t.toLowerCase())},onKeyDown:e=>{"escape"===getKeyString(e)&&B()},placeholder:w,type:"text",value:h}),X&&React.createElement(FormControl,{className:itemPickerClasses.allNone},React.createElement(FormLabel,null,Z),React.createElement(RadioGroup,{color:"primary",row:!0},React.createElement(FormControlLabel,{value:"all",checked:"all"===A,control:React.createElement(Radio,{size:"small"}),disabled:!i,inputRef:v,onClick:()=>{for(const e in N)T(e,!0);E(!0)},label:I.renderText("@common-all")}),React.createElement(FormControlLabel,{value:"none",checked:"none"===A,control:React.createElement(Radio,{size:"small"}),disabled:!i,onClick:()=>{for(const e in N)T(e,!1);E(!0)},label:I.renderText("@common-none")})),K&&React.createElement(Typography,{variant:"subtitle2"},K)),React.createElement(List,{className:z,dense:!0},F)))});export default ItemPicker;

package/forms/components/NumberRangeSlider.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import{formControlClasses}from"@vertigis/react-ui/FormControl";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import{numberFormatConfiguration}from"../elements/NumberRangeSlider.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT,NumberDisplayFormat}from"../numberFormatter.js";import{getCurrencySymbolInfo,getPercentSymbolInfo,preciseRound}from"../numberUtilities.js";import{getMarks,getNumberConstraints,getNumberSliderValues,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle}from"../utils.js";import FormElement from"./FormElement.js";import FormLabelNumberField from"./FormLabelNumberField.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberRangeSlider";export const numberRangeSliderClasses={container:`${PREFIX}-container`,inputContainer:`${PREFIX}-input-container`,toLabel:`${PREFIX}-to-label`};const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberRangeSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${numberRangeSliderClasses.inputContainer}`]:{marginTop:e(1),[`.${formControlClasses.root}`]:{flexGrow:1},[`.${numberRangeSliderClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}}}})),NumberRangeSlider=forwardRef(({className:e,element:t,enabled:r,format:o,manualEntry:a,showMinMaxLabels:n,showTickMarks:m,name:i,raiseEvent:s,title:l,tooltip:u,value:c,setValue:d},p)=>{const b=useContext(HostContext),f=b.deriveLocale(),{currency:C,customDisplayFormat:F,decimals:g,displayFormat:N,endAdornment:y,isCustom:R,isFixedPoint:S,isPercent:x,numberConstraints:E,startAdornment:D}=useMemo(()=>{const e=o,t=e?.currency||DEFAULT_CURRENCY,r=e?.displayFormat,a=r===NumberDisplayFormat.CUSTOM,n=r===NumberDisplayFormat.FIXED_POINT,m=r===NumberDisplayFormat.PERCENT,i=getNumberConstraints(e,numberFormatConfiguration),s=e?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,l=r===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(e?.precision,i.step,numberFormatConfiguration);let u=null,c=null;if(r===NumberDisplayFormat.CURRENCY||r===NumberDisplayFormat.ACCOUNTING){const e=getCurrencySymbolInfo(f,t);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?u=t:c=t}}else if(m){const e=getPercentSymbolInfo(f);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?u=t:c=t}}return{currency:t,customDisplayFormat:s,decimals:l,displayFormat:r,endAdornment:c,isCustom:a,isFixedPoint:n,isPercent:m,numberConstraints:i,startAdornment:u}},[o]),{step:A}=E,v=E.maximum,T=E.minimum,[I,P]=useState(!1),[L,M]=useState(!1),[U,h]=useState([T,v]),k=useMemo(()=>N===NumberDisplayFormat.CUSTOM?[countDecimalsInCustomFormat(F,U[0]),countDecimalsInCustomFormat(F,U[1])]:[-1,-1],[U]),$=useRef(!0),[j,w]=useMemo(()=>{const e=makeUniqueId(i);return[e,`${e}-slider-input`]},[i]),O=!1!==n,_=!!m,X=!1!==a;let B=x?g-2:g;B=Math.max(0,B);const V={currency:C,customDisplayFormat:F,format:N,fractionalDigits:B,locale:f},K=()=>{const e=getNumberSliderValues(U,E);U[0]===e[0]&&U[1]===e[1]||h(e),Y(c,e)||d(e)};useEffect(()=>{$.current?$.current=!1:L?q(U):I||K()},[I,L,U]),useEffect(()=>{const e=getNumberSliderValues(c,E);Y(c,e)||d(e,!1),Y(U,e)||h(e)},[c]);const Y=(e,t)=>void 0===e&&void 0===t[0]&&void 0===t[1]||(void 0===e&&null===t[0]&&null===t[1]||!(!Array.isArray(e)||2!==e.length||e[0]!==t[0]||e[1]!==t[1])),q=useMemo(()=>throttle(e=>{s("dragged",e)}),[]),z=useFocusCallback(r,i,b),G=b.renderText(u),H=!r&&!L,J=X?{max:v,min:T,onBlur:()=>{P(!1)},onFocus:()=>{P(!0)},step:A,title:G}:void 0,Q=R?k:[g,g],W=e=>{"enter"===getKeyString(e)&&K()};return React.createElement(StyledFormElement,{className:e,element:t,inputId:`${w}-0`,name:i,ref:p},React.createElement(Box,{className:numberRangeSliderClasses.container},React.createElement(Slider,{disabled:H,getAriaLabel:()=>b.renderText(l),getAriaValueText:e=>b.formatNumber(e,V),marks:getMarks(v,T,A,V,O,_),max:v,min:T,onChange:(e,t)=>{M(!0),Array.isArray(t)&&h(t)},onChangeCommitted:()=>{M(!1)},slotProps:{input:()=>({ref:e=>{null===e||e.id||(e.id=`${w}-${e.getAttribute("data-index")}`),z(e)}})},step:A,title:G,value:U,valueLabelDisplay:"on",valueLabelFormat:e=>b.formatNumber(e,V)}),!1!==X&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(R)return customFormatNumber(e,F,V.locale);x&&(e*=100);const t={format:S?V.format:void 0,fractionalDigits:V.fractionalDigits,locale:V.locale};return b.formatNumber(e,t)},parseNumber:e=>{if(R)return parseCustomFormattedNumber(e,F,V.locale);let t=b.coerceNumber(e,f);return x&&(t=preciseRound(t/100,g)),t}}},React.createElement(Stack,{direction:"row",className:numberRangeSliderClasses.inputContainer},React.createElement(FormLabelNumberField,{disabled:!r,id:`${j}-startInput`,inputProps:J,endAdornment:y,label:b.renderText("@common-start"),max:v,maxDecimalPlaces:Q[0],min:T,onChange:e=>{void 0===e&&(e=T),h([e,U[1]])},onKeyDown:W,startAdornment:D,value:U[0]}),React.createElement(Box,{className:numberRangeSliderClasses.toLabel}," ",b.renderText("@common-to")," "),React.createElement(FormLabelNumberField,{disabled:!r,endAdornment:y,id:`${j}-endInput`,inputProps:J,label:b.renderText("@common-end"),max:v,maxDecimalPlaces:Q[1],min:T,onChange:e=>{void 0===e&&(e=v),h([U[0],e])},onKeyDown:W,startAdornment:D,value:U[1]})))))});export default NumberRangeSlider;
+import Box from"@vertigis/react-ui/Box";import{formControlClasses}from"@vertigis/react-ui/FormControl";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import Stack from"@vertigis/react-ui/Stack";import{styled}from"@vertigis/react-ui/styles";import{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import{numberFormatConfiguration}from"../elements/NumberRangeSlider.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT,NumberDisplayFormat}from"../numberFormatter.js";import{getCurrencySymbolInfo,getPercentSymbolInfo,preciseRound}from"../numberUtilities.js";import{getMarks,getNumberConstraints,getNumberSliderValues,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle}from"../utils.js";import FormElement from"./FormElement.js";import FormLabelNumberField from"./FormLabelNumberField.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberRangeSlider";export const numberRangeSliderClasses={container:`${PREFIX}-container`,inputContainer:`${PREFIX}-input-container`,toLabel:`${PREFIX}-to-label`};const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberRangeSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${numberRangeSliderClasses.inputContainer}`]:{marginTop:e(1),[`.${formControlClasses.root}`]:{flexGrow:1},[`.${numberRangeSliderClasses.toLabel}`]:{marginLeft:e(2),marginRight:e(2),paddingTop:e(2),alignSelf:"center"}}}})),NumberRangeSlider=forwardRef(({className:e,element:t,enabled:r,format:o,manualEntry:a,showMinMaxLabels:n,showTickMarks:m,name:i,raiseEvent:s,tooltip:l,value:u,setValue:c},d)=>{const p=useContext(HostContext),b=p.deriveLocale(),{currency:f,customDisplayFormat:C,decimals:F,displayFormat:g,endAdornment:N,isCustom:y,isFixedPoint:R,isPercent:S,numberConstraints:x,startAdornment:E}=useMemo(()=>{const e=o,t=e?.currency||DEFAULT_CURRENCY,r=e?.displayFormat,a=r===NumberDisplayFormat.CUSTOM,n=r===NumberDisplayFormat.FIXED_POINT,m=r===NumberDisplayFormat.PERCENT,i=getNumberConstraints(e,numberFormatConfiguration),s=e?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,l=r===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(e?.precision,i.step,numberFormatConfiguration);let u=null,c=null;if(r===NumberDisplayFormat.CURRENCY||r===NumberDisplayFormat.ACCOUNTING){const e=getCurrencySymbolInfo(b,t);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?u=t:c=t}}else if(m){const e=getPercentSymbolInfo(b);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?u=t:c=t}}return{currency:t,customDisplayFormat:s,decimals:l,displayFormat:r,endAdornment:c,isCustom:a,isFixedPoint:n,isPercent:m,numberConstraints:i,startAdornment:u}},[o]),{step:D}=x,A=x.maximum,v=x.minimum,[I,T]=useState(!1),[P,L]=useState(!1),[M,U]=useState([v,A]),h=useMemo(()=>g===NumberDisplayFormat.CUSTOM?[countDecimalsInCustomFormat(C,M[0]),countDecimalsInCustomFormat(C,M[1])]:[-1,-1],[M]),k=useRef(!0),[$,j]=useMemo(()=>{const e=makeUniqueId(i);return[e,`${e}-slider-input`]},[i]),w=!1!==n,O=!!m,_=!1!==a;let X=S?F-2:F;X=Math.max(0,X);const B={currency:f,customDisplayFormat:C,format:g,fractionalDigits:X,locale:b},V=()=>{const e=getNumberSliderValues(M,x);M[0]===e[0]&&M[1]===e[1]||U(e),K(u,e)||c(e)};useEffect(()=>{k.current?k.current=!1:P?Y(M):I||V()},[I,P,M]),useEffect(()=>{const e=getNumberSliderValues(u,x);K(u,e)||c(e,!1),K(M,e)||U(e)},[u]);const K=(e,t)=>void 0===e&&void 0===t[0]&&void 0===t[1]||(void 0===e&&null===t[0]&&null===t[1]||!(!Array.isArray(e)||2!==e.length||e[0]!==t[0]||e[1]!==t[1])),Y=useMemo(()=>throttle(e=>{s("dragged",e)}),[]),q=useFocusCallback(r,i,p),z=p.renderText(l),G=!r&&!P,H=_?{max:A,min:v,onBlur:()=>{T(!1)},onFocus:()=>{T(!0)},step:D,title:z}:void 0,J=y?h:[F,F],Q=e=>{"enter"===getKeyString(e)&&V()},W=p.renderText("@common-start"),Z=p.renderText("@common-end");return React.createElement(StyledFormElement,{className:e,element:t,inputId:`${j}-0`,name:i,ref:d},React.createElement(Box,{className:numberRangeSliderClasses.container},React.createElement(Slider,{disabled:G,getAriaLabel:e=>0===e?W:Z,getAriaValueText:e=>p.formatNumber(e,B),marks:getMarks(A,v,D,B,w,O),max:A,min:v,onChange:(e,t)=>{L(!0),Array.isArray(t)&&U(t)},onChangeCommitted:()=>{L(!1)},slotProps:{input:()=>({ref:e=>{null===e||e.id||(e.id=`${j}-${e.getAttribute("data-index")}`),q(e)}})},step:D,title:z,value:M,valueLabelDisplay:"on",valueLabelFormat:e=>p.formatNumber(e,B)}),!1!==_&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(y)return customFormatNumber(e,C,B.locale);S&&(e*=100);const t={format:R?B.format:void 0,fractionalDigits:B.fractionalDigits,locale:B.locale};return p.formatNumber(e,t)},parseNumber:e=>{if(y)return parseCustomFormattedNumber(e,C,B.locale);let t=p.coerceNumber(e,b);return S&&(t=preciseRound(t/100,F)),t}}},React.createElement(Stack,{direction:"row",className:numberRangeSliderClasses.inputContainer},React.createElement(FormLabelNumberField,{disabled:!r,id:`${$}-startInput`,inputProps:H,endAdornment:N,label:W,max:A,maxDecimalPlaces:J[0],min:v,onChange:e=>{void 0===e&&(e=v),U([e,M[1]])},onKeyDown:Q,startAdornment:E,value:M[0]}),React.createElement(Box,{className:numberRangeSliderClasses.toLabel}," ",p.renderText("@common-to")," "),React.createElement(FormLabelNumberField,{disabled:!r,endAdornment:N,id:`${$}-endInput`,inputProps:H,label:Z,max:A,maxDecimalPlaces:J[1],min:v,onChange:e=>{void 0===e&&(e=A),U([M[0],e])},onKeyDown:Q,startAdornment:E,value:M[1]})))))});export default NumberRangeSlider;

package/forms/components/NumberSlider.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{inputBaseClasses}from"@vertigis/react-ui/InputBase";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import{styled}from"@vertigis/react-ui/styles";import{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT,NumberDisplayFormat}from"../numberFormatter.js";import{areValuesEqual,getCurrencySymbolInfo,getMarks,getNumberConstraints,getNumberSliderValues,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberSlider";export const numberSliderClasses={container:`${PREFIX}-container`};const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${inputBaseClasses.root}`]:{marginTop:e(1)}}})),NumberSlider=forwardRef(({className:e,element:t,enabled:r,error:o,format:a,manualEntry:m,showMinMaxLabels:s,showTickMarks:n,name:i,raiseEvent:u,title:l,tooltip:c,value:p,setValue:d},f)=>{const b=useContext(HostContext),F=b.deriveLocale(),{currency:y,customDisplayFormat:C,decimals:N,displayFormat:g,endAdornment:E,isCustom:S,isFixedPoint:x,isPercent:D,numberConstraints:R,startAdornment:I}=useMemo(()=>{const e=a,t=e?.currency||DEFAULT_CURRENCY,r=e?.displayFormat,o=r===NumberDisplayFormat.CUSTOM,m=r===NumberDisplayFormat.FIXED_POINT,s=r===NumberDisplayFormat.PERCENT,n=getNumberConstraints(e),i=e?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,u=r===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(e?.precision,n.step);let l=null,c=null;if(r===NumberDisplayFormat.CURRENCY||r===NumberDisplayFormat.ACCOUNTING){const e=getCurrencySymbolInfo(F,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(F);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?l=t:c=t}}return{currency:t,customDisplayFormat:i,decimals:u,displayFormat:r,endAdornment:c,isCustom:o,isFixedPoint:m,isPercent:s,numberConstraints:n,startAdornment:l}},[a]),{step:A}=R,T=R.maximum,v=R.minimum,[M,P]=useState(!1),[U,h]=useState(!1),[k,L]=useState(v),B=useMemo(()=>g===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(C,k):-1,[k]),O=useRef(!0),V=`${makeUniqueId(i)}-input`,j=!1!==s,w=!!n,_=!1!==m;let q=D?N-2:N;q=Math.max(0,q);const $={currency:y,customDisplayFormat:C,format:g,fractionalDigits:q,locale:F},X=e=>({refValueType:"number",format:{currency:y,customDisplayFormat:C,displayFormat:g,lowerBound:v,precision:N,step:A,upperBound:T},display:b.formatNumber(e,$),numeric:e}),z=()=>{const e=getNumberSliderValues(k,R,!0)[0];e!==k&&L(e);const t=X(e);areValuesEqual(p,t)||d(t)};useEffect(()=>{O.current?O.current=!1:U?K(k):M||z()},[M,U,k]),useEffect(()=>{const e=getNumberSliderValues(p,R,!0)[0],t=X(e);areValuesEqual(p,t)||d(t,!1),k!==e&&L(e)},[p]);const K=useMemo(()=>throttle(e=>{u("dragged",X(e))}),[]),Y=useFocusCallback(r,i,b),H=b.renderText(c),G=!r&&!U,J=!r,Q=S?B:N;return React.createElement(StyledFormElement,{className:e,element:t,inputId:V,name:i,ref:f},React.createElement(Box,{className:numberSliderClasses.container},React.createElement(Slider,{disabled:G,getAriaLabel:()=>b.renderText(l),getAriaValueText:e=>b.formatNumber(e,$),marks:getMarks(T,v,A,$,j,w),max:T,min:v,onChange:(e,t)=>{h(!0);const r=Array.isArray(t)?t[0]:t;L(r)},onChangeCommitted:()=>{h(!1)},slotProps:{input:{id:V,ref:Y}},step:A,title:H,value:"number"==typeof k?k:0,valueLabelDisplay:"on",valueLabelFormat:e=>b.formatNumber(e,$)}),!1!==_&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(S)return customFormatNumber(e,C,$.locale);D&&(e*=100);const t={format:x?$.format:void 0,fractionalDigits:$.fractionalDigits,locale:$.locale};return b.formatNumber(e,t)},parseNumber:e=>{if(S)return parseCustomFormattedNumber(e,C,$.locale);let t=b.coerceNumber(e,F);return D&&(t=preciseRound(t/100,N)),t}}},React.createElement(NumberInput,{correctOnBlur:!0,disabled:J,endAdornment:E,error:!!o,inputProps:{step:A,title:H},max:T,maxDecimalPlaces:Q,min:v,onBlur:()=>{P(!1)},onChange:e=>{L(void 0===e?v:e)},onFocus:()=>{P(!0)},onKeyDown:e=>{"enter"===getKeyString(e)&&z()},size:"small",startAdornment:I,value:k}))))});export default NumberSlider;
+import Box from"@vertigis/react-ui/Box";import InputAdornment from"@vertigis/react-ui/InputAdornment";import{inputBaseClasses}from"@vertigis/react-ui/InputBase";import{NumberFormatContext}from"@vertigis/react-ui/NumberFormatContext";import NumberInput from"@vertigis/react-ui/NumberInput";import Slider,{sliderClasses}from"@vertigis/react-ui/Slider";import{styled}from"@vertigis/react-ui/styles";import{forwardRef,useContext,useEffect,useMemo,useRef,useState}from"react";import*as React from"react";import{countDecimalsInCustomFormat,customFormatNumber,parseCustomFormattedNumber}from"../customNumberFormat.js";import HostContext from"../hostContext.js";import{getKeyString}from"../keyboard.js";import{DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT,NumberDisplayFormat}from"../numberFormatter.js";import{areValuesEqual,getCurrencySymbolInfo,getMarks,getNumberConstraints,getNumberSliderValues,getPercentSymbolInfo,preciseRound,sanitizePrecision}from"../numberUtilities.js";import{makeUniqueId,throttle}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="NumberSlider";export const numberSliderClasses={container:`${PREFIX}-container`};const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${numberSliderClasses.container}`]:{display:"inline-flex",flexDirection:"column",paddingLeft:e(2),paddingRight:e(2),paddingTop:e(4),width:"100%",[`.${sliderClasses.markLabel}`]:{transform:"translateX(-100%)",'&[data-index="0"]':{transform:"none"}},[`.${inputBaseClasses.root}`]:{marginTop:e(1)}}})),NumberSlider=forwardRef(({className:e,element:t,enabled:r,error:o,format:a,manualEntry:m,showMinMaxLabels:s,showTickMarks:n,name:i,raiseEvent:u,tooltip:l,value:c,setValue:p},d)=>{const f=useContext(HostContext),b=f.deriveLocale(),{currency:F,customDisplayFormat:y,decimals:C,displayFormat:N,endAdornment:g,isCustom:E,isFixedPoint:S,isPercent:x,numberConstraints:D,startAdornment:R}=useMemo(()=>{const e=a,t=e?.currency||DEFAULT_CURRENCY,r=e?.displayFormat,o=r===NumberDisplayFormat.CUSTOM,m=r===NumberDisplayFormat.FIXED_POINT,s=r===NumberDisplayFormat.PERCENT,n=getNumberConstraints(e),i=e?.customDisplayFormat||DEFAULT_CUSTOM_FORMAT,u=r===NumberDisplayFormat.CUSTOM?-1:sanitizePrecision(e?.precision,n.step);let l=null,c=null;if(r===NumberDisplayFormat.CURRENCY||r===NumberDisplayFormat.ACCOUNTING){const e=getCurrencySymbolInfo(b,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(b);if(e){const t=React.createElement(InputAdornment,{position:e.position},e.symbol);"start"===e.position?l=t:c=t}}return{currency:t,customDisplayFormat:i,decimals:u,displayFormat:r,endAdornment:c,isCustom:o,isFixedPoint:m,isPercent:s,numberConstraints:n,startAdornment:l}},[a]),{step:I}=D,A=D.maximum,T=D.minimum,[v,M]=useState(!1),[P,U]=useState(!1),[h,k]=useState(T),L=useMemo(()=>N===NumberDisplayFormat.CUSTOM?countDecimalsInCustomFormat(y,h):-1,[h]),B=useRef(!0),O=`${makeUniqueId(i)}-input`,V=!1!==s,j=!!n,w=!1!==m;let _=x?C-2:C;_=Math.max(0,_);const q={currency:F,customDisplayFormat:y,format:N,fractionalDigits:_,locale:b},$=e=>({refValueType:"number",format:{currency:F,customDisplayFormat:y,displayFormat:N,lowerBound:T,precision:C,step:I,upperBound:A},display:f.formatNumber(e,q),numeric:e}),X=()=>{const e=getNumberSliderValues(h,D,!0)[0];e!==h&&k(e);const t=$(e);areValuesEqual(c,t)||p(t)};useEffect(()=>{B.current?B.current=!1:P?z(h):v||X()},[v,P,h]),useEffect(()=>{const e=getNumberSliderValues(c,D,!0)[0],t=$(e);areValuesEqual(c,t)||p(t,!1),h!==e&&k(e)},[c]);const z=useMemo(()=>throttle(e=>{u("dragged",$(e))}),[]),K=useFocusCallback(r,i,f),Y=f.renderText(l),H=!r&&!P,G=!r,J=E?L:C;return React.createElement(StyledFormElement,{className:e,element:t,inputId:O,name:i,ref:d},React.createElement(Box,{className:numberSliderClasses.container},React.createElement(Slider,{disabled:H,getAriaLabel:()=>f.renderText("@common-value"),getAriaValueText:e=>f.formatNumber(e,q),marks:getMarks(A,T,I,q,V,j),max:A,min:T,onChange:(e,t)=>{U(!0);const r=Array.isArray(t)?t[0]:t;k(r)},onChangeCommitted:()=>{U(!1)},slotProps:{input:{id:O,ref:K}},step:I,title:Y,value:"number"==typeof h?h:0,valueLabelDisplay:"on",valueLabelFormat:e=>f.formatNumber(e,q)}),!1!==w&&React.createElement(NumberFormatContext.Provider,{value:{formatNumber:e=>{if(E)return customFormatNumber(e,y,q.locale);x&&(e*=100);const t={format:S?q.format:void 0,fractionalDigits:q.fractionalDigits,locale:q.locale};return f.formatNumber(e,t)},parseNumber:e=>{if(E)return parseCustomFormattedNumber(e,y,q.locale);let t=f.coerceNumber(e,b);return x&&(t=preciseRound(t/100,C)),t}}},React.createElement(NumberInput,{correctOnBlur:!0,disabled:G,endAdornment:g,error:!!o,inputProps:{step:I,title:Y},max:A,maxDecimalPlaces:J,min:T,onBlur:()=>{M(!1)},onChange:e=>{k(void 0===e?T:e)},onFocus:()=>{M(!0)},onKeyDown:e=>{"enter"===getKeyString(e)&&X()},size:"small",startAdornment:R,value:h}))))});export default NumberSlider;

package/forms/components/RadioGroup.d.ts

@@ -4,5 +4,5 @@ import type { defs } from "../FormHost";
 /**
  * The component for the "Radio Group" Form Element.
  */
-declare const RadioGroup: React.ForwardRefExoticComponent<FormElementProps<defs.Value | undefined> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroup: React.ForwardRefExoticComponent<FormElementProps<defs.Value | undefined> & React.RefAttributes<HTMLFieldSetElement>>;
 export default RadioGroup;

package/forms/components/Scanner.js

@@ -1 +1 @@
-import Button from"@vertigis/react-ui/Button";import Input from"@vertigis/react-ui/Input";import Stack from"@vertigis/react-ui/Stack";import{Close as CloseIcon,ScanBarcode,ScanMulti,ScanQr}from"@vertigis/react-ui/icons";import{styled}from"@vertigis/react-ui/styles";import{useState,useEffect,useRef,useContext,forwardRef}from"react";import*as React from"react";import{ScanType}from"../constants.js";import{scannerConfiguration}from"../elements/Scanner.js";import HostContext from"../hostContext.js";import{isScanRef,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Scanner";export const scannerClasses={container:`${PREFIX}-container`,button:`${PREFIX}-button`,inputContainer:`${PREFIX}-inner`};const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${scannerClasses.container}`]:{gap:e(.5),video:{width:"100%"},[`.${scannerClasses.inputContainer}`]:{alignItems:"flex-start",gap:e(.5),[`.${scannerClasses.button}`]:{minWidth:0,padding:e(.5)}}}})),CAMERA_READY_TIMEOUT_MS=1500;var EntryMethod;!function(e){e.Camera="camera",e.Manual="manual"}(EntryMethod||(EntryMethod={}));const convertToScanRef=(e,t,n)=>{const a=typeof e,r="number"===a||"string"===a?e.toString():e?.value?.toString();if(r)return t=t||e?.entryMethod||EntryMethod.Manual,{refValueType:"scan",value:r,scanType:n=n||e?.scanType,entryMethod:t}},Scanner=forwardRef(({autoActivate:e,className:t,element:n,enabled:a,manualEntry:r,name:o,raiseEvent:c,require:s,scanType:i,setProperty:l,setValue:u,size:m,tooltip:d,value:f},p)=>{const E=useContext(HostContext),[C,S]=useState(!0),[y,R]=useState(null),[v,g]=useState(""),[T,w]=useState(!1),[M,h]=useState(scannerConfiguration.rows.default),I=useRef(null),A=`${makeUniqueId(o)}-input`,F="barcode"!==i;useEffect(()=>{let e=scannerConfiguration.rows.default;"number"==typeof m&&(e=Math.max(scannerConfiguration.rows.minimum,m)),h(e)},[m]),useEffect(()=>(w(!0),()=>w(!1)),[]),useEffect(()=>{T&&a&&e&&(l("autoActivate",!1),P())},[T]),useEffect(()=>{y&&(S(!1),setTimeout(()=>{T&&S(!0)},1500))},[y]);const _=useFocusCallback(a,o,E);useEffect(()=>{let e=f;!isScanRef(e)&&e&&(e=convertToScanRef(e),u(e,!1));const t=e?.value||"";v!==t&&g(t)},[f]);const D=E.renderText(d),x=!a,b=x||!r,B=(e,t,n)=>{if(e){if(f?.value===e)return;const a=convertToScanRef(e,t,n);u(a),g(e)}},O=async e=>{const{BarcodeFormat:t}=await import("@zxing/browser");let n;return e===ScanType.QrCode?n=[t.AZTEC,t.DATA_MATRIX,t.MAXICODE,t.PDF_417,t.QR_CODE]:e===ScanType.BarCode&&(n=[t.CODABAR,t.CODE_39,t.CODE_93,t.CODE_128,t.EAN_8,t.EAN_13,t.ITF,t.RSS_14,t.RSS_EXPANDED,t.UPC_A,t.UPC_E,t.UPC_EAN_EXTENSION]),n},P=async()=>{if(y)return R(null),void c("cancel",void 0);const{BrowserCodeReader:e,BrowserMultiFormatReader:t}=await import("@zxing/browser");if(!T)return;const n=await(async e=>{const{DecodeHintType:t}=await import("@zxing/library"),n=await O(e),a=new Map;return a.set(t.POSSIBLE_FORMATS,n),a})(i),a=new t(n);R(a),await(async t=>{try{const n=await e.listVideoInputDevices();if(!n||0==n.length)throw new DOMException("No video input devices detected.");const a=await t.decodeOnceFromVideoDevice(void 0,I.current||void 0),r=(await O(ScanType.QrCode)).indexOf(a.getBarcodeFormat())<0?ScanType.BarCode:ScanType.QrCode;B(a.toString(),EntryMethod.Camera,r),R(null)}catch(e){e instanceof DOMException&&(l("error",e.message),R(null))}})(a)};return React.createElement(StyledFormElement,{className:t,element:n,inputId:A,name:o,ref:p},React.createElement(Stack,{className:scannerClasses.container},React.createElement("video",{hidden:!y,ref:I}),React.createElement(Stack,{className:scannerClasses.inputContainer,direction:"row"},React.createElement(Input,{disabled:b,fullWidth:!0,id:A,inputProps:{onKeyDown:e=>{if(F)e.stopPropagation();else{const t=e.currentTarget;R(null),B(t.value,EntryMethod.Manual)}},title:D},inputRef:_,multiline:F,onBlur:e=>{e.currentTarget.value.length>0&&(R(null),B(e.currentTarget.value,EntryMethod.Manual))},onChange:e=>{g(e.currentTarget.value)},required:s,rows:F?M:void 0,spellCheck:!1,value:v}),React.createElement(Button,{className:scannerClasses.button,color:"primary",disabled:x||!C,onClick:P,ref:_,title:D},y?React.createElement(CloseIcon,null):i===ScanType.BarCode?React.createElement(ScanBarcode,null):i===ScanType.QrCode?React.createElement(ScanQr,null):React.createElement(ScanMulti,null)))))});export default Scanner;
+import Button from"@vertigis/react-ui/Button";import Input from"@vertigis/react-ui/Input";import Stack from"@vertigis/react-ui/Stack";import{Close as CloseIcon,ScanBarcode,ScanMulti,ScanQr}from"@vertigis/react-ui/icons";import{styled}from"@vertigis/react-ui/styles";import{useState,useEffect,useRef,useContext,forwardRef}from"react";import*as React from"react";import{ScanType}from"../constants.js";import{scannerConfiguration}from"../elements/Scanner.js";import HostContext from"../hostContext.js";import{isScanRef,makeUniqueId}from"../utils.js";import FormElement from"./FormElement.js";import{useFocusCallback}from"./common.js";const PREFIX="Scanner";export const scannerClasses={container:`${PREFIX}-container`,button:`${PREFIX}-button`,inputContainer:`${PREFIX}-inner`};const StyledFormElement=styled(FormElement)(({theme:{spacing:e}})=>({[`.${scannerClasses.container}`]:{gap:e(.5),video:{width:"100%"},[`.${scannerClasses.inputContainer}`]:{alignItems:"flex-start",gap:e(.5),[`.${scannerClasses.button}`]:{minWidth:0,padding:e(.5)}}}})),CAMERA_READY_TIMEOUT_MS=1500;var EntryMethod;!function(e){e.Camera="camera",e.Manual="manual"}(EntryMethod||(EntryMethod={}));const convertToScanRef=(e,t,n)=>{const a=typeof e,r="number"===a||"string"===a?e.toString():e?.value?.toString();if(r)return t=t||e?.entryMethod||EntryMethod.Manual,{refValueType:"scan",value:r,scanType:n=n||e?.scanType,entryMethod:t}},Scanner=forwardRef(({autoActivate:e,className:t,element:n,enabled:a,manualEntry:r,name:o,raiseEvent:c,require:s,scanType:i,setProperty:l,setValue:u,size:m,tooltip:d,value:f},p)=>{const E=useContext(HostContext),[C,S]=useState(!0),[y,R]=useState(null),[v,g]=useState(""),[T,w]=useState(!1),[M,h]=useState(scannerConfiguration.rows.default),I=useRef(null),A=`${makeUniqueId(o)}-input`,F="barcode"!==i;useEffect(()=>{let e=scannerConfiguration.rows.default;"number"==typeof m&&(e=Math.max(scannerConfiguration.rows.minimum,m)),h(e)},[m]),useEffect(()=>(w(!0),()=>w(!1)),[]),useEffect(()=>{T&&a&&e&&(l("autoActivate",!1),P())},[T]),useEffect(()=>{y&&(S(!1),setTimeout(()=>{T&&S(!0)},1500))},[y]);const _=useFocusCallback(a,o,E);useEffect(()=>{let e=f;!isScanRef(e)&&e&&(e=convertToScanRef(e),u(e,!1));const t=e?.value||"";v!==t&&g(t)},[f]);const x=E.renderText(d),D=!a,b=D||!r,B=(e,t,n)=>{if(e){if(f?.value===e)return;const a=convertToScanRef(e,t,n);u(a),g(e)}},O=async e=>{const{BarcodeFormat:t}=await import("@zxing/browser");let n;return e===ScanType.QrCode?n=[t.AZTEC,t.DATA_MATRIX,t.MAXICODE,t.PDF_417,t.QR_CODE]:e===ScanType.BarCode&&(n=[t.CODABAR,t.CODE_39,t.CODE_93,t.CODE_128,t.EAN_8,t.EAN_13,t.ITF,t.RSS_14,t.RSS_EXPANDED,t.UPC_A,t.UPC_E,t.UPC_EAN_EXTENSION]),n},P=async()=>{if(y)return R(null),void c("cancel",void 0);const{BrowserCodeReader:e,BrowserMultiFormatReader:t}=await import("@zxing/browser");if(!T)return;const n=await(async e=>{const{DecodeHintType:t}=await import("@zxing/library"),n=await O(e),a=new Map;return a.set(t.POSSIBLE_FORMATS,n),a})(i),a=new t(n);R(a),await(async t=>{try{const n=await e.listVideoInputDevices();if(!n||0==n.length)throw new DOMException("No video input devices detected.");const a=await t.decodeOnceFromVideoDevice(void 0,I.current||void 0),r=(await O(ScanType.QrCode)).indexOf(a.getBarcodeFormat())<0?ScanType.BarCode:ScanType.QrCode;B(a.toString(),EntryMethod.Camera,r),R(null)}catch(e){e instanceof DOMException&&(l("error",e.message),R(null))}})(a)},N=y?E.renderText("@common-close"):x;return React.createElement(StyledFormElement,{className:t,element:n,inputId:A,name:o,ref:p},React.createElement(Stack,{className:scannerClasses.container},React.createElement("video",{hidden:!y,ref:I}),React.createElement(Stack,{className:scannerClasses.inputContainer,direction:"row"},React.createElement(Input,{disabled:b,fullWidth:!0,id:A,inputProps:{onKeyDown:e=>{if(F)e.stopPropagation();else{const t=e.currentTarget;R(null),B(t.value,EntryMethod.Manual)}},title:x},inputRef:_,multiline:F,onBlur:e=>{e.currentTarget.value.length>0&&(R(null),B(e.currentTarget.value,EntryMethod.Manual))},onChange:e=>{g(e.currentTarget.value)},required:s,rows:F?M:void 0,spellCheck:!1,value:v}),React.createElement(Button,{"aria-label":N,className:scannerClasses.button,color:"primary",disabled:D||!C,onClick:P,ref:_,title:N},y?React.createElement(CloseIcon,null):i===ScanType.BarCode?React.createElement(ScanBarcode,null):i===ScanType.QrCode?React.createElement(ScanQr,null):React.createElement(ScanMulti,null)))))});export default Scanner;

package/forms/components/common.js

@@ -1 +1 @@
-import Box from"@vertigis/react-ui/Box";import FormLabel,{formLabelClasses}from"@vertigis/react-ui/FormLabel";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useCallback}from"react";import*as React from"react";import{hasContent,isMarkdown,markdownToText}from"../textUtilities.js";import{getAccessibleDescriptionId,getDescriptionId,getLabelId}from"../utils.js";import{formClasses}from"./Form.js";import Markdown from"./Markdown.js";export function renderTitle(e,r,t,o,s){return hasContent(t)?React.createElement(FormLabel,{className:formClasses.formElementTitle,component:s,htmlFor:o,id:getLabelId(e),required:!!r},React.createElement(Markdown,{inline:!0,text:t})):null}const DescriptionMarkdown=styled(Markdown)(({theme:{palette:e}})=>({[`&.${formLabelClasses.disabled}`]:{color:e.text.disabled}}));export function renderDescription(e,r,t,o){return hasContent(e)?React.createElement(DescriptionMarkdown,{className:clsx(o,{[formLabelClasses.disabled]:!t}),id:getDescriptionId(r),text:e}):null}export function renderAccessibleDescription(e,r,t,o){let s=o.translateText(e);if(!s){const e=o.translateText(r);s=isMarkdown(e)?markdownToText(e.markdown):e}return s?React.createElement(Box,{hidden:!0,id:getAccessibleDescriptionId(t)},s):null}const ErrorMarkdown=styled(Markdown)(({theme:{palette:e}})=>({color:e.custom.errorText,fontStyle:"italic",backgroundColor:e.custom.errorBackground}));export function renderError(e){return hasContent(e)?React.createElement(ErrorMarkdown,{role:"alert",text:e}):null}export function useFocusCallback(e,r,t){return useCallback(e=>{Array.isArray(e?.thumbRefs)&&e.thumbRefs.length>0&&(e=e.thumbRefs[0].current),null===e||e.disabled||t.renderFocus(e,r)},[e,r,t])}
+import Box from"@vertigis/react-ui/Box";import FormLabel,{formLabelClasses}from"@vertigis/react-ui/FormLabel";import{styled}from"@vertigis/react-ui/styles";import clsx from"clsx";import{useCallback}from"react";import*as React from"react";import{hasContent,isMarkdown,markdownToText}from"../textUtilities.js";import{getAccessibleDescriptionId,getDescriptionId,getLabelId}from"../utils.js";import{formClasses}from"./Form.js";import Markdown from"./Markdown.js";export function renderTitle(e,r,t,o,s){return hasContent(t)?React.createElement(FormLabel,{className:formClasses.formElementTitle,component:s,htmlFor:o,id:getLabelId(e),required:!!r},React.createElement(Markdown,{inline:!0,text:t})):null}const DescriptionMarkdown=styled(Markdown)(({theme:{palette:e}})=>({[`&.${formLabelClasses.disabled}`]:{color:e.text.disabled}," p:first-of-type":{marginTop:0}}));export function renderDescription(e,r,t,o){return hasContent(e)?React.createElement(DescriptionMarkdown,{className:clsx(o,{[formLabelClasses.disabled]:!t}),id:getDescriptionId(r),text:e}):null}export function renderAccessibleDescription(e,r,t,o){let s=o.translateText(e);if(!s){const e=o.translateText(r);s=isMarkdown(e)?markdownToText(e.markdown):e}return s?React.createElement(Box,{hidden:!0,id:getAccessibleDescriptionId(t)},s):null}const ErrorMarkdown=styled(Markdown)(({theme:{palette:e}})=>({color:e.custom.errorText,fontStyle:"italic",backgroundColor:e.custom.errorBackground}));export function renderError(e){return hasContent(e)?React.createElement(ErrorMarkdown,{role:"alert",text:e}):null}export function useFocusCallback(e,r,t){return useCallback(e=>{Array.isArray(e?.thumbRefs)&&e.thumbRefs.length>0&&(e=e.thumbRefs[0].current),null===e||e.disabled||t.renderFocus(e,r)},[e,r,t])}

package/libs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "5.48.1+2";
+export declare const VERSION = "5.49.0+7";

package/libs/version.js

@@ -1 +1 @@
-export const VERSION="5.48.1+2";
+export const VERSION="5.49.0+7";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertigis/workflow",
-  "version": "5.48.1",
+  "version": "5.49.0",
   "author": "VertiGIS",
   "dependencies": {
     "@date-fns/utc": "^1.2.0",