@evoke-platform/ui-components 1.0.0-dev.216 → 1.0.0-dev.218

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.js

@@ -0,0 +1,409 @@
+import { ReactComponent } from '@formio/react';
+import Handlebars from 'handlebars';
+import { isArray, isEmpty, isNil } from 'lodash';
+import { DateTime } from 'luxon';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FormField } from '../../../custom';
+import { FormComponentWrapper } from '../Common';
+import { isPropertyVisible } from '../utils';
+Handlebars.registerHelper('addDays', function (addend1, addend2) {
+    const dateAddend1 = DateTime.fromISO(addend1);
+    if (dateAddend1.isValid) {
+        return dateAddend1.plus({ days: addend2 }).toISODate();
+    }
+    return undefined;
+});
+Handlebars.registerHelper('subDays', function (minuend, subtrahend) {
+    const dateMinuend = DateTime.fromISO(minuend);
+    if (dateMinuend.isValid) {
+        return dateMinuend.minus({ days: subtrahend }).toISODate();
+    }
+    return undefined;
+});
+export 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.
+     */
+    constructor(component, options, data) {
+        var _a;
+        const { property } = component;
+        component.property = Object.assign(Object.assign({}, component.property), { type: ((property === null || property === void 0 ? void 0 : property.type) === 'string' && (property === null || property === void 0 ? void 0 : property.enum)) || component.type === 'Select'
+                ? 'choices'
+                : property === null || property === void 0 ? void 0 : property.type });
+        let selectOptions = [];
+        if (!isEmpty(component.data)) {
+            selectOptions = component.data.values;
+        }
+        else if (property === null || property === void 0 ? void 0 : property.enum) {
+            selectOptions = (_a = property === null || property === void 0 ? void 0 : property.enum) === null || _a === void 0 ? void 0 : _a.map((val) => ({ label: val, value: val }));
+        }
+        else if (component.type === 'Select') {
+            selectOptions = [
+                { label: 'Portal', value: 'Portal' },
+                { label: 'Private', value: 'Private' },
+                { label: 'Public', value: 'Public' },
+            ];
+        }
+        super(Object.assign(Object.assign({}, component), { hideLabel: true, selectOptions, inputMaskPlaceholderChar: component.inputMaskPlaceholderChar || '_' }), options, data);
+        this.handleComponentChange = (components, value) => {
+            if (isArray(components)) {
+                if (components.filter((component) => Object.hasOwnProperty.call(component, 'components'))) {
+                    components
+                        .filter((component) => Object.hasOwnProperty.call(component, 'components'))
+                        .forEach((comp) => {
+                        this.handleComponentChange(comp.components, value);
+                    });
+                }
+                components
+                    .filter((comp) => [
+                    `${this.component.addressPropertyId}.city`,
+                    `${this.component.addressPropertyId}.county`,
+                    `${this.component.addressPropertyId}.state`,
+                    `${this.component.addressPropertyId}.zipCode`,
+                ].includes(comp.key))
+                    .forEach((comp) => {
+                    this.emit('changed-' + comp.key, value[comp.key.replace(`${this.component.addressPropertyId}.`, '')]);
+                });
+            }
+        };
+        this.handleChange = (key, value) => {
+            let selectedValue, label;
+            if (this.component.isAddressLine1) {
+                if (typeof value === 'string') {
+                    selectedValue = value;
+                    label = value;
+                }
+                else {
+                    selectedValue = value.line1;
+                    label = value.line1;
+                    this.handleComponentChange(this.root.components, value);
+                    this.root.components
+                        .filter((component) => Object.prototype.hasOwnProperty.call(component, 'components'))
+                        .forEach((section) => {
+                        this.handleComponentChange(section.components, value);
+                    });
+                }
+            }
+            else if (this.component.property.type === 'choices' || this.component.property.type === 'array') {
+                selectedValue =
+                    typeof value === 'object' && value !== null && Object.prototype.hasOwnProperty.call(value, 'value')
+                        ? value.value
+                        : value;
+                label = selectedValue;
+            }
+            else {
+                selectedValue =
+                    typeof value === 'object' && value !== null && Object.prototype.hasOwnProperty.call(value, 'value')
+                        ? value.value
+                        : value;
+                label =
+                    typeof value === 'object' && value !== null && Object.prototype.hasOwnProperty.call(value, 'label')
+                        ? value.label
+                        : value;
+            }
+            this.setValue(selectedValue !== null && selectedValue !== void 0 ? selectedValue : '');
+            this.updateValue(label, { modified: true });
+            this.handleValidation(selectedValue);
+            !['TextField', 'Decimal', 'Integer'].includes(this.component.type) &&
+                this.emit('changed-' + this.component.key, label);
+            this.attach(this.element);
+            if (this.component.isAddressLine1 &&
+                this.component.addressPropertyId &&
+                typeof value === 'object' &&
+                this.component.autoSave) {
+                this.component.autoSave({
+                    [this.component.addressPropertyId]: this.root.data[this.component.addressPropertyId],
+                });
+            }
+            if (!['TextField', 'Decimal', 'Integer'].includes(this.component.type) && this.component.autoSave) {
+                if (key && isEmpty(this.errorDetails)) {
+                    this.component.autoSave({ [key]: selectedValue });
+                }
+                else if (this.component.key && isEmpty(this.errorDetails)) {
+                    this.component.autoSave(this.root.data);
+                }
+            }
+        };
+        this.errorDetails = {};
+        this.handleChange = this.handleChange.bind(this);
+    }
+    init() {
+        var _a, _b, _c, _d;
+        this.on('changed-' + this.component.conditional.when, (value) => {
+            //set default value when conditional field is shown
+            if (this.component.defaultValue && value === this.component.conditional.eq) {
+                this.setValue(this.component.defaultValue);
+                this.updateValue(this.component.defaultValue, { modified: true });
+            }
+            //clear data and errors when a true conditional field is hidden
+            if (value !== this.component.conditional.eq) {
+                this.setValue('');
+                this.updateValue('', { modified: true });
+                this.clearErrors();
+                super.detach();
+            }
+        });
+        if (this.component.key.includes('.city') ||
+            this.component.key.includes('.county') ||
+            this.component.key.includes('.state') ||
+            this.component.key.includes('.zipCode')) {
+            this.on('changed-' + this.component.key, (value) => {
+                this.setValue(value !== null && value !== void 0 ? value : '');
+                this.updateValue(value, { modified: true });
+                this.attach(this.element);
+            });
+        }
+        if (this.component.type === 'Date') {
+            const inputProps = [];
+            // When date validation use handlebars. i.e {{input.datePropertyId}} or {{addDays input.datePropertyId 10}}
+            // We need to retrieve the property id to create a listener when those properties changed
+            // Then revalidate the current property.
+            if (((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.minDate) && /^{{.*}}$/.test((_b = this.component.validate) === null || _b === void 0 ? void 0 : _b.minDate)) {
+                const matches = this.component.validate.minDate.match(/^{{.*input\.([a-z][a-zA-Z0-9_]*).*}}$/);
+                if ((matches === null || matches === void 0 ? void 0 : matches[1]) && !inputProps.includes(matches[1])) {
+                    inputProps.push(matches[1]);
+                }
+            }
+            if (((_c = this.component.validate) === null || _c === void 0 ? void 0 : _c.maxDate) && /^{{.*}}$/.test((_d = this.component.validate) === null || _d === void 0 ? void 0 : _d.maxDate)) {
+                const matches = this.component.validate.maxDate.match(/^{{.*input\.([a-z][a-zA-Z0-9_]*).*}}$/);
+                if ((matches === null || matches === void 0 ? void 0 : matches[1]) && !inputProps.includes(matches[1])) {
+                    inputProps.push(matches[1]);
+                }
+            }
+            for (const inputProp of inputProps) {
+                this.on(`changed-${inputProp}`, (value) => {
+                    var _a;
+                    if (this.dataValue) {
+                        this.handleValidation(this.dataValue);
+                        this.setValue((_a = this.dataValue) !== null && _a !== void 0 ? _a : '');
+                        this.updateValue(this.dataValue, { modified: true });
+                        this.attach(this.element);
+                    }
+                });
+            }
+        }
+        this.on(`error-${this.component.key}`, (details) => {
+            const error = details.find((detail) => detail.code === 'errorMessage');
+            if (error) {
+                if (!this.root.customErrors.find((err) => err.formattedKeyOrPath === this.component.key && err.message === error.message)) {
+                    this.root.customErrors = [
+                        ...this.root.customErrors,
+                        Object.assign(Object.assign({}, error), { component: this.component, formattedKeyOrPath: this.component.key }),
+                    ];
+                }
+                this.errorDetails['date'] = error === null || error === void 0 ? void 0 : error.message;
+                this.attach(this.element);
+                this.errorDetails = {};
+            }
+        });
+    }
+    clearErrors() {
+        this.errorDetails = {};
+        this.root.customErrors = this.root.customErrors.filter((error) => error.formattedKeyOrPath !== this.component.key);
+    }
+    handleValidation(value) {
+        var _a;
+        const { validate } = this.component;
+        if (!isPropertyVisible(this.component.conditional, this.root.data)) {
+            return;
+        }
+        const emptyMask = this.component.inputMaskPlaceholderChar &&
+            ((_a = this.component.inputMask) === null || _a === void 0 ? void 0 : _a.replaceAll('9', this.component.inputMaskPlaceholderChar).replaceAll('a', this.component.inputMaskPlaceholderChar).replaceAll('*', this.component.inputMaskPlaceholderChar));
+        const emptyField = value === undefined || value === null || value === '' || isNil(value) || value === emptyMask;
+        if (emptyField &&
+            !validate.required &&
+            this.component.type !== 'Date' &&
+            this.component.type !== 'DateTime' &&
+            isEmpty(validate.regexes) &&
+            !(validate.min || validate.max)) {
+            delete this.errorDetails['rootError'];
+            return;
+        }
+        if (this.component.type == 'Date' && value && typeof value === 'object' && value['invalid']) {
+            this.errorDetails['invalidDate'] = 'Invalid Date';
+        }
+        else {
+            delete this.errorDetails['invalidDate'];
+        }
+        if (this.component.type == 'DateTime' && value && typeof value === 'object' && value['invalid']) {
+            this.errorDetails['invalidDateTime'] = 'Invalid Date Time';
+        }
+        else {
+            delete this.errorDetails['invalidDateTime'];
+        }
+        if (this.component.type == 'Time' && value && typeof value === 'object' && value['invalid']) {
+            this.errorDetails['invalidTime'] = 'Invalid Time';
+        }
+        else {
+            delete this.errorDetails['invalidTime'];
+        }
+        if (!isEmpty(validate.regexes) && !emptyField) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const regexes = validate.regexes;
+            const failedRules = 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'] =
+                        this.component.label +
+                            ': ' +
+                            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'] =
+                            this.component.label +
+                                ': ' +
+                                failedRules
+                                    .map((rule) => rule.errorMessage)
+                                    .join(' or ');
+                    }
+                }
+            }
+        }
+        else {
+            delete this.errorDetails['regexes'];
+        }
+        if (this.component.validate.minDate || this.component.validate.maxDate) {
+            const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+            const data = {
+                input: Object.assign({}, this.root.data),
+                __today__: DateTime.now().toISODate(),
+            };
+            let { minDate, maxDate } = validate;
+            if (minDate && !dateRegex.test(minDate)) {
+                try {
+                    minDate = Handlebars.compile(minDate)(data);
+                }
+                catch (err) {
+                    console.log(err);
+                }
+            }
+            if (maxDate && !dateRegex.test(maxDate)) {
+                try {
+                    maxDate = Handlebars.compile(maxDate)(data);
+                }
+                catch (err) {
+                    console.log(err);
+                }
+            }
+            if ((minDate && value < minDate) || (maxDate && value > maxDate)) {
+                this.errorDetails['date'] = validate.customMessage;
+            }
+            else {
+                delete this.errorDetails['date'];
+            }
+        }
+        if (this.component.validate.minTime || this.component.validate.maxTime) {
+            if ((validate.minTime && value < validate.minTime) || (validate.maxTime && value > validate.maxTime)) {
+                this.errorDetails['time'] = validate.customMessage;
+            }
+            else {
+                delete this.errorDetails['time'];
+            }
+        }
+        if (validate.min || validate.max) {
+            if (!isNil(value) &&
+                value !== '' &&
+                ((validate.min && value < validate.min) || (validate.max && value > validate.max))) {
+                this.errorDetails['min-max'] = validate.customMessage;
+            }
+            else {
+                delete this.errorDetails['min-max'];
+            }
+        }
+        //check for out-of-the-box formio errors which store on this.root.errors
+        this.checkValidity(this.dataValue, true, this.data);
+        this.manageFormErrors();
+    }
+    hasErrors() {
+        return !isEmpty(this.errorDetails);
+    }
+    errorMessages() {
+        return Object.values(this.errorDetails).join(', ');
+    }
+    /**
+     * Synchronizes out-of-the-box formio errors with this field's errorDetails object
+     */
+    manageFormErrors() {
+        var _a;
+        const outOfTheBoxError = (_a = this.root.errors.find((error) => {
+            return error.component.key === this.component.key;
+        })) === null || _a === void 0 ? void 0 : _a.message;
+        //add OoB formio error to errorDetails object to show under field
+        if (outOfTheBoxError) {
+            this.errorDetails['rootError'] = outOfTheBoxError;
+        }
+        else {
+            delete this.errorDetails['rootError'];
+        }
+        //add custom errors to be read by the Buttons component to show above the form
+        Object.values(this.errorDetails).forEach((error, index) => {
+            if (!this.root.errors.some((err) => err.message === error) &&
+                !this.root.customErrors.some((err) => err.message === error)) {
+                this.root.customErrors = [
+                    ...this.root.customErrors,
+                    { component: this.component, message: error, formattedKeyOrPath: this.component.key },
+                ];
+            }
+        });
+        //remove custom errors that are no longer relevant
+        if (isEmpty(this.errorDetails)) {
+            this.root.customErrors = this.root.customErrors.filter((err) => err.formattedKeyOrPath !== this.component.key);
+        }
+    }
+    beforeSubmit() {
+        this.handleValidation(this.dataValue);
+        this.element && this.attach(this.element);
+    }
+    attachReact(element) {
+        var _a, _b, _c;
+        const { id, defaultValue } = this.component;
+        let root = ReactDOM.findDOMNode(element);
+        if (!root) {
+            root = element;
+        }
+        // FormIO uses id for an enclosing div, so we need to give the input field a different id.
+        const inputId = `${id}-input`;
+        /* TODO: You'll see warnings to upgrade to React 18's createRoot();
+         * It'll cause issues with: field-level errors not showing up, conditional visibility not working, focus moving out of the form on keypress
+         * Will need to be revisited later. Possibly look into using this.ref */
+        return ReactDOM.render(React.createElement("div", null,
+            React.createElement(FormComponentWrapper, Object.assign({}, this.component, { inputId: inputId, errorMessage: this.errorMessages(), value: (_a = this.dataValue) !== null && _a !== void 0 ? _a : defaultValue }),
+                React.createElement(FormField, Object.assign({ onChange: this.handleChange, onBlur: (e) => {
+                        // no mask errors when field is empty and not required
+                        const componentError = this.root.errors.find((error) => error.component.key === this.component.key);
+                        const maskMessage = componentError === null || componentError === void 0 ? void 0 : componentError.messages.find((message) => message.context.validator === 'mask');
+                        const falsePositiveMaskError = !(!!maskMessage &&
+                            !this.component.validate.required &&
+                            this.root.data[this.component.key] === maskMessage.context.value);
+                        ['TextField', 'Decimal', 'Integer'].includes(this.component.type) &&
+                            falsePositiveMaskError &&
+                            this.component.autoSave &&
+                            isEmpty(this.errorDetails) &&
+                            this.component.autoSave(this.root.data);
+                        ['TextField', 'Decimal', 'Integer'].includes(this.component.type) &&
+                            falsePositiveMaskError &&
+                            isEmpty(this.errorDetails) &&
+                            this.emit('changed-' + this.component.key, e.target.value);
+                    } }, this.component, { id: inputId, defaultValue: (_b = this.dataValue) !== null && _b !== void 0 ? _b : defaultValue, mask: this.component.inputMask, error: this.hasErrors(), size: (_c = this.component.fieldHeight) !== null && _c !== void 0 ? _c : 'medium' })))), root);
+    }
+}

