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

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

@@ -1,8 +1,10 @@
-declare const ButtonComponent: any;
-declare class Buttons extends ButtonComponent {
+import { ReactComponent } from '@formio/react';
+declare class Buttons extends ReactComponent {
+    [x: string]: any;
     constructor(component: any, options: any, data: any);
+    init(): void;
     handleCancel: (event: any) => void;
     handleSubmit: (event: any) => void;
-    attach(element: any): void;
+    attachReact(element: any): void;
 }
 export default Buttons;

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

@@ -1,9 +1,9 @@
 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 {
+import { ReactComponent } from '@formio/react';
+import ReactDOM from 'react-dom';
+import { cloneDeep, isEmpty, isEqual } from 'lodash';
+class Buttons extends ReactComponent {
     constructor(component, options, data) {
         super(component, options, data);
         this.handleCancel = (event) => {
@@ -11,16 +11,27 @@ class Buttons extends ButtonComponent {
         };
         this.handleSubmit = (event) => {
             const submission = this.root.getValue();
-            this.component.components[1].onSubmit(submission);
-            this.onSubmit();
+            this.emit('submitButton', submission);
+            if (isEmpty([...this.root.errors, ...this.root.customErrors])) {
+                this.component.components[1].onSubmit(submission);
+            }
         };
         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)));
+    init() {
+        const originalData = cloneDeep(this.root.data);
+        this.on('change', () => {
+            if (!isEqual(originalData, this.root.data)) {
+                this.root.formEdited = true;
+                this.attachReact(this.element);
+            }
+        });
+    }
+    attachReact(element) {
+        return ReactDOM.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, disabled: !this.root.formEdited }, this.component.components[0].label),
+            React.createElement(EvokeButton, { sx: { margin: '5px' }, variant: this.component.components[1].variant, onClick: this.handleSubmit, disabled: !this.root.formEdited }, this.component.components[1].label)), element);
     }
 }
 export default Buttons;

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

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef } from 'react';
+import { Typography, Tooltip, IconButton } from '../components/core';
 import { Box } from '../components/layout';
-import { IconButton, Tooltip, Typography } from '../components/core';
 import { Help } from '../icons';
