@formio/js 5.0.0-rc.23 → 5.0.0-rc.24

package/lib/mjs/Embed.js

@@ -67,7 +67,7 @@ class Formio {
             }, 100);
         });
     }
-    static async addStyles(href, addGlobally = false) {
+    static async addStyles(href) {
         if (!href) {
             return;
         }
@@ -76,14 +76,6 @@ class Formio {
             return;
         }
         Formio.debug('Adding Styles', href);
-        const link = Formio.createElement('link', {
-            rel: 'stylesheet',
-            href
-        });
-        if (addGlobally) {
-            // Add globally as well.
-            document.head.appendChild(link);
-        }
         Formio.wrapper.appendChild(Formio.createElement('link', {
             rel: 'stylesheet',
             href
@@ -117,37 +109,12 @@ class Formio {
             }
         }
     }
-    static async renderForm(form, options) {
-        if (Formio.config.before) {
-            await Formio.config.before(Formio.FormioClass, Formio.element, Formio.config);
-        }
-        Formio.FormioClass.license = true;
-        return Formio.FormioClass.createForm(Formio.element, form, {
-            ...options,
-            ...{ noLoader: true }
-        }).then((instance) => {
-            Formio.debug('Form created', instance);
-            // Remove the loader.
-            Formio.debug('Removing loader');
-            Formio.wrapper.removeChild(Formio.loader);
-            // Set the default submission data.
-            if (Formio.config.submission) {
-                Formio.debug('Setting submission', Formio.config.submission);
-                instance.submission = Formio.config.submission;
-            }
-            // Allow them to provide additional configs.
-            Formio.debug('Triggering embed event');
-            Formio.FormioClass.events.emit('formEmbedded', instance);
-            // Trigger the after handler.
-            if (Formio.config.after) {
-                Formio.debug('Calling ready callback');
-                Formio.config.after(instance, Formio.config);
-            }
-            return instance;
-        });
+    // Return the full script if the builder is being used.
+    static formioScript(script, builder) {
+        return builder ? script.replace('formio.form', 'formio.full') : script;
     }
     // eslint-disable-next-line max-statements
-    static async createForm(element, form, options) {
+    static async init(element, builder = false) {
         Formio.element = element;
         Formio.cdn = new CDN(Formio.config.cdn);
         Formio.config.libs = Formio.config.libs || {
@@ -188,7 +155,7 @@ class Formio {
                     }]
             }]);
         Formio.wrapper.appendChild(Formio.loader);
-        Formio.FormioClass = await Formio.addScript(Formio.config.script || `${Formio.cdn.js}/formio.form.min.js`, 'Formio');
+        Formio.FormioClass = await Formio.addScript(Formio.formioScript(Formio.config.script || `${Formio.cdn.js}/formio.form.min.js`, builder), 'Formio');
         Formio.FormioClass.setBaseUrl(Formio.baseUrl || Formio.config.base);
         Formio.FormioClass.setProjectUrl(Formio.projectUrl || Formio.config.project);
         Formio.FormioClass.language = Formio.language;
@@ -206,7 +173,7 @@ class Formio {
                 await Formio.addStyles(Formio.config.libs[Formio.config.template].css);
                 await Formio.addScript(Formio.config.libs[Formio.config.template].js);
                 if (Formio.config.libs[Formio.config.template].fa) {
-                    await Formio.addStyles(Formio.config.libs.fontawesome.css, true);
+                    await Formio.addStyles(Formio.config.libs.fontawesome.css);
                 }
             }
             if (Formio.cdn[Formio.config.template]) {
@@ -222,7 +189,7 @@ class Formio {
         }
         // Default bootstrap + fontawesome.
         else if (Formio.config.includeLibs) {
-            await Formio.addStyles(Formio.config.libs.fontawesome.css, true);
+            await Formio.addStyles(Formio.config.libs.fontawesome.css);
             await Formio.addStyles(Formio.config.libs.bootstrap.css);
         }
         if (Formio.config.premium) {
@@ -230,8 +197,52 @@ class Formio {
             Formio.debug('Using premium');
             Formio.FormioClass.use(await Formio.addScript(Formio.config.premium.js, 'premium'));
         }
-        await Formio.addStyles(Formio.config.style || `${Formio.cdn.js}/formio.form.min.css`);
-        return await Formio.renderForm(form, options);
+        await Formio.addStyles(Formio.formioScript(Formio.config.style || `${Formio.cdn.js}/formio.form.min.css`, builder));
+        if (Formio.config.before) {
+            await Formio.config.before(Formio.FormioClass, Formio.element, Formio.config);
+        }
+        Formio.FormioClass.license = true;
+    }
+    static async createForm(element, form, options) {
+        await Formio.init(element);
+        return Formio.FormioClass.createForm(Formio.element, form, {
+            ...options,
+            ...{ noLoader: true }
+        }).then((instance) => {
+            Formio.debug('Form created', instance);
+            // Remove the loader.
+            Formio.debug('Removing loader');
+            Formio.wrapper.removeChild(Formio.loader);
+            // Set the default submission data.
+            if (Formio.config.submission) {
+                Formio.debug('Setting submission', Formio.config.submission);
+                instance.submission = Formio.config.submission;
+            }
+            // Allow them to provide additional configs.
+            Formio.debug('Triggering embed event');
+            Formio.FormioClass.events.emit('formEmbedded', instance);
+            // Trigger the after handler.
+            if (Formio.config.after) {
+                Formio.debug('Calling ready callback');
+                Formio.config.after(instance, Formio.config);
+            }
+            return instance;
+        });
+    }
+    static async builder(element, form, options) {
+        await Formio.init(element, true);
+        return Formio.FormioClass.builder(Formio.element, form, options).then((instance) => {
+            Formio.debug('Builder created', instance);
+            Formio.debug('Removing loader');
+            Formio.wrapper.removeChild(Formio.loader);
+            Formio.debug('Triggering embed event');
+            Formio.FormioClass.events.emit('builderEmbedded', instance);
+            if (Formio.config.after) {
+                Formio.debug('Calling ready callback');
+                Formio.config.after(instance, Formio.config);
+            }
+            return instance;
+        });
     }
 }
 export { Formio };

package/lib/mjs/WebformBuilder.js

@@ -1028,7 +1028,7 @@ export default class WebformBuilder extends Component {
                         return false;
                     });
                 });
