@vertigis/workflow 5.31.0

package/esm/forms/elements/types.d.ts

@@ -0,0 +1,81 @@
+import * as defs from "../FormDefinition";
+/** We re-define Text here to hide defs.StatusRef from the end user.
+ *  It is only for internal use, and adds no value in this context.
+ */
+export declare type Text = string | defs.MarkdownRef;
+/** Properties common to all Elements, except the Header. */
+export interface ElementBase {
+    /** Indicates the type of the element. */
+    readonly type?: string;
+    /** Indicates that the element is visible or not. */
+    readonly visible?: boolean;
+    /** Indicates the name of the style that will be applied to the element. */
+    readonly styleName?: string;
+}
+/** Exposes the Element.enabled and Element.error properties. */
+export interface EditableElement {
+    /** Indicates that the element is enabled or not. */
+    readonly enabled?: boolean;
+    /** Indicates the error for the element. */
+    readonly error?: Text;
+}
+/** Exposes the Element.autoActivate property. */
+export interface ElementWithAutoActivate {
+    /** True if this element should activate when shown, false otherwise. */
+    readonly autoActivate?: boolean;
+}
+/** Exposes the Element.current property. */
+export interface ElementWithCurrent {
+    /** Indicates the current item. */
+    readonly current?: string;
+}
+/** Exposes the Element.items property. */
+export interface ElementWithItems<ElementItemBase> {
+    /** The items contained within the element. */
+    readonly items?: {
+        [key: string]: ElementItemBase;
+    };
+}
+/** Exposes the Element.label property as `Text`. */
+export interface ElementWithTextLabel {
+    /** Indicates the label for the element. */
+    readonly label?: Text;
+}
+/** Exposes the Element.label property as `string`. */
+export interface ElementWithStringLabel {
+    /** Indicates the label for the element. */
+    readonly label?: string;
+}
+/** Exposes the Element.readOnly property. */
+export interface ElementWithReadOnly {
+    /** Indicates that the element is read only or not. */
+    readonly readOnly?: boolean;
+}
+/** Exposes the Element.require property. */
+export interface ElementWithRequire {
+    /** Instructs any validation that the element is required. */
+    readonly require?: boolean;
+}
+/** Exposes the Element.maxLength property. */
+export interface ElementWithMaxLength {
+    /** Indicates the maximum number of characters that can be entered in the field. */
+    readonly maxLength?: number;
+}
+/** Properties common to all Element Items. */
+export interface ElementItemBase<T> {
+    /** Indicates the enabled state for the item. */
+    readonly enabled?: boolean;
+    /** Indicates the label for the item. */
+    readonly label?: Text;
+    /** Indicates the name of the style that will be applied to the item. */
+    readonly styleName?: string;
+    /** Indicates the value for the item. */
+    readonly value?: T;
+    /** Indicates the visible state for the item. */
+    readonly visible?: boolean;
+}
+/** Exposes the Item.checked property. */
+export interface ElementItemWithChecked {
+    /** Indicates the checked state for the item. */
+    readonly checked?: boolean;
+}

package/esm/forms/files.d.ts

@@ -0,0 +1,3 @@
+import { FormComponent } from "./FormComponent";
+import * as defs from "./FormDefinition";
+export declare function renderFilePicker(component: FormComponent, element: defs.Element): JSX.Element;

package/esm/forms/files.js

@@ -0,0 +1 @@
+import React from"react";import FormElementOuter from"./FormElementOuter.js";import{renderCrossAdd,renderRemove}from"./assets/stock.js";import{renderFocus}from"./common.js";import{CssClasses}from"./constants.js";import{isFilesRef,makeSafeClassName}from"./utils.js";function renderFilePicker(a,r){const{host:s,name:t}=a.props;var e=r.size;let n=r.value,i=5,l;"number"==typeof e&&(i=1<e?Math.ceil(e):1),n&&(isFilesRef(n)&&Array.isArray(n.files)||(r.value=n=void 0));var c=s.renderText(r.tooltip);let o=a.enabled;const m=[];if(void 0!==n){o=a.enabled&&n.files.length<i;for(const u of n.files){var d=m.length;m.push(React.createElement("div",{className:"file",key:"$"+d},React.createElement("div",null,React.createElement("label",null,u.name),React.createElement("button",{"aria-label":s.renderText("@file-picker-remove-item-label"),className:"delete",disabled:!a.enabled,ref:e=>renderFocus(e,t,s),onClick:(e=>()=>{1<n.files.length?n.files.splice(e,1):r.value=void 0,a.forceUpdate(),s.post("changed",{name:t,value:r.value})})(d)},renderRemove()))))}}const f=e=>{if(e){var t=e.getAttribute("class");if(/\bneedsclick\b/.test(t)||e.setAttribute("class",t?t+" needsclick":"needsclick"),"svg"!==e.tagName){var l=e.children;for(let e=0;e<l.length;e++)f(l[e])}}};m.push(React.createElement("div",{className:"add-file",key:"footer"},React.createElement("button",{className:"add",disabled:!o,title:c,ref:e=>{renderFocus(e,t,s),f(e)},onClick:()=>{l.value=null,l.click()}},renderCrossAdd(),React.createElement("div",{className:"inline",dangerouslySetInnerHTML:{__html:s.renderHtml(r.prompt)}}))));const p=[r.type,makeSafeClassName(t)];e=1!==i;return React.createElement(FormElementOuter,{className:p.join(" "),component:a,element:r,errorClassName:CssClasses.ERROR},React.createElement("div",{className:"items"},m),React.createElement("input",{type:"file",style:{display:"none"},title:c,onChange:e=>(e=>{var t=e.files;if(t&&t.length){const l=n&&n.files||[];for(let e=0;e<t.length&&l.length!==i;e++)l.push(t[e]);e={refValueType:"files",files:l};r.value=e,a.forceUpdate(),s.post("changed",{name:a.props.name,value:e})}})(e.target),multiple:e,accept:r.fileTypes,ref:e=>{l=e}}))}export{renderFilePicker};

package/esm/forms/geometry.d.ts

@@ -0,0 +1,3 @@
+import { FormComponent } from "./FormComponent";
+import * as defs from "./FormDefinition";
+export declare function renderGeometryPicker(component: FormComponent, element: defs.Element): JSX.Element;

package/esm/forms/geometry.js

@@ -0,0 +1 @@
+import React from"react";import FormElementOuter from"./FormElementOuter.js";import{renderCrossAdd,renderArrowRollup,renderRemove}from"./assets/stock.js";import{renderFocus}from"./common.js";import{CssClasses}from"./constants.js";import{getKeyString}from"./keyboard.js";import{makeSafeClassName,sanitizeGeometryRef,setClass,text}from"./utils.js";class StateTrackingElement extends React.Component{render(){return React.createElement("div",{ref:e=>this.root=e,...this.props})}}function renderGeometryPicker(t,n){var e=t.props;const a=e.name,s=e.host;let r=5;var o=n.size;"number"==typeof o&&(r=1<o?Math.ceil(o):1);let c,l,d="✎",i=n.value=sanitizeGeometryRef(n.value);void 0!==i&&(c=i.geometry,R=n.itemLabel,Array.isArray(R)?l=R:(l=[],text.isMarkdown(R)?R.markdown&&(d=R):text.isStatus(R)?R.status&&(d=R.status):R&&(d=R)));let u=n.state;function m(e){let t=u[e];return void 0!==t&&null!==t||(u.length<=e&&(u.length=e,u.push({})),t=u[e]),t}void 0!==u&&null!==u||(u=n.state=[]);const f=t.enabled;function p(t,n=!0){let r;function o(){const e=m(t);e.checked=f&&r.checked,e.focused=f&&r.focused,e.pending=f&&r.pending,n&&s.renderState(a,"geometry",u),setClass(r.root,"checked",e.checked),setClass(r.root,"focus",e.focused),setClass(r.root,"hover",e.pending)}return{ref(e){r=e,null!==r&&o()},onChangeCapture:function(e){r&&(r.checked=null!==e.currentTarget.querySelector("input:checked"),o())},onFocusCapture:function(e){r&&(r.focused=!0,o())},onBlurCapture:function(){r&&(r.focused=!1,o())},onMouseOver:function(){r&&(r.pending=!0,o())},onMouseOut:function(){r&&(r.pending=!1,o())},onKeyDownCapture(e){f&&"delete"===getKeyString(e)&&void 0!==m(t).content&&h(t)()}}}function h(e){return function(){1<c.length?(c.splice(e,1),u.splice(e,1),e<l.length&&l.splice(e,1)):(n.value=void 0,n.state=void 0),t.forceUpdate(),s.post("changed",{name:a,value:i})}}let v=t.enabled;const g=[];if(void 0!==i){v=t.enabled&&i.geometry.length<r;for(const b of i.geometry){const y=g.length;m(y).content=b;var k={__html:s.renderHtml(l[y]||d)};g.push(React.createElement(StateTrackingElement,{className:"shape",key:"$"+y,...p(y)},React.createElement("div",null,React.createElement("label",null,React.createElement("input",{type:"checkbox",disabled:!t.enabled,ref:function(t){return function(e){null!==e&&(e.disabled||s.renderFocus(e,a),e.checked=m(t).checked)}}(y)}),React.createElement("div",{className:"inline",dangerouslySetInnerHTML:k})),React.createElement("button",{className:"delete",disabled:!t.enabled,ref:e=>renderFocus(e,a,s),onClick:h(y)},renderRemove()))))}}function C(){s.post("clicked",{name:a,value:i})}void 0!==i&&i.format;e={__html:s.renderHtml(n.prompt)},o=s.renderText(n.tooltip);const y=g.length;var R=t.enabled&&void 0!==i;g.push(React.createElement(StateTrackingElement,{className:"add-shape",key:"footer",...p(y,!1)},React.createElement("button",{className:"add",disabled:!v,title:o,ref:e=>renderFocus(e,a,s),onClick:C},renderCrossAdd(),React.createElement("div",{className:"inline",dangerouslySetInnerHTML:e})),React.createElement("button",{className:"clear",disabled:!R,ref:e=>renderFocus(e,a,s),onClick:function(){i=n.value=void 0,t.forceUpdate(),s.post("changed",{name:a,value:i})}},renderArrowRollup())));const E=[n.type,makeSafeClassName(a)];return 1===r&&E.push(CssClasses.SINGLE),void 0!==i&&i.geometry.length>=r&&E.push(CssClasses.FULL),t.enabled&&n.autoActivate&&(v&&setTimeout(()=>C()),delete n.autoActivate),React.createElement(FormElementOuter,{className:E.join(" "),component:t,element:n,errorClassName:CssClasses.ERROR,ref:function(e){null===e&&s.renderState(a,"geometry")}},React.createElement("div",{className:"items"},g))}export{renderGeometryPicker};

