@evoke-platform/ui-components 1.0.0-dev.123 → 1.0.0-dev.124

package/dist/published/form-components/Boolean.d.ts

@@ -0,0 +1,16 @@
+declare const Select: {
+    new (component: any, options: any, data: any): {
+        [x: string]: any;
+        errorDetails: any;
+        conditionallyHidden(): any;
+        validateRequired(value: any): void;
+        renderComponentToElement(component: any, element: any): void;
+    };
+    [x: string]: any;
+};
+declare class Boolean extends Select {
+    constructor(component: any, options: any, data: any);
+    handleChange: (key: string, value: string) => void;
+    attach(element: Element): void;
+}
+export default Boolean;

package/dist/published/form-components/Boolean.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Components } from 'formiojs';
+import FieldWrapper from './FieldWrapper';
+import { FormField } from '../components/custom';
+import { addSharedCustomizations } from './SharedCustomizations';
+const Select = addSharedCustomizations(Components.components.select);
+class Boolean extends Select {
+    constructor(component, options, data) {
+        super(component, options, data);
+        this.handleChange = (key, value) => {
+            this.validateRequired(value);
+            super.setValue(value, {});
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+    attach(element) {
+        this.renderComponentToElement(React.createElement("div", null, !this.conditionallyHidden() && (React.createElement(FieldWrapper, Object.assign({}, this.component, { onChange: this.handleChange, errorDetails: this.errorDetails }),
+            React.createElement(FormField, Object.assign({}, this.component, { errorMessage: Object.values(this.errorDetails).join(', '), min: this.component.validate.min, max: this.component.validate.max }))))), element);
+        super.attach(element);
+    }
+}
+export default Boolean;

package/dist/published/form-components/Button.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const FormIOButton: import("formiojs").ClassWithEditForm<typeof import("formiojs/types/components/_classes/field/field").Field>;
+declare class CustomButton extends FormIOButton {
+    constructor(component: any, options: any, data: any);
+    render(): JSX.Element;
+    attach(element: Element): void;
+}
+export default CustomButton;

package/dist/published/form-components/Button.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Components } from 'formiojs';
+import ReactDOMClient from 'react-dom/client';
+import { Button } from '../components/core';
+const FormIOButton = Components.components.button;
+class CustomButton extends FormIOButton {
+    constructor(component, options, data) {
+        super(component, options, data);
+    }
+    render() {
+        const _a = this.component, { label } = _a, rest = __rest(_a, ["label"]);
+        return (React.createElement("div", null,
+            React.createElement(Button, Object.assign({}, rest), label)));
+    }
+    attach(element) {
+        ReactDOMClient.createRoot(element).render(this.render());
+    }
+}
+export default CustomButton;

package/dist/published/form-components/Buttons.d.ts

@@ -0,0 +1,8 @@
+declare const ButtonComponent: any;
+declare class Buttons extends ButtonComponent {
+    constructor(component: any, options: any, data: any);
+    handleCancel: (event: any) => void;
+    handleSubmit: (event: any) => void;
+    attach(element: any): void;
+}
+export default Buttons;

package/dist/published/form-components/Buttons.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Components } from 'formiojs';
+import ReactDOMClient from 'react-dom/client';
+import { Button as EvokeButton } from '../components/core';
+const ButtonComponent = Components.components.button;
+class Buttons extends ButtonComponent {
+    constructor(component, options, data) {
+        super(component, options, data);
+        this.handleCancel = (event) => {
+            this.component.components[0].onCancel(event);
+        };
+        this.handleSubmit = (event) => {
+            const submission = this.root.getValue();
+            this.component.components[1].onSubmit(submission);
+            this.onSubmit();
+        };
+        this.handleCancel = this.handleCancel.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+    attach(element) {
+        ReactDOMClient.createRoot(element).render(React.createElement("div", { style: { width: '100%', display: 'flex', justifyContent: 'flex-end' } },
+            React.createElement(EvokeButton, { sx: { margin: '5px' }, variant: this.component.components[0].variant, onClick: this.handleCancel }, this.component.components[0].label),
+            React.createElement(EvokeButton, { sx: { margin: '5px' }, variant: this.component.components[1].variant, onClick: this.handleSubmit }, this.component.components[1].label)));
+    }
+}
+export default Buttons;

package/dist/published/form-components/Date.d.ts

@@ -0,0 +1,17 @@
+declare const DateTime: {
+    new (component: any, options: any, data: any): {
+        [x: string]: any;
+        errorDetails: any;
+        conditionallyHidden(): any;
+        validateRequired(value: any): void;
+        renderComponentToElement(component: any, element: any): void;
+    };
+    [x: string]: any;
+};
+declare class DateField extends DateTime {
+    constructor(component: any, options: any, data: any);
+    handleValidation: (value: string) => void;
+    handleChange: (key: string, value: string) => void;
+    attach(element: Element): void;
+}
+export default DateField;

package/dist/published/form-components/Date.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Components } from 'formiojs';
+import FieldWrapper from './FieldWrapper';
+import { FormField } from '../components/custom';
+import { addSharedCustomizations } from './SharedCustomizations';
+const DateTime = addSharedCustomizations(Components.components.datetime);
+class DateField extends DateTime {
+    constructor(component, options, data) {
+        super(component, options, data);
+        this.handleValidation = (value) => {
+            if (this.component.validate.minDate) {
+                if (value < this.component.validate.minDate) {
+                    this.errorDetails['minDate'] =
+                        'Date must be after ' + new Date(this.component.validate.minDate).toLocaleDateString();
+                }
+                else {
+                    delete this.errorDetails['minDate'];
+                }
+            }
+            if (this.component.validate.maxDate) {
+                if (value > this.component.validate.maxDate) {
+                    this.errorDetails['maxDate'] =
+                        'Date must be before ' + new Date(this.component.validate.maxDate).toLocaleDateString();
+                }
+                else {
+                    delete this.errorDetails['maxDate'];
+                }
+            }
+            this.validateRequired(value);
+        };
+        this.handleChange = (key, value) => {
+            super.setValue(value, {});
+            this.handleValidation(value);
+            this.attach(this.element);
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+    attach(element) {
+        this.renderComponentToElement(React.createElement(FieldWrapper, Object.assign({}, this.component, { onChange: this.handleChange, errorMessage: Object.values(this.errorDetails).join(', ') }),
+            React.createElement(FormField, Object.assign({}, this.component))), element);
+        super.attach(element);
+    }
+}
+export default DateField;

package/dist/published/form-components/DateTime.d.ts

@@ -0,0 +1,16 @@
+declare const DateTimeFormIO: {
+    new (component: any, options: any, data: any): {
+        [x: string]: any;
+        errorDetails: any;
+        conditionallyHidden(): any;
+        validateRequired(value: any): void;
+        renderComponentToElement(component: any, element: any): void;
+    };
+    [x: string]: any;
+};
+declare class DateTime extends DateTimeFormIO {
+    constructor(component: any, options: any, data: any);
+    handleChange: (key: string, value: string) => void;
+    attach(element: Element): void;
+}
+export default DateTime;

package/dist/published/form-components/DateTime.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Components } from 'formiojs';
+import { FormField } from '../components/custom';
+import { addSharedCustomizations } from './SharedCustomizations';
+import FieldWrapper from './FieldWrapper';
+const DateTimeFormIO = addSharedCustomizations(Components.components.datetime);
+class DateTime extends DateTimeFormIO {
+    constructor(component, options, data) {
+        super(component, options, data);
+        this.handleChange = (key, value) => {
+            this.validateRequired(value);
+            super.setValue(value, {});
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+    attach(element) {
+        this.renderComponentToElement(React.createElement(FieldWrapper, Object.assign({}, this.component, { onChange: this.handleChange, errorMessage: Object.values(this.errorDetails).join(', ') }),
+            React.createElement(FormField, Object.assign({}, this.component))), element);
+        super.attach(element);
+    }
+}
+export default DateTime;

package/dist/published/form-components/Decimal.d.ts

@@ -0,0 +1,16 @@
+declare const Number: {
+    new (component: any, options: any, data: any): {
+        [x: string]: any;
+        errorDetails: any;
+        conditionallyHidden(): any;
+        validateRequired(value: any): void;
+        renderComponentToElement(component: any, element: any): void;
+    };
+    [x: string]: any;
+};
+declare class Decimal extends Number {
+    constructor(component: any, options: any, data: any);
+    handleChange: (key: string, value: string) => void;
+    attach(element: Element): void;
+}
+export default Decimal;

package/dist/published/form-components/Decimal.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Components } from 'formiojs';
+import FieldWrapper from './FieldWrapper';
+import { FormField } from '../components/custom';
+import { addSharedCustomizations } from './SharedCustomizations';
+const Number = addSharedCustomizations(Components.components.number);
+class Decimal extends Number {
+    constructor(component, options, data) {
+        super(component, options, data);
+        this.handleChange = (key, value) => {
+            super.setValue(value, {});
+            if (this.component.validate.min && value < this.component.validate.min) {
+                this.errorDetails['min'] = `Min value is ${this.component.validate.min}`;
+            }
+            else {
+                delete this.errorDetails['min'];
+            }
+            if (this.component.validate.max && value > this.component.validate.max) {
+                this.errorDetails['max'] = `Max value is ${this.component.validate.max}`;
+            }
+            else {
+                delete this.errorDetails['max'];
+            }
+            this.validateRequired(value);
+            this.attach(this.element);
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+    attach(element) {
+        this.renderComponentToElement(React.createElement(FieldWrapper, Object.assign({}, this.component, { onChange: this.handleChange, errorDetails: this.errorDetails }),
+            React.createElement(FormField, Object.assign({}, this.component, { errorMessage: Object.values(this.errorDetails).join(', ') }))), element);
+        super.attach(element);
+    }
+}
+export default Decimal;

package/dist/published/form-components/FieldWrapper.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+declare type FieldWrapperProps = {
+    label: string;
+    description?: string;
+    tooltip?: string;
+    prefix?: string;
+    suffix?: string;
+    value?: string;
+    validate: any;
+    errorMessage: string;
+    showCharCount?: boolean;
+    type: string;
+    onChange: Function;
+    children: any;
+};
+/**
+ * A component that wraps a FormField and adds a label,
+ * description, tooltip, prefix, suffix and word/char counts
+ */
+declare const FieldWrapper: (props: FieldWrapperProps) => JSX.Element;
+export default FieldWrapper;

package/dist/published/form-components/FieldWrapper.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef } from 'react';
+import { Box } from '../components/layout';
+import { IconButton, Tooltip, Typography } from '../components/core';
+import { Help } from '../icons';
+const PrefixSuffix = (props) => {
+    const { prefix, suffix, height } = props;
+    const text = prefix || suffix;
+    const prefixSuffixStyles = Object.assign(Object.assign(Object.assign({ display: 'inline-flex', alignItems: 'center', background: '#f5f5f5', padding: '5px', border: '1px solid #ccc' }, (suffix && {
+        borderTopRightRadius: '5px',
+        borderBottomRightRadius: '5px',
+        marginLeft: '-5px',
+        paddingLeft: '10px',
+    })), (prefix && {
+        borderTopLeftRadius: '5px',
+        borderBottomLeftRadius: '5px',
+        marginRight: '-5px',
+        paddingRight: '10px',
+    })), { height: height });
+    if (!prefix && !suffix)
+        return null;
+    return (React.createElement(Box, { sx: prefixSuffixStyles },
+        React.createElement(Typography, null, text)));
+};
+/**
+ * A component that wraps a FormField and adds a label,
+ * description, tooltip, prefix, suffix and word/char counts
+ */
+const FieldWrapper = (props) => {
+    const { label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, onChange, children, } = props;
+    const [fieldHeight, setFieldHeight] = React.useState(40);
+    const [fieldValue, setFieldValue] = React.useState(value);
+    const { maxLength } = validate;
+    const fieldRef = useRef(null);
+    useEffect(() => {
+        //get height of field to sync with height of prefix and suffix
+        const fieldElement = fieldRef.current;
+        if (fieldElement && (prefix || suffix)) {
+            setFieldHeight(fieldElement.getBoundingClientRect().height - 12);
+        }
+    }, [fieldRef]);
+    const underFieldStyles = {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    };
+    const descriptionStyles = {
+        color: '#999',
+        whiteSpace: 'normal',
+    };
+    let charCount = fieldValue && type === 'textfield' ? fieldValue.length : 0;
+    if (maxLength)
+        charCount = maxLength - charCount;
+    const handleChange = (key, value) => {
+        onChange(key, value);
+        setFieldValue(value);
+    };
+    return (React.createElement(Box, { sx: { margin: '10px' } },
+        React.createElement(Box, null,
+            React.createElement(Typography, { sx: { fontWeight: 600 }, variant: "subtitle2" },
+                label,
+                validate.required ? React.createElement("span", { style: { color: 'red' } },
+                    ` *`,
+                    " ") : null,
+                tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
+                    React.createElement(IconButton, null,
+                        React.createElement(Help, { sx: { fontSize: '14px' } }))))),
+            React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description),
+            React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row' } },
+                React.createElement(PrefixSuffix, { prefix: prefix, height: fieldHeight }),
+                React.createElement("div", { style: { width: '100%' }, ref: fieldRef }, React.Children.map(children, (child) => {
+                    return React.cloneElement(child, { onChange: handleChange });
+                })),
+                React.createElement(PrefixSuffix, { suffix: suffix, height: fieldHeight }))),
+        React.createElement(Box, { sx: underFieldStyles },
+            React.createElement(Box, { sx: { width: '100%', display: 'flex', justifyContent: 'space-between' } },
+                errorMessage ? (React.createElement(Typography, { sx: { color: 'red', whiteSpace: 'normal' }, variant: "caption" }, ' ⚠ ' + errorMessage)) : (React.createElement("span", null)),
+                showCharCount && (React.createElement(Typography, { variant: "caption", sx: { color: '#999', whiteSpace: 'nowrap' } },
+                    charCount,
+                    " ",
+                    charCount === 1 ? 'character' : 'characters',
+                    !!maxLength && ` remaining`))))));
+};
+export default FieldWrapper;

