@evoke-platform/ui-components 1.0.0-dev.226 → 1.0.0-dev.228

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

@@ -1,12 +1,3 @@
-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());
-    });
-};
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ReactComponent } from '@formio/react';
 import { isEmpty } from 'lodash';
@@ -17,11 +8,15 @@ import { FormComponentWrapper } from '../../Common';
 import { Document } from './Document';
 export class DocumentComponent extends ReactComponent {
     constructor(component, options, data) {
-        super(Object.assign(Object.assign({}, component), { canUpdateProperty: !component.readOnly, hideLabel: true }), options, data);
+        super({
+            ...component,
+            canUpdateProperty: !component.readOnly,
+            hideLabel: true,
+        }, options, data);
         this.handleChange = (key, value) => {
             delete this.errorDetails['api-error'];
             this.setValue(value);
-            this.updateValue(value !== null && value !== void 0 ? value : [], { modified: true });
+            this.updateValue(value ?? [], { modified: true });
             this.handleValidation(value);
             this.emit('changed-' + this.component.key, value);
             this.attach(this.element);
@@ -53,10 +48,15 @@ export class DocumentComponent extends ReactComponent {
                 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 }),
+                        {
+                            ...error,
+                            code: 'api-error',
+                            component: this.component,
+                            formattedKeyOrPath: this.component.key,
+                        },
                     ];
                 }
