@formio/js 5.0.2 → 5.1.0-dev.5522.066969f

package/lib/cjs/widgets/CalendarWidget.js

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const Formio_1 = require("../Formio");
-const InputWidget_1 = __importDefault(require("./InputWidget"));
-const utils_1 = require("../utils/utils");
 const moment_1 = __importDefault(require("moment"));
 const lodash_1 = __importDefault(require("lodash"));
+const Formio_1 = require("../Formio");
+const InputWidget_1 = __importDefault(require("./InputWidget"));
+const utils_1 = require("../utils");
 const DEFAULT_FORMAT = 'yyyy-MM-dd hh:mm a';
 const ISO_8601_FORMAT = 'yyyy-MM-ddTHH:mm:ssZ';
 const isIEBrowser = (0, utils_1.getBrowserInfo)().ie;
@@ -51,29 +51,6 @@ class CalendarWidget extends InputWidget_1.default {
         else if (this.settings.time_24hr) {
             this.settings.format = this.settings.format.replace(/hh:mm a$/g, 'HH:mm');
         }
-        this.zoneLoading = false;
-        this.timezonesUrl = `${Formio_1.Formio.cdn['moment-timezone']}/data/packed/latest.json`;
-    }
-    /**
-     * Load the timezones.
-     * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.
-     */
-    loadZones() {
-        const timezone = this.timezone;
-        if (this.zoneLoading) {
-            return true;
-        }
-        if (!(0, utils_1.zonesLoaded)() && (0, utils_1.shouldLoadZones)(timezone)) {
-            this.zoneLoading = true;
-            (0, utils_1.loadZones)(this.timezonesUrl, timezone).then(() => {
-                this.zoneLoading = false;
-                this.emit('redraw');
-            });
-            // Return zones are loading.
-            return true;
-        }
-        // Zones are already loaded.
-        return false;
     }
     attach(input) {
         var _a;
@@ -85,7 +62,7 @@ class CalendarWidget extends InputWidget_1.default {
         };
         this.closedOn = 0;
         this.valueFormat = (this.settings.saveAs === 'date') ? ISO_8601_FORMAT : this.settings.dateFormat || ISO_8601_FORMAT;
-        this.valueMomentFormat = (0, utils_1.convertFormatToMoment)(this.valueFormat);
+        this.valueMomentFormat = (0, utils_1.convertFormatToDayjs)(this.valueFormat);
         const isReadOnly = this.settings.readOnly;
         this.settings.minDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.minDate);
         this.settings.maxDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.maxDate);
@@ -93,8 +70,6 @@ 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 = '';
@@ -102,14 +77,8 @@ 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) {
-                if (this.settings.isManuallyOverriddenValue && this.settings.enableTime) {
-                    this.calendar._input.value = this.settings.manualInputValue;
-                }
-                else {
-                    this.settings.manualInputValue = '';
-                }
-                this.settings.isManuallyOverriddenValue = false;
+            if (this.settings.allowInput && this.settings.enableTime) {
+                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
             }
             this.emit('update');
         };
@@ -118,20 +87,15 @@ 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.manualInputValue || this.calendar._input.value;
-                this.settings.isManuallyOverriddenValue = false;
+                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
                 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-formio']}/flatpickr.min.css` }