package/dist/published/components/custom/Form/FormComponents/ImageComponent/Image.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ObjectInstance } from '@evoke-platform/context';
+export declare function blobToDataUrl(blob: Blob): Promise<string>;
+declare type ImageProps = {
+    id: string;
+    handleChange: (propertyId: string, value: string | null) => void;
+    property: {
+        id: string;
+    };
+    instance: ObjectInstance;
+    canUpdateProperty: boolean;
+    error: boolean;
+};
+export declare const Image: (props: ImageProps) => JSX.Element;
+export {};

package/dist/published/components/custom/Form/FormComponents/ImageComponent/Image.js

@@ -0,0 +1,111 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { BackupOutlined, ClearRounded } from '@mui/icons-material';
+import React, { useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { CardMedia, IconButton, Typography } from '../../../../core';
+import { Box, Grid } from '../../../../layout';
+export function blobToDataUrl(blob) {
+    const reader = new FileReader();
+    return new Promise((resolve) => {
+        reader.onloadend = () => resolve(reader.result);
+        reader.readAsDataURL(blob);
+    });
+}
+const styles = {
+    imageContainer: {
+        margin: '5px 0',
+        height: '160px',
+        borderRadius: '8px',
+        maxWidth: '100%',
+    },
+    dropzoneContainer: {
+        margin: '5px 0',
+        height: '160px',
+        borderRadius: '8px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px dashed #858585',
+        position: 'relative',
+        cursor: 'pointer',
+    },
+    icon: {
+        color: '#fff',
+        zIndex: 40,
+        fontSize: '16px',
+    },
+    deleteIcon: {
+        borderRadius: '50%',
+        padding: '3px',
+        backgroundColor: '#212B36',
+        ':hover': { backgroundColor: '#212B36', cursor: 'pointer' },
+        color: '#fff',
+        right: '29px',
+        bottom: '138px',
+    },
+    image: {
+        borderRadius: '8px',
+        width: 'fit-content',
+        maxWidth: '95%',
+        height: '160px',
+        position: 'relative',
+        display: 'inline-block',
+        objectFit: 'contain',
+    },
+};
+export const Image = (props) => {
+    const { id, handleChange, property, instance, canUpdateProperty, error } = props;
+    const [image, setImage] = useState();
+    useEffect(() => {
+        const value = instance === null || instance === void 0 ? void 0 : instance[property.id];
+        if (typeof value === 'string') {
+            setImage(value);
+        }
+    }, [property]);
+    const handleUpload = (file) => __awaiter(void 0, void 0, void 0, function* () {
+        if ((file === null || file === void 0 ? void 0 : file.size) && file.size <= 300000) {
+            const dataUrl = file ? yield blobToDataUrl(file) : null;
+            setImage(dataUrl);
+            handleChange(property.id, dataUrl);
+        }
+    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleRemove = (e) => {
+        setImage(null);
+        handleChange(property.id, '');
+        e.stopPropagation();
+    };
+    const { getRootProps, getInputProps, open } = useDropzone({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onDrop: (files) => handleUpload(files === null || files === void 0 ? void 0 : files[0]),
+        accept: { 'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.svg'] },
+    });
+    return (React.createElement(React.Fragment, null, image ? (React.createElement(Box, { sx: styles.imageContainer },
+        React.createElement(Box, { sx: { position: 'relative', left: 0, zIndex: 5 } },
+            React.createElement(CardMedia, { component: "img", image: image, sx: styles.image }),
+            canUpdateProperty && (React.createElement(IconButton, { onClick: handleRemove, "aria-label": "remove image", sx: styles.deleteIcon },
+                React.createElement(ClearRounded, { sx: styles.icon })))))) : canUpdateProperty ? (React.createElement(Box, Object.assign({ sx: Object.assign(Object.assign({}, styles.dropzoneContainer), { borderColor: error ? 'red' : '#858585' }) }, getRootProps(), { onClick: open }),
+        React.createElement("input", Object.assign({}, getInputProps({ id }), { multiple: false })),
+        React.createElement(Grid, { container: true, sx: { width: '100%' } },
+            React.createElement(Grid, { item: true, xs: 12, sx: { display: 'flex', justifyContent: 'center', paddingBottom: '5px' } },
+                React.createElement(BackupOutlined, { sx: { color: '#919EAB', height: '1.5em', width: '1.5em' } })),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Typography, { variant: "body2", sx: { color: '#212B36', textAlign: 'center' } },
+                    "Drag and drop or",
+                    ' ',
+                    React.createElement(Typography, { component: 'span', sx: { color: '#0075A7', fontSize: '14px' } }, "select a file"),
+                    ' ',
+                    "to upload")),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Typography, { variant: "body2", sx: { color: '#637381', textAlign: 'center' } }, "Max file size of 300KB")),
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Typography, { variant: "body2", sx: { color: '#637381', textAlign: 'center' } }, "JPG, PNG, or GIF"))))) : (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No image"))));
+};

