@formio/js 5.0.0-rc.22 → 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/component/Component.js

@@ -1506,16 +1506,16 @@ export default class Component extends Element {
             if (this.refs.input?.length) {
                 const { selection, index } = this.root.currentSelection;
                 let input = this.refs.input[index];
-                const isInputRangeSelectable = /text|search|password|tel|url/i.test(input.type || '');
+                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test(i?.type || '');
                 if (input) {
-                    if (isInputRangeSelectable) {
+                    if (isInputRangeSelectable(input)) {
                         input.setSelectionRange(...selection);
                     }
                 }
                 else {
                     input = this.refs.input[this.refs.input.length];
                     const lastCharacter = input.value?.length || 0;
-                    if (isInputRangeSelectable) {
+                    if (isInputRangeSelectable(input)) {
                         input.setSelectionRange(lastCharacter, lastCharacter);
                     }
                 }

package/lib/mjs/components/_classes/field/Field.d.ts

@@ -1,4 +1,5 @@
 export default class Field extends Component {
     render(element: any): any;
+    saveCaretPosition(element: any, index: any): void;
 }
 import Component from '../component/Component';

package/lib/mjs/components/_classes/field/Field.js

@@ -18,4 +18,17 @@ export default class Field extends Component {
             }));
         }
     }
+    // Saves current caret position to restore it after the component is redrawn
+    saveCaretPosition(element, index) {
+        if (this.root?.focusedComponent?.path === this.path) {
+            try {
+                this.root.currentSelection = { selection: [element.selectionStart, element.selectionEnd], index };
+            }
+            catch (e) {
+                if (!(e instanceof DOMException)) {
+                    console.debug(e);
+                }
+            }
+        }
+    }
 }

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/_classes/multivalue/Multivalue.d.ts

@@ -12,7 +12,6 @@ export default class Multivalue extends Field {
      * @param index
      */
     attachElement(element: any, index: any): void;
-    saveCaretPosition(element: any, index: any): void;
     onSelectMaskHandler(event: any): void;
     getMaskPattern(maskName: any): any;
     multiMasks: {} | undefined;

package/lib/mjs/components/_classes/multivalue/Multivalue.js

@@ -177,19 +177,6 @@ export default class Multivalue extends Field {
             }
         }
     }
-    // Saves current caret position to restore it after the component is redrawn
-    saveCaretPosition(element, index) {
-        if (this.root?.focusedComponent?.path === this.path) {
-            try {
-                this.root.currentSelection = { selection: [element.selectionStart, element.selectionEnd], index };
-            }
-            catch (e) {
-                if (!(e instanceof DOMException)) {
-                    console.debug(e);
-                }
-            }
-        }
-    }
     onSelectMaskHandler(event) {
         this.updateMask(event.target.maskInput, this.getMaskPattern(event.target.value));
     }

package/lib/mjs/components/day/Day.d.ts

@@ -157,7 +157,6 @@ export default class DayComponent extends Field {
      * @return {null}
      */
     getValueAsString(value: any): null;
-    focus(): void;
     isPartialDay(value: any): boolean;
     getValidationFormat(): "DD-MM-YYYY" | "MM-DD-YYYY";
 }

package/lib/mjs/components/day/Day.js

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import moment from 'moment';
 import Field from '../_classes/field/Field';