-                this.errorDetails['api-error'] = error === null || error === void 0 ? void 0 : error.message;
+                this.errorDetails['api-error'] = error?.message;
             }
             else {
                 this.root.customErrors = this.root.customErrors.filter((item) => item.formattedKeyOrPath !== this.component.key);
@@ -80,10 +80,9 @@ export class DocumentComponent extends ReactComponent {
      * Synchronizes out-of-the-box form.io errors with this field's errorDetails object
      */
     manageFormErrors() {
-        var _a;
-        const outOfTheBoxError = (_a = this.root.errors.find((error) => {
+        const outOfTheBoxError = this.root.errors.find((error) => {
             return error.component.key === this.component.key;
-        })) === null || _a === void 0 ? void 0 : _a.message;
+        })?.message;
         // add OoB form.io error to errorDetails object to show under field
         if (outOfTheBoxError) {
             this.errorDetails['rootError'] = outOfTheBoxError;
@@ -103,14 +102,13 @@ export class DocumentComponent extends ReactComponent {
         });
     }
     handleValidation(value) {
-        var _a;
         const validate = this.component.validate;
-        const amountOfDocuments = (_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0;
+        const amountOfDocuments = value?.length ?? 0;
         if (amountOfDocuments &&
-            (((validate === null || validate === void 0 ? void 0 : validate.minDocuments) && amountOfDocuments < validate.minDocuments) ||
-                ((validate === null || validate === void 0 ? void 0 : validate.maxDocuments) && amountOfDocuments > validate.maxDocuments))) {
+            ((validate?.minDocuments && amountOfDocuments < validate.minDocuments) ||
+                (validate?.maxDocuments && amountOfDocuments > validate.maxDocuments))) {
             let error;
-            if (validate === null || validate === void 0 ? void 0 : validate.customMessage) {
+            if (validate?.customMessage) {
                 error = validate.customMessage;
             }
             else if (validate.minDocuments && validate.maxDocuments) {
@@ -131,11 +129,9 @@ export class DocumentComponent extends ReactComponent {
         this.checkValidity(this.dataValue, true, this.data);
         this.manageFormErrors();
     }
-    beforeSubmit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.handleValidation(this.dataValue);
-            this.element && this.attach(this.element);
-        });
+    async beforeSubmit() {
+        this.handleValidation(this.dataValue);
+        this.element && this.attach(this.element);
     }
     attachReact(element) {
         let root = ReactDOM.findDOMNode(element);
@@ -148,7 +144,7 @@ export class DocumentComponent extends ReactComponent {
         // Form.io uses id for an enclosing div, so we need to give the input field a different id
         const inputId = `${this.component.id}-input`;
         return ReactDOM.render(React.createElement("div", null,
-            React.createElement(FormComponentWrapper, Object.assign({}, this.component, { inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() }),
-                React.createElement(Document, Object.assign({}, this.component, { id: inputId, handleChange: this.handleChange, error: this.hasErrors(), value: this.dataValue })))), root);
+            React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() },
+                React.createElement(Document, { ...this.component, id: inputId, handleChange: this.handleChange, error: this.hasErrors(), value: this.dataValue }))), root);
     }
 }

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentList.js

@@ -1,12 +1,3 @@
-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 { isEqual } from 'lodash';
 import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
@@ -35,11 +26,11 @@ export const DocumentList = (props) => {
     const [savedDocuments, setSavedDocuments] = useState();
     const [hasViewPermission, setHasViewPermission] = useState(true);
     useEffect(() => {
-        const currentValue = instance === null || instance === void 0 ? void 0 : instance[property.id];
-        if (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) {
+        const currentValue = instance?.[property.id];
+        if (currentValue?.length) {
             const currentDocumentIds = currentValue.map((doc) => doc.id);
             if (currentDocumentIds.length &&
-                !isEqual(currentDocumentIds, savedDocuments === null || savedDocuments === void 0 ? void 0 : savedDocuments.map((doc) => doc.id))) {
+                !isEqual(currentDocumentIds, savedDocuments?.map((doc) => doc.id))) {
                 getDocuments(currentDocumentIds);
             }
         }
@@ -66,31 +57,28 @@ export const DocumentList = (props) => {
         checkPermissions();
     }, []);
     const checkPermissions = () => {
-        var _a;
-        if ((_a = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _a === void 0 ? void 0 : _a.length) {
+        if (instance?.[property.id]?.length) {
             apiServices
                 .get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=view`))
                 .then((accessCheck) => setHasViewPermission(accessCheck.result));
         }
     };
     const isFile = (doc) => doc instanceof File;
-    const fileExists = (doc) => savedDocuments === null || savedDocuments === void 0 ? void 0 : savedDocuments.find((d) => d.id === doc.id);
+    const fileExists = (doc) => savedDocuments?.find((d) => d.id === doc.id);
     const handleRemove = (index) => {
-        var _a;
-        const updatedDocuments = (_a = documents === null || documents === void 0 ? void 0 : documents.filter((_, i) => i !== index)) !== null && _a !== void 0 ? _a : [];
+        const updatedDocuments = documents?.filter((_, i) => i !== index) ?? [];
         handleChange(property.id, updatedDocuments);
     };
-    const openDocument = (index) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
-        const doc = documents === null || documents === void 0 ? void 0 : documents[index];
+    const openDocument = async (index) => {
+        const doc = documents?.[index];
         if (doc) {
             let url;
             const contentType = doc instanceof File
                 ? doc.type
-                : (_a = savedDocuments === null || savedDocuments === void 0 ? void 0 : savedDocuments.find((savedDocument) => savedDocument.id === doc.id)) === null || _a === void 0 ? void 0 : _a.contentType;
+                : savedDocuments?.find((savedDocument) => savedDocument.id === doc.id)?.contentType;
             if (!isFile(doc)) {
                 try {
-                    const documentResponse = yield apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/${doc.id}/content`), { responseType: 'blob' });
+                    const documentResponse = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/${doc.id}/content`), { responseType: 'blob' });
                     const blob = new Blob([documentResponse], { type: contentType });
                     url = window.URL.createObjectURL(blob);
                 }
@@ -112,61 +100,58 @@ export const DocumentList = (props) => {
                 document.body.appendChild(link);
                 link.click();
                 // Clean up and remove the link
-                (_b = link.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(link);
+                link.parentNode?.removeChild(link);
             }
         }
-    });
+    };
     const getDocumentSize = (doc) => {
         let size;
         if (isFile(doc)) {
             size = prettyBytes(doc.size);
         }
         else {
-            const savedDoc = savedDocuments === null || savedDocuments === void 0 ? void 0 : savedDocuments.find((savedDocument) => savedDocument.id === doc.id);
+            const savedDoc = savedDocuments?.find((savedDocument) => savedDocument.id === doc.id);
             size = savedDoc ? prettyBytes(savedDoc.size) : '';
         }
         return size;
     };
     return (React.createElement(React.Fragment, null,
         !documents && !canUpdateProperty && (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No documents")),
-        !!(documents === null || documents === void 0 ? void 0 : documents.length) && (React.createElement(Box, null, documents.map((doc, index) => {
-            var _a, _b, _c;
-            return (React.createElement(Grid, { container: true, sx: {
-                    width: '100%',
-                    border: '1px solid #C4CDD5',
+        !!documents?.length && (React.createElement(Box, null, documents.map((doc, index) => (React.createElement(Grid, { container: true, sx: {
+                width: '100%',
+                border: '1px solid #C4CDD5',
+                borderRadius: '6px',
+                margin: '5px 2px',
+                padding: ' 8px',
+                display: 'flex',
+                alignItems: 'center',
+            } },
+            React.createElement(Grid, { item: true, sx: { display: 'flex', justifyContent: 'center', padding: '7px', marginLeft: '4px' } },
+                React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: doc.name?.split('.')?.pop() ?? '', sx: { height: '1.5em', width: '1.5em' } })),
+            React.createElement(Grid, { item: true, sx: { flex: 1, justifyContent: 'center', paddingBottom: '5px' } },
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { sx: {
+                            fontSize: '14px',
+                            fontWeight: 700,
+                            color: '#212B36',
+                            lineHeight: '15px',
+                            paddingTop: '8px',
+                        } }, doc.name)),
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, getDocumentSize(doc)))),
+            (isFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
+                React.createElement(IconButton, { "aria-label": "open document", sx: { ...styles.icon, marginRight: '16px' }, onClick: () => openDocument(index) },
+                    React.createElement(LaunchRounded, { sx: { color: '#637381', fontSize: '22px' } })))),
+            !isFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
+                    marginRight: '16px',
+                    backgroundColor: 'rgba(222, 48, 36, 0.16)',
+                    color: '#A91813',
                     borderRadius: '6px',
-                    margin: '5px 2px',
-                    padding: ' 8px',
-                    display: 'flex',
-                    alignItems: 'center',
-                } },
-                React.createElement(Grid, { item: true, sx: { display: 'flex', justifyContent: 'center', padding: '7px', marginLeft: '4px' } },
-                    React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: (_c = (_b = (_a = doc.name) === null || _a === void 0 ? void 0 : _a.split('.')) === null || _b === void 0 ? void 0 : _b.pop()) !== null && _c !== void 0 ? _c : '', sx: { height: '1.5em', width: '1.5em' } })),
-                React.createElement(Grid, { item: true, sx: { flex: 1, justifyContent: 'center', paddingBottom: '5px' } },
-                    React.createElement(Grid, { item: true, xs: 12 },
-                        React.createElement(Typography, { sx: {
-                                fontSize: '14px',
-                                fontWeight: 700,
-                                color: '#212B36',
-                                lineHeight: '15px',
-                                paddingTop: '8px',
-                            } }, doc.name)),
-                    React.createElement(Grid, { item: true, xs: 12 },
-                        React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, getDocumentSize(doc)))),
-                (isFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
-                    React.createElement(IconButton, { "aria-label": "open document", sx: Object.assign(Object.assign({}, styles.icon), { marginRight: '16px' }), onClick: () => openDocument(index) },
-                        React.createElement(LaunchRounded, { sx: { color: '#637381', fontSize: '22px' } })))),
-                !isFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
-                        marginRight: '16px',
-                        backgroundColor: 'rgba(222, 48, 36, 0.16)',
-                        color: '#A91813',
-                        borderRadius: '6px',
-                        height: '25px',
-                        fontWeight: 700,
-                        '& .MuiChip-icon': { color: '#A91813', width: '.8em', marginBottom: '2px' },
-                    }, icon: React.createElement(WarningRounded, null) })),
-                canUpdateProperty && (React.createElement(Grid, { item: true },
-                    React.createElement(IconButton, { "aria-label": "delete document", sx: styles.icon, onClick: () => handleRemove(index) },
-                        React.createElement(TrashCan, { sx: { color: '#637381' } }))))));
-        })))));
+                    height: '25px',
+                    fontWeight: 700,
+                    '& .MuiChip-icon': { color: '#A91813', width: '.8em', marginBottom: '2px' },
+                }, icon: React.createElement(WarningRounded, null) })),
+            canUpdateProperty && (React.createElement(Grid, { item: true },
+                React.createElement(IconButton, { "aria-label": "delete document", sx: styles.icon, onClick: () => handleRemove(index) },
+                    React.createElement(TrashCan, { sx: { color: '#637381' } })))))))))));
 };

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

@@ -9,6 +9,7 @@ declare type FormFieldComponentProps = Omit<BaseFormComponentProps, 'property'>
     inputMaskPlaceholderChar?: string;
     addressPropertyId?: string;
     isAddressLine1?: boolean;
+    initialValue?: string;
 };
 export declare class FormFieldComponent extends ReactComponent {
     [x: string]: any;

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

@@ -1,12 +1,15 @@
 import { ReactComponent } from '@formio/react';
 import Handlebars from 'handlebars';
-import { isArray, isEmpty, isNil } from 'lodash';
+import { isArray, isEmpty, isNil, uniq } 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';
+function isAddressProperties(key) {
+    return /\.line1|\.line2|\.city|\.county|\.state|\.zipCode$/.test(key);
+}
 Handlebars.registerHelper('addDays', function (addend1, addend2) {
     const dateAddend1 = DateTime.fromISO(addend1);
     if (dateAddend1.isValid) {
@@ -31,17 +34,19 @@ export class FormFieldComponent extends ReactComponent {
      * @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'
+        component.property = {
+            ...component.property,
+            type: (property?.type === 'string' && property?.enum) || component.type === 'Select'
                 ? 'choices'
-                : property === null || property === void 0 ? void 0 : property.type });
+                : 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 (property?.enum) {
+            selectOptions = property?.enum?.map((val) => ({ label: val, value: val }));
         }
         else if (component.type === 'Select') {
             selectOptions = [
@@ -50,7 +55,12 @@ export class FormFieldComponent extends ReactComponent {
                 { label: 'Public', value: 'Public' },
             ];
         }
-        super(Object.assign(Object.assign({}, component), { hideLabel: true, selectOptions, inputMaskPlaceholderChar: component.inputMaskPlaceholderChar || '_' }), options, data);
+        super({
+            ...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'))) {
@@ -73,6 +83,7 @@ export class FormFieldComponent extends ReactComponent {
             }
         };
         this.handleChange = (key, value) => {
+            delete this.errorDetails['api-error'];
             let selectedValue, label;
             if (this.component.isAddressLine1) {
                 if (typeof value === 'string') {
@@ -107,7 +118,7 @@ export class FormFieldComponent extends ReactComponent {
                         ? value.label
                         : value;
             }
-            this.setValue(selectedValue !== null && selectedValue !== void 0 ? selectedValue : '');
+            this.setValue(selectedValue ?? '');
             this.updateValue(label, { modified: true });
             this.handleValidation(selectedValue);
             !['TextField', 'Decimal', 'Integer'].includes(this.component.type) &&
@@ -134,7 +145,6 @@ export class FormFieldComponent extends ReactComponent {
         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) {
@@ -154,7 +164,7 @@ export class FormFieldComponent extends ReactComponent {
             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.setValue(value ?? '');
                 this.updateValue(value, { modified: true });
                 this.attach(this.element);
             });
@@ -164,57 +174,124 @@ export class FormFieldComponent extends ReactComponent {
             // 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)) {
+            if (this.component.validate?.minDate && /^{{.*}}$/.test(this.component.validate?.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])) {
+                if (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)) {
+            if (this.component.validate?.maxDate && /^{{.*}}$/.test(this.component.validate?.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])) {
+                if (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.setValue(this.dataValue ?? '');
                         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');
+        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), { component: this.component, formattedKeyOrPath: this.component.key }),
+                        {
+                            ...error,
+                            code: 'api-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 = {};
+                this.errorDetails['api-error'] = 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);
         });
+        if (this.component.initialValue) {
+            if (Array.isArray(this.component.initialValue) &&
+                this.component.initialValue.some((item) => /^{{.*}}$/.test(item))) {
+                const staticValues = this.component.initialValue.filter((item) => !/^{{.*}}$/.test(item));
+                for (const item of this.component.initialValue.filter((item) => /^{{.*}}$/.test(item))) {
+                    const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
+                    const groups = regex.exec(item)?.groups;
+                    if (groups?.relatedObjectProperty && groups?.nestedProperty) {
+                        this.on(`changed-${groups.relatedObjectProperty}`, (value) => {
+                            if (value) {
+                                const newValue = uniq([
+                                    ...this.dataValue,
+                                    ...staticValues,
+                                    ...value[groups.nestedProperty],
+                                ]);
+                                this.setValue(newValue);
+                                this.updateValue(newValue, { modified: true });
+                                this.attach(this.element);
+                            }
+                        });
+                    }
+                }
+            }
+            else if (/^{{.*}}$/.test(this.component.initialValue)) {
+                if (isAddressProperties(this.component.key)) {
+                    const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<addressProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedAddressProperty>line1|line2|city|county|state|zipCode)}}$/;
+                    const groups = regex.exec(this.component.initialValue)?.groups;
+                    if (groups?.relatedObjectProperty && groups?.addressProperty && groups?.nestedAddressProperty) {
+                        this.on(`changed-${groups.relatedObjectProperty}`, (value) => {
+                            if (value) {
+                                const newValue = value[groups.addressProperty]?.[groups.nestedAddressProperty];
+                                this.setValue(newValue);
+                                this.updateValue(newValue, { modified: true });
+                                this.attach(this.element);
+                            }
+                        });
+                    }
+                }
+                else {
+                    const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
+                    const groups = regex.exec(this.component.initialValue)?.groups;
+                    if (groups?.relatedObjectProperty && groups?.nestedProperty) {
+                        this.on(`changed-${groups.relatedObjectProperty}`, (value) => {
+                            if (value) {
+                                const newValue = value[groups.nestedProperty];
+                                this.setValue(newValue);
+                                this.updateValue(newValue, { modified: true });
+                                this.attach(this.element);
+                                if (this.component.type === 'Select') {
+                                    this.attachReact(this.element);
+                                }
+                            }
+                        });
+                    }
+                }
+            }
+        }
     }
     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));
+            this.component.inputMask
+                ?.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 &&
@@ -285,7 +362,7 @@ export class FormFieldComponent extends ReactComponent {
         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),
+                input: { ...this.root.data },
                 __today__: DateTime.now().toISODate(),
             };
             let { minDate, maxDate } = validate;
@@ -344,10 +421,9 @@ export class FormFieldComponent extends ReactComponent {
      * Synchronizes out-of-the-box formio errors with this field's errorDetails object
      */
     manageFormErrors() {
-        var _a;
-        const outOfTheBoxError = (_a = this.root.errors.find((error) => {
+        const outOfTheBoxError = this.root.errors.find((error) => {
             return error.component.key === this.component.key;
-        })) === null || _a === void 0 ? void 0 : _a.message;
+        })?.message;
         //add OoB formio error to errorDetails object to show under field
         if (outOfTheBoxError) {
             this.errorDetails['rootError'] = outOfTheBoxError;
@@ -375,8 +451,7 @@ export class FormFieldComponent extends ReactComponent {
         this.element && this.attach(this.element);
     }
     attachReact(element) {
-        var _a, _b, _c;
-        const { id, defaultValue } = this.component;
+        const { id } = this.component;
         let root = ReactDOM.findDOMNode(element);
         if (!root) {
             root = element;
@@ -387,11 +462,11 @@ export class FormFieldComponent extends ReactComponent {
          * 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) => {
+            React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, errorMessage: this.errorMessages(), value: this.dataValue },
+                React.createElement(FormField, { 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 maskMessage = componentError?.messages.find((message) => message.context.validator === 'mask');
                         const falsePositiveMaskError = !(!!maskMessage &&
                             !this.component.validate.required &&
                             this.root.data[this.component.key] === maskMessage.context.value);
@@ -404,6 +479,6 @@ export class FormFieldComponent extends ReactComponent {
                             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);
+                    }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium' }))), root);
     }
 }

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

@@ -3,6 +3,7 @@ import { ObjectInstance } from '@evoke-platform/context';
 export declare function blobToDataUrl(blob: Blob): Promise<string>;
 declare type ImageProps = {
     id: string;
+    value?: string;
     handleChange: (propertyId: string, value: string | null) => void;
     property: {
         id: string;
@@ -10,6 +11,7 @@ declare type ImageProps = {
     instance: ObjectInstance;
     canUpdateProperty: boolean;
     error: boolean;
+    initialValue?: unknown;
 };
 export declare const Image: (props: ImageProps) => JSX.Element;
 export {};