package/esm/forms/index.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+export * from "./constants";
+import { Text } from "./elements/types";
+export interface FormElementProps<TValue = undefined> extends FormElementSettableProps<TValue> {
+    /** The description of the element. */
+    description?: Text;
+    /** The enabled state of the element. */
+    enabled: boolean;
+    /** The error state of the element. */
+    error?: Text;
+    /** The title of the element. */
+    title?: string;
+    /**
+     * A callback function to raise an event. The `custom` event accepts any
+     * value as the eventValue. Use the Get Form Event Data to access the event
+     * data in a sub-workflow of the Display Form activity.
+     * @param eventName The name of the event to raise. Currently only `custom`
+     * is permitted.
+     * @param eventValue The value of the event.
+     */
+    raiseEvent: (eventName: "custom", eventValue: any) => void;
+    /**
+     * Set a property on the element.
+     * @param property The name of the property to set.
+     * @param value The new value to set.
+     */
+    setProperty: <K extends keyof Omit<this, keyof FormElementProps<TValue>> | keyof FormElementSettableProps<TValue>>(property: K, value: this[K]) => void;
+    /**
+     * Sets the `value` property of the element. Equivalent to calling
+     * `setProperty("value", value)`.
+     *
+     * Setting the value will raise the `change` event on the element.
+     *
+     * @param value The new value to set.
+     */
+    setValue: (value: this["value"]) => void;
+}
+export interface FormElementSettableProps<TValue = undefined> {
+    /** The value of the element. */
+    value: TValue;
+}
+declare type SettablePropsFromProps<TProps extends FormElementProps> = Omit<TProps, keyof FormElementProps> & FormElementSettableProps<TProps["value"]>;
+declare type Unionize<T> = T[keyof T];
+export declare type PropertyChangeEvent<TSettableProps, TSetProperty> = Unionize<{
+    [K in keyof Required<TSettableProps>]: {
+        properties: Readonly<TSettableProps>;
+        property: K;
+        setProperty: TSetProperty;
+    };
+}>;
+export interface FormElementRegistration<TProps extends FormElementProps<any> = FormElementProps, TSettableProps extends SettablePropsFromProps<TProps> = SettablePropsFromProps<TProps>> {
+    /** The React component definition of the form element. */
+    component: React.ComponentType<TProps>;
+    /** The unique identifier of the element. */
+    id: string;
+    /**
+     * Generate the initial properties of the form element. This will be assigned to
+     * the element properties before first render.
+     */
+    getInitialProperties?: () => Partial<TSettableProps>;
+    /**
+     * This function will be invoked prior to updating a property of the element
+     * state. It will be invoked even if the element isn't currently visible.
+     *
+     * @returns Either a new value, an error message, or nothing.
+     */
+    onPropertyChange?: (event: PropertyChangeEvent<TSettableProps, TProps["setProperty"]>) => void;
+}

package/esm/forms/index.js

@@ -0,0 +1 @@
+export*from"./constants";

package/esm/forms/keyboard.d.ts

@@ -0,0 +1,8 @@
+export interface KeyboardEvent {
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    key: string;
+}
+export declare function getKeyString(event: KeyboardEvent): string;

package/esm/forms/keyboard.js

@@ -0,0 +1 @@
+function getKeyString(e){if(!(e.altKey||e.ctrlKey||e.metaKey||e.shiftKey))return e.key.toLowerCase()}export{getKeyString};

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

@@ -0,0 +1 @@
+export declare const LOCALE: {};

package/esm/forms/locales/stock.js

@@ -0,0 +1 @@
+const LOCALE={main:{"en-US":{identity:{version:{_cldrVersion:"26",_number:"$Revision: 10669 $"},generation:{_date:"$Date: 2014-07-23 16:10:33 -0500 (Wed, 23 Jul 2014) $"},language:"en",territory:"US"},numbers:{defaultNumberingSystem:"latn",otherNumberingSystems:{native:"latn"},minimumGroupingDigits:"1","symbols-numberSystem-latn":{decimal:".",group:",",list:";",percentSign:"%",plusSign:"+",minusSign:"-",exponential:"E",superscriptingExponent:"×",perMille:"‰",infinity:"∞",nan:"NaN",timeSeparator:":"},"decimalFormats-numberSystem-latn":{standard:"#,##0.###",long:{decimalFormat:{"1000-count-one":"0 thousand","1000-count-other":"0 thousand","10000-count-one":"00 thousand","10000-count-other":"00 thousand","100000-count-one":"000 thousand","100000-count-other":"000 thousand","1000000-count-one":"0 million","1000000-count-other":"0 million","10000000-count-one":"00 million","10000000-count-other":"00 million","100000000-count-one":"000 million","100000000-count-other":"000 million","1000000000-count-one":"0 billion","1000000000-count-other":"0 billion","10000000000-count-one":"00 billion","10000000000-count-other":"00 billion","100000000000-count-one":"000 billion","100000000000-count-other":"000 billion","1000000000000-count-one":"0 trillion","1000000000000-count-other":"0 trillion","10000000000000-count-one":"00 trillion","10000000000000-count-other":"00 trillion","100000000000000-count-one":"000 trillion","100000000000000-count-other":"000 trillion"}},short:{decimalFormat:{"1000-count-one":"0K","1000-count-other":"0K","10000-count-one":"00K","10000-count-other":"00K","100000-count-one":"000K","100000-count-other":"000K","1000000-count-one":"0M","1000000-count-other":"0M","10000000-count-one":"00M","10000000-count-other":"00M","100000000-count-one":"000M","100000000-count-other":"000M","1000000000-count-one":"0B","1000000000-count-other":"0B","10000000000-count-one":"00B","10000000000-count-other":"00B","100000000000-count-one":"000B","100000000000-count-other":"000B","1000000000000-count-one":"0T","1000000000000-count-other":"0T","10000000000000-count-one":"00T","10000000000000-count-other":"00T","100000000000000-count-one":"000T","100000000000000-count-other":"000T"}}},"scientificFormats-numberSystem-latn":{standard:"#E0"},"percentFormats-numberSystem-latn":{standard:"#,##0%"},"currencyFormats-numberSystem-latn":{currencySpacing:{beforeCurrency:{currencyMatch:"[:^S:]",surroundingMatch:"[:digit:]",insertBetween:" "},afterCurrency:{currencyMatch:"[:^S:]",surroundingMatch:"[:digit:]",insertBetween:" "}},accounting:"¤#,##0.00;(¤#,##0.00)",standard:"¤#,##0.00","unitPattern-count-one":"{0} {1}","unitPattern-count-other":"{0} {1}"},"miscPatterns-numberSystem-latn":{atLeast:"{0}+",range:"{0}–{1}"}}}},supplemental:{likelySubtags:{en:"en-Latn-US"}}};export{LOCALE};

package/esm/forms/number.d.ts

@@ -0,0 +1,10 @@
+import { FormComponent } from "./FormComponent";
+import * as defs from "./FormDefinition";
+export declare function renderNumberRangeSlider(component: FormComponent, element: defs.Element): JSX.Element;
+export declare function renderNumberSlider(component: FormComponent, element: defs.Element): JSX.Element;
+/**
+ * Renders the 'Number' form element as well as the legacy 'NumberSlider' (used only in IE as of now).
+ * @param component The form component.
+ * @param element The element used in the form.
+ */
+export declare function renderNumber(component: FormComponent, element: defs.Element): JSX.Element;

package/esm/forms/number.js

@@ -0,0 +1 @@
+import React from"react";import FormElementOuter from"./FormElementOuter.js";import{CssClasses}from"./constants.js";import{getKeyString}from"./keyboard.js";import{isNumberRef,isString,makeSafeClassName}from"./utils.js";const NumberRangeSlider=React.lazy(()=>import("./components/NumberRangeSlider")),NumberSlider=React.lazy(()=>import("./components/NumberSlider"));function renderNumberRangeSlider(e,r){return React.createElement(React.Suspense,{fallback:null},React.createElement(NumberRangeSlider,{component:e,element:r}))}function renderNumberSlider(e,r){return React.createElement(React.Suspense,{fallback:null},React.createElement(NumberSlider,{component:e,element:r}))}function renderRangeFormat(e,r){return r=null==(r=isNumberRef(e)?e.format:r)?{}:r}function renderNumber(t,n){const r=t.props.name,o=t.props.host;let u=renderRangeFormat(n.value,n.format),a=u.precision;"number"==typeof a&&0*a==0||(a=3);const l=Math.pow(10,-1*a);let e=Math.round(u.step/l)*l;"number"==typeof e&&0*e<e||(e=void 0);let i=Math.floor(u.lowerBound/l)*l;"number"==typeof i&&0*i==0||(i=void 0);let m=Math.ceil(u.upperBound/l)*l;"number"==typeof m&&0*m==0||(m=void 0),void 0!==i&&void 0!==m&&m<=i&&(i=void 0,m=void 0);const s=[CssClasses.NUMERIC,makeSafeClassName(r)];void 0!==e&&s.push(CssClasses.STEPPER),u={precision:a,step:e,lowerBound:i,upperBound:m};const c={useGrouping:!0,minimumFractionDigits:0<a?a:0,maximumFractionDigits:0<a?a:0};function p(r){if(void 0===(r=function(e){if("string"==typeof e){if(e.length<1)return;e=Number(e)}if("number"==typeof e&&0*e==0)return void 0!==m&&e>m&&(e=m),void 0!==i&&e<i&&(e=i),Math.round(e/l)*l}(r)))return n.value=void 0,"";{n.value={refValueType:"number",format:u,display:o.formatNumber(r,c),numeric:r};let e=a;return e=20<e?20:e,e=e<0?0:e,r.toFixed(e)}}let d=null,f=(b=n.value,isNumberRef(b)&&(b=b.numeric),p("number"==typeof(b=isString(b)?o.coerceNumber(b):b)?b:void 0));var b;function v(e){return e=p(e),d.value=e,f!==e&&(f=e,o.post("changed",{name:r,value:n.value}),1)}var R=o.renderText(n.prompt),N=o.renderText(n.tooltip);return React.createElement(FormElementOuter,{className:s.join(" "),component:t,element:n,errorClassName:CssClasses.ERROR,htmlElementType:"label",ref:function(e){null!==e&&null===e.querySelector("*:focus")&&(d.value=f,o.renderFocus(d,r))}},React.createElement("input",{placeholder:R,title:N,type:"number",disabled:!t.enabled,min:i,max:m,step:e,onKeyDown:function(e){var r=getKeyString(e);if("enter"===r&&v(d.value))return d.select(),e.preventDefault(),e.stopPropagation(),!1;"escape"===r&&(d.value=f,d.select()),t.autoInput=!1},onFocus:function(){d.select()},onMouseDown:function(){t.autoInput=!0},onChange:function(){t.autoInput&&(v(d.value),d.select())},onBlur:function(){v(d.value)},ref:function(e){d=e}}))}export{renderNumberRangeSlider,renderNumberSlider,renderNumber};

package/esm/forms/numberFormatter.d.ts

@@ -0,0 +1,95 @@
+export { isNumeric } from "./utils";
+/**
+ * Pre-defined format specifiers for use with format().
+ */
+export declare enum NumberDisplayFormat {
+    /**
+     * A localized representation of a number with a decimal separator and group
+     * separators (e.g. "12,345.67", "-42" for en-US locale).
+     */
+    NUMBER = "n",
+    /**
+     * A localized representation of a number with a decimal separator (e.g.
+     * "12345.67", "-42" for en-US locale).
+     */
+    FIXED_POINT = "f",
+    /**
+     * A localized representation of a monetary amount in a specific currency
+     * (e.g. "$123.45" for USD, "£123.45" for GBP for en-US locale).
+     */
+    CURRENCY = "c",
+    /**
+     * Same as CURRENCY, except that in many locales, negative values may be displayed in
+     * parentheses instead of using a "-" sign.
+     */
+    ACCOUNTING = "a",
+    /**
+     * A localized representation of a percentage (e.g. 0.99 -> "99%" in the
+     * en-US locale).
+     */
+    PERCENT = "p",
+    /**
+     * An invariant representation of a number (e.g. "12345.67"). Guarantees
+     * that the number can be parsed back into the same number, regardless of
+     * locale.
+     */
+    ROUND_TRIP = "r",
+    /**
+     * The default representation for number values (equivalent to NUMBER).
+     */
+    DEFAULT = "n",
+    /**
+     * A custom format string.
+     */
+    CUSTOM = "custom"
+}
+/**
+ * Options supported by {@link format}.
+ */
+export interface FormatOptions {
+    /**
+     * The locale to use when formatting the number. If not specified, the
+     * current locale is used (see locale module).
+     */
+    locale?: string;
+    /**
+     * The number format. See {@link NumberFormatter.format}.
+     */
+    format?: NumberDisplayFormat;
+    /**
+     * See {@link NumberSettings.currency}.
+     */
+    currency?: string;
+    /**
+     * The custom number format. Required for a format type of 'Custom'
+     */
+    customDisplayFormat?: string;
+    /**
+     * See {@link NumberSettings.fractionalDigits}.
+     */
+    fractionalDigits?: number;
+}
+export declare const DEFAULT_CURRENCY = "USD";
+export declare const DEFAULT_CUSTOM_FORMAT = "#.##";
+export declare const DEFAULT_FRACTIONAL_DIGITS = 4;
+export declare const SUPPORTED_CURRENCIES: string[];
+/**
+ * Formats a number for display in the current locale.
+ *
+ * @param num The number to format.
+ */
+export declare function format(num: number): string;
+/**
+ * Formats a number for display.
+ *
+ * @param format See {@link NumberFormatter.format}.
+ * @param num The number to format.
+ */
+export declare function format(format: string, num: number): string;
+/**
+ * Formats a number for display.
+ *
+ * @param options Specifies the format settings to use.
+ * @param num The number to format.
+ */
+export declare function format(options: FormatOptions, num: number): string;

