@formio/js 5.2.4-rc.0 → 5.2.5

package/lib/cjs/Wizard.js

@@ -35,9 +35,7 @@ class Wizard extends Webform_1.default {
         this.page = 0;
         this.currentPanel = null;
         this.currentNextPage = 0;
-        this._seenPages = [
-            0,
-        ];
+        this._seenPages = [0];
         this.subWizards = [];
         this.allPages = [];
         this.lastPromise = Promise.resolve();
@@ -55,7 +53,8 @@ class Wizard extends Webform_1.default {
     getPages(args = {}) {
         const { all = false } = args;
         const pages = this.hasSubWizards ? this.components : this.pages;
-        const filteredPages = pages.filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));
+        const filteredPages = pages
+            .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));
         return filteredPages;
     }
     get hasSubWizards() {
@@ -80,7 +79,9 @@ class Wizard extends Webform_1.default {
         });
     }
     getComponents() {
-        return this.submitting ? this.getPages({ all: this.isLastPage() }) : super.getComponents();
+        return this.submitting
+            ? this.getPages({ all: this.isLastPage() })
+            : super.getComponents();
     }
     resetValue() {
         this.getPages({ all: true }).forEach((page) => page.resetValue());
@@ -93,10 +94,10 @@ class Wizard extends Webform_1.default {
             showPrevious: true,
             showNext: true,
             showSubmit: true,
-            showCancel: !this.options.readOnly,
+            showCancel: !this.options.readOnly
         });
         this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {
-            clickable: true,
+            clickable: true
         });
         this.options.allowPrevious = this.options.allowPrevious || false;
         this.page = 0;