+import React, { useEffect, useRef } from 'react';
 const PrefixSuffix = (props) => {
     const { prefix, suffix, height } = props;
     const text = prefix || suffix;
@@ -52,10 +52,10 @@ const FieldWrapper = (props) => {
     if (maxLength)
         charCount = maxLength - charCount;
     const handleChange = (key, value) => {
-        onChange(key, value);
+        onChange(key, value, new Event('keydown'));
         setFieldValue(value);
     };
-    return (React.createElement(Box, { sx: { margin: '10px' } },
+    return (React.createElement(Box, null,
         React.createElement(Box, null,
             React.createElement(Typography, { sx: { fontWeight: 600 }, variant: "subtitle2" },
                 label,

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

@@ -0,0 +1,34 @@
+import { ReactComponent } from '@formio/react';
+declare class FormFieldComponent extends ReactComponent {
+    [x: string]: any;
+    static schema: any;
+    errorDetails: any;
+    /**
+     * Called when the component has been instantiated. This is useful to define
+     * default instance variable values.
+     *
+     * @param component - The JSON representation of the component created.
+     * @param options - The global options for the renderer
+     * @param data - The contextual data object (model) used for this component.
+     */
+    constructor(component: any, options: any, data: any);
+    init(): void;
+    handleValidation(value: string): void;
+    hasCustomErrors(): boolean;
+    manageFormErrors(): void;
+    beforeSubmit(): void;
+    /**
+     * Checks for errors in the data value.
+     * @param {any} data - The data value to check.
+     * @param {boolean} dirty - Whether the data value has been modified.
+     * @param {any} rowData - The row data.
+     * @returns {{ hasErrors: boolean, fieldErrorMessages: string[] }} An object containing whether the data value has errors and an array of error messages.
+     */
+    errorCheck(data: any, dirty: any, rowData: any): {
+        hasErrors: boolean;
+        fieldErrorMessages: any[];
+    };
+    handleChange: (key: string, value: any, event: Event) => void;
+    attachReact(element: any): void;
+}
+export default FormFieldComponent;

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

@@ -0,0 +1,160 @@
+import React from 'react';
+import { FormField } from '../components/custom';
+import FieldWrapper from './FieldWrapper';
+import { isEmpty } from 'lodash';
+import ReactDOM from 'react-dom';
+import { ReactComponent } from '@formio/react';
+class FormFieldComponent extends ReactComponent {
+    /**
+     * Called when the component has been instantiated. This is useful to define
+     * default instance variable values.
+     *
+     * @param component - The JSON representation of the component created.
+     * @param options - The global options for the renderer
+     * @param data - The contextual data object (model) used for this component.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(component, options, data) {
+        const { property } = component;
+        component.property = Object.assign(Object.assign({}, component.property), { type: property.type === 'string' && property.enum ? 'choices' : property.type });
+        let selectOptions = [];
+        if (!isEmpty(component.data)) {
+            selectOptions = component.data.values;
+        }
+        else if (property.enum) {
+            selectOptions = property.enum.map((val) => ({ label: val, value: val }));
+        }
+        super(Object.assign(Object.assign({}, component), { hideLabel: true, readOnly: component.readOnlyValue || !!property.formula, selectOptions }), options, data);
+        this.handleChange = (key, value, event) => {
+            event.stopPropagation();
+            const val = typeof value === 'object' && value.hasOwnProperty('value') ? value.value : value;
+            this.updateValue(val, { modified: true });
+            this.emit('changed-' + this.component.key, val);
+            this.handleValidation(val);
+            this.attachReact(this.element);
+        };
+        this.errorDetails = {};
+        this.handleChange = this.handleChange.bind(this);
+    }
+    init() {
+        const { conditional: { when, eq }, } = this.component;
+        //listens for the this.emit('changed-'... event on the 'when' component
+        this.on('changed-' + when, (value) => {
+            if (when && eq && value === eq) {
+                this.component.hidden = false;
+                this.attachReact(this.element);
+            }
+        });
+    }
+    handleValidation(value) {
+        const { validate } = this.component;
+        if ((value === undefined || value === null || value === '') && !validate.required) {
+            return;
+        }
+        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 (this.component.validate.minDate) {
+            if (value < this.component.validate.minDate || value > this.component.validate.maxDate) {
+                this.errorDetails['date'] = this.component.validate.customMessage;
+            }
+            else {
+                delete this.errorDetails['date'];
+            }
+        }
+        if (this.component.validate.min && value < this.component.validate.min) {
+            this.errorDetails['min-max'] = this.component.validate.customMessage;
+        }
+        else if (this.component.validate.max && value > this.component.validate.max) {
+            this.errorDetails['min-max'] = this.component.validate.customMessage;
+        }
+        else {
+            delete this.errorDetails['min-max'];
+        }
+        this.manageFormErrors();
+    }
+    hasCustomErrors() {
+        return !isEmpty(this.errorDetails);
+    }
+    manageFormErrors() {
+        if (!isEmpty(this.errorDetails)) {
+            const fieldError = {
+                component: this.component,
+                external: false,
+                formattedKeyOrPath: this.component.key,
+                message: this.component.label + ': ' + Object.values(this.errorDetails).join(', '),
+            };
+            const rootHasErrorData = this.root.customErrors.some((error) => {
+                return error.formattedKeyOrPath === this.component.key;
+            });
+            if (!rootHasErrorData) {
+                this.root.customErrors = [...this.root.customErrors, fieldError];
+            }
+        }
+        else {
+            this.root.customErrors = this.root.customErrors.filter((error) => {
+                return error.formattedKeyOrPath !== this.component.key;
+            });
+        }
+    }
+    beforeSubmit() {
+        this.handleValidation(this.dataValue);
+        this.attachReact(this.element);
+    }
+    /**
+     * Checks for errors in the data value.
+     * @param {any} data - The data value to check.
+     * @param {boolean} dirty - Whether the data value has been modified.
+     * @param {any} rowData - The row data.
+     * @returns {{ hasErrors: boolean, fieldErrorMessages: string[] }} An object containing whether the data value has errors and an array of error messages.
+     */
+    errorCheck(data, dirty, rowData) {
+        //after changes, check for both custom errors and formio errors
+        if (this.dataValue !== this.defaultValue && !this.component.readOnlyValue) {
+            return {
+                hasErrors: this.hasCustomErrors() || !super.checkValidity(data, dirty, rowData),
+                fieldErrorMessages: [...this.root.errors, ...this.root.customErrors]
+                    .filter((error) => error.component.key === this.component.key)
+                    .map((error) => error.message),
+            };
+        }
+        return {
+            hasErrors: false,
+            fieldErrorMessages: [],
+        };
+    }
+    attachReact(element) {
+        var _a;
+        const { inputMask, hidden } = this.component;
+        const { hasErrors, fieldErrorMessages } = this.errorCheck(this.dataValue, false, this.data);
+        let root = ReactDOM.findDOMNode(element);
+        if (!root) {
+            root = element;
+        }
+        return ReactDOM.render(React.createElement("div", null, !hidden ? (React.createElement(FieldWrapper, Object.assign({}, this.component, { onChange: this.handleChange, error: hasErrors, errorMessage: fieldErrorMessages.join(', ') }),
+            React.createElement(FormField, Object.assign({}, this.component, { defaultValue: (_a = this.dataValue) !== null && _a !== void 0 ? _a : this.component.defaultValue, mask: inputMask, error: hasErrors })))) : null), root);
+    }
+}
+export default FormFieldComponent;

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

@@ -1,23 +1,8 @@
 /// <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 FormFieldComponent from './FormFieldComponent';
 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;
+    FormFieldComponent: typeof FormFieldComponent;
     Buttons: typeof Buttons;
     FieldWrapper: (props: {
         label: string;
@@ -33,5 +18,4 @@ export declare const FormComponents: {
         onChange: Function;
         children: any;
     }) => JSX.Element;
-    addSharedCustomizations: typeof addSharedCustomizations;
 };

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

@@ -1,24 +1,8 @@
-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 FormFieldComponent from './FormFieldComponent';
 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,
+    FormFieldComponent,
     Buttons,
     FieldWrapper,
-    addSharedCustomizations,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.124",
+    "version": "1.0.0-dev.125",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -63,6 +63,7 @@
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
+        "@formio/react": "^5.2.4-rc.1",
         "@js-joda/core": "^3.2.0",
         "@js-joda/locale_en-us": "^3.2.2",
         "@mui/icons-material": "^5.8.4",
@@ -72,13 +73,13 @@
         "@mui/x-date-pickers": "^5.0.13",
         "@react-querybuilder/dnd": "^5.4.1",
         "@react-querybuilder/material": "^5.4.1",
+        "@types/react-input-mask": "^3.0.2",
         "formiojs": "^4.15.0-rc.23",
         "lodash-es": "^4.17.21",
         "react-dropzone": "^14.2.2",
         "react-input-mask": "^2.0.4",
-        "@types/react-input-mask": "^3.0.2",
-        "react-querybuilder": "^6.0.2",
-        "react-number-format": "^4.9.3"
+        "react-number-format": "^4.9.3",
+        "react-querybuilder": "^6.0.2"
     },
     "lint-staged": {
         "*": "prettier --write"

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

@@ -1,16 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,8 +0,0 @@
-/// <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

@@ -1,30 +0,0 @@
-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/Date.d.ts

@@ -1,17 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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/Integer.d.ts

@@ -1,16 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,32 +0,0 @@
-/**
- * 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

@@ -1,59 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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;