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

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
 const Field_1 = __importDefault(require("../_classes/field/Field"));
-const Input_1 = __importDefault(require("../_classes/input/Input"));
 const utils_1 = require("../../utils/utils");
 class DayComponent extends Field_1.default {
     static schema(...extend) {
@@ -258,6 +257,17 @@ class DayComponent extends Field_1.default {
     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);
@@ -267,9 +277,7 @@ class DayComponent extends Field_1.default {
             }
         }
         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', () => {
@@ -282,18 +290,14 @@ class DayComponent extends Field_1.default {
                 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_1.default.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);
@@ -526,9 +530,12 @@ class DayComponent extends Field_1.default {
     getValueAsString(value) {
         return this.getDate(value) || '';
     }
-    focus() {
+    focus(field) {
         var _a, _b, _c;
-        if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {
+        if (field && typeof field === 'string' && this.refs[field]) {
+            this.refs[field].focus();
+        }
+        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {
             (_a = this.refs.day) === null || _a === void 0 ? void 0 : _a.focus();
         }
         else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {
@@ -538,6 +545,19 @@ class DayComponent extends Field_1.default {
             (_c = this.refs.year) === null || _c === void 0 ? void 0 : _c.focus();
         }
     }
+    restoreCaretPosition() {
+        var _a;
+        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.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 === null || i === void 0 ? void 0 : i.type) || '');
+                if (isInputRangeSelectable(input)) {
+                    input.setSelectionRange(...selection);
+                }
+            }
+        }
+    }
     isPartialDay(value) {
         if (!value) {
             return false;

package/lib/cjs/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/cjs/components/day/fixtures/comp6.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/cjs/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/cjs/components/day/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -14,3 +14,5 @@ const comp4_1 = __importDefault(require("./comp4"));
 exports.comp4 = comp4_1.default;
 const comp5_1 = __importDefault(require("./comp5"));
 exports.comp5 = comp5_1.default;
+const comp6_1 = __importDefault(require("./comp6"));
+exports.comp6 = comp6_1.default;

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

@@ -153,7 +153,12 @@ class RadioComponent extends ListComponent_1.default {
                 if (!lodash_1.default.isString(this.dataValue)) {
                     dataValue = lodash_1.default.toString(this.dataValue);
                 }
-                input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
+                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {
+                    input.checked = lodash_1.default.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();
@@ -183,9 +188,11 @@ class RadioComponent extends ListComponent_1.default {
             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 && lodash_1.default.isObject(this.loadedOptions[index].value)) ?
+                    this.loadedOptions[index].value :
+                    input.value;
             }
         });
         return value;
@@ -207,7 +214,10 @@ class RadioComponent extends ListComponent_1.default {
         return false;
     }
     getValueAsString(value) {
-        if (!lodash_1.default.isString(value)) {
+        if (lodash_1.default.isObject(value)) {
+            value = JSON.stringify(value);
+        }
+        else if (!lodash_1.default.isString(value)) {
             value = lodash_1.default.toString(value);
         }
         if (this.component.dataSrc !== 'values') {
@@ -229,7 +239,7 @@ class RadioComponent extends ListComponent_1.default {
         if (this.optionsLoaded) {
             return;
         }
-        if (!this.shouldLoad) {
+        if (!this.shouldLoad && this.listData) {
             this.loadItemsFromMetadata();
             return;
         }
@@ -260,7 +270,7 @@ class RadioComponent extends ListComponent_1.default {
             this.loadedOptions[i] = {
                 label: this.itemTemplate(item)
             };
-            if (lodash_1.default.isEqual(item, this.selectData)) {
+            if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {
                 this.loadedOptions[i].value = this.dataValue;
             }
         });
@@ -271,13 +281,13 @@ class RadioComponent extends ListComponent_1.default {
         const listData = [];
         items === null || items === void 0 ? void 0 : 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 (lodash_1.default.isUndefined(item[this.component.valueProperty]) ||
-                lodash_1.default.isObject(item[this.component.valueProperty]) ||
-                (!this.isRadio && lodash_1.default.isBoolean(item[this.component.valueProperty]))) {
+            listData.push(this.templateData[this.component.valueProperty ? item[this.component.valueProperty] : i]);
+            if ((this.component.valueProperty || !this.isRadio) && (lodash_1.default.isUndefined(item[this.component.valueProperty]) ||
+                (!this.isRadio && lodash_1.default.isObject(item[this.component.valueProperty])) ||
+                (!this.isRadio && lodash_1.default.isBoolean(item[this.component.valueProperty])))) {
                 this.loadedOptions[i].invalid = true;
             }
         });

package/lib/cjs/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/cjs/components/select/Select.js

@@ -428,7 +428,7 @@ class SelectComponent extends ListComponent_1.default {
         const searching = fromSearch && ((_b = (_a = this.choices) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.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
                 });
@@ -814,6 +814,11 @@ class SelectComponent extends ListComponent_1.default {
                 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/cjs/components/selectboxes/SelectBoxes.js

@@ -245,5 +245,14 @@ class SelectBoxesComponent extends Radio_1.default {
         }
         return super.checkComponentValidity(data, dirty, rowData, options);
     }
+    validateValueAvailability(setting, value) {
+        if (!(0, utils_1.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));
+    }
 }
 exports.default = SelectBoxesComponent;

package/lib/cjs/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/cjs/components/selectboxes/fixtures/comp7.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/cjs/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/cjs/components/selectboxes/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -16,3 +16,5 @@ const comp5_1 = __importDefault(require("./comp5"));
 exports.comp5 = comp5_1.default;
 const comp6_1 = __importDefault(require("./comp6"));
 exports.comp6 = comp6_1.default;
+const comp7_1 = __importDefault(require("./comp7"));
+exports.comp7 = comp7_1.default;

package/lib/cjs/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/cjs/components/signature/Signature.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const signature_pad_1 = __importDefault(require("signature_pad"));
-const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
 const Input_1 = __importDefault(require("../_classes/input/Input"));
 const lodash_1 = __importDefault(require("lodash"));
 const utils_1 = require("../../utils/utils");
@@ -202,7 +201,7 @@ class SignatureComponent extends Input_1.default {
                     this.refs.padBody.style.maxWidth = '100%';
                 }
                 if (!this.builderMode && !this.options.preview) {
-                    this.observer = new resize_observer_polyfill_1.default(() => {
+                    this.observer = new ResizeObserver(() => {
                         this.checkSize();
                     });
                     this.observer.observe(this.refs.padBody);

package/lib/cjs/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/cjs/utils/ChoicesWrapper.js

@@ -50,6 +50,25 @@ class ChoicesWrapper extends choices_js_1.default {
         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/lib/cjs/utils/utils.js

@@ -258,9 +258,9 @@ function checkSimpleConditional(component, condition, row, data, instance) {
                 return true;
             }
             const value = getComponentActualValue(conditionComponentPath, data, row);
-            const СonditionOperator = conditionOperators_1.default[operator];
-            return СonditionOperator
-                ? new СonditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+            const ConditionOperator = conditionOperators_1.default[operator];
+            return ConditionOperator
+                ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
                 : true;
         });
         let result = false;

package/lib/mjs/Embed.d.ts

@@ -14,8 +14,10 @@ export class Formio {
     static global(prop: any): any;
     static createElement(type: any, attrs: any, children: any): any;
     static addScript(src: any, name: any): Promise<any>;
-    static addStyles(href: any, addGlobally?: boolean): Promise<void>;
+    static addStyles(href: any): Promise<void>;
     static submitDone(instance: any, submission: any): Promise<void>;
-    static renderForm(form: any, options: any): Promise<any>;
+    static formioScript(script: any, builder: any): any;
+    static init(element: any, builder?: boolean): Promise<void>;
     static createForm(element: any, form: any, options: any): Promise<any>;
+    static builder(element: any, form: any, options: any): Promise<any>;
 }