-import Input from '../_classes/input/Input';
 import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils/utils';
 export default class DayComponent extends Field {
     static schema(...extend) {
@@ -256,6 +255,17 @@ export default class DayComponent extends Field {
     attach(element) {
         this.loadRefs(element, { day: 'single', month: 'single', year: 'single', input: 'multiple' });
         const superAttach = super.attach(element);
+        const updateValueAndSaveFocus = (element, name) => () => {
+            try {
+                this.saveCaretPosition(element, name);
+            }
+            catch (err) {
+                console.warn('An error occurred while trying to save caret position', err);
+            }
+            this.updateValue(null, {
+                modified: true,
+            });
+        };
         if (this.shouldDisabled) {
             this.setDisabled(this.refs.day, true);
             this.setDisabled(this.refs.month, true);
@@ -265,9 +275,7 @@ export default class DayComponent extends Field {
             }
         }
         else {
-            this.addEventListener(this.refs.day, 'input', () => this.updateValue(null, {
-                modified: true
-            }));
+            this.addEventListener(this.refs.day, 'input', updateValueAndSaveFocus(this.refs.day, 'day'));
             // TODO: Need to rework this to work with day select as well.
             // Change day max input when month changes.
             this.addEventListener(this.refs.month, 'input', () => {
@@ -280,18 +288,14 @@ export default class DayComponent extends Field {
                 if (maxDay && day > maxDay) {
                     this.refs.day.value = this.refs.day.max;
                 }
-                this.updateValue(null, {
-                    modified: true
-                });
+                updateValueAndSaveFocus(this.refs.month, 'month')();
             });
-            this.addEventListener(this.refs.year, 'input', () => this.updateValue(null, {
-                modified: true
-            }));
+            this.addEventListener(this.refs.year, 'input', updateValueAndSaveFocus(this.refs.year, 'year'));
             this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {
                 modified: true
             }));
-            [this.refs.day, this.refs.month, this.refs.year].forEach((element) => {
-                Input.prototype.addFocusBlurEvents.call(this, element);
+            [this.refs.day, this.refs.month, this.refs.year].filter((element) => !!element).forEach((element) => {
+                super.addFocusBlurEvents(element);
             });
         }
         this.setValue(this.dataValue);
@@ -524,8 +528,11 @@ export default class DayComponent extends Field {
     getValueAsString(value) {
         return this.getDate(value) || '';
     }
-    focus() {
-        if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {
+    focus(field) {
+        if (field && typeof field === 'string' && this.refs[field]) {
+            this.refs[field].focus();
+        }
+        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {
             this.refs.day?.focus();
         }
         else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {
@@ -535,6 +542,18 @@ export default class DayComponent extends Field {
             this.refs.year?.focus();
         }
     }
+    restoreCaretPosition() {
+        if (this.root?.currentSelection) {
+            const { selection, index } = this.root.currentSelection;
+            if (this.refs[index]) {
+                const input = this.refs[index];
+                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test(i?.type || '');
+                if (isInputRangeSelectable(input)) {
+                    input.setSelectionRange(...selection);
+                }
+            }
+        }
+    }
     isPartialDay(value) {
         if (!value) {
             return false;

package/lib/mjs/components/day/fixtures/comp6.d.ts

@@ -0,0 +1,81 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: ({
+        label: string;
+        applyMaskOn: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        hideInputLabels?: undefined;
+        inputsLabelPosition?: undefined;
+        useLocaleSettings?: undefined;
+        fields?: undefined;
+        defaultValue?: undefined;
+        logic?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        label: string;
+        hideInputLabels: boolean;
+        inputsLabelPosition: string;
+        useLocaleSettings: boolean;
+        tableView: boolean;
+        fields: {
+            day: {
+                hide: boolean;
+            };
+            month: {
+                hide: boolean;
+            };
+            year: {
+                hide: boolean;
+            };
+        };
+        defaultValue: string;
+        key: string;
+        logic: {
+            name: string;
+            trigger: {
+                type: string;
+                simple: {
+                    show: boolean;
+                    conjunction: string;
+                    conditions: {
+                        component: string;
+                        operator: string;
+                    }[];
+                };
+            };
+            actions: {
+                name: string;
+                type: string;
+                property: {
+                    label: string;
+                    value: string;
+                    type: string;
+                };
+                state: boolean;
+            }[];
+        }[];
+        type: string;
+        input: boolean;
+        applyMaskOn?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        applyMaskOn?: undefined;
+        hideInputLabels?: undefined;
+        inputsLabelPosition?: undefined;
+        useLocaleSettings?: undefined;
+        fields?: undefined;
+        defaultValue?: undefined;
+        logic?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/day/fixtures/comp6.js

@@ -0,0 +1,74 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Text Field',
+            applyMaskOn: 'change',
+            tableView: true,
+            key: 'textField',
+            type: 'textfield',
+            input: true,
+        },
+        {
+            label: 'Day',
+            hideInputLabels: false,
+            inputsLabelPosition: 'top',
+            useLocaleSettings: false,
+            tableView: false,
+            fields: {
+                day: {
+                    hide: true,
+                },
+                month: {
+                    hide: false,
+                },
+                year: {
+                    hide: false,
+                },
+            },
+            defaultValue: '00/00/0000',
+            key: 'day',
+            logic: [
+                {
+                    name: 'Disable when Test is empty',
+                    trigger: {
+                        type: 'simple',
+                        simple: {
+                            show: true,
+                            conjunction: 'all',
+                            conditions: [
+                                {
+                                    component: 'textField',
+                                    operator: 'isEmpty',
+                                },
+                            ],
+                        },
+                    },
+                    actions: [
+                        {
+                            name: 'Disable',
+                            type: 'property',
+                            property: {
+                                label: 'Disabled',
+                                value: 'disabled',
+                                type: 'boolean',
+                            },
+                            state: true,
+                        },
+                    ],
+                },
+            ],
+            type: 'day',
+            input: true,
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

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

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

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

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

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.