package/esm/forms/numberFormatter.js

@@ -0,0 +1 @@
+import{DEFAULT_LOCALE}from"../constants.js";export{isNumeric}from"./utils";var NumberDisplayFormat;!function(t){t.NUMBER="n",t.FIXED_POINT="f",t.CURRENCY="c",t.ACCOUNTING="a",t.PERCENT="p",t.ROUND_TRIP="r",t.DEFAULT="n",t.CUSTOM="custom"}(NumberDisplayFormat=NumberDisplayFormat||{});const DEFAULT_CURRENCY="USD",DEFAULT_CUSTOM_FORMAT="#.##",DEFAULT_FRACTIONAL_DIGITS=4,SUPPORTED_CURRENCIES=["ADP","AED","AFA","AFN","ALK","ALL","AMD","ANG","AOA","AOK","AON","AOR","ARA","ARL","ARM","ARP","ARS","ATS","AUD","AWG","AZM","AZN","BAD","BAM","BAN","BBD","BDT","BEC","BEF","BEL","BGL","BGM","BGN","BGO","BHD","BIF","BMD","BND","BOB","BOL","BOP","BOV","BRB","BRC","BRE","BRL","BRN","BRR","BRZ","BSD","BTN","BUK","BWP","BYB","BYN","BYR","BZD","CAD","CDF","CHE","CHF","CHW","CLE","CLF","CLP","CNH","CNX","CNY","COP","COU","CRC","CSD","CSK","CUC","CUP","CVE","CYP","CZK","DDM","DEM","DJF","DKK","DOP","DZD","ECS","ECV","EEK","EGP","ERN","ESA","ESB","ESP","ETB","EUR","FIM","FJD","FKP","FRF","GBP","GEK","GEL","GHC","GHS","GIP","GMD","GNF","GNS","GQE","GRD","GTQ","GWE","GWP","GYD","HKD","HNL","HRD","HRK","HTG","HUF","IDR","IEP","ILP","ILR","ILS","INR","IQD","IRR","ISJ","ISK","ITL","JMD","JOD","JPY","KES","KGS","KHR","KMF","KPW","KRH","KRO","KRW","KWD","KYD","KZT","LAK","LBP","LKR","LRD","LSL","LTL","LTT","LUC","LUF","LUL","LVL","LVR","LYD","MAD","MAF","MCF","MDC","MDL","MGA","MGF","MKD","MKN","MLF","MMK","MNT","MOP","MRO","MRU","MTL","MTP","MUR","MVP","MVR","MWK","MXN","MXP","MXV","MYR","MZE","MZM","MZN","NAD","NGN","NIC","NIO","NLG","NOK","NPR","NZD","OMR","PAB","PEI","PEN","PES","PGK","PHP","PKR","PLN","PLZ","PTE","PYG","QAR","RHD","ROL","RON","RSD","RUB","RUR","RWF","SAR","SBD","SCR","SDD","SDG","SDP","SEK","SGD","SHP","SIT","SKK","SLL","SOS","SRD","SRG","SSP","STD","STN","SUR","SVC","SYP","SZL","THB","TJR","TJS","TMM","TMT","TND","TOP","TPE","TRL","TRY","TTD","TWD","TZS","UAH","UAK","UGS","UGX","USD","USN","USS","UYI","UYP","UYU","UYW","UZS","VEB","VEF","VES","VND","VNN","VUV","WST","XAF","XAG","XAU","XBA","XBB","XBC","XBD","XCD","XDR","XEU","XFO","XFU","XOF","XPD","XPF","XPT","XRE","XSU","XTS","XUA","XXX","YDD","YER","YUD","YUM","YUN","YUR","ZAL","ZAR","ZMK","ZMW","ZRN","ZRZ","ZWD","ZWL","ZWR"];function format(...t){return globalFormatter.format.apply(globalFormatter,t)}class NumberFormatter{format(...t){var r;let a=NaN,e={};if(1===t.length?(a=t[0],e={}):2<=arguments.length&&(a=t[1],e="string"==typeof t[0]?{format:t[0]}:t[0]||e),null===a||void 0===a||isNaN(a))return"";let m=e.format||NumberDisplayFormat.DEFAULT;if(m===NumberDisplayFormat.CUSTOM&&(m=e.customDisplayFormat||DEFAULT_CUSTOM_FORMAT),m===NumberDisplayFormat.ROUND_TRIP)return a.toString();var D,i=m.toLowerCase();i===NumberDisplayFormat.CURRENCY||i===NumberDisplayFormat.ACCOUNTING?(D=e.currency||DEFAULT_CURRENCY,m=i,m+=null!==(r=e.fractionalDigits)&&void 0!==r?r:"",m+=D?`$${D}`:""):i!==NumberDisplayFormat.NUMBER&&i!==NumberDisplayFormat.FIXED_POINT&&i!==NumberDisplayFormat.PERCENT||(m=i,m+=null!==(R=e.fractionalDigits)&&void 0!==R?R:""),e.locale=e.locale||DEFAULT_LOCALE;const N=[e.locale];var R,i=`${N.join(";")}|${m}`;let o=numberFormatters.get(i);return o||(o=[],1===(R=m.split(";",3)).length?(o[0]=this._createNumberFormatter(N,R[0]),o[1]=o[0],o[2]=o[0]):2===R.length?(o[0]=this._createNumberFormatter(N,R[0]),o[1]=this._createNumberFormatter(N,R[1]),o[2]=o[0]):3===R.length&&(o[0]=this._createNumberFormatter(N,R[0]),o[1]=this._createNumberFormatter(N,R[1]),o[2]=this._createNumberFormatter(N,R[2])),numberFormatters.set(i,o)),0<a?o[0](a):a<0?o[1](a):o[2](a)}_createNumberFormatter(r,t){const a={};let e=t.match(standardFormatPattern);if(e){var m=e[1].toLowerCase(),D=Math.min(20,parseInt(e[2]));let t=e[3];m===NumberDisplayFormat.CURRENCY||m===NumberDisplayFormat.ACCOUNTING?t=(t||DEFAULT_CURRENCY).toUpperCase():(t="",void 0===a.minimumFractionDigits&&(a.minimumFractionDigits=0),void 0===a.maximumFractionDigits&&(a.maximumFractionDigits=Math.max(DEFAULT_FRACTIONAL_DIGITS,a.minimumFractionDigits))),m===NumberDisplayFormat.PERCENT?a.style="percent":m===NumberDisplayFormat.ACCOUNTING?a.currencySign="accounting":m===NumberDisplayFormat.FIXED_POINT&&(a.useGrouping=!1),isNaN(D)||(a.minimumFractionDigits=D,a.maximumFractionDigits=D);const E=t?new Intl.NumberFormat(r,{style:"currency",currency:t,...a}):new Intl.NumberFormat(r,a);return t=>E.format(t)}var i,N;e=t.match(/[0#]+|\.|,|%|\\.|(["'])[^\1]+\1|[^0#.,\\'"]+/g);let R=!1,o="",F="",n="",s="";a.minimumFractionDigits=0,a.maximumFractionDigits=0,a.useGrouping=!1;for(i of e)switch(i[0]){case".":R=!0;break;case",":a.useGrouping=!0;break;case"%":a.style="percent";break;case"0":case"#":R?F+=i:o+=i;break;default:0===i.indexOf('"')||0===i.indexOf("'")?i=i.slice(1,-1):0===i.indexOf("\\")&&(i=i.slice(1)),o||F?s+=i:n+=i}if(!o||0<=(N=o.indexOf("0"))&&(a.minimumIntegerDigits=o.length-N),F&&(N=F.lastIndexOf("0"),a.minimumFractionDigits=0<=N?N+1:0,a.maximumFractionDigits=Math.min(20,F.length)),o||F){const C=new Intl.NumberFormat(r,a);return t=>`${n}${C.format(t)}${s}`}return()=>n+s}}const numberFormatters=new Map,standardFormatPattern=/^([acfnp])(\d*)(?:\$([a-zA-Z]{3}))?$/i,globalFormatter=new NumberFormatter;export{NumberDisplayFormat,DEFAULT_CURRENCY,DEFAULT_CUSTOM_FORMAT,DEFAULT_FRACTIONAL_DIGITS,SUPPORTED_CURRENCIES,format};

package/esm/forms/numberSliderUtilities.d.ts

@@ -0,0 +1,12 @@
+import * as defs from "./FormDefinition";
+export declare const DEFAULT_SLIDER_LOWER_BOUND = 0;
+export declare const DEFAULT_SLIDER_UPPER_BOUND = 100;
+export declare const SLIDER_MAX_DECIMALS = 20;
+export declare function getProcessedNumberFormat(elementFormat: defs.FormatRef, minDecimals: number, defaultDecimals: number, defaultStep: number): defs.NumberFormat;
+/**
+ * Retrieves the effective number slider values after applying various validation checks and bounds.
+ * @param values The initial input values based on which the result is computed.
+ * @param numberFormat
+ * @returns A sorted numeric array with user entered values, if valid and default values if not.
+ */
+export declare function getNumberSliderValues(values: defs.Value, numberFormat: defs.NumberFormat, singleValue?: boolean): number[];

package/esm/forms/numberSliderUtilities.js

@@ -0,0 +1 @@
+import{DEFAULT_CURRENCY}from"./numberFormatter.js";import{isNumeric}from"./utils.js";const DEFAULT_SLIDER_LOWER_BOUND=0,DEFAULT_SLIDER_UPPER_BOUND=100,SLIDER_MAX_DECIMALS=20;function getProcessedNumberFormat(r,e,t,i){r=r||{};let o=r.precision,u=r.step,s=r.lowerBound,D=r.upperBound;s=isNumeric(s)?s:DEFAULT_SLIDER_LOWER_BOUND,D=isNumeric(D)?D:DEFAULT_SLIDER_UPPER_BOUND,D<=s&&(s=DEFAULT_SLIDER_LOWER_BOUND,D=DEFAULT_SLIDER_UPPER_BOUND),o=isNumeric(o)?o:t,(o<e||o>SLIDER_MAX_DECIMALS)&&(o=t),u=isNumeric(u)&&u<=D-s&&0<=u?u:i;t=r.displayFormat,i=r.customDisplayFormat;return o<0&&(u=Math.pow(10,-1*o),o=0),{currency:r.currency||DEFAULT_CURRENCY,customDisplayFormat:i,displayFormat:t,precision:o,step:u,lowerBound:s,upperBound:D}}function getNumberSliderValues(r,e,t=!1){const i=isNumeric(e.lowerBound)?e.lowerBound:DEFAULT_SLIDER_LOWER_BOUND,o=isNumeric(e.upperBound)?e.upperBound:DEFAULT_SLIDER_UPPER_BOUND,u=r=>isNumeric(r)?r<i?i:r>o?o:r:NaN;var s=r=>{r=(r||"").trim();r=isNumeric(r)?parseFloat(r):NaN;return u(r)};let D=[],E=NaN,_=NaN;return"string"==typeof r?(e=r.split("\n").filter(r=>""!==r),E=s(e[0]),_=s(e[1])):"number"==typeof r?E=u(r):Array.isArray(r)&&1<=r.length&&(E=("string"==typeof r[0]?s:u)(r[0]),_=("string"==typeof r[1]?s:u)(r[1])),isNaN(E)||(isNaN(_)?t&&D.push(E):D.push(E,_)),D=D.sort((r,e)=>r-e),D.length?D:t?[Math.round((i+o)/2)]:[i,o]}export{DEFAULT_SLIDER_LOWER_BOUND,DEFAULT_SLIDER_UPPER_BOUND,SLIDER_MAX_DECIMALS,getProcessedNumberFormat,getNumberSliderValues};

package/esm/forms/presenter.d.ts

@@ -0,0 +1,20 @@
+import { FormPresenterHost } from "./FormComponent";
+export declare function refresh(component: {}): void;
+/**
+ * Refreshes an element.
+ * @param host The host for the presenter.
+ * @param name The name of the element to refresh.
+ */
+export declare function refreshForm(host: FormPresenterHost, container: Element): void;
+/**
+ * Releases the underlying visual for the element.
+ * @param element The element to release from.
+ */
+export declare function releaseForm(container: HTMLElement): void;
+/** Renders a component's visual. */
+export declare function render(component: {}): any;
+/**
+ * Renders an element with a placeholder.
+ * @param owner
+ */
+export declare function renderNone(component: {}): any;

package/esm/forms/presenter.js

@@ -0,0 +1 @@
+import React from"react";import ReactDOM from"react-dom";import{FormComponent}from"./FormComponent.js";import*as renderers from"./renderers.js";function refresh(e){e instanceof FormComponent&&e.forceUpdate()}function refreshForm(e,r){ReactDOM.render(React.createElement(FormComponent,{host:e,type:"form"}),r)}function releaseForm(e){ReactDOM.unmountComponentAtNode(e)}function render(e){if(e instanceof FormComponent){switch(e.props.type){case"form":return renderers.renderForm(e);case"header":return renderers.renderHeader(e);case"main":return renderers.renderMain(e);case"footer":return renderers.renderFooter(e);case"body":return renderers.renderBody(e);case"row":return renderers.renderRow(e);case"section":return renderers.element.renderSection(e,e.prepare());case"element":break;default:return}var r=e.prepare();if(null==r)return;var n=r.type;if("string"!=typeof n)return;if("Custom"===n)return e.props.host.renderCustom(e,r);if(e.elementRegistration)return React.createElement(e.elementRegistration.component,renderers.getElementProps(e,r));const t=renderers.element["render"+n];if("function"==typeof t)return t(e,r)}}function renderNone(e){if(e instanceof FormComponent)return renderers.renderNone(e)}export{refresh,refreshForm,releaseForm,render,renderNone};

package/esm/forms/renderers.d.ts

@@ -0,0 +1,46 @@
+import { FormElementProps } from "..";
+import { FormComponent } from "./FormComponent";
+import * as defs from "./FormDefinition";
+import * as datetime from "./datetime";
+import * as files from "./files";
+import * as geometry from "./geometry";
+import * as number from "./number";
+import * as scanner from "./scanner";
+import * as selectors from "./selectors";
+import * as text from "./text";
+export declare function renderForm(component: FormComponent): JSX.Element;
+export declare function renderHeader(component: FormComponent): JSX.Element;
+export declare function renderFooter(component: FormComponent): JSX.Element;
+export declare function renderBody(component: FormComponent): JSX.Element;
+export declare function renderRow(component: FormComponent): JSX.Element;
+export declare function renderMain(component: FormComponent): JSX.Element;
+export declare function renderNone(component: FormComponent): any;
+export declare namespace element {
+    export import renderNumber = number.renderNumber;
+    export import renderNumberRangeSlider = number.renderNumberRangeSlider;
+    export import renderNumberSlider = number.renderNumberSlider;
+    export import renderAutoComplete = selectors.renderAutoComplete;
+    export import renderCheckBox = selectors.renderCheckBox;
+    export import renderCheckGroup = selectors.renderCheckGroup;
+    export import renderDropDownList = selectors.renderDropDownList;
+    export import renderItemPicker = selectors.renderItemPicker;
+    export import renderListBox = selectors.renderListBox;
+    export import renderRadioGroup = selectors.renderRadioGroup;
+    export import renderPasswordBox = text.renderPasswordBox;
+    export import renderTextArea = text.renderTextArea;
+    export import renderTextBox = text.renderTextBox;
+    export import renderDatePicker = datetime.renderDateTimePicker;
+    export import renderDateRangePicker = datetime.renderDateRangePicker;
+    export import renderTimePicker = datetime.renderDateTimePicker;
+    export import renderDateTimePicker = datetime.renderDateTimePicker;
+    export import renderGeometryPicker = geometry.renderGeometryPicker;
+    export import renderFilePicker = files.renderFilePicker;
+    export import renderScanner = scanner.renderScanner;
+    function renderSection(component: FormComponent, element: defs.Element): JSX.Element;
+    function renderHorizontalRule(component: FormComponent, element: defs.Element): JSX.Element;
+    function renderText(component: FormComponent, element: defs.Element): JSX.Element;
+    function renderImage(component: FormComponent, element: defs.Element): JSX.Element;
+    function renderButtonBar(component: FormComponent, element: defs.Element): JSX.Element;
+    function renderCustom(component: FormComponent, element: defs.Element): JSX.Element;
+}
+export declare function getElementProps(component: FormComponent, element: defs.Element): FormElementProps;

package/esm/forms/renderers.js

@@ -0,0 +1 @@
+import React from"react";import{FormComponent,FormElement}from"./FormComponent.js";import*as defs from"./FormDefinition.js";import FormElementOuter from"./FormElementOuter.js";import{renderChevronDown,renderChevronUp}from"./assets/stock.js";import{renderDescription,renderTitle,renderError,renderFocus}from"./common.js";import{CssClasses,FormElementTypes,Orientation}from"./constants.js";import*as datetime from"./datetime.js";import*as files from"./files.js";import*as geometry from"./geometry.js";import{getKeyString}from"./keyboard.js";import*as number from"./number.js";import*as scanner from"./scanner.js";import*as selectors from"./selectors.js";import*as text from"./text.js";import{makeSafeClassName,sort,makeUniqueId}from"./utils.js";function renderForm(e){const o=e.props.host,n={host:o,type:"header",children:[]},s={host:o,type:"body",children:[]},m={host:o,type:"main",children:[]},a={host:o,type:"footer",children:[]},r={host:o,type:"body",children:[]},l={},i=[];function t(e){if(void 0===e)return s;if("header"===e)return n;if("footer"===e)return a;let r;r="object"==typeof e?e.name:e;let t=(e=>{for(const r of i)if(r.name===e)return r})(r);return void 0===t&&(t={host:o,name:r,type:"section",children:[]},i.push(t)),t}function c(e){return"Section"!==e}function d(e){return e===n||e===s||e===a?`${e.type}-section`:e.name}const p=sort(e.props.host.form.elements);for(const R in p){var u,f=p[R];if(!0!==(h=f).hoisted&&(!1!==h.visible&&c(h.type)))if(!0!==f.overlay){let e=t(f.section);void 0!==f.rowNumber&&(u=d(e),e=function(e,r){let t=l[r];t=t||(l[r]=[]);let n=t[e];return void 0===n&&(n=t[e]={host:o,type:"row",children:[]}),n}(f.rowNumber,u)),e.children.push(React.createElement(FormElement,{key:R,host:o,type:"element",name:R}))}else r.children.push(React.createElement(FormElement,{key:R,host:o,type:"element",name:R}))}var h,y;const v=[];if(0<n.children.length&&v.push(React.createElement(FormComponent,{key:"header",...n})),0<r.children.length)v.push(React.createElement(FormComponent,{key:"main",...r}));else{E(s);for(const N of i)y=N.name,null!=(y=p[y])&&(c(y.type)||!0===y.hoisted||!1===y.visible)||E(t(N.name));0<m.children.length&&v.push(React.createElement(FormComponent,{key:"main",...m}))}function E(e){var r=e===s?"body":`$${e.name}`,t=d(e),n=l[t];if(n)for(const a of Object.keys(n).sort((e,r)=>parseInt(e)-parseInt(r))){var o=n[a];1<o.children.length?e.children.push(React.createElement(FormComponent,{key:"row",...o})):1===o.children.length&&e.children.push(...o.children)}0<e.children.length&&m.children.push(React.createElement(FormComponent,{key:r,...e}))}return 0<a.children.length&&v.push(React.createElement(FormComponent,{key:"footer",...a})),React.createElement("div",{className:"gcx-forms defaults custom",ref:function(e){o.renderFocus(e)},onKeyDown:function(e){"enter"===getKeyString(e)&&(e.target instanceof HTMLButtonElement||o.post("clicked"))}},v)}function renderHeader(e){return React.createElement("div",{className:"Header"},e.props.children)}function renderFooter(e){return React.createElement("div",{className:"Footer"},e.props.children)}function renderBody(e){return React.createElement("div",{className:"Body"},e.props.children)}function renderRow(e){return React.createElement("div",{className:"Row"},e.props.children)}function renderMain(e){return React.createElement("div",{className:"Main"},e.props.children)}function renderNone(e){return React.createElement("div",{className:"None"},"--- Unsupported Form Element (name=",e.props.name,") ---")}var element;function getElementProps(e,r){return{...r,element:r,name:e.props.name,enabled:r.enabled,setProperty:e.setProperty,setValue:e.setValue,raiseEvent:e.raiseEvent,value:r.value}}!function(e){e.renderNumber=number.renderNumber,e.renderNumberRangeSlider=number.renderNumberRangeSlider,e.renderNumberSlider=number.renderNumberSlider,e.renderAutoComplete=selectors.renderAutoComplete,e.renderCheckBox=selectors.renderCheckBox,e.renderCheckGroup=selectors.renderCheckGroup,e.renderDropDownList=selectors.renderDropDownList,e.renderItemPicker=selectors.renderItemPicker,e.renderListBox=selectors.renderListBox,e.renderRadioGroup=selectors.renderRadioGroup,e.renderPasswordBox=text.renderPasswordBox,e.renderTextArea=text.renderTextArea,e.renderTextBox=text.renderTextBox,e.renderDatePicker=datetime.renderDateTimePicker,e.renderDateRangePicker=datetime.renderDateRangePicker,e.renderTimePicker=datetime.renderDateTimePicker,e.renderDateTimePicker=datetime.renderDateTimePicker,e.renderGeometryPicker=geometry.renderGeometryPicker,e.renderFilePicker=files.renderFilePicker,e.renderScanner=scanner.renderScanner,e.renderSection=function(r,t){const n=r.props.host,o=r.props.name;let e=void 0;null!=t&&t.format&&(e=t.format),e=void 0!==e&&null!==e?e:defs.DEFAULT_SECTION_FORMAT;const a="accordion-section"===e;var s=a||"collapsible-section"===e;const m=[t.type,makeSafeClassName(o),e];t.styleName&&m.push(makeSafeClassName(t.styleName));let l=null,i;var c=makeUniqueId(o);let d="content";if(s){let e="form-element-title";t.collapsed&&(e+=" collapsed",d+=" collapsed");var p=(t.collapsed?renderChevronDown:renderChevronUp)();l=renderTitle(t,n,c,"caption"),i=React.createElement("button",{className:e,onClick:function(){a&&t.collapsed?n.updateAccordionSections(o):(t.collapsed=!t.collapsed,r.forceUpdate())},ref:e=>renderFocus(e,o,n)},l||React.createElement("span",{className:"caption"}),p)}else l=renderTitle(t,n,c),i=l;var u=renderDescription(t,n,c),s=renderError(t,n),c=null===(p=null===l||void 0===l?void 0:l.props)||void 0===p?void 0:p.id,p=null===(p=null==u?void 0:u.props)||void 0===p?void 0:p.id;return React.createElement("div",{"aria-labelledby":c,"aria-describedby":p,className:m.join(" ")},i,React.createElement("div",{className:d},u,s,r.props.children))},e.renderHorizontalRule=function(e,r){e=e.props.name;const t=[FormElementTypes.HORIZONTALRULE,makeSafeClassName(e)];return r.styleName&&t.push(makeSafeClassName(r.styleName)),React.createElement("hr",{className:t.join(" ")})},e.renderText=function(e,r){var t=e.props.name;const n=[r.type,makeSafeClassName(t)];return React.createElement(FormElementOuter,{className:n.join(" "),component:e,element:r})},e.renderImage=function(e,r){const{host:t,name:n}=e.props;let o,a;var s=r.size;"number"==typeof s&&(a=s,o=s),"object"==typeof s&&("number"==typeof s.width&&(o=s.width),"number"==typeof s.height&&(a=s.height));let m=void 0;"string"==typeof(s=r.value)&&(m=s);const l=[r.type,makeSafeClassName(n)];return s=t.renderText(r.tooltip),React.createElement(FormElementOuter,{className:l.join(" "),component:e,element:r},React.createElement("img",{src:m,title:s,width:o,height:a}))},e.renderButtonBar=function(e,r){const{host:n,name:o}=e.props;var t=sort(r.items);let a=void 0;const s=[];for(const h in t){var m=t[h],l=e.enabled&&!1!==m.enabled&&!1!==m.visible,i={__html:n.renderHtml(m.label,defs.HTMLContentCategory.Phrasing)},c=n.renderText(m.tooltip),d=t[h].value;l&&void 0===a&&(a=h);var p=m.styleName?makeSafeClassName(m.styleName):void 0;!1!==m.visible&&s.push(React.createElement("button",{className:p,key:h,disabled:!l,title:c,ref:function(r){return function(e){null!==e&&r===a&&n.renderFocus(e,o)}}(h),onClick:function(r,t){return function(e){n.post("clicked",{name:o,item:r,value:t})}}(h,d),dangerouslySetInnerHTML:i}))}const u=[r.type,makeSafeClassName(o)],f=["items"];return r.orientation===Orientation.VERTICAL&&f.push("vertical"),React.createElement(FormElementOuter,{className:u.join(" "),component:e,element:r,errorClassName:CssClasses.ERROR},React.createElement("div",{className:f.join(" ")},s))},e.renderCustom=function(e,r){var t=e.props.name;e.elementRegistration||console.warn(`Unable to render custom form element '${t}' of type '${r.customType}'.`);const n=[r.type,makeSafeClassName(t)];return React.createElement(FormElementOuter,{className:n.join(" "),component:e,element:r,errorClassName:CssClasses.ERROR},e.elementRegistration?React.createElement(e.elementRegistration.component,getElementProps(e,r)):`--- ${r.customType} ---`)}}(element=element||{});export{renderForm,renderHeader,renderFooter,renderBody,renderRow,renderMain,renderNone,element,getElementProps};

package/esm/forms/scanner.d.ts

@@ -0,0 +1,3 @@
+import { FormComponent } from "./FormComponent";
+import { Element } from "./FormDefinition";
+export declare function renderScanner(component: FormComponent, element: Element): JSX.Element;

package/esm/forms/scanner.js

@@ -0,0 +1 @@
+import React,{useState,useEffect,useRef}from"react";import FormElementOuter from"./FormElementOuter.js";import{renderRemove,renderScanBarcode,renderScanQrcode,renderScanMulti}from"./assets/stock.js";import{useFocusCallback}from"./common.js";import{CssClasses,ScanType,SCANNER_DEFAULT_ROW_COUNT}from"./constants.js";import{getKeyString}from"./keyboard.js";import{isScanRef,makeSafeClassName}from"./utils.js";function renderScanner(e,a){return React.createElement(Scanner,{component:e,element:a})}const CAMERA_READY_TIMEOUT_MS=1500;var EntryMethod;!function(e){e.Camera="camera",e.Manual="manual"}(EntryMethod=EntryMethod||{});const convertToScanRef=(e,a,t)=>{var r=typeof e,n="number"==r||"string"==r?e.toString():null===(n=null===e||void 0===e?void 0:e.value)||void 0===n?void 0:n.toString();if(n)return a=a||(null===e||void 0===e?void 0:e.entryMethod)||EntryMethod.Manual,{refValueType:"scan",value:n,scanType:t=t||(null===e||void 0===e?void 0:e.scanType),entryMethod:a}},Scanner=e=>{const[t,o]=useState(),[a,r]=useState(""),[n,c]=useState(!1),[s,l]=useState(!0),d=useRef(),{component:i,element:m}=e,{host:u,name:v}=i.props;var p="barcode"!==m.scanType;let E=m.value;useEffect(()=>(c(!0),()=>c(!1)),[]),useEffect(()=>{n&&m.enabled&&m.autoActivate&&(m.autoActivate=!1,R())},[n]),useEffect(()=>{const e=()=>{l(!1),setTimeout(()=>{n&&l(!0)},CAMERA_READY_TIMEOUT_MS)};return t&&e(),()=>{t&&(t.reset(),e())}},[t]);var y=useFocusCallback(i);useEffect(()=>{!isScanRef(E)&&E&&(m.value=E=convertToScanRef(E));var e=(null===E||void 0===E?void 0:E.value)||"";a!==e&&r(e)},[E]);var S=u.renderText(m.tooltip);const f=(e,a,t)=>{e&&(E&&E.value===e||(t=convertToScanRef(e,a,t),m.value=t,r(e),u.post("changed",{name:i.props.name,value:t})))},C=async e=>{var a=await import("@zxing/library");let t=void 0;return e===ScanType.QrCode?t=[a.BarcodeFormat.QR_CODE,a.BarcodeFormat.DATA_MATRIX,a.BarcodeFormat.AZTEC,a.BarcodeFormat.PDF_417,a.BarcodeFormat.MAXICODE]:e===ScanType.BarCode&&(t=[a.BarcodeFormat.CODABAR,a.BarcodeFormat.CODE_39,a.BarcodeFormat.CODE_93,a.BarcodeFormat.CODE_128,a.BarcodeFormat.EAN_8,a.BarcodeFormat.EAN_13,a.BarcodeFormat.ITF,a.BarcodeFormat.RSS_14,a.BarcodeFormat.RSS_EXPANDED,a.BarcodeFormat.UPC_A,a.BarcodeFormat.UPC_E]),t},R=async()=>{if(t)return o(null),void u.post("cancel",{name:i.props.name,type:"cancel"});var e;const a=await import("@zxing/library");n&&(e=await(async e=>{var a=await import("@zxing/library"),e=await C(e);const t=new Map;return t.set(a.DecodeHintType.POSSIBLE_FORMATS,e),t})(m.scanType),e=new a.BrowserMultiFormatReader(e),o(e),await(async e=>{try{var a=await e.listVideoInputDevices();if(!a||0==a.length)throw new DOMException("No video input devices detected.");const r=await e.decodeOnceFromVideoDevice(void 0,d.current),n=await C(ScanType.QrCode);var t=n.indexOf(r.getBarcodeFormat())<0?ScanType.BarCode:ScanType.QrCode;f(r.toString(),EntryMethod.Camera,t),o(null)}catch(e){e instanceof DOMException&&(m.error=e.message,o(null))}})(e))};var T=e=>{t&&o(null),f(e.currentTarget.value,EntryMethod.Manual)},e=e=>{r(e.currentTarget.value)};const F=[m.type,makeSafeClassName(v)];return React.createElement(FormElementOuter,{className:F.join(" "),component:i,element:m,errorClassName:CssClasses.ERROR},React.createElement("div",{className:"items"},React.createElement("div",{className:"scanner-container"},React.createElement("video",{className:"video-element",hidden:!t,ref:d}),React.createElement("div",{className:"user-controls"},p?React.createElement("textarea",{className:"manual-entry",disabled:!(i.enabled&&m.manualEntry),onBlur:T,onChange:e,onKeyDown:e=>e.stopPropagation(),ref:y,rows:m.size||SCANNER_DEFAULT_ROW_COUNT,spellCheck:!1,title:S,value:a}):React.createElement("input",{className:"manual-entry",disabled:!(i.enabled&&m.manualEntry),onBlur:T,onChange:e,onKeyDown:e=>{var a=e.currentTarget;"enter"===getKeyString(e)&&(e.stopPropagation(),t&&o(null),f(a.value,EntryMethod.Manual))},ref:y,title:S,type:"text",value:a}),React.createElement("button",{className:t?"scan activated":"scan",disabled:!(i.enabled&&s),title:S,onClick:e=>R(),ref:y},(t?renderRemove:m.scanType===ScanType.BarCode?renderScanBarcode:m.scanType===ScanType.QrCode?renderScanQrcode:renderScanMulti)())))))};export{renderScanner};

package/esm/forms/selectors.d.ts

@@ -0,0 +1,9 @@
+import { FormComponent } from "./FormComponent";
+import * as defs from "./FormDefinition";
+export declare function renderCheckBox(component: FormComponent, element: defs.Element): JSX.Element;
+export declare function renderCheckGroup(component: FormComponent, element: defs.Element): JSX.Element;
+export declare function renderItemPicker(component: FormComponent, element: defs.Element): JSX.Element;
+export declare function renderListBox(component: FormComponent, element: defs.Element): JSX.Element;
+export declare function renderDropDownList(component: FormComponent, element: defs.Element): JSX.Element;
+export declare function renderRadioGroup(component: FormComponent, element: defs.Element): JSX.Element;
+export declare function renderAutoComplete(component: FormComponent, element: defs.Element): JSX.Element;

package/esm/forms/selectors.js

@@ -0,0 +1 @@
+import React from"react";import{ExclusiveTimer}from"./ExclusiveTimer.js";import*as defs from"./FormDefinition.js";import FormElementOuter from"./FormElementOuter.js";import{renderFocus}from"./common.js";import{CssClasses,Orientation}from"./constants.js";import{getKeyString}from"./keyboard.js";import{isDataRef,isGeometryRef,makeSafeClassName,sortItems,setClass}from"./utils.js";function renderCheckBox(e,n){const{host:a,name:r}=e.props,t=n.value;var o={__html:a.renderHtml(n.label)},l=a.renderText(n.tooltip);const s=[n.type,makeSafeClassName(r)];return React.createElement(FormElementOuter,{className:s.join(" "),component:e,element:n,errorClassName:CssClasses.ERROR},React.createElement("label",{className:"items",title:l},React.createElement("input",{type:"checkbox",disabled:!e.enabled,ref:function(e){function t(){setClass(e.parentElement,"focus",document.activeElement===e)}null!==e&&(e.disabled||a.renderFocus(e,r),e.checked=n.checked=!0===n.checked,e.onfocus=t,(e.onblur=t)())},onChange:function(e){e=n.checked=e.currentTarget.checked,a.post("changed",{name:r,value:e?t:void 0})}}),React.createElement("div",{className:"inline",dangerouslySetInnerHTML:o})))}function renderCheckGroup(e,a){const{host:r,name:o}=e.props,l=sortItems(a);let s;function c(){const e=[];for(const n in l){var t=l[n];t.checked&&e.push(t)}s=0===e.length?a.value=void 0:a.value={refValueType:"items",items:e}}a.current=void 0,c();const t=[];for(const p in l){const v=l[p];v.checked=!0===v.checked;var n=e.enabled&&!1!==v.enabled,i=r.renderText(v.tooltip),u={__html:r.renderHtml(v.label)},d=v.styleName?makeSafeClassName(v.styleName):void 0;t.push(React.createElement("label",{className:d,key:p,title:i},React.createElement("input",{type:"checkbox",disabled:!n,ref:function(n){return function(e){function t(){setClass(e.parentElement,"focus",document.activeElement===e)}null!==e&&(e.disabled||r.renderFocus(e,o),e.checked=!0===l[n].checked,e.onfocus=t,(e.onblur=t)())}}(p),onChange:function(t,n){return function(e){e=l[t].checked=e.currentTarget.checked;c(),r.post("changed",{name:o,item:t,value:e?n:void 0})}}(p,v.value)}),React.createElement("div",{className:"inline",dangerouslySetInnerHTML:u})))}const m=[a.type,makeSafeClassName(o)],f=["items"];return a.orientation===Orientation.HORIZONTAL&&f.push("horizontal"),React.createElement(FormElementOuter,{className:m.join(" "),component:e,element:a,errorClassName:CssClasses.ERROR},React.createElement("div",{className:f.join(" ")},t))}function renderItemPicker(r,o){const{host:s,name:c}=r.props,i=o.items;let u,l,d,m=o.state;function f(){const e=[];for(const n in i){var t=i[n];t.checked&&e.push(t)}u=0===e.length?o.value=void 0:o.value={refValueType:"items",items:e}}function p(e,t=!0){let n=m.keyToIndex[e];if(null==n||null===n){if(!t)return;m.keyToIndex[e]=m.length,m.push({}),n=m.keyToIndex[e]}return m[n]}function v(e,t){i[e].checked=!!t,p(e).checked=t}function e(o,l){return function(e){var t,n=!!e.currentTarget.checked||void 0;if(t=l,e=n,i[t].checked!==e){if("checkbox"===o)v(l,n);else if(n)for(const r in i){var a=r===l||void 0;v(r,a)}f(),s.post("changed",{name:c,value:u}),s.renderState(c,"geometry",m)}}}function t(e){p(e.currentTarget.dataset.id).pending=!0,s.renderState(c,"geometry",m)}function n(e){delete p(e.currentTarget.dataset.id).pending,s.renderState(c,"geometry",m)}function a(e){p(e.currentTarget.dataset.id).focused=!0,s.renderState(c,"geometry",m)}function b(e){delete p(e.currentTarget.dataset.id).focused,s.renderState(c,"geometry",m)}f(),function(){void 0!==m&&null!==m||(m=o.state=[]),m.keyToIndex||(m.keyToIndex={});const e={};for(const n in o.items){var t=p(n,!1);t&&(e[n]=t)}m=o.state=[],m.keyToIndex={};for(const a in e)m.keyToIndex[a]=m.length,m.push(e[a])}();const h=[];let g;switch(o.selectionMode){case"single":g="radio";break;case"multiple":g="checkbox"}for(const I in i){var y,k,R,C,E=i[I];p(I).content=function(e){if(e){if(isGeometryRef(e))return e.geometry;if(isDataRef(e)&&e.data)return e.data.geometry}}(E.value),!1!==E.visible&&(y=r.enabled&&!1!==E.enabled,k=s.renderText(E.tooltip),R={__html:s.renderHtml(E.label)},C=g?void 0:0,E=E.styleName?makeSafeClassName(E.styleName):void 0,h.push(React.createElement("label",{className:E,key:I,"data-id":I,title:k,onMouseOver:t,onMouseOut:n,onFocus:a,onBlur:b,tabIndex:C},g&&React.createElement("input",{type:g,name:r.id,disabled:!y,ref:function(n){return function(e){function t(){setClass(e.parentElement,"focus",document.activeElement===e)}null!==e&&(e.disabled||s.renderFocus(e,c),p(n).checked=e.checked=!0===i[n].checked,e.onfocus=t,(e.onblur=t)())}}(I),onClick:e(g,I),value:I}),React.createElement("span",{className:"inline",dangerouslySetInnerHTML:R}))))}var N=s.renderText(o.prompt);const T=[o.type,makeSafeClassName(c)];function x(){var e=l.value.toLowerCase();for(const t in i){const n=i[t];if(e){const a=s.renderText(n.label).toLowerCase();n.visible=-1!==a.indexOf(e)}else n.visible=!0}d.hidden=!e||void 0,r.forceUpdate()}var S="multiple"===o.selectionMode&&0<h.length;const O=["items"];return o.orientation===Orientation.HORIZONTAL&&O.push("horizontal"),React.createElement(FormElementOuter,{className:T.join(" "),component:r,element:o,errorClassName:CssClasses.ERROR,ref:function(e){null===e?s.renderState(c,"geometry"):s.renderState(c,"geometry",m)}},o.showFilter&&React.createElement("div",{className:"filter-container"},React.createElement("input",{type:"text",ref:e=>{l=e,renderFocus(e,c,s)},placeholder:N,disabled:!r.enabled,onChange:x}),React.createElement("button",{ref:e=>d=e,disabled:!r.enabled,hidden:!0,onClick:function(){l.value="",x()}},s.renderText("@common-clear"))),S&&React.createElement("div",null,React.createElement("button",{disabled:!r.enabled,onClick:()=>function(){for(const e in i)!1!==i[e].visible&&v(e,!0);f(),r.forceUpdate(),s.post("changed",{name:c,value:u})}()},s.renderText("@common-all")),React.createElement("button",{disabled:!r.enabled,onClick:()=>function(){for(const e in i)v(e,void 0);f(),r.forceUpdate(),s.post("changed",{name:c,value:u})}()},s.renderText("@common-none"))),React.createElement("div",{className:O.join(" ")},h))}function renderListBox(r,a){const{host:o,name:l}=r.props,s=sortItems(a);let c;!function(){const e=[];for(const n in s){var t=s[n];t.checked&&e.push(t)}c=0===e.length?a.value=void 0:a.value={refValueType:"items",items:e}}();const e=[];for(const f in s){const p=s[f];var t=o.renderText(p.label);const i=o.renderText(p.tooltip);p.checked=!0===p.checked;var n=p.styleName?makeSafeClassName(p.styleName):void 0;e.push(React.createElement("option",{className:n,key:f,title:i,value:f,selected:!0===p.checked,disabled:!1===p.enabled},t))}e.length<1&&(r.enabled=!1);const i=o.renderText(a.tooltip),u=[a.type,makeSafeClassName(l)];let d=void 0;var m=a.size;return"number"==typeof m&&(d=m),React.createElement(FormElementOuter,{className:u.join(" "),component:r,element:a,errorClassName:CssClasses.ERROR,htmlElementType:"label"},React.createElement("select",{multiple:!0,disabled:!r.enabled,size:d,title:i,ref:e=>renderFocus(e,l,o),onChange:function(e){const t=e.currentTarget.options;for(let e=0;e<t.length;e++){var n=t.item(e),a=n.value;s[a].checked=n.selected}r.forceUpdate(),o.post("changed",{name:l})}},e))}function renderDropDownList(a,r){const{host:o,name:l}=a.props,s=sortItems(r);let e=a.enabled;r.current;let t=void 0;for(const f in s){void 0===t&&(t=[],void 0===r.current&&(u=o.renderText(r.prompt),t.push(React.createElement("option",{key:"none",value:"none",selected:!0},u))));var n=s[f],c=f===r.current,i=o.renderText(n.label);const d=o.renderText(n.tooltip);var u=n.styleName?makeSafeClassName(n.styleName):void 0;t.push(React.createElement("option",{className:u,ref:function(t){return function(e){null!==e&&(e.selected=t)}}(c),key:"$"+f,value:"$"+f,title:d,disabled:!1===n.enabled},i))}void 0===t&&(e=!1);const d=o.renderText(r.tooltip),m=[r.type,makeSafeClassName(l)];return React.createElement(FormElementOuter,{className:m.join(" "),component:a,element:r,errorClassName:CssClasses.ERROR,htmlElementType:"label"},React.createElement("select",{disabled:!e,title:d,ref:e=>renderFocus(e,l,o),onChange:function(e){const t=e.currentTarget.value;var n;"$"===t[0]&&(n=t.substring(1),e=s[n].value,r.current=n,r.value=e,a.forceUpdate(),o.post("changed",{name:l,item:n,value:e}))}},t))}function renderRadioGroup(e,a){const{host:r,name:o}=e.props;var t=sortItems(a);let l=a.current;const s=a.current,n=[];for(const v in t){var c=t[v],i=e.enabled&&!1!==c.enabled,u=r.renderText(c.tooltip),d={__html:r.renderHtml(c.label)};i&&void 0===l&&(l=v);var m=c.styleName?makeSafeClassName(c.styleName):void 0;n.push(React.createElement("label",{className:m,key:v,title:u},React.createElement("input",{type:"radio",name:e.id,disabled:!i,ref:function(n){return function(e){function t(){setClass(e.parentElement,"focus",document.activeElement===e)}null!==e&&(l===n&&r.renderFocus(e,o),e.checked=s===n,e.onfocus=t,(e.onblur=t)())}}(v),onClick:function(t,n){return function(e){e.currentTarget.checked&&a.current!==t&&(a.current=t,a.value=n,r.post("changed",{name:o,item:t,value:n}))}}(v,c.value)}),React.createElement("div",{className:"inline",dangerouslySetInnerHTML:d})))}const f=[a.type,makeSafeClassName(o)],p=["items"];return a.orientation===Orientation.HORIZONTAL&&p.push("horizontal"),React.createElement(FormElementOuter,{className:f.join(" "),component:e,element:a,errorClassName:CssClasses.ERROR},React.createElement("div",{className:p.join(" ")},n))}function renderAutoComplete(a,c){const{host:i,name:u}=a.props;let d=i.renderText(c.label);"string"==typeof d&&"\n"===d[d.length-1]&&(d=d.substring(0,d.length-1));let m=c.value;const f=sortItems(c),p=a.timer||(a.timer=new ExclusiveTimer);let v=c.state;void 0!==v&&null!==v||(v=c.state={nextAction:defs.PreSelectionAction.None,selectDisabled:!0,selectValue:""}),v.nextAction===defs.PreSelectionAction.None&&c.autoActivate&&a.enabled&&"string"==typeof d&&""!==d&&(c.autoActivate=!1,v.nextAction=defs.PreSelectionAction.RetrieveSuggestions),c.label=d,c.value=m;let t=c.delay;"number"==typeof t&&0*t<t||(t=300);let n=c.minLength;"number"!=typeof n&&(n=parseInt(String(n))),isNaN(n)&&(n=3);const e=function(e){return e.length>=n?e:""},r={},o={},l={},s={};let b=void 0,h=void 0;const g=[];let y;if(a.enabled)for(var k in f){var R=f[k];const d=i.renderText(R.label),w=i.renderText(R.tooltip);var C=!1!==R.enabled;k=C?(void 0!==b?(o[k]=h,r[h]=k):b=k,h=k,l[k]=d,void 0===s[d]&&(s[d]=k),"$"+k):"!"+k;var E=k===v.selectValue;let e=E?"selected":void 0;e=C?e:"disabled",R.styleName&&(e=e?e+" ":"",e+=makeSafeClassName(R.styleName));E=E?e=>y=e:void 0;g.push(React.createElement("li",{title:w,"data-value":k,className:e,ref:E},d))}void 0!==h&&(o[b]=h,r[h]=b);a.enabled;let N=null,T=null,x=null;function S(){return null!==N.querySelector("input:focus")}function O(){v.selectDisabled=!0}function I(e,t){let n=v.selectValue;n="$"===n[0]?(n=n.substring(1),e[n]):t,T.value=l[n],v.selectValue="$"+n,T.select(),a.forceUpdate()}function D(e){c.current=e;var t=f[e];c.value=m=t.value,c.label=T.value=d=l[e],S()&&T.select(),i.post("changed",{name:u,value:m,argument:d})}function F(){if(p.reset(),!v.selectDisabled){O();const e=v.selectValue;if("$"===e[0])return D(e.substring(1)),a.forceUpdate(),1}if(T.value!==c.label)return c.current=void 0,c.label=d=T.value,c.value=m=void 0,S()&&T.select(),i.post("changed",{name:u,value:m,argument:d}),a.forceUpdate(),1;a.forceUpdate()}function A(){0<e(T.value).length?(c.items={message:{enabled:!1,label:{status:"pending"}}},i.post("suggest",{name:u,value:m,argument:T.value,cancellationToken:p.cancellationToken}),v.selectDisabled=!1,v.selectValue=""):(c.items={},O()),a.forceUpdate()}d=c.label=i.renderText(c.label);let L=10;var j=c.size;"number"==typeof j&&0*j<j&&(L=j),L=Math.min(L,g.length);var P=i.renderText(c.prompt);const w=i.renderText(c.tooltip),H=[c.type,makeSafeClassName(u),CssClasses.DROPDOWN];j=0<g.length&&!v.selectDisabled?void 0:{display:"none"};return React.createElement(FormElementOuter,{className:H.join(" "),component:a,element:c,errorClassName:CssClasses.ERROR,htmlElementType:"label",ref(e){if(null!==(N=e)?(p.resume(A),S()||(T.value=d,T.disabled||i.renderFocus(T,u))):p.suspend(),e&&x&&y){var t=x.getBoundingClientRect(),n=y.getBoundingClientRect(),a=t.top,r=t.bottom,t=n.top,n=n.bottom;let e=0;r<n?e=n-r:t<a&&(e=t-a),x.scrollTop+=e}if(e&&v.nextAction===defs.PreSelectionAction.RetrieveSuggestions&&setTimeout(()=>{c.items=void 0,i.post("suggest",{name:u,value:m,argument:d}),v.nextAction=defs.PreSelectionAction.SelectFirstItem}),e&&v.nextAction===defs.PreSelectionAction.SelectFirstItem&&c.items){v.nextAction=defs.PreSelectionAction.None;var o=d.toLowerCase();let e;for(const s in f){var l=f[s];if(l&&l.label)if(i.renderText(l.label).toLowerCase()===o){e=s;break}}e&&setTimeout(()=>D(e))}},onKeyDownCapture(e){return"enter"===getKeyString(e)||"tab"===getKeyString(e)&&!v.selectDisabled?F()?(e.preventDefault(),e.stopPropagation(),!1):void 0:"escape"===getKeyString(e)?(p.reset(),T.value=d,T.select(),O(),a.forceUpdate(),e.preventDefault(),e.stopPropagation(),!1):"arrowdown"===getKeyString(e)?(v.selectDisabled?(p.reset(),p.start(0,A)):void 0!==b&&I(r,b),e.preventDefault(),e.stopPropagation(),!1):"arrowup"===getKeyString(e)?(v.selectDisabled?(p.reset(),p.start(0,A)):void 0!==b&&I(o,h),e.preventDefault(),e.stopPropagation(),!1):void 0},onBlurCapture(e){F()},onFocusCapture(e){e.target===T&&T.select()},onMouseDown(e){if(a.enabled){var t,n=e.target;if(n instanceof HTMLElement&&(!x.contains(n)||(t=x.querySelector(":hover"))instanceof HTMLLIElement&&("$"===(t=t.attributes["data-value"].value)[0]&&(v.selectValue=t,F()))),n!==T)return T.focus(),e.preventDefault(),e.stopPropagation(),!1}},onTouchStart(e){if(a.enabled){var t,n=e.target;if(n instanceof HTMLElement&&(!x.contains(n)||(t=n.attributes["data-value"].value)&&"$"===t[0]&&(v.selectValue=t,F())),n!==T)return e.preventDefault(),e.stopPropagation(),!1}},onChangeCapture(e){p.reset(),O(),p.start(t,A)}},React.createElement("input",{id:a.id,type:"text",disabled:!a.enabled,placeholder:P,title:w,ref:e=>T=e}),React.createElement("div",{className:"relative"},React.createElement("ul",{className:"suggestions",style:j,tabIndex:-1,ref:e=>x=e},g)))}export{renderCheckBox,renderCheckGroup,renderItemPicker,renderListBox,renderDropDownList,renderRadioGroup,renderAutoComplete};

package/esm/forms/styles/daterange.css

@@ -0,0 +1 @@
+.SimpleDatePicker .dropdown,.DateRangePicker .dropdown{position:absolute;padding:0 1em 1em 1em;overflow:auto;text-align:center;background-color:#fff;box-sizing:border-box;box-shadow:0 .313em .8em rgba(0,0,0,.2);transition:all .3s ease-in-out;z-index:1;right:0}.SimpleDatePicker .dropdown .rdrCalendarWrapper,.DateRangePicker .dropdown .rdrCalendarWrapper{width:100%}.SimpleDatePicker .dropdown .rdrCalendarWrapper .rdrDateDisplayWrapper,.DateRangePicker .dropdown .rdrCalendarWrapper .rdrDateDisplayWrapper{display:none}.SimpleDatePicker .dropdown .rdrCalendarWrapper .rdrMonths .rdrMonth,.DateRangePicker .dropdown .rdrCalendarWrapper .rdrMonths .rdrMonth{width:100%}.SimpleDatePicker .dropdown .rdrCalendarWrapper .rdrMonths .rdrMonth .rdrMonthName,.DateRangePicker .dropdown .rdrCalendarWrapper .rdrMonths .rdrMonth .rdrMonthName{display:none}.SimpleDatePicker .dropdown .rdrCalendarWrapper .rdrMonths .rdrMonth .rdrDays .rdrDayNumber,.DateRangePicker .dropdown .rdrCalendarWrapper .rdrMonths .rdrMonth .rdrDays .rdrDayNumber{top:0}.SimpleDatePicker .dropdown .rdrCalendarWrapper .rdrMonthAndYearWrapper,.DateRangePicker .dropdown .rdrCalendarWrapper .rdrMonthAndYearWrapper{padding-top:0}.SimpleDatePicker .dropdown .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers,.DateRangePicker .dropdown .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers{display:inherit !important}.SimpleDatePicker .dropdown .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrMonthPicker select,.SimpleDatePicker .dropdown .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrYearPicker select,.DateRangePicker .dropdown .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrMonthPicker select,.DateRangePicker .dropdown .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrMonthAndYearPickers .rdrYearPicker select{padding:10px 30px 10px 10px;position:inherit;width:auto;border:none}.SimpleDatePicker .dropdown .rdrCalendarWrapper button,.SimpleDatePicker .dropdown .rdrDateRangeWrapper button,.DateRangePicker .dropdown .rdrCalendarWrapper button,.DateRangePicker .dropdown .rdrDateRangeWrapper button{margin:0 !important}.SimpleDatePicker .dropdown button.done,.DateRangePicker .dropdown button.done{width:25%;margin-right:0;margin-left:75%}.SimpleDatePicker .rdrCalendarWrapper,.DateRangePicker .rdrCalendarWrapper{box-sizing:border-box;background:#fff;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SimpleDatePicker .rdrMonthAndYearWrapper,.DateRangePicker .rdrMonthAndYearWrapper{box-sizing:inherit;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between}.SimpleDatePicker .rdrMonthAndYearPickers,.DateRangePicker .rdrMonthAndYearPickers{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.SimpleDatePicker .rdrNextPrevButton,.DateRangePicker .rdrNextPrevButton{box-sizing:inherit;cursor:pointer;outline:none}.SimpleDatePicker .rdrMonths,.DateRangePicker .rdrMonths{display:-webkit-box;display:flex}.SimpleDatePicker .rdrMonthsHorizontal>div>div>div,.DateRangePicker .rdrMonthsHorizontal>div>div>div{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.SimpleDatePicker .rdrMonth,.DateRangePicker .rdrMonth{width:27.667em}.SimpleDatePicker .rdrWeekDays,.DateRangePicker .rdrWeekDays{display:-webkit-box;display:flex}.SimpleDatePicker .rdrWeekDay,.DateRangePicker .rdrWeekDay{flex-basis:calc(100% / 7);box-sizing:inherit;text-align:center}.SimpleDatePicker .rdrDays,.DateRangePicker .rdrDays{display:-webkit-box;display:flex;flex-wrap:wrap}.SimpleDatePicker .rdrDateRangeWrapper,.DateRangePicker .rdrDateRangeWrapper{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SimpleDatePicker .rdrDay,.DateRangePicker .rdrDay{box-sizing:inherit;width:calc(100% / 7);position:relative;font:inherit;cursor:pointer}.SimpleDatePicker .rdrDayNumber,.DateRangePicker .rdrDayNumber{display:block;position:relative}.SimpleDatePicker .rdrDayNumber span,.DateRangePicker .rdrDayNumber span{color:#1d2429}.SimpleDatePicker .rdrDayDisabled,.DateRangePicker .rdrDayDisabled{cursor:not-allowed}@supports(-ms-ime-align: auto){.SimpleDatePicker .rdrDay,.DateRangePicker .rdrDay{flex-basis:14.285% !important}}.SimpleDatePicker .rdrSelected,.SimpleDatePicker .rdrInRange,.SimpleDatePicker .rdrStartEdge,.SimpleDatePicker .rdrEndEdge,.DateRangePicker .rdrSelected,.DateRangePicker .rdrInRange,.DateRangePicker .rdrStartEdge,.DateRangePicker .rdrEndEdge{pointer-events:none}.SimpleDatePicker .rdrDayStartPreview,.SimpleDatePicker .rdrDayInPreview,.SimpleDatePicker .rdrDayEndPreview,.DateRangePicker .rdrDayStartPreview,.DateRangePicker .rdrDayInPreview,.DateRangePicker .rdrDayEndPreview{pointer-events:none}.SimpleDatePicker .rdrCalendarWrapper,.DateRangePicker .rdrCalendarWrapper{color:#000;font-size:12px}.SimpleDatePicker .rdrDateDisplayWrapper,.DateRangePicker .rdrDateDisplayWrapper{background-color:#eff2f7}.SimpleDatePicker .rdrMonthAndYearWrapper,.DateRangePicker .rdrMonthAndYearWrapper{-webkit-box-align:center;align-items:center;height:60px;padding-top:10px}.SimpleDatePicker .rdrMonthAndYearPickers,.DateRangePicker .rdrMonthAndYearPickers{font-weight:600}.SimpleDatePicker .rdrMonthAndYearPickers select,.DateRangePicker .rdrMonthAndYearPickers select{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:10px 30px 10px 10px;border-radius:4px;outline:0;color:#3e484f;background:url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;background-position:right 8px center;cursor:pointer;text-align:center}.SimpleDatePicker .rdrMonthAndYearPickers select:hover,.DateRangePicker .rdrMonthAndYearPickers select:hover{background-color:rgba(0,0,0,.07)}.SimpleDatePicker .rdrMonthPicker,.SimpleDatePicker .rdrYearPicker,.DateRangePicker .rdrMonthPicker,.DateRangePicker .rdrYearPicker{margin:0 5px}.SimpleDatePicker .rdrNextPrevButton,.DateRangePicker .rdrNextPrevButton{display:block;width:24px;height:24px;margin:0 .833em;padding:0;border:0;border-radius:5px;background:#eff2f7}.SimpleDatePicker .rdrNextPrevButton:hover,.DateRangePicker .rdrNextPrevButton:hover{background:#e1e7f0}.SimpleDatePicker .rdrNextPrevButton i,.DateRangePicker .rdrNextPrevButton i{display:block;width:0;height:0;padding:0;text-align:center;border-style:solid;margin:auto;-webkit-transform:translate(-3px, 0px);transform:translate(-3px, 0px)}.SimpleDatePicker .rdrPprevButton i,.DateRangePicker .rdrPprevButton i{border-width:4px 6px 4px 4px;border-color:transparent #34495e transparent transparent;-webkit-transform:translate(-3px, 0px);transform:translate(-3px, 0px)}.SimpleDatePicker .rdrNextButton i,.DateRangePicker .rdrNextButton i{margin:0 0 0 7px;border-width:4px 4px 4px 6px;border-color:transparent transparent transparent #34495e;-webkit-transform:translate(3px, 0px);transform:translate(3px, 0px)}.SimpleDatePicker .rdrWeekDays,.DateRangePicker .rdrWeekDays{padding:0 .833em}.SimpleDatePicker .rdrMonth,.DateRangePicker .rdrMonth{padding:0 .833em 1.666em .833em}.SimpleDatePicker .rdrMonth .rdrWeekDays,.DateRangePicker .rdrMonth .rdrWeekDays{padding:0}.SimpleDatePicker .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName,.DateRangePicker .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{display:none}.SimpleDatePicker .rdrWeekDay,.DateRangePicker .rdrWeekDay{font-weight:400;line-height:2.667em;color:#849095}.SimpleDatePicker .rdrDay,.DateRangePicker .rdrDay{background:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;padding:0;line-height:3em;height:3em;text-align:center;color:#1d2429}.SimpleDatePicker .rdrDay:focus,.DateRangePicker .rdrDay:focus{outline:0}.SimpleDatePicker .rdrDayNumber,.DateRangePicker .rdrDayNumber{outline:0;font-weight:300;position:absolute;left:0;right:0;top:0;bottom:0;top:5px;bottom:5px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.SimpleDatePicker .rdrDayToday .rdrDayNumber span,.DateRangePicker .rdrDayToday .rdrDayNumber span{font-weight:500}.SimpleDatePicker .rdrDayToday .rdrDayNumber span:after,.DateRangePicker .rdrDayToday .rdrDayNumber span:after{content:"";position:absolute;bottom:4px;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);width:18px;height:2px;border-radius:2px;background:#3d91ff}.SimpleDatePicker .rdrDayToday:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span:after,.SimpleDatePicker .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span:after,.SimpleDatePicker .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span:after,.SimpleDatePicker .rdrDayToday:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span:after,.DateRangePicker .rdrDayToday:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span:after,.DateRangePicker .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span:after,.DateRangePicker .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span:after,.DateRangePicker .rdrDayToday:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span:after{background:#fff}.SimpleDatePicker .rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,.SimpleDatePicker .rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span,.SimpleDatePicker .rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,.SimpleDatePicker .rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span,.DateRangePicker .rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,.DateRangePicker .rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span,.DateRangePicker .rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,.DateRangePicker .rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span{color:rgba(255,255,255,.85)}.SimpleDatePicker .rdrSelected,.SimpleDatePicker .rdrInRange,.SimpleDatePicker .rdrStartEdge,.SimpleDatePicker .rdrEndEdge,.DateRangePicker .rdrSelected,.DateRangePicker .rdrInRange,.DateRangePicker .rdrStartEdge,.DateRangePicker .rdrEndEdge{background:currentColor;position:absolute;top:5px;left:0;right:0;bottom:5px}.SimpleDatePicker .rdrSelected,.DateRangePicker .rdrSelected{left:2px;right:2px}.SimpleDatePicker .rdrStartEdge,.DateRangePicker .rdrStartEdge{border-top-left-radius:1.042em;border-bottom-left-radius:1.042em;left:2px}.SimpleDatePicker .rdrEndEdge,.DateRangePicker .rdrEndEdge{border-top-right-radius:1.042em;border-bottom-right-radius:1.042em;right:2px}.SimpleDatePicker .rdrSelected,.DateRangePicker .rdrSelected{border-radius:1.042em}.SimpleDatePicker .rdrDayStartOfMonth .rdrInRange,.SimpleDatePicker .rdrDayStartOfMonth .rdrEndEdge,.SimpleDatePicker .rdrDayStartOfWeek .rdrInRange,.SimpleDatePicker .rdrDayStartOfWeek .rdrEndEdge,.DateRangePicker .rdrDayStartOfMonth .rdrInRange,.DateRangePicker .rdrDayStartOfMonth .rdrEndEdge,.DateRangePicker .rdrDayStartOfWeek .rdrInRange,.DateRangePicker .rdrDayStartOfWeek .rdrEndEdge{border-top-left-radius:1.042em;border-bottom-left-radius:1.042em;left:2px}.SimpleDatePicker .rdrDayEndOfMonth .rdrInRange,.SimpleDatePicker .rdrDayEndOfMonth .rdrStartEdge,.SimpleDatePicker .rdrDayEndOfWeek .rdrInRange,.SimpleDatePicker .rdrDayEndOfWeek .rdrStartEdge,.DateRangePicker .rdrDayEndOfMonth .rdrInRange,.DateRangePicker .rdrDayEndOfMonth .rdrStartEdge,.DateRangePicker .rdrDayEndOfWeek .rdrInRange,.DateRangePicker .rdrDayEndOfWeek .rdrStartEdge{border-top-right-radius:1.042em;border-bottom-right-radius:1.042em;right:2px}.SimpleDatePicker .rdrDayStartOfMonth .rdrDayInPreview,.SimpleDatePicker .rdrDayStartOfMonth .rdrDayEndPreview,.SimpleDatePicker .rdrDayStartOfWeek .rdrDayInPreview,.SimpleDatePicker .rdrDayStartOfWeek .rdrDayEndPreview,.DateRangePicker .rdrDayStartOfMonth .rdrDayInPreview,.DateRangePicker .rdrDayStartOfMonth .rdrDayEndPreview,.DateRangePicker .rdrDayStartOfWeek .rdrDayInPreview,.DateRangePicker .rdrDayStartOfWeek .rdrDayEndPreview{border-top-left-radius:1.333em;border-bottom-left-radius:1.333em;border-left-width:1px;left:0px}.SimpleDatePicker .rdrDayEndOfMonth .rdrDayInPreview,.SimpleDatePicker .rdrDayEndOfMonth .rdrDayStartPreview,.SimpleDatePicker .rdrDayEndOfWeek .rdrDayInPreview,.SimpleDatePicker .rdrDayEndOfWeek .rdrDayStartPreview,.DateRangePicker .rdrDayEndOfMonth .rdrDayInPreview,.DateRangePicker .rdrDayEndOfMonth .rdrDayStartPreview,.DateRangePicker .rdrDayEndOfWeek .rdrDayInPreview,.DateRangePicker .rdrDayEndOfWeek .rdrDayStartPreview{border-top-right-radius:1.333em;border-bottom-right-radius:1.333em;border-right-width:1px;right:0px}.SimpleDatePicker .rdrDayStartPreview,.SimpleDatePicker .rdrDayInPreview,.SimpleDatePicker .rdrDayEndPreview,.DateRangePicker .rdrDayStartPreview,.DateRangePicker .rdrDayInPreview,.DateRangePicker .rdrDayEndPreview{background:rgba(255,255,255,.09);position:absolute;top:3px;left:0px;right:0px;bottom:3px;pointer-events:none;border:0px solid currentColor;z-index:1}.SimpleDatePicker .rdrDayStartPreview,.DateRangePicker .rdrDayStartPreview{border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-top-left-radius:1.333em;border-bottom-left-radius:1.333em;left:0px}.SimpleDatePicker .rdrDayInPreview,.DateRangePicker .rdrDayInPreview{border-top-width:1px;border-bottom-width:1px}.SimpleDatePicker .rdrDayEndPreview,.DateRangePicker .rdrDayEndPreview{border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-top-right-radius:1.333em;border-bottom-right-radius:1.333em;right:2px;right:0px}.SimpleDatePicker .rdrDayPassive,.DateRangePicker .rdrDayPassive{pointer-events:none}.SimpleDatePicker .rdrDayPassive .rdrDayNumber span,.DateRangePicker .rdrDayPassive .rdrDayNumber span{color:#d5dce0}.SimpleDatePicker .rdrDayPassive .rdrInRange,.SimpleDatePicker .rdrDayPassive .rdrStartEdge,.SimpleDatePicker .rdrDayPassive .rdrEndEdge,.SimpleDatePicker .rdrDayPassive .rdrSelected,.SimpleDatePicker .rdrDayPassive .rdrDayStartPreview,.SimpleDatePicker .rdrDayPassive .rdrDayInPreview,.SimpleDatePicker .rdrDayPassive .rdrDayEndPreview,.DateRangePicker .rdrDayPassive .rdrInRange,.DateRangePicker .rdrDayPassive .rdrStartEdge,.DateRangePicker .rdrDayPassive .rdrEndEdge,.DateRangePicker .rdrDayPassive .rdrSelected,.DateRangePicker .rdrDayPassive .rdrDayStartPreview,.DateRangePicker .rdrDayPassive .rdrDayInPreview,.DateRangePicker .rdrDayPassive .rdrDayEndPreview{display:none}.SimpleDatePicker .rdrDayDisabled,.DateRangePicker .rdrDayDisabled{background-color:#f8f8f8}.SimpleDatePicker .rdrDayDisabled .rdrDayNumber span,.DateRangePicker .rdrDayDisabled .rdrDayNumber span{color:#aeb9bf}.SimpleDatePicker .rdrDayDisabled .rdrInRange,.SimpleDatePicker .rdrDayDisabled .rdrStartEdge,.SimpleDatePicker .rdrDayDisabled .rdrEndEdge,.SimpleDatePicker .rdrDayDisabled .rdrSelected,.SimpleDatePicker .rdrDayDisabled .rdrDayStartPreview,.SimpleDatePicker .rdrDayDisabled .rdrDayInPreview,.SimpleDatePicker .rdrDayDisabled .rdrDayEndPreview,.DateRangePicker .rdrDayDisabled .rdrInRange,.DateRangePicker .rdrDayDisabled .rdrStartEdge,.DateRangePicker .rdrDayDisabled .rdrEndEdge,.DateRangePicker .rdrDayDisabled .rdrSelected,.DateRangePicker .rdrDayDisabled .rdrDayStartPreview,.DateRangePicker .rdrDayDisabled .rdrDayInPreview,.DateRangePicker .rdrDayDisabled .rdrDayEndPreview{-webkit-filter:grayscale(100%) opacity(60%);filter:grayscale(100%) opacity(60%)}.SimpleDatePicker .rdrMonthName,.DateRangePicker .rdrMonthName{text-align:left;font-weight:600;color:#849095;padding:.833em}

package/esm/forms/styles/daterange.d.ts

@@ -0,0 +1 @@
+export declare const CSS: string;