@@ -106,7 +107,7 @@ class Wizard extends Webform_1.default {
             this.component = this.pages[this.page].component;
         }
         this.on('subWizardsUpdated', (subForm) => {
-            const subWizard = this.subWizards.find((subWizard) => { var _a; return (subForm === null || subForm === void 0 ? void 0 : subForm.id) && ((_a = subWizard.subForm) === null || _a === void 0 ? void 0 : _a.id) === (subForm === null || subForm === void 0 ? void 0 : subForm.id); });
+            const subWizard = this.subWizards.find(subWizard => { var _a; return (subForm === null || subForm === void 0 ? void 0 : subForm.id) && ((_a = subWizard.subForm) === null || _a === void 0 ? void 0 : _a.id) === (subForm === null || subForm === void 0 ? void 0 : subForm.id); });
             if (this.subWizards.length && subWizard) {
                 subWizard.subForm.setValue(subForm._submission, {}, true);
                 this.establishPages();
@@ -130,7 +131,7 @@ class Wizard extends Webform_1.default {
             { name: 'cancel', method: 'cancel' },
             { name: 'previous', method: 'prevPage' },
             { name: 'next', method: 'nextPage' },
-            { name: 'submit', method: 'submit' },
+            { name: 'submit', method: 'submit' }
         ].forEach((button) => {
             if (this.hasButton(button.name)) {
                 buttons[button.name] = button;
@@ -144,9 +145,9 @@ class Wizard extends Webform_1.default {
             'cancel',
             'previous',
             'next',
-            'submit',
+            'submit'
         ];
-        return ((_c = (_b = (_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.wizardButtonOrder) === null || _b === void 0 ? void 0 : _b.toLowerCase().split(', ')) !== null && _c !== void 0 ? _c : defaultButtonOrder);
+        return (_c = (_b = (_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.wizardButtonOrder) === null || _b === void 0 ? void 0 : _b.toLowerCase().split(', ')) !== null && _c !== void 0 ? _c : defaultButtonOrder;
     }
     get renderContext() {
         var _a, _b;
@@ -155,9 +156,7 @@ class Wizard extends Webform_1.default {
             wizardKey: this.wizardKey,
             isBreadcrumbClickable: this.isBreadcrumbClickable(),
             isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',
-            panels: this.allPages.length
-                ? this.allPages.map((page) => page.component)
-                : this.pages.map((page) => page.component),
+            panels: this.allPages.length ? this.allPages.map(page => page.component) : this.pages.map(page => page.component),
             buttons: this.buttons,
             currentPage: this.page,
             buttonOrder: this.buttonOrder,
@@ -167,10 +166,8 @@ class Wizard extends Webform_1.default {
         const currentPanel = this.currentPanel;
         if (currentPanel && currentPanel.buttonSettings) {
             Object.keys(currentPanel.buttonSettings).forEach(() => {
-                Object.keys(ctx.buttons).forEach((key) => {
-                    if ((typeof currentPanel.buttonSettings[key] !== 'undefined' &&
-                        !currentPanel.buttonSettings[key]) ||
-                        ctx.isSubForm) {
+                Object.keys(ctx.buttons).forEach(key => {
+                    if (typeof currentPanel.buttonSettings[key] !== 'undefined' && !currentPanel.buttonSettings[key] || ctx.isSubForm) {
                         ctx.buttons[key] = null;
                     }
                 });
@@ -190,7 +187,7 @@ class Wizard extends Webform_1.default {
     render() {
         const ctx = this.renderContext;
         if (this.component.id) {
-            ctx.panels.forEach((panel) => {
+            ctx.panels.forEach(panel => {
                 if (panel.id === this.component.id) {
                     this.currentPanel = panel;
                     ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);
@@ -207,7 +204,7 @@ class Wizard extends Webform_1.default {
             wizardNav, components: this.renderComponents([
                 ...this.prefixComps,
                 ...this.currentPage.components,
-                ...this.suffixComps,
+                ...this.suffixComps
             ]) }), this.builderMode ? 'builder' : 'form');
     }
     redrawNavigation() {
@@ -236,7 +233,7 @@ class Wizard extends Webform_1.default {
                 headerElement = this.element.querySelector(`#${this.wizardKey}-header`);
                 this.loadRefs(headerElement, {
                     [`${this.wizardKey}-link`]: 'multiple',
-                    [`${this.wizardKey}-tooltip`]: 'multiple',
+                    [`${this.wizardKey}-tooltip`]: 'multiple'
                 });
                 this.attachHeader();
             }
@@ -260,7 +257,7 @@ class Wizard extends Webform_1.default {
             [`${this.wizardKey}-next`]: 'single',
             [`${this.wizardKey}-submit`]: 'single',
             [`${this.wizardKey}-link`]: 'multiple',
-            [`${this.wizardKey}-tooltip`]: 'multiple',
+            [`${this.wizardKey}-tooltip`]: 'multiple'
         });
         if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {
             this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;
@@ -295,7 +292,7 @@ class Wizard extends Webform_1.default {
     }
     isBreadcrumbClickable() {
         let currentPage = null;
-        this.pages.map((page) => {
+        this.pages.map(page => {
             if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {
                 currentPage = page;
             }
@@ -310,7 +307,7 @@ class Wizard extends Webform_1.default {
     }
     isAllowPrevious() {
         let currentPage = null;
-        this.pages.map((page) => {
+        this.pages.map(page => {
             if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {
                 currentPage = page;
             }
@@ -358,12 +355,10 @@ class Wizard extends Webform_1.default {
                 buttonElement.setAttribute('disabled', 'disabled');
                 this.setLoading(buttonElement, true);
                 // Call the button method, then re-enable the button.
-                this[button.method]()
-                    .then(() => {
+                this[button.method]().then(() => {
                     buttonElement.removeAttribute('disabled');
                     this.setLoading(buttonElement, false);
-                })
-                    .catch(() => {
+                }).catch(() => {
                     buttonElement.removeAttribute('disabled');
                     this.setLoading(buttonElement, false);
                 });
@@ -422,24 +417,15 @@ class Wizard extends Webform_1.default {
         // Get all components including all nested components and line up in the correct order
         const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {
             const nestedPages = [];
-            const dataArrayComponents = [
-                'datagrid',
-                'editgrid',
-                'dynamicWizard',
-            ];
-            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm)
-                ? this.getSortedComponents(nestedComp.subForm)
-                : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];
-            const visibleComponents = currentComponents.filter((comp) => comp._visible);
-            const filteredComponents = visibleComponents.filter((comp) => !dataArrayComponents.includes(comp.component.type) &&
-                (comp.type !== 'form' || comp.isNestedWizard));
-            const additionalComponents = currentComponents.filter((comp) => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });
+            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];
+            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm) ? this.getSortedComponents(nestedComp.subForm) : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];
+            const visibleComponents = currentComponents.filter(comp => comp._visible);
+            const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));
+            const additionalComponents = currentComponents.filter(comp => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });
             let hasNested = false;
             (0, utils_1.eachComponent)(filteredComponents, (comp) => {
                 if (comp && comp.component) {
-                    if (comp.component.type === 'panel' &&
-                        (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) &&
-                        !getAllComponents(comp, compsArr, false)) {
+                    if (comp.component.type === 'panel' && (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) && !getAllComponents(comp, compsArr, false)) {
                         if (pushAllowed) {
                             this.setRootPanelId(comp);
                             nestedPages.push(comp);
@@ -488,11 +474,10 @@ class Wizard extends Webform_1.default {
         this.allPages = allComponents;
     }
     getSortedComponents({ components, originalComponents }) {
-        // sorts components if they were shuffled after the conditional logic
         const currentComponents = [];
         const currentPages = [];
         if (components && components.length) {
-            components.map((page) => {
+            components.map(page => {
                 if (page.component.type === 'panel') {
                     currentPages[page.component.key || page.component.title] = page;
                 }
@@ -526,9 +511,9 @@ class Wizard extends Webform_1.default {
         this.suffixComps = [];
         const visible = [];
         const currentPages = {};
-        const pageOptions = Object.assign(Object.assign({}, lodash_1.default.clone(this.options)), (this.parent ? { root: this } : {}));
+        const pageOptions = Object.assign(Object.assign({}, (lodash_1.default.clone(this.options))), (this.parent ? { root: this } : {}));
         if (this.components && this.components.length) {
-            this.components.forEach((page) => {
+            this.components.forEach(page => {
                 if (page.component.type === 'panel') {
                     currentPages[page.component.key || page.component.title] = page;
                 }
@@ -563,7 +548,7 @@ class Wizard extends Webform_1.default {
                         page.visible = isVisible;
                         this.pages.push(page);
                         page.eachComponent((component) => {
-                            component.page = this.pages.length - 1;
+                            component.page = (this.pages.length - 1);
                         });
                     }
                 }
@@ -605,7 +590,7 @@ class Wizard extends Webform_1.default {
                 const pageFromPages = this.pages[num];
                 const pageFromComponents = this.components[num];
                 if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {
-                    parentNum = this.components.findIndex((comp) => {
+                    parentNum = this.components.findIndex(comp => {
                         var _a, _b;
                         return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);
                     });
@@ -617,9 +602,7 @@ class Wizard extends Webform_1.default {
             return this.redraw().then(() => {
                 this.checkData(this.submission.data);
                 this.triggerCaptcha(this.currentPage.components);
-                const errors = this.submitted
-                    ? this.validate(this.localData, { dirty: true })
-                    : this.validateCurrentPage();
+                const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
                 if (this.alert) {
                     this.showErrors(errors, true, true);
                 }
@@ -643,9 +626,7 @@ class Wizard extends Webform_1.default {
         }
     }
     get currentPage() {
-        return this.pages && this.pages.length >= this.page
-            ? this.pages[this.page]
-            : { components: [] };
+        return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };
     }
     getNextPage() {
         var _a;
@@ -654,13 +635,13 @@ class Wizard extends Webform_1.default {
             const form = this.pages[this.page].component;
             // Check conditional nextPage
             if (form) {
-                const page = this.pages.length > this.page + 1 && !this.showAllErrors ? this.page + 1 : -1;
+                const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;
                 if (form.nextPage) {
                     const next = this.evaluate(form.nextPage, {
                         next: page,
                         data,
                         page,
-                        form,
+                        form
                     }, 'next');
                     if (next === null) {
                         this.currentNextPage = null;
@@ -723,9 +704,7 @@ class Wizard extends Webform_1.default {
         }
         // Validate the form before going to the next page
         const currentPageErrors = this.validateCurrentPage({ dirty: true });
-        const errors = this.submitted
-            ? this.validate(this.localData, { dirty: true })
-            : currentPageErrors;
+        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;
         // allow going to the next page if the current page is valid, even if there are form level errors
         if (currentPageErrors.length === 0) {
             this.checkData(this.submission.data);
@@ -746,13 +725,13 @@ class Wizard extends Webform_1.default {
         }
     }
     validateCurrentPage(flags = {}) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         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
         if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {
-            return (_c = this.currentPage) === null || _c === void 0 ? void 0 : _c.parent.validateComponents(components, this.root.data, flags);
+            return (_c = this.currentPage) === null || _c === void 0 ? void 0 : _c.parent.validateComponents(components, (_d = this.root) === null || _d === void 0 ? void 0 : _d.data, flags);
         }
-        return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.validateComponents(components, this.root ? this.root.data : this.data, flags);
+        return (_e = this.currentPage) === null || _e === void 0 ? void 0 : _e.validateComponents(components, this.root ? this.root.data : this.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -799,14 +778,14 @@ class Wizard extends Webform_1.default {
         this.originalComponents = [];
         this.component.components.map((item) => {
             if (item.type === 'panel') {
-                item.key = (0, utils_1.uniqueKey)(pageKeys, item.key || 'panel');
+                item.key = (0, utils_1.uniqueKey)(pageKeys, (item.key || 'panel'));
                 pageKeys[item.key] = true;
                 if (this.wizard.full) {
                     this.options.show = this.options.show || {};
                     this.options.show[item.key] = true;
                 }
-                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full') &&
-                    !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {
+                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')
+                    && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {
                     this.options.show = Object.assign({}, (this.originalOptions.show || {}));
                 }
             }
@@ -818,11 +797,9 @@ class Wizard extends Webform_1.default {
                 title: 'Page 1',
                 label: 'Page 1',
                 key: 'page1',
-                components: this.component.components,
+                components: this.component.components
             };
-            this.component.components = [
-                newPage,
-            ];
+            this.component.components = [newPage];
             this.originalComponents.push(lodash_1.default.clone(newPage));
         }
     }
@@ -833,8 +810,7 @@ class Wizard extends Webform_1.default {
         return super.setForm(form, flags);
     }
     onSetForm(clonedForm, initialForm) {
-        this.component.components =
-            (this.parent ? initialForm.components : clonedForm.components) || [];
+        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];
         this.setComponentSchema();
     }
     setEditMode(submission) {
@@ -865,26 +841,23 @@ class Wizard extends Webform_1.default {
         return changed;
     }
     isClickable(page, index) {
-        return (this.page !== index &&
-            (0, utils_1.firstNonNil)([
-                lodash_1.default.get(page, 'breadcrumbClickable'),
-                this.options.breadcrumbSettings.clickable,
-            ]));
+        return this.page !== index && (0, utils_1.firstNonNil)([
+            lodash_1.default.get(page, 'breadcrumbClickable'),
+            this.options.breadcrumbSettings.clickable
+        ]);
     }
     hasButton(name, nextPage = this.getNextPage()) {
         // get page options with global options as default values
-        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext, } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});
+        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});
         switch (name) {
             case 'previous':
-                return previous && this.getPreviousPage() > -1;
+                return previous && (this.getPreviousPage() > -1);
             case 'next':
-                return next && nextPage !== null && nextPage !== -1;
+                return next && (nextPage !== null) && (nextPage !== -1);
             case 'cancel':
                 return cancel && !this.options.readOnly;
             case 'submit':
-                return (submit &&
-                    !this.options.readOnly &&
-                    (nextPage === null || this.page === this.pages.length - 1));
+                return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));
             default:
                 return true;
         }
@@ -894,7 +867,8 @@ class Wizard extends Webform_1.default {
             // Some panels have the same key....
             return `${page.key}-${page.title}`;
         }
-        else if (page.components && page.components.length > 0) {
+        else if (page.components &&
+            page.components.length > 0) {
             return this.pageId(page.components[0]);
         }
         else {
@@ -905,11 +879,7 @@ class Wizard extends Webform_1.default {
         var _a;
         super.onChange(flags, changed, modified, changes);
         // The onChange loop doesn't need all components for wizards
-        const errors = (flags === null || flags === void 0 ? void 0 : flags.noValidate)
-            ? []
-            : this.submitted
-                ? this.validate(this.localData, { dirty: true })
-                : this.validateCurrentPage();
+        const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
         if (this.alert) {
             this.showErrors(errors, true, true);
         }
@@ -920,10 +890,8 @@ class Wizard extends Webform_1.default {
         const newPanels = this.pages;
         const currentNextPage = this.currentNextPage;
         const panelsUpdated = !lodash_1.default.isEqual(newPanels, currentPanels);
-        if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.id) &&
-            this.pages.length &&
-            (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
-            const newIndex = this.pages.findIndex((page) => page.id === this.currentPanel.id);
+        if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.id) && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
+            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);
             if (newIndex !== -1)
                 this.setPage(newIndex);
         }
@@ -948,7 +916,9 @@ class Wizard extends Webform_1.default {
             this.setCustomValidity('');
             return true;
         }
-        const components = !currentPageOnly || this.isLastPage() ? this.getComponents() : this.currentPage.components;
+        const components = !currentPageOnly || this.isLastPage()
+            ? this.getComponents()
+            : this.currentPage.components;
         return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {
@@ -961,7 +931,7 @@ class Wizard extends Webform_1.default {
             while (!(topPanel.parent instanceof Wizard)) {
                 topPanel = topPanel.parent;
             }
-            const pageIndex = this.pages.findIndex((page) => page.id === topPanel.id);
+            const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);
             if (pageIndex >= 0) {
                 const page = this.pages[pageIndex];
                 if (page && page !== this.currentPage) {

package/lib/cjs/WizardBuilder.js

@@ -32,10 +32,10 @@ class WizardBuilder extends WebformBuilder_1.default {
         for (const group in this.groups) {
             if (this.groups[group] && this.groups[group].components) {
                 this.groups[group].componentOrder = Object.keys(this.groups[group].components)
-                    .map((key) => this.groups[group].components[key])
-                    .filter((component) => component && !component.ignore)
+                    .map(key => this.groups[group].components[key])
+                    .filter(component => component && !component.ignore)
                     .sort((a, b) => a.weight - b.weight)
-                    .map((component) => component.key);
+                    .map(component => component.key);
             }
         }
         const originalRenderComponentsHook = this.options.hooks.renderComponents;
@@ -88,16 +88,14 @@ class WizardBuilder extends WebformBuilder_1.default {
         return remove;
     }
     allowDrop(element) {
-        return this.webform && this.webform.refs && this.webform.refs.webform === element
-            ? false
-            : true;
+        return (this.webform && this.webform.refs && this.webform.refs.webform === element) ? false : true;
     }
     get pages() {
         return lodash_1.default.filter(this._form.components, { type: 'panel' });
     }
     get currentPage() {
         const pages = this.pages;
-        return pages && pages.length >= this.page ? pages[this.page] : null;
+        return (pages && (pages.length >= this.page)) ? pages[this.page] : null;
     }
     setForm(value) {
         this._form = value;
@@ -106,12 +104,11 @@ class WizardBuilder extends WebformBuilder_1.default {
         }
         if (this.pages.length === 0) {
             const components = this._form.components.filter((component) => component.type !== 'button');
-            this._form.components = [
-                this.getPageConfig(1, components),
-            ];
+            this._form.components = [this.getPageConfig(1, components)];
         }
         else {
-            const components = this._form.components.filter((component) => component.type !== 'button' || component.action !== 'submit');
+            const components = this._form.components
+                .filter((component) => component.type !== 'button' || component.action !== 'submit');
             this._form.components = components;
         }
         this.rebuild();
@@ -142,7 +139,7 @@ class WizardBuilder extends WebformBuilder_1.default {
                         group,
                         groupKey: group.key,
                         groupId: `group-container-${groupKey}`,
-                        subgroups: [],
+                        subgroups: []
                     })),
                 })),
             }),
@@ -159,14 +156,13 @@ class WizardBuilder extends WebformBuilder_1.default {
             page.parentNode.dragInfo = { index };
         });
         if (this.dragulaLib) {
-            this.navigationDragula = this.dragulaLib([
-                this.element.querySelector('.wizard-pages'),
-            ], {
-                moves: (el) => !el.classList.contains('wizard-add-page'),
+            this.navigationDragula = this.dragulaLib([this.element.querySelector('.wizard-pages')], {
+                moves: (el) => (!el.classList.contains('wizard-add-page')),
                 accepts: (el, target, source, sibling) => (sibling ? true : false),
-            }).on('drop', this.onReorder.bind(this));
+            })
+                .on('drop', this.onReorder.bind(this));
         }
-        this.refs.addPage.forEach((link) => {
+        this.refs.addPage.forEach(link => {
             this.addEventListener(link, 'click', (event) => {
                 event.preventDefault();
                 this.addPage();
@@ -193,12 +189,8 @@ class WizardBuilder extends WebformBuilder_1.default {
         this.webform.setForm({
             display: 'form',
             type: 'form',
-            components: page
-                ? [
-                    page,
-                ]
-                : [],
-            controller: ((_a = this._form) === null || _a === void 0 ? void 0 : _a.controller) || '',
+            components: page ? [page] : [],
+            controller: ((_a = this._form) === null || _a === void 0 ? void 0 : _a.controller) || ''
         }, { keepAsReference: true });
         return this.redraw();
     }
@@ -206,7 +198,7 @@ class WizardBuilder extends WebformBuilder_1.default {
         const newPage = page && page.schema ? (0, utils_1.fastCloneDeep)(page.schema) : this.getPageConfig(this.pages.length + 1);
         builder_1.default.uniquify(this._form.components, newPage);
         this._form.components.push(newPage);
-        this.emitSaveComponentEvent(newPage, newPage, this._form, 'components', this._form.components.length - 1, true, newPage);
+        this.emitSaveComponentEvent(newPage, newPage, this._form, 'components', (this._form.components.length - 1), true, newPage);
         this.emit('change', this._form);
         return this.rebuild();
     }
@@ -236,7 +228,7 @@ class WizardBuilder extends WebformBuilder_1.default {
         }
         const oldPosition = element.dragInfo.index;
         //should drop at next sibling position; no next sibling means drop to last position
-        const newPosition = sibling && sibling.dragInfo ? sibling.dragInfo.index : this.pages.length;
+        const newPosition = (sibling && sibling.dragInfo ? sibling.dragInfo.index : this.pages.length);
         const movedBelow = newPosition > oldPosition;
         const formComponents = (0, utils_1.fastCloneDeep)(this._form.components);
         const draggedRowData = this._form.components[oldPosition];
@@ -269,7 +261,7 @@ class WizardBuilder extends WebformBuilder_1.default {
         if (component instanceof WizardBuilder) {
             return;
         }
-        if (this._form.components.find((comp) => lodash_1.default.isEqual(component.component, comp))) {
+        if (this._form.components.find(comp => lodash_1.default.isEqual(component.component, comp))) {
             this.addPage(component);
         }
         else {

package/lib/cjs/addons/FormioAddon.js

@@ -12,7 +12,7 @@ class FormioAddon extends Element_1.default {
             name: 'formioAddon',
             components: [],
             label: 'Formio Addon',
-            defaultSettings: {},
+            defaultSettings: {}
         };
     }
     get defaultSettings() {