+            { type: 'styles', src: `${Formio_1.Formio.cdn['flatpickr']}/flatpickr.min.css` }
         ], true);
         if (this.component.shortcutButtons) {
             this.component.shortcutButtons = this.component.shortcutButtons.filter((btn) => btn.label && btn.onClick);
@@ -149,7 +113,7 @@ class CalendarWidget extends InputWidget_1.default {
             }
         })
             .then((ShortcutButtonsPlugin) => {
-            return Formio_1.Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.js`, true)
+            return Formio_1.Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio_1.Formio.cdn['flatpickr']}/flatpickr.min.js`, true)
                 .then((Flatpickr) => {
                 var _a;
                 if (((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) && ShortcutButtonsPlugin) {
@@ -159,7 +123,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-${locale}`, `${Formio_1.Formio.cdn['flatpickr-formio']}/l10n/flatpickr-${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
+                        return Formio_1.Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr.l10ns.${locale}`, `${Formio_1.Formio.cdn['flatpickr']}/l10n/${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
                     }
                     else {
                         this.initFlatpickr(Flatpickr);
@@ -262,9 +226,9 @@ class CalendarWidget extends InputWidget_1.default {
      */
     getDateValue(date, format, useTimezone) {
         if (useTimezone) {
-            return (0, utils_1.momentDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToMoment)(format));
+            return (0, utils_1.dayjsDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToDayjs)(format));
         }
-        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToMoment)(format));
+        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToDayjs)(format));
     }
     /**
      * Return the value of the selected date.
@@ -296,13 +260,15 @@ class CalendarWidget extends InputWidget_1.default {
     setValue(value) {
         const saveAsText = (this.settings.saveAs === 'text');
         if (!this.calendar) {
-            value = value ? (0, utils_1.formatDate)(this.timezonesUrl, value, (0, utils_1.convertFormatToMoment)(this.settings.format), this.timezone, (0, utils_1.convertFormatToMoment)(this.valueMomentFormat)) : value;
+            value = value ? (0, utils_1.formatDate)(value, (0, utils_1.convertFormatToDayjs)(this.settings.format), this.timezone, (0, utils_1.convertFormatToDayjs)(this.valueMomentFormat)) : value;
             return super.setValue(value);
         }
-        const zonesLoading = this.loadZones();
+        // If the component is a textfield that does not have timezone information included in the string value then skip
+        // the timezone offset
+        this.settings.skipOffset = this.component.type === 'textfield' && !(0, utils_1.hasEncodedTimezone)(value);
         if (value) {
-            if (!saveAsText && this.settings.readOnly && !zonesLoading) {
-                this.calendar.setDate((0, utils_1.momentDate)(value, this.valueFormat, this.timezone).format(), false);
+            if (!saveAsText && this.settings.readOnly) {
+                this.calendar.setDate((0, utils_1.dayjsDate)(value, this.valueFormat, this.timezone).format(), false);
             }
             else if (this.isValueISO8601(value)) {
                 this.calendar.setDate(value, false);
@@ -315,13 +281,13 @@ class CalendarWidget extends InputWidget_1.default {
             this.calendar.clear(false);
         }
     }
-    getValueAsString(value, format) {
+    getValueAsString(value, format = '') {
         const inputFormat = format || this.dateFormat;
         const valueFormat = this.calendar ? this.valueFormat : this.settings.dateFormat;
         if (this.settings.saveAs === 'text' && this.componentInstance.parent && !this.settings.readOnly) {
-            return (0, moment_1.default)(value, (0, utils_1.convertFormatToMoment)(valueFormat)).format((0, utils_1.convertFormatToMoment)(valueFormat));
+            return (0, moment_1.default)(value, (0, utils_1.convertFormatToDayjs)(valueFormat)).format((0, utils_1.convertFormatToDayjs)(valueFormat));
         }
-        return (0, utils_1.formatDate)(this.timezonesUrl, value, inputFormat, this.timezone, (0, utils_1.convertFormatToMoment)(valueFormat));
+        return (0, utils_1.formatDate)(value, inputFormat, this.timezone, (0, utils_1.convertFormatToDayjs)(valueFormat));
     }
     setErrorClasses(hasErrors) {
         if (!this.input) {
@@ -358,19 +324,28 @@ 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;
-            }
-            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;
+                this.emit('update');
             }
         });
+        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.
@@ -397,11 +372,15 @@ 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)) {
                 const inputValue = this.calendar.input.value;
-                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToMoment)(this.valueFormat)).toDate() : inputValue;
+                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToDayjs)(this.valueFormat)).toDate() : inputValue;
                 this.calendar.setDate(dateValue, true, this.settings.altFormat);
             }
             else if (!this.calendar.input.value && this.calendar.config.noCalendar) {
@@ -453,14 +432,14 @@ class CalendarWidget extends InputWidget_1.default {
         return (date, format) => {
             // Only format this if this is the altFormat and the form is readOnly.
             if (this.settings.readOnly && (format === this.settings.altFormat)) {
-                if (!this.settings.enableTime || this.loadZones()) {
+                if (!this.settings.enableTime || this.settings.skipOffset) {
                     return Flatpickr.formatDate(date, format);
                 }
                 const currentValue = new Date(this.getValue());
                 if (currentValue.toString() === date.toString()) {
-                    return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
+                    return (0, utils_1.formatOffset)(Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
                 }
-                return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
+                return (0, utils_1.formatOffset)(Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
             }
             return Flatpickr.formatDate(date, format);
         };

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',
-            'flatpickr': '4.6.8',
-            'flatpickr-formio': '4.6.13-formio.3',
+            'dragula': '3.7.3',
+            'flatpickr': '4.6.13',
             'font-awesome': '4.7.0',
             'grid': 'latest',
             'moment-timezone': 'latest',

package/lib/mjs/Element.js

@@ -1,10 +1,10 @@
-import EventEmitter from './EventEmitter';
-import { Formio } from './Formio';
-import * as FormioUtils from './utils/utils';
-import { I18n } from './utils/i18n';
 import _ from 'lodash';
 import moment from 'moment';
 import maskInput from '@formio/vanilla-text-mask';
+import EventEmitter from './EventEmitter';
+import { Formio } from './Formio';
+import { I18n } from './utils/i18n';
+import FormioUtils from './utils';
 /**
  * The root component for all elements within the Form.io renderer.
  */
@@ -523,9 +523,9 @@ export default class Element {
         if (this.component.filter === string && !this.options.building) {
             const evalContext = this.evalContext(data);
             evalContext.data = _.mapValues(evalContext.data, (val) => _.isString(val) ? encodeURIComponent(val) : val);
-            return FormioUtils.interpolate(string, evalContext, options);
+            return FormioUtils.Evaluator.interpolate(string, evalContext, options);
         }
-        return FormioUtils.interpolate(string, this.evalContext(data), options);
+        return FormioUtils.Evaluator.interpolate(string, this.evalContext(data), options);
     }
     /**
      * Performs an evaluation using the evaluation context of this component.

package/lib/mjs/Embed.js

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

package/lib/mjs/EventEmitter.js

@@ -1,5 +1,5 @@
 import { EventEmitter as EventEmitter3 } from 'eventemitter3';
-import * as utils from './utils/utils';
+import { observeOverload } from './utils';
 export default class EventEmitter extends EventEmitter3 {
     constructor(conf = {}) {
         const { loadLimit = 1000, eventsSafeInterval = 300 } = conf;
@@ -7,7 +7,7 @@ export default class EventEmitter extends EventEmitter3 {
         const overloadHandler = () => {
             console.warn(`There were more than ${loadLimit} events emitted in ${eventsSafeInterval} ms. It might be caused by events' infinite loop`, this.id);
         };
-        const dispatch = utils.observeOverload(overloadHandler, {
+        const dispatch = observeOverload(overloadHandler, {
             limit: loadLimit,
             delay: eventsSafeInterval
         });

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 {{[key: string]: string}} [i18n] - The translation file for this rendering.
+     * @property {Record<string, Record<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,9 +117,7 @@ export default class Form extends Element {
         /**
          * - The translation file for this rendering.
          */
-        i18n?: {
-            [key: string]: string;
-        } | undefined;
+        i18n?: Record<string, Record<string, string>> | undefined;
         /**
          * - Custom logic for creation of elements.
          */
@@ -398,10 +396,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} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form | string} 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): Promise<Webform | Wizard | PDF>;
+    setForm(formParam: import('@formio/core').Form | string): Promise<Webform | Wizard | PDF>;
     _form: any;
     getSubmission(formio: any, opts: any): any;
     /**

package/lib/mjs/Form.js

@@ -2,7 +2,7 @@ import Element from './Element';
 import { Formio } from './Formio';
 import Displays from './displays';
 import templates from './templates';
-import * as FormioUtils from './utils/utils';
+import FormioUtils from './utils';
 export default class Form extends Element {
     /**
      * Represents a JSON value.
@@ -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 {{[key: string]: string}} [i18n] - The translation file for this rendering.
+     * @property {Record<string, Record<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} formParam - The form JSON to set this form to.
+     * @param {import('@formio/core').Form | string} formParam - The form JSON to set this form to.
      * @returns {Promise<Webform|Wizard|PDF>} - The webform instance that was created.
      */
     setForm(formParam) {
@@ -291,8 +291,14 @@ export default class Form extends Element {
                     }
                     this.loading = false;
                     this.instance = this.instance || this.create(form.display);
-                    const options = this.getFormInitOptions(formParam, form);
-                    this.instance.setUrl(formParam, options);
+                    // 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;
+                    }
                     this.instance.nosubmit = false;
                     this._form = this.instance.form = form;
                     if (submission) {
@@ -344,7 +350,9 @@ export default class Form extends Element {
         this.form.display = display;
         this.instance.destroy();
         this.instance = this.create(display);
-        return this.setForm(this.form);
+        return this.setForm(this.form).then(() => {
+            this.instance.emit('setDisplay', this.form.display);
+        });
     }
     empty() {
         if (this.element) {
@@ -400,10 +408,10 @@ export default class Form extends Element {
      */
     build() {
         if (!this.instance) {
-            return Promise.reject('Form not ready. Use form.ready promise');
+            return Promise.reject(this.t('formNotReady'));
         }
         if (!this.element) {
-            return Promise.reject('No DOM element for form.');
+            return Promise.reject(this.t('noFormElement'));
         }
         // Add temporary loader.
         const template = (this.options && this.options.template) ? this.options.template : 'bootstrap';
@@ -420,7 +428,7 @@ export default class Form extends Element {
     }
     render() {
         if (!this.instance) {
-            return Promise.reject('Form not ready. Use form.ready promise');
+            return Promise.reject(this.t('formNotReady'));
         }
         return Promise.resolve(this.instance.render())
             .then((param) => {
@@ -430,7 +438,7 @@ export default class Form extends Element {
     }
     attach(element) {
         if (!this.instance) {
-            return Promise.reject('Form not ready. Use form.ready promise');
+            return Promise.reject(this.t('formNotReady'));
         }
         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.0.2';
+FormioCore.version = '5.1.0-dev.2';
 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/PDF.js

@@ -1,6 +1,6 @@
 import { Formio } from './Formio';
 import Webform from './Webform';
-import { fastCloneDeep, eachComponent } from './utils/utils';
+import { fastCloneDeep, eachComponent } from './utils';
 export default class PDF extends Webform {
     constructor(element, options) {
         options.display = 'pdf';

package/lib/mjs/PDFBuilder.js

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import { Formio } from './Formio';
 import WebformBuilder from './WebformBuilder';
-import { fastCloneDeep, getElementRect, getBrowserInfo } from './utils/utils';
-import { eachComponent } from './utils/formUtils';
+import { fastCloneDeep, getElementRect, getBrowserInfo, eachComponent } from './utils';
 import BuilderUtils from './utils/builder';
 import PDF from './PDF';
 export default class PDFBuilder extends WebformBuilder {
@@ -196,10 +195,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('Converting PDF. Please wait.');
+                    this.refs.uploadProgress.innerHTML = this.t('waitPdfConverting');
                 }
                 else {
-                    this.refs.uploadProgress.innerHTML = `${this.t('Uploading')} ${progress}%`;
+                    this.refs.uploadProgress.innerHTML = `${this.t('uploading')} ${progress}%`;
                 }
             }
         }, `${this.projectUrl}/upload`, {}, 'file')
@@ -236,7 +235,7 @@ export default class PDFBuilder extends WebformBuilder {
             return;
         }
         this.refs.uploadError.style.display = message ? '' : 'none';
-        this.refs.uploadError.innerHTML = message;
+        this.refs.uploadError.innerHTML = this.t(`${message}`);
     }
     createForm(options) {
         // Instantiate the webform from the PDF class instead of Webform
@@ -294,7 +293,7 @@ export default class PDFBuilder extends WebformBuilder {
                     height: schema.height,
                     width: schema.width
                 };
-                if (!this.options.noNewEdit && !component.component.noNewEdit) {
+                if (!this.options.noNewEdit && !component.component.noNewEdit && this.hasEditTabs(component.type)) {
                     this.editComponent(component.component, this.getParentContainer(component), isNew);
                 }
                 this.emit('updateComponent', component.component);
@@ -318,7 +317,7 @@ export default class PDFBuilder extends WebformBuilder {
         });
         this.webform.on('iframe-componentClick', schema => {
             const component = this.webform.getComponentById(schema.id);
-            if (component) {
+            if (component && this.hasEditTabs(component.type)) {
                 this.editComponent(component.component, this.getParentContainer(component));
             }
         }, true);
@@ -464,7 +463,7 @@ export default class PDFBuilder extends WebformBuilder {
                     name: 'showBuilderErrors',
                     data: {
                         compId: comp.component.id,
-                        errorMessage: `API Key is not unique: ${comp.key}`,
+                        errorMessage: `${this.t('notUniqueKey')}: ${comp.key}`,
                     }
                 });
             }

package/lib/mjs/Webform.d.ts

@@ -34,10 +34,10 @@
  */
 /**
  * @typedef {object} ButtonSettings
- * @property {boolean} [showPrevious] - Show the "Previous" button.
- * @property {boolean} [showNext] - Show the "Next" button.
- * @property {boolean} [showCancel] - Show the "Cancel" button.
- * @property {boolean} [showSubmit] - Show the "Submit" button.
+ * @property {boolean} [showPrevious] - Show the 'Previous' button.
+ * @property {boolean} [showNext] - Show the 'Next' button.
+ * @property {boolean} [showCancel] - Show the 'Cancel' button.
+ * @property {boolean} [showSubmit] - Show the 'Submit' button.
  */
 /**
  * @typedef {object} FormOptions
@@ -190,7 +190,10 @@ declare class Webform extends NestedDataComponent {
     get language(): string;
     root: this;
     localRoot: this;
+    beforeInit(): void;
+    executeFormController: any;
     get emptyValue(): null;
+    get shouldCallFormController(): any;
     get shadowRoot(): any;
     /**
      * Add a language for translations
@@ -257,7 +260,7 @@ declare class Webform extends NestedDataComponent {
     get ready(): Promise<any>;
     /**
      * Set the loading state for this form, and also show the loader spinner.
-     * @param {boolean} loading - If this form should be "loading" or not.
+     * @param {boolean} loading - If this form should be 'loading' or not.
      */
     set loading(loading: boolean);
     /**
@@ -330,6 +333,13 @@ declare class Webform extends NestedDataComponent {
      * @returns {object} - The submission object.
      */
     get submission(): object;
+    /**
+     * Sets the submission value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubmission(submission: object | null | undefined, flags?: object | null | undefined): void;
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param {any} submission - The submission to set.
@@ -353,16 +363,16 @@ declare class Webform extends NestedDataComponent {
      * @returns {Promise} - The promise that is triggered when the form is built.
      */
     init(): Promise<any>;
-    executeFormController(): false | undefined;
+    _executeFormController(): void;
     build(element: any): Promise<any>;
     getClassName(): string;
-    render(): import("./components/_classes/field/Field").default;
+    render(): string;
     redraw(): Promise<void> | Promise<boolean>;
     attach(element: any): Promise<boolean>;
     hasRequiredFields(): boolean;
     /**
      * Sets a new alert to display in the error dialog of the form.
-     * @param {string} type - The type of alert to display. "danger", "success", "warning", etc.
+     * @param {string} type - The type of alert to display. 'danger', 'success', 'warning', etc.
      * @param {string} message - The message to show in the alert.
      * @param {object} options - The options for the alert.
      */
@@ -419,7 +429,7 @@ declare class Webform extends NestedDataComponent {
      */
     cancel(noconfirm: boolean): boolean;
     setMetadata(submission: any): void;
-    submitForm(options?: {}): Promise<any>;
+    submitForm(options?: {}, local?: boolean): Promise<any>;
     setServerErrors(error: any): void;
     serverErrors: any;
     executeSubmit(options: any): Promise<object>;
@@ -445,7 +455,7 @@ declare class Webform extends NestedDataComponent {
      */
     submit(before?: boolean, options?: any): Promise<any>;
     submitUrl(URL: any, headers: any): void;
-    triggerCaptcha(): void;
+    triggerCaptcha(components?: null): void;
     _nosubmit: any;
     get conditions(): any;
     get variables(): any;
@@ -540,19 +550,19 @@ export type SanitizeConfig = {
 };
 export type ButtonSettings = {
     /**
-     * - Show the "Previous" button.
+     * - Show the 'Previous' button.
      */
     showPrevious?: boolean | undefined;
     /**
-     * - Show the "Next" button.
+     * - Show the 'Next' button.
      */
     showNext?: boolean | undefined;
     /**
-     * - Show the "Cancel" button.
+     * - Show the 'Cancel' button.
      */
     showCancel?: boolean | undefined;
     /**
-     * - Show the "Submit" button.
+     * - Show the 'Submit' button.
      */
     showSubmit?: boolean | undefined;
 };
@@ -732,5 +742,5 @@ export type FormOptions = {
      */
     zoom?: number | undefined;
 };
-import NestedDataComponent from "./components/_classes/nesteddata/NestedDataComponent";
-import EventEmitter from "./EventEmitter";
+import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
+import EventEmitter from './EventEmitter';