@formio/js 5.0.0-rc.19 → 5.0.0-rc.20

package/lib/mjs/Wizard.js

@@ -1,4 +1,3 @@
-import NativePromise from 'native-promise-only';
 import _ from 'lodash';
 import Webform from './Webform';
 import { Formio } from './Formio';
@@ -35,7 +34,7 @@ export default class Wizard extends Webform {
         this._seenPages = [0];
         this.subWizards = [];
         this.allPages = [];
-        this.lastPromise = NativePromise.resolve();
+        this.lastPromise = Promise.resolve();
         this.enabledIndex = 0;
         this.editMode = false;
         this.originalOptions = _.cloneDeep(this.options);
@@ -550,7 +549,7 @@ export default class Wizard extends Webform {
     }
     setPage(num) {
         if (num === this.page) {
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         if (num >= 0 && num < this.pages.length) {
             this.page = num;
@@ -572,13 +571,13 @@ export default class Wizard extends Webform {
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
             });
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         else if (!this.pages.length) {
             this.redraw();
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
-        return NativePromise.reject('Page not found');
+        return Promise.reject('Page not found');
     }
     pageFieldLogic(page) {
         if (this.pages?.[page]) {
@@ -631,13 +630,13 @@ export default class Wizard extends Webform {
     }
     beforeSubmit() {
         const pages = this.getPages();
-        return NativePromise.all(pages.map((page) => {
+        return Promise.all(pages.map((page) => {
             page.options.beforeSubmit = true;
             return page.beforeSubmit();
         }));
     }
     beforePage(next) {
-        return new NativePromise((resolve, reject) => {
+        return new Promise((resolve, reject) => {
             this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {
                 if (err) {
                     this.showErrors(err, true);
@@ -681,7 +680,7 @@ export default class Wizard extends Webform {
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
             this.scrollIntoView(this.element);
-            return NativePromise.reject(this.showErrors([], true));
+            return Promise.reject(this.showErrors([], true));
         }
     }
     emitPrevPage() {
@@ -696,7 +695,7 @@ export default class Wizard extends Webform {
     }
     cancel(noconfirm) {
         if (this.options.readOnly) {
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         if (super.cancel(noconfirm)) {
             this.setPristine(true);
@@ -709,7 +708,7 @@ export default class Wizard extends Webform {
                 return this.page;
             });
         }
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     getPageIndexByKey(key) {
         let pageIndex = this.page;
@@ -772,7 +771,8 @@ export default class Wizard extends Webform {
     setValue(submission, flags = {}, ignoreEstablishment) {
         this._submission = submission;
         if ((flags && flags.fromSubmission && (this.options.readOnly || this.editMode) && !this.isHtmlRenderMode()) ||
-            (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id)) {
+            (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id) ||
+            (this.options.server && (this.prefixComps.length || this.suffixComps.length))) {
             this._data = submission.data;
         }
         if (!ignoreEstablishment) {

package/lib/mjs/WizardBuilder.d.ts

@@ -30,10 +30,12 @@ export default class WizardBuilder extends WebformBuilder {
             components: any[];
         }[];
     };
-    addPage(page: any): any;
-    removePage(pageIndex: any, componentIndex: any): any;
-    onReorder(element: any, _target: any, _source: any, sibling: any): any;
-    setPage(index: any): any;
+    navigationDragula: any;
+    rebuild(): Promise<void> | Promise<boolean>;
+    addPage(page: any): Promise<void> | Promise<boolean>;
+    removePage(pageIndex: any, componentIndex: any): Promise<void> | Promise<boolean> | undefined;
+    onReorder(element: any, _target: any, _source: any, sibling: any): Promise<void> | undefined;
+    setPage(index: any): Promise<void> | Promise<boolean> | undefined;
     getPageConfig(index: any, components?: any[]): {
         title: string;
         label: string;

package/lib/mjs/WizardBuilder.js

@@ -101,6 +101,11 @@ export default class WizardBuilder extends WebformBuilder {
             const components = this._form.components.filter((component) => component.type !== 'button');
             this._form.components = [this.getPageConfig(1, components)];
         }
+        else {
+            const components = this._form.components
+                .filter((component) => component.type !== 'button' || component.action !== 'submit');
+            this._form.components = components;
+        }
         this.rebuild();
     }
     get form() {
@@ -143,7 +148,10 @@ export default class WizardBuilder extends WebformBuilder {
             page.parentNode.dragInfo = { index };
         });
         if (this.dragulaLib) {
-            this.dragulaLib([this.element.querySelector('.wizard-pages')])
+            this.navigationDragula = this.dragulaLib([this.element.querySelector('.wizard-pages')], {
+                moves: (el) => (!el.classList.contains('wizard-add-page')),
+                accepts: (el, target, source, sibling) => (sibling ? true : false),
+            })
                 .on('drop', this.onReorder.bind(this));
         }
         this.refs.addPage.forEach(link => {
@@ -160,6 +168,13 @@ export default class WizardBuilder extends WebformBuilder {
         });
         return super.attach(element);
     }
+    detach() {
+        if (this.navigationDragula) {
+            this.navigationDragula.destroy();
+        }
+        this.navigationDragula = null;
+        super.detach();
+    }
     rebuild() {
         const page = this.currentPage;
         this.webform.setForm({
@@ -196,13 +211,15 @@ export default class WizardBuilder extends WebformBuilder {
         }
     }
     onReorder(element, _target, _source, sibling) {
-        if (!element.dragInfo || (sibling && !sibling.dragInfo)) {
+        const isSiblingAnAddPageButton = sibling?.classList.contains('wizard-add-page');
+        // We still can paste before Add Page button
+        if (!element.dragInfo || (sibling && !sibling.dragInfo && !isSiblingAnAddPageButton)) {
             console.warn('There is no Drag Info available for either dragged or sibling element');
             return;
         }
         const oldPosition = element.dragInfo.index;
         //should drop at next sibling position; no next sibling means drop to last position
-        const newPosition = (sibling ? sibling.dragInfo.index : this.pages.length);
+        const newPosition = (sibling && sibling.dragInfo ? sibling.dragInfo.index : this.pages.length);
         const movedBelow = newPosition > oldPosition;
         const formComponents = fastCloneDeep(this._form.components);
         const draggedRowData = this._form.components[oldPosition];

package/lib/mjs/addons/FormioAddon.d.ts

@@ -12,7 +12,7 @@ export default class FormioAddon extends Element {
     namespace: string;
     component: any;
     settings: any;
-    attach(element: any): any;
+    attach(element: any): Promise<void>;
     _element: any;
     destroy(): void;
 }

package/lib/mjs/addons/FormioAddon.js

@@ -1,5 +1,4 @@
 import Element from '../Element';
-import NativePromise from 'native-promise-only';
 import _ from 'lodash';
 export default class FormioAddon extends Element {
     static get info() {
@@ -25,7 +24,7 @@ export default class FormioAddon extends Element {
     }
     attach(element) {
         this._element = element;
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     destroy() { }
 }

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -12,6 +12,12 @@ declare class Component extends Element {
      * @param options
      */
     static tableView(value: any, options: any): void;
+    static get serverConditionSettings(): {
+        operators: string[];
+        valueComponent(): {
+            type: string;
+        };
+    };
     /**
      * Initialize a new Component.
      *
@@ -151,7 +157,7 @@ declare class Component extends Element {
     set data(arg: any);
     get data(): any;
     mergeSchema(component?: {}): any;
-    get ready(): any;
+    get ready(): Promise<Component>;
     get isPDFReadOnlyMode(): any;
     get labelInfo(): {
         hidden: any;
@@ -293,12 +299,12 @@ declare class Component extends Element {
     loadRefs(element: any, refs: any): void;
     setOpenModalElement(template: any): void;
     getModalPreviewTemplate(): any;
-    build(element: any): any;
+    build(element: any): Promise<void>;
     get hasModalSaveButton(): boolean;
     render(children?: string, topLevel?: boolean): any;
     attachTooltips(toolTipsRefs: any): void;
     createComponentModal(element: any, modalShouldBeOpened: any, currentValue: any): ComponentModal;
-    attach(element: any): any;
+    attach(element: any): Promise<void>;
     componentModal: any;
     restoreFocus(): void;
     addShortcut(element: any, shortcut: any): void;
@@ -402,8 +408,8 @@ declare class Component extends Element {
     errorMessage(type: any): any;
     setContent(element: any, content: any, forceSanitize: any, sanitizeOptions: any): boolean;
     restoreCaretPosition(): void;
-    redraw(): any;
-    rebuild(): any;
+    redraw(): Promise<void>;
+    rebuild(): Promise<void>;
     hasClass(element: any, className: any): boolean | undefined;
     addClass(element: any, className: any): Component | undefined;
     removeClass(element: any, className: any): Component | undefined;
@@ -694,7 +700,7 @@ declare class Component extends Element {
      */
     checkComponentValidity(data: any, dirty: any, row: any, options?: {}): boolean;
     checkValidity(data: any, dirty: any, row: any, silentCheck: any): boolean;
-    checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any): any;
+    checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any): Promise<boolean>;
     /**
      * Check the conditions, calculations, and validity of a single component and triggers an update if
      * something changed.
@@ -728,8 +734,8 @@ declare class Component extends Element {
      */
     isValueHidden(): boolean | any;
     shouldSkipValidation(data: any, dirty: any, row: any): boolean;
-    whenReady(): any;
-    get dataReady(): any;
+    whenReady(): Promise<void>;
+    get dataReady(): Promise<void>;
     /**
      * Prints out the value of this component as a string value.
      */

package/lib/mjs/components/_classes/component/Component.js

@@ -1,6 +1,5 @@
 /* globals Quill, ClassicEditor, CKEDITOR */
 import { conformToMask } from '@formio/vanilla-text-mask';
-import NativePromise from 'native-promise-only';
 import tippy from 'tippy.js';
 import _ from 'lodash';
 import isMobile from 'ismobilejs';
@@ -409,7 +408,7 @@ export default class Component extends Element {
     }
     // Allow componets to notify when ready.
     get ready() {
-        return NativePromise.resolve(this);
+        return Promise.resolve(this);
     }
     get isPDFReadOnlyMode() {
         return this.parent &&
@@ -894,7 +893,7 @@ export default class Component extends Element {
      * @return {*}
      */
     beforePage() {
-        return NativePromise.resolve(true);
+        return Promise.resolve(true);
     }
     beforeNext() {
         return this.beforePage(true);
@@ -906,7 +905,7 @@ export default class Component extends Element {
      * @return {*}
      */
     beforeSubmit() {
-        return NativePromise.resolve(true);
+        return Promise.resolve(true);
     }
     /**
      * Return the submission timezone.
@@ -1056,7 +1055,7 @@ export default class Component extends Element {
         }
         this.restoreFocus();
         this.addons.forEach((addon) => addon.attach(element));
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     restoreFocus() {
         const isFocused = this.root?.focusedComponent?.path === this.path;
@@ -1370,6 +1369,14 @@ export default class Component extends Element {
         });
         return customCSS;
     }
+    static get serverConditionSettings() {
+        return {
+            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],
+            valueComponent() {
+                return { type: 'textfield' };
+            },
+        };
+    }
     get isMobile() {
         return isMobile();
     }
@@ -1499,7 +1506,7 @@ export default class Component extends Element {
         // Don't bother if we have not built yet.
         if (!this.element || !this.element.parentNode || this.optimizeRedraw) {
             // Return a non-resolving promise.
-            return NativePromise.resolve();
+            return Promise.resolve();
         }
         this.detach();
         this.emit('redraw');
@@ -1930,12 +1937,12 @@ export default class Component extends Element {
         return Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', _.get(this.options, 'editors.ckeditor.src', `${Formio.cdn.ckeditor}/ckeditor.js`), true)
             .then(() => {
             if (!element.parentNode) {
-                return NativePromise.reject();
+                return Promise.reject();
             }
             if (isIEBrowser) {
                 const editor = CKEDITOR.replace(element);
                 editor.on('change', () => onChange(editor.getData()));
-                return NativePromise.resolve(editor);
+                return Promise.resolve(editor);
             }
             else {
                 return ClassicEditor.create(element, settings).then(editor => {
@@ -1965,7 +1972,7 @@ export default class Component extends Element {
             return Formio.requireLibrary('quill-table', 'Quill', `${Formio.cdn.baseUrl}/quill/quill-table.js`, true)
                 .then(() => {
                 if (!element.parentNode) {
-                    return NativePromise.reject();
+                    return Promise.reject();
                 }
                 this.quill = new Quill(element, isIEBrowser ? { ...settings, modules: {} } : settings);
                 /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ **/
@@ -2414,6 +2421,9 @@ export default class Component extends Element {
         const dataValue = this.dataValue;
         // Calculate the new value.
         let calculatedValue = this.doValueCalculation(dataValue, data, row, flags);
+        if (this.options.readOnly && dataValue && !calculatedValue) {
+            return false;
+        }
         if (_.isNil(calculatedValue)) {
             calculatedValue = this.emptyValue;
         }
@@ -2563,7 +2573,7 @@ export default class Component extends Element {
         const { async = false, silentCheck = false } = options;
         if (this.shouldSkipValidation(data, dirty, row)) {
             this.setCustomValidity('');
-            return async ? NativePromise.resolve(true) : true;
+            return async ? Promise.resolve(true) : true;
         }
         const check = Validator.checkComponent(this, data, row, true, async);
         let validations = check;
@@ -2582,7 +2592,7 @@ export default class Component extends Element {
         return isValid;
     }
     checkAsyncValidity(data, dirty, row, silentCheck) {
-        return NativePromise.resolve(this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }));
+        return Promise.resolve(this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }));
     }
     /**
      * Check the conditions, calculations, and validity of a single component and triggers an update if
@@ -2821,7 +2831,7 @@ export default class Component extends Element {
         return this.dataReady;
     }
     get dataReady() {
-        return NativePromise.resolve();
+        return Promise.resolve();
     }
     /**
      * Prints out the value of this component as a string value.
@@ -3057,7 +3067,7 @@ Component.externalLibraries = {};
 Component.requireLibrary = function (name, property, src, polling) {
     if (!Component.externalLibraries.hasOwnProperty(name)) {
         Component.externalLibraries[name] = {};
-        Component.externalLibraries[name].ready = new NativePromise((resolve, reject) => {
+        Component.externalLibraries[name].ready = new Promise((resolve, reject) => {
             Component.externalLibraries[name].resolve = resolve;
             Component.externalLibraries[name].reject = reject;
         });
@@ -3130,5 +3140,5 @@ Component.libraryReady = function (name) {
         Component.externalLibraries[name].ready) {
         return Component.externalLibraries[name].ready;
     }
-    return NativePromise.reject(`${name} library was not required.`);
+    return Promise.reject(`${name} library was not required.`);
 };

package/lib/mjs/components/_classes/input/Input.d.ts

@@ -31,7 +31,7 @@ export default class Input extends Multivalue {
     parseValue(value: any): any;
     formatValue(value: any): any;
     getWidget(index: any): any;
-    attachElement(element: any, index: any): any;
+    attachElement(element: any, index: any): Promise<void>;
     /**
      * Creates an instance of a widget for this component.
      *

package/lib/mjs/components/_classes/input/Input.js

@@ -1,7 +1,6 @@
 import Multivalue from '../multivalue/Multivalue';
 import { convertStringToHTMLElement } from '../../../utils/utils';
 import Widgets from '../../../widgets';
-import NativePromise from 'native-promise-only';
 import _ from 'lodash';
 export default class Input extends Multivalue {
     constructor(component, options, data) {
@@ -213,7 +212,7 @@ export default class Input extends Multivalue {
             element.widget.destroy();
         }
         // Attach the widget.
-        let promise = NativePromise.resolve();
+        let promise = Promise.resolve();
         element.widget = this.createWidget(index);
         if (element.widget) {
             promise = element.widget.attach(element);

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

@@ -1,5 +1,9 @@
 export default class ListComponent extends Field {
     get isSelectURL(): boolean;
+    get selectData(): any;
+    get shouldLoad(): any;
+    getTemplateKeys(): void;
+    templateKeys: any[] | undefined;
     get requestHeaders(): any;
     setItems(): void;
     updateCustomItems(): void;

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

@@ -1,7 +1,6 @@
 import Field from '../field/Field';
 import { Formio } from '../../../Formio';
 import _ from 'lodash';
-import NativePromise from 'native-promise-only';
 export default class ListComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -17,6 +16,46 @@ export default class ListComponent extends Field {
     get isSelectURL() {
         return this.component.dataSrc === 'url';
     }
+    get selectData() {
+        const selectData = _.get(this.root, 'submission.metadata.selectData', {});
+        return _.get(selectData, this.path);
+    }
+    get shouldLoad() {
+        if (this.loadingError) {
+            return false;
+        }
+        // Live forms should always load.
+        if (!this.options.readOnly) {
+            return true;
+        }
+        // If there are template keys, then we need to see if we have the data.
+        if (this.templateKeys && this.templateKeys.length) {
+            // See if we already have the data we need.
+            const dataValue = this.dataValue;
+            const selectData = this.selectData;
+            return this.templateKeys.reduce((shouldLoad, key) => {
+                const hasValue = _.has(dataValue, key) ||
+                    (_.isArray(selectData) ? selectData.every((data) => _.has(data, key)) : _.has(selectData, key));
+                return shouldLoad || !hasValue;
+            }, false);
+        }
+        // Return that we should load.
+        return true;
+    }
+    getTemplateKeys() {
+        this.templateKeys = [];
+        if (this.options.readOnly && this.component.template) {
+            const keys = this.component.template.match(/({{\s*(.*?)\s*}})/g);
+            if (keys) {
+                keys.forEach((key) => {
+                    const propKey = key.match(/{{\s*item\.(.*?)\s*}}/);
+                    if (propKey && propKey.length > 1) {
+                        this.templateKeys.push(propKey[1]);
+                    }
+                });
+            }
+        }
+    }
     get requestHeaders() {
         // Create the headers object.
         const headers = new Formio.Headers();
@@ -64,10 +103,9 @@ export default class ListComponent extends Field {
         const template = this.sanitize(this.getOptionTemplate(data, value), this.shouldSanitizeValue);
         if (template) {
             const label = template.replace(/<\/?[^>]+(>|$)/g, '');
-            const hasTranslator = this.i18next?.translator;
-            if (!label || (hasTranslator && !this.t(label, { _userInput: true })))
+            if (!label)
                 return;
-            return hasTranslator ? template.replace(label, this.t(label, { _userInput: true })) : label;
+            return template.replace(label, this.t(label, { _userInput: true }));
         }
         else {
             return this.sanitize(JSON.stringify(data), this.shouldSanitizeValue);
@@ -186,7 +224,7 @@ export default class ListComponent extends Field {
                         const db = event.target.result;
                         const transaction = db.transaction(this.component.indexeddb.table, 'readwrite');
                         const objectStore = transaction.objectStore(this.component.indexeddb.table);
-                        new NativePromise((resolve) => {
+                        new Promise((resolve) => {
                             const responseItems = [];
                             objectStore.getAll().onsuccess = (event) => {
                                 event.target.result.forEach((item) => {

package/lib/mjs/components/_classes/multivalue/Multivalue.d.ts

@@ -4,6 +4,7 @@ export default class Multivalue extends Field {
     render(): any;
     renderElement(): string;
     renderRow(value: any, index: any): any;
+    attach(dom: any): Promise<any[]>;
     /**
      * Attach inputs to the element.
      *

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

@@ -1,5 +1,4 @@
 import Field from '../field/Field';
-import NativePromise from 'native-promise-only';
 import _ from 'lodash';
 export default class Multivalue extends Field {
     get dataValue() {
@@ -73,7 +72,7 @@ export default class Multivalue extends Field {
             promises.push(this.attachElement.call(this, element, index));
         });
         if (!this.component.multiple) {
-            return NativePromise.all(promises);
+            return Promise.all(promises);
         }
         this.refs.removeRow.forEach((removeButton, index) => {
             this.addEventListener(removeButton, 'click', (event) => {
@@ -89,7 +88,7 @@ export default class Multivalue extends Field {
             });
         });
         return superAttach.then(() => {
-            return NativePromise.all(promises);
+            return Promise.all(promises);
         });
     }
     detach() {
@@ -181,7 +180,14 @@ 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) {
-            this.root.currentSelection = { selection: [element.selectionStart, element.selectionEnd], index };
+            try {
+                this.root.currentSelection = { selection: [element.selectionStart, element.selectionEnd], index };
+            }
+            catch (e) {
+                if (!(e instanceof DOMException)) {
+                    console.debug(e);
+                }
+            }
         }
     }
     onSelectMaskHandler(event) {

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -4,7 +4,8 @@ export default class NestedComponent extends Field {
     _collapsed: boolean;
     set collapsed(arg: boolean);
     get collapsed(): boolean;
-    collapse(value: any): any;
+    collapse(value: any): Promise<void>;
+    get ready(): Promise<any[]>;
     set rowIndex(arg: any);
     get rowIndex(): any;
     _rowIndex: any;
@@ -78,8 +79,9 @@ export default class NestedComponent extends Field {
     addComponent(component: Object, data: Object, before: HTMLElement, noAdd: any): Component;
     beforeFocus(): void;
     renderComponents(components: any): any;
+    attach(element: any): Promise<[void, void]>;
     attachComponentsLogic(components: any): void;
-    attachComponents(element: any, components: any, container: any): any;
+    attachComponents(element: any, components: any, container: any): Promise<any>;
     /**
      * Remove a component from the components array.
      *
@@ -123,6 +125,7 @@ export default class NestedComponent extends Field {
     get isPristine(): any;
     destroyComponents(all?: boolean): void;
     get errors(): any;
+    get dataReady(): Promise<any[]>;
     setNestedValue(component: any, value: any, flags?: {}): any;
     setValue(value: any, flags?: {}): any;
     get lazyLoad(): any;