-                if (tabIndex !== -1 && index !== -1 && changed && changed.value) {
+                if (tabIndex !== -1 && index !== -1 && changed && !_.isNil(changed.value)) {
                     const sibling = parentComponent.tabs[tabIndex][index + 1];
                     parentComponent.removeComponent(defaultValueComponent);
                     const newComp = parentComponent.addComponent(defaultValueComponent.component, defaultValueComponent.data, sibling);

package/lib/mjs/components/_classes/list/ListComponent.d.ts

@@ -8,8 +8,8 @@ export default class ListComponent extends Field {
     setItems(): void;
     updateCustomItems(): void;
     loadItems(): void;
-    getOptionTemplate(data: any, value: any): any;
-    itemTemplate(data: any, value: any): any;
+    getOptionTemplate(data: any, value: any, index: any): any;
+    itemTemplate(data: any, value: any, index: any): any;
     handleLoadingError(err: any): void;
     loading: boolean | undefined;
     networkError: boolean | undefined;

package/lib/mjs/components/_classes/list/ListComponent.js

@@ -78,7 +78,7 @@ export default class ListComponent extends Field {
     setItems() { }
     updateCustomItems() { }
     loadItems() { }
-    getOptionTemplate(data, value) {
+    getOptionTemplate(data, value, index) {
         if (!this.component.template) {
             return data.label;
         }
@@ -94,13 +94,16 @@ export default class ListComponent extends Field {
             // If the value is not an object, then we need to save the template data off for when it is selected.
             this.templateData[templateValue] = options.data.item;
         }
+        if (_.isNumber(index)) {
+            this.templateData[index] = options.data.item;
+        }
         return template;
     }
-    itemTemplate(data, value) {
+    itemTemplate(data, value, index) {
         if (_.isEmpty(data)) {
             return '';
         }
-        const template = this.sanitize(this.getOptionTemplate(data, value), this.shouldSanitizeValue);
+        const template = this.sanitize(this.getOptionTemplate(data, value, index), this.shouldSanitizeValue);
         if (template) {
             const label = template.replace(/<\/?[^>]+(>|$)/g, '');
             if (!label)

package/lib/mjs/components/radio/Radio.js

@@ -150,7 +150,12 @@ export default class RadioComponent extends ListComponent {
                 if (!_.isString(this.dataValue)) {
                     dataValue = _.toString(this.dataValue);
                 }
-                input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
+                if (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) {
+                    input.checked = _.isEqual(this.loadedOptions[index].value, this.dataValue);
+                }
+                else {
+                    input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
+                }
                 this.addEventListener(input, 'keyup', (event) => {
                     if (event.key === ' ' && dataValue === input.value) {
                         event.preventDefault();
@@ -180,9 +185,11 @@ export default class RadioComponent extends ListComponent {
             return this.dataValue;
         }
         let value = this.dataValue;
-        this.refs.input.forEach((input) => {
+        this.refs.input.forEach((input, index) => {
             if (input.checked) {
-                value = input.value;
+                value = (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) ?
+                    this.loadedOptions[index].value :
+                    input.value;
             }
         });
         return value;
@@ -204,7 +211,10 @@ export default class RadioComponent extends ListComponent {
         return false;
     }
     getValueAsString(value) {
-        if (!_.isString(value)) {
+        if (_.isObject(value)) {
+            value = JSON.stringify(value);
+        }
+        else if (!_.isString(value)) {
             value = _.toString(value);
         }
         if (this.component.dataSrc !== 'values') {
@@ -226,7 +236,7 @@ export default class RadioComponent extends ListComponent {
         if (this.optionsLoaded) {
             return;
         }
-        if (!this.shouldLoad) {
+        if (!this.shouldLoad && this.listData) {
             this.loadItemsFromMetadata();
             return;
         }
@@ -257,7 +267,7 @@ export default class RadioComponent extends ListComponent {
             this.loadedOptions[i] = {
                 label: this.itemTemplate(item)
             };
-            if (_.isEqual(item, this.selectData)) {
+            if (_.isEqual(item, this.selectData || _.pick(this.dataValue, _.keys(item)))) {
                 this.loadedOptions[i].value = this.dataValue;
             }
         });
@@ -268,13 +278,13 @@ export default class RadioComponent extends ListComponent {
         const listData = [];
         items?.forEach((item, i) => {
             this.loadedOptions[i] = {
-                value: item[this.component.valueProperty],
-                label: this.itemTemplate(item, item[this.component.valueProperty])
+                value: this.component.valueProperty ? item[this.component.valueProperty] : item,
+                label: this.component.valueProperty ? this.itemTemplate(item, item[this.component.valueProperty]) : this.itemTemplate(item, item, i)
             };
-            listData.push(this.templateData[item[this.component.valueProperty]]);
-            if (_.isUndefined(item[this.component.valueProperty]) ||
-                _.isObject(item[this.component.valueProperty]) ||
-                (!this.isRadio && _.isBoolean(item[this.component.valueProperty]))) {
+            listData.push(this.templateData[this.component.valueProperty ? item[this.component.valueProperty] : i]);
+            if ((this.component.valueProperty || !this.isRadio) && (_.isUndefined(item[this.component.valueProperty]) ||
+                (!this.isRadio && _.isObject(item[this.component.valueProperty])) ||
+                (!this.isRadio && _.isBoolean(item[this.component.valueProperty])))) {
                 this.loadedOptions[i].invalid = true;
             }
         });

package/lib/mjs/components/select/Select.d.ts

@@ -63,6 +63,7 @@ export default class SelectComponent extends ListComponent {
         value: any;
         label: any;
     };
+    itemTemplate(data: any, value: any): any;
     /**
      * Adds an option to the select dropdown.
      *
@@ -102,6 +103,7 @@ export default class SelectComponent extends ListComponent {
     focusableElement: any;
     choices: Choices | null | undefined;
     scrollList: any;
+    isRemoveButtonPressed: boolean | undefined;
     get isLoadingAvailable(): any;
     onScroll(): void;
     attachRefreshOnBlur(): void;

package/lib/mjs/components/select/Select.js

@@ -429,7 +429,7 @@ export default class SelectComponent extends ListComponent {
         const searching = fromSearch && this.choices?.input?.isFocussed;
         if (!searching) {
             // If a value is provided, then select it.
-            if (!this.isEmpty()) {
+            if (!this.isEmpty() || this.isRemoveButtonPressed) {
                 this.setValue(this.dataValue, {
                     noUpdateEvent: true
                 });
@@ -843,6 +843,11 @@ export default class SelectComponent extends ListComponent {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());
             }
+            if (choicesOptions.removeItemButton) {
+                this.addEventListener(input, 'removeItem', () => {
+                    this.isRemoveButtonPressed = true;
+                });
+            }
         }
         this.focusableElement.setAttribute('tabIndex', tabIndex);
         // If a search field is provided, then add an event listener to update items on search.

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

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, boolValue } from '../../utils/utils';
 import RadioComponent from '../radio/Radio';
 export default class SelectBoxesComponent extends RadioComponent {
     static schema(...extend) {
@@ -243,4 +243,13 @@ export default class SelectBoxesComponent extends RadioComponent {
         }
         return super.checkComponentValidity(data, dirty, rowData, options);
     }
+    validateValueAvailability(setting, value) {
+        if (!boolValue(setting) || !value) {
+            return true;
+        }
+        const values = this.component.values;
+        const availableValueKeys = (values || []).map(({ value: optionValue }) => optionValue);
+        const valueKeys = Object.keys(value);
+        return valueKeys.every((key) => availableValueKeys.includes(key));
+    }
 }

package/lib/mjs/components/selectboxes/fixtures/comp7.d.ts

@@ -0,0 +1,18 @@
+declare namespace _default {
+    const label: string;
+    const optionsLabelPosition: string;
+    const tableView: boolean;
+    const values: {
+        label: string;
+        value: string;
+        shortcut: string;
+    }[];
+    namespace validate {
+        const onlyAvailableItems: boolean;
+    }
+    const key: string;
+    const type: string;
+    const input: boolean;
+    const inputType: string;
+}
+export default _default;

package/lib/mjs/components/selectboxes/fixtures/comp7.js

@@ -0,0 +1,29 @@
+export default {
+    label: 'Select Boxes',
+    optionsLabelPosition: 'right',
+    tableView: false,
+    values: [
+        {
+            label: 'a',
+            value: 'a',
+            shortcut: '',
+        },
+        {
+            label: 'b',
+            value: 'b',
+            shortcut: '',
+        },
+        {
+            label: 'c',
+            value: 'c',
+            shortcut: '',
+        },
+    ],
+    validate: {
+        onlyAvailableItems: true,
+    },
+    key: 'selectBoxes',
+    type: 'selectboxes',
+    input: true,
+    inputType: 'checkbox',
+};

package/lib/mjs/components/selectboxes/fixtures/index.d.ts

@@ -4,4 +4,5 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-export { comp1, comp2, comp3, comp4, comp5, comp6 };
+import comp7 from './comp7';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };

package/lib/mjs/components/selectboxes/fixtures/index.js

@@ -4,4 +4,5 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-export { comp1, comp2, comp3, comp4, comp5, comp6 };
+import comp7 from './comp7';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };

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

@@ -37,11 +37,10 @@ export default class SignatureComponent extends Input {
     onDisabled(): void;
     checkSize(force: any, scale: any): void;
     signaturePad: SignaturePad | null | undefined;
-    observer: _ResizeObserver | null | undefined;
+    observer: any;
     getValueAsString(value: any): "" | "Yes" | "No";
     focus(): void;
     setDataToSigaturePad(): void;
 }
 import Input from '../_classes/input/Input';
 import SignaturePad from 'signature_pad';
-import _ResizeObserver from 'resize-observer-polyfill';

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

@@ -1,5 +1,4 @@
 import SignaturePad from 'signature_pad';
-import _ResizeObserver from 'resize-observer-polyfill';
 import Input from '../_classes/input/Input';
 import _ from 'lodash';
 import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
@@ -199,7 +198,7 @@ export default class SignatureComponent extends Input {
                     this.refs.padBody.style.maxWidth = '100%';
                 }
                 if (!this.builderMode && !this.options.preview) {
-                    this.observer = new _ResizeObserver(() => {
+                    this.observer = new ResizeObserver(() => {
                         this.checkSize();
                     });
                     this.observer.observe(this.refs.padBody);

package/lib/mjs/utils/ChoicesWrapper.d.ts

@@ -19,6 +19,7 @@ declare class ChoicesWrapper extends Choices {
     }): void;
     isDirectionUsing: boolean;
     shouldOpenDropDown: boolean;
+    _onTouchEnd(event: any): void;
     _handleButtonAction(activeItems: any, element: any): void;
     _onEnterKey(args: any): void;
     _onDirectionKey(...args: any[]): void;

package/lib/mjs/utils/ChoicesWrapper.js

@@ -44,6 +44,25 @@ class ChoicesWrapper extends Choices {
         this.isDirectionUsing = false;
         this.shouldOpenDropDown = true;
     }
+    _onTouchEnd(event) {
+        var target = (event || event.touches[0]).target;
+        var touchWasWithinContainer = this._wasTap && this.containerOuter.element.contains(target);
+        if (touchWasWithinContainer) {
+            var containerWasExactTarget = target === this.containerOuter.element || target === this.containerInner.element;
+            if (containerWasExactTarget) {
+                if (this._isTextElement) {
+                    this.input.focus();
+                }
+                else if (this._isSelectMultipleElement) {
+                    this.input.focus();
+                    this.showDropdown();
+                }
+            }
+            // Prevents focus event firing
+            event.stopPropagation();
+        }
+        this._wasTap = true;
+    }
     _handleButtonAction(activeItems, element) {
         if (!this._isSelectOneElement) {
             return super._handleButtonAction(activeItems, element);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.23",
+  "version": "5.0.0-rc.24",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -106,7 +106,6 @@
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
     "quill": "^2.0.0-dev.3",
-    "resize-observer-polyfill": "^1.5.1",
     "signature_pad": "^4.1.4",
     "string-hash": "^1.1.3",
     "tippy.js": "^6.3.7",
@@ -116,7 +115,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
-    "ace-builds": "^1.4.12",
+    "ace-builds": "1.23.4",
     "async-limiter": "^2.0.0",
     "bootstrap-icons": "^1.10.5",
     "bootswatch": "^5.3.0",