diff --git a/embed.d.ts b/embed.d.ts
index 02b7c1f996..8c77385763 100644
--- a/embed.d.ts
+++ b/embed.d.ts
@@ -1 +1 @@
-export * from './types/Embed';
+export * from './lib/cjs/InlineEmbed';
\ No newline at end of file
diff --git a/form.d.ts b/form.d.ts
new file mode 100644
index 0000000000..c2117baa56
--- /dev/null
+++ b/form.d.ts
@@ -0,0 +1 @@
+export * from './lib/cjs/formio.form';
\ No newline at end of file
diff --git a/formio-js-v5.0.0-rc.27.tgz b/formio-js-v5.0.0-rc.27.tgz
new file mode 100644
index 0000000000..bb38179846
Binary files /dev/null and b/formio-js-v5.0.0-rc.27.tgz differ
diff --git a/package.json b/package.json
index c4c803c818..6ec9c5ba74 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@formio/js",
- "version": "5.0.0-rc.43",
+ "version": "5.0.0-rc.54",
"description": "JavaScript powered Forms with JSON Form Builder",
"main": "lib/cjs/index.js",
"exports": {
@@ -21,14 +21,18 @@
"require": "./lib/cjs/formio.form.js"
},
"./embed": {
- "import": "./lib/cjs/Embed.js",
- "require": "./lib/cjs/Embed.js"
+ "import": "./lib/cjs/InlineEmbed.js",
+ "require": "./lib/cjs/InlineEmbed.js"
},
"./dist/*": "./dist/*"
},
"files": [
"dist",
- "lib"
+ "lib",
+ "embed.d.ts",
+ "form.d.ts",
+ "sdk.d.ts",
+ "utils.d.ts"
],
"pre-commit": [
"lint"
@@ -75,9 +79,9 @@
},
"homepage": "https://github.com/formio/formio.js#readme",
"dependencies": {
- "@formio/bootstrap": "^3.0.0-rc.22",
+ "@formio/bootstrap": "^3.0.0-rc.24",
"@formio/choices.js": "^10.2.1",
- "@formio/core": "^2.1.0-dev.tt.2",
+ "@formio/core": "^2.1.0-dev.tt.8",
"@formio/text-mask-addons": "^3.8.0-formio.2",
"@formio/vanilla-text-mask": "^5.1.1-formio.1",
"abortcontroller-polyfill": "^1.7.5",
@@ -86,10 +90,10 @@
"browser-cookies": "^1.2.0",
"browser-md5-file": "^1.1.1",
"compare-versions": "^6.0.0-rc.2",
- "core-js": "^3.37.0",
+ "core-js": "^3.37.1",
"dialog-polyfill": "^0.5.6",
"dom-autoscroller": "^2.3.4",
- "dompurify": "^3.1.0",
+ "dompurify": "^3.1.3",
"downloadjs": "^1.4.7",
"dragula": "^3.7.3",
"eventemitter3": "^5.0.1",
@@ -105,7 +109,7 @@
"lodash": "^4.17.21",
"moment": "^2.29.4",
"moment-timezone": "^0.5.44",
- "quill": "^2.0.0-rc.4",
+ "quill": "^2.0.2",
"signature_pad": "^4.2.0",
"string-hash": "^1.1.3",
"tippy.js": "^6.3.7",
@@ -113,9 +117,9 @@
"vanilla-picker": "^2.12.3"
},
"devDependencies": {
- "@typescript-eslint/eslint-plugin": "^7.6.0",
- "@typescript-eslint/parser": "^7.6.0",
- "ace-builds": "1.33.0",
+ "@typescript-eslint/eslint-plugin": "^7.9.0",
+ "@typescript-eslint/parser": "^7.9.0",
+ "ace-builds": "1.33.2",
"async-limiter": "^2.0.0",
"bootstrap-icons": "^1.10.5",
"bootswatch": "^5.3.3",
@@ -125,7 +129,7 @@
"ejs-loader": "^0.5.0",
"escape-string-regexp": "^5.0.0",
"eslint": "^8.57.0",
- "eslint-plugin-jsdoc": "^48.2.3",
+ "eslint-plugin-jsdoc": "^48.2.5",
"fetch-mock": "^9.11.0",
"file-loader": "^6.2.0",
"flatpickr": "^4.6.13",
@@ -157,7 +161,7 @@
"pretty": "^2.0.0",
"pygments-css": "^1.0.0",
"raw-loader": "^4.0.2",
- "sass": "^1.74.1",
+ "sass": "^1.77.1",
"shortcut-buttons-flatpickr": "^0.4.0",
"sinon": "^17.0.1",
"string-replace-loader": "^3.1.0",
diff --git a/sdk.d.ts b/sdk.d.ts
new file mode 100644
index 0000000000..5343a42177
--- /dev/null
+++ b/sdk.d.ts
@@ -0,0 +1 @@
+export * from './lib/cjs/Formio';
\ No newline at end of file
diff --git a/src/InlineEmbed.js b/src/InlineEmbed.js
new file mode 100644
index 0000000000..5244c115ce
--- /dev/null
+++ b/src/InlineEmbed.js
@@ -0,0 +1,113 @@
+import { Formio } from './Embed';
+/**
+ * Inline embed a form within a webpage.
+ * @param {*} config - Configuration to configure how the inline embed is rendered.
+ */
+export function embed(config = {}) {
+ const scripts = document.getElementsByTagName('script');
+ config = Object.assign({}, window.FormioConfig || {}, config);
+ let thisScript = null;
+ let i = scripts.length;
+ const scriptName = config.scriptName || 'formio.embed.';
+ while (i--) {
+ if (
+ scripts[i].src && (scripts[i].src.indexOf(scriptName) !== -1)
+ ) {
+ thisScript = scripts[i];
+ break;
+ }
+ }
+
+ if (thisScript) {
+ const query = {};
+ const queryString = thisScript.src.replace(/^[^?]+\??/, '');
+ queryString.replace(/\?/g, '&').split('&').forEach((item) => {
+ query[item.split('=')[0]] = item.split('=')[1] && decodeURIComponent(item.split('=')[1]);
+ });
+
+ let scriptSrc = thisScript.src.replace(/^([^?]+).*/, '$1').split('/');
+ scriptSrc.pop();
+ if (config.formioPath) {
+ config.formioPath(scriptSrc);
+ }
+ scriptSrc = scriptSrc.join('/');
+ const debug = (query.debug === 'true' || query.debug === '1');
+ const renderer = debug ? 'formio.form' : 'formio.form.min';
+ Formio.config = Object.assign({
+ script: query.script || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.js`),
+ style: query.styles || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.css`),
+ cdn: query.cdn,
+ class: (query.class || 'formio-form-wrapper'),
+ src: query.src,
+ form: null,
+ submission: null,
+ project: query.project,
+ base: query.base || 'https://api.form.io',
+ submit: query.submit,
+ includeLibs: (query.libs === 'true' || query.libs === '1'),
+ template: query.template,
+ debug: debug,
+ config: {},
+ redirect: (query.return || query.redirect),
+ embedCSS: (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.embed.css`),
+ success: query.success || 'Thank you for your submission!',
+ before: null,
+ after: null
+ }, config);
+ const form = (Formio.config.form || Formio.config.src);
+ if (form) {
+ Formio.debug('Embedding Configuration', config);
+ if (Formio.config.addPremiumLib) {
+ Formio.config.addPremiumLib(Formio.config, scriptSrc);
+ }
+
+ // The id for this embedded form.
+ Formio.config.id = `formio-${Math.random().toString(36).substring(7)}`;
+ Formio.debug('Creating form element');
+ const element = Formio.createElement('div', {
+ 'id': Formio.config.id,
+ class: Formio.config.class
+ });
+
+ // insertAfter doesn't exist, but effect is identical.
+ thisScript.parentNode.insertBefore(element, thisScript.parentNode.firstElementChild.nextSibling);
+ Formio.createForm(element, form, Formio.config.config).then((instance) => {
+ if (Formio.config.submit) {
+ instance.nosubmit = true;
+ }
+
+ // Configure a redirect.
+ instance.on('submit', (submission) => {
+ Formio.debug("on('submit')", submission);
+ if (Formio.config.submit) {
+ Formio.debug(`Sending submission to ${Formio.config.submit}`);
+ const headers = {
+ 'content-type': 'application/json'
+ };
+ const token = Formio.FormioClass.getToken();
+ if (token) {
+ headers['x-jwt-token'] = token;
+ }
+ Formio.FormioClass.fetch(Formio.config.submit, {
+ body: JSON.stringify(submission),
+ headers: headers,
+ method: 'POST',
+ mode: 'cors',
+ })
+ .then(resp => resp.json())
+ .then(submission => Formio.submitDone(instance, submission));
+ }
+ else {
+ Formio.submitDone(instance, submission);
+ }
+ });
+ });
+ }
+ }
+ else {
+ // Show an error if the script cannot be found.
+ document.write('Could not locate the Embedded form.');
+ }
+}
+
+export { Formio };
diff --git a/src/Webform.js b/src/Webform.js
index d89b8c9d1b..a32811182d 100644
--- a/src/Webform.js
+++ b/src/Webform.js
@@ -57,6 +57,98 @@ function getOptions(options) {
return options;
}
+/**
+ * Represents a JSON value.
+ * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON
+ */
+
+/**
+ * Represents a JSON array.
+ * @typedef {Array} JSONArray
+ */
+
+/**
+ * Represents a JSON object.
+ * @typedef {{[key: string]: JSON}} JSONObject
+ */
+
+/**
+ * @typedef {object} FormioHooks
+ * @property {Function} [beforeSubmit] - A function that is called before the form is submitted.
+ * @property {Function} [beforeCancel] - A function that is called before the form is canceled.
+ * @property {Function} [beforeNext] - A function that is called before moving to the next page in a multi-page form.
+ * @property {Function} [beforePrev] - A function that is called before moving to the previous page in a multi-page form.
+ * @property {Function} [attachComponent] - A function that is called when a component is attached to the form.
+ * @property {Function} [setDataValue] - A function that is called when setting the value of a data component.
+ * @property {Function} [addComponents] - A function that is called when adding multiple components to the form.
+ * @property {Function} [addComponent] - A function that is called when adding a single component to the form.
+ * @property {Function} [customValidation] - A function that is called for custom validation of the form.
+ * @property {Function} [attachWebform] - A function that is called when attaching a webform to the form.
+ */
+
+/**
+ * @typedef {object} SanitizeConfig
+ * @property {string[]} [addAttr] - The attributes to add.
+ * @property {string[]} [addTags] - The tags to add.
+ * @property {string[]} [allowedAttrs] - The allowed attributes.
+ * @property {string[]} [allowedTags] - The allowed tags.
+ * @property {string[]} [allowedUriRegex] - The allowed URI regex.
+ * @property {string[]} [addUriSafeAttr] - The URI safe attributes.
+ */
+
+/**
+ * @typedef {object} ButtonSettings
+ * @property {boolean} [showPrevious] - Show the "Previous" button.
+ * @property {boolean} [showNext] - Show the "Next" button.
+ * @property {boolean} [showCancel] - Show the "Cancel" button.
+ * @property {boolean} [showSubmit] - Show the "Submit" button.
+ */
+
+/**
+ * @typedef {object} FormOptions
+ * @property {boolean} [saveDraft] - Enable the save draft feature.
+ * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
+ * @property {boolean} [readOnly] - Set this form to readOnly.
+ * @property {boolean} [noAlerts] - Disable the alerts dialog.
+ * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {string} [template] - Custom logic for creation of elements.
+ * @property {boolean} [noDefaults] - Exclude default values from the settings.
+ * @property {any} [fileService] - The file service for this form.
+ * @property {EventEmitter} [events] - The EventEmitter for this form.
+ * @property {string} [language] - The language to render this form in.
+ * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.
+ * @property {boolean} [viewAsHtml] - View the form as raw HTML.
+ * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.
+ * @property {boolean} [highlightErrors] - Highlight any errors on the form.
+ * @property {string} [componentErrorClass] - The error class for components.
+ * @property {any} [templates] - The templates for this form.
+ * @property {string} [iconset] - The iconset for this form.
+ * @property {import('@formio/core').Component[]} [components] - The components for this form.
+ * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.
+ * @property {boolean} [showHiddenFields] - Show hidden fields.
+ * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.
+ * @property {{[key: string]: boolean}} [show] - Components to show for this form.
+ * @property {Formio} [formio] - The Formio instance for this form.
+ * @property {string} [decimalSeparator] - The decimal separator for this form.
+ * @property {string} [thousandsSeparator] - The thousands separator for this form.
+ * @property {FormioHooks} [hooks] - The hooks for this form.
+ * @property {boolean} [alwaysDirty] - Always be dirty.
+ * @property {boolean} [skipDraftRestore] - Skip restoring a draft.
+ * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.
+ * @property {string} [cdnUrl] - The CDN url for this form.
+ * @property {boolean} [flatten] - Flatten the form.
+ * @property {boolean} [sanitize] - Sanitize the form.
+ * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.
+ * @property {ButtonSettings} [buttonSettings] - The button settings for this form.
+ * @property {object} [breadcrumbSettings] - The breadcrumb settings for this form.
+ * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).
+ * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).
+ * @property {boolean} [showCheckboxBackground] - Show the checkbox background.
+ * @property {boolean} [inputsOnly] - Only show inputs in the form and no labels.
+ * @property {boolean} [building] - If we are in the process of building the form.
+ * @property {number} [zoom] - The zoom for PDF forms.
+ */
+
/**
* Renders a Form.io form within the webpage.
*/
@@ -1600,7 +1692,7 @@ export default class Webform extends NestedDataComponent {
* @param {any} options - The options to use when submitting this form.
* @returns {Promise} - A promise when the form is done submitting.
*/
- submit(before, options = {}) {
+ submit(before = false, options = {}) {
this.submissionInProcess = true;
if (!before) {
return this.beforeSubmit(options).then(() => this.executeSubmit(options));
diff --git a/src/components/_classes/component/Component.js b/src/components/_classes/component/Component.js
index 3c3606f3c2..b61888bb01 100644
--- a/src/components/_classes/component/Component.js
+++ b/src/components/_classes/component/Component.js
@@ -958,7 +958,7 @@ export default class Component extends Element {
return this.options.renderMode === 'html';
}
- renderTemplate(name, data = {}, modeOption) {
+ renderTemplate(name, data = {}, modeOption = '') {
// Need to make this fall back to form if renderMode is not found similar to how we search templates.
const mode = modeOption || this.options.renderMode || 'form';
data.component = this.component;
@@ -1011,7 +1011,7 @@ export default class Component extends Element {
* @param {object} options - The options for the sanitize.
* @returns {*} - The sanitized html string.
*/
- sanitize(dirty, forceSanitize, options) {
+ sanitize(dirty, forceSanitize = false, options = {}) {
if (!this.shouldSanitizeValue && !forceSanitize) {
return dirty;
}
@@ -3372,7 +3372,7 @@ export default class Component extends Element {
* @param {*} flags - The flags to control the behavior of the validation.
* @returns {Array} - An array of errors if the component is invalid.
*/
- validateComponent(data, row, flags = {}) {
+ validateComponent(data = null, row = null, flags = {}) {
data = data || this.rootValue;
row = row || this.data;
const { async = false } = flags;
@@ -3412,7 +3412,7 @@ export default class Component extends Element {
* @param {Array} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.
* @returns {boolean} - TRUE if the component is valid.
*/
- checkComponentValidity(data, dirty, row, flags = {}, allErrors = []) {
+ checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {
data = data || this.rootValue;
row = row || this.data;
flags.dirty = dirty || false;
@@ -3456,14 +3456,14 @@ export default class Component extends Element {
* @param {Array} errors - An array of all errors that have occured so that it can be appended when another one occurs here.
* @returns {boolean} - TRUE if the component is valid.
*/
- checkValidity(data, dirty, row, silentCheck, errors = []) {
+ checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {
data = data || this.rootValue;
row = row || this.data;
console.log('Deprecation warning: Component.checkValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');
return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);
}
- checkAsyncValidity(data, dirty, row, silentCheck, errors = []) {
+ checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {
console.log('Deprecation warning: Component.checkAsyncValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');
return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);
}
@@ -3476,7 +3476,7 @@ export default class Component extends Element {
* @param {*} row - The contextual row data for this component.
* @returns {void|boolean} - TRUE if no check should be performed on the component.
*/
- checkData(data, flags, row) {
+ checkData(data = null, flags = null, row = null) {
data = data || this.rootValue;
flags = flags || {};
row = row || this.data;
@@ -3916,19 +3916,15 @@ export default class Component extends Element {
window.scrollTo(left + window.scrollX, top + window.scrollY);
}
- focus(index) {
+ focus(index = (this.refs.input.length - 1)) {
if ('beforeFocus' in this.parent) {
this.parent.beforeFocus(this);
}
if (this.refs.input?.length) {
- const focusingInput = typeof index === 'number' && this.refs.input[index]
- ? this.refs.input[index]
- : this.refs.input[this.refs.input.length - 1];
-
+ const focusingInput = this.refs.input[index];
if (this.component.widget?.type === 'calendar') {
const sibling = focusingInput.nextSibling;
-
if (sibling) {
sibling.focus();
}
diff --git a/src/components/_classes/nested/NestedComponent.js b/src/components/_classes/nested/NestedComponent.js
index e95612489d..bb4453de9b 100644
--- a/src/components/_classes/nested/NestedComponent.js
+++ b/src/components/_classes/nested/NestedComponent.js
@@ -266,7 +266,7 @@ export default class NestedComponent extends Field {
* @param {Function} fn - Called for every component.
* @param {any} options - The options to include with this everyComponent call.
*/
- everyComponent(fn, options) {
+ everyComponent(fn, options = {}) {
const components = this.getComponents();
_.each(components, (component, index) => {
if (fn(component, components, index) === false) {
@@ -390,7 +390,7 @@ export default class NestedComponent extends Field {
* @param {Function} fn - Called with the component once it is retrieved.
* @returns {object} - The component retrieved.
*/
- getComponentById(id, fn) {
+ getComponentById(id, fn = null) {
let comp = null;
this.everyComponent((component, components) => {
if (component.id === id) {
@@ -505,7 +505,7 @@ export default class NestedComponent extends Field {
* @param {boolean} [noAdd] - A possibly extraneous boolean flag.
* @returns {any} - The created component instance.
*/
- addComponent(component, data, before, noAdd) {
+ addComponent(component, data = null, before = null, noAdd = false) {
data = data || this.data;
this.components = this.components || [];
component = this.hook('addComponent', component, data, before, noAdd);
@@ -634,7 +634,7 @@ export default class NestedComponent extends Field {
* @param {Function} fn - Called once the component is removed.
* @returns {null|void} - Returns nothing if the component is not found.
*/
- removeComponentByKey(key, fn) {
+ removeComponentByKey(key, fn = null) {
const comp = this.getComponent(key, (component, components) => {
this.removeComponent(component, components);
if (fn) {
@@ -655,7 +655,7 @@ export default class NestedComponent extends Field {
* @param {Function} fn - Called when the component is removed.
* @returns {null|void} - Returns nothing if the component is not found.
*/
- removeComponentById(id, fn) {
+ removeComponentById(id, fn = null) {
const comp = this.getComponentById(id, (component, components) => {
this.removeComponent(component, components);
if (fn) {
@@ -780,7 +780,7 @@ export default class NestedComponent extends Field {
* @param {object} flags - The flags to use when validating.
* @returns {Promise|Array} - The errors if any exist.
*/
- validateComponents(components, data, flags = {}) {
+ validateComponents(components = null, data = null, flags = {}) {
components = components || this.component.components;
data = data || this.rootValue;
const { async, dirty, process } = flags;
@@ -822,23 +822,32 @@ export default class NestedComponent extends Field {
* @param {object} flags - The flags to use when validating.
* @returns {Array} - The errors if any exist.
*/
- validate(data, flags = {}) {
+ validate(data = null, flags = {}) {
data = data || this.rootValue;
return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);
}
- checkComponentValidity(data, dirty, row, flags = {}, allErrors = []) {
+ checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {
this.childErrors = [];
return super.checkComponentValidity(data, dirty, row, flags, allErrors);
}
- checkValidity(data, dirty, row, silentCheck, childErrors = []) {
+ /**
+ * Checks the validity of the component.
+ * @param {*} data - The data to check if the component is valid.
+ * @param {boolean} dirty - If the component is dirty.
+ * @param {*} row - The contextual row data for this component.
+ * @param {boolean} silentCheck - If the check should be silent and not set the error messages.
+ * @param {Array} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.
+ * @returns {boolean} - TRUE if the component is valid.
+ */
+ checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {
console.log('Deprecation warning: Component.checkValidity() will be deprecated in 6.x version of renderer. Use "validate" method instead.');
childErrors.push(...this.validate(data, { dirty, silentCheck }));
return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;
}
- checkAsyncValidity(data, dirty, row, silentCheck) {
+ checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {
console.log('Deprecation warning: Component.checkAsyncValidity() will be deprecated in 6.x version of renderer.');
return this.ready.then(() => {
return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {
diff --git a/src/components/_classes/nestedarray/NestedArrayComponent.js b/src/components/_classes/nestedarray/NestedArrayComponent.js
index 0b0edafedb..b3dbb00455 100644
--- a/src/components/_classes/nestedarray/NestedArrayComponent.js
+++ b/src/components/_classes/nestedarray/NestedArrayComponent.js
@@ -155,7 +155,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
return result;
}
- everyComponent(fn, rowIndex, options) {
+ everyComponent(fn, rowIndex, options = {}) {
if (_.isObject(rowIndex)) {
options = rowIndex;
rowIndex = null;
diff --git a/src/components/_classes/nesteddata/NestedDataComponent.js b/src/components/_classes/nesteddata/NestedDataComponent.js
index 1ff0ee375a..82b62b41fe 100644
--- a/src/components/_classes/nesteddata/NestedDataComponent.js
+++ b/src/components/_classes/nesteddata/NestedDataComponent.js
@@ -106,7 +106,7 @@ export default class NestedDataComponent extends NestedComponent {
return result;
}
- everyComponent(fn, options) {
+ everyComponent(fn, options = {}) {
if (options?.email) {
if (options.fromRoot) {
delete options.fromRoot;
diff --git a/src/formio.embed.js b/src/formio.embed.js
index c7d9ec4e7e..9d693a95db 100644
--- a/src/formio.embed.js
+++ b/src/formio.embed.js
@@ -1,107 +1,2 @@
-import { Formio } from './Embed';
-const scripts = document.getElementsByTagName('script');
-const config = window.FormioConfig || {};
-let thisScript = null;
-let i = scripts.length;
-const scriptName = config.scriptName || 'formio.embed.';
-while (i--) {
- if (
- scripts[i].src && (scripts[i].src.indexOf(scriptName) !== -1)
- ) {
- thisScript = scripts[i];
- break;
- }
-}
-
-if (thisScript) {
- const query = {};
- const queryString = thisScript.src.replace(/^[^?]+\??/, '');
- queryString.replace(/\?/g, '&').split('&').forEach((item) => {
- query[item.split('=')[0]] = item.split('=')[1] && decodeURIComponent(item.split('=')[1]);
- });
-
- let scriptSrc = thisScript.src.replace(/^([^?]+).*/, '$1').split('/');
- scriptSrc.pop();
- if (config.formioPath) {
- config.formioPath(scriptSrc);
- }
- scriptSrc = scriptSrc.join('/');
- const debug = (query.debug === 'true' || query.debug === '1');
- const renderer = debug ? 'formio.form' : 'formio.form.min';
- Formio.config = Object.assign({
- script: query.script || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.js`),
- style: query.styles || (`${config.updatePath ? config.updatePath() : scriptSrc}/${renderer}.css`),
- cdn: query.cdn,
- class: (query.class || 'formio-form-wrapper'),
- src: query.src,
- form: null,
- submission: null,
- project: query.project,
- base: query.base || 'https://api.form.io',
- submit: query.submit,
- includeLibs: (query.libs === 'true' || query.libs === '1'),
- template: query.template,
- debug: debug,
- config: {},
- redirect: (query.return || query.redirect),
- embedCSS: (`${config.updatePath ? config.updatePath() : scriptSrc}/formio.embed.css`),
- success: query.success || 'Thank you for your submission!',
- before: null,
- after: null
- }, config);
- const form = (Formio.config.form || Formio.config.src);
- if (form) {
- Formio.debug('Embedding Configuration', config);
- if (Formio.config.addPremiumLib) {
- Formio.config.addPremiumLib(Formio.config, scriptSrc);
- }
-
- // The id for this embedded form.
- Formio.config.id = `formio-${Math.random().toString(36).substring(7)}`;
- Formio.debug('Creating form element');
- const element = Formio.createElement('div', {
- 'id': Formio.config.id,
- class: Formio.config.class
- });
-
- // insertAfter doesn't exist, but effect is identical.
- thisScript.parentNode.insertBefore(element, thisScript.parentNode.firstElementChild.nextSibling);
- Formio.createForm(element, form, Formio.config.config).then((instance) => {
- if (Formio.config.submit) {
- instance.nosubmit = true;
- }
-
- // Configure a redirect.
- instance.on('submit', (submission) => {
- Formio.debug("on('submit')", submission);
- if (Formio.config.submit) {
- Formio.debug(`Sending submission to ${Formio.config.submit}`);
- const headers = {
- 'content-type': 'application/json'
- };
- const token = Formio.FormioClass.getToken();
- if (token) {
- headers['x-jwt-token'] = token;
- }
- Formio.FormioClass.fetch(Formio.config.submit, {
- body: JSON.stringify(submission),
- headers: headers,
- method: 'POST',
- mode: 'cors',
- })
- .then(resp => resp.json())
- .then(submission => Formio.submitDone(instance, submission));
- }
- else {
- Formio.submitDone(instance, submission);
- }
- });
- });
- }
-}
-else {
- // Show an error if the script cannot be found.
- document.write('Could not locate the Embedded form.