@formio/js 5.1.0-dev.6048.569bfc1 → 5.1.0-dev.6048.c77fe06
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/formio.form.js +1 -1
- package/dist/formio.form.min.js +1 -1
- package/dist/formio.full.js +1 -1
- package/dist/formio.full.min.js +1 -1
- package/lib/cjs/Wizard.js +5 -2
- package/lib/mjs/Wizard.js +4 -1
- package/package.json +1 -1
package/dist/formio.form.js
CHANGED
@@ -4776,7 +4776,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4776
4776
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
4777
4777
|
|
4778
4778
|
"use strict";
|
4779
|
-
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass Wizard extends Webform_1.default {\n /**\n * Constructor for wizard-based forms.\n * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.\n * - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.\n * - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.\n * - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.\n */\n constructor(elementOrOptions = undefined, _options = undefined) {\n let element, options;\n if (elementOrOptions instanceof HTMLElement || _options) {\n element = elementOrOptions;\n options = _options || {};\n }\n else {\n options = elementOrOptions || {};\n }\n options.display = 'wizard';\n super(element, options);\n this.pages = [];\n this.prefixComps = [];\n this.suffixComps = [];\n this.components = [];\n this.originalComponents = [];\n this.page = 0;\n this.currentPanel = null;\n this.currentPanels = null;\n this.currentNextPage = 0;\n this._seenPages = [0];\n this.subWizards = [];\n this.allPages = [];\n this.lastPromise = Promise.resolve();\n this.enabledIndex = 0;\n this.editMode = false;\n this.originalOptions = lodash_1.default.cloneDeep(this.options);\n }\n isLastPage() {\n const next = this.getNextPage();\n if (lodash_1.default.isNumber(next)) {\n return next === -1;\n }\n return lodash_1.default.isNull(next);\n }\n getPages(args = {}) {\n const { all = false } = args;\n const pages = this.hasExtraPages ? this.components : this.pages;\n const filteredPages = pages\n .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));\n return filteredPages;\n }\n get hasExtraPages() {\n return !lodash_1.default.isEmpty(this.subWizards);\n }\n get data() {\n return super.data;\n }\n get localData() {\n var _a, _b;\n return ((_b = (_a = this.pages[this.page]) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.submission.data) || this.submission.data;\n }\n checkConditions(data, flags, row) {\n const visible = super.checkConditions(data, flags, row);\n this.establishPages(data);\n return visible;\n }\n set data(value) {\n this._data = value;\n lodash_1.default.each(this.getPages({ all: true }), (component) => {\n component.data = this.componentContext(component);\n });\n }\n getComponents() {\n return this.submitting\n ? this.getPages({ all: this.isLastPage() })\n : super.getComponents();\n }\n resetValue() {\n this.getPages({ all: true }).forEach((page) => page.resetValue());\n this.setPristine(true);\n }\n init() {\n var _a;\n // Check for and initlize button settings object\n this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {\n showPrevious: true,\n showNext: true,\n showSubmit: true,\n showCancel: !this.options.readOnly\n });\n this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {\n clickable: true\n });\n this.options.allowPrevious = this.options.allowPrevious || false;\n this.page = 0;\n const onReady = super.init();\n this.setComponentSchema();\n if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n this.component = this.pages[this.page].component;\n }\n this.on('subWizardsUpdated', (subForm) => {\n 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); });\n if (this.subWizards.length && subWizard) {\n subWizard.subForm.setValue(subForm._submission, {}, true);\n this.establishPages();\n this.redraw();\n }\n });\n return onReady;\n }\n get wizardKey() {\n return `wizard-${this.id}`;\n }\n get wizard() {\n return this.form;\n }\n set wizard(form) {\n this.setForm(form);\n }\n get buttons() {\n const buttons = {};\n [\n { name: 'cancel', method: 'cancel' },\n { name: 'previous', method: 'prevPage' },\n { name: 'next', method: 'nextPage' },\n { name: 'submit', method: 'submit' }\n ].forEach((button) => {\n if (this.hasButton(button.name)) {\n buttons[button.name] = button;\n }\n });\n return buttons;\n }\n get buttonOrder() {\n var _a, _b, _c;\n const defaultButtonOrder = [\n 'cancel',\n 'previous',\n 'next',\n 'submit'\n ];\n 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;\n }\n get renderContext() {\n var _a, _b;\n return {\n disableWizardSubmit: this.form.disableWizardSubmit,\n wizardKey: this.wizardKey,\n isBreadcrumbClickable: this.isBreadcrumbClickable(),\n isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',\n panels: this.allPages.length ? this.allPages.map(page => page.component) : this.pages.map(page => page.component),\n buttons: this.buttons,\n currentPage: this.page,\n buttonOrder: this.buttonOrder,\n };\n }\n prepareNavigationSettings(ctx) {\n const currentPanel = this.currentPanel;\n if (currentPanel && currentPanel.buttonSettings) {\n Object.keys(currentPanel.buttonSettings).forEach(() => {\n Object.keys(ctx.buttons).forEach(key => {\n if (typeof currentPanel.buttonSettings[key] !== 'undefined' && !currentPanel.buttonSettings[key] || ctx.isSubForm) {\n ctx.buttons[key] = null;\n }\n });\n });\n }\n return this.renderTemplate('wizardNav', ctx);\n }\n prepareHeaderSettings(ctx, headerType) {\n var _a;\n const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||\n lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';\n if (shouldHideBreadcrumbs || ctx.isSubForm) {\n return null;\n }\n return this.renderTemplate(headerType, ctx);\n }\n render() {\n const ctx = this.renderContext;\n if (this.component.key) {\n ctx.panels.map(panel => {\n if (panel.key === this.component.key) {\n this.currentPanel = panel;\n ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n }\n });\n }\n const wizardNav = this.prepareNavigationSettings(ctx);\n const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n wizardHeaderType,\n wizardHeaderLocation,\n wizardNav, components: this.renderComponents([\n ...this.prefixComps,\n ...this.currentPage.components,\n ...this.suffixComps\n ]) }), this.builderMode ? 'builder' : 'form');\n }\n redrawNavigation() {\n if (this.element) {\n let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n if (navElement) {\n this.detachNav();\n navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n this.loadRefs(navElement, {\n [`${this.wizardKey}-cancel`]: 'single',\n [`${this.wizardKey}-previous`]: 'single',\n [`${this.wizardKey}-next`]: 'single',\n [`${this.wizardKey}-submit`]: 'single',\n });\n this.attachNav();\n }\n }\n }\n redrawHeader() {\n if (this.element) {\n let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n if (headerElement) {\n this.detachHeader();\n headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n this.loadRefs(headerElement, {\n [`${this.wizardKey}-link`]: 'multiple',\n [`${this.wizardKey}-tooltip`]: 'multiple'\n });\n this.attachHeader();\n }\n }\n }\n /**\n * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n * and emits a render event. It will initialize the wizard's index if necessary,\n * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n * @returns {Promise} A promise that resolves when all components have been successfully attached.\n */\n attach(element) {\n var _a;\n this.setElement(element);\n this.loadRefs(element, {\n [this.wizardKey]: 'single',\n [`${this.wizardKey}-header`]: 'single',\n [`${this.wizardKey}-cancel`]: 'single',\n [`${this.wizardKey}-previous`]: 'single',\n [`${this.wizardKey}-next`]: 'single',\n [`${this.wizardKey}-submit`]: 'single',\n [`${this.wizardKey}-link`]: 'multiple',\n [`${this.wizardKey}-tooltip`]: 'multiple'\n });\n if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n }\n this.hook('attachWebform', element, this);\n const promises = this.attachComponents(this.refs[this.wizardKey], [\n ...this.prefixComps,\n ...this.currentPage.components,\n ...this.suffixComps,\n ]);\n this.attachNav();\n this.attachHeader();\n return promises.then(() => {\n this.emit('render', { component: this.currentPage, page: this.page });\n if (this.component.scrollToTop) {\n this.scrollPageToTop();\n }\n });\n }\n scrollPageToTop() {\n var _a;\n const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n if (!pageTop) {\n return;\n }\n if ('scrollIntoView' in pageTop) {\n pageTop.scrollIntoView(true);\n }\n else {\n this.scrollIntoView(pageTop);\n }\n }\n isBreadcrumbClickable() {\n let currentPage = null;\n this.pages.map(page => {\n if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n currentPage = page;\n }\n });\n if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n }\n if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n return this.options.breadcrumbSettings.clickable;\n }\n return true;\n }\n isAllowPrevious() {\n let currentPage = null;\n this.pages.map(page => {\n if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n currentPage = page;\n }\n });\n return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);\n }\n /**\n * Handles navigate on 'Enter' key event in a wizard form.\n * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n */\n handleNaviageteOnEnter(event) {\n if (event.keyCode === 13) {\n const clickEvent = new CustomEvent('click');\n const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n if (buttonElement) {\n buttonElement.dispatchEvent(clickEvent);\n }\n }\n }\n /**\n * Handles save on 'Enter' key event in a wizard form.\n * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n */\n handleSaveOnEnter(event) {\n if (event.keyCode === 13) {\n const clickEvent = new CustomEvent('click');\n const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n if (buttonElement) {\n buttonElement.dispatchEvent(clickEvent);\n }\n }\n }\n attachNav() {\n if (this.component.navigateOnEnter) {\n this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n }\n if (this.component.saveOnEnter) {\n this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n }\n lodash_1.default.each(this.buttons, (button) => {\n const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n this.addEventListener(buttonElement, 'click', (event) => {\n event.preventDefault();\n // Disable the button until done.\n buttonElement.setAttribute('disabled', 'disabled');\n this.setLoading(buttonElement, true);\n // Call the button method, then re-enable the button.\n this[button.method]().then(() => {\n buttonElement.removeAttribute('disabled');\n this.setLoading(buttonElement, false);\n }).catch(() => {\n buttonElement.removeAttribute('disabled');\n this.setLoading(buttonElement, false);\n });\n });\n });\n }\n /**\n * Emits an event indicating that a wizard page has been selected.\n * @param {number} index - Index of the selected wizard page in the `pages` array.\n * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n */\n emitWizardPageSelected(index) {\n this.emit('wizardPageSelected', this.pages[index], index);\n }\n attachHeader() {\n var _a, _b;\n const isAllowPrevious = this.isAllowPrevious();\n this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n if (this.isBreadcrumbClickable() || isAllowPrevious) {\n (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n if (!isAllowPrevious || index <= this.enabledIndex) {\n this.addEventListener(link, 'click', (event) => {\n this.emit('wizardNavigationClicked', this.pages[index]);\n event.preventDefault();\n return this.setPage(index).then(() => {\n this.emitWizardPageSelected(index);\n });\n });\n }\n });\n }\n }\n detachNav() {\n if (this.component.navigateOnEnter) {\n this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n }\n if (this.component.saveOnEnter) {\n this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n }\n lodash_1.default.each(this.buttons, (button) => {\n this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n });\n }\n detachHeader() {\n if (this.refs[`${this.wizardKey}-link`]) {\n this.refs[`${this.wizardKey}-link`].forEach((link) => {\n this.removeEventListener(link, 'click');\n });\n }\n }\n transformPages() {\n const allComponents = [];\n const components = this.getSortedComponents(this);\n let defferedComponents = [];\n this.allPages = [];\n // Get all components including all nested components and line up in the correct order\n const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n const nestedPages = [];\n const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm) ? this.getSortedComponents(nestedComp.subForm) : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n const visibleComponents = currentComponents.filter(comp => comp._visible);\n const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));\n const additionalComponents = currentComponents.filter(comp => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n let hasNested = false;\n (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n if (comp && comp.component) {\n if (comp.component.type === 'panel' && (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) && !getAllComponents(comp, compsArr, false)) {\n if (pushAllowed) {\n this.setRootPanelId(comp);\n nestedPages.push(comp);\n }\n hasNested = true;\n }\n if (comp.isNestedWizard && comp.subForm) {\n const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n if (!hasNested) {\n hasNested = hasNestedForm;\n }\n }\n }\n }, true);\n if (nestedComp.component.type === 'panel') {\n if (!hasNested && pushAllowed) {\n this.setRootPanelId(nestedComp);\n compsArr.push(nestedComp);\n }\n if (hasNested && additionalComponents.length) {\n const newComp = lodash_1.default.clone(nestedComp);\n newComp.components = additionalComponents;\n this.setRootPanelId(newComp);\n defferedComponents.push(newComp);\n }\n }\n if (pushAllowed) {\n compsArr.push(...defferedComponents, ...nestedPages);\n defferedComponents = [];\n }\n return hasNested;\n };\n components.forEach((component) => {\n if (component.visible) {\n getAllComponents(component, allComponents);\n }\n }, []);\n // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n if (this.localRoot && this.id === this.localRoot.id) {\n allComponents.forEach((comp, index) => {\n comp.eachComponent((component) => {\n component.page = index;\n });\n });\n }\n this.allPages = allComponents;\n }\n getSortedComponents({ components, originalComponents }) {\n const currentComponents = [];\n const currentPages = [];\n if (components && components.length) {\n components.map(page => {\n if (page.component.type === 'panel') {\n currentPages[page.component.key || page.component.title] = page;\n }\n });\n }\n originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n if (!item.key) {\n item.key = item.title;\n }\n if (currentPages[item.key]) {\n currentComponents.push(currentPages[item.key]);\n }\n });\n return currentComponents;\n }\n findRootPanel(component) {\n var _a;\n return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n }\n setRootPanelId(component) {\n var _a;\n if (component.rootPanelId && component.rootPanelId !== component.id) {\n return;\n }\n const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n component.rootPanelId = parent.id;\n }\n establishPages(data = this.data) {\n this.pages = [];\n this.prefixComps = [];\n this.suffixComps = [];\n const visible = [];\n const currentPages = {};\n const pageOptions = Object.assign(Object.assign({}, (lodash_1.default.clone(this.options))), (this.parent ? { root: this } : {}));\n if (this.components && this.components.length) {\n this.components.forEach(page => {\n if (page.component.type === 'panel') {\n currentPages[page.component.key || page.component.title] = page;\n }\n });\n }\n if (this.originalComponents) {\n this.originalComponents.forEach((item) => {\n if (item.type === 'panel') {\n if (!item.key) {\n item.key = item.title;\n }\n let page = currentPages[item.key];\n const forceShow = this.shouldForceShow(item);\n const forceHide = this.shouldForceHide(item);\n let isVisible = !page\n ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n : page.visible;\n if (forceShow) {\n isVisible = true;\n }\n else if (forceHide) {\n isVisible = false;\n }\n if (isVisible) {\n visible.push(item);\n if (page) {\n this.pages.push(page);\n }\n }\n if (!page && isVisible) {\n page = this.createComponent(item, pageOptions);\n page.visible = isVisible;\n this.pages.push(page);\n page.eachComponent((component) => {\n component.page = (this.pages.length - 1);\n });\n }\n }\n else if (item.type !== 'button') {\n if (!this.pages.length) {\n this.prefixComps.push(this.createComponent(item, pageOptions));\n }\n else {\n this.suffixComps.push(this.createComponent(item, pageOptions));\n }\n }\n });\n }\n if (this.pages.length) {\n this.emit('pagesChanged');\n }\n this.transformPages();\n if (this.allPages && this.allPages.length) {\n this.updatePages();\n }\n return visible;\n }\n updatePages() {\n this.pages = this.allPages;\n }\n addComponents() {\n this.establishPages();\n }\n setPage(num) {\n if (num === this.page) {\n return Promise.resolve();\n }\n if (num >= 0 && num < this.pages.length) {\n this.page = num;\n this.pageFieldLogic(num);\n this.getNextPage();\n let parentNum = num;\n if (this.hasExtraPages) {\n const pageFromPages = this.pages[num];\n const pageFromComponents = this.components[num];\n if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n parentNum = this.components.findIndex(comp => {\n var _a, _b;\n return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n });\n }\n }\n if (!this._seenPages.includes(parentNum)) {\n this._seenPages = this._seenPages.concat(parentNum);\n }\n this.redraw().then(() => {\n this.checkData(this.submission.data);\n this.triggerCaptcha(this.currentPage.components);\n const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n if (this.alert) {\n this.showErrors(errors, true, true);\n }\n });\n return Promise.resolve();\n }\n else if (!this.pages.length) {\n this.redraw();\n return Promise.resolve();\n }\n return Promise.reject(this.t('pageNotFound'));\n }\n pageFieldLogic(page) {\n var _a;\n if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n // Handle field logic on pages.\n this.component = this.pages[page].component;\n this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n this.fieldLogic(this.data);\n // If disabled changed, be sure to distribute the setting.\n this.disabled = this.shouldDisabled;\n }\n }\n get currentPage() {\n return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };\n }\n getNextPage() {\n var _a;\n if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n const data = this.submission.data;\n const form = this.pages[this.page].component;\n // Check conditional nextPage\n if (form) {\n const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;\n if (form.nextPage) {\n const next = this.evaluate(form.nextPage, {\n next: page,\n data,\n page,\n form\n }, 'next');\n if (next === null) {\n this.currentNextPage = null;\n return null;\n }\n const pageNum = parseInt(next, 10);\n if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n this.currentNextPage = pageNum;\n return pageNum;\n }\n this.currentNextPage = this.getPageIndexByKey(next);\n return this.currentNextPage;\n }\n this.currentNextPage = page;\n return page;\n }\n this.currentNextPage = null;\n }\n return null;\n }\n getPreviousPage() {\n return this.page - 1;\n }\n beforeSubmit() {\n const pages = this.getPages({ all: true });\n return Promise.all(pages.map((page) => {\n page.options.beforeSubmit = true;\n return page.beforeSubmit();\n }));\n }\n beforePage(next) {\n return new Promise((resolve, reject) => {\n this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n if (err) {\n this.showErrors(err, true);\n reject(err);\n }\n const form = this.currentPage;\n if (form) {\n form.beforePage(next).then(resolve).catch(reject);\n }\n else {\n resolve();\n }\n });\n });\n }\n emitNextPage() {\n this.emit('nextPage', { page: this.page, submission: this.submission });\n }\n nextPage() {\n // Read-only forms should not worry about validation before going to next page, nor should they submit.\n if (this.options.readOnly) {\n return this.beforePage(true).then(() => {\n return this.setPage(this.getNextPage()).then(() => {\n this.emitNextPage();\n });\n });\n }\n // Validate the form before going to the next page\n const currentPageErrors = this.validateCurrentPage({ dirty: true });\n const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;\n // allow going to the next page if the current page is valid, even if there are form level errors\n if (currentPageErrors.length === 0) {\n this.checkData(this.submission.data);\n return this.beforePage(true).then(() => {\n return this.setPage(this.getNextPage()).then(() => {\n if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n this.enabledIndex = this.page;\n this.redraw();\n }\n this.emitNextPage();\n });\n });\n }\n else {\n this.currentPage.components.forEach((comp) => comp.setPristine(false));\n this.scrollIntoView(this.element, true);\n return Promise.reject(this.showErrors(errors, true));\n }\n }\n validateCurrentPage(flags = {}) {\n var _a, _b;\n const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n return (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.root.data, flags);\n }\n emitPrevPage() {\n this.emit('prevPage', { page: this.page, submission: this.submission });\n }\n prevPage() {\n return this.beforePage().then(() => {\n return this.setPage(this.getPreviousPage()).then(() => {\n this.emitPrevPage();\n });\n });\n }\n cancel(noconfirm) {\n if (this.options.readOnly) {\n return Promise.resolve();\n }\n if (super.cancel(noconfirm)) {\n this.setPristine(true);\n return this.setPage(0).then(() => {\n if (this.enabledIndex) {\n this.enabledIndex = 0;\n }\n this.onChange({ resetValue: true });\n this.redraw();\n return this.page;\n });\n }\n return Promise.resolve();\n }\n getPageIndexByKey(key) {\n let pageIndex = this.page;\n this.pages.forEach((page, index) => {\n if (page.component.key === key) {\n pageIndex = index;\n return false;\n }\n });\n return pageIndex;\n }\n get schema() {\n return this.wizard;\n }\n setComponentSchema() {\n const pageKeys = {};\n this.originalComponents = [];\n this.component.components.map((item) => {\n if (item.type === 'panel') {\n item.key = (0, utils_1.uniqueKey)(pageKeys, (item.key || 'panel'));\n pageKeys[item.key] = true;\n if (this.wizard.full) {\n this.options.show = this.options.show || {};\n this.options.show[item.key] = true;\n }\n else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')\n && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n }\n }\n this.originalComponents.push(lodash_1.default.clone(item));\n });\n if (!Object.keys(pageKeys).length) {\n const newPage = {\n type: 'panel',\n title: 'Page 1',\n label: 'Page 1',\n key: 'page1',\n components: this.component.components\n };\n this.component.components = [newPage];\n this.originalComponents.push(lodash_1.default.clone(newPage));\n }\n }\n setForm(form, flags = {}) {\n if (!form) {\n return;\n }\n return super.setForm(form, flags);\n }\n onSetForm(clonedForm, initialForm) {\n this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];\n this.setComponentSchema();\n }\n setEditMode(submission) {\n if (!this.editMode && submission._id && !this.options.readOnly) {\n this.editMode = true;\n this.redraw();\n }\n }\n setValue(submission, flags = {}, ignoreEstablishment) {\n const changed = this.getPages({ all: true }).reduce((changed, page) => {\n return this.setNestedValue(page, submission.data, flags, changed) || changed;\n }, false);\n this.mergeData(this.data, submission.data);\n if (changed) {\n this.pageFieldLogic(this.page);\n }\n submission.data = this.data;\n this._submission = submission;\n if (!ignoreEstablishment) {\n this.establishPages(submission.data);\n }\n this.setEditMode(submission);\n return changed;\n }\n isClickable(page, index) {\n return this.page !== index && (0, utils_1.firstNonNil)([\n lodash_1.default.get(page, 'breadcrumbClickable'),\n this.options.breadcrumbSettings.clickable\n ]);\n }\n hasButton(name, nextPage = this.getNextPage()) {\n // get page options with global options as default values\n 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', {});\n switch (name) {\n case 'previous':\n return previous && (this.getPreviousPage() > -1);\n case 'next':\n return next && (nextPage !== null) && (nextPage !== -1);\n case 'cancel':\n return cancel && !this.options.readOnly;\n case 'submit':\n return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));\n default:\n return true;\n }\n }\n pageId(page) {\n if (page.key) {\n // Some panels have the same key....\n return `${page.key}-${page.title}`;\n }\n else if (page.components &&\n page.components.length > 0) {\n return this.pageId(page.components[0]);\n }\n else {\n return page.title;\n }\n }\n onChange(flags, changed, modified, changes) {\n var _a, _b;\n super.onChange(flags, changed, modified, changes);\n // The onChange loop doesn't need all components for wizards\n const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n if (this.alert) {\n this.showErrors(errors, true, true);\n }\n // If the pages change, need to redraw the header.\n let currentPanels;\n let panels;\n const currentNextPage = this.currentNextPage;\n if (this.hasExtraPages) {\n currentPanels = this.pages.map(page => page.component.key);\n this.establishPages();\n panels = this.pages.map(page => page.component.key);\n }\n else {\n currentPanels = this.currentPanels || this.pages.map(page => page.component.key);\n panels = this.establishPages().map(panel => panel.key);\n this.currentPanels = panels;\n if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.key) && ((_b = this.currentPanels) === null || _b === void 0 ? void 0 : _b.length)) {\n this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));\n }\n }\n if (!lodash_1.default.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {\n this.redrawHeader();\n }\n // If the next page changes, then make sure to redraw navigation.\n if (currentNextPage !== this.getNextPage()) {\n this.redrawNavigation();\n }\n if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n this.redraw();\n }\n }\n rebuild() {\n const currentPage = this.page;\n const setCurrentPage = () => this.setPage(currentPage);\n return super.rebuild().then(setCurrentPage);\n }\n checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n if (!this.checkCondition(row, data)) {\n this.setCustomValidity('');\n return true;\n }\n const components = !currentPageOnly || this.isLastPage()\n ? this.getComponents()\n : this.currentPage.components;\n return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n }\n get errors() {\n return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n }\n focusOnComponent(key) {\n const component = this.getComponent(key);\n if (component) {\n let topPanel = component.parent;\n while (!(topPanel.parent instanceof Wizard)) {\n topPanel = topPanel.parent;\n }\n const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);\n if (pageIndex >= 0) {\n const page = this.pages[pageIndex];\n if (page && page !== this.currentPage) {\n return this.setPage(pageIndex).then(() => {\n this.showErrors(this.validate(this.localData, { dirty: true }));\n super.focusOnComponent(key);\n });\n }\n }\n }\n return super.focusOnComponent(key);\n }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.js?");
|
4779
|
+
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass Wizard extends Webform_1.default {\n /**\n * Constructor for wizard-based forms.\n * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.\n * - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.\n * - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.\n * - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.\n */\n constructor(elementOrOptions = undefined, _options = undefined) {\n let element, options;\n if (elementOrOptions instanceof HTMLElement || _options) {\n element = elementOrOptions;\n options = _options || {};\n }\n else {\n options = elementOrOptions || {};\n }\n options.display = 'wizard';\n super(element, options);\n this.pages = [];\n this.prefixComps = [];\n this.suffixComps = [];\n this.components = [];\n this.originalComponents = [];\n this.page = 0;\n this.currentPanel = null;\n this.currentPanels = null;\n this.currentNextPage = 0;\n this._seenPages = [0];\n this.subWizards = [];\n this.allPages = [];\n this.lastPromise = Promise.resolve();\n this.enabledIndex = 0;\n this.editMode = false;\n this.originalOptions = lodash_1.default.cloneDeep(this.options);\n }\n isLastPage() {\n const next = this.getNextPage();\n if (lodash_1.default.isNumber(next)) {\n return next === -1;\n }\n return lodash_1.default.isNull(next);\n }\n getPages(args = {}) {\n const { all = false } = args;\n const pages = this.hasExtraPages ? this.components : this.pages;\n const filteredPages = pages\n .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));\n return filteredPages;\n }\n get hasExtraPages() {\n return !lodash_1.default.isEmpty(this.subWizards);\n }\n get data() {\n return super.data;\n }\n get localData() {\n var _a, _b;\n return ((_b = (_a = this.pages[this.page]) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.submission.data) || this.submission.data;\n }\n checkConditions(data, flags, row) {\n const visible = super.checkConditions(data, flags, row);\n this.establishPages(data);\n return visible;\n }\n set data(value) {\n this._data = value;\n lodash_1.default.each(this.getPages({ all: true }), (component) => {\n component.data = this.componentContext(component);\n });\n }\n getComponents() {\n return this.submitting\n ? this.getPages({ all: this.isLastPage() })\n : super.getComponents();\n }\n resetValue() {\n this.getPages({ all: true }).forEach((page) => page.resetValue());\n this.setPristine(true);\n }\n init() {\n var _a;\n // Check for and initlize button settings object\n this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {\n showPrevious: true,\n showNext: true,\n showSubmit: true,\n showCancel: !this.options.readOnly\n });\n this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {\n clickable: true\n });\n this.options.allowPrevious = this.options.allowPrevious || false;\n this.page = 0;\n const onReady = super.init();\n this.setComponentSchema();\n if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n this.component = this.pages[this.page].component;\n }\n this.on('subWizardsUpdated', (subForm) => {\n 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); });\n if (this.subWizards.length && subWizard) {\n subWizard.subForm.setValue(subForm._submission, {}, true);\n this.establishPages();\n this.redraw();\n }\n });\n return onReady;\n }\n get wizardKey() {\n return `wizard-${this.id}`;\n }\n get wizard() {\n return this.form;\n }\n set wizard(form) {\n this.setForm(form);\n }\n get buttons() {\n const buttons = {};\n [\n { name: 'cancel', method: 'cancel' },\n { name: 'previous', method: 'prevPage' },\n { name: 'next', method: 'nextPage' },\n { name: 'submit', method: 'submit' }\n ].forEach((button) => {\n if (this.hasButton(button.name)) {\n buttons[button.name] = button;\n }\n });\n return buttons;\n }\n get buttonOrder() {\n var _a, _b, _c;\n const defaultButtonOrder = [\n 'cancel',\n 'previous',\n 'next',\n 'submit'\n ];\n 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;\n }\n get renderContext() {\n var _a, _b;\n return {\n disableWizardSubmit: this.form.disableWizardSubmit,\n wizardKey: this.wizardKey,\n isBreadcrumbClickable: this.isBreadcrumbClickable(),\n isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',\n panels: this.allPages.length ? this.allPages.map(page => page.component) : this.pages.map(page => page.component),\n buttons: this.buttons,\n currentPage: this.page,\n buttonOrder: this.buttonOrder,\n };\n }\n prepareNavigationSettings(ctx) {\n const currentPanel = this.currentPanel;\n if (currentPanel && currentPanel.buttonSettings) {\n Object.keys(currentPanel.buttonSettings).forEach(() => {\n Object.keys(ctx.buttons).forEach(key => {\n if (typeof currentPanel.buttonSettings[key] !== 'undefined' && !currentPanel.buttonSettings[key] || ctx.isSubForm) {\n ctx.buttons[key] = null;\n }\n });\n });\n }\n return this.renderTemplate('wizardNav', ctx);\n }\n prepareHeaderSettings(ctx, headerType) {\n var _a;\n const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||\n lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';\n if (shouldHideBreadcrumbs || ctx.isSubForm) {\n return null;\n }\n return this.renderTemplate(headerType, ctx);\n }\n render() {\n const ctx = this.renderContext;\n if (this.component.key) {\n ctx.panels.map(panel => {\n if (panel.key === this.component.key) {\n this.currentPanel = panel;\n ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n }\n });\n }\n const wizardNav = this.prepareNavigationSettings(ctx);\n const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n wizardHeaderType,\n wizardHeaderLocation,\n wizardNav, components: this.renderComponents([\n ...this.prefixComps,\n ...this.currentPage.components,\n ...this.suffixComps\n ]) }), this.builderMode ? 'builder' : 'form');\n }\n redrawNavigation() {\n if (this.element) {\n let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n if (navElement) {\n this.detachNav();\n navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n this.loadRefs(navElement, {\n [`${this.wizardKey}-cancel`]: 'single',\n [`${this.wizardKey}-previous`]: 'single',\n [`${this.wizardKey}-next`]: 'single',\n [`${this.wizardKey}-submit`]: 'single',\n });\n this.attachNav();\n }\n }\n }\n redrawHeader() {\n if (this.element) {\n let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n if (headerElement) {\n this.detachHeader();\n headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n this.loadRefs(headerElement, {\n [`${this.wizardKey}-link`]: 'multiple',\n [`${this.wizardKey}-tooltip`]: 'multiple'\n });\n this.attachHeader();\n }\n }\n }\n /**\n * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n * and emits a render event. It will initialize the wizard's index if necessary,\n * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n * @returns {Promise} A promise that resolves when all components have been successfully attached.\n */\n attach(element) {\n var _a;\n this.setElement(element);\n this.loadRefs(element, {\n [this.wizardKey]: 'single',\n [`${this.wizardKey}-header`]: 'single',\n [`${this.wizardKey}-cancel`]: 'single',\n [`${this.wizardKey}-previous`]: 'single',\n [`${this.wizardKey}-next`]: 'single',\n [`${this.wizardKey}-submit`]: 'single',\n [`${this.wizardKey}-link`]: 'multiple',\n [`${this.wizardKey}-tooltip`]: 'multiple'\n });\n if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n }\n this.hook('attachWebform', element, this);\n const promises = this.attachComponents(this.refs[this.wizardKey], [\n ...this.prefixComps,\n ...this.currentPage.components,\n ...this.suffixComps,\n ]);\n this.attachNav();\n this.attachHeader();\n return promises.then(() => {\n this.emit('render', { component: this.currentPage, page: this.page });\n if (this.component.scrollToTop) {\n this.scrollPageToTop();\n }\n });\n }\n scrollPageToTop() {\n var _a;\n const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n if (!pageTop) {\n return;\n }\n if ('scrollIntoView' in pageTop) {\n pageTop.scrollIntoView(true);\n }\n else {\n this.scrollIntoView(pageTop);\n }\n }\n isBreadcrumbClickable() {\n let currentPage = null;\n this.pages.map(page => {\n if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n currentPage = page;\n }\n });\n if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n }\n if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n return this.options.breadcrumbSettings.clickable;\n }\n return true;\n }\n isAllowPrevious() {\n let currentPage = null;\n this.pages.map(page => {\n if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {\n currentPage = page;\n }\n });\n return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);\n }\n /**\n * Handles navigate on 'Enter' key event in a wizard form.\n * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n */\n handleNaviageteOnEnter(event) {\n if (event.keyCode === 13) {\n const clickEvent = new CustomEvent('click');\n const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n if (buttonElement) {\n buttonElement.dispatchEvent(clickEvent);\n }\n }\n }\n /**\n * Handles save on 'Enter' key event in a wizard form.\n * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n */\n handleSaveOnEnter(event) {\n if (event.keyCode === 13) {\n const clickEvent = new CustomEvent('click');\n const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n if (buttonElement) {\n buttonElement.dispatchEvent(clickEvent);\n }\n }\n }\n attachNav() {\n if (this.component.navigateOnEnter) {\n this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n }\n if (this.component.saveOnEnter) {\n this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n }\n lodash_1.default.each(this.buttons, (button) => {\n const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n this.addEventListener(buttonElement, 'click', (event) => {\n event.preventDefault();\n // Disable the button until done.\n buttonElement.setAttribute('disabled', 'disabled');\n this.setLoading(buttonElement, true);\n // Call the button method, then re-enable the button.\n this[button.method]().then(() => {\n buttonElement.removeAttribute('disabled');\n this.setLoading(buttonElement, false);\n }).catch(() => {\n buttonElement.removeAttribute('disabled');\n this.setLoading(buttonElement, false);\n });\n });\n });\n }\n /**\n * Emits an event indicating that a wizard page has been selected.\n * @param {number} index - Index of the selected wizard page in the `pages` array.\n * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n */\n emitWizardPageSelected(index) {\n this.emit('wizardPageSelected', this.pages[index], index);\n }\n attachHeader() {\n var _a, _b;\n const isAllowPrevious = this.isAllowPrevious();\n this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n if (this.isBreadcrumbClickable() || isAllowPrevious) {\n (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n if (!isAllowPrevious || index <= this.enabledIndex) {\n this.addEventListener(link, 'click', (event) => {\n this.emit('wizardNavigationClicked', this.pages[index]);\n event.preventDefault();\n return this.setPage(index).then(() => {\n this.emitWizardPageSelected(index);\n });\n });\n }\n });\n }\n }\n detachNav() {\n if (this.component.navigateOnEnter) {\n this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n }\n if (this.component.saveOnEnter) {\n this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n }\n lodash_1.default.each(this.buttons, (button) => {\n this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n });\n }\n detachHeader() {\n if (this.refs[`${this.wizardKey}-link`]) {\n this.refs[`${this.wizardKey}-link`].forEach((link) => {\n this.removeEventListener(link, 'click');\n });\n }\n }\n transformPages() {\n const allComponents = [];\n const components = this.getSortedComponents(this);\n let defferedComponents = [];\n this.allPages = [];\n // Get all components including all nested components and line up in the correct order\n const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n const nestedPages = [];\n const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm) ? this.getSortedComponents(nestedComp.subForm) : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n const visibleComponents = currentComponents.filter(comp => comp._visible);\n const filteredComponents = visibleComponents.filter(comp => !dataArrayComponents.includes(comp.component.type) && (comp.type !== 'form' || comp.isNestedWizard));\n const additionalComponents = currentComponents.filter(comp => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n let hasNested = false;\n (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n if (comp && comp.component) {\n if (comp.component.type === 'panel' && (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) && !getAllComponents(comp, compsArr, false)) {\n if (pushAllowed) {\n this.setRootPanelId(comp);\n nestedPages.push(comp);\n }\n hasNested = true;\n }\n if (comp.isNestedWizard && comp.subForm) {\n const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n if (!hasNested) {\n hasNested = hasNestedForm;\n }\n }\n }\n }, true);\n if (nestedComp.component.type === 'panel') {\n if (!hasNested && pushAllowed) {\n this.setRootPanelId(nestedComp);\n compsArr.push(nestedComp);\n }\n if (hasNested && additionalComponents.length) {\n const newComp = lodash_1.default.clone(nestedComp);\n newComp.components = additionalComponents;\n this.setRootPanelId(newComp);\n defferedComponents.push(newComp);\n }\n }\n if (pushAllowed) {\n compsArr.push(...defferedComponents, ...nestedPages);\n defferedComponents = [];\n }\n return hasNested;\n };\n components.forEach((component) => {\n if (component.visible) {\n getAllComponents(component, allComponents);\n }\n }, []);\n // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n if (this.localRoot && this.id === this.localRoot.id) {\n allComponents.forEach((comp, index) => {\n comp.eachComponent((component) => {\n component.page = index;\n });\n });\n }\n this.allPages = allComponents;\n }\n getSortedComponents({ components, originalComponents }) {\n const currentComponents = [];\n const currentPages = [];\n if (components && components.length) {\n components.map(page => {\n if (page.component.type === 'panel') {\n currentPages[page.component.key || page.component.title] = page;\n }\n });\n }\n originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n if (!item.key) {\n item.key = item.title;\n }\n if (currentPages[item.key]) {\n currentComponents.push(currentPages[item.key]);\n }\n });\n return currentComponents;\n }\n findRootPanel(component) {\n var _a;\n return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n }\n setRootPanelId(component) {\n var _a;\n if (component.rootPanelId && component.rootPanelId !== component.id) {\n return;\n }\n const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n component.rootPanelId = parent.id;\n }\n establishPages(data = this.data) {\n this.pages = [];\n this.prefixComps = [];\n this.suffixComps = [];\n const visible = [];\n const currentPages = {};\n const pageOptions = Object.assign(Object.assign({}, (lodash_1.default.clone(this.options))), (this.parent ? { root: this } : {}));\n if (this.components && this.components.length) {\n this.components.forEach(page => {\n if (page.component.type === 'panel') {\n currentPages[page.component.key || page.component.title] = page;\n }\n });\n }\n if (this.originalComponents) {\n this.originalComponents.forEach((item) => {\n if (item.type === 'panel') {\n if (!item.key) {\n item.key = item.title;\n }\n let page = currentPages[item.key];\n const forceShow = this.shouldForceShow(item);\n const forceHide = this.shouldForceHide(item);\n let isVisible = !page\n ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n : page.visible;\n if (forceShow) {\n isVisible = true;\n }\n else if (forceHide) {\n isVisible = false;\n }\n if (isVisible) {\n visible.push(item);\n if (page) {\n this.pages.push(page);\n }\n }\n if (!page && isVisible) {\n page = this.createComponent(item, pageOptions);\n page.visible = isVisible;\n this.pages.push(page);\n page.eachComponent((component) => {\n component.page = (this.pages.length - 1);\n });\n }\n }\n else if (item.type !== 'button') {\n if (!this.pages.length) {\n this.prefixComps.push(this.createComponent(item, pageOptions));\n }\n else {\n this.suffixComps.push(this.createComponent(item, pageOptions));\n }\n }\n });\n }\n if (this.pages.length) {\n this.emit('pagesChanged');\n }\n this.transformPages();\n if (this.allPages && this.allPages.length) {\n this.updatePages();\n }\n return visible;\n }\n updatePages() {\n this.pages = this.allPages;\n }\n addComponents() {\n this.establishPages();\n }\n setPage(num) {\n if (num === this.page) {\n return Promise.resolve();\n }\n if (num >= 0 && num < this.pages.length) {\n this.page = num;\n this.pageFieldLogic(num);\n this.getNextPage();\n let parentNum = num;\n if (this.hasExtraPages) {\n const pageFromPages = this.pages[num];\n const pageFromComponents = this.components[num];\n if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n parentNum = this.components.findIndex(comp => {\n var _a, _b;\n return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n });\n }\n }\n if (!this._seenPages.includes(parentNum)) {\n this._seenPages = this._seenPages.concat(parentNum);\n }\n this.redraw().then(() => {\n this.checkData(this.submission.data);\n this.triggerCaptcha(this.currentPage.components);\n const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n if (this.alert) {\n this.showErrors(errors, true, true);\n }\n });\n return Promise.resolve();\n }\n else if (!this.pages.length) {\n this.redraw();\n return Promise.resolve();\n }\n return Promise.reject(this.t('pageNotFound'));\n }\n pageFieldLogic(page) {\n var _a;\n if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n // Handle field logic on pages.\n this.component = this.pages[page].component;\n this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n this.fieldLogic(this.data);\n // If disabled changed, be sure to distribute the setting.\n this.disabled = this.shouldDisabled;\n }\n }\n get currentPage() {\n return (this.pages && (this.pages.length >= this.page)) ? this.pages[this.page] : { components: [] };\n }\n getNextPage() {\n var _a;\n if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n const data = this.submission.data;\n const form = this.pages[this.page].component;\n // Check conditional nextPage\n if (form) {\n const page = this.pages.length > (this.page + 1) && !this.showAllErrors ? this.page + 1 : -1;\n if (form.nextPage) {\n const next = this.evaluate(form.nextPage, {\n next: page,\n data,\n page,\n form\n }, 'next');\n if (next === null) {\n this.currentNextPage = null;\n return null;\n }\n const pageNum = parseInt(next, 10);\n if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n this.currentNextPage = pageNum;\n return pageNum;\n }\n this.currentNextPage = this.getPageIndexByKey(next);\n return this.currentNextPage;\n }\n this.currentNextPage = page;\n return page;\n }\n this.currentNextPage = null;\n }\n return null;\n }\n getPreviousPage() {\n return this.page - 1;\n }\n beforeSubmit() {\n const pages = this.getPages({ all: true });\n return Promise.all(pages.map((page) => {\n page.options.beforeSubmit = true;\n return page.beforeSubmit();\n }));\n }\n beforePage(next) {\n return new Promise((resolve, reject) => {\n this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n if (err) {\n this.showErrors(err, true);\n reject(err);\n }\n const form = this.currentPage;\n if (form) {\n form.beforePage(next).then(resolve).catch(reject);\n }\n else {\n resolve();\n }\n });\n });\n }\n emitNextPage() {\n this.emit('nextPage', { page: this.page, submission: this.submission });\n }\n nextPage() {\n // Read-only forms should not worry about validation before going to next page, nor should they submit.\n if (this.options.readOnly) {\n return this.beforePage(true).then(() => {\n return this.setPage(this.getNextPage()).then(() => {\n this.emitNextPage();\n });\n });\n }\n // Validate the form before going to the next page\n const currentPageErrors = this.validateCurrentPage({ dirty: true });\n const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : currentPageErrors;\n // allow going to the next page if the current page is valid, even if there are form level errors\n if (currentPageErrors.length === 0) {\n this.checkData(this.submission.data);\n return this.beforePage(true).then(() => {\n return this.setPage(this.getNextPage()).then(() => {\n if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n this.enabledIndex = this.page;\n this.redraw();\n }\n this.emitNextPage();\n });\n });\n }\n else {\n this.currentPage.components.forEach((comp) => comp.setPristine(false));\n this.scrollIntoView(this.element, true);\n return Promise.reject(this.showErrors(errors, true));\n }\n }\n validateCurrentPage(flags = {}) {\n var _a, _b, _c, _d;\n const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {\n return (_c = this.currentPage) === null || _c === void 0 ? void 0 : _c.parent.validateComponents(components, this.root.data, flags);\n }\n return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.validateComponents(components, this.root ? this.root.data : this.data, flags);\n }\n emitPrevPage() {\n this.emit('prevPage', { page: this.page, submission: this.submission });\n }\n prevPage() {\n return this.beforePage().then(() => {\n return this.setPage(this.getPreviousPage()).then(() => {\n this.emitPrevPage();\n });\n });\n }\n cancel(noconfirm) {\n if (this.options.readOnly) {\n return Promise.resolve();\n }\n if (super.cancel(noconfirm)) {\n this.setPristine(true);\n return this.setPage(0).then(() => {\n if (this.enabledIndex) {\n this.enabledIndex = 0;\n }\n this.onChange({ resetValue: true });\n this.redraw();\n return this.page;\n });\n }\n return Promise.resolve();\n }\n getPageIndexByKey(key) {\n let pageIndex = this.page;\n this.pages.forEach((page, index) => {\n if (page.component.key === key) {\n pageIndex = index;\n return false;\n }\n });\n return pageIndex;\n }\n get schema() {\n return this.wizard;\n }\n setComponentSchema() {\n const pageKeys = {};\n this.originalComponents = [];\n this.component.components.map((item) => {\n if (item.type === 'panel') {\n item.key = (0, utils_1.uniqueKey)(pageKeys, (item.key || 'panel'));\n pageKeys[item.key] = true;\n if (this.wizard.full) {\n this.options.show = this.options.show || {};\n this.options.show[item.key] = true;\n }\n else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')\n && !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n }\n }\n this.originalComponents.push(lodash_1.default.clone(item));\n });\n if (!Object.keys(pageKeys).length) {\n const newPage = {\n type: 'panel',\n title: 'Page 1',\n label: 'Page 1',\n key: 'page1',\n components: this.component.components\n };\n this.component.components = [newPage];\n this.originalComponents.push(lodash_1.default.clone(newPage));\n }\n }\n setForm(form, flags = {}) {\n if (!form) {\n return;\n }\n return super.setForm(form, flags);\n }\n onSetForm(clonedForm, initialForm) {\n this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];\n this.setComponentSchema();\n }\n setEditMode(submission) {\n if (!this.editMode && submission._id && !this.options.readOnly) {\n this.editMode = true;\n this.redraw();\n }\n }\n setValue(submission, flags = {}, ignoreEstablishment) {\n const changed = this.getPages({ all: true }).reduce((changed, page) => {\n return this.setNestedValue(page, submission.data, flags, changed) || changed;\n }, false);\n this.mergeData(this.data, submission.data);\n if (changed) {\n this.pageFieldLogic(this.page);\n }\n submission.data = this.data;\n this._submission = submission;\n if (!ignoreEstablishment) {\n this.establishPages(submission.data);\n }\n this.setEditMode(submission);\n return changed;\n }\n isClickable(page, index) {\n return this.page !== index && (0, utils_1.firstNonNil)([\n lodash_1.default.get(page, 'breadcrumbClickable'),\n this.options.breadcrumbSettings.clickable\n ]);\n }\n hasButton(name, nextPage = this.getNextPage()) {\n // get page options with global options as default values\n 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', {});\n switch (name) {\n case 'previous':\n return previous && (this.getPreviousPage() > -1);\n case 'next':\n return next && (nextPage !== null) && (nextPage !== -1);\n case 'cancel':\n return cancel && !this.options.readOnly;\n case 'submit':\n return submit && !this.options.readOnly && ((nextPage === null) || (this.page === (this.pages.length - 1)));\n default:\n return true;\n }\n }\n pageId(page) {\n if (page.key) {\n // Some panels have the same key....\n return `${page.key}-${page.title}`;\n }\n else if (page.components &&\n page.components.length > 0) {\n return this.pageId(page.components[0]);\n }\n else {\n return page.title;\n }\n }\n onChange(flags, changed, modified, changes) {\n var _a, _b;\n super.onChange(flags, changed, modified, changes);\n // The onChange loop doesn't need all components for wizards\n const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();\n if (this.alert) {\n this.showErrors(errors, true, true);\n }\n // If the pages change, need to redraw the header.\n let currentPanels;\n let panels;\n const currentNextPage = this.currentNextPage;\n if (this.hasExtraPages) {\n currentPanels = this.pages.map(page => page.component.key);\n this.establishPages();\n panels = this.pages.map(page => page.component.key);\n }\n else {\n currentPanels = this.currentPanels || this.pages.map(page => page.component.key);\n panels = this.establishPages().map(panel => panel.key);\n this.currentPanels = panels;\n if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.key) && ((_b = this.currentPanels) === null || _b === void 0 ? void 0 : _b.length)) {\n this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));\n }\n }\n if (!lodash_1.default.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {\n this.redrawHeader();\n }\n // If the next page changes, then make sure to redraw navigation.\n if (currentNextPage !== this.getNextPage()) {\n this.redrawNavigation();\n }\n if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n this.redraw();\n }\n }\n rebuild() {\n const currentPage = this.page;\n const setCurrentPage = () => this.setPage(currentPage);\n return super.rebuild().then(setCurrentPage);\n }\n checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n if (!this.checkCondition(row, data)) {\n this.setCustomValidity('');\n return true;\n }\n const components = !currentPageOnly || this.isLastPage()\n ? this.getComponents()\n : this.currentPage.components;\n return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n }\n get errors() {\n return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n }\n focusOnComponent(key) {\n const component = this.getComponent(key);\n if (component) {\n let topPanel = component.parent;\n while (!(topPanel.parent instanceof Wizard)) {\n topPanel = topPanel.parent;\n }\n const pageIndex = this.pages.findIndex(page => page.id === topPanel.id);\n if (pageIndex >= 0) {\n const page = this.pages[pageIndex];\n if (page && page !== this.currentPage) {\n return this.setPage(pageIndex).then(() => {\n this.showErrors(this.validate(this.localData, { dirty: true }));\n super.focusOnComponent(key);\n });\n }\n }\n }\n return super.focusOnComponent(key);\n }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.js?");
|
4780
4780
|
|
4781
4781
|
/***/ }),
|
4782
4782
|
|