package/dist/published/components/custom/Form/FormComponents/ImageComponent/ImageComponent.d.ts

@@ -0,0 +1,23 @@
+import { ReactComponent } from '@formio/react';
+import { Root } from 'react-dom/client';
+import { BaseFormComponentProps } from '../../types';
+export declare class ImageComponent extends ReactComponent {
+    [x: string]: any;
+    static schema: any;
+    component: BaseFormComponentProps;
+    errorDetails: any;
+    componentRoot?: Root;
+    constructor(component: BaseFormComponentProps, options: any, data: any);
+    init(): void;
+    clearErrors(): void;
+    handleValidation(): void;
+    hasErrors(): boolean;
+    errorMessages(): string;
+    /**
+     * Synchronizes out-of-the-box formio errors with this field's errorDetails object
+     */
+    manageFormErrors(): void;
+    handleChange: (key: string, value: string | null) => void;
+    beforeSubmit(): void;
+    attachReact(element: Element): void;
+}

package/dist/published/components/custom/Form/FormComponents/ImageComponent/ImageComponent.js

@@ -0,0 +1,112 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ReactComponent } from '@formio/react';
+import { isEmpty } from 'lodash';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { FormComponentWrapper } from '../../Common';
+import { isPropertyVisible } from '../../utils';
+import { Image } from './Image';
+export class ImageComponent extends ReactComponent {
+    constructor(component, options, data) {
+        super(Object.assign(Object.assign({}, component), { canUpdateProperty: !component.readOnly, hideLabel: true }), options, data);
+        this.handleChange = (key, value) => {
+            delete this.errorDetails['api-error'];
+            this.setValue(value);
+            this.updateValue(value, { modified: true });
+            this.handleValidation();
+            this.emit('changed-' + this.component.key, value);
+            this.attach(this.element);
+            if (this.component.autoSave) {
+                this.component.autoSave({ [key]: value });
+            }
+        };
+        this.errorDetails = {};
+        this.handleChange = this.handleChange.bind(this);
+    }
+    init() {
+        this.on('changed-' + this.component.conditional.when, (value) => {
+            //set default value when conditional field is shown
+            if (this.component.defaultValue && value === this.component.conditional.eq) {
+                this.setValue(this.component.defaultValue);
+                this.updateValue(this.component.defaultValue, { modified: true });
+            }
+            //clear data and errors when a true conditional field is hidden
+            if (this.component.conditional.show && value !== this.component.conditional.eq) {
+                this.setValue('');
+                this.updateValue('', { modified: true });
+                this.clearErrors();
+                super.detach();
+                // Detach the componentRoot when the component is hidden
+                if (this.componentRoot) {
+                    this.componentRoot.unmount();
+                    this.componentRoot = undefined;
+                }
+            }
+        });
+        this.on(`api-error`, (details) => {
+            const error = details.find((detail) => detail.code === 'errorMessage' && detail.path.replace('/', '') === this.component.key);
+            if (error) {
+                if (!this.root.customErrors.find((err) => err.formattedKeyOrPath === this.component.key && err.message === error.message)) {
+                    this.root.customErrors = [
+                        ...this.root.customErrors,
+                        Object.assign(Object.assign({}, error), { code: 'api-error', component: this.component, formattedKeyOrPath: this.component.key }),
+                    ];
+                }
+                this.errorDetails['api-error'] = error === null || error === void 0 ? void 0 : error.message;
+            }
+            else {
+                this.root.customErrors = this.root.customErrors.filter((item) => item.formattedKeyOrPath !== this.component.key);
+                delete this.errorDetails['api-error'];
+            }
+            this.attach(this.element);
+            this.attachReact(this.element);
+        });
+    }
+    clearErrors() {
+        this.errorDetails = {};
+        this.root.customErrors = this.root.customErrors.filter((error) => error.formattedKeyOrPath !== this.component.key);
+    }
+    handleValidation() {
+        if (!isPropertyVisible(this.component.conditional, this.root.data)) {
+            return;
+        }
+        // check for out-of-the-box formio errors which store on this.root.errors
+        this.checkValidity(this.dataValue, true, this.data);
+        this.manageFormErrors();
+    }
+    hasErrors() {
+        return !isEmpty(this.errorDetails);
+    }
+    errorMessages() {
+        return Object.values(this.errorDetails).join(', ');
+    }
+    /**
+     * Synchronizes out-of-the-box formio errors with this field's errorDetails object
+     */
+    manageFormErrors() {
+        var _a;
+        const outOfTheBoxError = (_a = this.root.errors.find((error) => {
+            return error.component.key === this.component.key;
+        })) === null || _a === void 0 ? void 0 : _a.message;
+        // add OoB formio error to errorDetails object to show under field
+        if (outOfTheBoxError) {
+            this.errorDetails['rootError'] = outOfTheBoxError;
+        }
+        else {
+            delete this.errorDetails['rootError'];
+        }
+    }
+    beforeSubmit() {
+        this.handleValidation();
+        this.element && this.attach(this.element);
+    }
+    attachReact(element) {
+        if (!this.componentRoot) {
+            this.componentRoot = createRoot(element);
+        }
+        // FormIO uses id for an enclosing div, so we need to give the input field a different id.
+        const inputId = `${this.component.id}-input`;
+        return this.componentRoot.render(React.createElement("div", null, !this.component.hidden ? (React.createElement(FormComponentWrapper, Object.assign({}, this.component, { inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() }),
+            React.createElement(Image, Object.assign({}, this.component, { id: inputId, handleChange: this.handleChange, error: this.hasErrors() })))) : null));
+    }
+}