@formio/js 5.0.2 → 5.1.0-dev.5522.066969f

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { eachComponent } from '../../../utils/utils';
+import { eachComponent } from '../../../utils';
 const calculateSingleSelectData = (context, defaultValue) => {
     const { instance, data } = context;
     const rawDefaultValue = instance.downloadedResources.find(resource => _.get(resource, data.valueProperty) === defaultValue);
@@ -56,42 +56,6 @@ export default [
             ],
         },
     },
-    {
-        type: 'textfield',
-        weight: 10,
-        input: true,
-        key: 'indexeddb.database',
-        label: 'Database name',
-        tooltip: 'The name of the indexeddb database.',
-        conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },
-        },
-    },
-    {
-        type: 'textfield',
-        input: true,
-        key: 'indexeddb.table',
-        label: 'Table name',
-        weight: 16,
-        tooltip: 'The name of table in the indexeddb database.',
-        conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },
-        }
-    },
-    {
-        type: 'textarea',
-        as: 'json',
-        editor: 'ace',
-        weight: 18,
-        input: true,
-        key: 'indexeddb.filter',
-        label: 'Row Filter',
-        tooltip: 'Filter table items that match the object.',
-        defaultValue: {},
-        conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },
-        },
-    },
     {
         type: 'textarea',
         as: 'json',
@@ -113,6 +77,7 @@ export default [
         key: 'lazyLoad',
         tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\'s will only fire when the control is activated.',
         weight: 11,
+        defaultValue: true,
         conditional: {
             json: {
                 and: [
@@ -202,7 +167,7 @@ export default [
         label: 'Value Property',
         key: 'valueProperty',
         skipMerge: true,
-        clearOnHide: true,
+        clearOnHide: false,
         tooltip: 'The field to use as the value.',
         weight: 11,
         refreshOn: 'data.resource',
@@ -635,8 +600,8 @@ export default [
         input: true,
         weight: 25,
         key: 'reference',
-        label: 'Save as reference',
-        tooltip: 'Using this option will save this field as a reference and link its value to the value of the origin record.',
+        label: 'Submit as reference',
+        tooltip: 'Using this option will submit this field as a reference id and link its value to the value of the origin record.',
         conditional: {
             json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },
         },
@@ -681,6 +646,7 @@ export default [
     },
     {
         key: 'selectData',
+        type: 'hidden',
         conditional: {
             json: {
                 and: [

package/lib/mjs/components/selectboxes/SelectBoxes.d.ts

@@ -8,6 +8,12 @@ export default class SelectBoxesComponent extends RadioComponent {
      * @returns {boolean} - If the value is empty.
      */
     isEmpty(value?: any): boolean;
+    /**
+     * Normalize values coming into updateValue.
+     * @param {any} value - The value to normalize.
+     * @returns {*} - The normalized value
+     */
+    normalizeValue(value: any): any;
     setInputsDisabled(value: any, onlyUnchecked: any): void;
     checkComponentValidity(data: any, dirty: any, rowData: any, options: any, errors?: any[]): boolean;
 }

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes, boolValue, getComponent } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, boolValue, getComponent } from '../../utils';
 import RadioComponent from '../radio/Radio';
 export default class SelectBoxesComponent extends RadioComponent {
     static schema(...extend) {
@@ -66,6 +66,9 @@ export default class SelectBoxesComponent extends RadioComponent {
         info.attr.class = 'form-check-input';
         return info;
     }
+    get hasDefaultValue() {
+        return true;
+    }
     get emptyValue() {
         return this.component.values.reduce((prev, value) => {
             if (value.value) {
@@ -149,6 +152,9 @@ export default class SelectBoxesComponent extends RadioComponent {
                 }
             }
         }
+        else if (_.isEmpty(this.loadedOptions) && !checkedValues.length) {
+            value = {};
+        }
         return value;
     }
     /**
@@ -250,14 +256,14 @@ export default class SelectBoxesComponent extends RadioComponent {
                     this.setInputsDisabled(false);
                 }
                 if (!isValid && maxCount && count > maxCount) {
-                    const message = this.t(this.component.maxSelectedCountMessage || 'You may only select up to {{maxCount}} items', { maxCount });
+                    const message = this.t(this.component.maxSelectedCountMessage || 'maxSelectItems', { maxCount });
                     this.errors.push({ message });
                     this.setCustomValidity(message, dirty);
                     return false;
                 }
                 else if (!isValid && minCount && count < minCount) {
                     this.setInputsDisabled(false);
-                    const message = this.t(this.component.minSelectedCountMessage || 'You must select at least {{minCount}} items', { minCount });
+                    const message = this.t(this.component.minSelectedCountMessage || 'minSelectItems', { minCount });
                     this.errors.push({ message });
                     this.setCustomValidity(message, dirty);
                     return false;

package/lib/mjs/components/signature/Signature.d.ts

@@ -22,10 +22,9 @@ export default class SignatureComponent extends Input {
     showCanvas(show: any): void;
     onDisabled(): void;
     checkSize(force: any, scale: any): void;
-    getModalPreviewTemplate(): any;
     signaturePad: SignaturePad | null | undefined;
     observer: any;
-    getValueAsString(value: any): "" | "Yes" | "No";
+    getValueAsString(value: any): string;
     focus(): void;
     setDataToSigaturePad(): void;
 }

package/lib/mjs/components/signature/Signature.js

@@ -1,7 +1,7 @@
 import SignaturePad from 'signature_pad';
 import Input from '../_classes/input/Input';
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils';
 export default class SignatureComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -156,7 +156,9 @@ export default class SignatureComponent extends Input {
             if (this.dataValue) {
                 this.setDataToSigaturePad();
             }
-            this.showCanvas(true);
+            if (!this.disabled) {
+                this.showCanvas(true);
+            }
         }
     }
     renderElement(value, index) {
@@ -169,10 +171,10 @@ export default class SignatureComponent extends Input {
         return false;
     }
     getModalPreviewTemplate() {
-        return this.renderTemplate('modalPreview', {
+        return this.renderModalPreview({
             previewText: this.dataValue ?
                 `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />` :
-                this.t('Click to Sign')
+                this.t('clickToSign')
         });
     }
     attach(element) {
@@ -240,7 +242,7 @@ export default class SignatureComponent extends Input {
         if (_.isUndefined(value) && this.inDataTable) {
             return '';
         }
-        return value ? 'Yes' : 'No';
+        return this.t(value ? 'yes' : 'no');
     }
     focus() {
         this.refs.padBody.focus();

package/lib/mjs/components/signature/editForm/Signature.edit.display.d.ts

@@ -7,7 +7,6 @@ declare const _default: ({
     placeholder: string;
     weight: number;
     conditional?: undefined;
-    customConditional?: undefined;
     ignore?: undefined;
 } | {
     type: string;
@@ -24,7 +23,6 @@ declare const _default: ({
         };
     };
     weight: number;
-    customConditional?: undefined;
     ignore?: undefined;
 } | {
     weight: number;
@@ -32,9 +30,6 @@ declare const _default: ({
     label: string;
     tooltip: string;
     key: string;
-    customConditional: ({ options }: {
-        options: any;
-    }) => boolean;
     input: boolean;
     placeholder?: undefined;
     conditional?: undefined;
@@ -49,6 +44,5 @@ declare const _default: ({
     placeholder?: undefined;
     weight?: undefined;
     conditional?: undefined;
-    customConditional?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/signature/editForm/Signature.edit.display.js

@@ -37,7 +37,6 @@ export default [
         label: 'Keep Overlay Aspect Ratio',
         tooltip: 'If checked, the field will have the same aspect ratio as its preview.',
         key: 'keepOverlayRatio',
-        customConditional: ({ options }) => (options?.editForm?.display === 'pdf'),
         input: true
     },
     {

package/lib/mjs/components/survey/Survey.d.ts

@@ -14,7 +14,7 @@ export default class SurveyComponent extends Field {
         operators: string[];
     };
     static savedValueTypes(schema: any): string[];
-    render(): Field;
+    render(): string;
     attach(element: any): Promise<void>;
     setValue(value: any, flags?: {}): boolean;
     get emptyValue(): {};

package/lib/mjs/components/survey/Survey.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import Field from '../_classes/field/Field';
-import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils';
 export default class SurveyComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -118,7 +118,7 @@ export default class SurveyComponent extends Field {
         return this.component.questions.reduce((result, question) => result && Boolean(value[question.value]), true);
     }
     getInputName(question) {
-        return `${this.options.name}[${question.value}]`;
+        return `${this.options.name}[${question.value}][${this.id}]`;
     }
     getValueAsString(value, options) {
         if (options?.email) {
@@ -126,8 +126,8 @@ export default class SurveyComponent extends Field {
         <table border="1" style="width:100%">
           <thead>
             <tr>
-              <th>Question</th>
-              <th>Value</th>
+              <th>${this.t('surveyQuestion')}</th>
+              <th>${this.t('surveyQuestionValue')}</th>
             </tr>
           </thead>
           <tbody>

package/lib/mjs/components/table/Table.d.ts

@@ -19,6 +19,6 @@ export default class TableComponent extends NestedComponent {
     get colWidth(): string;
     noField: boolean;
     table: any[] | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/mjs/components/tabs/Tabs.d.ts

@@ -16,7 +16,7 @@ export default class TabsComponent extends NestedComponent {
     currentTab: number;
     noField: boolean;
     tabs: any[] | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     detach(all: any): void;
     /**
      * Set the current tab.

package/lib/mjs/components/tabs/Tabs.js

@@ -138,6 +138,7 @@ export default class TabsComponent extends NestedComponent {
             this.addClass(this.refs[this.tabLinkKey][index], 'active');
             this.addClass(this.refs[this.tabLinkKey][index], 'formio-tab-link-active');
         }
+        this.setValue(this.data);
         this.triggerChange();
     }
     beforeFocus(component) {

package/lib/mjs/components/tabs/editForm/Tabs.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/mjs/components/tags/Tags.d.ts

@@ -24,4 +24,4 @@ export default class TagsComponent extends Input {
     getValueAsString(value: any): any;
 }
 import Input from '../_classes/input/Input';
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';

package/lib/mjs/components/tags/Tags.js

@@ -1,6 +1,6 @@
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils';
 import Input from '../_classes/input/Input';
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';
 export default class TagsComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -127,7 +127,7 @@ export default class TagsComponent extends Input {
         const changed = super.setValue(value, flags);
         if (this.choices) {
             let dataValue = this.dataValue;
-            this.choices.removeActiveItems();
+            this.choices.clearStore();
             if (dataValue) {
                 if (typeof dataValue === 'string') {
                     dataValue = dataValue.split(this.delimiter).filter(result => result);

package/lib/mjs/components/textarea/TextArea.js

@@ -1,7 +1,7 @@
 /* global Quill */
 import TextFieldComponent from '../textfield/TextField';
 import _ from 'lodash';
-import { uniqueName, getBrowserInfo } from '../../utils/utils';
+import { uniqueName, getBrowserInfo } from '../../utils';
 export default class TextAreaComponent extends TextFieldComponent {
     static schema(...extend) {
         return TextFieldComponent.schema({
@@ -57,7 +57,15 @@ export default class TextAreaComponent extends TextFieldComponent {
         info.content = value;
         if ((this.options.readOnly || this.disabled) && !this.isHtmlRenderMode()) {
             const elementStyle = this.info.attr.style || '';
-            const children = `<div ${this._referenceAttributeName}="input" class="formio-editor-read-only-content" ${elementStyle ? `style='${elementStyle}'` : ''}></div>`;
+            const children = `
+        <div ${this._referenceAttributeName}="input"
+          class="formio-editor-read-only-content"
+          ${elementStyle ? `style='${elementStyle}'` : ''}
+          role="textbox"
+          aria-multiline="true"
+          aria-readonly="true"
+        >
+        </div>`;
             return this.renderTemplate('well', {
                 children,
                 nestedKey: this.key,
@@ -131,7 +139,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                 case 'quill':
                     // Normalize the configurations for quill.
                     if (settings.hasOwnProperty('toolbarGroups') || settings.hasOwnProperty('toolbar')) {
-                        console.warn('The WYSIWYG settings are configured for CKEditor. For this renderer, you will need to use configurations for the Quill Editor. See https://quilljs.com/docs/configuration for more information.');
+                        console.warn(this.t('needConfigurationForQuill'));
                         settings = this.wysiwygDefault.quill;
                     }
                     // Add the quill editor.
@@ -203,7 +211,7 @@ export default class TextAreaComponent extends TextFieldComponent {
     imageHandler(moduleInstance, range, files) {
         const quillInstance = moduleInstance.quill;
         if (!files || !files.length) {
-            console.warn('No files selected');
+            console.warn(this.t('noFilesSelected'));
             return;
         }
         quillInstance.enable(false);
@@ -228,7 +236,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                 alt: JSON.stringify(requestData),
             }), Quill.sources.USER);
         }).catch(error => {
-            console.warn('Quill image upload failed');
+            console.warn(this.t('quillImageUploadFailed'));
             console.warn(error);
             quillInstance.enable(true);
         });
@@ -523,7 +531,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                     }
                     this.element.scrollIntoView();
                 }).catch((err) => {
-                    console.warn('An editor did not initialize properly when trying to focus:', err);
+                    console.warn(this.t('editorFocusError'), err);
                 });
                 break;
             }
@@ -532,7 +540,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                     this.editors[0].focus();
                     this.element.scrollIntoView();
                 }).catch((err) => {
-                    console.warn('An editor did not initialize properly when trying to focus:', err);
+                    console.warn(this.t('editorFocusError'), err);
                 });
                 break;
             }
@@ -540,7 +548,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                 this.editorsReady[0]?.then(() => {
                     this.editors[0].focus();
                 }).catch((err) => {
-                    console.warn('An editor did not initialize properly when trying to focus:', err);
+                    console.warn(this.t('editorFocusError'), err);
                 });
                 break;
             }

package/lib/mjs/components/textarea/editForm/TextArea.edit.display.js

@@ -9,10 +9,22 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
     {
         key: 'mask',
         ignore: true
     },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         type: 'number',
         input: true,

package/lib/mjs/components/textfield/TextField.js

@@ -1,7 +1,7 @@
 import Input from '../_classes/input/Input';
 import { conformToMask } from '@formio/vanilla-text-mask';
 import Inputmask from 'inputmask';
-import * as FormioUtils from '../../utils/utils';
+import FormioUtils from '../../utils';
 import _ from 'lodash';
 export default class TextFieldComponent extends Input {
     static schema(...extend) {
@@ -86,6 +86,9 @@ export default class TextFieldComponent extends Input {
                 locale: this.component.widget.locale || this.options.language,
                 saveAs: 'text'
             };
+            // update originalComponent to include widget settings after component initialization
+            // originalComponent is used to restore the component (and widget) after evaluating field logic
+            this.originalComponent = FormioUtils.fastCloneDeep(this.component);
         }
     }
     attach(element) {

package/lib/mjs/components/time/Time.js

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import TextFieldComponent from '../textfield/TextField';
-import { getBrowserInfo } from '../../utils/utils';
+import { getBrowserInfo } from '../../utils';
 const defaultDataFormat = 'HH:mm:ss';
 export default class TimeComponent extends TextFieldComponent {
     static schema(...extend) {

package/lib/mjs/components/unknown/Unknown.form.d.ts

@@ -1,5 +1,6 @@
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
-export default function _default(): object;
+export default function _default(...extend: any[]): object;

package/lib/mjs/components/unknown/Unknown.form.js

@@ -1,22 +1,26 @@
+import { unionWith } from 'lodash';
 import UnknownEditDisplay from './editForm/Unknown.edit.display';
+import EditFormUtils from '../../components/_classes/component/editForm/utils';
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
-export default function () {
+export default function (...extend) {
+    const components = [
+        {
+            label: 'Custom',
+            key: 'display',
+            weight: 0,
+            components: UnknownEditDisplay
+        }
+    ].concat(...extend);
     return {
         components: [
             {
                 type: 'tabs',
                 key: 'tabs',
-                components: [
-                    {
-                        label: 'Custom',
-                        key: 'display',
-                        weight: 0,
-                        components: UnknownEditDisplay
-                    }
-                ]
+                components: unionWith(components, EditFormUtils.unifyComponents)
             }
         ]
     };

package/lib/mjs/components/url/editForm/Url.edit.display.js

@@ -7,6 +7,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/mjs/components/well/editForm/Well.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/mjs/formio.form.js

@@ -8,10 +8,11 @@ import Providers from './providers';
 import Widgets from './widgets';
 import Form from './Form';
 import Utils from './utils';
-import { Evaluator } from './utils/Evaluator';
 import Licenses from './licenses';
 import EventEmitter from './EventEmitter';
 import Webform from './Webform';
+import { I18n } from './utils/i18n';
+import { Evaluator, registerEvaluator } from './utils';
 Formio.loadModules = (path = `${Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {
     Formio.requireLibrary(name, name, path, true)
         .then((modules) => {
@@ -56,6 +57,7 @@ export function registerModule(mod, defaultFn = null, options = {}) {
             case 'templates':
                 for (const framework of Object.keys(mod.templates)) {
                     Formio.Templates.extendTemplate(framework, mod.templates[framework]);
+                    Formio.Templates.defaultTemplates = _.defaults(mod.templates[framework], Formio.Templates.defaultTemplates);
                 }
                 if (mod.templates[current]) {
                     Formio.Templates.current = mod.templates[current];
@@ -81,7 +83,10 @@ export function registerModule(mod, defaultFn = null, options = {}) {
                 Formio.Displays.addDisplays(mod.displays);
                 break;
             case 'evaluator':
-                Formio.Evaluator.registerEvaluator(mod.evaluator);
+                registerEvaluator(mod.evaluator);
+                break;
+            case 'translations':
+                I18n.setDefaultTranslations(mod.translations);
                 break;
             case 'library':
                 options.license

package/lib/mjs/i18n.js

@@ -1,5 +1,5 @@
 import enTranslation from './translations/en';
-import { fastCloneDeep } from './utils/utils';
+import { fastCloneDeep } from './utils';
 export default {
     lng: 'en',
     nsSeparator: '::',

package/lib/mjs/providers/storage/googleDrive.js

@@ -50,10 +50,11 @@ function googledrive(formio) {
                 xhr.send(fd);
             }));
         },
-        downloadFile(file) {
+        downloadFile(file, component) {
             const token = formio.getToken();
+            // Constructed the url with the fileId, fileName, displayImage, imageSize if applicable
             file.url =
-                `${formio.formUrl}/storage/gdrive?fileId=${file.id}&fileName=${file.originalName}${token ? `&x-jwt-token=${token}` : ''}`;
+                `${formio.formUrl}/storage/gdrive?fileId=${file.id}&fileName=${file.originalName}${token ? `&x-jwt-token=${token}` : ''}${component.image ? '&displayImage=true' : ''}${component.imageSize ? `&imageSize=${component.imageSize}` : ''}`;
             return Promise.resolve(file);
         },
         deleteFile: function deleteFile(fileInfo) {

package/lib/mjs/providers/storage/s3.js

@@ -75,7 +75,7 @@ function s3(formio) {
             const { changeMessage } = multipart;
             changeMessage('Completing AWS S3 multipart upload...');
             const token = formio.getToken();
-            const response = await fetch(`${formio.formUrl}/storage/s3/multipart/complete`, {
+            const response = await XHR.fetch(`${formio.formUrl}/storage/s3/multipart/complete`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -96,7 +96,7 @@ function s3(formio) {
         abortMultipartUpload(serverResponse) {
             const { uploadId, key } = serverResponse;
             const token = formio.getToken();
-            fetch(`${formio.formUrl}/storage/s3/multipart/abort`, {
+            XHR.fetch(`${formio.formUrl}/storage/s3/multipart/abort`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -113,7 +113,7 @@ function s3(formio) {
                 const start = i * partSize;
                 const end = (i + 1) * partSize;
                 const blob = i < urls.length ? file.slice(start, end) : file.slice(start);
-                const promise = fetch(urls[i], {
+                const promise = XHR.fetch(urls[i], {
                     method: 'PUT',
                     headers,
                     body: blob,