package/dist/published/form-components/Integer.d.ts

@@ -0,0 +1,16 @@
+declare const Number: {
+    new (component: any, options: any, data: any): {
+        [x: string]: any;
+        errorDetails: any;
+        conditionallyHidden(): any;
+        validateRequired(value: any): void;
+        renderComponentToElement(component: any, element: any): void;
+    };
+    [x: string]: any;
+};
+declare class Integer extends Number {
+    constructor(component: any, options: any, data: any);
+    handleChange: (key: string, value: string) => void;
+    attach(element: Element): void;
+}
+export default Integer;

package/dist/published/form-components/Integer.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Components } from 'formiojs';
+import FieldWrapper from './FieldWrapper';
+import { FormField } from '../components/custom';
+import { addSharedCustomizations } from './SharedCustomizations';
+const Number = addSharedCustomizations(Components.components.number);
+class Integer extends Number {
+    constructor(component, options, data) {
+        super(component, options, data);
+        this.handleChange = (key, value) => {
+            super.setValue(value, {});
+            if (this.component.validate.min && value < this.component.validate.min) {
+                this.errorDetails['min'] = `Min value is ${this.component.validate.min}`;
+            }
+            else {
+                delete this.errorDetails['min'];
+            }
+            if (this.component.validate.max && value > this.component.validate.max) {
+                this.errorDetails['max'] = `Max value is ${this.component.validate.max}`;
+            }
+            else {
+                delete this.errorDetails['max'];
+            }
+            this.validateRequired(value);
+            this.attach(this.element);
+        };
+    }
+    attach(element) {
+        this.renderComponentToElement(React.createElement("div", null, !this.conditionallyHidden() && (React.createElement(FieldWrapper, Object.assign({}, this.component, { onChange: this.handleChange, errorDetails: this.errorDetails }),
+            React.createElement(FormField, Object.assign({}, this.component, { errorMessage: Object.values(this.errorDetails).join(', ') }))))), element);
+        super.attach(element);
+    }
+}
+export default Integer;

