@formio/js 5.1.0-dev.6058.189ce78 → 5.1.0-dev.6059.845a6e3

package/lib/cjs/utils/ChoicesWrapper.js

@@ -1,30 +1,48 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const choices_js_1 = __importStar(require("choices.js"));
-const ExtendedKeyCodeMap = Object.assign(Object.assign({}, choices_js_1.KeyCodeMap), { TAB_KEY: 9 });
+exports.KEY_CODES = void 0;
+const choices_js_1 = __importDefault(require("@formio/choices.js"));
+/**
+ * TODO: REMOVE THIS ONCE THE PULL REQUEST HAS BEEN RESOLVED.
+ *
+ * https://github.com/jshjohnson/Choices/pull/788
+ *
+ * This is intentionally not part of the extended class, since other components use Choices and need this fix as well.
+ * @type {Choices._generatePlaceholderValue}
+ * @private
+ */
+choices_js_1.default.prototype._generatePlaceholderValue = function () {
+    if (this._isSelectElement && this.passedElement.placeholderOption) {
+        const { placeholderOption } = this.passedElement;
+        return placeholderOption ? placeholderOption.text : false;
+    }
+    const { placeholder, placeholderValue } = this.config;
+    const { element: { dataset }, } = this.passedElement;
+    if (placeholder) {
+        if (placeholderValue) {
+            return placeholderValue;
+        }
+        if (dataset.placeholder) {
+            return dataset.placeholder;
+        }
+    }
+    return false;
+};
+exports.KEY_CODES = {
+    BACK_KEY: 46,
+    DELETE_KEY: 8,
+    TAB_KEY: 9,
+    ENTER_KEY: 13,
+    A_KEY: 65,
+    ESC_KEY: 27,
+    UP_KEY: 38,
+    DOWN_KEY: 40,
+    PAGE_UP_KEY: 33,
+    PAGE_DOWN_KEY: 34,
+};
 class ChoicesWrapper extends choices_js_1.default {
     constructor(...args) {
         super(...args);
@@ -51,13 +69,24 @@ class ChoicesWrapper extends choices_js_1.default {
         }
         this._wasTap = true;
     }
-    _onEnterKey(...args) {
-        const [event] = args;
+    _handleButtonAction(activeItems, element) {
+        if (!this._isSelectOneElement) {
+            return super._handleButtonAction(activeItems, element);
+        }
+        if (!activeItems ||
+            !element ||
+            !this.config.removeItems ||
+            !this.config.removeItemButton) {
+            return;
+        }
+        super._handleButtonAction(activeItems, element);
+    }
+    _onEnterKey(args) {
         // Prevent dropdown form opening when removeItemButton was pressed using 'Enter' on keyboard
-        if (event.target.className === 'choices__button') {
+        if (args.event.target.className === 'choices__button') {
             this.shouldOpenDropDown = false;
         }
-        super._onEnterKey(...args);
+        super._onEnterKey(args);
     }
     _onDirectionKey(...args) {
         if (!this._isSelectOneElement) {
@@ -71,18 +100,17 @@ class ChoicesWrapper extends choices_js_1.default {
             this.isDirectionUsing = false;
         }, 250);
     }
-    _onTabKey() {
-        if (this.dropdown.isActive) {
-            this._selectHighlightedChoice();
+    _onTabKey({ activeItems, hasActiveDropdown }) {
+        if (hasActiveDropdown) {
+            this._selectHighlightedChoice(activeItems);
         }
     }
     _selectHighlightedChoice() {
-        const highlightedChoice = this.dropdown.element.querySelector(`.${this.config.classNames.highlightedState}`);
+        const highlightedChoice = this.dropdown.getChild(`.${this.config.classNames.highlightedState}`);
         if (highlightedChoice) {
             const id = highlightedChoice.dataset.id;
-            const choice = id && this._store.getChoiceById(Number(id));
+            const choice = id && this._store.getChoiceById(id);
             this._addItem({
-                id: choice.id,
                 value: choice.value,
                 label: choice.label,
                 choiceId: choice.id,
@@ -93,16 +121,61 @@ class ChoicesWrapper extends choices_js_1.default {
             });
             this._triggerChange(choice.value);
         }
+        event.preventDefault();
     }
     _onKeyDown(event) {
-        const keyCode = event.keyCode;
-        return this._isSelectOneElement && keyCode === ExtendedKeyCodeMap.TAB_KEY
-            ? this._onTabKey()
-            : super._onKeyDown(event);
+        if (!this._isSelectOneElement) {
+            return super._onKeyDown(event);
+        }
+        const { target, keyCode, ctrlKey, metaKey } = event;
+        if (target !== this.input.element &&
+            !this.containerOuter.element.contains(target)) {
+            return;
+        }
+        const activeItems = this._store.activeItems;
+        const hasFocusedInput = this.input.isFocussed;
+        const hasActiveDropdown = this.dropdown.isActive;
+        const hasItems = this.itemList.hasChildren;
+        const keyString = String.fromCharCode(keyCode);
+        const { BACK_KEY, DELETE_KEY, TAB_KEY, ENTER_KEY, A_KEY, ESC_KEY, UP_KEY, DOWN_KEY, PAGE_UP_KEY, PAGE_DOWN_KEY, } = exports.KEY_CODES;
+        const hasCtrlDownKeyPressed = ctrlKey || metaKey;
+        // If a user is typing and the dropdown is not active
+        if (!hasActiveDropdown && !this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {
+            const currentValue = this.input.element.value;
+            this.input.element.value = currentValue ? `${currentValue}${keyString}` : keyString;
+            this.showDropdown();
+        }
+        // Map keys to key actions
+        const keyDownActions = {
+            [A_KEY]: this._onAKey,
+            [TAB_KEY]: this._onTabKey,
+            [ENTER_KEY]: this._onEnterKey,
+            [ESC_KEY]: this._onEscapeKey,
+            [UP_KEY]: this._onDirectionKey,
+            [PAGE_UP_KEY]: this._onDirectionKey,
+            [DOWN_KEY]: this._onDirectionKey,
+            [PAGE_DOWN_KEY]: this._onDirectionKey,
+            [DELETE_KEY]: this._onDeleteKey,
+            [BACK_KEY]: this._onDeleteKey,
+        };
+        // If keycode has a function, run it
+        if (keyDownActions[keyCode]) {
+            keyDownActions[keyCode]({
+                event,
+                target,
+                keyCode,
+                metaKey,
+                activeItems,
+                hasFocusedInput,
+                hasActiveDropdown,
+                hasItems,
+                hasCtrlDownKeyPressed,
+            });
+        }
     }
-    onSelectValue(event, hasActiveDropdown) {
+    onSelectValue({ event, activeItems, hasActiveDropdown }) {
         if (hasActiveDropdown) {
-            this._selectHighlightedChoice();
+            this._selectHighlightedChoice(activeItems);
         }
         else if (this._isSelectOneElement) {
             this.showDropdown();
@@ -110,13 +183,11 @@ class ChoicesWrapper extends choices_js_1.default {
         }
     }
     showDropdown(...args) {
-        setTimeout(() => {
-            if (!this.shouldOpenDropDown) {
-                this.shouldOpenDropDown = true;
-                return;
-            }
-            super.showDropdown(...args);
-        }, 0);
+        if (!this.shouldOpenDropDown) {
+            this.shouldOpenDropDown = true;
+            return;
+        }
+        super.showDropdown(...args);
     }
     hideDropdown(...args) {
         if (this.isDirectionUsing) {
@@ -124,5 +195,11 @@ class ChoicesWrapper extends choices_js_1.default {
         }
         super.hideDropdown(...args);
     }
+    _onBlur(...args) {
+        if (this._isScrollingOnIe) {
+            return;
+        }
+        super._onBlur(...args);
+    }
 }
 exports.default = ChoicesWrapper;

package/lib/cjs/utils/formUtils.d.ts

@@ -26,8 +26,8 @@ export const getBestMatch: typeof Utils.getBestMatch;
 export const getComponentFromPath: typeof Utils.getComponentFromPath;
 export const getComponentValue: typeof Utils.getComponentValue;
 export const findComponents: typeof Utils.findComponents;
-export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => Promise<void>;
-export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => void;
+export const eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => Promise<void>;
+export const eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: typeof Utils.getContextualRowPath;
 export const getContextualRowData: typeof Utils.getContextualRowData;

package/lib/cjs/utils/i18n.d.ts

@@ -2,16 +2,13 @@
  * This file is used to mimic the i18n library interface.
  */
 export class I18n {
-    static languages: {};
-    static setDefaultTranslations(languages: any): void;
     static init(languages?: {}): I18n;
     static createInstance(): I18n;
     constructor(languages?: {});
-    languages: any;
-    defaultKeys: any;
+    languages: {};
     language: string;
     currentLanguage: any;
-    setLanguages(languages: any, noDefaultOverride: any): void;
+    setLanguages(languages: any): void;
     dir(lang?: string): "rtl" | "ltr";
     changeLanguage(language: any, ready?: null): void;
     addResourceBundle(language: any, type: any, strings: any): void;

package/lib/cjs/utils/i18n.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.I18n = void 0;
 const utils_1 = require("@formio/core/utils");
 const i18n_1 = __importDefault(require("../i18n"));
-const lodash_1 = require("lodash");
-const core_1 = require("@formio/core");
 const i18Defaults = {};
 for (const lang in i18n_1.default.resources) {
     if (i18n_1.default.resources.hasOwnProperty(lang)) {
@@ -19,28 +17,13 @@ for (const lang in i18n_1.default.resources) {
  */
 class I18n {
     constructor(languages = {}) {
-        var _a;
-        this.languages = (0, core_1.fastCloneDeep)(I18n.languages || {});
-        this.defaultKeys = ((_a = I18n.languages) === null || _a === void 0 ? void 0 : _a.en) || {};
+        this.languages = i18Defaults;
         this.language = 'en';
         this.currentLanguage = i18Defaults.en;
         this.setLanguages(languages);
         this.changeLanguage(this.language);
     }
-    static setDefaultTranslations(languages) {
-        if ((0, lodash_1.isEmpty)(languages)) {
-            return;
-        }
-        for (const lang in languages) {
-            if (lang !== 'language' && languages.hasOwnProperty(lang)) {
-                if (!this.languages[lang]) {
-                    this.languages[lang] = {};
-                }
-                this.languages[lang] = Object.assign(Object.assign({}, languages[lang]), this.languages[lang]);
-            }
-        }
-    }
-    setLanguages(languages, noDefaultOverride) {
+    setLanguages(languages) {
         if (languages.resources) {
             for (const lang in languages.resources) {
                 if (languages.resources.hasOwnProperty(lang)) {
@@ -67,8 +50,7 @@ class I18n {
                 if (!this.languages[lang]) {
                     this.languages[lang] = {};
                 }
-                this.languages[lang] = noDefaultOverride
-                    ? Object.assign(Object.assign({}, languages[lang]), this.languages[lang]) : Object.assign(Object.assign({}, this.languages[lang]), languages[lang]);
+                this.languages[lang] = Object.assign(Object.assign({}, this.languages[lang]), languages[lang]);
             }
         }
     }
@@ -98,23 +80,14 @@ class I18n {
     }
     t(text, ...args) {
         var _a;
-        let currentTranslation = this.currentLanguage[text];
-        // provide compatibility with cases where the entire phrase is used as a key
-        // get the phrase that is possibly being used as a key
-        const defaultKey = this.defaultKeys[text];
-        if (defaultKey && this.currentLanguage[defaultKey]) {
-            // get translation using the phrase as a key
-            currentTranslation = this.currentLanguage[defaultKey];
-        }
-        if (currentTranslation) {
+        if (this.currentLanguage[text]) {
             const customTranslationFieldName = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.field;
             if (customTranslationFieldName && this.currentLanguage[customTranslationFieldName]) {
                 args[0].field = this.currentLanguage[customTranslationFieldName];
             }
-            return utils_1.Evaluator.interpolateString(currentTranslation, ...args);
+            return utils_1.Evaluator.interpolateString(this.currentLanguage[text], ...args);
         }
         return utils_1.Evaluator.interpolateString(text, ...args);
     }
 }
 exports.I18n = I18n;
-I18n.languages = i18Defaults;

package/lib/cjs/widgets/CalendarWidget.js

@@ -93,6 +93,8 @@ class CalendarWidget extends InputWidget_1.default {
         this.settings.disableWeekends ? this.settings.disable.push(this.disableWeekends) : '';
         this.settings.disableWeekdays ? this.settings.disable.push(this.disableWeekdays) : '';
         this.settings.disableFunction ? this.settings.disable.push(this.disableFunction) : '';
+        this.settings.wasDefaultValueChanged = false;
+        this.settings.defaultValue = '';
         this.settings.manualInputValue = '';
         this.settings.isManuallyOverriddenValue = false;
         this.settings.currentValue = '';
@@ -100,8 +102,14 @@ class CalendarWidget extends InputWidget_1.default {
         this.settings.dateFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.dateFormat);
         this.settings.position = 'auto center';
         this.settings.onChange = () => {
-            if (this.settings.allowInput && this.settings.enableTime) {
-                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
+            if (this.settings.allowInput) {
+                if (this.settings.isManuallyOverriddenValue && this.settings.enableTime) {
+                    this.calendar._input.value = this.settings.manualInputValue;
+                }
+                else {
+                    this.settings.manualInputValue = '';
+                }
+                this.settings.isManuallyOverriddenValue = false;
             }
             this.emit('update');
         };
@@ -110,15 +118,20 @@ class CalendarWidget extends InputWidget_1.default {
             this.hook('onCalendarClose');
             this.closedOn = Date.now();
             if (this.settings.allowInput && this.settings.enableTime) {
-                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
+                this.calendar._input.value = this.settings.manualInputValue || this.calendar._input.value;
+                this.settings.isManuallyOverriddenValue = false;
                 this.emit('update');
             }
+            if (this.settings.wasDefaultValueChanged) {
+                this.calendar._input.value = this.settings.defaultValue;
+                this.settings.wasDefaultValueChanged = false;
+            }
             if (this.calendar) {
                 this.emit('blur');
             }
         };
         Formio_1.Formio.requireLibrary('flatpickr-css', 'flatpickr', [
-            { type: 'styles', src: `${Formio_1.Formio.cdn['flatpickr']}/flatpickr.min.css` }
+            { type: 'styles', src: `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.css` }
         ], true);
         if (this.component.shortcutButtons) {
             this.component.shortcutButtons = this.component.shortcutButtons.filter((btn) => btn.label && btn.onClick);
@@ -136,7 +149,7 @@ class CalendarWidget extends InputWidget_1.default {
             }
         })
             .then((ShortcutButtonsPlugin) => {
-            return Formio_1.Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio_1.Formio.cdn['flatpickr']}/flatpickr.min.js`, true)
+            return Formio_1.Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.js`, true)
                 .then((Flatpickr) => {
                 var _a;
                 if (((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) && ShortcutButtonsPlugin) {
@@ -146,7 +159,7 @@ class CalendarWidget extends InputWidget_1.default {
                 if (this._input) {
                     const { locale } = this.settings;
                     if (locale && locale.length >= 2 && locale !== 'en') {
-                        return Formio_1.Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr.l10ns.${locale}`, `${Formio_1.Formio.cdn['flatpickr']}/l10n/${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
+                        return Formio_1.Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr-${locale}`, `${Formio_1.Formio.cdn['flatpickr-formio']}/l10n/flatpickr-${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
                     }
                     else {
                         this.initFlatpickr(Flatpickr);
@@ -345,28 +358,19 @@ class CalendarWidget extends InputWidget_1.default {
         this.calendar = new Flatpickr(this._input, Object.assign(Object.assign({}, this.settings), { disableMobile: true }));
         this.addEventListener(this.calendar.altInput, 'input', (event) => {
             if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {
-                if (event.target.mask) {
-                    event.target.mask.textMaskInputElement.update();
-                }
                 this.settings.manualInputValue = event.target.value;
-                this._input.value = this.settings.manualInputValue;
                 this.settings.isManuallyOverriddenValue = true;
                 this.settings.currentValue = event.target.value;
-                this.emit('update');
+            }
+            if (event.target.value === '' && this.calendar.selectedDates.length > 0) {
+                this.settings.wasDefaultValueChanged = true;
+                this.settings.defaultValue = event.target.value;
+                this.calendar.clear();
+            }
+            else {
+                this.settings.wasDefaultValueChanged = false;
             }
         });
-        if (this.calendar.daysContainer) {
-            this.calendar.daysContainer.addEventListener('click', () => {
-                this.settings.isManuallyOverriddenValue = false;
-                this.calendar.updateValue(false);
-            });
-        }
-        if (this.calendar.timeContainer) {
-            this.calendar.timeContainer.addEventListener('click', () => {
-                this.settings.isManuallyOverriddenValue = false;
-                this.calendar.updateValue(false);
-            });
-        }
         const excludedFromMaskFormats = ['MMMM'];
         if (!this.settings.readOnly && !lodash_1.default.some(excludedFromMaskFormats, format => lodash_1.default.includes(this.settings.format, format))) {
             // Enforce the input mask of the format.
@@ -393,10 +397,6 @@ class CalendarWidget extends InputWidget_1.default {
         // Make sure we commit the value after a blur event occurs.
         this.addEventListener(this.calendar._input, 'blur', (event) => {
             var _a, _b, _c, _d;
-            // If we have manually overridden the value then we shouldn't call setDate because this will fill the input mask
-            if (this.settings.isManuallyOverriddenValue) {
-                return;
-            }
             const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;
             const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
             if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {

package/lib/mjs/CDN.d.ts

@@ -13,8 +13,8 @@ declare class CDN {
         bootswatch: string;
         'bootstrap-icons': string;
         ckeditor: string;
-        dragula: string;
         flatpickr: string;
+        'flatpickr-formio': string;
         'font-awesome': string;
         grid: string;
         'moment-timezone': string;

package/lib/mjs/CDN.js

@@ -16,8 +16,8 @@ class CDN {
             'bootswatch': '5.3.3',
             'bootstrap-icons': '1.11.1',
             'ckeditor': '19.0.0',
-            'dragula': '3.7.3',
-            'flatpickr': '4.6.13',
+            'flatpickr': '4.6.8',
+            'flatpickr-formio': '4.6.13-formio.3',
             'font-awesome': '4.7.0',
             'grid': 'latest',
             'moment-timezone': 'latest',

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.1.0-dev.2';
+    static version = '5.1.0-rc.26';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {

package/lib/mjs/Form.d.ts

@@ -48,7 +48,7 @@ export default class Form extends Element {
      * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
      * @property {boolean} [readOnly] - Set this form to readOnly.
      * @property {boolean} [noAlerts] - Disable the alerts dialog.
-     * @property {Record<string, Record<string, string>>} [i18n] - The translation file for this rendering.
+     * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
      * @property {string} [template] - Custom logic for creation of elements.
      * @property {boolean} [noDefaults] - Exclude default values from the settings.
      * @property {any} [fileService] - The file service for this form.
@@ -117,7 +117,9 @@ export default class Form extends Element {
         /**
          * - The translation file for this rendering.
          */
-        i18n?: Record<string, Record<string, string>> | undefined;
+        i18n?: {
+            [key: string]: string;
+        } | undefined;
         /**
          * - Custom logic for creation of elements.
          */
@@ -396,10 +398,10 @@ export default class Form extends Element {
     getFormInitOptions(url: string, form: import('@formio/core').Form): object;
     /**
      * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
      * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
      */
-    setForm(formParam: import('@formio/core').Form | string): Promise<Webform | Wizard | PDF>;
+    setForm(formParam: import('@formio/core').Form): Promise<Webform | Wizard | PDF>;
     _form: any;
     getSubmission(formio: any, opts: any): any;
     /**

package/lib/mjs/Form.js

@@ -51,7 +51,7 @@ export default class Form extends Element {
      * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
      * @property {boolean} [readOnly] - Set this form to readOnly.
      * @property {boolean} [noAlerts] - Disable the alerts dialog.
-     * @property {Record<string, Record<string, string>>} [i18n] - The translation file for this rendering.
+     * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
      * @property {string} [template] - Custom logic for creation of elements.
      * @property {boolean} [noDefaults] - Exclude default values from the settings.
      * @property {any} [fileService] - The file service for this form.
@@ -264,7 +264,7 @@ export default class Form extends Element {
     }
     /**
      * Sets the form to the JSON schema of a form.
-     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form} formParam - The form JSON to set this form to.
      * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
      */
     setForm(formParam) {
@@ -291,14 +291,8 @@ export default class Form extends Element {
                     }
                     this.loading = false;
                     this.instance = this.instance || this.create(form.display);
-                    // If we're in builder mode, instance.setUrl is not a function, so just manually set the URL.
-                    if (this.instance.setUrl) {
-                        const options = this.getFormInitOptions(formParam, form);
-                        this.instance.setUrl(formParam, options);
-                    }
-                    else {
-                        this.instance.url = formParam;
-                    }
+                    const options = this.getFormInitOptions(formParam, form);
+                    this.instance.setUrl(formParam, options);
                     this.instance.nosubmit = false;
                     this._form = this.instance.form = form;
                     if (submission) {
@@ -350,9 +344,7 @@ export default class Form extends Element {
         this.form.display = display;
         this.instance.destroy();
         this.instance = this.create(display);
-        return this.setForm(this.form).then(() => {
-            this.instance.emit('setDisplay', this.form.display);
-        });
+        return this.setForm(this.form);
     }
     empty() {
         if (this.element) {
@@ -408,10 +400,10 @@ export default class Form extends Element {
      */
     build() {
         if (!this.instance) {
-            return Promise.reject(this.t('formNotReady'));
+            return Promise.reject('Form not ready. Use form.ready promise');
         }
         if (!this.element) {
-            return Promise.reject(this.t('noFormElement'));
+            return Promise.reject('No DOM element for form.');
         }
         // Add temporary loader.
         const template = (this.options && this.options.template) ? this.options.template : 'bootstrap';
@@ -428,7 +420,7 @@ export default class Form extends Element {
     }
     render() {
         if (!this.instance) {
-            return Promise.reject(this.t('formNotReady'));
+            return Promise.reject('Form not ready. Use form.ready promise');
         }
         return Promise.resolve(this.instance.render())
             .then((param) => {
@@ -438,7 +430,7 @@ export default class Form extends Element {
     }
     attach(element) {
         if (!this.instance) {
-            return Promise.reject(this.t('formNotReady'));
+            return Promise.reject('Form not ready. Use form.ready promise');
         }
         if (this.element) {
             delete this.element.component;

package/lib/mjs/Formio.js

@@ -4,7 +4,7 @@ import CDN from './CDN';
 import Providers from './providers';
 FormioCore.cdn = new CDN();
 FormioCore.Providers = Providers;
-FormioCore.version = '5.1.0-dev.2';
+FormioCore.version = '5.1.0-rc.26';
 CDN.defaultCDN = FormioCore.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 const isNil = (val) => val === null || val === undefined;
 FormioCore.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {

package/lib/mjs/PDFBuilder.js

@@ -196,10 +196,10 @@ export default class PDFBuilder extends WebformBuilder {
                 const progress = Math.floor((event.loaded / event.total) * 100);
                 this.refs.uploadProgress.style.width = `${progress}%`;
                 if (progress > 98) {
-                    this.refs.uploadProgress.innerHTML = this.t('waitPdfConverting');
+                    this.refs.uploadProgress.innerHTML = this.t('Converting PDF. Please wait.');
                 }
                 else {
-                    this.refs.uploadProgress.innerHTML = `${this.t('uploading')} ${progress}%`;
+                    this.refs.uploadProgress.innerHTML = `${this.t('Uploading')} ${progress}%`;
                 }
             }
         }, `${this.projectUrl}/upload`, {}, 'file')
@@ -236,7 +236,7 @@ export default class PDFBuilder extends WebformBuilder {
             return;
         }
         this.refs.uploadError.style.display = message ? '' : 'none';
-        this.refs.uploadError.innerHTML = this.t(`${message}`);
+        this.refs.uploadError.innerHTML = message;
     }
     createForm(options) {
         // Instantiate the webform from the PDF class instead of Webform
@@ -464,7 +464,7 @@ export default class PDFBuilder extends WebformBuilder {
                     name: 'showBuilderErrors',
                     data: {
                         compId: comp.component.id,
-                        errorMessage: `${this.t('notUniqueKey')}: ${comp.key}`,
+                        errorMessage: `API Key is not unique: ${comp.key}`,
                     }
                 });
             }