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

package/dist/formio.utils.min.js.LICENSE.txt

@@ -18,9 +18,9 @@
  * MIT licensed
  */
 
-/*! @license DOMPurify 3.1.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.6/LICENSE */
+/*! @license DOMPurify 3.2.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.3/LICENSE */
 
-/*! formiojs v5.0.0 | https://unpkg.com/formiojs@5.0.0/LICENSE.txt */
+/*! formiojs v5.1.0-dev.1 | https://unpkg.com/formiojs@5.1.0-dev.1/LICENSE.txt */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
@@ -43,4 +43,4 @@
 
 //! moment.js
 
-//! version : 0.5.45
+//! version : 0.5.46

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

@@ -17,8 +17,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/cjs/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/cjs/Form.js

@@ -195,7 +195,7 @@ class Form extends Element_1.default {
     }
     /**
      * 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) {
@@ -222,8 +222,14 @@ class Form extends Element_1.default {
                     }
                     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/cjs/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>;

package/lib/cjs/Webform.js

@@ -17,7 +17,6 @@ const formUtils_1 = require("./utils/formUtils");
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
     window.global = window;
 }
-const dragula_1 = __importDefault(require("dragula"));
 // Initialize the available forms.
 Formio_1.Formio.forms = {};
 // Allow people to register components.
@@ -314,7 +313,6 @@ class Webform extends NestedDataComponent_1.default {
         // Ensure the root is set to this component.
         this.root = this;
         this.localRoot = this;
-        this.root.dragulaLib = dragula_1.default;
     }
     /* eslint-enable max-statements */
     get language() {
@@ -587,11 +585,12 @@ class Webform extends NestedDataComponent_1.default {
      * @returns {Promise} - The promise that is triggered when the form is set.
      */
     setForm(form, flags = {}) {
-        var _a, _b, _c;
+        var _a;
         const isFormAlreadySet = this._form && ((_a = this._form.components) === null || _a === void 0 ? void 0 : _a.length);
         try {
             // Do not set the form again if it has been already set
             if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {
+                this.formReadyResolve();
                 return Promise.resolve();
             }
             // Create the form.
@@ -599,13 +598,11 @@ class Webform extends NestedDataComponent_1.default {
             if (this.onSetForm) {
                 this.onSetForm(lodash_1.default.cloneDeep(this._form), form);
             }
-            if ((_c = (_b = this.parent) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.modalEdit) {
-                return Promise.resolve();
-            }
         }
         catch (err) {
             console.warn(err);
             // If provided form is not a valid JSON object, do not set it too
+            this.formReadyReject(err);
             return Promise.resolve();
         }
         // Allow the form to provide component overrides.
@@ -704,6 +701,18 @@ class Webform extends NestedDataComponent_1.default {
     set submission(submission) {
         this.setSubmission(submission);
     }
+    /**
+     * 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, flags = {}) {
+        this.submissionSet = true;
+        this.triggerChange(flags);
+        this.emit('beforeSetSubmission', submission);
+        this.setValue(submission, flags);
+    }
     /**
      * Sets a submission and returns the promise when it is ready.
      * @param {any} submission - The submission to set.
@@ -717,10 +726,7 @@ class Webform extends NestedDataComponent_1.default {
             if (resolveFlags) {
                 flags = Object.assign(Object.assign({}, flags), resolveFlags);
             }
-            this.submissionSet = true;
-            this.triggerChange(flags);
-            this.emit("beforeSetSubmission", submission);
-            this.setValue(submission, flags);
+            this.onSetSubmission(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err))
             .catch((err) => this.submissionReadyReject(err)));
@@ -731,7 +737,8 @@ class Webform extends NestedDataComponent_1.default {
         this.emit(restoreDraft ? "restoreDraftError" : "saveDraftError", errDetails || errorMessage);
     }
     saveDraft() {
-        if (!this.draftEnabled) {
+        var _a;
+        if (!this.draftEnabled || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.component.reference) === false) {
             return;
         }
         if (!this.formio) {
@@ -839,6 +846,9 @@ class Webform extends NestedDataComponent_1.default {
         return changed;
     }
     getValue() {
+        if (!this._submission) {
+            this._submission = {};
+        }
         if (!this._submission.data) {
             this._submission.data = {};
         }
@@ -878,7 +888,9 @@ class Webform extends NestedDataComponent_1.default {
         this.addComponents();
         this.on("submitButton", (options) => {
             this.submit(false, options).catch((e) => {
-                options.instance.loading = false;
+                if (options === null || options === void 0 ? void 0 : options.instance) {
+                    options.instance.loading = false;
+                }
                 return e !== false && e !== undefined && console.log(e);
             });
         }, true);
@@ -1098,29 +1110,24 @@ class Webform extends NestedDataComponent_1.default {
             return;
         }
         // Mark any components as invalid if in a custom message.
+        const componentErrors = {};
         errors.forEach((err) => {
-            const { components = [] } = err;
-            if (err.component) {
-                components.push(err.component);
+            var _a, _b;
+            const path = err.path || ((_a = err.context) === null || _a === void 0 ? void 0 : _a.path) || ((_b = err.component) === null || _b === void 0 ? void 0 : _b.key);
+            if (!componentErrors[path]) {
+                componentErrors[path] = [];
             }
-            if (err.path) {
-                components.push(err.path);
-            }
-            components.forEach((path) => {
-                const originalPath = (0, utils_1.getStringFromComponentPath)(path);
-                const component = this.getComponent(path, lodash_1.default.identity, originalPath);
-                if (err.fromServer) {
-                    if (component.serverErrors) {
-                        component.serverErrors.push(err);
-                    }
-                    else {
-                        component.serverErrors = [err];
-                    }
-                }
-                const components = lodash_1.default.compact(Array.isArray(component) ? component : [component]);
-                components.forEach((component) => component.setCustomValidity(err.message, true));
-            });
+            componentErrors[path].push(err);
         });
+        // Iterate through all of our component errors and apply them to the components.
+        for (let path in componentErrors) {
+            const component = this.getComponent(path);
+            const errors = componentErrors[path];
+            if (component) {
+                component.serverErrors = errors.filter((err) => err.fromServer);
+                component.setCustomValidity(errors, true);
+            }
+        }
         const displayedErrors = [];
         if (errors.length) {
             errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });
@@ -1312,7 +1319,7 @@ class Webform extends NestedDataComponent_1.default {
             onLine: navigator.onLine,
         });
     }
-    submitForm(options = {}) {
+    submitForm(options = {}, local = false) {
         this.clearServerErrors();
         return new Promise((resolve, reject) => {
             // Read-only forms should never submit.
@@ -1338,6 +1345,7 @@ class Webform extends NestedDataComponent_1.default {
                             return reject("Invalid Submission");
                         }
                         const errors = this.validate(submission.data, {
+                            local,
                             dirty: true,
                             silentCheck: false,
                             process: "submit",
@@ -1352,12 +1360,13 @@ class Webform extends NestedDataComponent_1.default {
                     console.error(err);
                 }
                 this.everyComponent((comp) => {
+                    var _a, _b;
                     if (submission._vnote && comp.type === "form" && comp.component.reference) {
-                        lodash_1.default.get(submission.data, comp.path, {})._vnote = submission._vnote;
+                        lodash_1.default.get(submission.data, local ? (_a = comp.paths) === null || _a === void 0 ? void 0 : _a.localDataPath : comp.path, {})._vnote = submission._vnote;
                     }
                     const { persistent } = comp.component;
                     if (persistent === "client-only") {
-                        lodash_1.default.unset(submission.data, comp.path);
+                        lodash_1.default.unset(submission.data, local ? (_b = comp.paths) === null || _b === void 0 ? void 0 : _b.localDataPath : comp.path);
                     }
                 });
                 this.hook("customValidation", Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {
@@ -1524,7 +1533,7 @@ class Webform extends NestedDataComponent_1.default {
             return;
         }
         const captchaComponent = [];
-        (0, formUtils_1.eachComponent)(this.components, (component) => {
+        this.eachComponent((component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }

package/lib/cjs/WebformBuilder.js

@@ -208,7 +208,8 @@ class WebformBuilder extends Component_1.default {
             params: {
                 type: 'resource',
                 limit: 1000000,
-                select: '_id,title,name,components'
+                select: '_id,title,name,components',
+                'tags__ne': 'noBuilderResource'
             }
         };
         if (this.options && this.options.resourceTag) {
@@ -807,31 +808,18 @@ class WebformBuilder extends Component_1.default {
         // Show an error if siblings are disabled for a component and such a component already exists.
         const compKey = (group === 'resource') ? `component-${key}` : key;
         const draggableComponent = ((_a = this.groups[group]) === null || _a === void 0 ? void 0 : _a.components[compKey]) || {};
-        if (draggableComponent.disableSiblings) {
+        if (draggableComponent.disableSiblings || draggableComponent.uniqueComponent) {
             let isCompAlreadyExists = false;
             (0, formUtils_1.eachComponent)(this.webform.components, (component) => {
-                if (component.type === draggableComponent.schema.type) {
+                if ((draggableComponent.disableSiblings && component.type === draggableComponent.schema.type) ||
+                    (draggableComponent.uniqueComponent && component.component.key === draggableComponent.schema.key)) {
                     isCompAlreadyExists = true;
                     return;
                 }
             }, true);
             if (isCompAlreadyExists) {
                 this.webform.redraw();
-                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.key} component to one page.`);
-                return;
-            }
-        }
-        if (draggableComponent.uniqueComponent) {
-            let isCompAlreadyExists = false;
-            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {
-                if (component.key === draggableComponent.schema.key) {
-                    isCompAlreadyExists = true;
-                    return;
-                }
-            }, true);
-            if (isCompAlreadyExists) {
-                this.webform.redraw();
-                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);
+                this.webform.setAlert('danger', `You cannot add more than one ${lodash_1.default.get(draggableComponent, draggableComponent.uniqueComponent ? 'title' : 'key')} component to one page.`);
                 return;
             }
         }
@@ -1124,20 +1112,12 @@ class WebformBuilder extends Component_1.default {
     findRepeatablePaths() {
         const repeatablePaths = [];
         const keys = new Map();
-        (0, formUtils_1.eachComponent)(this.form.components, (comp, path) => {
-            if (!comp.key) {
-                return;
-            }
-            if (keys.has(comp.key)) {
-                if (keys.get(comp.key).includes(path)) {
-                    repeatablePaths.push(path);
-                }
-                else {
-                    keys.set(comp.key, [...keys.get(comp.key), path]);
-                }
+        (0, formUtils_1.eachComponent)(this.form.components, (comp, path, components, parent, paths) => {
+            if (keys.has(paths.dataPath)) {
+                repeatablePaths.push(paths.dataPath);
             }
             else {
-                keys.set(comp.key, [path]);
+                keys.set(paths.dataPath, true);
             }
         }, true);
         return repeatablePaths;
@@ -1270,7 +1250,8 @@ class WebformBuilder extends Component_1.default {
                     helplinks: this.helplinks,
                 }));
                 this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
-                this.updateComponent((_a = this.editForm.submission.data) !== null && _a !== void 0 ? _a : component);
+                const editFormData = (_a = this.editForm.submission) === null || _a === void 0 ? void 0 : _a.data;
+                this.updateComponent((editFormData === null || editFormData === void 0 ? void 0 : editFormData.componentJson) || editFormData || component);
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });

package/lib/cjs/Wizard.js

@@ -375,11 +375,11 @@ class Wizard extends Webform_1.default {
         this.emit('wizardPageSelected', this.pages[index], index);
     }
     attachHeader() {
-        var _a;
+        var _a, _b;
         const isAllowPrevious = this.isAllowPrevious();
-        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], this.currentPanel.tooltip);
+        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);
         if (this.isBreadcrumbClickable() || isAllowPrevious) {
-            (_a = this.refs[`${this.wizardKey}-link`]) === null || _a === void 0 ? void 0 : _a.forEach((link, index) => {
+            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {
                 if (!isAllowPrevious || index <= this.enabledIndex) {
                     this.addEventListener(link, 'click', (event) => {
                         this.emit('wizardNavigationClicked', this.pages[index]);
@@ -728,7 +728,7 @@ class Wizard extends Webform_1.default {
         var _a, _b;
         const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);
         // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
-        return (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.currentPage.parent.data, flags);
+        return (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.root.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -903,13 +903,6 @@ class Wizard extends Webform_1.default {
             this.redraw();
         }
     }
-    redraw() {
-        var _a, _b;
-        if ((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.modalEdit) {
-            return this.parent.redraw();
-        }
-        return super.redraw();
-    }
     rebuild() {
         const currentPage = this.page;
         const setCurrentPage = () => this.setPage(currentPage);

package/lib/cjs/components/Components.d.ts

@@ -256,13 +256,6 @@ export default class Components {
     static setComponents(comps: any): void;
     static addComponent(name: any, comp: any): void;
     static setComponent(name: any, comp: any): void;
-    /**
-     * Return a path of component's value.
-     * @param {Component} component - The component instance.
-     * @returns {string} - The component's value path.
-     */
-    static getComponentPath(component: Component): string;
     static create(component: any, options: any, data: any): any;
 }
 import BaseEditForm from './_classes/component/Component.form';
-import Component from './_classes/component/Component';

package/lib/cjs/components/Components.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Component_1 = __importDefault(require("./_classes/component/Component"));
 const utils_1 = __importDefault(require("./_classes/component/editForm/utils"));
 const Component_form_1 = __importDefault(require("./_classes/component/Component.form"));
-const utils_2 = require("../utils/utils");
 const lodash_1 = __importDefault(require("lodash"));
 class Components {
     static set EditFormUtils(value) {
@@ -49,35 +48,6 @@ class Components {
     static setComponent(name, comp) {
         Components.components[name] = comp;
     }
-    /**
-     * Return a path of component's value.
-     * @param {Component} component - The component instance.
-     * @returns {string} - The component's value path.
-     */
-    static getComponentPath(component) {
-        var _a;
-        let path = '';
-        const componentKey = (0, utils_2.getComponentKey)(component.component);
-        if (componentKey) {
-            let thisPath = ((_a = component.options) === null || _a === void 0 ? void 0 : _a.parent) || component;
-            while (thisPath && !thisPath.allowData && thisPath.parent) {
-                thisPath = thisPath.parent;
-            }
-            // TODO: any component that is nested in e.g. a Data Grid or an Edit Grid is going to receive a row prop; the problem
-            // is that options.row is passed to each further nested component, which results in erroneous paths like
-            // `editGrid[0].container[0].textField` rather than `editGrid[0].container.textField`. This should be adapted for other
-            // components with a tree-like data model
-            const rowIndex = component.row;
-            const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
-            path = `${thisPath.path}${rowIndexPath}.`;
-            if (rowIndexPath && (0, utils_2.getModelType)(thisPath) === 'nestedDataArray') {
-                path = `${path}data.`;
-            }
-            path += componentKey;
-            return lodash_1.default.trim(path, '.');
-        }
-        return path;
-    }
     static create(component, options, data) {
         let comp = null;
         if (component.type && Components.components.hasOwnProperty(component.type)) {
@@ -102,9 +72,7 @@ class Components {
         else {
             comp = new Component_1.default(component, options, data);
         }
-        const path = Components.getComponentPath(comp);
-        if (path) {
-            comp.path = path;
+        if (comp.path) {
             comp.componentsMap[comp.path] = comp;
         }
         return comp;

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

@@ -42,14 +42,13 @@ declare class Component extends Element {
      */
     private _hasCondition;
     /**
-     * References to dom elements
+     * The row index for this component.
      */
-    refs: {};
+    _rowIndex: number | undefined;
     /**
-     * The data path to this specific component instance.
-     * @type {string}
+     * References to dom elements
      */
-    path: string;
+    refs: {};
     /**
      * An array of all the children components errors.
      */
@@ -114,7 +113,19 @@ declare class Component extends Element {
      * @type {Component}
      */
     parent: Component;
+    /**
+     * The component paths for this component.
+     * @type {import('@formio/core').ComponentPaths} - The component paths.
+     */
+    paths: import('@formio/core').ComponentPaths;
     _path: string;
+    /**
+     * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.
+     * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
+     * conditionallyHidden separately from "regular" visibility.
+     */
+    _parentConditionallyHidden: any;
+    _conditionallyHidden: any;
     /**
      * Determines if this component is visible, or not.
      */
@@ -158,7 +169,7 @@ declare class Component extends Element {
      * @type {*}
      */
     info: any;
-    get componentsMap(): any;
+    get componentsMap(): object;
     set data(value: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -182,6 +193,17 @@ declare class Component extends Element {
      * @returns {boolean} - TRUE if the component is disabled.
      */
     get disabled(): boolean;
+    /**
+     * Set Row Index to row and update each component.
+     * @param {number} value - The row index.
+     * @returns {void}
+     */
+    set rowIndex(value: number);
+    /**
+     * Get Row Index.
+     * @returns {number} - The row index.
+     */
+    get rowIndex(): number;
     afterComponentAssign(): void;
     createAddon(addonConfiguration: any): any;
     get shouldDisabled(): any;
@@ -190,6 +212,8 @@ declare class Component extends Element {
     get hasInput(): any;
     get defaultSchema(): any;
     get key(): any;
+    set path(path: string | undefined);
+    get path(): string | undefined;
     set parentVisible(value: any);
     get parentVisible(): any;
     set parentDisabled(value: boolean);
@@ -207,12 +231,20 @@ declare class Component extends Element {
      * @returns {boolean} - Whether the component is visible or not.
      */
     get visible(): boolean;
+    get conditionallyHidden(): any;
+    /**
+     * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).
+     * @param {object} data - The data object to evaluate the condition against.
+     * @param {object} row - The row object to evaluate the condition against.
+     * @returns {boolean} - Whether the component is conditionally hidden.
+     */
+    checkConditionallyHidden(data?: object, row?: object): boolean;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;
     get fullMode(): boolean;
     get builderMode(): boolean;
-    get calculatedPath(): string;
+    get calculatedPath(): string | undefined;
     get labelPosition(): any;
     get labelWidth(): any;
     get labelMargin(): any;
@@ -343,6 +375,12 @@ declare class Component extends Element {
      * @param {string} template - The template to use for the modal dialog.
      */
     setOpenModalElement(template?: string): void;
+    /**
+     * Renders a modal preview template and returns the markup as a string
+     * @param {object|null|undefined} ctx - The rendering context
+     * @returns {string} - The modal preview markup
+     */
+    renderModalPreview(ctx: object | null | undefined): string;
     /**
      * Returns the modal preview template.
      * @returns {string} - The modal preview template.
@@ -362,6 +400,13 @@ declare class Component extends Element {
      * @returns {string} - The rendered HTML string of a component.
      */
     render(children?: string, topLevel?: boolean): string;
+    /**
+     * Creates the tooltip instance using tippy.js and returns it
+     * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
+     * @param {object|null|undefined} settings - tippy.js options
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
+     */
+    createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
     /**
      * Attaches all the tooltips provided the refs object.
      * @param {object} toolTipsRefs - The refs for the tooltips within your template.
@@ -817,6 +862,7 @@ declare class Component extends Element {
     quill: any;
     get shouldSanitizeValue(): boolean;
     addAce(element: any, settings: any, onChange: any): any;
+    getDragula(): Promise<any>;
     get tree(): any;
     /**
      * The empty value for this component.