@formio/js 5.0.0 → 5.1.0-dev.5952.01438a4

package/lib/cjs/utils/conditionOperators/DateGreaterThan.js

@@ -20,13 +20,13 @@ class DateGeaterThan extends ConditionOperator_1.default {
     }
     execute(options, functionName = 'isAfter') {
         var _a;
-        const { value, instance, conditionComponentPath } = options;
+        const { value, instance, path } = options;
         if (!value) {
             return false;
         }
         let conditionTriggerComponent = null;
         if ((_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) {
-            conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            conditionTriggerComponent = instance.root.getComponent(path);
         }
         if (conditionTriggerComponent && conditionTriggerComponent.isPartialDay && conditionTriggerComponent.isPartialDay(value)) {
             return false;

package/lib/cjs/utils/conditionOperators/IsEmptyValue.d.ts

@@ -1,8 +1,8 @@
 export default class IsEmptyValue extends ConditionOperator {
-    execute({ value, instance, conditionComponentPath }: {
+    execute({ value, instance, path }: {
         value: any;
         instance: any;
-        conditionComponentPath: any;
+        path: any;
     }): any;
     getResult(options: any): any;
 }

package/lib/cjs/utils/conditionOperators/IsEmptyValue.js

@@ -15,11 +15,11 @@ class IsEmptyValue extends ConditionOperator_1.default {
     static get requireValue() {
         return false;
     }
-    execute({ value, instance, conditionComponentPath }) {
+    execute({ value, instance, path }) {
         var _a;
         const isEmptyValue = lodash_1.default.isEmpty(lodash_1.default.isNumber(value) ? String(value) : value);
         if ((_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) {
-            const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            const conditionTriggerComponent = instance.root.getComponent(path);
             return (conditionTriggerComponent === null || conditionTriggerComponent === void 0 ? void 0 : conditionTriggerComponent.isEmpty) ? conditionTriggerComponent.isEmpty() : isEmptyValue;
         }
         return isEmptyValue;

package/lib/cjs/utils/conditionOperators/IsEqualTo.d.ts

@@ -1,9 +1,9 @@
 export default class IsEqualTo extends ConditionOperator {
-    execute({ value, comparedValue, instance, conditionComponentPath }: {
+    execute({ value, comparedValue, instance, path }: {
         value: any;
         comparedValue: any;
         instance: any;
-        conditionComponentPath: any;
+        path: any;
     }): any;
 }
 import ConditionOperator from './ConditionOperator';

package/lib/cjs/utils/conditionOperators/IsEqualTo.js

@@ -13,7 +13,7 @@ class IsEqualTo extends ConditionOperator_1.default {
     static get displayedName() {
         return 'Is Equal To';
     }
-    execute({ value, comparedValue, instance, conditionComponentPath }) {
+    execute({ value, comparedValue, instance, path }) {
         var _a, _b;
         if ((value || value === false) && comparedValue && typeof value !== typeof comparedValue && lodash_1.default.isString(comparedValue)) {
             try {
@@ -23,7 +23,7 @@ class IsEqualTo extends ConditionOperator_1.default {
             catch (e) { }
         }
         if ((_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) {
-            const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            const conditionTriggerComponent = instance.root.getComponent(path);
             if (conditionTriggerComponent
                 && (0, utils_1.isSelectResourceWithObjectValue)(conditionTriggerComponent.component)
                 && ((_b = conditionTriggerComponent.component) === null || _b === void 0 ? void 0 : _b.template)) {

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

@@ -1,22 +1,33 @@
-/**
- * Deprecated version of findComponents. Renamed to searchComponents.
- * @param {import('@formio/core').Component[]} components - The components to find components within.
- * @param {object} query - The query to use when searching for the components.
- * @returns {import('@formio/core').Component[]} - The result of the component that is found.
- */
-export function findComponents(components: import('@formio/core').Component[], query: object): import('@formio/core').Component[];
 export const flattenComponents: typeof Utils.flattenComponents;
 export const guid: typeof Utils.guid;
 export const uniqueName: typeof Utils.uniqueName;
-export const MODEL_TYPES: any;
+export const MODEL_TYPES_OF_KNOWN_COMPONENTS: {
+    nestedArray: string[];
+    nestedDataArray: string[];
+    dataObject: string[];
+    object: string[];
+    map: string[];
+    content: string[];
+    string: string[];
+    number: string[];
+    boolean: string[];
+    none: string[];
+    any: string[];
+};
 export const getModelType: typeof Utils.getModelType;
-export const getComponentAbsolutePath: typeof Utils.getComponentAbsolutePath;
-export const getComponentPath: typeof Utils.getComponentPath;
+export const getComponentPath: any;
+export const setComponentScope: typeof Utils.setComponentScope;
+export const resetComponentScope: typeof Utils.resetComponentScope;
 export const isComponentNestedDataType: typeof Utils.isComponentNestedDataType;
 export const componentPath: typeof Utils.componentPath;
-export const componentChildPath: any;
-export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => Promise<void>;
-export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => void;
+export const getComponentPaths: typeof Utils.getComponentPaths;
+export const componentMatches: typeof Utils.componentMatches;
+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 getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: typeof Utils.getContextualRowPath;
 export const getContextualRowData: typeof Utils.getContextualRowData;
@@ -24,7 +35,7 @@ export const componentInfo: typeof Utils.componentInfo;
 export const eachComponent: typeof Utils.eachComponent;
 export const eachComponentAsync: typeof Utils.eachComponentAsync;
 export const getComponentData: typeof Utils.getComponentData;
-export const getComponentActualValue: typeof Utils.getComponentActualValue;
+export const getComponentActualValue: any;
 export const isLayoutComponent: typeof Utils.isLayoutComponent;
 export const matchComponent: typeof Utils.matchComponent;
 export const getComponent: typeof Utils.getComponent;

package/lib/cjs/utils/formUtils.js

@@ -1,18 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemTemplateKeys = exports.compareSelectResourceWithObjectTypeValues = exports.isSelectResourceWithObjectValue = exports.isComponentDataEmpty = exports.getEmptyValue = exports.findComponent = exports.applyFormChanges = exports.generateFormChange = exports.getStrings = exports.getValue = exports.escapeRegExCharacters = exports.formatAsCurrency = exports.parseFloatExt = exports.hasCondition = exports.removeComponent = exports.searchComponents = exports.getComponent = exports.matchComponent = exports.isLayoutComponent = exports.getComponentActualValue = exports.getComponentData = exports.eachComponentAsync = exports.eachComponent = exports.componentInfo = exports.getContextualRowData = exports.getContextualRowPath = exports.getComponentKey = exports.eachComponentData = exports.eachComponentDataAsync = exports.componentChildPath = exports.componentPath = exports.isComponentNestedDataType = exports.getComponentPath = exports.getComponentAbsolutePath = exports.getModelType = exports.MODEL_TYPES = exports.uniqueName = exports.guid = exports.flattenComponents = exports.findComponents = void 0;
+exports.getItemTemplateKeys = exports.compareSelectResourceWithObjectTypeValues = exports.isSelectResourceWithObjectValue = exports.isComponentDataEmpty = exports.getEmptyValue = exports.findComponent = exports.applyFormChanges = exports.generateFormChange = exports.getStrings = exports.getValue = exports.escapeRegExCharacters = exports.formatAsCurrency = exports.parseFloatExt = exports.hasCondition = exports.removeComponent = exports.searchComponents = exports.getComponent = exports.matchComponent = exports.isLayoutComponent = exports.getComponentActualValue = exports.getComponentData = exports.eachComponentAsync = exports.eachComponent = exports.componentInfo = exports.getContextualRowData = exports.getContextualRowPath = exports.getComponentKey = exports.eachComponentData = exports.eachComponentDataAsync = exports.findComponents = exports.getComponentValue = exports.getComponentFromPath = exports.getBestMatch = exports.componentMatches = exports.getComponentPaths = exports.componentPath = exports.isComponentNestedDataType = exports.resetComponentScope = exports.setComponentScope = exports.getComponentPath = exports.getModelType = exports.MODEL_TYPES_OF_KNOWN_COMPONENTS = exports.uniqueName = exports.guid = exports.flattenComponents = void 0;
 const core_1 = require("@formio/core");
-const { flattenComponents, guid, uniqueName, MODEL_TYPES, getModelType, getComponentAbsolutePath, getComponentPath, isComponentNestedDataType, componentPath, componentChildPath, eachComponentDataAsync, eachComponentData, getComponentKey, getContextualRowPath, getContextualRowData, componentInfo, eachComponent, eachComponentAsync, getComponentData, getComponentActualValue, isLayoutComponent, matchComponent, getComponent, searchComponents, removeComponent, hasCondition, parseFloatExt, formatAsCurrency, escapeRegExCharacters, getValue, getStrings, generateFormChange, applyFormChanges, findComponent, getEmptyValue, isComponentDataEmpty, isSelectResourceWithObjectValue, compareSelectResourceWithObjectTypeValues, getItemTemplateKeys } = core_1.Utils;
+const { flattenComponents, guid, uniqueName, MODEL_TYPES_OF_KNOWN_COMPONENTS, getModelType, getComponentPath, setComponentScope, resetComponentScope, isComponentNestedDataType, componentPath, getComponentPaths, componentMatches, getBestMatch, getComponentFromPath, getComponentValue, findComponents, eachComponentDataAsync, eachComponentData, getComponentKey, getContextualRowPath, getContextualRowData, componentInfo, eachComponent, eachComponentAsync, getComponentData, getComponentActualValue, isLayoutComponent, matchComponent, getComponent, searchComponents, removeComponent, hasCondition, parseFloatExt, formatAsCurrency, escapeRegExCharacters, getValue, getStrings, generateFormChange, applyFormChanges, findComponent, getEmptyValue, isComponentDataEmpty, isSelectResourceWithObjectValue, compareSelectResourceWithObjectTypeValues, getItemTemplateKeys } = core_1.Utils;
 exports.flattenComponents = flattenComponents;
 exports.guid = guid;
 exports.uniqueName = uniqueName;
-exports.MODEL_TYPES = MODEL_TYPES;
+exports.MODEL_TYPES_OF_KNOWN_COMPONENTS = MODEL_TYPES_OF_KNOWN_COMPONENTS;
 exports.getModelType = getModelType;
-exports.getComponentAbsolutePath = getComponentAbsolutePath;
 exports.getComponentPath = getComponentPath;
+exports.setComponentScope = setComponentScope;
+exports.resetComponentScope = resetComponentScope;
 exports.isComponentNestedDataType = isComponentNestedDataType;
 exports.componentPath = componentPath;
-exports.componentChildPath = componentChildPath;
+exports.getComponentPaths = getComponentPaths;
+exports.componentMatches = componentMatches;
+exports.getBestMatch = getBestMatch;
+exports.getComponentFromPath = getComponentFromPath;
+exports.getComponentValue = getComponentValue;
+exports.findComponents = findComponents;
 exports.eachComponentDataAsync = eachComponentDataAsync;
 exports.eachComponentData = eachComponentData;
 exports.getComponentKey = getComponentKey;
@@ -42,14 +48,3 @@ exports.isComponentDataEmpty = isComponentDataEmpty;
 exports.isSelectResourceWithObjectValue = isSelectResourceWithObjectValue;
 exports.compareSelectResourceWithObjectTypeValues = compareSelectResourceWithObjectTypeValues;
 exports.getItemTemplateKeys = getItemTemplateKeys;
-/**
- * Deprecated version of findComponents. Renamed to searchComponents.
- * @param {import('@formio/core').Component[]} components - The components to find components within.
- * @param {object} query - The query to use when searching for the components.
- * @returns {import('@formio/core').Component[]} - The result of the component that is found.
- */
-function findComponents(components, query) {
-    console.warn('formio.js/utils findComponents is deprecated. Use searchComponents instead.');
-    return searchComponents(components, query);
-}
-exports.findComponents = findComponents;

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

@@ -462,10 +462,9 @@ export function getComponentPathWithoutIndicies(path?: string): string;
 /**
  * Returns a path to the component which based on its schema
  * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property
- * @param {string} path - Path to the component
  * @returns {string} - Path to the component
  */
-export function getComponentPath(component: import('@formio/core').Component, path?: string): string;
+export function getComponentPath(component: import('@formio/core').Component): string;
 /**
  * Returns a parent component of the passed component instance skipping all the Layout components
  * @param {Component} componentInstance - The component to check for the parent.
@@ -515,7 +514,6 @@ export namespace componentValueTypes {
     let any: string;
 }
 export function interpolateErrors(component: Component, errors: FieldError[], interpolateFn: Function): [];
-import jsonLogic from 'json-logic-js';
 import ConditionOperators from './conditionOperators';
 import { Evaluator } from './Evaluator';
 export const interpolate: typeof Evaluator.interpolate;

package/lib/cjs/utils/utils.js

@@ -51,17 +51,6 @@ json_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {
 json_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {
     return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();
 });
-/**
- * Sets the path to the component and parent schema.
- * @param {import('@formio/core').Component} component - The component to set the path for.
- */
-function setPathToComponentAndPerentSchema(component) {
-    component.path = getComponentPath(component);
-    const dataParent = getDataParentComponent(component);
-    if (dataParent && typeof dataParent === 'object') {
-        dataParent.path = getComponentPath(dataParent);
-    }
-}
 /**
  * Evaluate a method.
  * @param {Function|string|object} func - The function to evaluate.
@@ -262,7 +251,7 @@ function checkSimpleConditional(component, condition, row, data, instance) {
                     const value = getComponentActualValue(path, data, row);
                     const ConditionOperator = conditionOperators_1.default[operator];
                     return ConditionOperator
-                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, path })
                         : true;
                 });
             }
@@ -270,7 +259,7 @@ function checkSimpleConditional(component, condition, row, data, instance) {
                 const value = getComponentActualValue(conditionComponentPath, data, row);
                 const СonditionOperator = conditionOperators_1.default[operator];
                 return СonditionOperator
-                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, path: conditionComponentPath })
                     : true;
             }
         });
@@ -295,12 +284,12 @@ exports.checkSimpleConditional = checkSimpleConditional;
  */
 function getComponentActualValue(compPath, data, row) {
     let value = null;
-    if (row) {
-        value = (0, formUtils_1.getValue)({ data: row }, compPath);
-    }
-    if (data && lodash_1.default.isNil(value)) {
+    if (data) {
         value = (0, formUtils_1.getValue)({ data }, compPath);
     }
+    if (row && lodash_1.default.isNil(value)) {
+        value = (0, formUtils_1.getValue)({ data: row }, compPath);
+    }
     // FOR-400 - Fix issue where falsey values were being evaluated as show=true
     if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {
         value = '';
@@ -367,22 +356,23 @@ exports.checkJsonConditional = checkJsonConditional;
  * @returns {*} - The contextual row data for the component.
  */
 function getRow(component, row, instance, conditional) {
-    var _a;
+    var _a, _b, _c;
     const condition = conditional || component.conditional;
     // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema
     if (!instance) {
         instance = lodash_1.default.cloneDeep(component);
-        setPathToComponentAndPerentSchema(instance);
     }
     const dataParent = getDataParentComponent(instance);
-    const parentPath = dataParent ? getComponentPath(dataParent) : null;
-    const isTriggerCondtionComponentPath = condition.when || !condition.conditions
-        ? (_a = condition.when) === null || _a === void 0 ? void 0 : _a.startsWith(parentPath)
-        : lodash_1.default.some(condition.conditions, cond => cond.component.startsWith(parentPath));
-    if (dataParent && isTriggerCondtionComponentPath) {
-        const newRow = {};
-        lodash_1.default.set(newRow, parentPath, row);
-        row = newRow;
+    if (dataParent) {
+        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;
+        const isTriggerCondtionComponentPath = condition.when || !condition.conditions
+            ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)
+            : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });
+        if (isTriggerCondtionComponentPath) {
+            const newRow = {};
+            lodash_1.default.set(newRow, parentPath, row);
+            row = newRow;
+        }
     }
     return row;
 }
@@ -1566,16 +1556,10 @@ exports.getComponentPathWithoutIndicies = getComponentPathWithoutIndicies;
 /**
  * Returns a path to the component which based on its schema
  * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property
- * @param {string} path - Path to the component
  * @returns {string} - Path to the component
  */
-function getComponentPath(component, path = '') {
-    var _a;
-    if (!component || !component.key || ((_a = component === null || component === void 0 ? void 0 : component._form) === null || _a === void 0 ? void 0 : _a.display) === 'wizard') { // unlike the Webform, the Wizard has the key and it is a duplicate of the panel key
-        return path;
-    }
-    path = component.isInputComponent || component.input === true ? `${component.key}${path ? '.' : ''}${path}` : path;
-    return getComponentPath(component.parent, path);
+function getComponentPath(component) {
+    return component.paths.localDataPath;
 }
 exports.getComponentPath = getComponentPath;
 /**

package/lib/cjs/widgets/CalendarWidget.js

@@ -102,14 +102,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,8 +112,7 @@ 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) {
@@ -131,7 +124,7 @@ class CalendarWidget extends InputWidget_1.default {
             }
         };
         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 +142,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 +152,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);
@@ -358,9 +351,14 @@ 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;
@@ -371,6 +369,18 @@ class CalendarWidget extends InputWidget_1.default {
                 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.
@@ -397,6 +407,10 @@ 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',
-            '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/Form.d.ts

@@ -398,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} 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

@@ -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) {

package/lib/mjs/Webform.d.ts

@@ -330,6 +330,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.
@@ -419,7 +426,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>;