package/dist/published/form-components/Select.d.ts

@@ -0,0 +1,16 @@
+declare const SelectFormIOComponent: {
+    new (component: any, options: any, data: any): {
+        [x: string]: any;
+        errorDetails: any;
+        conditionallyHidden(): any;
+        validateRequired(value: any): void;
+        renderComponentToElement(component: any, element: any): void;
+    };
+    [x: string]: any;
+};
+declare class Select extends SelectFormIOComponent {
+    constructor(component: any, options: any, data: any);
+    handleChange: (key: string, value: string) => void;
+    attach(element: Element): void;
+}
+export default Select;

package/dist/published/form-components/Select.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Components } from 'formiojs';
+import FieldWrapper from './FieldWrapper';
+import { FormField } from '../components/custom';
+import { addSharedCustomizations } from './SharedCustomizations';
+const SelectFormIOComponent = addSharedCustomizations(Components.components.select);
+class Select extends SelectFormIOComponent {
+    constructor(component, options, data) {
+        super(component, options, data);
+        this.handleChange = (key, value) => {
+            this.validateRequired(value);
+            super.setValue(value, {});
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+    attach(element) {
+        this.renderComponentToElement(React.createElement("div", null, !this.conditionallyHidden() && (React.createElement(FieldWrapper, Object.assign({}, this.component, { onChange: this.handleChange, errorMessage: Object.values(this.errorDetails).join(', ') }),
+            React.createElement(FormField, Object.assign({}, this.component))))), element);
+        super.attach(element);
+    }
+}
+export default Select;

package/dist/published/form-components/SharedCustomizations.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Adds shared customizations such as errorDetails, validateRequired() and
+ * conditionallyHidden() to a component class.
+ * @param {any} superClass - The component class to extend.
+ * @returns {any} - The extended component class with shared customizations.
+ */
+export declare function addSharedCustomizations(superClass: any): {
+    new (component: any, options: any, data: any): {
+        [x: string]: any;
+        errorDetails: any;
+        /**
+         * Checks if the component should be conditionally hidden based on its
+         * configuration and the values within of other fields
+         * @returns {boolean}
+         */
+        conditionallyHidden(): any;
+        /**
+         * Checks if a value is required and adds an error message if it is empty.
+         * @param {any} value - The value to check.
+         * @returns {void}
+         */
+        validateRequired(value: any): void;
+        /**
+         * Renders a React component to a DOM element.
+         * @param {any} component - The React component to render.
+         * @param {any} element - The DOM element to render the component to.
+         * @returns {void}
+         */
+        renderComponentToElement(component: any, element: any): void;
+    };
+    [x: string]: any;
+};

package/dist/published/form-components/SharedCustomizations.js

@@ -0,0 +1,59 @@
+import { isEmpty } from 'lodash';
+import ReactDOM from 'react-dom';
+/**
+ * Adds shared customizations such as errorDetails, validateRequired() and
+ * conditionallyHidden() to a component class.
+ * @param {any} superClass - The component class to extend.
+ * @returns {any} - The extended component class with shared customizations.
+ */
+export function addSharedCustomizations(superClass) {
+    return class extends superClass {
+        constructor(component, options, data) {
+            super(component, options, data);
+            this.errorDetails = {};
+        }
+        /**
+         * Checks if the component should be conditionally hidden based on its
+         * configuration and the values within of other fields
+         * @returns {boolean}
+         */
+        conditionallyHidden() {
+            const { conditional } = this.component;
+            const prerequisiteField = conditional.when;
+            const prerequisiteValue = conditional.eq;
+            const prerequisiteFieldValue = this.root.getValue().data[prerequisiteField];
+            prerequisiteField && prerequisiteFieldValue !== prerequisiteValue
+                ? (this.component.hidden = true)
+                : (this.component.hidden = false);
+            return this.component.hidden;
+        }
+        /**
+         * Checks if a value is required and adds an error message if it is empty.
+         * @param {any} value - The value to check.
+         * @returns {void}
+         */
+        validateRequired(value) {
+            if (this.component.validate.required) {
+                if (isEmpty(value)) {
+                    this.errorDetails['required'] = 'This field is required';
+                }
+                else {
+                    delete this.errorDetails['required'];
+                }
+            }
+        }
+        /**
+         * Renders a React component to a DOM element.
+         * @param {any} component - The React component to render.
+         * @param {any} element - The DOM element to render the component to.
+         * @returns {void}
+         */
+        renderComponentToElement(component, element) {
+            let root = ReactDOM.findDOMNode(element);
+            if (!root) {
+                root = element;
+            }
+            ReactDOM.render(!this.conditionallyHidden() && component, root);
+        }
+    };
+}

package/dist/published/form-components/Text.d.ts

@@ -0,0 +1,17 @@
+declare const TextField: {
+    new (component: any, options: any, data: any): {
+        [x: string]: any;
+        errorDetails: any;
+        conditionallyHidden(): any;
+        validateRequired(value: any): void;
+        renderComponentToElement(component: any, element: any): void;
+    };
+    [x: string]: any;
+};
+declare class Text extends TextField {
+    constructor(component: any, options: any, data: any);
+    handleValidation(value: string): void;
+    handleChange: (key: string, value: string) => void;
+    attach(element: Element): void;
+}
+export default Text;

package/dist/published/form-components/Text.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Components } from 'formiojs';
+import FieldWrapper from './FieldWrapper';
+import { isEmpty } from 'lodash';
+import { FormField } from '../components/custom';
+import { addSharedCustomizations } from './SharedCustomizations';
+const TextField = addSharedCustomizations(Components.components.textfield);
+class Text extends TextField {
+    constructor(component, options, data) {
+        super(component, options, data);
+        this.handleChange = (key, value) => {
+            super.setValue(value, {});
+            this.handleValidation(value);
+            this.attach(this.element);
+        };
+        this.handleChange = this.handleChange.bind(this);
+    }
+    handleValidation(value) {
+        const { inputMask, validate } = this.component;
+        const mask = inputMask;
+        if (mask) {
+            const maskRegex = mask === null || mask === void 0 ? void 0 : mask.replace(/[\\^$.+?()[\]{}|]/g, '\\$&').replaceAll('9', '\\d').replaceAll('a', '[a-zA-Z]').replaceAll('*', '[a-zA-Z0-9]');
+            if (maskRegex) {
+                const regex = new RegExp(maskRegex);
+                if (!regex.test(value)) {
+                    this.errorDetails['inputMask'] = 'Value must match the format ' + mask;
+                }
+                else {
+                    delete this.errorDetails['inputMask'];
+                }
+            }
+        }
+        if (!isEmpty(validate.regexes)) {
+            const regexes = validate.regexes;
+            const failedRules = validate.regexes.filter((rule) => {
+                if (!RegExp(rule.regex).test(value)) {
+                    return true;
+                }
+                return false;
+            });
+            if (failedRules.length === 0) {
+                delete this.errorDetails['regexes'];
+            }
+            else {
+                if (validate.operator === 'all') {
+                    this.errorDetails['regexes'] = failedRules.map((rule) => rule.errorMessage).join(' and ');
+                }
+                else if (validate.operator === 'any') {
+                    if (regexes.length > failedRules.length) {
+                        delete this.errorDetails['regexes'];
+                    }
+                    else {
+                        this.errorDetails['regexes'] = failedRules.map((rule) => rule.errorMessage).join(' or ');
+                    }
+                }
+            }
+        }
+        if (validate.maxLength && value.length > validate.maxLength) {
+            this.errorDetails['maxLength'] = `Max length is ${validate.maxLength}`;
+        }
+        else {
+            delete this.errorDetails['maxLength'];
+        }
+        if (validate.minLength && value.length < validate.minLength) {
+            this.errorDetails['minLength'] = `Min length is ${validate.minLength}`;
+        }
+        else {
+            delete this.errorDetails['minLength'];
+        }
+        this.validateRequired(value);
+    }
+    attach(element) {
+        const { inputMask } = this.component;
+        this.renderComponentToElement(React.createElement("div", null,
+            React.createElement(FieldWrapper, Object.assign({}, this.component, { onChange: this.handleChange, errorMessage: Object.values(this.errorDetails).join(', ') }),
+                React.createElement(FormField, Object.assign({}, this.component, { mask: inputMask })))), element);
+        super.attach(element);
+    }
+}
+export default Text;

package/dist/published/form-components/index.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import Boolean from './Boolean';
+import DateTime from './DateTime';
+import DateField from './Date';
+import Select from './Select';
+import Text from './Text';
+import Decimal from './Decimal';
+import Integer from './Integer';
+import Buttons from './Buttons';
+import Button from './Button';
+import { addSharedCustomizations } from './SharedCustomizations';
+export declare const FormComponents: {
+    Boolean: typeof Boolean;
+    DateTime: typeof DateTime;
+    DateField: typeof DateField;
+    Select: typeof Select;
+    Text: typeof Text;
+    Decimal: typeof Decimal;
+    Integer: typeof Integer;
+    Button: typeof Button;
+    Buttons: typeof Buttons;
+    FieldWrapper: (props: {
+        label: string;
+        description?: string | undefined;
+        tooltip?: string | undefined;
+        prefix?: string | undefined;
+        suffix?: string | undefined;
+        value?: string | undefined;
+        validate: any;
+        errorMessage: string;
+        showCharCount?: boolean | undefined;
+        type: string;
+        onChange: Function;
+        children: any;
+    }) => JSX.Element;
+    addSharedCustomizations: typeof addSharedCustomizations;
+};

package/dist/published/form-components/index.js

@@ -0,0 +1,24 @@
+import Boolean from './Boolean';
+import DateTime from './DateTime';
+import DateField from './Date';
+import Select from './Select';
+import Text from './Text';
+import Decimal from './Decimal';
+import Integer from './Integer';
+import Buttons from './Buttons';
+import Button from './Button';
+import { addSharedCustomizations } from './SharedCustomizations';
+import FieldWrapper from './FieldWrapper';
+export const FormComponents = {
+    Boolean,
+    DateTime,
+    DateField,
+    Select,
+    Text,
+    Decimal,
+    Integer,
+    Button,
+    Buttons,
+    FieldWrapper,
+    addSharedCustomizations,
+};

package/dist/published/index.d.ts

@@ -1,6 +1,7 @@
-export { ClickAwayListener, FormControlProps, FormHelperTextProps, GridSize, Toolbar, createTheme } from '@mui/material';
+export { ClickAwayListener, FormControlProps, FormHelperTextProps, GridSize, Toolbar, createTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
+export { FormComponents } from './form-components';
 export * from './components/core';
-export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar } from './components/custom';
+export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './util';

package/dist/published/index.js

@@ -1,6 +1,7 @@
-export { ClickAwayListener, Toolbar, createTheme } from '@mui/material';
+export { ClickAwayListener, Toolbar, createTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
+export { FormComponents } from './form-components';
 export * from './components/core';
-export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar } from './components/custom';
+export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './util';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.123",
+    "version": "1.0.0-dev.124",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -72,6 +72,7 @@
         "@mui/x-date-pickers": "^5.0.13",
         "@react-querybuilder/dnd": "^5.4.1",
         "@react-querybuilder/material": "^5.4.1",
+        "formiojs": "^4.15.0-rc.23",
         "lodash-es": "^4.17.21",
         "react-dropzone": "^14.2.2",
         "react-input-mask": "^2.0.4",