@formio/js 5.1.0-dev.6046.0d30acf → 5.1.0-dev.6048.569bfc1
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 +5 -5
- package/dist/formio.form.min.js +1 -1
- package/dist/formio.full.js +6 -6
- package/dist/formio.full.min.js +1 -1
- package/dist/formio.utils.js +1 -1
- package/dist/formio.utils.min.js +1 -1
- package/lib/cjs/components/_classes/component/Component.d.ts +14 -0
- package/lib/cjs/components/_classes/component/Component.js +35 -11
- package/lib/cjs/components/_classes/nested/NestedComponent.d.ts +0 -1
- package/lib/cjs/components/_classes/nested/NestedComponent.js +0 -11
- package/lib/cjs/components/address/Address.d.ts +1 -0
- package/lib/cjs/components/datagrid/DataGrid.js +0 -3
- package/lib/cjs/components/editgrid/EditGrid.js +0 -8
- package/lib/cjs/components/select/editForm/Select.edit.data.js +1 -1
- package/lib/cjs/utils/utils.d.ts +0 -8
- package/lib/cjs/utils/utils.js +1 -22
- package/lib/mjs/components/_classes/component/Component.d.ts +14 -0
- package/lib/mjs/components/_classes/component/Component.js +36 -12
- package/lib/mjs/components/_classes/nested/NestedComponent.d.ts +0 -1
- package/lib/mjs/components/_classes/nested/NestedComponent.js +0 -11
- package/lib/mjs/components/address/Address.d.ts +1 -0
- package/lib/mjs/components/datagrid/DataGrid.js +0 -3
- package/lib/mjs/components/editgrid/EditGrid.js +0 -7
- package/lib/mjs/components/select/editForm/Select.edit.data.js +1 -1
- package/lib/mjs/utils/utils.d.ts +0 -8
- package/lib/mjs/utils/utils.js +0 -20
- package/package.json +1 -1
package/dist/formio.form.js
CHANGED
@@ -4853,7 +4853,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4853
4853
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
4854
4854
|
|
4855
4855
|
"use strict";
|
4856
|
-
eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* globals Quill, ClassicEditor, CKEDITOR */\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ismobilejs_1 = __importDefault(__webpack_require__(/*! ismobilejs */ \"./node_modules/ismobilejs/esm/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Element_1 = __importDefault(__webpack_require__(/*! ../../../Element */ \"./lib/cjs/Element.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst widgets_1 = __importDefault(__webpack_require__(/*! ../../../widgets */ \"./lib/cjs/widgets/index.js\"));\nconst addons_1 = __importDefault(__webpack_require__(/*! ../../../addons */ \"./lib/cjs/addons/index.js\"));\nconst uploadAdapter_1 = __webpack_require__(/*! ../../../providers/storage/uploadAdapter */ \"./lib/cjs/providers/storage/uploadAdapter.js\");\nconst en_1 = __importDefault(__webpack_require__(/*! ../../../translations/en */ \"./lib/cjs/translations/en.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ../../../templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nconst isIEBrowser = FormioUtils.getBrowserInfo().ie;\n/**\n * This is the Component class\n which all elements within the FormioForm derive from.\n */\nclass Component extends Element_1.default {\n static schema(...sources) {\n return lodash_1.default.merge({\n /**\n * Determines if this component provides an input.\n */\n input: true,\n /**\n * The data key for this component (how the data is stored in the database).\n */\n key: '',\n /**\n * The input placeholder for this component.\n */\n placeholder: '',\n /**\n * The input prefix\n */\n prefix: '',\n /**\n * The custom CSS class to provide to this component.\n */\n customClass: '',\n /**\n * The input suffix.\n */\n suffix: '',\n /**\n * If this component should allow an array of values to be captured.\n */\n multiple: false,\n /**\n * The default value of this component.\n */\n defaultValue: null,\n /**\n * If the data of this component should be protected (no GET api requests can see the data)\n */\n protected: false,\n /**\n * Validate if the value of this component should be unique within the form.\n */\n unique: false,\n /**\n * If the value of this component should be persisted within the backend api database.\n */\n persistent: true,\n /**\n * Determines if the component should be within the form, but not visible.\n */\n hidden: false,\n /**\n * If the component should be cleared when hidden.\n */\n clearOnHide: true,\n /**\n * This will refresh this component options when this field changes.\n */\n refreshOn: '',\n /**\n * This will redraw the component when this field changes.\n */\n redrawOn: '',\n /**\n * If this component should be included as a column within a submission table.\n */\n tableView: false,\n /**\n * If this component should be rendering in modal.\n */\n modalEdit: false,\n /**\n * The input label provided to this component.\n */\n label: '',\n dataGridLabel: false,\n labelPosition: 'top',\n description: '',\n errorLabel: '',\n tooltip: '',\n hideLabel: false,\n tabindex: '',\n disabled: false,\n autofocus: false,\n dbIndex: false,\n customDefaultValue: '',\n calculateValue: '',\n calculateServer: false,\n widget: null,\n /**\n * Attributes that will be assigned to the input elements of this component.\n */\n attributes: {},\n /**\n * This will perform the validation on either \"change\" or \"blur\" of the input element.\n */\n validateOn: 'change',\n /**\n * The validation criteria for this component.\n */\n validate: {\n /**\n * If this component is required.\n */\n required: false,\n /**\n * Custom JavaScript validation.\n */\n custom: '',\n /**\n * If the custom validation should remain private (only the backend will see it and execute it).\n */\n customPrivate: false,\n /**\n * If this component should implement a strict date validation if the Calendar widget is implemented.\n */\n strictDateValidation: false,\n multiple: false,\n unique: false\n },\n /**\n * The simple conditional settings for a component.\n */\n conditional: {\n show: null,\n when: null,\n eq: ''\n },\n overlay: {\n style: '',\n left: '',\n top: '',\n width: '',\n height: '',\n },\n allowCalculateOverride: false,\n encrypted: false,\n showCharCount: false,\n showWordCount: false,\n properties: {},\n allowMultipleMasks: false,\n addons: [],\n serverOverride: {},\n }, ...sources);\n }\n /**\n * Return the simple condition settings as part of the component.\n * @returns {object} - The simple conditional settings.\n */\n static get conditionOperatorsSettings() {\n return {\n operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n valueComponent() {\n return {\n type: 'textfield',\n widget: {\n type: 'input'\n }\n };\n }\n };\n }\n /**\n * Return the array of possible types of component value absed on its schema.\n * @param schema\n * @returns {Array}\n */\n static savedValueTypes(schema) {\n schema = schema || {};\n return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];\n }\n /**\n * Provides a table view for this component. Override if you wish to do something different than using getView\n * method of your instance.\n * @param value\n * @param options\n */\n /* eslint-disable no-unused-vars */\n static tableView(value, options) { }\n /* eslint-enable no-unused-vars */\n /**\n * Initialize a new Component.\n * @param {object} component - The component JSON you wish to initialize.\n * @param {object} options - The options for this component.\n * @param {object} data - The global data submission object this component will belong.\n */\n /* eslint-disable max-statements */\n constructor(component, options, data) {\n var _a, _b, _c, _d;\n super(Object.assign({\n renderMode: 'form',\n attachMode: 'full',\n noDefaults: false\n }, options || {}));\n // Restore the component id.\n if (component && component.id) {\n this.id = component.id;\n }\n /**\n * Determines if this component has a condition assigned to it.\n * @type {null}\n * @private\n */\n this._hasCondition = null;\n /**\n * The row index for this component.\n */\n this._rowIndex = undefined;\n /**\n * References to dom elements\n */\n this.refs = {};\n // Allow global override for any component JSON.\n if (component &&\n this.options.components &&\n this.options.components[component.type]) {\n lodash_1.default.merge(component, this.options.components[component.type]);\n }\n /**\n * An array of all the children components errors.\n */\n this.childErrors = [];\n /**\n * Last validation errors that have occured.\n */\n this._errors = [];\n this._visibleErrors = [];\n /**\n * The Form.io component JSON schema.\n * @type {*}\n */\n this.component = this.mergeSchema(component || {});\n // Add the id to the component.\n this.component.id = this.id;\n this.afterComponentAssign();\n // Save off the original component to be used in logic.\n this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n /**\n * If the component has been attached\n */\n this.attached = false;\n /**\n * If the component has been rendered\n */\n this.rendered = false;\n /**\n * The data object in which this component resides.\n * @type {*}\n */\n this._data = data || {};\n /**\n * Tool tip text after processing\n * @type {string}\n */\n this.tooltip = '';\n /**\n * The row path of this component.\n * @type {number}\n */\n this.row = this.options.row;\n /**\n * Points to a flat map of child components (if applicable).\n * @type {object}\n */\n this.childComponentsMap = {};\n /**\n * Determines if this component is disabled, or not.\n * @type {boolean}\n */\n this._disabled = (0, utils_1.boolValue)(this.component.disabled) ? this.component.disabled : false;\n /**\n * Points to the root component, usually the FormComponent.\n * @type {Component}\n */\n this.root = this.options.root || this;\n this.localRoot = this.options.localRoot || this;\n /**\n * If this input has been input and provided value.\n * @type {boolean}\n */\n this.pristine = true;\n /**\n * Points to the parent component.\n * @type {Component}\n */\n this.parent = this.options.parent;\n /**\n * The component paths for this component.\n * @type {import('@formio/core').ComponentPaths} - The component paths.\n */\n this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));\n this.options.name = this.options.name || 'data';\n this._path = '';\n // Needs for Nextgen Rules Engine\n this.resetCaches();\n /**\n * Determines if this component is visible, or not.\n */\n this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;\n this._visible = this._parentVisible && (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n this._parentDisabled = false;\n /**\n * The reference attribute name for this component\n */\n this._referenceAttributeName = 'ref';\n /**\n * Used to trigger a new change in this component.\n * @type {Function} - Call to trigger a change in this component.\n */\n let changes = [];\n let lastChanged = null;\n let triggerArgs = [];\n const _triggerChange = lodash_1.default.debounce((...args) => {\n if (this.root) {\n this.root.changing = false;\n }\n triggerArgs = [];\n if (!args[1] && lastChanged) {\n // Set the changed component if one isn't provided.\n args[1] = lastChanged;\n }\n if (lodash_1.default.isEmpty(args[0]) && lastChanged) {\n // Set the flags if it is empty and lastChanged exists.\n args[0] = lastChanged.flags;\n }\n lastChanged = null;\n args[3] = changes;\n const retVal = this.onChange(...args);\n changes = [];\n return retVal;\n }, 100);\n this.triggerChange = (...args) => {\n if (args[1]) {\n // Make sure that during the debounce that we always track lastChanged component, even if they\n // don't provide one later.\n lastChanged = args[1];\n changes.push(lastChanged);\n }\n if (this.root) {\n this.root.changing = true;\n }\n if (args.length) {\n triggerArgs = args;\n }\n return _triggerChange(...triggerArgs);\n };\n /**\n * Used to trigger a redraw event within this component.\n * @type {Function}\n */\n this.triggerRedraw = lodash_1.default.debounce(this.redraw.bind(this), 100);\n /**\n * list of attached tooltips\n * @type {Array}\n */\n this.tooltips = [];\n /**\n * List of attached addons\n * @type {Array}\n */\n this.addons = [];\n // To force this component to be invalid.\n this.invalid = false;\n if (this.component) {\n this.type = this.component.type;\n if (this.allowData && this.key) {\n this.options.name += `[${this.key}]`;\n // If component is visible or not set to clear on hide, set the default value.\n if (!(this.conditionallyHidden() && this.component.clearOnHide)) {\n if (!this.hasValue()) {\n if (this.shouldAddDefaultValue) {\n this.dataValue = this.defaultValue;\n }\n }\n else {\n // Ensure the dataValue is set.\n /* eslint-disable no-self-assign */\n this.dataValue = this.dataValue;\n /* eslint-enable no-self-assign */\n }\n }\n }\n /**\n * The element information for creating the input element.\n * @type {*}\n */\n this.info = this.elementInfo();\n }\n // Allow anyone to hook into the component creation.\n this.hook('component');\n if (!this.options.skipInit) {\n if (typeof this.beforeInit === 'function') {\n this.beforeInit();\n }\n this.init();\n }\n }\n /* eslint-enable max-statements */\n get componentsMap() {\n var _a;\n return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};\n }\n parentConditionallyHidden() {\n let currentParent = this.parent;\n while (currentParent) {\n if (currentParent.conditionallyHidden(true)) {\n return true;\n }\n currentParent = currentParent.parent;\n }\n return false;\n }\n get data() {\n return this._data;\n }\n set data(value) {\n this._data = value;\n }\n mergeSchema(component = {}) {\n return lodash_1.default.defaultsDeep(component, this.defaultSchema);\n }\n // Allow componets to notify when ready.\n get ready() {\n return Promise.resolve(this);\n }\n get isPDFReadOnlyMode() {\n return this.parent &&\n this.parent.form &&\n (this.parent.form.display === 'pdf') &&\n this.options.readOnly;\n }\n get labelInfo() {\n const label = {};\n label.hidden = this.labelIsHidden();\n label.className = '';\n label.labelPosition = this.component.labelPosition;\n label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;\n const isPDFReadOnlyMode = this.isPDFReadOnlyMode;\n if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {\n label.className += ' field-required';\n }\n if (label.hidden) {\n label.className += ' control-label--hidden';\n }\n if (this.info.attr.id) {\n label.for = this.info.attr.id;\n }\n return label;\n }\n init() {\n var _a;\n this.disabled = this.shouldDisabled;\n this._visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {\n this.component.addons.forEach((addon) => this.createAddon(addon));\n }\n }\n /**\n * Get Row Index.\n * @returns {number} - The row index.\n */\n get rowIndex() {\n return this._rowIndex;\n }\n /**\n * Set Row Index to row and update each component.\n * @param {number} value - The row index.\n * @returns {void}\n */\n set rowIndex(value) {\n var _a, _b;\n this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n this._rowIndex = value;\n }\n afterComponentAssign() {\n //implement in extended classes\n }\n createAddon(addonConfiguration) {\n var _a;\n const name = addonConfiguration.name;\n if (!name) {\n return;\n }\n const settings = ((_a = addonConfiguration.settings) === null || _a === void 0 ? void 0 : _a.data) || {};\n const Addon = addons_1.default[name.value];\n let addon = null;\n if (Addon) {\n const supportedComponents = Addon.info.supportedComponents;\n const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) ||\n supportedComponents.indexOf(this.component.type) !== -1;\n if (supportsThisComponentType) {\n addon = new Addon(settings, this);\n this.addons.push(addon);\n }\n else {\n console.warn(this.t('addonSupportTypeError', {\n type: this.component.type,\n label: name.label\n }));\n }\n }\n return addon;\n }\n teardown() {\n if (this.element) {\n delete this.element.component;\n delete this.element;\n }\n delete this._currentForm;\n delete this.parent;\n delete this.root;\n delete this.triggerChange;\n delete this.triggerRedraw;\n if (this.options) {\n delete this.options.root;\n delete this.options.parent;\n delete this.options.i18next;\n }\n super.teardown();\n }\n destroy(all = false) {\n super.destroy(all);\n this.detach();\n this.addons.forEach((addon) => addon.destroy());\n if (all) {\n this.teardown();\n }\n }\n get shouldDisabled() {\n return this.options.readOnly || this.component.disabled || (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]);\n }\n get isInputComponent() {\n return !this.component.hasOwnProperty('input') || this.component.input;\n }\n get allowData() {\n return this.hasInput;\n }\n get hasInput() {\n return this.isInputComponent || (this.refs.input && this.refs.input.length);\n }\n get defaultSchema() {\n return Component.schema();\n }\n get key() {\n return lodash_1.default.get(this.component, 'key', '');\n }\n get path() {\n return this.paths.dataPath;\n }\n set path(path) {\n throw new Error(this.t('setPathError'));\n }\n set parentVisible(value) {\n this._parentVisible = value;\n }\n get parentVisible() {\n return this._parentVisible;\n }\n set parentDisabled(value) {\n this._parentDisabled = value;\n }\n get parentDisabled() {\n return this._parentDisabled;\n }\n shouldForceVisibility(component, visibility) {\n if (!this.options[visibility]) {\n return false;\n }\n if (!component) {\n component = this.component;\n }\n if (lodash_1.default.isArray(this.options[visibility])) {\n return this.options[visibility].includes(component.key);\n }\n return this.options[visibility][component.key];\n }\n shouldForceHide(component) {\n return this.shouldForceVisibility(component, 'hide');\n }\n shouldForceShow(component) {\n return this.shouldForceVisibility(component, 'show');\n }\n /**\n * Sets the component visibility.\n * @param {boolean} value - Whether the component should be visible or not.\n */\n set visible(value) {\n if (this._visible !== value) {\n // Skip if this component is set to visible and is supposed to be hidden.\n if (value && this.shouldForceHide()) {\n return;\n }\n // Skip if this component is set to hidden and is supposed to be shown.\n if (!value && this.shouldForceShow()) {\n return;\n }\n this._visible = value;\n this.redraw();\n }\n }\n /**\n * Returns the component visibility\n * @returns {boolean} - Whether the component is visible or not.\n */\n get visible() {\n // Show only if visibility changes or if we are in builder mode or if hidden fields should be shown.\n if (this.builderMode || this.previewMode || this.options.showHiddenFields) {\n return true;\n }\n if (this.shouldForceHide()) {\n return false;\n }\n if (this.shouldForceShow()) {\n return true;\n }\n return this._visible && this._parentVisible;\n }\n get logicallyHidden() {\n if (this._logicallyHidden && !this.component.hidden) {\n this._logicallyHidden = false;\n }\n return this._logicallyHidden;\n }\n conditionallyHidden(skipParent = false) {\n if (!this.hasCondition()) {\n return this.logicallyHidden || (skipParent ? false : this.parentConditionallyHidden());\n }\n return !this.conditionallyVisible() || this.logicallyHidden || (skipParent ? false : this.parentConditionallyHidden());\n }\n get currentForm() {\n return this._currentForm;\n }\n set currentForm(instance) {\n this._currentForm = instance;\n }\n get fullMode() {\n return this.options.attachMode === 'full';\n }\n get builderMode() {\n return this.options.attachMode === 'builder';\n }\n get calculatedPath() {\n console.error(this.t('calculatedPathDeprecation'));\n return this.path;\n }\n get labelPosition() {\n return this.component.labelPosition;\n }\n get labelWidth() {\n const width = this.component.labelWidth;\n return width >= 0 ? width : 30;\n }\n get labelMargin() {\n const margin = this.component.labelMargin;\n return margin >= 0 ? margin : 3;\n }\n get isAdvancedLabel() {\n return [\n 'left-left',\n 'left-right',\n 'right-left',\n 'right-right'\n ].includes(this.labelPosition);\n }\n get labelPositions() {\n return this.labelPosition.split('-');\n }\n get skipInEmail() {\n return false;\n }\n rightDirection(direction) {\n if (this.options.condensedMode) {\n return false;\n }\n return direction === 'right';\n }\n getLabelInfo(isCondensed = false) {\n const isRightPosition = this.rightDirection(this.labelPositions[0]);\n const isLeftPosition = this.labelPositions[0] === 'left' || isCondensed;\n const isRightAlign = this.rightDirection(this.labelPositions[1]);\n let contentMargin = '';\n if (this.component.hideLabel) {\n const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;\n contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';\n contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';\n }\n const labelStyles = `\n flex: ${this.labelWidth};\n ${isRightPosition ? 'margin-left' : 'margin-right'}: ${this.labelMargin}%;\n `;\n const contentStyles = `\n flex: ${100 - this.labelWidth - this.labelMargin};\n ${contentMargin};\n ${this.component.hideLabel ? `max-width: ${100 - this.labelWidth - this.labelMargin}` : ''};\n `;\n return {\n isRightPosition,\n isRightAlign,\n labelStyles,\n contentStyles\n };\n }\n /**\n * Returns only the schema that is different from the default.\n * @param {object} schema - The \"full\" json schema for the component.\n * @param {object} defaultSchema - The \"default\" json schema for the component.\n * @param {boolean} recursion - If we are currently in a recursive loop.\n * @returns {object} - The minified json schema for this component.\n */\n getModifiedSchema(schema, defaultSchema, recursion) {\n const modified = {};\n if (!defaultSchema) {\n return schema;\n }\n lodash_1.default.each(schema, (val, key) => {\n if (!lodash_1.default.isArray(val) && lodash_1.default.isObject(val) && defaultSchema.hasOwnProperty(key)) {\n const subModified = this.getModifiedSchema(val, defaultSchema[key], true);\n if (!lodash_1.default.isEmpty(subModified)) {\n modified[key] = subModified;\n }\n }\n else if (lodash_1.default.isArray(val)) {\n if (val.length !== 0 && !lodash_1.default.isEqual(val, defaultSchema[key])) {\n modified[key] = val;\n }\n }\n else if ((!recursion && (key === 'type')) ||\n (!recursion && (key === 'key')) ||\n (!recursion && (key === 'label')) ||\n (!recursion && (key === 'input')) ||\n (!recursion && (key === 'tableView')) ||\n (val !== '' && !defaultSchema.hasOwnProperty(key)) ||\n (val !== '' && val !== defaultSchema[key]) ||\n (defaultSchema[key] && val !== defaultSchema[key])) {\n modified[key] = val;\n }\n });\n return modified;\n }\n /**\n * Returns the JSON schema for this component.\n * @returns {object} - The JSON schema for this component.\n */\n get schema() {\n return (0, utils_1.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));\n }\n /**\n * Returns true if component is inside DataGrid\n * @returns {boolean} - True if component is inside DataGrid\n */\n get isInDataGrid() {\n return this.inDataGrid;\n }\n /**\n * Translate a text using the i18n system.\n * @param {string} text - The i18n identifier.\n * @param {object} params - The i18n parameters to use for translation.\n * @param {...any} args - Additional arguments to pass to the translation library.\n * @returns {string} - The translated text.\n */\n t(text, params = {}, ...args) {\n if (!text) {\n return '';\n }\n // Use _userInput: true to ignore translations from defaults\n if (text in en_1.default && params._userInput) {\n return text;\n }\n params.data = params.data || this.rootValue;\n params.row = params.row || this.data;\n params.component = params.component || this.component;\n return super.t(text, params, ...args);\n }\n labelIsHidden() {\n return !this.component.label ||\n ((!this.isInDataGrid && this.component.hideLabel) ||\n (this.isInDataGrid && !this.component.dataGridLabel) ||\n this.options.floatingLabels ||\n this.options.inputsOnly) && !this.builderMode;\n }\n transform(type, value) {\n const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n return frameworkTemplates.hasOwnProperty('transform')\n ? frameworkTemplates.transform(type, value, this)\n : (type, value) => value;\n }\n getTemplate(names, modes) {\n modes = Array.isArray(modes) ? modes : [modes];\n names = Array.isArray(names) ? names : [names];\n if (!modes.includes('form')) {\n modes.push('form');\n }\n let result = null;\n if (this.options.templates) {\n result = this.checkTemplate(this.options.templates, names, modes);\n if (result) {\n return result;\n }\n }\n const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n result = this.checkTemplate(frameworkTemplates, names, modes);\n if (result) {\n return result;\n }\n // Default back to bootstrap if not defined.\n const name = names[names.length - 1];\n const templatesByName = Templates_1.default.defaultTemplates[name];\n if (!templatesByName) {\n return { template: this.t('unknownTemplate', { name }) };\n }\n const templateByMode = this.checkTemplateMode(templatesByName, modes);\n if (templateByMode) {\n return { template: templateByMode };\n }\n return { template: templatesByName.form };\n }\n checkTemplate(templates, names, modes) {\n for (const name of names) {\n const templatesByName = templates[name];\n if (templatesByName) {\n const { referenceAttributeName } = templatesByName;\n const templateByMode = this.checkTemplateMode(templatesByName, modes);\n if (templateByMode) {\n return { template: templateByMode, referenceAttributeName };\n }\n }\n }\n return null;\n }\n checkTemplateMode(templatesByName, modes) {\n for (const mode of modes) {\n const templateByMode = templatesByName[mode];\n if (templateByMode) {\n return templateByMode;\n }\n }\n return null;\n }\n getFormattedAttribute(attr) {\n return attr ? this.t(attr, { _userInput: true }).replace(/\"/g, '"') : '';\n }\n getFormattedTooltip(tooltipValue) {\n const tooltip = this.interpolate(tooltipValue || '').replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n return this.getFormattedAttribute(tooltip);\n }\n isHtmlRenderMode() {\n return this.options.renderMode === 'html';\n }\n renderTemplate(name, data = {}, modeOption = '') {\n // Need to make this fall back to form if renderMode is not found similar to how we search templates.\n const mode = modeOption || this.options.renderMode || 'form';\n data.component = this.component;\n data.self = this;\n data.options = this.options;\n data.readOnly = this.options.readOnly;\n data.iconClass = this.iconClass.bind(this);\n data.size = this.size.bind(this);\n data.t = this.t.bind(this);\n data.transform = this.transform.bind(this);\n data.id = data.id || this.id;\n data.key = data.key || this.key;\n data.value = data.value || this.dataValue;\n data.disabled = this.disabled;\n data.builder = this.builderMode;\n data.render = (...args) => {\n console.warn(this.t('renderTemplateFunctionDeprecation'));\n return this.renderTemplate(...args);\n };\n data.label = data.labelInfo || this.labelInfo;\n data.tooltip = this.getFormattedTooltip(this.component.tooltip);\n // Allow more specific template names\n const names = [\n `${name}-${this.component.type}-${this.key}`,\n `${name}-${this.component.type}`,\n `${name}-${this.key}`,\n `${name}`,\n ];\n // Allow template alters.\n const { referenceAttributeName, template } = this.getTemplate(names, mode);\n if (referenceAttributeName) {\n this._referenceAttributeName = referenceAttributeName;\n }\n return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);\n }\n /**\n * Sanitize an html string.\n * @param {string} dirty - The dirty html string to sanitize.\n * @param {boolean} forceSanitize - If we should force the sanitize to occur.\n * @param {object} options - The options for the sanitize.\n * @returns {*} - The sanitized html string.\n */\n sanitize(dirty, forceSanitize = false, options = {}) {\n var _a;\n if (!this.shouldSanitizeValue && !forceSanitize) {\n return dirty;\n }\n return FormioUtils.sanitize(dirty, {\n sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),\n });\n }\n /**\n * Render a template string into html.\n * @param {string} template - The template to render.\n * @param {object} data - The data to provide to the template.\n * @returns {HTMLElement | string} - The created element or an empty string if template is not specified.\n */\n renderString(template, data) {\n if (!template) {\n return '';\n }\n // Interpolate the template and populate\n return this.interpolate(template, data);\n }\n /**\n * Allows for modification of the component value prior to submission.\n * @param {*} input - The input to be modified.\n * @returns {*} - The modified input mapping for the extended component.\n */\n performInputMapping(input) {\n return input;\n }\n /**\n * Returns the component \"widget\" if one is available.\n * @returns {Widget|null} - The widget instance. null if not available.\n */\n get widget() {\n var _a;\n const settings = this.component.widget;\n if (settings && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {\n settings.shadowRoot = this.root.shadowRoot;\n }\n const widget = settings && widgets_1.default[settings.type] ? new widgets_1.default[settings.type](settings, this.component, this) : null;\n return widget;\n }\n /**\n * Returns the native supported browser language.\n * @returns {string|null} - The native browser language that is supported.\n */\n getBrowserLanguage() {\n const nav = window.navigator;\n const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];\n let language;\n // support for HTML 5.1 \"navigator.languages\"\n if (Array.isArray(nav.languages)) {\n for (let i = 0; i < nav.languages.length; i++) {\n language = nav.languages[i];\n if (language && language.length) {\n return language.split(';')[0];\n }\n }\n }\n // support for other well known properties in browsers\n for (let i = 0; i < browserLanguagePropertyKeys.length; i++) {\n language = nav[browserLanguagePropertyKeys[i]];\n if (language && language.length) {\n return language.split(';')[0];\n }\n }\n return null;\n }\n /**\n * Called before a next and previous page is triggered allowing the components to perform special functions.\n * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next/previous page navigation.\n */\n beforePage() {\n return Promise.resolve(true);\n }\n /**\n * Called before the next page is triggered allowing the components to hook into the page navigation and perform tasks.\n * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next page navigation.\n */\n beforeNext() {\n return this.beforePage(true);\n }\n /**\n * Called before a submission is triggered allowing the components to perform special async functions.\n * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the submission.\n */\n beforeSubmit() {\n return Promise.resolve(true);\n }\n /**\n * Return the submission timezone.\n * @returns {string} - The submission timezone.\n */\n get submissionTimezone() {\n this.options.submissionTimezone = this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');\n return this.options.submissionTimezone;\n }\n /**\n * Return the current timezone.\n * @returns {string} - The current timezone.\n */\n get timezone() {\n return this.getTimezone(this.component);\n }\n /**\n * Return the current timezone.\n * @param {object} settings - Settings to control how the timezone should be returned.\n * @returns {string} - The current timezone.\n */\n getTimezone(settings) {\n if (settings.timezone) {\n return settings.timezone;\n }\n if (settings.displayInTimezone === 'utc') {\n return 'UTC';\n }\n const submissionTimezone = this.submissionTimezone;\n if (submissionTimezone &&\n ((settings.displayInTimezone === 'submission') ||\n ((this.options.pdf || this.options.server) && (settings.displayInTimezone === 'viewer')))) {\n return submissionTimezone;\n }\n // Return current timezone if none are provided.\n return (0, utils_1.currentTimezone)();\n }\n /**\n *\n * @param {HTMLElement} element - The containing DOM element to query for the ref value.\n * @param {object} refs - The references to load.\n * @param {string} [referenceAttributeName] - The attribute name to use for the reference.\n */\n loadRefs(element, refs, referenceAttributeName) {\n if (!element) {\n return;\n }\n for (const ref in refs) {\n const refType = refs[ref];\n const isString = typeof refType === 'string';\n const selector = isString && refType.includes('scope')\n ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`\n : `[${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`;\n if (isString && refType.startsWith('single')) {\n this.refs[ref] = element.querySelector(selector);\n }\n else {\n this.refs[ref] = element.querySelectorAll(selector);\n }\n }\n }\n /**\n * Opens the modal element.\n * @param {string} template - The template to use for the modal dialog.\n */\n setOpenModalElement(template = null) {\n this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n }\n /**\n * Renders a modal preview template and returns the markup as a string\n * @param {object|null|undefined} ctx - The rendering context\n * @returns {string} - The modal preview markup\n */\n renderModalPreview(ctx) {\n return this.renderTemplate('modalPreview', ctx || {});\n }\n /**\n * Returns the modal preview template.\n * @returns {string} - The modal preview template.\n */\n getModalPreviewTemplate() {\n var _a;\n const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;\n let modalLabel;\n if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {\n modalLabel = { className: 'field-required' };\n }\n return this.renderModalPreview({\n previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('clickToSetValue'),\n messages: '',\n labelInfo: modalLabel,\n });\n }\n /**\n * Performs a complete build of a component, which empties, renders, sets the content in the DOM, and then finally attaches events.\n * @param {HTMLElement} element - The element to attach this component to.\n * @returns {Promise<void>} - A promise that resolves when the component has been built.\n */\n build(element) {\n element = element || this.element;\n this.empty(element);\n this.setContent(element, this.render());\n return this.attach(element);\n }\n get hasModalSaveButton() {\n return true;\n }\n /**\n * Renders a component as an HTML string.\n * @param {string} children - The contents of all the children HTML as a string.\n * @param {boolean} topLevel - If this is the topmost component that is being rendered.\n * @returns {string} - The rendered HTML string of a component.\n */\n render(children = this.t('unknownComponent', { type: this.component.type }), topLevel = false) {\n const isVisible = this.visible;\n this.rendered = true;\n if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n return ComponentModal_1.default.render(this, {\n visible: isVisible,\n showSaveButton: this.hasModalSaveButton,\n id: this.id,\n classes: this.className,\n styles: this.customStyle,\n children\n }, topLevel);\n }\n else {\n return this.renderTemplate('component', {\n visible: isVisible,\n id: this.id,\n classes: this.className,\n styles: this.customStyle,\n children\n }, topLevel);\n }\n }\n /**\n * Creates the tooltip instance using tippy.js and returns it\n * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip\n * @param {object|null|undefined} settings - tippy.js options\n * @returns {import('tippy.js').Tippy} - tippy.js instance\n */\n createTooltip(tooltipEl, settings = {}) {\n const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');\n const tooltipDataTitle = tooltipEl.getAttribute('data-title');\n const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)\n .replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n return (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));\n }\n /**\n * Attaches all the tooltips provided the refs object.\n * @param {object} toolTipsRefs - The refs for the tooltips within your template.\n * @returns {void}\n */\n attachTooltips(toolTipsRefs) {\n toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {\n if (tooltip) {\n this.tooltips[index] = this.createTooltip(tooltip);\n }\n });\n }\n /**\n * Create a new component modal for this component.\n * @param {HTMLElement} element - The element to attach the modal to.\n * @param {boolean} modalShouldBeOpened - TRUE if the modal should open immediately.\n * @param {any} currentValue - The current value of the component.\n * @returns {ComponentModal} - The created component modal.\n */\n createComponentModal(element, modalShouldBeOpened, currentValue) {\n return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n }\n /**\n * Attaches all event listensers for this component to the DOM elements that were rendered.\n * @param {HTMLElement} element - The element to attach the listeners to.\n * @returns {Promise<void>} - Resolves when the component is done attaching to the DOM.\n */\n attach(element) {\n if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n const openModalTemplate = this.componentModal && modalShouldBeOpened\n ? this.componentModal.openModalTemplate\n : null;\n this.componentModal = this.createComponentModal(element, modalShouldBeOpened, currentValue);\n this.setOpenModalElement(openModalTemplate);\n }\n this.attached = true;\n this.setElement(element);\n element.component = this;\n // If this already has an id, get it from the dom. If SSR, it could be different from the initiated id.\n if (this.element.id) {\n this.id = this.element.id;\n this.component.id = this.id;\n }\n this.loadRefs(element, {\n messageContainer: 'single',\n tooltip: 'multiple'\n });\n this.attachTooltips(this.refs.tooltip);\n // Attach logic.\n this.attachLogic();\n this.autofocus();\n // Allow global attach.\n this.hook('attachComponent', element, this);\n // Allow attach per component type.\n const type = this.component.type;\n if (type) {\n this.hook(`attach${type.charAt(0).toUpperCase() + type.substring(1, type.length)}`, element, this);\n }\n this.restoreFocus();\n this.addons.forEach((addon) => addon.attach(element));\n return Promise.resolve();\n }\n /**\n * Restors the \"focus\" on a component after a redraw event has occured.\n */\n restoreFocus() {\n var _a, _b, _c;\n const isFocused = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path;\n if (isFocused) {\n this.loadRefs(this.element, { input: 'multiple' });\n this.focus((_c = this.root.currentSelection) === null || _c === void 0 ? void 0 : _c.index);\n this.restoreCaretPosition();\n }\n }\n /**\n * Adds a keyboard shortcut to this component.\n * @param {HTMLElement} element - The element to attach the keyboard shortcut to.\n * @param {string} shortcut - The keyboard shortcut to add.\n * @returns {void}\n */\n addShortcut(element, shortcut) {\n // Avoid infinite recursion.\n if (!element || !this.root || (this.root === this)) {\n return;\n }\n if (!shortcut) {\n shortcut = this.component.shortcut;\n }\n this.root.addShortcut(element, shortcut);\n }\n /**\n * Removes a keyboard shortcut from this component.\n * @param {HTMLElement} element - The element to remove the keyboard shortcut from.\n * @param {string} shortcut - The keyboard shortcut to remove.\n * @returns {void}\n */\n removeShortcut(element, shortcut) {\n // Avoid infinite recursion.\n if (!element || (this.root === this)) {\n return;\n }\n if (!shortcut) {\n shortcut = this.component.shortcut;\n }\n this.root.removeShortcut(element, shortcut);\n }\n /**\n * Remove all event handlers.\n */\n detach() {\n // First iterate through each ref and delete the component so there are no dangling component references.\n lodash_1.default.each(this.refs, (ref) => {\n if (ref instanceof NodeList) {\n ref.forEach((elem) => {\n delete elem.component;\n });\n }\n else if (ref) {\n delete ref.component;\n }\n });\n this.refs = {};\n this.removeEventListeners();\n this.detachLogic();\n if (this.tooltip) {\n this.tooltip.destroy();\n }\n }\n /**\n * Determines if the component should be refreshed based on the path of another component that changed.\n * @param {string} refreshData - The path of the data that needs to trigger a refresh.\n * @param {boolean} changed - Flag that is true if the data has been changed.\n * @param {any} flags - The flags for the checkData procedure.\n * @returns {void}\n */\n checkRefresh(refreshData, changed, flags) {\n var _a, _b;\n const changePath = lodash_1.default.get(changed, 'instance.path', false);\n // Don't let components change themselves.\n if (changePath && this.path === changePath) {\n return;\n }\n if (refreshData === 'data') {\n this.refresh(this.data, changed, flags);\n }\n else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData)) && changed && changed.instance &&\n // Make sure the changed component is not in a different \"context\". Solves issues where refreshOn being set\n // in fields inside EditGrids could alter their state from other rows (which is bad).\n this.inContext(changed.instance)) {\n this.refresh(changed.value, changed, flags);\n }\n }\n /**\n * Iterates over a list of changes, and determines if the component should be refreshed if it is configured to refresh on any of those components.\n * @param {Array<any>} changes - The list of components that have changed.\n * @param {any} flags - The checkData flags.\n * @returns {void}\n */\n checkRefreshOn(changes, flags = {}) {\n changes = changes || [];\n if (flags.noRefresh) {\n return;\n }\n if (!changes.length && flags.changed) {\n changes = [flags.changed];\n }\n const refreshOn = flags.fromBlur ? this.component.refreshOnBlur : this.component.refreshOn || this.component.redrawOn;\n // If they wish to refresh on a value, then add that here.\n if (refreshOn) {\n if (Array.isArray(refreshOn)) {\n refreshOn.forEach(refreshData => changes.forEach(changed => this.checkRefresh(refreshData, changed, flags)));\n }\n else {\n changes.forEach(changed => this.checkRefresh(refreshOn, changed, flags));\n }\n }\n }\n /**\n * Refreshes the component with a new value.\n * @param {any} value - The latest value of the component to check if it needs to be refreshed.\n * @returns {void}\n */\n refresh(value) {\n if (this.hasOwnProperty('refreshOnValue')) {\n this.refreshOnChanged = !lodash_1.default.isEqual(value, this.refreshOnValue);\n }\n else {\n this.refreshOnChanged = true;\n }\n this.refreshOnValue = (0, utils_1.fastCloneDeep)(value);\n if (this.refreshOnChanged) {\n if (this.component.clearOnRefresh) {\n this.setValue(null);\n }\n this.triggerRedraw();\n }\n }\n /**\n * Checks to see if a separate component is in the \"context\" of this component. This is determined by first checking\n * if they share the same \"data\" object. It will then walk up the parent tree and compare its parents data objects\n * with the components data and returns true if they are in the same context.\n *\n * Different rows of the same EditGrid, for example, are in different contexts.\n * @param {any} component - The component to check if it is in the same context as this component.\n * @returns {boolean} - TRUE if the component is in the same context as this component.\n */\n inContext(component) {\n if (component.data === this.data) {\n return true;\n }\n let parent = this.parent;\n while (parent) {\n if (parent.data === component.data) {\n return true;\n }\n parent = parent.parent;\n }\n return false;\n }\n /**\n * Determines if we are in \"view\" only mode.\n * @returns {boolean} - TRUE if we are in \"view\" only mode.\n */\n get viewOnly() {\n return this.options.readOnly && this.options.viewAsHtml;\n }\n /**\n * Sets the HTMLElement for this component.\n * @param {HTMLElement} element - The element that is attached to this component.\n * @returns {void}\n */\n setElement(element) {\n if (this.element) {\n delete this.element.component;\n delete this.element;\n }\n this.element = element;\n }\n /**\n * Creates an element to hold the \"view only\" version of this component.\n * @returns {HTMLElement} - The element for this component.\n */\n createViewOnlyElement() {\n this.setElement(this.ce('dl', {\n id: this.id\n }));\n if (this.element) {\n // Ensure you can get the component info from the element.\n this.element.component = this;\n }\n return this.element;\n }\n /**\n * The default value for the \"view only\" mode of a component if the value is not provided.\n * @returns {string} - The default value for this component.\n */\n get defaultViewOnlyValue() {\n return '-';\n }\n /**\n * Uses the widget to determine the output string.\n * @param {any} value - The current value of the component.\n * @param {any} options - The options for getValueAsString.\n * @returns {any|Array<any>} - The value as a string.\n */\n getWidgetValueAsString(value, options) {\n const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;\n if (!value || noInputWidget) {\n if (!this.widget || !value) {\n return value;\n }\n else {\n return this.widget.getValueAsString(value);\n }\n }\n if (Array.isArray(value)) {\n const values = [];\n value.forEach((val, index) => {\n const widget = this.refs.input[index] && this.refs.input[index].widget;\n if (widget) {\n values.push(widget.getValueAsString(val, options));\n }\n });\n return values;\n }\n const widget = this.refs.input[0].widget;\n return widget.getValueAsString(value, options);\n }\n /**\n * Returns the value of the component as a string.\n * @param {any} value - The value for this component.\n * @param {any} options - The options for this component.\n * @returns {string} - The string representation of the value of this component.\n */\n getValueAsString(value, options) {\n if (!value) {\n return '';\n }\n value = this.getWidgetValueAsString(value, options);\n if (Array.isArray(value)) {\n return value.join(', ');\n }\n if (lodash_1.default.isPlainObject(value)) {\n return JSON.stringify(value);\n }\n if (value === null || value === undefined) {\n return '';\n }\n const stringValue = value.toString();\n return this.sanitize(stringValue);\n }\n /**\n * Returns the string representation \"view\" of the component value.\n * @param {any} value - The value of the component.\n * @param {any} options - The options for this component.\n * @returns {string} - The string representation of the value of this component.\n */\n getView(value, options) {\n if (this.component.protected) {\n return '--- PROTECTED ---';\n }\n return this.getValueAsString(value, options);\n }\n /**\n * Updates the items list for this component. Useful for Select and other List component types.\n * @param {...any} args - The arguments to pass to the onChange event.\n * @returns {void}\n */\n updateItems(...args) {\n this.restoreValue();\n this.onChange(...args);\n }\n /**\n * Returns the value for a specific item in a List type component.\n * @param {any} data - The data for this component.\n * @param {boolean} [forceUseValue] - if true, return 'value' property of the data\n * @returns {any} - The value of the item.\n */\n itemValue(data, forceUseValue = false) {\n if (lodash_1.default.isObject(data) && !lodash_1.default.isArray(data)) {\n if (this.valueProperty) {\n return lodash_1.default.get(data, this.valueProperty);\n }\n if (forceUseValue) {\n return data.value;\n }\n }\n return data;\n }\n /**\n * Returns the item value for html mode.\n * @param {any} value - The value for this component.\n * @returns {any} - The value of the item for html mode.\n */\n itemValueForHTMLMode(value) {\n if (Array.isArray(value)) {\n const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));\n return values.join(', ');\n }\n return this.itemValue(value);\n }\n /**\n * Creates a modal to input the value of this component.\n * @param {HTMLElement} element - The element to attach the modal to.\n * @param {any} attr - A list of attributes to add to the modal.\n * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.\n * @returns {HTMLElement} - The created modal element.\n */\n createModal(element, attr, confirm) {\n const dialog = this.ce('div', attr || {});\n this.setContent(dialog, this.renderTemplate('dialog'));\n // Add refs to dialog, not \"this\".\n dialog.refs = {};\n this.loadRefs.call(dialog, dialog, {\n dialogOverlay: 'single',\n dialogContents: 'single',\n dialogClose: 'single',\n });\n dialog.refs.dialogContents.appendChild(element);\n document.body.appendChild(dialog);\n document.body.classList.add('modal-open');\n dialog.close = () => {\n document.body.classList.remove('modal-open');\n dialog.dispatchEvent(new CustomEvent('close'));\n };\n this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));\n const close = (event) => {\n event.preventDefault();\n dialog.close();\n };\n const handleCloseClick = (e) => {\n if (confirm) {\n confirm().then(() => close(e))\n .catch(() => { });\n }\n else {\n close(e);\n }\n };\n this.addEventListener(dialog.refs.dialogOverlay, 'click', handleCloseClick);\n this.addEventListener(dialog.refs.dialogClose, 'click', handleCloseClick);\n return dialog;\n }\n /**\n * Uses CSS classes to show or hide an element.\n * @returns {boolean} - TRUE if the element has been css removed.\n */\n get optimizeRedraw() {\n if (this.options.optimizeRedraw && this.element && !this.visible) {\n this.addClass(this.element, 'formio-removed');\n return true;\n }\n return false;\n }\n /**\n * Retrieves the CSS class name of this component.\n * @returns {string} - The class name of this component.\n */\n get className() {\n let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback ` : '';\n className += `formio-component formio-component-${this.component.type} `;\n // TODO: find proper way to avoid overriding of default type-based component styles\n if (this.key && this.key !== 'form') {\n className += `formio-component-${this.key} `;\n }\n if (this.component.multiple) {\n className += 'formio-component-multiple ';\n }\n if (this.component.customClass) {\n className += this.component.customClass;\n }\n if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required)) {\n className += ' required';\n }\n if (this.labelIsHidden()) {\n className += ' formio-component-label-hidden';\n }\n if (!this.visible) {\n className += ' formio-hidden';\n }\n return className;\n }\n /**\n * Build the custom style from the layout values\n * @returns {string} - The custom style\n */\n get customStyle() {\n let customCSS = '';\n lodash_1.default.each(this.component.style, (value, key) => {\n if (value !== '') {\n customCSS += `${key}:${value};`;\n }\n });\n return customCSS;\n }\n /**\n * Returns the component condition operator settings if available.\n * @returns {object} - The component condition operator settings.\n */\n static get serverConditionSettings() {\n return Component.conditionOperatorsSettings;\n }\n /**\n * Returns if the application is on a mobile device.\n * @returns {boolean} - TRUE if the application is on a mobile device.\n */\n get isMobile() {\n return (0, ismobilejs_1.default)();\n }\n /**\n * Returns the outside wrapping element of this component.\n * @returns {HTMLElement} - The wrapping element of this component.\n */\n getElement() {\n return this.element;\n }\n /**\n * Create an evaluation context for all script executions and interpolations.\n * @param {any} additional - Additional context to provide.\n * @returns {any} - The evaluation context.\n */\n evalContext(additional) {\n return super.evalContext(Object.assign({\n component: this.component,\n row: this.data,\n rowIndex: this.rowIndex,\n data: this.rootValue,\n iconClass: this.iconClass.bind(this),\n // Bind the translate function to the data context of any interpolated string.\n // It is useful to translate strings in different scenarions (eg: custom edit grid templates, custom error messages etc.)\n // and desirable to be publicly available rather than calling the internal {instance.t} function in the template string.\n t: this.t.bind(this),\n submission: (this.root ? this.root._submission : {\n data: this.rootValue\n }),\n form: this.root ? this.root._form : {},\n options: this.options,\n }, additional));\n }\n /**\n * Sets the pristine flag for this component.\n * @param {boolean} pristine - TRUE to make pristine, FALSE not pristine.\n */\n setPristine(pristine) {\n this.pristine = pristine;\n }\n /**\n * Returns if the component is pristine.\n * @returns {boolean} - TRUE if the component is pristine.\n */\n get isPristine() {\n return this.pristine;\n }\n /**\n * Sets the dirty flag for this component.\n * @param {boolean} dirty - TRUE to make dirty, FALSE not dirty.\n */\n setDirty(dirty) {\n this.dirty = dirty;\n }\n /**\n * Returns if the component is dirty.\n * @returns {boolean} - TRUE if the component is dirty.\n */\n get isDirty() {\n return this.dirty;\n }\n /**\n * Removes a value out of the data array and rebuild the rows.\n * @param {number} index - The index of the data element to remove.\n */\n removeValue(index) {\n this.splice(index);\n this.redraw();\n this.restoreValue();\n this.triggerRootChange();\n }\n /**\n * Returns the icon class for a given icon name.\n * @param {string} name - The name of the icon you wish to fetch provided the icon class. This is the \"font awesome\" version of the name of the icon.\n * @param {boolean} spinning - If the component should be spinning.\n * @returns {string} - The icon class for the equivalent icon in the iconset we are using.\n */\n iconClass(name, spinning) {\n const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';\n return Templates_1.default.current.hasOwnProperty('iconClass')\n ? Templates_1.default.current.iconClass(iconset, name, spinning)\n : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;\n }\n /**\n * Returns the size css class names for our current template.\n * @param {string} size - The size class name for the default iconset.\n * @returns {string} - The size class for our component.\n */\n size(size) {\n return Templates_1.default.current.hasOwnProperty('size')\n ? Templates_1.default.current.size(size)\n : size;\n }\n /**\n * The readible name for this component.\n * @returns {string} - The name of the component.\n */\n get name() {\n return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });\n }\n /**\n * Returns the visible errors for this component.\n * @returns {Array<object>} - The visible errors for this component.\n */\n get visibleErrors() {\n return this._visibleErrors;\n }\n /**\n * Returns all the errors for this component, visible or not.\n * @returns {Array<object>} - All the errors for this component.\n */\n get errors() {\n return this._errors;\n }\n /**\n * Returns the error label for this component.\n * @returns {string} - The error label for this component.\n */\n get errorLabel() {\n return this.t(this.component.errorLabel\n || this.component.label\n || this.component.placeholder\n || this.key);\n }\n /**\n * Get the error message provided a certain type of error.\n * @param {string} type - The type of error to fetch the message for.\n * @returns {string} - The error message configured for this component.\n */\n errorMessage(type) {\n return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n }\n /**\n * Sets the content, innerHTML, of an element to the sanitized content.\n * @param {HTMLElement} element - The element to set the innerHTML to.\n * @param {string} content - The HTML string content that we wish to set.\n * @param {boolean} forceSanitize - If we should force the content to be sanitized.\n * @param {any} sanitizeOptions - The options for the sanitize function.\n * @returns {boolean} - TRUE if the content was sanitized and set.\n */\n setContent(element, content, forceSanitize, sanitizeOptions) {\n if (element instanceof HTMLElement) {\n element.innerHTML = this.sanitize(content, forceSanitize, sanitizeOptions);\n return true;\n }\n return false;\n }\n /**\n * Restores the caret position in the input element after a refresh occurs.\n */\n restoreCaretPosition() {\n var _a, _b, _c;\n if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {\n const { index } = this.root.currentSelection;\n let input = this.refs.input[index];\n const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n if (input) {\n if (isInputRangeSelectable(input)) {\n input.setSelectionRange(input.value.length, input.value.length);\n }\n }\n else {\n input = this.refs.input[this.refs.input.length];\n const lastCharacter = ((_c = input.value) === null || _c === void 0 ? void 0 : _c.length) || 0;\n if (isInputRangeSelectable(input)) {\n input.setSelectionRange(lastCharacter, lastCharacter);\n }\n }\n }\n }\n }\n /**\n * Redraw the component.\n * @returns {Promise<void>} - A promise that resolves when the component is done redrawing.\n */\n redraw() {\n // Don't bother if we have not built yet.\n if (!this.element || !this.element.parentNode || this.optimizeRedraw) {\n // Return a non-resolving promise.\n return Promise.resolve();\n }\n this.detach();\n this.emit('redraw');\n // Since we are going to replace the element, we need to know it's position so we can find it in the parent's children.\n const parent = this.element.parentNode;\n const index = Array.prototype.indexOf.call(parent.children, this.element);\n this.element.outerHTML = this.sanitize(this.render());\n this.setElement(parent.children[index]);\n return this.attach(this.element);\n }\n /**\n * Rebuild and redraw a component.\n * @returns {Promise<void>} - A promise that resolves when the component is done rebuilding and redrawing.\n */\n rebuild() {\n this.destroy();\n this.init();\n this.visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n return this.redraw();\n }\n /**\n * Removes all event listeners attached to this component.\n */\n removeEventListeners() {\n super.removeEventListeners();\n this.tooltips.forEach(tooltip => tooltip.destroy());\n this.tooltips = [];\n }\n /**\n * Returns if the dom node has the classes provided.\n * @param {HTMLElement} element - The element to check for the class.\n * @param {string} className - The name of the class to check.\n * @returns {boolean|void} - TRUE if the element has the class.\n */\n hasClass(element, className) {\n if (!element) {\n return;\n }\n return super.hasClass(element, this.transform('class', className));\n }\n /**\n * Adds a class to an HTML element.\n * @param {HTMLElement} element - The dom element to add the class to.\n * @param {string} className - The class name you wish to add.\n * @returns {this|void} - The component instance.\n */\n addClass(element, className) {\n if (!element) {\n return;\n }\n return super.addClass(element, this.transform('class', className));\n }\n /**\n * Removes a class from an element.\n * @param {HTMLElement} element - The element to remove the class from.\n * @param {string} className - The class name to remove.\n * @returns {this|void} - The component instance.\n */\n removeClass(element, className) {\n if (!element) {\n return;\n }\n return super.removeClass(element, this.transform('class', className));\n }\n /**\n * Determines if this component has a condition defined.\n * @returns {boolean} - TRUE if the component has a condition defined.\n */\n hasCondition() {\n if (this._hasCondition !== null) {\n return this._hasCondition;\n }\n this._hasCondition = FormioUtils.hasCondition(this.component);\n return this._hasCondition;\n }\n /**\n * Check if this component is conditionally visible.\n * @param {any} data - The data to check against.\n * @param {any} row - The row data to check against.\n * @returns {boolean} - TRUE if the component is conditionally visible.\n */\n conditionallyVisible(data, row) {\n data = data || this.rootValue;\n row = row || this.data;\n if (this.builderMode || this.previewMode) {\n return true;\n }\n data = data || (this.root ? this.root.data : {});\n return this.checkCondition(row, data);\n }\n /**\n * Checks the condition of this component.\n *\n * TODO: Switch row and data parameters to be consistent with other methods.\n * @param {any} row - The row contextual data.\n * @param {any} data - The global data object.\n * @returns {boolean} - True if the condition applies to this component.\n */\n checkCondition(row, data) {\n return FormioUtils.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);\n }\n /**\n * Check for conditionals and hide/show the element based on those conditions.\n * @param {any} data - The data to check against.\n * @param {any} flags - The flags passed to checkData function.\n * @param {any} row - The row data to check against.\n * @returns {boolean} - TRUE if the component is visible.\n */\n checkComponentConditions(data, flags, row) {\n data = data || this.rootValue;\n flags = flags || {};\n row = row || this.data;\n if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {\n this.redraw();\n }\n // Check visibility\n const visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n if (this.visible !== visible) {\n this.visible = visible;\n }\n this.clearOnHide();\n return visible;\n }\n /**\n * Checks conditions for this component and any sub components.\n * @param {any} data - The data to check against.\n * @param {any} flags - The flags passed to checkData function.\n * @param {any} row - The row data to check against.\n * @returns {boolean} - TRUE if the component is visible.\n */\n checkConditions(data, flags, row) {\n data = data || this.rootValue;\n flags = flags || {};\n row = row || this.data;\n return this.checkComponentConditions(data, flags, row);\n }\n /**\n * Returns the component logic if applicable.\n * @returns {Array<object>} - The component logic.\n */\n get logic() {\n return this.component.logic || [];\n }\n /**\n * Check all triggers and apply necessary actions.\n * @param {any} data - The data to check against.\n * @param {any} row - The row data to check against.\n * @returns {boolean|void} - TRUE if the component was altered.\n */\n fieldLogic(data = this.rootValue, row = this.data) {\n const logics = this.logic;\n // If there aren't logic, don't go further.\n if (logics.length === 0) {\n return;\n }\n const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n let changed = logics.reduce((changed, logic) => {\n const result = FormioUtils.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);\n return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;\n }, false);\n // If component definition changed, replace and mark as changed.\n if (!lodash_1.default.isEqual(this.component, newComponent)) {\n this.component = newComponent;\n changed = true;\n const disabled = this.shouldDisabled;\n // Change disabled state if it has changed\n if (this.disabled !== disabled) {\n this.disabled = disabled;\n }\n }\n return changed;\n }\n /**\n * Retuns if the browser is Internet Explorer.\n * @returns {boolean} - TRUE if the browser is IE.\n */\n isIE() {\n if (typeof window === 'undefined') {\n return false;\n }\n const userAgent = window.navigator.userAgent;\n const msie = userAgent.indexOf('MSIE ');\n if (msie > 0) {\n // IE 10 or older => return version number\n return parseInt(userAgent.substring(msie + 5, userAgent.indexOf('.', msie)), 10);\n }\n const trident = userAgent.indexOf('Trident/');\n if (trident > 0) {\n // IE 11 => return version number\n const rv = userAgent.indexOf('rv:');\n return parseInt(userAgent.substring(rv + 3, userAgent.indexOf('.', rv)), 10);\n }\n const edge = userAgent.indexOf('Edge/');\n if (edge > 0) {\n // IE 12 (aka Edge) => return version number\n return parseInt(userAgent.substring(edge + 5, userAgent.indexOf('.', edge)), 10);\n }\n // other browser\n return false;\n }\n /**\n * Defines the logic action value through evaluation.\n * @param {object} action - The action within the Logic system to perform.\n * @param {object} argsObject - The arguments to pass to the evaluation.\n * @returns {any} - The result of the evaluation.\n */\n defineActionValue(action, argsObject) {\n return this.evaluate(action.value, argsObject, 'value');\n }\n /**\n * Apply the actions of Logic for a component once the conditions have been met.\n * @param {object} newComponent - The new component to apply the actions to.\n * @param {Array<object>} actions - An array of actions\n * @param {any} result - The result of the conditional check in order to evaluate the actions.\n * @param {any} row - The contextual row data for this component.\n * @param {any} data - The global data object for the submission.\n * @returns {boolean} - TRUE if the component was altered.\n */\n applyActions(newComponent, actions, result, row, data) {\n data = data || this.rootValue;\n row = row || this.data;\n return actions.reduce((changed, action) => {\n switch (action.type) {\n case 'property': {\n FormioUtils.setActionProperty(newComponent, action, result, row, data, this);\n const property = action.property.value;\n if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {\n // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state\n // separately from the component's hidden property, and technically this Advanced Logic conditionally hides\n // a component, we need to set a temporary variable to the new value\n if (property === 'hidden') {\n this._logicallyHidden = newComponent.hidden;\n }\n changed = true;\n }\n break;\n }\n case 'value': {\n const oldValue = this.getValue();\n const newValue = this.defineActionValue(action, {\n value: lodash_1.default.clone(oldValue),\n data,\n row,\n component: newComponent,\n result,\n });\n if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden())) {\n this.setValue(newValue);\n if (this.viewOnly) {\n this.dataValue = newValue;\n }\n changed = true;\n }\n break;\n }\n case 'mergeComponentSchema': {\n const schema = this.evaluate(action.schemaDefinition, {\n value: lodash_1.default.clone(this.getValue()),\n data,\n row,\n component: newComponent,\n result,\n }, 'schema');\n lodash_1.default.assign(newComponent, schema);\n if (!lodash_1.default.isEqual(this.component, newComponent)) {\n changed = true;\n }\n break;\n }\n case 'customAction': {\n const oldValue = this.getValue();\n const newValue = this.evaluate(action.customAction, {\n value: lodash_1.default.clone(oldValue),\n data,\n row,\n input: oldValue,\n component: newComponent,\n result,\n }, 'value');\n if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden())) {\n this.setValue(newValue);\n if (this.viewOnly) {\n this.dataValue = newValue;\n }\n changed = true;\n }\n break;\n }\n }\n return changed;\n }, false);\n }\n // Deprecated\n addInputError(message, dirty, elements) {\n this.addMessages(message);\n this.setErrorClasses(elements, dirty, !!message);\n }\n // Deprecated\n removeInputError(elements) {\n this.setErrorClasses(elements, true, false);\n }\n /**\n * Add a new input error to this element.\n * @param {Array<object>|string} messages - An array of messages to add to the element.\n * @returns {void}\n */\n addMessages(messages) {\n if (!messages) {\n return;\n }\n // Standardize on array of objects for message.\n if (typeof messages === 'string') {\n messages = {\n messages,\n level: 'error',\n };\n }\n if (!Array.isArray(messages)) {\n messages = [messages];\n }\n messages = lodash_1.default.uniqBy(messages, message => message.message);\n if (this.refs.messageContainer) {\n this.setContent(this.refs.messageContainer, messages.map((message) => {\n return this.renderTemplate('message', Object.assign({}, message));\n }).join(''));\n }\n }\n /**\n * Sets the form input widget error classes.\n * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.\n * @param {boolean} dirty - If the input is dirty.\n * @param {boolean} hasErrors - If the input has errors.\n * @param {boolean} hasMessages - If the input has messages.\n * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.\n * @returns {void}\n */\n setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n this.clearErrorClasses();\n elements.forEach((element) => {\n this.setElementInvalid(this.performInputMapping(element), false);\n });\n this.setInputWidgetErrorClasses(elements, hasErrors);\n // do not set error classes for hidden components\n if (!this.visible) {\n return;\n }\n if (hasErrors) {\n // Add error classes\n elements.forEach((input) => {\n this.setElementInvalid(this.performInputMapping(input), true);\n });\n if (dirty && this.options.highlightErrors) {\n this.addClass(element, this.options.componentErrorClass);\n }\n else {\n this.addClass(element, 'has-error');\n }\n }\n if (hasMessages) {\n this.addClass(element, 'has-message');\n }\n }\n /**\n * Adds the classes necessary to mark an element as invalid.\n * @param {HTMLElement} element - The element you wish to add the invalid classes to.\n * @param {boolean} invalid - TRUE if the component is invalid, FALSE otherwise.\n * @returns {void}\n */\n setElementInvalid(element, invalid) {\n if (!element)\n return;\n if (invalid) {\n this.addClass(element, 'is-invalid');\n }\n else {\n this.removeClass(element, 'is-invalid');\n }\n element.setAttribute('aria-invalid', invalid ? 'true' : 'false');\n }\n /**\n * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.\n */\n clearOnHide() {\n // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.\n if (\n // if change happens inside EditGrid's row, it doesn't trigger change on the root level, so rootPristine will be true\n (!this.rootPristine || this.options.server || (0, utils_1.isInsideScopingComponent)(this)) &&\n this.component.clearOnHide !== false &&\n !this.options.readOnly &&\n !this.options.showHiddenFields) {\n if (this.conditionallyHidden()) {\n this.deleteValue();\n }\n else if (!this.hasValue() && this.shouldAddDefaultValue) {\n // If shown, ensure the default is set.\n this.setValue(this.defaultValue, {\n noUpdateEvent: true\n });\n }\n }\n }\n /**\n * Triggers a debounced onChange event for the root component (usually Webform).\n * @param {...any} args - The arguments to pass to the onChange event.\n */\n triggerRootChange(...args) {\n if (this.options.onChange) {\n this.options.onChange(...args);\n }\n else if (this.root && this.root.triggerChange) {\n this.root.triggerChange(...args);\n }\n }\n /**\n * Called when the component value has been changed. This will then trigger the root level onChange handler which\n * propagates the checkData methods for the full component tree.\n * @param {any} flags - The flags for the change event propagation.\n * @param {boolean} fromRoot - If the change event is from the root component.\n * @returns {boolean} - TRUE if the component has changed.\n */\n onChange(flags, fromRoot) {\n flags = flags || {};\n if (flags.modified) {\n if (!flags.noPristineChangeOnModified) {\n this.pristine = false;\n }\n this.addClass(this.getElement(), 'formio-modified');\n }\n // If we are supposed to validate on blur, then don't trigger validation yet.\n if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {\n flags.noValidate = true;\n }\n if (this.component.onChange) {\n this.evaluate(this.component.onChange, {\n flags\n });\n }\n // Set the changed variable.\n const changed = {\n instance: this,\n component: this.component,\n value: this.dataValue,\n flags: flags\n };\n // Emit the change.\n this.emit('componentChange', changed);\n // Do not propogate the modified flag.\n let modified = false;\n if (flags.modified) {\n modified = true;\n delete flags.modified;\n }\n // Bubble this change up to the top.\n if (!fromRoot) {\n this.triggerRootChange(flags, changed, modified);\n }\n return changed;\n }\n get wysiwygDefault() {\n return {\n quill: {\n theme: 'snow',\n placeholder: this.t(this.component.placeholder, { _userInput: true }),\n modules: {\n toolbar: [\n [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown\n [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n [{ 'font': [] }],\n ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],\n [{ 'color': [] }, { 'background': [] }],\n [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }],\n ['blockquote', 'code-block'],\n ['link', 'image', 'video', 'formula', 'source']\n ]\n }\n },\n ace: {\n theme: 'ace/theme/xcode',\n maxLines: 12,\n minLines: 12,\n tabSize: 2,\n mode: 'ace/mode/javascript',\n placeholder: this.t(this.component.placeholder, { _userInput: true })\n },\n ckeditor: {\n image: {\n toolbar: [\n 'imageTextAlternative',\n '|',\n 'imageStyle:full',\n 'imageStyle:alignLeft',\n 'imageStyle:alignCenter',\n 'imageStyle:alignRight'\n ],\n styles: [\n 'full',\n 'alignLeft',\n 'alignCenter',\n 'alignRight'\n ]\n },\n extraPlugins: []\n },\n default: {}\n };\n }\n addCKE(element, settings, onChange) {\n settings = lodash_1.default.isEmpty(settings) ? {} : settings;\n settings.base64Upload = this.component.isUploadEnabled ? false : true;\n settings.mediaEmbed = { previewsInData: true };\n settings = lodash_1.default.merge(this.wysiwygDefault.ckeditor, lodash_1.default.get(this.options, 'editors.ckeditor.settings', {}), settings);\n if (this.component.isUploadEnabled) {\n settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));\n }\n return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)\n .then(() => {\n if (!element.parentNode) {\n return Promise.reject();\n }\n if (isIEBrowser) {\n const editor = CKEDITOR.replace(element);\n editor.on('change', () => onChange(editor.getData()));\n return Promise.resolve(editor);\n }\n else {\n return ClassicEditor.create(element, settings).then(editor => {\n editor.model.document.on('change', () => onChange(editor.data.get()));\n return editor;\n });\n }\n });\n }\n addQuill(element, settings, onChange) {\n settings = lodash_1.default.isEmpty(settings) ? this.wysiwygDefault.quill : settings;\n settings = lodash_1.default.merge(this.wysiwygDefault.quill, lodash_1.default.get(this.options, 'editors.quill.settings', {}), settings);\n settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });\n // Lazy load the quill css.\n Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [\n { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }\n ], true);\n // Lazy load the quill library.\n return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true)\n .then(() => {\n return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true)\n .then(() => {\n if (!element.parentNode) {\n return Promise.reject();\n }\n this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);\n /** This block of code adds the [source] capabilities. See https://codepen.io/anon/pen/ZyEjrQ */\n const txtArea = document.createElement('textarea');\n txtArea.setAttribute('class', 'quill-source-code');\n this.quill.addContainer('ql-custom').appendChild(txtArea);\n const qlSource = element.parentNode.querySelector('.ql-source');\n if (qlSource) {\n this.addEventListener(qlSource, 'click', (event) => {\n event.preventDefault();\n if (txtArea.style.display === 'inherit') {\n this.quill.setContents(this.quill.clipboard.convert({ html: txtArea.value }));\n }\n txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';\n });\n }\n /** END CODEBLOCK */\n // Make sure to select cursor when they click on the element.\n this.addEventListener(element, 'click', () => this.quill.focus());\n // Allows users to skip toolbar items when tabbing though form\n const elm = document.querySelectorAll('.ql-formats > button');\n for (let i = 0; i < elm.length; i++) {\n elm[i].setAttribute('tabindex', '-1');\n }\n this.quill.on('text-change', () => {\n txtArea.value = this.quill.root.innerHTML;\n onChange(txtArea);\n });\n return this.quill;\n });\n });\n }\n get shouldSanitizeValue() {\n var _a;\n // Sanitize value if sanitizing for thw whole content is turned off\n return (((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false);\n }\n addAce(element, settings, onChange) {\n if (!settings || (settings.theme === 'snow')) {\n const mode = settings ? settings.mode : '';\n settings = {};\n if (mode) {\n settings.mode = mode;\n }\n }\n settings = lodash_1.default.merge(this.wysiwygDefault.ace, lodash_1.default.get(this.options, 'editors.ace.settings', {}), settings || {});\n return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true)\n .then((editor) => {\n editor = editor.edit(element);\n editor.removeAllListeners('change');\n editor.setOptions(settings);\n editor.getSession().setMode(settings.mode);\n editor.on('change', () => onChange(editor.getValue()));\n if (settings.isUseWorkerDisabled) {\n editor.session.setUseWorker(false);\n }\n return editor;\n });\n }\n getDragula() {\n return __awaiter(this, void 0, void 0, function* () {\n return new Promise((resolve) => {\n return Formio_1.Formio.requireLibrary('dragula', 'dragula', `${Formio_1.Formio.cdn.dragula}/dragula.js`, true, (ready) => {\n return ready.then(resolve);\n });\n });\n });\n }\n get tree() {\n return this.component.tree || false;\n }\n /**\n * The empty value for this component.\n * @returns {null} - The empty value for this component.\n */\n get emptyValue() {\n return null;\n }\n /**\n * Returns if this component has a value set.\n * @param {any} data - The global data object.\n * @returns {boolean} - TRUE if a value is set.\n */\n hasValue(data) {\n return !lodash_1.default.isUndefined(lodash_1.default.get(data || this.data, this.key));\n }\n /**\n * Get the data value at the root level.\n * @returns {*} - The root value for the component, typically the Webform data object.\n */\n get rootValue() {\n return this.root ? this.root.data : this.data;\n }\n get rootPristine() {\n return lodash_1.default.get(this, 'root.pristine', false);\n }\n /**\n * Get the static value of this component.\n * @returns {*} - The value for this component.\n */\n get dataValue() {\n if (!this.key) {\n return this.component.multiple ? [] : this.emptyValue;\n }\n return lodash_1.default.get(this._data, this.key, this.component.multiple ? [] : this.emptyValue);\n }\n /**\n * Sets the static value of this component.\n * @param {*} value - The value to set for this component.\n */\n set dataValue(value) {\n if (!this.allowData || !this.key) {\n return;\n }\n if ((value !== null) && (value !== undefined)) {\n value = this.hook('setDataValue', value, this.key, this._data);\n }\n if ((value === null) || (value === undefined)) {\n this.unset();\n return;\n }\n lodash_1.default.set(this._data, this.key, value);\n return;\n }\n /**\n * Splice a value from the dataValue.\n * @param {number} index - The index to splice for an array component values.\n * @param {*} flags - The flags to use when splicing the value.\n */\n splice(index, flags = {}) {\n if (this.hasValue()) {\n const dataValue = this.dataValue || [];\n if (lodash_1.default.isArray(dataValue) && dataValue.hasOwnProperty(index)) {\n dataValue.splice(index, 1);\n this.dataValue = dataValue;\n this.triggerChange(flags);\n }\n }\n }\n unset() {\n lodash_1.default.unset(this._data, this.key);\n }\n /**\n * Deletes the value of the component.\n */\n deleteValue() {\n this.setValue(null, {\n noUpdateEvent: true,\n noDefault: true\n });\n this.unset();\n }\n getCustomDefaultValue(defaultValue) {\n if (this.component.customDefaultValue && !this.options.preview) {\n defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');\n }\n return defaultValue;\n }\n get shouldAddDefaultValue() {\n return !this.options.noDefaults || (this.component.defaultValue && !this.isEmpty(this.component.defaultValue)) || this.component.customDefaultValue;\n }\n get defaultValue() {\n let defaultValue = this.emptyValue;\n if (this.component.defaultValue) {\n defaultValue = this.component.defaultValue;\n }\n defaultValue = this.getCustomDefaultValue(defaultValue);\n const checkMask = (value) => {\n if (typeof value === 'string') {\n if (this.component.type !== 'textfield') {\n const placeholderChar = this.placeholderChar;\n value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;\n if (!FormioUtils.matchInputMask(value, this.defaultMask)) {\n value = '';\n }\n }\n }\n else {\n value = '';\n }\n return value;\n };\n if (Array.isArray(this.defaultMask) ? this.defaultMask.length > 0 : this.defaultMask) {\n if (Array.isArray(defaultValue)) {\n defaultValue = defaultValue.map(checkMask);\n }\n else {\n defaultValue = checkMask(defaultValue);\n }\n }\n // Clone so that it creates a new instance.\n return lodash_1.default.cloneDeep(defaultValue);\n }\n /**\n * Get the input value of this component.\n * @returns {*} - The value for the component.\n */\n getValue() {\n if (!this.hasInput || this.viewOnly || !this.refs.input || !this.refs.input.length) {\n return this.dataValue;\n }\n const values = [];\n for (const i in this.refs.input) {\n if (this.refs.input.hasOwnProperty(i)) {\n if (!this.component.multiple) {\n return this.getValueAt(i);\n }\n values.push(this.getValueAt(i));\n }\n }\n if (values.length === 0 && !this.component.multiple) {\n return '';\n }\n return values;\n }\n /**\n * Get the value at a specific index.\n * @param {number} index - For an array component or multiple values, this returns the value at a specific index.\n * @returns {*} - The value at the specified index.\n */\n getValueAt(index) {\n const input = this.performInputMapping(this.refs.input[index]);\n return input ? input.value : undefined;\n }\n /**\n * Set the value of this component.\n * @param {*} value - The value to set for this component.\n * @param {*} flags - The flags to use when setting the value.\n * @returns {boolean} - If the value changed.\n */\n setValue(value, flags = {}) {\n const changed = this.updateValue(value, flags);\n value = this.dataValue;\n if (!this.hasInput) {\n return changed;\n }\n const isArray = Array.isArray(value);\n const valueInput = this.refs.fileLink || this.refs.input;\n if (isArray &&\n Array.isArray(this.defaultValue) &&\n this.refs.hasOwnProperty('input') &&\n valueInput &&\n (valueInput.length !== value.length) &&\n this.visible) {\n this.redraw();\n }\n if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n this.redraw();\n return changed;\n }\n for (const i in this.refs.input) {\n if (this.refs.input.hasOwnProperty(i)) {\n this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);\n }\n }\n return changed;\n }\n /**\n * Returns if the value (e.g. array) should be divided between several inputs\n * @returns {boolean}\n */\n isSingleInputValue() {\n return false;\n }\n /**\n * Set the value at a specific index.\n * @param {number} index - The index to set the value at.\n * @param {*} value - The value to set at the specified index.\n * @param {*} flags - The flags to use when setting the value.\n */\n setValueAt(index, value, flags = {}) {\n if (!flags.noDefault && (value === null || value === undefined) && !this.component.multiple) {\n value = this.defaultValue;\n }\n const input = this.performInputMapping(this.refs.input[index]);\n const valueMaskInput = this.refs.valueMaskInput;\n if ((valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) && valueMaskInput.mask.textMaskInputElement) {\n valueMaskInput.mask.textMaskInputElement.update(value);\n }\n if (input.mask && input.mask.textMaskInputElement) {\n input.mask.textMaskInputElement.update(value);\n }\n else if (input.widget && input.widget.setValue) {\n input.widget.setValue(value);\n }\n else {\n input.value = value;\n }\n }\n get hasSetValue() {\n return this.hasValue() && !this.isEmpty(this.dataValue);\n }\n setDefaultValue() {\n if (this.defaultValue && this.shouldAddDefaultValue) {\n const defaultValue = (this.component.multiple && !this.dataValue.length) ? [] : this.defaultValue;\n this.setValue(defaultValue, {\n noUpdateEvent: true\n });\n }\n }\n /**\n * Restore the value of a control.\n */\n restoreValue() {\n if (this.hasSetValue) {\n this.setValue(this.dataValue, {\n noUpdateEvent: true\n });\n }\n else {\n this.setDefaultValue();\n }\n }\n /**\n * Normalize values coming into updateValue.\n * @param {*} value - The value to normalize before setting.\n * @returns {*} - The normalized value.\n */\n normalizeValue(value) {\n return value;\n }\n /**\n * Update a value of this component.\n * @param {*} value - The value to update.\n * @param {*} flags - The flags to use when updating the value.\n * @returns {boolean} - If the value changed.\n */\n updateComponentValue(value, flags = {}) {\n let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;\n newValue = this.normalizeValue(newValue, flags);\n const oldValue = this.dataValue;\n let changed = ((newValue !== undefined) ? this.hasChanged(newValue, oldValue) : false);\n if (changed) {\n this.dataValue = newValue;\n changed = this.dataValue !== oldValue;\n this.updateOnChange(flags, changed);\n }\n if (this.componentModal && flags && flags.fromSubmission) {\n this.componentModal.setValue(value);\n }\n return changed;\n }\n /**\n * Updates the value of this component plus all sub-components.\n * @param {...any} args - The arguments to pass to updateValue.\n * @returns {boolean} - If the value changed.\n */\n updateValue(...args) {\n return this.updateComponentValue(...args);\n }\n getIcon(name, content, styles, ref = 'icon') {\n return this.renderTemplate('icon', {\n className: this.iconClass(name),\n ref,\n styles,\n content\n });\n }\n /**\n * Resets the value of this component.\n */\n resetValue() {\n this.unset();\n this.setValue(this.defaultValue || this.emptyValue, {\n noUpdateEvent: true,\n noValidate: true,\n resetValue: true\n });\n }\n /**\n * Determine if the value of this component has changed.\n * @param {*} newValue - The new value to check.\n * @param {*} oldValue - The existing value of the component.\n * @returns {boolean} - TRUE if the value has changed.\n */\n hasChanged(newValue, oldValue) {\n if (((newValue === undefined) || (newValue === null)) &&\n ((oldValue === undefined) || (oldValue === null) || this.isEmpty(oldValue))) {\n return false;\n }\n // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n if (newValue !== undefined &&\n newValue !== null &&\n this.allowData &&\n !this.hasValue()) {\n return true;\n }\n return !lodash_1.default.isEqual(newValue, oldValue);\n }\n /**\n * Update the value on change.\n * @param {*} flags - The flags to use when triggering the on change event.\n * @param {boolean} changed - If the value has changed.\n * @returns {boolean} - If the value changed.\n */\n updateOnChange(flags = {}, changed = false) {\n if (!flags.noUpdateEvent && changed) {\n if (flags.fromSubmission) {\n // Reset the errors when a submission has been made and allow it to revalidate.\n this._errors = [];\n }\n this.triggerChange(flags);\n return true;\n }\n return false;\n }\n convertNumberOrBoolToString(value) {\n if (typeof value === 'number' || typeof value === 'boolean') {\n return value.toString();\n }\n return value;\n }\n doValueCalculation(dataValue, data, row) {\n var _a;\n return this.evaluate(this.component.calculateValue, {\n value: dataValue,\n data,\n row: row || this.data,\n submission: ((_a = this.root) === null || _a === void 0 ? void 0 : _a._submission) || {\n data: this.rootValue\n }\n }, 'value');\n }\n /* eslint-disable max-statements */\n calculateComponentValue(data, flags, row) {\n // Skip value calculation for the component if we don't have entire form data set or in builder mode\n if (this.builderMode || lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {\n return false;\n }\n // If no calculated value or\n // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n const { clearOnHide } = this.component;\n const shouldBeCleared = this.conditionallyHidden() && clearOnHide;\n const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);\n if (shouldBeCleared) {\n // remove calculated value so that the value is recalculated once component becomes visible\n if (this.hasOwnProperty('calculatedValue') && allowOverride) {\n lodash_1.default.unset(this, 'calculatedValue');\n }\n return false;\n }\n // Handle all cases when calculated values should not fire.\n if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||\n !(this.component.calculateValue || this.component.calculateValueVariable) ||\n (this.options.server && !this.component.calculateServer) ||\n (flags.dataSourceInitialLoading && allowOverride)) {\n return false;\n }\n const dataValue = this.dataValue;\n // Calculate the new value.\n let calculatedValue = this.doValueCalculation(dataValue, data, row, flags);\n if (this.options.readOnly && dataValue && !calculatedValue) {\n return false;\n }\n if (lodash_1.default.isNil(calculatedValue)) {\n calculatedValue = this.emptyValue;\n }\n const changed = !lodash_1.default.isEqual(dataValue, calculatedValue);\n // Do not override calculations on server if they have calculateServer set.\n if (allowOverride) {\n // The value is considered locked if it is not empty and comes from a submission value.\n const fromSubmission = (flags.fromSubmission && this.component.persistent === true);\n if (this.isEmpty(dataValue)) {\n // Reset the calculation lock if ever the data is cleared.\n this.calculationLocked = false;\n }\n else if (this.calculationLocked || fromSubmission) {\n this.calculationLocked = true;\n return false;\n }\n const firstPass = (this.calculatedValue === undefined) || flags.resetValue;\n if (firstPass) {\n this.calculatedValue = null;\n }\n const newCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(calculatedValue));\n const previousCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(this.calculatedValue));\n const normalizedDataValue = this.normalizeValue(this.convertNumberOrBoolToString(dataValue));\n const calculationChanged = !lodash_1.default.isEqual(previousCalculatedValue, newCalculatedValue);\n const previousChanged = !lodash_1.default.isEqual(normalizedDataValue, previousCalculatedValue);\n if (calculationChanged && previousChanged && !firstPass) {\n return false;\n }\n // Check to ensure that the calculated value is different than the previously calculated value.\n if (previousCalculatedValue && previousChanged && !calculationChanged) {\n this.calculatedValue = null;\n return false;\n }\n if (flags.isReordered || !calculationChanged) {\n return false;\n }\n if (fromSubmission) {\n // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass\n this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n return false;\n }\n // If this is the firstPass, and the dataValue is different than to the calculatedValue.\n if (firstPass && !this.isEmpty(dataValue) && changed && calculationChanged) {\n // Return that we have a change so it will perform another pass.\n return true;\n }\n }\n this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n if (changed) {\n if (!flags.noPristineChangeOnModified && this.root.initialized) {\n this.pristine = false;\n }\n flags.triggeredComponentId = this.id;\n return this.setValue(calculatedValue, flags);\n }\n return false;\n }\n /* eslint-enable max-statements */\n /**\n * Performs calculations in this component plus any child components.\n * @param {*} data - The data to perform the calculation with.\n * @param {*} flags - The flags to use when calculating the value.\n * @param {*} row - The contextual row data to use when performing the calculation.\n * @returns {boolean} - TRUE if the value changed.\n */\n calculateValue(data, flags, row) {\n data = data || this.rootValue;\n flags = flags || {};\n row = row || this.data;\n return this.calculateComponentValue(data, flags, row);\n }\n /**\n * Get this component's label text.\n * @returns {string} - The label text for this component.\n */\n get label() {\n return this.component.label;\n }\n /**\n * Set this component's label text and render it.\n * @param {string} value - The new label text.\n */\n set label(value) {\n this.component.label = value;\n if (this.labelElement) {\n this.labelElement.innerText = value;\n }\n }\n /**\n * Get FormioForm element at the root of this component tree.\n * @returns {*} root - The root component to search from.\n */\n getRoot() {\n return this.root;\n }\n /**\n * Returns the invalid message, or empty string if the component is valid.\n * @param {*} data - The data to check if the component is valid.\n * @param {boolean} dirty - If the component is dirty.\n * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.\n * @param {*} row - Contextual row data for this component.\n * @returns {string} - The message to show when the component is invalid.\n */\n invalidMessage(data, dirty, ignoreCondition, row) {\n var _a;\n if (!row) {\n row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);\n }\n if (!ignoreCondition && !this.checkCondition(row, data)) {\n return '';\n }\n // See if this is forced invalid.\n if (this.invalid) {\n return this.invalid;\n }\n // No need to check for errors if there is no input or if it is pristine.\n if (!this.hasInput || (!dirty && this.pristine)) {\n return '';\n }\n const validationScope = { errors: [] };\n (0, process_1.processOneSync)({\n component: this.component,\n data,\n row,\n path: this.path || this.component.key,\n parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n paths: this.paths,\n scope: validationScope,\n instance: this,\n processors: [\n process_1.validateProcessInfo\n ]\n });\n const errors = validationScope.errors;\n const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n return lodash_1.default.map(interpolatedErrors, 'message').join('\\n\\n');\n }\n /**\n * Returns if the component is valid or not.\n * @param {*} data - The data to check if the component is valid.\n * @param {boolean} dirty - If the component is dirty.\n * @returns {boolean} - TRUE if the component is valid.\n */\n isValid(data, dirty) {\n return !this.invalidMessage(data, dirty);\n }\n setComponentValidity(errors, dirty, silentCheck) {\n if (silentCheck) {\n return [];\n }\n const messages = errors.filter(message => !message.fromServer);\n if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {\n return this.setCustomValidity(messages, dirty);\n }\n else {\n return this.setCustomValidity('');\n }\n }\n /**\n * Interpolate errors from the validation methods.\n * @param {Array<any>} errors - An array of errors to interpolate.\n * @returns {Array<any>} - The interpolated errors.\n */\n interpolateErrors(errors) {\n var _a;\n const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;\n }\n /**\n * Show component validation errors.\n * @param {*} errors - An array of errors that have occured.\n * @param {*} data - The root submission data.\n * @param {*} row - The contextual row data.\n * @param {*} flags - The flags to perform validation.\n * @returns {boolean} - TRUE if the component is valid.\n */\n showValidationErrors(errors, data, row, flags) {\n if (flags.silentCheck) {\n return [];\n }\n let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);\n if (this.options.alwaysDirty) {\n isDirty = true;\n }\n this.setDirty(isDirty);\n return this.setComponentValidity(errors, isDirty, flags.silentCheck, flags.fromSubmission);\n }\n /**\n * Perform a component validation.\n * @param {*} data - The root data you wish to use for this component.\n * @param {*} row - The contextual row data you wish to use for this component.\n * @param {*} flags - The flags to control the behavior of the validation.\n * @returns {Array<any>} - An array of errors if the component is invalid.\n */\n validateComponent(data = null, row = null, flags = {}) {\n var _a;\n data = data || this.rootValue;\n row = row || this.data;\n const { async = false } = flags;\n if (this.shouldSkipValidation(data, row, flags)) {\n return async ? Promise.resolve([]) : [];\n }\n const processContext = {\n component: this.component,\n data,\n row,\n local: !!flags.local,\n value: this.validationValue,\n parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n paths: this.paths,\n path: this.path || this.component.key,\n instance: this,\n form: this.root ? this.root._form : {},\n scope: { errors: [] },\n processors: [\n process_1.validateProcessInfo\n ]\n };\n if (async) {\n return (0, process_1.processOne)(processContext).then(() => {\n this._errors = this.interpolateErrors(processContext.scope.errors);\n return this._errors;\n });\n }\n (0, process_1.processOneSync)(processContext);\n this._errors = this.interpolateErrors(processContext.scope.errors);\n return this._errors;\n }\n /**\n * Checks the validity of this component and sets the error message if it is invalid.\n * @param {*} data - The data to check if the component is valid.\n * @param {boolean} dirty - If the component is dirty.\n * @param {*} row - The contextual row data for this component.\n * @param {*} flags - The flags to use when checking the validity.\n * @param {Array<any>} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n * @returns {boolean} - TRUE if the component is valid.\n */\n checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n data = data || this.rootValue;\n row = row || this.data;\n flags.dirty = dirty || false;\n if (flags.async) {\n return this.validateComponent(data, row, flags).then((errors) => {\n allErrors.push(...errors);\n if (this.parent && this.parent.childErrors) {\n if (errors.length) {\n this.parent.childErrors.push(...errors);\n }\n else {\n lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n }\n }\n this.showValidationErrors(errors, data, row, flags);\n return errors.length === 0;\n });\n }\n else {\n const errors = this.validateComponent(data, row, flags);\n this.showValidationErrors(errors, data, row, flags);\n allErrors.push(...errors);\n if (this.parent && this.parent.childErrors) {\n if (errors.length) {\n this.parent.childErrors.push(...errors);\n }\n else {\n lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n }\n }\n return errors.length === 0;\n }\n }\n /**\n * Checks the validity of the component.\n * @param {*} data - The data to check if the component is valid.\n * @param {boolean} dirty - If the component is dirty.\n * @param {*} row - The contextual row data for this component.\n * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n * @param {Array<any>} errors - An array of all errors that have occured so that it can be appended when another one occurs here.\n * @returns {boolean} - TRUE if the component is valid.\n */\n checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n data = data || this.rootValue;\n row = row || this.data;\n return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n }\n checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);\n }\n /**\n * Check the conditions, calculations, and validity of a single component and triggers an update if\n * something changed.\n * @param {*} data - The root data of the change event.\n * @param {*} flags - The flags from this change event.\n * @param {*} row - The contextual row data for this component.\n * @returns {void|boolean} - TRUE if no check should be performed on the component.\n */\n checkData(data = null, flags = null, row = null) {\n data = data || this.rootValue;\n flags = flags || {};\n row = row || this.data;\n // Needs for Nextgen Rules Engine\n this.resetCaches();\n // Do not trigger refresh if change was triggered on blur event since components with Refresh on Blur have their own listeners\n if (!flags.fromBlur) {\n this.checkRefreshOn(flags.changes, flags);\n }\n if (flags.noCheck) {\n return true;\n }\n this.checkComponentConditions(data, flags, row);\n if (this.id !== flags.triggeredComponentId) {\n this.calculateComponentValue(data, flags, row);\n }\n }\n checkModal(errors = [], dirty = false) {\n const messages = errors.filter(error => !error.fromServer);\n const isValid = errors.length === 0;\n if (!this.component.modalEdit || !this.componentModal) {\n return;\n }\n if (dirty && !isValid) {\n this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);\n }\n else {\n this.clearErrorClasses(this.refs.openModalWrapper);\n }\n }\n get validationValue() {\n return this.dataValue;\n }\n isEmpty(value = this.dataValue) {\n const isEmptyArray = (lodash_1.default.isArray(value) && value.length === 1) ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;\n return value == null || value.length === 0 || lodash_1.default.isEqual(value, this.emptyValue) || isEmptyArray;\n }\n isEqual(valueA, valueB = this.dataValue) {\n return (this.isEmpty(valueA) && this.isEmpty(valueB)) || lodash_1.default.isEqual(valueA, valueB);\n }\n /**\n * Check if a component is eligible for multiple validation\n * @returns {boolean} - TRUE if the component is eligible for multiple validation.\n */\n validateMultiple() {\n return true;\n }\n clearErrorClasses(element = this.element) {\n this.removeClass(element, this.options.componentErrorClass);\n this.removeClass(element, 'alert alert-danger');\n this.removeClass(element, 'has-error');\n this.removeClass(element, 'has-message');\n }\n setInputWidgetErrorClasses(inputRefs, hasErrors) {\n if (!this.isInputComponent || !this.component.widget || !(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.length)) {\n return;\n }\n inputRefs.forEach((input) => {\n if ((input === null || input === void 0 ? void 0 : input.widget) && input.widget.setErrorClasses) {\n input.widget.setErrorClasses(hasErrors);\n }\n });\n }\n addFocusBlurEvents(element) {\n this.addEventListener(element, 'focus', () => {\n if (this.root.focusedComponent !== this) {\n if (this.root.pendingBlur) {\n this.root.pendingBlur();\n }\n this.root.focusedComponent = this;\n this.emit('focus', this);\n }\n else if (this.root.focusedComponent === this && this.root.pendingBlur) {\n this.root.pendingBlur.cancel();\n this.root.pendingBlur = null;\n }\n });\n this.addEventListener(element, 'blur', () => {\n this.root.pendingBlur = FormioUtils.delay(() => {\n this.emit('blur', this);\n if (this.component.validateOn === 'blur') {\n this.root.triggerChange({ fromBlur: true }, {\n instance: this,\n component: this.component,\n value: this.dataValue,\n flags: { fromBlur: true }\n });\n }\n this.root.focusedComponent = null;\n this.root.pendingBlur = null;\n });\n });\n }\n // eslint-disable-next-line max-statements\n setCustomValidity(messages, dirty, external) {\n const inputRefs = this.isInputComponent ? this.refs.input || [] : null;\n if (typeof messages === 'string' && messages) {\n messages = {\n level: 'error',\n message: messages,\n component: this.component,\n };\n }\n if (!Array.isArray(messages)) {\n if (messages) {\n messages = [messages];\n }\n else {\n messages = [];\n }\n }\n const errors = messages.filter(message => message.level === 'error');\n let invalidInputRefs = inputRefs;\n // Filter the invalid input refs in multiple components\n if (this.component.multiple) {\n const refsArray = Array.from(inputRefs);\n refsArray.forEach((input) => {\n this.setElementInvalid(this.performInputMapping(input), false);\n });\n this.setInputWidgetErrorClasses(refsArray, false);\n invalidInputRefs = refsArray.filter((ref, index) => {\n var _a;\n return (_a = messages.some) === null || _a === void 0 ? void 0 : _a.call(messages, (msg) => {\n var _a;\n return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.index) === index;\n });\n });\n }\n if (messages.length) {\n if (this.refs.messageContainer) {\n this.empty(this.refs.messageContainer);\n }\n this.emit('componentError', {\n instance: this,\n component: this.component,\n message: messages[0].message,\n messages,\n external: !!external,\n });\n this.addMessages(messages, dirty, invalidInputRefs);\n if (invalidInputRefs) {\n this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n }\n }\n else if (!errors.length || (errors[0].external === !!external)) {\n if (this.refs.messageContainer) {\n this.empty(this.refs.messageContainer);\n }\n if (this.refs.modalMessageContainer) {\n this.empty(this.refs.modalMessageContainer);\n }\n if (invalidInputRefs) {\n this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n }\n this.clearErrorClasses();\n }\n this._visibleErrors = messages;\n return messages;\n }\n /**\n * Determines if the value of this component is hidden from the user as if it is coming from the server, but is\n * protected.\n * @returns {boolean|*} - TRUE if the value is hidden.\n */\n isValueHidden() {\n if (this.component.protected && this.root.editing) {\n return false;\n }\n if (!this.root || !this.root.hasOwnProperty('editing')) {\n return false;\n }\n if (!this.root || !this.root.editing) {\n return false;\n }\n return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));\n }\n shouldSkipValidation(data, row, flags = {}) {\n const rules = [\n // Do not validate if the flags say not too.\n () => flags.noValidate,\n // Force valid if component is read-only\n () => this.options.readOnly,\n // Do not check validations if component is not an input component.\n () => !this.hasInput,\n // Check to see if we are editing and if so, check component persistence.\n () => this.isValueHidden(),\n // Force valid if component is hidden.\n () => {\n if (!this.component.validateWhenHidden && (!this.visible || !this.checkCondition(row, data))) {\n // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.\n this._errors = [];\n return true;\n }\n return false;\n }\n ];\n return rules.some(pred => pred());\n }\n // Maintain reverse compatibility.\n whenReady() {\n console.warn(this.t('whenReadyDeprecation'));\n return this.dataReady;\n }\n get dataReady() {\n return Promise.resolve();\n }\n /**\n * Prints out the value of this component as a string value.\n * @param {*} value - The value to print out.\n * @returns {string} - The string representation of the value.\n */\n asString(value) {\n value = value || this.getValue();\n return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');\n }\n /**\n * Return if the component is disabled.\n * @returns {boolean} - TRUE if the component is disabled.\n */\n get disabled() {\n return this._disabled || this.parentDisabled;\n }\n /**\n * Disable this component.\n * @param {boolean} disabled - TRUE to disable the component.\n */\n set disabled(disabled) {\n this._disabled = disabled;\n }\n setDisabled(element, disabled) {\n if (!element) {\n return;\n }\n element.disabled = disabled;\n if (disabled) {\n element.setAttribute('disabled', 'disabled');\n }\n else {\n element.removeAttribute('disabled');\n }\n }\n setLoading(element, loading) {\n if (!element || (element.loading === loading)) {\n return;\n }\n element.loading = loading;\n if (!element.loader && loading) {\n element.loader = this.ce('i', {\n class: `${this.iconClass('refresh', true)} button-icon-right`\n });\n }\n if (element.loader) {\n if (loading) {\n this.appendTo(element.loader, element);\n }\n else {\n this.removeChildFrom(element.loader, element);\n }\n }\n }\n selectOptions(select, tag, options, defaultValue) {\n lodash_1.default.each(options, (option) => {\n const attrs = {\n value: option.value\n };\n if (defaultValue !== undefined && (option.value === defaultValue)) {\n attrs.selected = 'selected';\n }\n const optionElement = this.ce('option', attrs);\n optionElement.appendChild(this.text(option.label));\n select.appendChild(optionElement);\n });\n }\n setSelectValue(select, value) {\n const options = select.querySelectorAll('option');\n lodash_1.default.each(options, (option) => {\n if (option.value === value) {\n option.setAttribute('selected', 'selected');\n }\n else {\n option.removeAttribute('selected');\n }\n });\n if (select.onchange) {\n select.onchange();\n }\n if (select.onselect) {\n select.onselect();\n }\n }\n getRelativePath(path) {\n const keyPart = `.${this.key}`;\n const thisPath = this.isInputComponent ? this.path\n : this.path.slice(0).replace(keyPart, '');\n return path.replace(thisPath, '');\n }\n clear() {\n this.detach();\n this.empty(this.getElement());\n }\n append(element) {\n this.appendTo(element, this.element);\n }\n prepend(element) {\n this.prependTo(element, this.element);\n }\n removeChild(element) {\n this.removeChildFrom(element, this.element);\n }\n detachLogic() {\n this.logic.forEach(logic => {\n if (logic.trigger.type === 'event') {\n const event = this.interpolate(logic.trigger.event);\n this.off(event); // only applies to callbacks on this component\n }\n });\n }\n attachLogic() {\n // Do not attach logic during builder mode.\n if (this.builderMode) {\n return;\n }\n this.logic.forEach((logic) => {\n if (logic.trigger.type === 'event') {\n const event = this.interpolate(logic.trigger.event);\n this.on(event, (...args) => {\n const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n if (this.applyActions(newComponent, logic.actions, args)) {\n // If component definition changed, replace it.\n if (!lodash_1.default.isEqual(this.component, newComponent)) {\n this.component = newComponent;\n const visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n const disabled = this.shouldDisabled;\n // Change states which won't be recalculated during redrawing\n if (this.visible !== visible) {\n // If the logic is triggered by an event and the action sets the hidden state then the original\n // component definition must be changed so that the components hidden state does not get flipped back by\n // the fieldLogic function\n this.originalComponent.hidden = !visible;\n this.visible = visible;\n }\n if (this.disabled !== disabled) {\n this.disabled = disabled;\n }\n this.redraw();\n }\n }\n }, true);\n }\n });\n }\n /**\n * Get the element information.\n * @returns {*} - The components \"input\" DOM element information.\n */\n elementInfo() {\n const attributes = {\n name: this.options.name,\n type: this.component.inputType || 'text',\n class: 'form-control',\n lang: this.options.language\n };\n if (this.component.placeholder) {\n attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });\n }\n if (this.component.tabindex) {\n attributes.tabindex = this.component.tabindex;\n }\n if (this.disabled) {\n attributes.disabled = 'disabled';\n }\n lodash_1.default.defaults(attributes, this.component.attributes);\n return {\n type: 'input',\n component: this.component,\n changeEvent: 'change',\n attr: attributes\n };\n }\n autofocus() {\n const hasAutofocus = this.component.autofocus && !this.builderMode && !this.options.preview;\n if (hasAutofocus) {\n this.on('render', () => this.focus(), true);\n }\n }\n scrollIntoView(element = this.element, verticalOnly) {\n if (!element) {\n return;\n }\n const { left, top } = element.getBoundingClientRect();\n window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);\n }\n focus(index) {\n var _a, _b, _c, _d;\n if ('beforeFocus' in this.parent) {\n this.parent.beforeFocus(this);\n }\n if (!index && !lodash_1.default.isNumber(index) && ((_b = (_a = this.refs) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.length)) {\n index = this.refs.input.length - 1;\n }\n if ((_c = this.refs.input) === null || _c === void 0 ? void 0 : _c.length) {\n const focusingInput = this.refs.input[index];\n if (((_d = this.component.widget) === null || _d === void 0 ? void 0 : _d.type) === 'calendar') {\n const sibling = focusingInput.nextSibling;\n if (sibling) {\n sibling.focus();\n }\n }\n else {\n focusingInput.focus();\n }\n }\n if (this.refs.openModal) {\n this.refs.openModal.focus();\n }\n if (this.parent.refs.openModal) {\n this.parent.refs.openModal.focus();\n }\n }\n /**\n * Get `Formio` instance for working with files\n * @returns {import('@formio/core').Formio} - The Formio instance file service.\n */\n get fileService() {\n if (this.options.fileService) {\n return this.options.fileService;\n }\n if (this.options.formio) {\n return this.options.formio;\n }\n if (this.root && this.root.formio) {\n return this.root.formio;\n }\n const formio = new Formio_1.Formio();\n // If a form is loaded, then make sure to set the correct formUrl.\n if (this.root && this.root._form && this.root._form._id) {\n formio.formUrl = `${formio.projectUrl}/form/${this.root._form._id}`;\n }\n return formio;\n }\n resetCaches() { }\n get previewMode() {\n return false;\n }\n}\nexports[\"default\"] = Component;\nComponent.externalLibraries = {};\nComponent.requireLibrary = function (name, property, src, polling) {\n if (!Component.externalLibraries.hasOwnProperty(name)) {\n Component.externalLibraries[name] = {};\n Component.externalLibraries[name].ready = new Promise((resolve, reject) => {\n Component.externalLibraries[name].resolve = resolve;\n Component.externalLibraries[name].reject = reject;\n });\n const callbackName = `${name}Callback`;\n if (!polling && !window[callbackName]) {\n window[callbackName] = function () {\n this.resolve();\n }.bind(Component.externalLibraries[name]);\n }\n // See if the plugin already exists.\n const plugin = (0, utils_1.getScriptPlugin)(property);\n if (plugin) {\n Component.externalLibraries[name].resolve(plugin);\n }\n else {\n src = Array.isArray(src) ? src : [src];\n src.forEach((lib) => {\n let attrs = {};\n let elementType = '';\n if (typeof lib === 'string') {\n lib = {\n type: 'script',\n src: lib\n };\n }\n switch (lib.type) {\n case 'script':\n elementType = 'script';\n attrs = {\n src: lib.src,\n type: 'text/javascript',\n defer: true,\n async: true\n };\n break;\n case 'styles':\n elementType = 'link';\n attrs = {\n href: lib.src,\n rel: 'stylesheet'\n };\n break;\n }\n // Add the script to the top page.\n const script = document.createElement(elementType);\n for (const attr in attrs) {\n script.setAttribute(attr, attrs[attr]);\n }\n document.getElementsByTagName('head')[0].appendChild(script);\n });\n // if no callback is provided, then check periodically for the script.\n if (polling) {\n setTimeout(function checkLibrary() {\n const plugin = (0, utils_1.getScriptPlugin)(property);\n if (plugin) {\n Component.externalLibraries[name].resolve(plugin);\n }\n else {\n // check again after 200 ms.\n setTimeout(checkLibrary, 200);\n }\n }, 200);\n }\n }\n }\n return Component.externalLibraries[name].ready;\n};\nComponent.libraryReady = function (name) {\n if (Component.externalLibraries.hasOwnProperty(name) &&\n Component.externalLibraries[name].ready) {\n return Component.externalLibraries[name].ready;\n }\n return Promise.reject(`${name} library was not required.`);\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/Component.js?");
|
4856
|
+
eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/* globals Quill, ClassicEditor, CKEDITOR */\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"./node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst tippy_js_1 = __importDefault(__webpack_require__(/*! tippy.js */ \"./node_modules/tippy.js/dist/tippy.esm.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nconst ismobilejs_1 = __importDefault(__webpack_require__(/*! ismobilejs */ \"./node_modules/ismobilejs/esm/index.js\"));\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst FormioUtils = __importStar(__webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst Element_1 = __importDefault(__webpack_require__(/*! ../../../Element */ \"./lib/cjs/Element.js\"));\nconst ComponentModal_1 = __importDefault(__webpack_require__(/*! ../componentModal/ComponentModal */ \"./lib/cjs/components/_classes/componentModal/ComponentModal.js\"));\nconst widgets_1 = __importDefault(__webpack_require__(/*! ../../../widgets */ \"./lib/cjs/widgets/index.js\"));\nconst addons_1 = __importDefault(__webpack_require__(/*! ../../../addons */ \"./lib/cjs/addons/index.js\"));\nconst uploadAdapter_1 = __webpack_require__(/*! ../../../providers/storage/uploadAdapter */ \"./lib/cjs/providers/storage/uploadAdapter.js\");\nconst en_1 = __importDefault(__webpack_require__(/*! ../../../translations/en */ \"./lib/cjs/translations/en.js\"));\nconst Templates_1 = __importDefault(__webpack_require__(/*! ../../../templates/Templates */ \"./lib/cjs/templates/Templates.js\"));\nconst isIEBrowser = FormioUtils.getBrowserInfo().ie;\n/**\n * This is the Component class\n which all elements within the FormioForm derive from.\n */\nclass Component extends Element_1.default {\n static schema(...sources) {\n return lodash_1.default.merge({\n /**\n * Determines if this component provides an input.\n */\n input: true,\n /**\n * The data key for this component (how the data is stored in the database).\n */\n key: '',\n /**\n * The input placeholder for this component.\n */\n placeholder: '',\n /**\n * The input prefix\n */\n prefix: '',\n /**\n * The custom CSS class to provide to this component.\n */\n customClass: '',\n /**\n * The input suffix.\n */\n suffix: '',\n /**\n * If this component should allow an array of values to be captured.\n */\n multiple: false,\n /**\n * The default value of this component.\n */\n defaultValue: null,\n /**\n * If the data of this component should be protected (no GET api requests can see the data)\n */\n protected: false,\n /**\n * Validate if the value of this component should be unique within the form.\n */\n unique: false,\n /**\n * If the value of this component should be persisted within the backend api database.\n */\n persistent: true,\n /**\n * Determines if the component should be within the form, but not visible.\n */\n hidden: false,\n /**\n * If the component should be cleared when hidden.\n */\n clearOnHide: true,\n /**\n * This will refresh this component options when this field changes.\n */\n refreshOn: '',\n /**\n * This will redraw the component when this field changes.\n */\n redrawOn: '',\n /**\n * If this component should be included as a column within a submission table.\n */\n tableView: false,\n /**\n * If this component should be rendering in modal.\n */\n modalEdit: false,\n /**\n * The input label provided to this component.\n */\n label: '',\n dataGridLabel: false,\n labelPosition: 'top',\n description: '',\n errorLabel: '',\n tooltip: '',\n hideLabel: false,\n tabindex: '',\n disabled: false,\n autofocus: false,\n dbIndex: false,\n customDefaultValue: '',\n calculateValue: '',\n calculateServer: false,\n widget: null,\n /**\n * Attributes that will be assigned to the input elements of this component.\n */\n attributes: {},\n /**\n * This will perform the validation on either \"change\" or \"blur\" of the input element.\n */\n validateOn: 'change',\n /**\n * The validation criteria for this component.\n */\n validate: {\n /**\n * If this component is required.\n */\n required: false,\n /**\n * Custom JavaScript validation.\n */\n custom: '',\n /**\n * If the custom validation should remain private (only the backend will see it and execute it).\n */\n customPrivate: false,\n /**\n * If this component should implement a strict date validation if the Calendar widget is implemented.\n */\n strictDateValidation: false,\n multiple: false,\n unique: false\n },\n /**\n * The simple conditional settings for a component.\n */\n conditional: {\n show: null,\n when: null,\n eq: ''\n },\n overlay: {\n style: '',\n left: '',\n top: '',\n width: '',\n height: '',\n },\n allowCalculateOverride: false,\n encrypted: false,\n showCharCount: false,\n showWordCount: false,\n properties: {},\n allowMultipleMasks: false,\n addons: [],\n serverOverride: {},\n }, ...sources);\n }\n /**\n * Return the simple condition settings as part of the component.\n * @returns {object} - The simple conditional settings.\n */\n static get conditionOperatorsSettings() {\n return {\n operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],\n valueComponent() {\n return {\n type: 'textfield',\n widget: {\n type: 'input'\n }\n };\n }\n };\n }\n /**\n * Return the array of possible types of component value absed on its schema.\n * @param schema\n * @returns {Array}\n */\n static savedValueTypes(schema) {\n schema = schema || {};\n return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];\n }\n /**\n * Provides a table view for this component. Override if you wish to do something different than using getView\n * method of your instance.\n * @param value\n * @param options\n */\n /* eslint-disable no-unused-vars */\n static tableView(value, options) { }\n /* eslint-enable no-unused-vars */\n /**\n * Initialize a new Component.\n * @param {object} component - The component JSON you wish to initialize.\n * @param {object} options - The options for this component.\n * @param {object} data - The global data submission object this component will belong.\n */\n /* eslint-disable max-statements */\n constructor(component, options, data) {\n var _a, _b, _c, _d;\n super(Object.assign({\n renderMode: 'form',\n attachMode: 'full',\n noDefaults: false\n }, options || {}));\n // Restore the component id.\n if (component && component.id) {\n this.id = component.id;\n }\n /**\n * Determines if this component has a condition assigned to it.\n * @type {null}\n * @private\n */\n this._hasCondition = null;\n /**\n * The row index for this component.\n */\n this._rowIndex = undefined;\n /**\n * References to dom elements\n */\n this.refs = {};\n // Allow global override for any component JSON.\n if (component &&\n this.options.components &&\n this.options.components[component.type]) {\n lodash_1.default.merge(component, this.options.components[component.type]);\n }\n /**\n * An array of all the children components errors.\n */\n this.childErrors = [];\n /**\n * Last validation errors that have occured.\n */\n this._errors = [];\n this._visibleErrors = [];\n /**\n * The Form.io component JSON schema.\n * @type {*}\n */\n this.component = this.mergeSchema(component || {});\n // Add the id to the component.\n this.component.id = this.id;\n this.afterComponentAssign();\n // Save off the original component to be used in logic.\n this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n /**\n * If the component has been attached\n */\n this.attached = false;\n /**\n * If the component has been rendered\n */\n this.rendered = false;\n /**\n * The data object in which this component resides.\n * @type {*}\n */\n this._data = data || {};\n /**\n * Tool tip text after processing\n * @type {string}\n */\n this.tooltip = '';\n /**\n * The row path of this component.\n * @type {number}\n */\n this.row = this.options.row;\n /**\n * Points to a flat map of child components (if applicable).\n * @type {object}\n */\n this.childComponentsMap = {};\n /**\n * Determines if this component is disabled, or not.\n * @type {boolean}\n */\n this._disabled = (0, utils_1.boolValue)(this.component.disabled) ? this.component.disabled : false;\n /**\n * Points to the root component, usually the FormComponent.\n * @type {Component}\n */\n this.root = this.options.root || this;\n this.localRoot = this.options.localRoot || this;\n /**\n * If this input has been input and provided value.\n * @type {boolean}\n */\n this.pristine = true;\n /**\n * Points to the parent component.\n * @type {Component}\n */\n this.parent = this.options.parent;\n /**\n * The component paths for this component.\n * @type {import('@formio/core').ComponentPaths} - The component paths.\n */\n this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));\n this.options.name = this.options.name || 'data';\n this._path = '';\n // Needs for Nextgen Rules Engine\n this.resetCaches();\n /**\n * Determines if this component is visible, or not.\n */\n this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;\n this._visible = this._parentVisible && (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n this._parentDisabled = false;\n /**\n * The reference attribute name for this component\n */\n this._referenceAttributeName = 'ref';\n /**\n * Sometimes the customDefaultValue does not set the \"value\" within the script, but is just a script to execute. This\n * flag is used to determine if the customDefaultValue should be used to set the value of the component or not based on\n * if there is a \"value=\" within the script.\n */\n this.shouldSetCustomDefault = true;\n if (this.component.customDefaultValue && (typeof this.component.customDefaultValue === 'string')) {\n this.shouldSetCustomDefault = this.component.customDefaultValue.match(/value\\s*=/);\n }\n /**\n * Same as customDefaultValue, but for calculateValue.\n */\n this.shouldSetCalculatedValue = true;\n if (this.component.calculateValue && (typeof this.component.calculateValue === 'string')) {\n this.shouldSetCalculatedValue = this.component.calculateValue.match(/value\\s*=/);\n }\n /**\n * Used to trigger a new change in this component.\n * @type {Function} - Call to trigger a change in this component.\n */\n let changes = [];\n let lastChanged = null;\n let triggerArgs = [];\n const _triggerChange = lodash_1.default.debounce((...args) => {\n if (this.root) {\n this.root.changing = false;\n }\n triggerArgs = [];\n if (!args[1] && lastChanged) {\n // Set the changed component if one isn't provided.\n args[1] = lastChanged;\n }\n if (lodash_1.default.isEmpty(args[0]) && lastChanged) {\n // Set the flags if it is empty and lastChanged exists.\n args[0] = lastChanged.flags;\n }\n lastChanged = null;\n args[3] = changes;\n const retVal = this.onChange(...args);\n changes = [];\n return retVal;\n }, 100);\n this.triggerChange = (...args) => {\n if (args[1]) {\n // Make sure that during the debounce that we always track lastChanged component, even if they\n // don't provide one later.\n lastChanged = args[1];\n changes.push(lastChanged);\n }\n if (this.root) {\n this.root.changing = true;\n }\n if (args.length) {\n triggerArgs = args;\n }\n return _triggerChange(...triggerArgs);\n };\n /**\n * Used to trigger a redraw event within this component.\n * @type {Function}\n */\n this.triggerRedraw = lodash_1.default.debounce(this.redraw.bind(this), 100);\n /**\n * list of attached tooltips\n * @type {Array}\n */\n this.tooltips = [];\n /**\n * List of attached addons\n * @type {Array}\n */\n this.addons = [];\n // To force this component to be invalid.\n this.invalid = false;\n if (this.component) {\n this.type = this.component.type;\n if (this.allowData && this.key) {\n this.options.name += `[${this.key}]`;\n // If component is visible or not set to clear on hide, set the default value.\n if (!(this.conditionallyHidden() && this.component.clearOnHide)) {\n if (!this.hasValue()) {\n if (this.shouldAddDefaultValue) {\n this.dataValue = this.defaultValue;\n }\n }\n else {\n // Ensure the dataValue is set.\n /* eslint-disable no-self-assign */\n this.dataValue = this.dataValue;\n /* eslint-enable no-self-assign */\n }\n }\n }\n /**\n * The element information for creating the input element.\n * @type {*}\n */\n this.info = this.elementInfo();\n }\n // Allow anyone to hook into the component creation.\n this.hook('component');\n if (!this.options.skipInit) {\n if (typeof this.beforeInit === 'function') {\n this.beforeInit();\n }\n this.init();\n }\n }\n /* eslint-enable max-statements */\n get componentsMap() {\n var _a;\n return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};\n }\n parentConditionallyHidden() {\n let currentParent = this.parent;\n while (currentParent) {\n if (currentParent.conditionallyHidden(true)) {\n return true;\n }\n currentParent = currentParent.parent;\n }\n return false;\n }\n get data() {\n return this._data;\n }\n set data(value) {\n this._data = value;\n }\n mergeSchema(component = {}) {\n return lodash_1.default.defaultsDeep(component, this.defaultSchema);\n }\n // Allow componets to notify when ready.\n get ready() {\n return Promise.resolve(this);\n }\n get isPDFReadOnlyMode() {\n return this.parent &&\n this.parent.form &&\n (this.parent.form.display === 'pdf') &&\n this.options.readOnly;\n }\n get labelInfo() {\n const label = {};\n label.hidden = this.labelIsHidden();\n label.className = '';\n label.labelPosition = this.component.labelPosition;\n label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;\n const isPDFReadOnlyMode = this.isPDFReadOnlyMode;\n if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {\n label.className += ' field-required';\n }\n if (label.hidden) {\n label.className += ' control-label--hidden';\n }\n if (this.info.attr.id) {\n label.for = this.info.attr.id;\n }\n return label;\n }\n init() {\n var _a;\n this.disabled = this.shouldDisabled;\n this._visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {\n this.component.addons.forEach((addon) => this.createAddon(addon));\n }\n }\n /**\n * Get Row Index.\n * @returns {number} - The row index.\n */\n get rowIndex() {\n return this._rowIndex;\n }\n /**\n * Set Row Index to row and update each component.\n * @param {number} value - The row index.\n * @returns {void}\n */\n set rowIndex(value) {\n var _a, _b;\n this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n this._rowIndex = value;\n }\n afterComponentAssign() {\n //implement in extended classes\n }\n createAddon(addonConfiguration) {\n var _a;\n const name = addonConfiguration.name;\n if (!name) {\n return;\n }\n const settings = ((_a = addonConfiguration.settings) === null || _a === void 0 ? void 0 : _a.data) || {};\n const Addon = addons_1.default[name.value];\n let addon = null;\n if (Addon) {\n const supportedComponents = Addon.info.supportedComponents;\n const supportsThisComponentType = !(supportedComponents === null || supportedComponents === void 0 ? void 0 : supportedComponents.length) ||\n supportedComponents.indexOf(this.component.type) !== -1;\n if (supportsThisComponentType) {\n addon = new Addon(settings, this);\n this.addons.push(addon);\n }\n else {\n console.warn(this.t('addonSupportTypeError', {\n type: this.component.type,\n label: name.label\n }));\n }\n }\n return addon;\n }\n teardown() {\n if (this.element) {\n delete this.element.component;\n delete this.element;\n }\n delete this._currentForm;\n delete this.parent;\n delete this.root;\n delete this.triggerChange;\n delete this.triggerRedraw;\n if (this.options) {\n delete this.options.root;\n delete this.options.parent;\n delete this.options.i18next;\n }\n super.teardown();\n }\n destroy(all = false) {\n super.destroy(all);\n this.detach();\n this.addons.forEach((addon) => addon.destroy());\n if (all) {\n this.teardown();\n }\n }\n get shouldDisabled() {\n return this.options.readOnly || this.component.disabled || (this.options.hasOwnProperty('disabled') && this.options.disabled[this.key]);\n }\n get isInputComponent() {\n return !this.component.hasOwnProperty('input') || this.component.input;\n }\n get allowData() {\n return this.hasInput;\n }\n get hasInput() {\n return this.isInputComponent || (this.refs.input && this.refs.input.length);\n }\n get defaultSchema() {\n return Component.schema();\n }\n get key() {\n return lodash_1.default.get(this.component, 'key', '');\n }\n get path() {\n return this.paths.dataPath;\n }\n set path(path) {\n throw new Error(this.t('setPathError'));\n }\n set parentVisible(value) {\n this._parentVisible = value;\n }\n get parentVisible() {\n return this._parentVisible;\n }\n set parentDisabled(value) {\n this._parentDisabled = value;\n }\n get parentDisabled() {\n return this._parentDisabled;\n }\n shouldForceVisibility(component, visibility) {\n if (!this.options[visibility]) {\n return false;\n }\n if (!component) {\n component = this.component;\n }\n if (lodash_1.default.isArray(this.options[visibility])) {\n return this.options[visibility].includes(component.key);\n }\n return this.options[visibility][component.key];\n }\n shouldForceHide(component) {\n return this.shouldForceVisibility(component, 'hide');\n }\n shouldForceShow(component) {\n return this.shouldForceVisibility(component, 'show');\n }\n /**\n * Sets the component visibility.\n * @param {boolean} value - Whether the component should be visible or not.\n */\n set visible(value) {\n if (this._visible !== value) {\n // Skip if this component is set to visible and is supposed to be hidden.\n if (value && this.shouldForceHide()) {\n return;\n }\n // Skip if this component is set to hidden and is supposed to be shown.\n if (!value && this.shouldForceShow()) {\n return;\n }\n this._visible = value;\n this.redraw();\n }\n }\n /**\n * Returns the component visibility\n * @returns {boolean} - Whether the component is visible or not.\n */\n get visible() {\n // Show only if visibility changes or if we are in builder mode or if hidden fields should be shown.\n if (this.builderMode || this.previewMode || this.options.showHiddenFields) {\n return true;\n }\n if (this.shouldForceHide()) {\n return false;\n }\n if (this.shouldForceShow()) {\n return true;\n }\n return this._visible && this._parentVisible;\n }\n get logicallyHidden() {\n if (this._logicallyHidden && !this.component.hidden) {\n this._logicallyHidden = false;\n }\n return this._logicallyHidden;\n }\n conditionallyHidden(skipParent = false) {\n if (!this.hasCondition()) {\n return this.logicallyHidden || (skipParent ? false : this.parentConditionallyHidden());\n }\n return !this.conditionallyVisible() || this.logicallyHidden || (skipParent ? false : this.parentConditionallyHidden());\n }\n get currentForm() {\n return this._currentForm;\n }\n set currentForm(instance) {\n this._currentForm = instance;\n }\n get fullMode() {\n return this.options.attachMode === 'full';\n }\n get builderMode() {\n return this.options.attachMode === 'builder';\n }\n get calculatedPath() {\n console.error(this.t('calculatedPathDeprecation'));\n return this.path;\n }\n get labelPosition() {\n return this.component.labelPosition;\n }\n get labelWidth() {\n const width = this.component.labelWidth;\n return width >= 0 ? width : 30;\n }\n get labelMargin() {\n const margin = this.component.labelMargin;\n return margin >= 0 ? margin : 3;\n }\n get isAdvancedLabel() {\n return [\n 'left-left',\n 'left-right',\n 'right-left',\n 'right-right'\n ].includes(this.labelPosition);\n }\n get labelPositions() {\n return this.labelPosition.split('-');\n }\n get skipInEmail() {\n return false;\n }\n rightDirection(direction) {\n if (this.options.condensedMode) {\n return false;\n }\n return direction === 'right';\n }\n getLabelInfo(isCondensed = false) {\n const isRightPosition = this.rightDirection(this.labelPositions[0]);\n const isLeftPosition = this.labelPositions[0] === 'left' || isCondensed;\n const isRightAlign = this.rightDirection(this.labelPositions[1]);\n let contentMargin = '';\n if (this.component.hideLabel) {\n const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;\n contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';\n contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';\n }\n const labelStyles = `\n flex: ${this.labelWidth};\n ${isRightPosition ? 'margin-left' : 'margin-right'}: ${this.labelMargin}%;\n `;\n const contentStyles = `\n flex: ${100 - this.labelWidth - this.labelMargin};\n ${contentMargin};\n ${this.component.hideLabel ? `max-width: ${100 - this.labelWidth - this.labelMargin}` : ''};\n `;\n return {\n isRightPosition,\n isRightAlign,\n labelStyles,\n contentStyles\n };\n }\n /**\n * Returns only the schema that is different from the default.\n * @param {object} schema - The \"full\" json schema for the component.\n * @param {object} defaultSchema - The \"default\" json schema for the component.\n * @param {boolean} recursion - If we are currently in a recursive loop.\n * @returns {object} - The minified json schema for this component.\n */\n getModifiedSchema(schema, defaultSchema, recursion) {\n const modified = {};\n if (!defaultSchema) {\n return schema;\n }\n lodash_1.default.each(schema, (val, key) => {\n if (!lodash_1.default.isArray(val) && lodash_1.default.isObject(val) && defaultSchema.hasOwnProperty(key)) {\n const subModified = this.getModifiedSchema(val, defaultSchema[key], true);\n if (!lodash_1.default.isEmpty(subModified)) {\n modified[key] = subModified;\n }\n }\n else if (lodash_1.default.isArray(val)) {\n if (val.length !== 0 && !lodash_1.default.isEqual(val, defaultSchema[key])) {\n modified[key] = val;\n }\n }\n else if ((!recursion && (key === 'type')) ||\n (!recursion && (key === 'key')) ||\n (!recursion && (key === 'label')) ||\n (!recursion && (key === 'input')) ||\n (!recursion && (key === 'tableView')) ||\n (val !== '' && !defaultSchema.hasOwnProperty(key)) ||\n (val !== '' && val !== defaultSchema[key]) ||\n (defaultSchema[key] && val !== defaultSchema[key])) {\n modified[key] = val;\n }\n });\n return modified;\n }\n /**\n * Returns the JSON schema for this component.\n * @returns {object} - The JSON schema for this component.\n */\n get schema() {\n return (0, utils_1.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));\n }\n /**\n * Returns true if component is inside DataGrid\n * @returns {boolean} - True if component is inside DataGrid\n */\n get isInDataGrid() {\n return this.inDataGrid;\n }\n /**\n * Translate a text using the i18n system.\n * @param {string} text - The i18n identifier.\n * @param {object} params - The i18n parameters to use for translation.\n * @param {...any} args - Additional arguments to pass to the translation library.\n * @returns {string} - The translated text.\n */\n t(text, params = {}, ...args) {\n if (!text) {\n return '';\n }\n // Use _userInput: true to ignore translations from defaults\n if (text in en_1.default && params._userInput) {\n return text;\n }\n params.data = params.data || this.rootValue;\n params.row = params.row || this.data;\n params.component = params.component || this.component;\n return super.t(text, params, ...args);\n }\n labelIsHidden() {\n return !this.component.label ||\n ((!this.isInDataGrid && this.component.hideLabel) ||\n (this.isInDataGrid && !this.component.dataGridLabel) ||\n this.options.floatingLabels ||\n this.options.inputsOnly) && !this.builderMode;\n }\n transform(type, value) {\n const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n return frameworkTemplates.hasOwnProperty('transform')\n ? frameworkTemplates.transform(type, value, this)\n : (type, value) => value;\n }\n getTemplate(names, modes) {\n modes = Array.isArray(modes) ? modes : [modes];\n names = Array.isArray(names) ? names : [names];\n if (!modes.includes('form')) {\n modes.push('form');\n }\n let result = null;\n if (this.options.templates) {\n result = this.checkTemplate(this.options.templates, names, modes);\n if (result) {\n return result;\n }\n }\n const frameworkTemplates = this.options.template ? Templates_1.default.templates[this.options.template] : Templates_1.default.current;\n result = this.checkTemplate(frameworkTemplates, names, modes);\n if (result) {\n return result;\n }\n // Default back to bootstrap if not defined.\n const name = names[names.length - 1];\n const templatesByName = Templates_1.default.defaultTemplates[name];\n if (!templatesByName) {\n return { template: this.t('unknownTemplate', { name }) };\n }\n const templateByMode = this.checkTemplateMode(templatesByName, modes);\n if (templateByMode) {\n return { template: templateByMode };\n }\n return { template: templatesByName.form };\n }\n checkTemplate(templates, names, modes) {\n for (const name of names) {\n const templatesByName = templates[name];\n if (templatesByName) {\n const { referenceAttributeName } = templatesByName;\n const templateByMode = this.checkTemplateMode(templatesByName, modes);\n if (templateByMode) {\n return { template: templateByMode, referenceAttributeName };\n }\n }\n }\n return null;\n }\n checkTemplateMode(templatesByName, modes) {\n for (const mode of modes) {\n const templateByMode = templatesByName[mode];\n if (templateByMode) {\n return templateByMode;\n }\n }\n return null;\n }\n getFormattedAttribute(attr) {\n return attr ? this.t(attr, { _userInput: true }).replace(/\"/g, '"') : '';\n }\n getFormattedTooltip(tooltipValue) {\n const tooltip = this.interpolate(tooltipValue || '').replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n return this.getFormattedAttribute(tooltip);\n }\n isHtmlRenderMode() {\n return this.options.renderMode === 'html';\n }\n renderTemplate(name, data = {}, modeOption = '') {\n // Need to make this fall back to form if renderMode is not found similar to how we search templates.\n const mode = modeOption || this.options.renderMode || 'form';\n data.component = this.component;\n data.self = this;\n data.options = this.options;\n data.readOnly = this.options.readOnly;\n data.iconClass = this.iconClass.bind(this);\n data.size = this.size.bind(this);\n data.t = this.t.bind(this);\n data.transform = this.transform.bind(this);\n data.id = data.id || this.id;\n data.key = data.key || this.key;\n data.value = data.value || this.dataValue;\n data.disabled = this.disabled;\n data.builder = this.builderMode;\n data.render = (...args) => {\n console.warn(this.t('renderTemplateFunctionDeprecation'));\n return this.renderTemplate(...args);\n };\n data.label = data.labelInfo || this.labelInfo;\n data.tooltip = this.getFormattedTooltip(this.component.tooltip);\n // Allow more specific template names\n const names = [\n `${name}-${this.component.type}-${this.key}`,\n `${name}-${this.component.type}`,\n `${name}-${this.key}`,\n `${name}`,\n ];\n // Allow template alters.\n const { referenceAttributeName, template } = this.getTemplate(names, mode);\n if (referenceAttributeName) {\n this._referenceAttributeName = referenceAttributeName;\n }\n return this.hook(`render${name.charAt(0).toUpperCase() + name.substring(1, name.length)}`, this.interpolate(template, data), data, mode);\n }\n /**\n * Sanitize an html string.\n * @param {string} dirty - The dirty html string to sanitize.\n * @param {boolean} forceSanitize - If we should force the sanitize to occur.\n * @param {object} options - The options for the sanitize.\n * @returns {*} - The sanitized html string.\n */\n sanitize(dirty, forceSanitize = false, options = {}) {\n var _a;\n if (!this.shouldSanitizeValue && !forceSanitize) {\n return dirty;\n }\n return FormioUtils.sanitize(dirty, {\n sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),\n });\n }\n /**\n * Render a template string into html.\n * @param {string} template - The template to render.\n * @param {object} data - The data to provide to the template.\n * @returns {HTMLElement | string} - The created element or an empty string if template is not specified.\n */\n renderString(template, data) {\n if (!template) {\n return '';\n }\n // Interpolate the template and populate\n return this.interpolate(template, data);\n }\n /**\n * Allows for modification of the component value prior to submission.\n * @param {*} input - The input to be modified.\n * @returns {*} - The modified input mapping for the extended component.\n */\n performInputMapping(input) {\n return input;\n }\n /**\n * Returns the component \"widget\" if one is available.\n * @returns {Widget|null} - The widget instance. null if not available.\n */\n get widget() {\n var _a;\n const settings = this.component.widget;\n if (settings && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {\n settings.shadowRoot = this.root.shadowRoot;\n }\n const widget = settings && widgets_1.default[settings.type] ? new widgets_1.default[settings.type](settings, this.component, this) : null;\n return widget;\n }\n /**\n * Returns the native supported browser language.\n * @returns {string|null} - The native browser language that is supported.\n */\n getBrowserLanguage() {\n const nav = window.navigator;\n const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];\n let language;\n // support for HTML 5.1 \"navigator.languages\"\n if (Array.isArray(nav.languages)) {\n for (let i = 0; i < nav.languages.length; i++) {\n language = nav.languages[i];\n if (language && language.length) {\n return language.split(';')[0];\n }\n }\n }\n // support for other well known properties in browsers\n for (let i = 0; i < browserLanguagePropertyKeys.length; i++) {\n language = nav[browserLanguagePropertyKeys[i]];\n if (language && language.length) {\n return language.split(';')[0];\n }\n }\n return null;\n }\n /**\n * Called before a next and previous page is triggered allowing the components to perform special functions.\n * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next/previous page navigation.\n */\n beforePage() {\n return Promise.resolve(true);\n }\n /**\n * Called before the next page is triggered allowing the components to hook into the page navigation and perform tasks.\n * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the next page navigation.\n */\n beforeNext() {\n return this.beforePage(true);\n }\n /**\n * Called before a submission is triggered allowing the components to perform special async functions.\n * @returns {Promise<boolean>} - A promise to resolve when the component is no longer blocking the submission.\n */\n beforeSubmit() {\n return Promise.resolve(true);\n }\n /**\n * Return the submission timezone.\n * @returns {string} - The submission timezone.\n */\n get submissionTimezone() {\n this.options.submissionTimezone = this.options.submissionTimezone || lodash_1.default.get(this.root, 'options.submissionTimezone');\n return this.options.submissionTimezone;\n }\n /**\n * Return the current timezone.\n * @returns {string} - The current timezone.\n */\n get timezone() {\n return this.getTimezone(this.component);\n }\n /**\n * Return the current timezone.\n * @param {object} settings - Settings to control how the timezone should be returned.\n * @returns {string} - The current timezone.\n */\n getTimezone(settings) {\n if (settings.timezone) {\n return settings.timezone;\n }\n if (settings.displayInTimezone === 'utc') {\n return 'UTC';\n }\n const submissionTimezone = this.submissionTimezone;\n if (submissionTimezone &&\n ((settings.displayInTimezone === 'submission') ||\n ((this.options.pdf || this.options.server) && (settings.displayInTimezone === 'viewer')))) {\n return submissionTimezone;\n }\n // Return current timezone if none are provided.\n return (0, utils_1.currentTimezone)();\n }\n /**\n *\n * @param {HTMLElement} element - The containing DOM element to query for the ref value.\n * @param {object} refs - The references to load.\n * @param {string} [referenceAttributeName] - The attribute name to use for the reference.\n */\n loadRefs(element, refs, referenceAttributeName) {\n if (!element) {\n return;\n }\n for (const ref in refs) {\n const refType = refs[ref];\n const isString = typeof refType === 'string';\n const selector = isString && refType.includes('scope')\n ? `:scope > [${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`\n : `[${referenceAttributeName || this._referenceAttributeName || 'ref'}=\"${ref}\"]`;\n if (isString && refType.startsWith('single')) {\n this.refs[ref] = element.querySelector(selector);\n }\n else {\n this.refs[ref] = element.querySelectorAll(selector);\n }\n }\n }\n /**\n * Opens the modal element.\n * @param {string} template - The template to use for the modal dialog.\n */\n setOpenModalElement(template = null) {\n this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());\n }\n /**\n * Renders a modal preview template and returns the markup as a string\n * @param {object|null|undefined} ctx - The rendering context\n * @returns {string} - The modal preview markup\n */\n renderModalPreview(ctx) {\n return this.renderTemplate('modalPreview', ctx || {});\n }\n /**\n * Returns the modal preview template.\n * @returns {string} - The modal preview template.\n */\n getModalPreviewTemplate() {\n var _a;\n const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;\n let modalLabel;\n if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {\n modalLabel = { className: 'field-required' };\n }\n return this.renderModalPreview({\n previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('clickToSetValue'),\n messages: '',\n labelInfo: modalLabel,\n });\n }\n /**\n * Performs a complete build of a component, which empties, renders, sets the content in the DOM, and then finally attaches events.\n * @param {HTMLElement} element - The element to attach this component to.\n * @returns {Promise<void>} - A promise that resolves when the component has been built.\n */\n build(element) {\n element = element || this.element;\n this.empty(element);\n this.setContent(element, this.render());\n return this.attach(element);\n }\n get hasModalSaveButton() {\n return true;\n }\n /**\n * Renders a component as an HTML string.\n * @param {string} children - The contents of all the children HTML as a string.\n * @param {boolean} topLevel - If this is the topmost component that is being rendered.\n * @returns {string} - The rendered HTML string of a component.\n */\n render(children = this.t('unknownComponent', { type: this.component.type }), topLevel = false) {\n const isVisible = this.visible;\n this.rendered = true;\n if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n return ComponentModal_1.default.render(this, {\n visible: isVisible,\n showSaveButton: this.hasModalSaveButton,\n id: this.id,\n classes: this.className,\n styles: this.customStyle,\n children\n }, topLevel);\n }\n else {\n return this.renderTemplate('component', {\n visible: isVisible,\n id: this.id,\n classes: this.className,\n styles: this.customStyle,\n children\n }, topLevel);\n }\n }\n /**\n * Creates the tooltip instance using tippy.js and returns it\n * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip\n * @param {object|null|undefined} settings - tippy.js options\n * @returns {import('tippy.js').Tippy} - tippy.js instance\n */\n createTooltip(tooltipEl, settings = {}) {\n const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');\n const tooltipDataTitle = tooltipEl.getAttribute('data-title');\n const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)\n .replace(/(?:\\r\\n|\\r|\\n)/g, '<br />');\n return (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));\n }\n /**\n * Attaches all the tooltips provided the refs object.\n * @param {object} toolTipsRefs - The refs for the tooltips within your template.\n * @returns {void}\n */\n attachTooltips(toolTipsRefs) {\n toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {\n if (tooltip) {\n this.tooltips[index] = this.createTooltip(tooltip);\n }\n });\n }\n /**\n * Create a new component modal for this component.\n * @param {HTMLElement} element - The element to attach the modal to.\n * @param {boolean} modalShouldBeOpened - TRUE if the modal should open immediately.\n * @param {any} currentValue - The current value of the component.\n * @returns {ComponentModal} - The created component modal.\n */\n createComponentModal(element, modalShouldBeOpened, currentValue) {\n return new ComponentModal_1.default(this, element, modalShouldBeOpened, currentValue, this._referenceAttributeName);\n }\n /**\n * Attaches all event listensers for this component to the DOM elements that were rendered.\n * @param {HTMLElement} element - The element to attach the listeners to.\n * @returns {Promise<void>} - Resolves when the component is done attaching to the DOM.\n */\n attach(element) {\n if (!this.builderMode && !this.previewMode && this.component.modalEdit) {\n const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;\n const currentValue = modalShouldBeOpened ? this.componentModal.currentValue : this.dataValue;\n const openModalTemplate = this.componentModal && modalShouldBeOpened\n ? this.componentModal.openModalTemplate\n : null;\n this.componentModal = this.createComponentModal(element, modalShouldBeOpened, currentValue);\n this.setOpenModalElement(openModalTemplate);\n }\n this.attached = true;\n this.setElement(element);\n element.component = this;\n // If this already has an id, get it from the dom. If SSR, it could be different from the initiated id.\n if (this.element.id) {\n this.id = this.element.id;\n this.component.id = this.id;\n }\n this.loadRefs(element, {\n messageContainer: 'single',\n tooltip: 'multiple'\n });\n this.attachTooltips(this.refs.tooltip);\n // Attach logic.\n this.attachLogic();\n this.autofocus();\n // Allow global attach.\n this.hook('attachComponent', element, this);\n // Allow attach per component type.\n const type = this.component.type;\n if (type) {\n this.hook(`attach${type.charAt(0).toUpperCase() + type.substring(1, type.length)}`, element, this);\n }\n this.restoreFocus();\n this.addons.forEach((addon) => addon.attach(element));\n return Promise.resolve();\n }\n /**\n * Restors the \"focus\" on a component after a redraw event has occured.\n */\n restoreFocus() {\n var _a, _b, _c;\n const isFocused = ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path;\n if (isFocused) {\n this.loadRefs(this.element, { input: 'multiple' });\n this.focus((_c = this.root.currentSelection) === null || _c === void 0 ? void 0 : _c.index);\n this.restoreCaretPosition();\n }\n }\n /**\n * Adds a keyboard shortcut to this component.\n * @param {HTMLElement} element - The element to attach the keyboard shortcut to.\n * @param {string} shortcut - The keyboard shortcut to add.\n * @returns {void}\n */\n addShortcut(element, shortcut) {\n // Avoid infinite recursion.\n if (!element || !this.root || (this.root === this)) {\n return;\n }\n if (!shortcut) {\n shortcut = this.component.shortcut;\n }\n this.root.addShortcut(element, shortcut);\n }\n /**\n * Removes a keyboard shortcut from this component.\n * @param {HTMLElement} element - The element to remove the keyboard shortcut from.\n * @param {string} shortcut - The keyboard shortcut to remove.\n * @returns {void}\n */\n removeShortcut(element, shortcut) {\n // Avoid infinite recursion.\n if (!element || (this.root === this)) {\n return;\n }\n if (!shortcut) {\n shortcut = this.component.shortcut;\n }\n this.root.removeShortcut(element, shortcut);\n }\n /**\n * Remove all event handlers.\n */\n detach() {\n // First iterate through each ref and delete the component so there are no dangling component references.\n lodash_1.default.each(this.refs, (ref) => {\n if (ref instanceof NodeList) {\n ref.forEach((elem) => {\n delete elem.component;\n });\n }\n else if (ref) {\n delete ref.component;\n }\n });\n this.refs = {};\n this.removeEventListeners();\n this.detachLogic();\n if (this.tooltip) {\n this.tooltip.destroy();\n }\n }\n /**\n * Determines if the component should be refreshed based on the path of another component that changed.\n * @param {string} refreshData - The path of the data that needs to trigger a refresh.\n * @param {boolean} changed - Flag that is true if the data has been changed.\n * @param {any} flags - The flags for the checkData procedure.\n * @returns {void}\n */\n checkRefresh(refreshData, changed, flags) {\n var _a, _b;\n const changePath = lodash_1.default.get(changed, 'instance.path', false);\n // Don't let components change themselves.\n if (changePath && this.path === changePath) {\n return;\n }\n if (refreshData === 'data') {\n this.refresh(this.data, changed, flags);\n }\n else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData)) && changed && changed.instance &&\n // Make sure the changed component is not in a different \"context\". Solves issues where refreshOn being set\n // in fields inside EditGrids could alter their state from other rows (which is bad).\n this.inContext(changed.instance)) {\n this.refresh(changed.value, changed, flags);\n }\n }\n /**\n * Iterates over a list of changes, and determines if the component should be refreshed if it is configured to refresh on any of those components.\n * @param {Array<any>} changes - The list of components that have changed.\n * @param {any} flags - The checkData flags.\n * @returns {void}\n */\n checkRefreshOn(changes, flags = {}) {\n changes = changes || [];\n if (flags.noRefresh) {\n return;\n }\n if (!changes.length && flags.changed) {\n changes = [flags.changed];\n }\n const refreshOn = flags.fromBlur ? this.component.refreshOnBlur : this.component.refreshOn || this.component.redrawOn;\n // If they wish to refresh on a value, then add that here.\n if (refreshOn) {\n if (Array.isArray(refreshOn)) {\n refreshOn.forEach(refreshData => changes.forEach(changed => this.checkRefresh(refreshData, changed, flags)));\n }\n else {\n changes.forEach(changed => this.checkRefresh(refreshOn, changed, flags));\n }\n }\n }\n /**\n * Refreshes the component with a new value.\n * @param {any} value - The latest value of the component to check if it needs to be refreshed.\n * @returns {void}\n */\n refresh(value) {\n if (this.hasOwnProperty('refreshOnValue')) {\n this.refreshOnChanged = !lodash_1.default.isEqual(value, this.refreshOnValue);\n }\n else {\n this.refreshOnChanged = true;\n }\n this.refreshOnValue = (0, utils_1.fastCloneDeep)(value);\n if (this.refreshOnChanged) {\n if (this.component.clearOnRefresh) {\n this.setValue(null);\n }\n this.triggerRedraw();\n }\n }\n /**\n * Checks to see if a separate component is in the \"context\" of this component. This is determined by first checking\n * if they share the same \"data\" object. It will then walk up the parent tree and compare its parents data objects\n * with the components data and returns true if they are in the same context.\n *\n * Different rows of the same EditGrid, for example, are in different contexts.\n * @param {any} component - The component to check if it is in the same context as this component.\n * @returns {boolean} - TRUE if the component is in the same context as this component.\n */\n inContext(component) {\n if (component.data === this.data) {\n return true;\n }\n let parent = this.parent;\n while (parent) {\n if (parent.data === component.data) {\n return true;\n }\n parent = parent.parent;\n }\n return false;\n }\n /**\n * Determines if we are in \"view\" only mode.\n * @returns {boolean} - TRUE if we are in \"view\" only mode.\n */\n get viewOnly() {\n return this.options.readOnly && this.options.viewAsHtml;\n }\n /**\n * Sets the HTMLElement for this component.\n * @param {HTMLElement} element - The element that is attached to this component.\n * @returns {void}\n */\n setElement(element) {\n if (this.element) {\n delete this.element.component;\n delete this.element;\n }\n this.element = element;\n }\n /**\n * Creates an element to hold the \"view only\" version of this component.\n * @returns {HTMLElement} - The element for this component.\n */\n createViewOnlyElement() {\n this.setElement(this.ce('dl', {\n id: this.id\n }));\n if (this.element) {\n // Ensure you can get the component info from the element.\n this.element.component = this;\n }\n return this.element;\n }\n /**\n * The default value for the \"view only\" mode of a component if the value is not provided.\n * @returns {string} - The default value for this component.\n */\n get defaultViewOnlyValue() {\n return '-';\n }\n /**\n * Uses the widget to determine the output string.\n * @param {any} value - The current value of the component.\n * @param {any} options - The options for getValueAsString.\n * @returns {any|Array<any>} - The value as a string.\n */\n getWidgetValueAsString(value, options) {\n const noInputWidget = !this.refs.input || !this.refs.input[0] || !this.refs.input[0].widget;\n if (!value || noInputWidget) {\n if (!this.widget || !value) {\n return value;\n }\n else {\n return this.widget.getValueAsString(value);\n }\n }\n if (Array.isArray(value)) {\n const values = [];\n value.forEach((val, index) => {\n const widget = this.refs.input[index] && this.refs.input[index].widget;\n if (widget) {\n values.push(widget.getValueAsString(val, options));\n }\n });\n return values;\n }\n const widget = this.refs.input[0].widget;\n return widget.getValueAsString(value, options);\n }\n /**\n * Returns the value of the component as a string.\n * @param {any} value - The value for this component.\n * @param {any} options - The options for this component.\n * @returns {string} - The string representation of the value of this component.\n */\n getValueAsString(value, options) {\n if (!value) {\n return '';\n }\n value = this.getWidgetValueAsString(value, options);\n if (Array.isArray(value)) {\n return value.join(', ');\n }\n if (lodash_1.default.isPlainObject(value)) {\n return JSON.stringify(value);\n }\n if (value === null || value === undefined) {\n return '';\n }\n const stringValue = value.toString();\n return this.sanitize(stringValue);\n }\n /**\n * Returns the string representation \"view\" of the component value.\n * @param {any} value - The value of the component.\n * @param {any} options - The options for this component.\n * @returns {string} - The string representation of the value of this component.\n */\n getView(value, options) {\n if (this.component.protected) {\n return '--- PROTECTED ---';\n }\n return this.getValueAsString(value, options);\n }\n /**\n * Updates the items list for this component. Useful for Select and other List component types.\n * @param {...any} args - The arguments to pass to the onChange event.\n * @returns {void}\n */\n updateItems(...args) {\n this.restoreValue();\n this.onChange(...args);\n }\n /**\n * Returns the value for a specific item in a List type component.\n * @param {any} data - The data for this component.\n * @param {boolean} [forceUseValue] - if true, return 'value' property of the data\n * @returns {any} - The value of the item.\n */\n itemValue(data, forceUseValue = false) {\n if (lodash_1.default.isObject(data) && !lodash_1.default.isArray(data)) {\n if (this.valueProperty) {\n return lodash_1.default.get(data, this.valueProperty);\n }\n if (forceUseValue) {\n return data.value;\n }\n }\n return data;\n }\n /**\n * Returns the item value for html mode.\n * @param {any} value - The value for this component.\n * @returns {any} - The value of the item for html mode.\n */\n itemValueForHTMLMode(value) {\n if (Array.isArray(value)) {\n const values = value.map(item => Array.isArray(item) ? this.itemValueForHTMLMode(item) : this.itemValue(item));\n return values.join(', ');\n }\n return this.itemValue(value);\n }\n /**\n * Creates a modal to input the value of this component.\n * @param {HTMLElement} element - The element to attach the modal to.\n * @param {any} attr - A list of attributes to add to the modal.\n * @param {boolean} confirm - If we should add a confirmation to the modal that keeps it from closing unless confirmed.\n * @returns {HTMLElement} - The created modal element.\n */\n createModal(element, attr, confirm) {\n const dialog = this.ce('div', attr || {});\n this.setContent(dialog, this.renderTemplate('dialog'));\n // Add refs to dialog, not \"this\".\n dialog.refs = {};\n this.loadRefs.call(dialog, dialog, {\n dialogOverlay: 'single',\n dialogContents: 'single',\n dialogClose: 'single',\n });\n dialog.refs.dialogContents.appendChild(element);\n document.body.appendChild(dialog);\n document.body.classList.add('modal-open');\n dialog.close = () => {\n document.body.classList.remove('modal-open');\n dialog.dispatchEvent(new CustomEvent('close'));\n };\n this.addEventListener(dialog, 'close', () => this.removeChildFrom(dialog, document.body));\n const close = (event) => {\n event.preventDefault();\n dialog.close();\n };\n const handleCloseClick = (e) => {\n if (confirm) {\n confirm().then(() => close(e))\n .catch(() => { });\n }\n else {\n close(e);\n }\n };\n this.addEventListener(dialog.refs.dialogOverlay, 'click', handleCloseClick);\n this.addEventListener(dialog.refs.dialogClose, 'click', handleCloseClick);\n return dialog;\n }\n /**\n * Uses CSS classes to show or hide an element.\n * @returns {boolean} - TRUE if the element has been css removed.\n */\n get optimizeRedraw() {\n if (this.options.optimizeRedraw && this.element && !this.visible) {\n this.addClass(this.element, 'formio-removed');\n return true;\n }\n return false;\n }\n /**\n * Retrieves the CSS class name of this component.\n * @returns {string} - The class name of this component.\n */\n get className() {\n let className = this.hasInput ? `${this.transform('class', 'form-group')} has-feedback ` : '';\n className += `formio-component formio-component-${this.component.type} `;\n // TODO: find proper way to avoid overriding of default type-based component styles\n if (this.key && this.key !== 'form') {\n className += `formio-component-${this.key} `;\n }\n if (this.component.multiple) {\n className += 'formio-component-multiple ';\n }\n if (this.component.customClass) {\n className += this.component.customClass;\n }\n if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required)) {\n className += ' required';\n }\n if (this.labelIsHidden()) {\n className += ' formio-component-label-hidden';\n }\n if (!this.visible) {\n className += ' formio-hidden';\n }\n return className;\n }\n /**\n * Build the custom style from the layout values\n * @returns {string} - The custom style\n */\n get customStyle() {\n let customCSS = '';\n lodash_1.default.each(this.component.style, (value, key) => {\n if (value !== '') {\n customCSS += `${key}:${value};`;\n }\n });\n return customCSS;\n }\n /**\n * Returns the component condition operator settings if available.\n * @returns {object} - The component condition operator settings.\n */\n static get serverConditionSettings() {\n return Component.conditionOperatorsSettings;\n }\n /**\n * Returns if the application is on a mobile device.\n * @returns {boolean} - TRUE if the application is on a mobile device.\n */\n get isMobile() {\n return (0, ismobilejs_1.default)();\n }\n /**\n * Returns the outside wrapping element of this component.\n * @returns {HTMLElement} - The wrapping element of this component.\n */\n getElement() {\n return this.element;\n }\n /**\n * Create an evaluation context for all script executions and interpolations.\n * @param {any} additional - Additional context to provide.\n * @returns {any} - The evaluation context.\n */\n evalContext(additional) {\n return super.evalContext(Object.assign({\n component: this.component,\n row: this.data,\n rowIndex: this.rowIndex,\n data: this.rootValue,\n iconClass: this.iconClass.bind(this),\n // Bind the translate function to the data context of any interpolated string.\n // It is useful to translate strings in different scenarions (eg: custom edit grid templates, custom error messages etc.)\n // and desirable to be publicly available rather than calling the internal {instance.t} function in the template string.\n t: this.t.bind(this),\n submission: (this.root ? this.root._submission : {\n data: this.rootValue\n }),\n form: this.root ? this.root._form : {},\n options: this.options,\n }, additional));\n }\n /**\n * Sets the pristine flag for this component.\n * @param {boolean} pristine - TRUE to make pristine, FALSE not pristine.\n */\n setPristine(pristine) {\n this.pristine = pristine;\n }\n /**\n * Returns if the component is pristine.\n * @returns {boolean} - TRUE if the component is pristine.\n */\n get isPristine() {\n return this.pristine;\n }\n /**\n * Sets the dirty flag for this component.\n * @param {boolean} dirty - TRUE to make dirty, FALSE not dirty.\n */\n setDirty(dirty) {\n this.dirty = dirty;\n }\n /**\n * Returns if the component is dirty.\n * @returns {boolean} - TRUE if the component is dirty.\n */\n get isDirty() {\n return this.dirty;\n }\n /**\n * Removes a value out of the data array and rebuild the rows.\n * @param {number} index - The index of the data element to remove.\n */\n removeValue(index) {\n this.splice(index);\n this.redraw();\n this.restoreValue();\n this.triggerRootChange();\n }\n /**\n * Returns the icon class for a given icon name.\n * @param {string} name - The name of the icon you wish to fetch provided the icon class. This is the \"font awesome\" version of the name of the icon.\n * @param {boolean} spinning - If the component should be spinning.\n * @returns {string} - The icon class for the equivalent icon in the iconset we are using.\n */\n iconClass(name, spinning) {\n const iconset = this.options.iconset || Templates_1.default.current.defaultIconset || 'fa';\n return Templates_1.default.current.hasOwnProperty('iconClass')\n ? Templates_1.default.current.iconClass(iconset, name, spinning)\n : this.options.iconset === 'fa' ? Templates_1.default.defaultTemplates.iconClass(iconset, name, spinning) : name;\n }\n /**\n * Returns the size css class names for our current template.\n * @param {string} size - The size class name for the default iconset.\n * @returns {string} - The size class for our component.\n */\n size(size) {\n return Templates_1.default.current.hasOwnProperty('size')\n ? Templates_1.default.current.size(size)\n : size;\n }\n /**\n * The readible name for this component.\n * @returns {string} - The name of the component.\n */\n get name() {\n return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });\n }\n /**\n * Returns the visible errors for this component.\n * @returns {Array<object>} - The visible errors for this component.\n */\n get visibleErrors() {\n return this._visibleErrors;\n }\n /**\n * Returns all the errors for this component, visible or not.\n * @returns {Array<object>} - All the errors for this component.\n */\n get errors() {\n return this._errors;\n }\n /**\n * Returns the error label for this component.\n * @returns {string} - The error label for this component.\n */\n get errorLabel() {\n return this.t(this.component.errorLabel\n || this.component.label\n || this.component.placeholder\n || this.key);\n }\n /**\n * Get the error message provided a certain type of error.\n * @param {string} type - The type of error to fetch the message for.\n * @returns {string} - The error message configured for this component.\n */\n errorMessage(type) {\n return (this.component.errors && this.component.errors[type]) ? this.component.errors[type] : type;\n }\n /**\n * Sets the content, innerHTML, of an element to the sanitized content.\n * @param {HTMLElement} element - The element to set the innerHTML to.\n * @param {string} content - The HTML string content that we wish to set.\n * @param {boolean} forceSanitize - If we should force the content to be sanitized.\n * @param {any} sanitizeOptions - The options for the sanitize function.\n * @returns {boolean} - TRUE if the content was sanitized and set.\n */\n setContent(element, content, forceSanitize, sanitizeOptions) {\n if (element instanceof HTMLElement) {\n element.innerHTML = this.sanitize(content, forceSanitize, sanitizeOptions);\n return true;\n }\n return false;\n }\n /**\n * Restores the caret position in the input element after a refresh occurs.\n */\n restoreCaretPosition() {\n var _a, _b, _c;\n if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.currentSelection) {\n if ((_b = this.refs.input) === null || _b === void 0 ? void 0 : _b.length) {\n const { index } = this.root.currentSelection;\n let input = this.refs.input[index];\n const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test((i === null || i === void 0 ? void 0 : i.type) || '');\n if (input) {\n if (isInputRangeSelectable(input)) {\n input.setSelectionRange(input.value.length, input.value.length);\n }\n }\n else {\n input = this.refs.input[this.refs.input.length];\n const lastCharacter = ((_c = input.value) === null || _c === void 0 ? void 0 : _c.length) || 0;\n if (isInputRangeSelectable(input)) {\n input.setSelectionRange(lastCharacter, lastCharacter);\n }\n }\n }\n }\n }\n /**\n * Redraw the component.\n * @returns {Promise<void>} - A promise that resolves when the component is done redrawing.\n */\n redraw() {\n // Don't bother if we have not built yet.\n if (!this.element || !this.element.parentNode || this.optimizeRedraw) {\n // Return a non-resolving promise.\n return Promise.resolve();\n }\n this.detach();\n this.emit('redraw');\n // Since we are going to replace the element, we need to know it's position so we can find it in the parent's children.\n const parent = this.element.parentNode;\n const index = Array.prototype.indexOf.call(parent.children, this.element);\n this.element.outerHTML = this.sanitize(this.render());\n this.setElement(parent.children[index]);\n return this.attach(this.element);\n }\n /**\n * Rebuild and redraw a component.\n * @returns {Promise<void>} - A promise that resolves when the component is done rebuilding and redrawing.\n */\n rebuild() {\n this.destroy();\n this.init();\n this.visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n return this.redraw();\n }\n /**\n * Removes all event listeners attached to this component.\n */\n removeEventListeners() {\n super.removeEventListeners();\n this.tooltips.forEach(tooltip => tooltip.destroy());\n this.tooltips = [];\n }\n /**\n * Returns if the dom node has the classes provided.\n * @param {HTMLElement} element - The element to check for the class.\n * @param {string} className - The name of the class to check.\n * @returns {boolean|void} - TRUE if the element has the class.\n */\n hasClass(element, className) {\n if (!element) {\n return;\n }\n return super.hasClass(element, this.transform('class', className));\n }\n /**\n * Adds a class to an HTML element.\n * @param {HTMLElement} element - The dom element to add the class to.\n * @param {string} className - The class name you wish to add.\n * @returns {this|void} - The component instance.\n */\n addClass(element, className) {\n if (!element) {\n return;\n }\n return super.addClass(element, this.transform('class', className));\n }\n /**\n * Removes a class from an element.\n * @param {HTMLElement} element - The element to remove the class from.\n * @param {string} className - The class name to remove.\n * @returns {this|void} - The component instance.\n */\n removeClass(element, className) {\n if (!element) {\n return;\n }\n return super.removeClass(element, this.transform('class', className));\n }\n /**\n * Determines if this component has a condition defined.\n * @returns {boolean} - TRUE if the component has a condition defined.\n */\n hasCondition() {\n if (this._hasCondition !== null) {\n return this._hasCondition;\n }\n this._hasCondition = FormioUtils.hasCondition(this.component);\n return this._hasCondition;\n }\n /**\n * Check if this component is conditionally visible.\n * @param {any} data - The data to check against.\n * @param {any} row - The row data to check against.\n * @returns {boolean} - TRUE if the component is conditionally visible.\n */\n conditionallyVisible(data, row) {\n data = data || this.rootValue;\n row = row || this.data;\n if (this.builderMode || this.previewMode) {\n return true;\n }\n data = data || (this.root ? this.root.data : {});\n return this.checkCondition(row, data);\n }\n /**\n * Checks the condition of this component.\n *\n * TODO: Switch row and data parameters to be consistent with other methods.\n * @param {any} row - The row contextual data.\n * @param {any} data - The global data object.\n * @returns {boolean} - True if the condition applies to this component.\n */\n checkCondition(row, data) {\n return FormioUtils.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);\n }\n /**\n * Check for conditionals and hide/show the element based on those conditions.\n * @param {any} data - The data to check against.\n * @param {any} flags - The flags passed to checkData function.\n * @param {any} row - The row data to check against.\n * @returns {boolean} - TRUE if the component is visible.\n */\n checkComponentConditions(data, flags, row) {\n data = data || this.rootValue;\n flags = flags || {};\n row = row || this.data;\n if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {\n this.redraw();\n }\n // Check visibility\n const visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);\n if (this.visible !== visible) {\n this.visible = visible;\n }\n this.clearComponentOnHide();\n return visible;\n }\n /**\n * Checks conditions for this component and any sub components.\n * @param {any} data - The data to check against.\n * @param {any} flags - The flags passed to checkData function.\n * @param {any} row - The row data to check against.\n * @returns {boolean} - TRUE if the component is visible.\n */\n checkConditions(data, flags, row) {\n data = data || this.rootValue;\n flags = flags || {};\n row = row || this.data;\n return this.checkComponentConditions(data, flags, row);\n }\n /**\n * Returns the component logic if applicable.\n * @returns {Array<object>} - The component logic.\n */\n get logic() {\n return this.component.logic || [];\n }\n /**\n * Check all triggers and apply necessary actions.\n * @param {any} data - The data to check against.\n * @param {any} row - The row data to check against.\n * @returns {boolean|void} - TRUE if the component was altered.\n */\n fieldLogic(data = this.rootValue, row = this.data) {\n const logics = this.logic;\n // If there aren't logic, don't go further.\n if (logics.length === 0) {\n return;\n }\n const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n let changed = logics.reduce((changed, logic) => {\n const result = FormioUtils.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);\n return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;\n }, false);\n // If component definition changed, replace and mark as changed.\n if (!lodash_1.default.isEqual(this.component, newComponent)) {\n this.component = newComponent;\n changed = true;\n const disabled = this.shouldDisabled;\n // Change disabled state if it has changed\n if (this.disabled !== disabled) {\n this.disabled = disabled;\n }\n }\n return changed;\n }\n /**\n * Retuns if the browser is Internet Explorer.\n * @returns {boolean} - TRUE if the browser is IE.\n */\n isIE() {\n if (typeof window === 'undefined') {\n return false;\n }\n const userAgent = window.navigator.userAgent;\n const msie = userAgent.indexOf('MSIE ');\n if (msie > 0) {\n // IE 10 or older => return version number\n return parseInt(userAgent.substring(msie + 5, userAgent.indexOf('.', msie)), 10);\n }\n const trident = userAgent.indexOf('Trident/');\n if (trident > 0) {\n // IE 11 => return version number\n const rv = userAgent.indexOf('rv:');\n return parseInt(userAgent.substring(rv + 3, userAgent.indexOf('.', rv)), 10);\n }\n const edge = userAgent.indexOf('Edge/');\n if (edge > 0) {\n // IE 12 (aka Edge) => return version number\n return parseInt(userAgent.substring(edge + 5, userAgent.indexOf('.', edge)), 10);\n }\n // other browser\n return false;\n }\n /**\n * Defines the logic action value through evaluation.\n * @param {object} action - The action within the Logic system to perform.\n * @param {object} argsObject - The arguments to pass to the evaluation.\n * @returns {any} - The result of the evaluation.\n */\n defineActionValue(action, argsObject) {\n return this.evaluate(action.value, argsObject, 'value');\n }\n /**\n * Apply the actions of Logic for a component once the conditions have been met.\n * @param {object} newComponent - The new component to apply the actions to.\n * @param {Array<object>} actions - An array of actions\n * @param {any} result - The result of the conditional check in order to evaluate the actions.\n * @param {any} row - The contextual row data for this component.\n * @param {any} data - The global data object for the submission.\n * @returns {boolean} - TRUE if the component was altered.\n */\n applyActions(newComponent, actions, result, row, data) {\n data = data || this.rootValue;\n row = row || this.data;\n return actions.reduce((changed, action) => {\n switch (action.type) {\n case 'property': {\n FormioUtils.setActionProperty(newComponent, action, result, row, data, this);\n const property = action.property.value;\n if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {\n // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state\n // separately from the component's hidden property, and technically this Advanced Logic conditionally hides\n // a component, we need to set a temporary variable to the new value\n if (property === 'hidden') {\n this._logicallyHidden = newComponent.hidden;\n }\n changed = true;\n }\n break;\n }\n case 'value': {\n const oldValue = this.getValue();\n const newValue = this.defineActionValue(action, {\n value: lodash_1.default.clone(oldValue),\n data,\n row,\n component: newComponent,\n result,\n });\n if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden())) {\n this.setValue(newValue);\n if (this.viewOnly) {\n this.dataValue = newValue;\n }\n changed = true;\n }\n break;\n }\n case 'mergeComponentSchema': {\n const schema = this.evaluate(action.schemaDefinition, {\n value: lodash_1.default.clone(this.getValue()),\n data,\n row,\n component: newComponent,\n result,\n }, 'schema');\n lodash_1.default.assign(newComponent, schema);\n if (!lodash_1.default.isEqual(this.component, newComponent)) {\n changed = true;\n }\n break;\n }\n case 'customAction': {\n const oldValue = this.getValue();\n const newValue = this.evaluate(action.customAction, {\n value: lodash_1.default.clone(oldValue),\n data,\n row,\n input: oldValue,\n component: newComponent,\n result,\n }, 'value');\n if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden())) {\n this.setValue(newValue);\n if (this.viewOnly) {\n this.dataValue = newValue;\n }\n changed = true;\n }\n break;\n }\n }\n return changed;\n }, false);\n }\n // Deprecated\n addInputError(message, dirty, elements) {\n this.addMessages(message);\n this.setErrorClasses(elements, dirty, !!message);\n }\n // Deprecated\n removeInputError(elements) {\n this.setErrorClasses(elements, true, false);\n }\n /**\n * Add a new input error to this element.\n * @param {Array<object>|string} messages - An array of messages to add to the element.\n * @returns {void}\n */\n addMessages(messages) {\n if (!messages) {\n return;\n }\n // Standardize on array of objects for message.\n if (typeof messages === 'string') {\n messages = {\n messages,\n level: 'error',\n };\n }\n if (!Array.isArray(messages)) {\n messages = [messages];\n }\n messages = lodash_1.default.uniqBy(messages, message => message.message);\n if (this.refs.messageContainer) {\n this.setContent(this.refs.messageContainer, messages.map((message) => {\n return this.renderTemplate('message', Object.assign({}, message));\n }).join(''));\n }\n }\n /**\n * Sets the form input widget error classes.\n * @param {Array<HTMLElement>} elements - An array of DOM elements to set the error classes on.\n * @param {boolean} dirty - If the input is dirty.\n * @param {boolean} hasErrors - If the input has errors.\n * @param {boolean} hasMessages - If the input has messages.\n * @param {HTMLElement} element - The wrapper element for all the other elements passed in first argument.\n * @returns {void}\n */\n setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {\n this.clearErrorClasses();\n elements.forEach((element) => {\n this.setElementInvalid(this.performInputMapping(element), false);\n });\n this.setInputWidgetErrorClasses(elements, hasErrors);\n // do not set error classes for hidden components\n if (!this.visible) {\n return;\n }\n if (hasErrors) {\n // Add error classes\n elements.forEach((input) => {\n this.setElementInvalid(this.performInputMapping(input), true);\n });\n if (dirty && this.options.highlightErrors) {\n this.addClass(element, this.options.componentErrorClass);\n }\n else {\n this.addClass(element, 'has-error');\n }\n }\n if (hasMessages) {\n this.addClass(element, 'has-message');\n }\n }\n /**\n * Adds the classes necessary to mark an element as invalid.\n * @param {HTMLElement} element - The element you wish to add the invalid classes to.\n * @param {boolean} invalid - TRUE if the component is invalid, FALSE otherwise.\n * @returns {void}\n */\n setElementInvalid(element, invalid) {\n if (!element)\n return;\n if (invalid) {\n this.addClass(element, 'is-invalid');\n }\n else {\n this.removeClass(element, 'is-invalid');\n }\n element.setAttribute('aria-invalid', invalid ? 'true' : 'false');\n }\n /**\n * Clear any conditionally hidden components for this component only.\n */\n clearComponentOnHide() {\n // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.\n if (this.component.clearOnHide !== false && !this.options.readOnly && !this.options.showHiddenFields) {\n if (this.conditionallyHidden()) {\n this.deleteValue();\n }\n else if (!this.hasValue() && this.shouldAddDefaultValue) {\n // If shown, ensure the default is set.\n this.setValue(this.defaultValue, {\n noUpdateEvent: true\n });\n }\n }\n }\n /**\n * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.\n */\n clearOnHide() {\n this.clearComponentOnHide();\n }\n /**\n * Triggers a debounced onChange event for the root component (usually Webform).\n * @param {...any} args - The arguments to pass to the onChange event.\n */\n triggerRootChange(...args) {\n if (this.options.onChange) {\n this.options.onChange(...args);\n }\n else if (this.root && this.root.triggerChange) {\n this.root.triggerChange(...args);\n }\n }\n /**\n * Called when the component value has been changed. This will then trigger the root level onChange handler which\n * propagates the checkData methods for the full component tree.\n * @param {any} flags - The flags for the change event propagation.\n * @param {boolean} fromRoot - If the change event is from the root component.\n * @returns {boolean} - TRUE if the component has changed.\n */\n onChange(flags, fromRoot) {\n flags = flags || {};\n if (flags.modified) {\n if (!flags.noPristineChangeOnModified) {\n this.pristine = false;\n }\n this.addClass(this.getElement(), 'formio-modified');\n }\n // If we are supposed to validate on blur, then don't trigger validation yet.\n if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {\n flags.noValidate = true;\n }\n if (this.component.onChange) {\n this.evaluate(this.component.onChange, {\n flags\n });\n }\n // Set the changed variable.\n const changed = {\n instance: this,\n component: this.component,\n value: this.dataValue,\n flags: flags\n };\n // Emit the change.\n this.emit('componentChange', changed);\n // Do not propogate the modified flag.\n let modified = false;\n if (flags.modified) {\n modified = true;\n delete flags.modified;\n }\n // Bubble this change up to the top.\n if (!fromRoot) {\n this.triggerRootChange(flags, changed, modified);\n }\n return changed;\n }\n get wysiwygDefault() {\n return {\n quill: {\n theme: 'snow',\n placeholder: this.t(this.component.placeholder, { _userInput: true }),\n modules: {\n toolbar: [\n [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown\n [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n [{ 'font': [] }],\n ['bold', 'italic', 'underline', 'strike', { 'script': 'sub' }, { 'script': 'super' }, 'clean'],\n [{ 'color': [] }, { 'background': [] }],\n [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'align': [] }],\n ['blockquote', 'code-block'],\n ['link', 'image', 'video', 'formula', 'source']\n ]\n }\n },\n ace: {\n theme: 'ace/theme/xcode',\n maxLines: 12,\n minLines: 12,\n tabSize: 2,\n mode: 'ace/mode/javascript',\n placeholder: this.t(this.component.placeholder, { _userInput: true })\n },\n ckeditor: {\n image: {\n toolbar: [\n 'imageTextAlternative',\n '|',\n 'imageStyle:full',\n 'imageStyle:alignLeft',\n 'imageStyle:alignCenter',\n 'imageStyle:alignRight'\n ],\n styles: [\n 'full',\n 'alignLeft',\n 'alignCenter',\n 'alignRight'\n ]\n },\n extraPlugins: []\n },\n default: {}\n };\n }\n addCKE(element, settings, onChange) {\n settings = lodash_1.default.isEmpty(settings) ? {} : settings;\n settings.base64Upload = this.component.isUploadEnabled ? false : true;\n settings.mediaEmbed = { previewsInData: true };\n settings = lodash_1.default.merge(this.wysiwygDefault.ckeditor, lodash_1.default.get(this.options, 'editors.ckeditor.settings', {}), settings);\n if (this.component.isUploadEnabled) {\n settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));\n }\n return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)\n .then(() => {\n if (!element.parentNode) {\n return Promise.reject();\n }\n if (isIEBrowser) {\n const editor = CKEDITOR.replace(element);\n editor.on('change', () => onChange(editor.getData()));\n return Promise.resolve(editor);\n }\n else {\n return ClassicEditor.create(element, settings).then(editor => {\n editor.model.document.on('change', () => onChange(editor.data.get()));\n return editor;\n });\n }\n });\n }\n addQuill(element, settings, onChange) {\n settings = lodash_1.default.isEmpty(settings) ? this.wysiwygDefault.quill : settings;\n settings = lodash_1.default.merge(this.wysiwygDefault.quill, lodash_1.default.get(this.options, 'editors.quill.settings', {}), settings);\n settings = Object.assign(Object.assign({}, settings), { modules: Object.assign({ table: true }, settings.modules) });\n // Lazy load the quill css.\n Formio_1.Formio.requireLibrary(`quill-css-${settings.theme}`, 'Quill', [\n { type: 'styles', src: `${Formio_1.Formio.cdn.quill}/quill.${settings.theme}.css` }\n ], true);\n // Lazy load the quill library.\n return Formio_1.Formio.requireLibrary('quill', 'Quill', lodash_1.default.get(this.options, 'editors.quill.src', `${Formio_1.Formio.cdn.quill}/quill.min.js`), true)\n .then(() => {\n return Formio_1.Formio.requireLibrary('quill-table', 'Quill', `${Formio_1.Formio.cdn.baseUrl}/quill/quill-table.js`, true)\n .then(() => {\n if (!element.parentNode) {\n return Promise.reject();\n }\n this.quill = new Quill(element, isIEBrowser ? Object.assign(Object.assign({}, settings), { modules: {} }) : settings);\n /** This block of code adds the [source] capabilities. See https://codepen.io/anon/pen/ZyEjrQ */\n const txtArea = document.createElement('textarea');\n txtArea.setAttribute('class', 'quill-source-code');\n this.quill.addContainer('ql-custom').appendChild(txtArea);\n const qlSource = element.parentNode.querySelector('.ql-source');\n if (qlSource) {\n this.addEventListener(qlSource, 'click', (event) => {\n event.preventDefault();\n if (txtArea.style.display === 'inherit') {\n this.quill.setContents(this.quill.clipboard.convert({ html: txtArea.value }));\n }\n txtArea.style.display = (txtArea.style.display === 'none') ? 'inherit' : 'none';\n });\n }\n /** END CODEBLOCK */\n // Make sure to select cursor when they click on the element.\n this.addEventListener(element, 'click', () => this.quill.focus());\n // Allows users to skip toolbar items when tabbing though form\n const elm = document.querySelectorAll('.ql-formats > button');\n for (let i = 0; i < elm.length; i++) {\n elm[i].setAttribute('tabindex', '-1');\n }\n this.quill.on('text-change', () => {\n txtArea.value = this.quill.root.innerHTML;\n onChange(txtArea);\n });\n return this.quill;\n });\n });\n }\n get shouldSanitizeValue() {\n var _a;\n // Sanitize value if sanitizing for thw whole content is turned off\n return (((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitize) !== false);\n }\n addAce(element, settings, onChange) {\n if (!settings || (settings.theme === 'snow')) {\n const mode = settings ? settings.mode : '';\n settings = {};\n if (mode) {\n settings.mode = mode;\n }\n }\n settings = lodash_1.default.merge(this.wysiwygDefault.ace, lodash_1.default.get(this.options, 'editors.ace.settings', {}), settings || {});\n return Formio_1.Formio.requireLibrary('ace', 'ace', lodash_1.default.get(this.options, 'editors.ace.src', `${Formio_1.Formio.cdn.ace}/ace.js`), true)\n .then((editor) => {\n editor = editor.edit(element);\n editor.removeAllListeners('change');\n editor.setOptions(settings);\n editor.getSession().setMode(settings.mode);\n editor.on('change', () => onChange(editor.getValue()));\n if (settings.isUseWorkerDisabled) {\n editor.session.setUseWorker(false);\n }\n return editor;\n });\n }\n getDragula() {\n return __awaiter(this, void 0, void 0, function* () {\n return new Promise((resolve) => {\n return Formio_1.Formio.requireLibrary('dragula', 'dragula', `${Formio_1.Formio.cdn.dragula}/dragula.js`, true, (ready) => {\n return ready.then(resolve);\n });\n });\n });\n }\n get tree() {\n return this.component.tree || false;\n }\n /**\n * The empty value for this component.\n * @returns {null} - The empty value for this component.\n */\n get emptyValue() {\n return null;\n }\n /**\n * Returns if this component has a value set.\n * @param {any} data - The global data object.\n * @returns {boolean} - TRUE if a value is set.\n */\n hasValue(data) {\n return !lodash_1.default.isUndefined(lodash_1.default.get(data || this.data, this.key));\n }\n /**\n * Get the data value at the root level.\n * @returns {*} - The root value for the component, typically the Webform data object.\n */\n get rootValue() {\n return this.root ? this.root.data : this.data;\n }\n get rootPristine() {\n return lodash_1.default.get(this, 'root.pristine', false);\n }\n /**\n * Get the static value of this component.\n * @returns {*} - The value for this component.\n */\n get dataValue() {\n if (!this.key) {\n return this.component.multiple ? [] : this.emptyValue;\n }\n return lodash_1.default.get(this._data, this.key, this.component.multiple ? [] : this.emptyValue);\n }\n /**\n * Sets the static value of this component.\n * @param {*} value - The value to set for this component.\n */\n set dataValue(value) {\n if (!this.allowData || !this.key) {\n return;\n }\n if ((value !== null) && (value !== undefined)) {\n value = this.hook('setDataValue', value, this.key, this._data);\n }\n if ((value === null) || (value === undefined)) {\n this.unset();\n return;\n }\n lodash_1.default.set(this._data, this.key, value);\n return;\n }\n /**\n * Splice a value from the dataValue.\n * @param {number} index - The index to splice for an array component values.\n * @param {*} flags - The flags to use when splicing the value.\n */\n splice(index, flags = {}) {\n if (this.hasValue()) {\n const dataValue = this.dataValue || [];\n if (lodash_1.default.isArray(dataValue) && dataValue.hasOwnProperty(index)) {\n dataValue.splice(index, 1);\n this.dataValue = dataValue;\n this.triggerChange(flags);\n }\n }\n }\n unset() {\n lodash_1.default.unset(this._data, this.key);\n }\n /**\n * Deletes the value of the component.\n */\n deleteValue() {\n this.setValue(null, {\n noUpdateEvent: true,\n noDefault: true\n });\n this.unset();\n }\n getCustomDefaultValue(defaultValue) {\n if (this.component.customDefaultValue && !this.options.preview) {\n const customDefaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');\n if (this.shouldSetCustomDefault) {\n defaultValue = customDefaultValue;\n }\n }\n return defaultValue;\n }\n get shouldAddDefaultValue() {\n return !this.options.noDefaults || (this.component.defaultValue && !this.isEmpty(this.component.defaultValue)) || this.component.customDefaultValue;\n }\n get defaultValue() {\n let defaultValue = this.emptyValue;\n if (this.component.defaultValue) {\n defaultValue = this.component.defaultValue;\n }\n defaultValue = this.getCustomDefaultValue(defaultValue);\n const checkMask = (value) => {\n if (typeof value === 'string') {\n if (this.component.type !== 'textfield') {\n const placeholderChar = this.placeholderChar;\n value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;\n if (!FormioUtils.matchInputMask(value, this.defaultMask)) {\n value = '';\n }\n }\n }\n else {\n value = '';\n }\n return value;\n };\n if (Array.isArray(this.defaultMask) ? this.defaultMask.length > 0 : this.defaultMask) {\n if (Array.isArray(defaultValue)) {\n defaultValue = defaultValue.map(checkMask);\n }\n else {\n defaultValue = checkMask(defaultValue);\n }\n }\n // Clone so that it creates a new instance.\n return lodash_1.default.cloneDeep(defaultValue);\n }\n /**\n * Get the input value of this component.\n * @returns {*} - The value for the component.\n */\n getValue() {\n if (!this.hasInput || this.viewOnly || !this.refs.input || !this.refs.input.length) {\n return this.dataValue;\n }\n const values = [];\n for (const i in this.refs.input) {\n if (this.refs.input.hasOwnProperty(i)) {\n if (!this.component.multiple) {\n return this.getValueAt(i);\n }\n values.push(this.getValueAt(i));\n }\n }\n if (values.length === 0 && !this.component.multiple) {\n return '';\n }\n return values;\n }\n /**\n * Get the value at a specific index.\n * @param {number} index - For an array component or multiple values, this returns the value at a specific index.\n * @returns {*} - The value at the specified index.\n */\n getValueAt(index) {\n const input = this.performInputMapping(this.refs.input[index]);\n return input ? input.value : undefined;\n }\n /**\n * Set the value of this component.\n * @param {*} value - The value to set for this component.\n * @param {*} flags - The flags to use when setting the value.\n * @returns {boolean} - If the value changed.\n */\n setValue(value, flags = {}) {\n const changed = this.updateValue(value, flags);\n value = this.dataValue;\n if (!this.hasInput) {\n return changed;\n }\n const isArray = Array.isArray(value);\n const valueInput = this.refs.fileLink || this.refs.input;\n if (isArray &&\n Array.isArray(this.defaultValue) &&\n this.refs.hasOwnProperty('input') &&\n valueInput &&\n (valueInput.length !== value.length) &&\n this.visible) {\n this.redraw();\n }\n if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {\n this.redraw();\n return changed;\n }\n for (const i in this.refs.input) {\n if (this.refs.input.hasOwnProperty(i)) {\n this.setValueAt(i, isArray && !this.isSingleInputValue() ? value[i] : value, flags);\n }\n }\n return changed;\n }\n /**\n * Returns if the value (e.g. array) should be divided between several inputs\n * @returns {boolean}\n */\n isSingleInputValue() {\n return false;\n }\n /**\n * Set the value at a specific index.\n * @param {number} index - The index to set the value at.\n * @param {*} value - The value to set at the specified index.\n * @param {*} flags - The flags to use when setting the value.\n */\n setValueAt(index, value, flags = {}) {\n if (!flags.noDefault && (value === null || value === undefined) && !this.component.multiple) {\n value = this.defaultValue;\n }\n const input = this.performInputMapping(this.refs.input[index]);\n const valueMaskInput = this.refs.valueMaskInput;\n if ((valueMaskInput === null || valueMaskInput === void 0 ? void 0 : valueMaskInput.mask) && valueMaskInput.mask.textMaskInputElement) {\n valueMaskInput.mask.textMaskInputElement.update(value);\n }\n if (input.mask && input.mask.textMaskInputElement) {\n input.mask.textMaskInputElement.update(value);\n }\n else if (input.widget && input.widget.setValue) {\n input.widget.setValue(value);\n }\n else {\n input.value = value;\n }\n }\n get hasSetValue() {\n return this.hasValue() && !this.isEmpty(this.dataValue);\n }\n setDefaultValue() {\n if (this.defaultValue && this.shouldAddDefaultValue) {\n const defaultValue = (this.component.multiple && !this.dataValue.length) ? [] : this.defaultValue;\n this.setValue(defaultValue, {\n noUpdateEvent: true\n });\n }\n }\n /**\n * Restore the value of a control.\n */\n restoreValue() {\n if (this.hasSetValue) {\n this.setValue(this.dataValue, {\n noUpdateEvent: true\n });\n }\n else {\n this.setDefaultValue();\n }\n }\n /**\n * Normalize values coming into updateValue.\n * @param {*} value - The value to normalize before setting.\n * @returns {*} - The normalized value.\n */\n normalizeValue(value) {\n return value;\n }\n /**\n * Update a value of this component.\n * @param {*} value - The value to update.\n * @param {*} flags - The flags to use when updating the value.\n * @returns {boolean} - If the value changed.\n */\n updateComponentValue(value, flags = {}) {\n let newValue = (!flags.resetValue && (value === undefined || value === null)) ? this.getValue() : value;\n newValue = this.normalizeValue(newValue, flags);\n const oldValue = this.dataValue;\n let changed = ((newValue !== undefined) ? this.hasChanged(newValue, oldValue) : false);\n if (changed) {\n this.dataValue = newValue;\n changed = this.dataValue !== oldValue;\n this.updateOnChange(flags, changed);\n }\n if (this.componentModal && flags && flags.fromSubmission) {\n this.componentModal.setValue(value);\n }\n return changed;\n }\n /**\n * Updates the value of this component plus all sub-components.\n * @param {...any} args - The arguments to pass to updateValue.\n * @returns {boolean} - If the value changed.\n */\n updateValue(...args) {\n return this.updateComponentValue(...args);\n }\n getIcon(name, content, styles, ref = 'icon') {\n return this.renderTemplate('icon', {\n className: this.iconClass(name),\n ref,\n styles,\n content\n });\n }\n /**\n * Resets the value of this component.\n */\n resetValue() {\n this.unset();\n this.setValue(this.defaultValue || this.emptyValue, {\n noUpdateEvent: true,\n noValidate: true,\n resetValue: true\n });\n }\n /**\n * Determine if the value of this component has changed.\n * @param {*} newValue - The new value to check.\n * @param {*} oldValue - The existing value of the component.\n * @returns {boolean} - TRUE if the value has changed.\n */\n hasChanged(newValue, oldValue) {\n if (((newValue === undefined) || (newValue === null)) &&\n ((oldValue === undefined) || (oldValue === null) || this.isEmpty(oldValue))) {\n return false;\n }\n // If we do not have a value and are getting set to anything other than undefined or null, then we changed.\n if (newValue !== undefined &&\n newValue !== null &&\n this.allowData &&\n !this.hasValue()) {\n return true;\n }\n return !lodash_1.default.isEqual(newValue, oldValue);\n }\n /**\n * Update the value on change.\n * @param {*} flags - The flags to use when triggering the on change event.\n * @param {boolean} changed - If the value has changed.\n * @returns {boolean} - If the value changed.\n */\n updateOnChange(flags = {}, changed = false) {\n if (!flags.noUpdateEvent && changed) {\n if (flags.fromSubmission) {\n // Reset the errors when a submission has been made and allow it to revalidate.\n this._errors = [];\n }\n this.triggerChange(flags);\n return true;\n }\n return false;\n }\n convertNumberOrBoolToString(value) {\n if (typeof value === 'number' || typeof value === 'boolean') {\n return value.toString();\n }\n return value;\n }\n doValueCalculation(dataValue, data, row) {\n var _a;\n const calculatedValue = this.evaluate(this.component.calculateValue, {\n value: dataValue,\n data,\n row: row || this.data,\n submission: ((_a = this.root) === null || _a === void 0 ? void 0 : _a._submission) || {\n data: this.rootValue\n }\n }, 'value');\n if (this.shouldSetCalculatedValue) {\n return calculatedValue;\n }\n return dataValue;\n }\n /* eslint-disable max-statements */\n calculateComponentValue(data, flags, row) {\n // Skip value calculation for the component if we don't have entire form data set or in builder mode\n if (this.builderMode || lodash_1.default.isUndefined(lodash_1.default.get(this, 'root.data'))) {\n return false;\n }\n // If no calculated value or\n // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)\n const { clearOnHide } = this.component;\n const shouldBeCleared = this.conditionallyHidden() && clearOnHide;\n const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);\n if (shouldBeCleared) {\n // remove calculated value so that the value is recalculated once component becomes visible\n if (this.hasOwnProperty('calculatedValue') && allowOverride) {\n lodash_1.default.unset(this, 'calculatedValue');\n }\n return false;\n }\n // Handle all cases when calculated values should not fire.\n if ((this.options.readOnly && !this.options.pdf && !this.component.calculateValue) ||\n !(this.component.calculateValue || this.component.calculateValueVariable) ||\n (this.options.server && !this.component.calculateServer) ||\n (flags.dataSourceInitialLoading && allowOverride)) {\n return false;\n }\n const dataValue = this.dataValue;\n // Calculate the new value.\n let calculatedValue = this.doValueCalculation(dataValue, data, row, flags);\n if (this.options.readOnly && dataValue && !calculatedValue) {\n return false;\n }\n if (lodash_1.default.isNil(calculatedValue)) {\n calculatedValue = this.emptyValue;\n }\n const changed = !lodash_1.default.isEqual(dataValue, calculatedValue);\n // Do not override calculations on server if they have calculateServer set.\n if (allowOverride) {\n // The value is considered locked if it is not empty and comes from a submission value.\n const fromSubmission = (flags.fromSubmission && this.component.persistent === true);\n if (this.isEmpty(dataValue)) {\n // Reset the calculation lock if ever the data is cleared.\n this.calculationLocked = false;\n }\n else if (this.calculationLocked || fromSubmission) {\n this.calculationLocked = true;\n return false;\n }\n const firstPass = (this.calculatedValue === undefined) || flags.resetValue;\n if (firstPass) {\n this.calculatedValue = null;\n }\n const newCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(calculatedValue));\n const previousCalculatedValue = this.normalizeValue(this.convertNumberOrBoolToString(this.calculatedValue));\n const normalizedDataValue = this.normalizeValue(this.convertNumberOrBoolToString(dataValue));\n const calculationChanged = !lodash_1.default.isEqual(previousCalculatedValue, newCalculatedValue);\n const previousChanged = !lodash_1.default.isEqual(normalizedDataValue, previousCalculatedValue);\n if (calculationChanged && previousChanged && !firstPass) {\n return false;\n }\n // Check to ensure that the calculated value is different than the previously calculated value.\n if (previousCalculatedValue && previousChanged && !calculationChanged) {\n this.calculatedValue = null;\n return false;\n }\n if (flags.isReordered || !calculationChanged) {\n return false;\n }\n if (fromSubmission) {\n // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass\n this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n return false;\n }\n // If this is the firstPass, and the dataValue is different than to the calculatedValue.\n if (firstPass && !this.isEmpty(dataValue) && changed && calculationChanged) {\n // Return that we have a change so it will perform another pass.\n return true;\n }\n }\n this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);\n if (changed) {\n if (!flags.noPristineChangeOnModified && this.root.initialized) {\n this.pristine = false;\n }\n flags.triggeredComponentId = this.id;\n return this.setValue(calculatedValue, flags);\n }\n return false;\n }\n /* eslint-enable max-statements */\n /**\n * Performs calculations in this component plus any child components.\n * @param {*} data - The data to perform the calculation with.\n * @param {*} flags - The flags to use when calculating the value.\n * @param {*} row - The contextual row data to use when performing the calculation.\n * @returns {boolean} - TRUE if the value changed.\n */\n calculateValue(data, flags, row) {\n data = data || this.rootValue;\n flags = flags || {};\n row = row || this.data;\n return this.calculateComponentValue(data, flags, row);\n }\n /**\n * Get this component's label text.\n * @returns {string} - The label text for this component.\n */\n get label() {\n return this.component.label;\n }\n /**\n * Set this component's label text and render it.\n * @param {string} value - The new label text.\n */\n set label(value) {\n this.component.label = value;\n if (this.labelElement) {\n this.labelElement.innerText = value;\n }\n }\n /**\n * Get FormioForm element at the root of this component tree.\n * @returns {*} root - The root component to search from.\n */\n getRoot() {\n return this.root;\n }\n /**\n * Returns the invalid message, or empty string if the component is valid.\n * @param {*} data - The data to check if the component is valid.\n * @param {boolean} dirty - If the component is dirty.\n * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.\n * @param {*} row - Contextual row data for this component.\n * @returns {string} - The message to show when the component is invalid.\n */\n invalidMessage(data, dirty, ignoreCondition, row) {\n var _a;\n if (!row) {\n row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);\n }\n if (!ignoreCondition && !this.checkCondition(row, data)) {\n return '';\n }\n // See if this is forced invalid.\n if (this.invalid) {\n return this.invalid;\n }\n // No need to check for errors if there is no input or if it is pristine.\n if (!this.hasInput || (!dirty && this.pristine)) {\n return '';\n }\n const validationScope = { errors: [] };\n (0, process_1.processOneSync)({\n component: this.component,\n data,\n row,\n path: this.path || this.component.key,\n parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n paths: this.paths,\n scope: validationScope,\n instance: this,\n processors: [\n process_1.validateProcessInfo\n ]\n });\n const errors = validationScope.errors;\n const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n return lodash_1.default.map(interpolatedErrors, 'message').join('\\n\\n');\n }\n /**\n * Returns if the component is valid or not.\n * @param {*} data - The data to check if the component is valid.\n * @param {boolean} dirty - If the component is dirty.\n * @returns {boolean} - TRUE if the component is valid.\n */\n isValid(data, dirty) {\n return !this.invalidMessage(data, dirty);\n }\n setComponentValidity(errors, dirty, silentCheck) {\n if (silentCheck) {\n return [];\n }\n const messages = errors.filter(message => !message.fromServer);\n if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {\n return this.setCustomValidity(messages, dirty);\n }\n else {\n return this.setCustomValidity('');\n }\n }\n /**\n * Interpolate errors from the validation methods.\n * @param {Array<any>} errors - An array of errors to interpolate.\n * @returns {Array<any>} - The interpolated errors.\n */\n interpolateErrors(errors) {\n var _a;\n const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));\n return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;\n }\n /**\n * Show component validation errors.\n * @param {*} errors - An array of errors that have occured.\n * @param {*} data - The root submission data.\n * @param {*} row - The contextual row data.\n * @param {*} flags - The flags to perform validation.\n * @returns {boolean} - TRUE if the component is valid.\n */\n showValidationErrors(errors, data, row, flags) {\n if (flags.silentCheck) {\n return [];\n }\n let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);\n if (this.options.alwaysDirty) {\n isDirty = true;\n }\n this.setDirty(isDirty);\n return this.setComponentValidity(errors, isDirty, flags.silentCheck, flags.fromSubmission);\n }\n /**\n * Perform a component validation.\n * @param {*} data - The root data you wish to use for this component.\n * @param {*} row - The contextual row data you wish to use for this component.\n * @param {*} flags - The flags to control the behavior of the validation.\n * @returns {Array<any>} - An array of errors if the component is invalid.\n */\n validateComponent(data = null, row = null, flags = {}) {\n var _a;\n data = data || this.rootValue;\n row = row || this.data;\n const { async = false } = flags;\n if (this.shouldSkipValidation(data, row, flags)) {\n return async ? Promise.resolve([]) : [];\n }\n const processContext = {\n component: this.component,\n data,\n row,\n local: !!flags.local,\n value: this.validationValue,\n parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,\n paths: this.paths,\n path: this.path || this.component.key,\n instance: this,\n form: this.root ? this.root._form : {},\n scope: { errors: [] },\n processors: [\n process_1.validateProcessInfo\n ]\n };\n if (async) {\n return (0, process_1.processOne)(processContext).then(() => {\n this._errors = this.interpolateErrors(processContext.scope.errors);\n return this._errors;\n });\n }\n (0, process_1.processOneSync)(processContext);\n this._errors = this.interpolateErrors(processContext.scope.errors);\n return this._errors;\n }\n /**\n * Checks the validity of this component and sets the error message if it is invalid.\n * @param {*} data - The data to check if the component is valid.\n * @param {boolean} dirty - If the component is dirty.\n * @param {*} row - The contextual row data for this component.\n * @param {*} flags - The flags to use when checking the validity.\n * @param {Array<any>} allErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n * @returns {boolean} - TRUE if the component is valid.\n */\n checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n data = data || this.rootValue;\n row = row || this.data;\n flags.dirty = dirty || false;\n if (flags.async) {\n return this.validateComponent(data, row, flags).then((errors) => {\n allErrors.push(...errors);\n if (this.parent && this.parent.childErrors) {\n if (errors.length) {\n this.parent.childErrors.push(...errors);\n }\n else {\n lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n }\n }\n this.showValidationErrors(errors, data, row, flags);\n return errors.length === 0;\n });\n }\n else {\n const errors = this.validateComponent(data, row, flags);\n this.showValidationErrors(errors, data, row, flags);\n allErrors.push(...errors);\n if (this.parent && this.parent.childErrors) {\n if (errors.length) {\n this.parent.childErrors.push(...errors);\n }\n else {\n lodash_1.default.remove(this.parent.childErrors, (err) => { var _a, _b; return (((_a = err === null || err === void 0 ? void 0 : err.component) === null || _a === void 0 ? void 0 : _a.key) || ((_b = err === null || err === void 0 ? void 0 : err.context) === null || _b === void 0 ? void 0 : _b.key)) === this.component.key; });\n }\n }\n return errors.length === 0;\n }\n }\n /**\n * Checks the validity of the component.\n * @param {*} data - The data to check if the component is valid.\n * @param {boolean} dirty - If the component is dirty.\n * @param {*} row - The contextual row data for this component.\n * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n * @param {Array<any>} errors - An array of all errors that have occured so that it can be appended when another one occurs here.\n * @returns {boolean} - TRUE if the component is valid.\n */\n checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n data = data || this.rootValue;\n row = row || this.data;\n return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);\n }\n checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {\n return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);\n }\n /**\n * Check the conditions, calculations, and validity of a single component and triggers an update if\n * something changed.\n * @param {*} data - The root data of the change event.\n * @param {*} flags - The flags from this change event.\n * @param {*} row - The contextual row data for this component.\n * @returns {void|boolean} - TRUE if no check should be performed on the component.\n */\n checkData(data = null, flags = null, row = null) {\n data = data || this.rootValue;\n flags = flags || {};\n row = row || this.data;\n // Needs for Nextgen Rules Engine\n this.resetCaches();\n // Do not trigger refresh if change was triggered on blur event since components with Refresh on Blur have their own listeners\n if (!flags.fromBlur) {\n this.checkRefreshOn(flags.changes, flags);\n }\n if (flags.noCheck) {\n return true;\n }\n this.checkComponentConditions(data, flags, row);\n if (this.id !== flags.triggeredComponentId) {\n this.calculateComponentValue(data, flags, row);\n }\n }\n checkModal(errors = [], dirty = false) {\n const messages = errors.filter(error => !error.fromServer);\n const isValid = errors.length === 0;\n if (!this.component.modalEdit || !this.componentModal) {\n return;\n }\n if (dirty && !isValid) {\n this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);\n }\n else {\n this.clearErrorClasses(this.refs.openModalWrapper);\n }\n }\n get validationValue() {\n return this.dataValue;\n }\n isEmpty(value = this.dataValue) {\n const isEmptyArray = (lodash_1.default.isArray(value) && value.length === 1) ? lodash_1.default.isEqual(value[0], this.emptyValue) : false;\n return value == null || value.length === 0 || lodash_1.default.isEqual(value, this.emptyValue) || isEmptyArray;\n }\n isEqual(valueA, valueB = this.dataValue) {\n return (this.isEmpty(valueA) && this.isEmpty(valueB)) || lodash_1.default.isEqual(valueA, valueB);\n }\n /**\n * Check if a component is eligible for multiple validation\n * @returns {boolean} - TRUE if the component is eligible for multiple validation.\n */\n validateMultiple() {\n return true;\n }\n clearErrorClasses(element = this.element) {\n this.removeClass(element, this.options.componentErrorClass);\n this.removeClass(element, 'alert alert-danger');\n this.removeClass(element, 'has-error');\n this.removeClass(element, 'has-message');\n }\n setInputWidgetErrorClasses(inputRefs, hasErrors) {\n if (!this.isInputComponent || !this.component.widget || !(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.length)) {\n return;\n }\n inputRefs.forEach((input) => {\n if ((input === null || input === void 0 ? void 0 : input.widget) && input.widget.setErrorClasses) {\n input.widget.setErrorClasses(hasErrors);\n }\n });\n }\n addFocusBlurEvents(element) {\n this.addEventListener(element, 'focus', () => {\n if (this.root.focusedComponent !== this) {\n if (this.root.pendingBlur) {\n this.root.pendingBlur();\n }\n this.root.focusedComponent = this;\n this.emit('focus', this);\n }\n else if (this.root.focusedComponent === this && this.root.pendingBlur) {\n this.root.pendingBlur.cancel();\n this.root.pendingBlur = null;\n }\n });\n this.addEventListener(element, 'blur', () => {\n this.root.pendingBlur = FormioUtils.delay(() => {\n this.emit('blur', this);\n if (this.component.validateOn === 'blur') {\n this.root.triggerChange({ fromBlur: true }, {\n instance: this,\n component: this.component,\n value: this.dataValue,\n flags: { fromBlur: true }\n });\n }\n this.root.focusedComponent = null;\n this.root.pendingBlur = null;\n });\n });\n }\n // eslint-disable-next-line max-statements\n setCustomValidity(messages, dirty, external) {\n const inputRefs = this.isInputComponent ? this.refs.input || [] : null;\n if (typeof messages === 'string' && messages) {\n messages = {\n level: 'error',\n message: messages,\n component: this.component,\n };\n }\n if (!Array.isArray(messages)) {\n if (messages) {\n messages = [messages];\n }\n else {\n messages = [];\n }\n }\n const errors = messages.filter(message => message.level === 'error');\n let invalidInputRefs = inputRefs;\n // Filter the invalid input refs in multiple components\n if (this.component.multiple) {\n const refsArray = Array.from(inputRefs);\n refsArray.forEach((input) => {\n this.setElementInvalid(this.performInputMapping(input), false);\n });\n this.setInputWidgetErrorClasses(refsArray, false);\n invalidInputRefs = refsArray.filter((ref, index) => {\n var _a;\n return (_a = messages.some) === null || _a === void 0 ? void 0 : _a.call(messages, (msg) => {\n var _a;\n return ((_a = msg === null || msg === void 0 ? void 0 : msg.context) === null || _a === void 0 ? void 0 : _a.index) === index;\n });\n });\n }\n if (messages.length) {\n if (this.refs.messageContainer) {\n this.empty(this.refs.messageContainer);\n }\n this.emit('componentError', {\n instance: this,\n component: this.component,\n message: messages[0].message,\n messages,\n external: !!external,\n });\n this.addMessages(messages, dirty, invalidInputRefs);\n if (invalidInputRefs) {\n this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n }\n }\n else if (!errors.length || (errors[0].external === !!external)) {\n if (this.refs.messageContainer) {\n this.empty(this.refs.messageContainer);\n }\n if (this.refs.modalMessageContainer) {\n this.empty(this.refs.modalMessageContainer);\n }\n if (invalidInputRefs) {\n this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);\n }\n this.clearErrorClasses();\n }\n this._visibleErrors = messages;\n return messages;\n }\n /**\n * Determines if the value of this component is hidden from the user as if it is coming from the server, but is\n * protected.\n * @returns {boolean|*} - TRUE if the value is hidden.\n */\n isValueHidden() {\n if (this.component.protected && this.root.editing) {\n return false;\n }\n if (!this.root || !this.root.hasOwnProperty('editing')) {\n return false;\n }\n if (!this.root || !this.root.editing) {\n return false;\n }\n return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));\n }\n shouldSkipValidation(data, row, flags = {}) {\n const rules = [\n // Do not validate if the flags say not too.\n () => flags.noValidate,\n // Force valid if component is read-only\n () => this.options.readOnly,\n // Do not check validations if component is not an input component.\n () => !this.hasInput,\n // Check to see if we are editing and if so, check component persistence.\n () => this.isValueHidden(),\n // Force valid if component is hidden.\n () => {\n if (!this.component.validateWhenHidden && (!this.visible || !this.checkCondition(row, data))) {\n // If this component is forced valid when it is hidden, then we also need to reset the errors for this component.\n this._errors = [];\n return true;\n }\n return false;\n }\n ];\n return rules.some(pred => pred());\n }\n // Maintain reverse compatibility.\n whenReady() {\n console.warn(this.t('whenReadyDeprecation'));\n return this.dataReady;\n }\n get dataReady() {\n return Promise.resolve();\n }\n /**\n * Prints out the value of this component as a string value.\n * @param {*} value - The value to print out.\n * @returns {string} - The string representation of the value.\n */\n asString(value) {\n value = value || this.getValue();\n return (Array.isArray(value) ? value : [value]).map(lodash_1.default.toString).join(', ');\n }\n /**\n * Return if the component is disabled.\n * @returns {boolean} - TRUE if the component is disabled.\n */\n get disabled() {\n return this._disabled || this.parentDisabled;\n }\n /**\n * Disable this component.\n * @param {boolean} disabled - TRUE to disable the component.\n */\n set disabled(disabled) {\n this._disabled = disabled;\n }\n setDisabled(element, disabled) {\n if (!element) {\n return;\n }\n element.disabled = disabled;\n if (disabled) {\n element.setAttribute('disabled', 'disabled');\n }\n else {\n element.removeAttribute('disabled');\n }\n }\n setLoading(element, loading) {\n if (!element || (element.loading === loading)) {\n return;\n }\n element.loading = loading;\n if (!element.loader && loading) {\n element.loader = this.ce('i', {\n class: `${this.iconClass('refresh', true)} button-icon-right`\n });\n }\n if (element.loader) {\n if (loading) {\n this.appendTo(element.loader, element);\n }\n else {\n this.removeChildFrom(element.loader, element);\n }\n }\n }\n selectOptions(select, tag, options, defaultValue) {\n lodash_1.default.each(options, (option) => {\n const attrs = {\n value: option.value\n };\n if (defaultValue !== undefined && (option.value === defaultValue)) {\n attrs.selected = 'selected';\n }\n const optionElement = this.ce('option', attrs);\n optionElement.appendChild(this.text(option.label));\n select.appendChild(optionElement);\n });\n }\n setSelectValue(select, value) {\n const options = select.querySelectorAll('option');\n lodash_1.default.each(options, (option) => {\n if (option.value === value) {\n option.setAttribute('selected', 'selected');\n }\n else {\n option.removeAttribute('selected');\n }\n });\n if (select.onchange) {\n select.onchange();\n }\n if (select.onselect) {\n select.onselect();\n }\n }\n getRelativePath(path) {\n const keyPart = `.${this.key}`;\n const thisPath = this.isInputComponent ? this.path\n : this.path.slice(0).replace(keyPart, '');\n return path.replace(thisPath, '');\n }\n clear() {\n this.detach();\n this.empty(this.getElement());\n }\n append(element) {\n this.appendTo(element, this.element);\n }\n prepend(element) {\n this.prependTo(element, this.element);\n }\n removeChild(element) {\n this.removeChildFrom(element, this.element);\n }\n detachLogic() {\n this.logic.forEach(logic => {\n if (logic.trigger.type === 'event') {\n const event = this.interpolate(logic.trigger.event);\n this.off(event); // only applies to callbacks on this component\n }\n });\n }\n attachLogic() {\n // Do not attach logic during builder mode.\n if (this.builderMode) {\n return;\n }\n this.logic.forEach((logic) => {\n if (logic.trigger.type === 'event') {\n const event = this.interpolate(logic.trigger.event);\n this.on(event, (...args) => {\n const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);\n if (this.applyActions(newComponent, logic.actions, args)) {\n // If component definition changed, replace it.\n if (!lodash_1.default.isEqual(this.component, newComponent)) {\n this.component = newComponent;\n const visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n const disabled = this.shouldDisabled;\n // Change states which won't be recalculated during redrawing\n if (this.visible !== visible) {\n // If the logic is triggered by an event and the action sets the hidden state then the original\n // component definition must be changed so that the components hidden state does not get flipped back by\n // the fieldLogic function\n this.originalComponent.hidden = !visible;\n this.visible = visible;\n }\n if (this.disabled !== disabled) {\n this.disabled = disabled;\n }\n this.redraw();\n }\n }\n }, true);\n }\n });\n }\n /**\n * Get the element information.\n * @returns {*} - The components \"input\" DOM element information.\n */\n elementInfo() {\n const attributes = {\n name: this.options.name,\n type: this.component.inputType || 'text',\n class: 'form-control',\n lang: this.options.language\n };\n if (this.component.placeholder) {\n attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });\n }\n if (this.component.tabindex) {\n attributes.tabindex = this.component.tabindex;\n }\n if (this.disabled) {\n attributes.disabled = 'disabled';\n }\n lodash_1.default.defaults(attributes, this.component.attributes);\n return {\n type: 'input',\n component: this.component,\n changeEvent: 'change',\n attr: attributes\n };\n }\n autofocus() {\n const hasAutofocus = this.component.autofocus && !this.builderMode && !this.options.preview;\n if (hasAutofocus) {\n this.on('render', () => this.focus(), true);\n }\n }\n scrollIntoView(element = this.element, verticalOnly) {\n if (!element) {\n return;\n }\n const { left, top } = element.getBoundingClientRect();\n window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);\n }\n focus(index) {\n var _a, _b, _c, _d;\n if ('beforeFocus' in this.parent) {\n this.parent.beforeFocus(this);\n }\n if (!index && !lodash_1.default.isNumber(index) && ((_b = (_a = this.refs) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.length)) {\n index = this.refs.input.length - 1;\n }\n if ((_c = this.refs.input) === null || _c === void 0 ? void 0 : _c.length) {\n const focusingInput = this.refs.input[index];\n if (((_d = this.component.widget) === null || _d === void 0 ? void 0 : _d.type) === 'calendar') {\n const sibling = focusingInput.nextSibling;\n if (sibling) {\n sibling.focus();\n }\n }\n else {\n focusingInput.focus();\n }\n }\n if (this.refs.openModal) {\n this.refs.openModal.focus();\n }\n if (this.parent.refs.openModal) {\n this.parent.refs.openModal.focus();\n }\n }\n /**\n * Get `Formio` instance for working with files\n * @returns {import('@formio/core').Formio} - The Formio instance file service.\n */\n get fileService() {\n if (this.options.fileService) {\n return this.options.fileService;\n }\n if (this.options.formio) {\n return this.options.formio;\n }\n if (this.root && this.root.formio) {\n return this.root.formio;\n }\n const formio = new Formio_1.Formio();\n // If a form is loaded, then make sure to set the correct formUrl.\n if (this.root && this.root._form && this.root._form._id) {\n formio.formUrl = `${formio.projectUrl}/form/${this.root._form._id}`;\n }\n return formio;\n }\n resetCaches() { }\n get previewMode() {\n return false;\n }\n}\nexports[\"default\"] = Component;\nComponent.externalLibraries = {};\nComponent.requireLibrary = function (name, property, src, polling) {\n if (!Component.externalLibraries.hasOwnProperty(name)) {\n Component.externalLibraries[name] = {};\n Component.externalLibraries[name].ready = new Promise((resolve, reject) => {\n Component.externalLibraries[name].resolve = resolve;\n Component.externalLibraries[name].reject = reject;\n });\n const callbackName = `${name}Callback`;\n if (!polling && !window[callbackName]) {\n window[callbackName] = function () {\n this.resolve();\n }.bind(Component.externalLibraries[name]);\n }\n // See if the plugin already exists.\n const plugin = (0, utils_1.getScriptPlugin)(property);\n if (plugin) {\n Component.externalLibraries[name].resolve(plugin);\n }\n else {\n src = Array.isArray(src) ? src : [src];\n src.forEach((lib) => {\n let attrs = {};\n let elementType = '';\n if (typeof lib === 'string') {\n lib = {\n type: 'script',\n src: lib\n };\n }\n switch (lib.type) {\n case 'script':\n elementType = 'script';\n attrs = {\n src: lib.src,\n type: 'text/javascript',\n defer: true,\n async: true\n };\n break;\n case 'styles':\n elementType = 'link';\n attrs = {\n href: lib.src,\n rel: 'stylesheet'\n };\n break;\n }\n // Add the script to the top page.\n const script = document.createElement(elementType);\n for (const attr in attrs) {\n script.setAttribute(attr, attrs[attr]);\n }\n document.getElementsByTagName('head')[0].appendChild(script);\n });\n // if no callback is provided, then check periodically for the script.\n if (polling) {\n setTimeout(function checkLibrary() {\n const plugin = (0, utils_1.getScriptPlugin)(property);\n if (plugin) {\n Component.externalLibraries[name].resolve(plugin);\n }\n else {\n // check again after 200 ms.\n setTimeout(checkLibrary, 200);\n }\n }, 200);\n }\n }\n }\n return Component.externalLibraries[name].ready;\n};\nComponent.libraryReady = function (name) {\n if (Component.externalLibraries.hasOwnProperty(name) &&\n Component.externalLibraries[name].ready) {\n return Component.externalLibraries[name].ready;\n }\n return Promise.reject(`${name} library was not required.`);\n};\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/component/Component.js?");
|
4857
4857
|
|
4858
4858
|
/***/ }),
|
4859
4859
|
|
@@ -5007,7 +5007,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
5007
5007
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
5008
5008
|
|
5009
5009
|
"use strict";
|
5010
|
-
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 Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\n'';\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\n/**\n * NestedComponent class.\n * @augments Field\n */\nclass NestedComponent extends Field_1.default {\n static schema(...extend) {\n return Field_1.default.schema({\n tree: false,\n lazyLoad: false,\n }, ...extend);\n }\n constructor(component, options, data) {\n super(component, options, data);\n this.type = 'components';\n /**\n * The collapsed state of this NestedComponent.\n * @type {boolean}\n * @default false\n * @private\n */\n this._collapsed = !!this.component.collapsed;\n }\n get defaultSchema() {\n return NestedComponent.schema();\n }\n /**\n * Get the schema for the NestedComponent.\n * @returns {object} The schema for the NestedComponent.\n * @override\n */\n get schema() {\n const schema = super.schema;\n const components = lodash_1.default.uniqBy(this.getComponents(), 'component.key');\n schema.components = lodash_1.default.map(components, 'schema');\n return schema;\n }\n /**\n * Get collapsed state.\n * @returns {boolean} The collapsed state.\n */\n get collapsed() {\n return this._collapsed;\n }\n /**\n * Set collapsed state.\n * @param {boolean} value - The collapsed state.\n * @returns {void}\n */\n collapse(value) {\n const promise = this.redraw();\n if (!value) {\n this.checkValidity(this.data, !this.pristine);\n }\n return promise;\n }\n /**\n * Set collapsed state.\n * @param {boolean} value - The collapsed state.\n * @returns {void}\n */\n set collapsed(value) {\n this._collapsed = value;\n this.collapse(value);\n }\n /**\n * Set visible state of parent and each child component.\n * @param {boolean} value - The visible state.\n * @returns {void}\n */\n set visible(value) {\n // DO NOT CALL super here. There is an issue where clearOnHide was getting triggered with\n // subcomponents because the \"parentVisible\" flag was set to false when it should really be\n // set to true.\n const visibilityChanged = this._visible !== value;\n this._visible = value;\n const isVisible = this.visible;\n const forceShow = this.shouldForceShow();\n const forceHide = this.shouldForceHide();\n this.components.forEach((component) => {\n // Set the parent visibility first since we may have nested components within nested components\n // and they need to be able to determine their visibility based on the parent visibility.\n component.parentVisible = isVisible;\n let visible;\n if (component.hasCondition()) {\n visible = !component.conditionallyHidden();\n }\n else {\n visible = !component.component.hidden;\n }\n if (forceShow || visible) {\n component.visible = true;\n }\n else if (forceHide || !isVisible || !visible) {\n component.visible = false;\n }\n // If hiding a nested component, clear all errors below.\n if (!component.visible) {\n component.error = '';\n }\n });\n if (visibilityChanged) {\n this.redraw();\n }\n }\n /**\n * Get visible state.\n * @returns {boolean} The visible state.\n */\n get visible() {\n return super.visible;\n }\n /**\n * Set parent visibility.\n * @param {boolean} value - The parent visibility.\n * @returns {void}\n */\n set parentVisible(value) {\n super.parentVisible = value;\n this.components.forEach(component => component.parentVisible = this.visible);\n }\n /**\n * Get parent visibility.\n * @returns {boolean} The parent visibility.\n */\n get parentVisible() {\n return super.parentVisible;\n }\n /**\n * Get the disabled state.\n * @returns {boolean} - The disabled state.\n */\n get disabled() {\n return super.disabled;\n }\n /**\n * Set the disabled state.\n * @param {boolean} disabled - The disabled state.\n */\n set disabled(disabled) {\n super.disabled = disabled;\n this.components.forEach((component) => component.parentDisabled = disabled);\n }\n /**\n * Set parent disabled state.\n * @param {boolean} value - The parent disabled state.\n * @returns {void}\n */\n set parentDisabled(value) {\n super.parentDisabled = value;\n this.components.forEach(component => {\n component.parentDisabled = this.disabled;\n });\n }\n /**\n * Get parent disabled state.\n * @returns {boolean} The parent disabled state.\n */\n get parentDisabled() {\n return super.parentDisabled;\n }\n /**\n * Get ready state from all components.\n * @returns {Promise<Array>} - The promise that resolves when all components are ready.\n */\n get ready() {\n return Promise.all(this.getComponents().map(component => component.ready));\n }\n /**\n * Get currentForm object.\n * @returns {object} - The current form object.\n */\n get currentForm() {\n return super.currentForm;\n }\n /**\n * Set currentForm object.\n * @param {object} instance - The current form object.\n * @returns {void}\n */\n set currentForm(instance) {\n super.currentForm = instance;\n this.getComponents().forEach(component => {\n component.currentForm = instance;\n });\n }\n /**\n * Get Row Index.\n * @returns {number} - The row index.\n */\n get rowIndex() {\n return this._rowIndex;\n }\n /**\n * Set Row Index to row and update each component.\n * @param {number} value - The row index.\n * @returns {void}\n */\n set rowIndex(value) {\n var _a, _b;\n this._rowIndex = value;\n this.paths = (0, utils_1.getComponentPaths)(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n this.eachComponent((component) => {\n component.rowIndex = value;\n });\n }\n /**\n * Get Contextual data of the component.\n * @returns {object} - The contextual data of the component.\n * @override\n */\n componentContext() {\n return this._data;\n }\n /**\n * Get the data of the component.\n * @returns {object} - The data of the component.\n * @override\n */\n get data() {\n return this._data;\n }\n /**\n * Set the data of the component.\n * @param {object} value - The data of the component.\n * @returns {void}\n */\n set data(value) {\n this._data = value;\n this.eachComponent((component) => {\n component.data = this.componentContext(component);\n });\n }\n /**\n * Get components array.\n * @returns {Array} - The components array.\n */\n getComponents() {\n return this.components || [];\n }\n /**\n * Perform a deep iteration over every component, including those\n * within other container based components.\n * @param {Function} fn - Called for every component.\n * @param {any} options - The options to include with this everyComponent call.\n */\n everyComponent(fn, options = {}) {\n const components = this.getComponents();\n lodash_1.default.each(components, (component, index) => {\n if (fn(component, components, index) === false) {\n return false;\n }\n if (typeof component.everyComponent === 'function') {\n if (component.everyComponent(fn, options) === false) {\n return false;\n }\n }\n });\n }\n /**\n * Check if the component has a component.\n * @param {import('@formio/core').Component} component - The component to check.\n * @returns {boolean} - TRUE if the component has a component, FALSE otherwise.\n */\n hasComponent(component) {\n let result = false;\n this.everyComponent((comp) => {\n if (comp === component) {\n result = true;\n return false;\n }\n });\n return result;\n }\n /**\n * Get the flattened components of this NestedComponent.\n * @returns {object} - The flattened components of this NestedComponent.\n */\n flattenComponents() {\n const result = {};\n this.everyComponent((component) => {\n result[component.component.flattenAs || component.key] = component;\n });\n return result;\n }\n /**\n * Perform an iteration over each component within this container component.\n * @param {Function} fn - Called for each component\n */\n eachComponent(fn) {\n lodash_1.default.each(this.getComponents(), (component, index) => {\n if (fn(component, index) === false) {\n return false;\n }\n });\n }\n /**\n * Returns a component provided a key. This performs a deep search within the component tree.\n * @param {string} path - The path to the component.\n * @returns {any} - The component that is located.\n */\n getComponent(path) {\n var _a;\n path = (0, utils_1.getStringFromComponentPath)(path);\n const matches = {\n path: undefined,\n fullPath: undefined,\n localPath: undefined,\n fullLocalPath: undefined,\n dataPath: undefined,\n localDataPath: undefined,\n key: undefined,\n };\n this.everyComponent((component) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n // All searches are relative to this component so replace this path from the child paths.\n (0, utils_1.componentMatches)(component.component, {\n path: (_b = (_a = component.paths) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.replace(new RegExp(`^${(_c = this.paths) === null || _c === void 0 ? void 0 : _c.path}\\\\.?`), ''),\n fullPath: (_e = (_d = component.paths) === null || _d === void 0 ? void 0 : _d.fullPath) === null || _e === void 0 ? void 0 : _e.replace(new RegExp(`^${(_f = this.paths) === null || _f === void 0 ? void 0 : _f.fullPath}\\\\.?`), ''),\n localPath: (_h = (_g = component.paths) === null || _g === void 0 ? void 0 : _g.localPath) === null || _h === void 0 ? void 0 : _h.replace(new RegExp(`^${(_j = this.paths) === null || _j === void 0 ? void 0 : _j.localPath}\\\\.?`), ''),\n fullLocalPath: (_l = (_k = component.paths) === null || _k === void 0 ? void 0 : _k.fullLocalPath) === null || _l === void 0 ? void 0 : _l.replace(new RegExp(`^${(_m = this.paths) === null || _m === void 0 ? void 0 : _m.fullLocalPath}\\\\.?`), ''),\n dataPath: (_p = (_o = component.paths) === null || _o === void 0 ? void 0 : _o.dataPath) === null || _p === void 0 ? void 0 : _p.replace(new RegExp(`^${(_q = this.paths) === null || _q === void 0 ? void 0 : _q.dataPath}\\\\.?`), ''),\n localDataPath: (_s = (_r = component.paths) === null || _r === void 0 ? void 0 : _r.localDataPath) === null || _s === void 0 ? void 0 : _s.replace(new RegExp(`^${(_t = this.paths) === null || _t === void 0 ? void 0 : _t.localDataPath}\\\\.?`), ''),\n }, path, this.rowIndex, matches, (type, match) => {\n match.instance = component;\n return match;\n });\n });\n return (_a = (0, utils_1.getBestMatch)(matches)) === null || _a === void 0 ? void 0 : _a.instance;\n }\n /**\n * Return a component provided the Id of the component.\n * @param {string} id - The Id of the component.\n * @param {Function} fn - Called with the component once it is retrieved.\n * @returns {object} - The component retrieved.\n */\n getComponentById(id, fn = null) {\n let comp = null;\n this.everyComponent((component, components) => {\n if (component.id === id) {\n comp = component;\n if (fn) {\n fn(component, components);\n }\n return false;\n }\n });\n return comp;\n }\n /**\n * Create a new component and add it to the components array.\n * @param {import('@formio/core').Component} component - The component JSON schema to create.\n * @param {object} options - The options to create the component with.\n * @param {import('@formio/core').DataObject} data - The submission data object to house the data for this component.\n * @param {import('@formio/core').Component} [before] - The component before which to add this component.\n * @param {import('@formio/core').Component} [replacedComp] - The component to replace with this component.\n * @returns {any} - The created component instance.\n */\n createComponent(component, options, data, before, replacedComp) {\n if (!component) {\n return;\n }\n options = options || this.options;\n data = data || this.data;\n options.parent = this;\n options.parentVisible = this.visible;\n options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;\n options.localRoot = this.localRoot;\n options.skipInit = true;\n if (!(options.display === 'pdf' && this.builderMode)) {\n component.id = (0, utils_1.getRandomComponentId)();\n }\n const comp = Components_1.default.create(component, options, data, true);\n comp.init();\n if (component.internal) {\n return comp;\n }\n if (before) {\n const index = lodash_1.default.findIndex(this.components, { id: before.id });\n if (index !== -1) {\n this.components.splice(index, 0, comp);\n }\n else {\n this.components.push(comp);\n }\n }\n else if (replacedComp) {\n const index = lodash_1.default.findIndex(this.components, { id: replacedComp.id });\n if (index !== -1) {\n this.components[index] = comp;\n }\n else {\n this.components.push(comp);\n }\n }\n else {\n this.components.push(comp);\n }\n return comp;\n }\n getContainer() {\n return this.element;\n }\n get componentComponents() {\n return this.component.components || [];\n }\n get nestedKey() {\n return `nested-${this.key}`;\n }\n get templateName() {\n return 'container';\n }\n init() {\n this.components = this.components || [];\n this.addComponents();\n return super.init();\n }\n /**\n * Add a new component instance to the components array.\n * @param {import('@formio/core').DataObject} [data] - The Submission data for this component.\n * @param {object} [options] - The options for this component.\n */\n addComponents(data, options) {\n data = data || this.data;\n this.components = this.components || [];\n options = options || this.options;\n if (options.components) {\n this.components = options.components;\n }\n else {\n const components = this.hook('addComponents', this.componentComponents, this) || [];\n components.forEach((component) => this.addComponent(component, data));\n }\n }\n /**\n * Add a new component to the components array.\n * @param {import('@formio/core').Component} component - The component JSON schema to add.\n * @param {object} data - The submission data object to house the data for this component.\n * @param {HTMLElement} before - A DOM element to insert this element before.\n * @param {boolean} [noAdd] - A possibly extraneous boolean flag.\n * @returns {any} - The created component instance.\n */\n addComponent(component, data = null, before = null, noAdd = false) {\n data = data || this.data;\n this.components = this.components || [];\n component = this.hook('addComponent', component, data, before, noAdd);\n const comp = this.createComponent(component, this.options, data, before ? before : null);\n if (noAdd) {\n return comp;\n }\n return comp;\n }\n beforeFocus() {\n if (this.parent && 'beforeFocus' in this.parent) {\n this.parent.beforeFocus(this);\n }\n }\n render(children) {\n // If already rendering, don't re-render.\n return super.render(children || this.renderTemplate(this.templateName, {\n children: !this.visible ? '' : this.renderComponents(),\n nestedKey: this.nestedKey,\n collapsed: this.options.pdf ? false : this.collapsed,\n }));\n }\n renderComponents(components) {\n components = components || this.getComponents();\n const children = components.map(component => component.render());\n return this.renderTemplate('components', {\n children,\n components,\n });\n }\n attach(element) {\n const superPromise = super.attach(element);\n this.loadRefs(element, {\n header: 'single',\n collapsed: this.collapsed,\n [this.nestedKey]: 'single',\n messageContainer: 'single-scope',\n });\n let childPromise = Promise.resolve();\n if (this.refs[this.nestedKey]) {\n childPromise = this.attachComponents(this.refs[this.nestedKey]);\n }\n if (!this.visible) {\n this.attachComponentsLogic();\n }\n if (this.component.collapsible && this.refs.header) {\n this.addEventListener(this.refs.header, 'click', () => {\n this.collapsed = !this.collapsed;\n });\n this.addEventListener(this.refs.header, 'keydown', (e) => {\n if (e.keyCode === 13 || e.keyCode === 32) {\n e.preventDefault();\n this.collapsed = !this.collapsed;\n }\n });\n }\n return Promise.all([\n superPromise,\n childPromise,\n ]);\n }\n /**\n * Attach the logic to the components.\n * @param {import('@formio/core').Component[]} components - The components to attach logic to.\n */\n attachComponentsLogic(components) {\n components = components || this.components;\n lodash_1.default.each(components, (comp) => {\n comp.attachLogic();\n if (lodash_1.default.isFunction(comp.attachComponentsLogic)) {\n comp.attachComponentsLogic();\n }\n });\n }\n attachComponents(element, components, container) {\n components = components || this.components;\n container = container || this.component.components;\n element = this.hook('attachComponents', element, components, container, this);\n if (!element) {\n // Return a non-resolving promise.\n return (new Promise(() => { }));\n }\n let index = 0;\n const promises = [];\n Array.prototype.slice.call(element.children).forEach(child => {\n if (!child.getAttribute('data-noattach') && components[index]) {\n promises.push(components[index].attach(child));\n index++;\n }\n });\n return Promise.all(promises);\n }\n /**\n * Remove a component from the components array and from the children object\n * @param {import('@formio/core').Component} component - The component to remove from the components.\n * @param {import('@formio/core').Component[]} components - An array of components to remove this component from.\n * @param {boolean} [all] - If set to TRUE will cascade remove all components.\n */\n removeComponent(component, components, all = false) {\n components = components || this.components;\n component.destroy(all);\n lodash_1.default.remove(components, { id: component.id });\n if (this.componentsMap[component.path]) {\n delete this.componentsMap[component.path];\n }\n }\n /**\n * Removes a component provided the API key of that component.\n * @param {string} key - The API key of the component to remove.\n * @param {Function} fn - Called once the component is removed.\n * @returns {null|void} - Returns nothing if the component is not found.\n */\n removeComponentByKey(key, fn = null) {\n const comp = this.getComponent(key, (component, components) => {\n this.removeComponent(component, components);\n if (fn) {\n fn(component, components);\n }\n });\n if (!comp) {\n if (fn) {\n fn(null);\n }\n return null;\n }\n }\n /**\n * Removes a component provided the Id of the component.\n * @param {string} id - The Id of the component to remove.\n * @param {Function} fn - Called when the component is removed.\n * @returns {null|void} - Returns nothing if the component is not found.\n */\n removeComponentById(id, fn = null) {\n const comp = this.getComponentById(id, (component, components) => {\n this.removeComponent(component, components);\n if (fn) {\n fn(component, components);\n }\n });\n if (!comp) {\n if (fn) {\n fn(null);\n }\n return null;\n }\n }\n updateValue(value, flags = {}) {\n return this.components.reduce((changed, comp) => {\n return comp.updateValue(null, flags) || changed;\n }, super.updateValue(value, flags));\n }\n shouldSkipValidation(data, row, flags) {\n // Nested components with no input should not be validated.\n if (!this.component.input) {\n return true;\n }\n else {\n return super.shouldSkipValidation(data, row, flags);\n }\n }\n checkData(data, flags, row, components) {\n if (this.builderMode) {\n return true;\n }\n data = data || this.rootValue;\n flags = flags || {};\n row = row || this.data;\n components = components && lodash_1.default.isArray(components) ? components : this.getComponents();\n super.checkData(data, Object.assign({}, flags), row);\n components.forEach((comp) => comp.checkData(data, Object.assign({}, flags), row));\n }\n checkConditions(data, flags, row) {\n // check conditions of parent component first, because it may influence on visibility of it's children\n const check = super.checkConditions(data, flags, row);\n //row data of parent component not always corresponds to row of nested components, use comp.data as row data for children instead\n this.getComponents().forEach(comp => comp.checkConditions(data, flags, comp.data));\n return check;\n }\n clearOnHide(show) {\n super.clearOnHide(show);\n if (this.component.clearOnHide) {\n if (this.allowData && !this.hasValue() && !this.conditionallyHidden()) {\n this.dataValue = this.defaultValue;\n }\n if (this.hasValue()) {\n this.restoreComponentsContext();\n }\n }\n this.getComponents().forEach(component => component.clearOnHide(show));\n }\n restoreComponentsContext() {\n this.getComponents().forEach((component) => component.data = this.dataValue);\n }\n /**\n * Allow components to hook into the next page trigger to perform their own logic.\n * @param {Function} next - The callback to continue to the next page.\n * @returns {Promise} - A promise when the page has been processed.\n */\n beforePage(next) {\n return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));\n }\n /**\n * Allow components to hook into the submission to provide their own async data.\n * @returns {Promise} - Returns a promise when the constituent beforeSubmit functions are complete.\n */\n beforeSubmit() {\n return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));\n }\n calculateValue(data, flags, row) {\n // Do not iterate into children and calculateValues if this nested component is conditionally hidden.\n if (this.conditionallyHidden()) {\n return false;\n }\n return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));\n }\n isLastPage() {\n return this.pages.length - 1 === this.page;\n }\n isValid(data, dirty) {\n return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));\n }\n validationProcessor({ scope, data, row, instance, paths }, flags) {\n var _a;\n const { dirty } = flags;\n if (this.root.hasExtraPages && this.page !== this.root.page) {\n instance = ((_a = this.componentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(paths.dataPath))\n ? this.componentsMap[paths.dataPath]\n : this.getComponent(paths.dataPath);\n }\n if (!instance) {\n return;\n }\n instance.checkComponentValidity(data, dirty, row, flags, scope.errors);\n if (instance.processOwnValidation) {\n scope.noRecurse = true;\n }\n }\n /**\n * Perform a validation on all child components of this nested component.\n * @param {import('@formio/core').Component[]} components - The components to validate.\n * @param {import('@formio/core').DataObject} data - The data to validate.\n * @param {object} flags - The flags to use when validating.\n * @returns {Promise<Array>|Array} - The errors if any exist.\n */\n validateComponents(components = null, data = null, flags = {}) {\n components = components || this.component.components;\n data = data || this.rootValue;\n const { async, dirty, process } = flags;\n const validationProcessorProcess = (context) => this.validationProcessor(context, flags);\n const checkModalProcessorProcess = ({ instance, component, components }) => {\n // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.\n if (instance &&\n instance.parent &&\n (component === components[components.length - 1]) &&\n instance.parent.componentModal) {\n instance.parent.checkModal(instance.parent.childErrors, dirty);\n }\n };\n const processorContext = {\n process: process || 'unknown',\n components,\n instances: this.componentsMap,\n data: data,\n local: !!flags.local,\n scope: { errors: [] },\n parent: this.component,\n parentPaths: this.paths,\n processors: [\n {\n process: validationProcessorProcess,\n processSync: validationProcessorProcess\n },\n {\n process: checkModalProcessorProcess,\n processSync: checkModalProcessorProcess\n }\n ]\n };\n return async ? (0, process_1.process)(processorContext).then((scope) => scope.errors) : (0, process_1.processSync)(processorContext).errors;\n }\n /**\n * Validate a nested component with data, or its own internal data.\n * @param {import('@formio/core').DataObject} data - The data to validate.\n * @param {object} flags - The flags to use when validating.\n * @returns {Array} - The errors if any exist.\n */\n validate(data = null, flags = {}) {\n data = data || this.rootValue;\n return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);\n }\n checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n this.childErrors = [];\n return super.checkComponentValidity(data, dirty, row, flags, allErrors);\n }\n /**\n * Checks the validity of the component.\n * @param {*} data - The data to check if the component is valid.\n * @param {boolean} dirty - If the component is dirty.\n * @param {*} row - The contextual row data for this component.\n * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n * @param {Array<any>} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n * @returns {boolean} - TRUE if the component is valid.\n */\n checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {\n childErrors.push(...this.validate(data, { dirty, silentCheck }));\n return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;\n }\n checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {\n return this.ready.then(() => {\n return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {\n return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {\n return valid && childErrors.length === 0;\n });\n });\n });\n }\n setPristine(pristine) {\n super.setPristine(pristine);\n this.getComponents().forEach((comp) => comp.setPristine(pristine));\n }\n get isPristine() {\n return this.pristine && this.getComponents().every((c) => c.isPristine);\n }\n get isDirty() {\n return this.dirty && this.getComponents().every((c) => c.isDirty);\n }\n detach() {\n this.components.forEach(component => {\n component.detach();\n });\n super.detach();\n }\n clear() {\n this.components.forEach(component => {\n component.clear();\n });\n super.clear();\n }\n destroy(all = false) {\n this.destroyComponents(all);\n super.destroy(all);\n }\n destroyComponents(all = false) {\n const components = this.getComponents().slice();\n components.forEach((comp) => this.removeComponent(comp, this.components, all));\n this.components = [];\n }\n get visibleErrors() {\n return this.getComponents().reduce((errors, comp) => errors.concat(comp.visibleErrors || []), super.visibleErrors);\n }\n get errors() {\n const thisErrors = super.errors;\n return this.getComponents()\n .reduce((errors, comp) => errors.concat(comp.errors || []), thisErrors)\n .filter(err => err.level !== 'hidden');\n }\n getValue() {\n return this.data;\n }\n resetValue() {\n super.resetValue();\n this.getComponents().forEach((comp) => comp.resetValue());\n this.setPristine(true);\n }\n get dataReady() {\n return Promise.all(this.getComponents().map((component) => component.dataReady));\n }\n setNestedValue(component, value, flags = {}) {\n component._data = this.componentContext(component);\n if (component.type === 'button') {\n return false;\n }\n if (component.type === 'components') {\n if (component.tree && component.hasValue(value)) {\n return component.setValue(lodash_1.default.get(value, component.key), flags);\n }\n return component.setValue(value, flags);\n }\n else if (value && component.hasValue(value)) {\n return component.setValue(lodash_1.default.get(value, component.key), flags);\n }\n else if ((!this.rootPristine || component.visible) && component.shouldAddDefaultValue) {\n flags.noValidate = !flags.dirty;\n flags.resetValue = true;\n return component.setValue(component.defaultValue, flags);\n }\n }\n setValue(value, flags = {}) {\n if (!value) {\n return false;\n }\n return this.getComponents().reduce((changed, component) => {\n return this.setNestedValue(component, value, flags, changed) || changed;\n }, false);\n }\n get lazyLoad() {\n var _a;\n return (_a = this.component.lazyLoad) !== null && _a !== void 0 ? _a : false;\n }\n}\nexports[\"default\"] = NestedComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.js?");
|
5010
|
+
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 Field_1 = __importDefault(__webpack_require__(/*! ../field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst Components_1 = __importDefault(__webpack_require__(/*! ../../Components */ \"./lib/cjs/components/Components.js\"));\n'';\nconst utils_1 = __webpack_require__(/*! ../../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\n/**\n * NestedComponent class.\n * @augments Field\n */\nclass NestedComponent extends Field_1.default {\n static schema(...extend) {\n return Field_1.default.schema({\n tree: false,\n lazyLoad: false,\n }, ...extend);\n }\n constructor(component, options, data) {\n super(component, options, data);\n this.type = 'components';\n /**\n * The collapsed state of this NestedComponent.\n * @type {boolean}\n * @default false\n * @private\n */\n this._collapsed = !!this.component.collapsed;\n }\n get defaultSchema() {\n return NestedComponent.schema();\n }\n /**\n * Get the schema for the NestedComponent.\n * @returns {object} The schema for the NestedComponent.\n * @override\n */\n get schema() {\n const schema = super.schema;\n const components = lodash_1.default.uniqBy(this.getComponents(), 'component.key');\n schema.components = lodash_1.default.map(components, 'schema');\n return schema;\n }\n /**\n * Get collapsed state.\n * @returns {boolean} The collapsed state.\n */\n get collapsed() {\n return this._collapsed;\n }\n /**\n * Set collapsed state.\n * @param {boolean} value - The collapsed state.\n * @returns {void}\n */\n collapse(value) {\n const promise = this.redraw();\n if (!value) {\n this.checkValidity(this.data, !this.pristine);\n }\n return promise;\n }\n /**\n * Set collapsed state.\n * @param {boolean} value - The collapsed state.\n * @returns {void}\n */\n set collapsed(value) {\n this._collapsed = value;\n this.collapse(value);\n }\n /**\n * Set visible state of parent and each child component.\n * @param {boolean} value - The visible state.\n * @returns {void}\n */\n set visible(value) {\n // DO NOT CALL super here. There is an issue where clearOnHide was getting triggered with\n // subcomponents because the \"parentVisible\" flag was set to false when it should really be\n // set to true.\n const visibilityChanged = this._visible !== value;\n this._visible = value;\n const isVisible = this.visible;\n const forceShow = this.shouldForceShow();\n const forceHide = this.shouldForceHide();\n this.components.forEach((component) => {\n // Set the parent visibility first since we may have nested components within nested components\n // and they need to be able to determine their visibility based on the parent visibility.\n component.parentVisible = isVisible;\n let visible;\n if (component.hasCondition()) {\n visible = !component.conditionallyHidden();\n }\n else {\n visible = !component.component.hidden;\n }\n if (forceShow || visible) {\n component.visible = true;\n }\n else if (forceHide || !isVisible || !visible) {\n component.visible = false;\n }\n // If hiding a nested component, clear all errors below.\n if (!component.visible) {\n component.error = '';\n }\n });\n if (visibilityChanged) {\n this.redraw();\n }\n }\n /**\n * Get visible state.\n * @returns {boolean} The visible state.\n */\n get visible() {\n return super.visible;\n }\n /**\n * Set parent visibility.\n * @param {boolean} value - The parent visibility.\n * @returns {void}\n */\n set parentVisible(value) {\n super.parentVisible = value;\n this.components.forEach(component => component.parentVisible = this.visible);\n }\n /**\n * Get parent visibility.\n * @returns {boolean} The parent visibility.\n */\n get parentVisible() {\n return super.parentVisible;\n }\n /**\n * Get the disabled state.\n * @returns {boolean} - The disabled state.\n */\n get disabled() {\n return super.disabled;\n }\n /**\n * Set the disabled state.\n * @param {boolean} disabled - The disabled state.\n */\n set disabled(disabled) {\n super.disabled = disabled;\n this.components.forEach((component) => component.parentDisabled = disabled);\n }\n /**\n * Set parent disabled state.\n * @param {boolean} value - The parent disabled state.\n * @returns {void}\n */\n set parentDisabled(value) {\n super.parentDisabled = value;\n this.components.forEach(component => {\n component.parentDisabled = this.disabled;\n });\n }\n /**\n * Get parent disabled state.\n * @returns {boolean} The parent disabled state.\n */\n get parentDisabled() {\n return super.parentDisabled;\n }\n /**\n * Get ready state from all components.\n * @returns {Promise<Array>} - The promise that resolves when all components are ready.\n */\n get ready() {\n return Promise.all(this.getComponents().map(component => component.ready));\n }\n /**\n * Get currentForm object.\n * @returns {object} - The current form object.\n */\n get currentForm() {\n return super.currentForm;\n }\n /**\n * Set currentForm object.\n * @param {object} instance - The current form object.\n * @returns {void}\n */\n set currentForm(instance) {\n super.currentForm = instance;\n this.getComponents().forEach(component => {\n component.currentForm = instance;\n });\n }\n /**\n * Get Row Index.\n * @returns {number} - The row index.\n */\n get rowIndex() {\n return this._rowIndex;\n }\n /**\n * Set Row Index to row and update each component.\n * @param {number} value - The row index.\n * @returns {void}\n */\n set rowIndex(value) {\n var _a, _b;\n this._rowIndex = value;\n this.paths = (0, utils_1.getComponentPaths)(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));\n this.eachComponent((component) => {\n component.rowIndex = value;\n });\n }\n /**\n * Get Contextual data of the component.\n * @returns {object} - The contextual data of the component.\n * @override\n */\n componentContext() {\n return this._data;\n }\n /**\n * Get the data of the component.\n * @returns {object} - The data of the component.\n * @override\n */\n get data() {\n return this._data;\n }\n /**\n * Set the data of the component.\n * @param {object} value - The data of the component.\n * @returns {void}\n */\n set data(value) {\n this._data = value;\n this.eachComponent((component) => {\n component.data = this.componentContext(component);\n });\n }\n /**\n * Get components array.\n * @returns {Array} - The components array.\n */\n getComponents() {\n return this.components || [];\n }\n /**\n * Perform a deep iteration over every component, including those\n * within other container based components.\n * @param {Function} fn - Called for every component.\n * @param {any} options - The options to include with this everyComponent call.\n */\n everyComponent(fn, options = {}) {\n const components = this.getComponents();\n lodash_1.default.each(components, (component, index) => {\n if (fn(component, components, index) === false) {\n return false;\n }\n if (typeof component.everyComponent === 'function') {\n if (component.everyComponent(fn, options) === false) {\n return false;\n }\n }\n });\n }\n /**\n * Check if the component has a component.\n * @param {import('@formio/core').Component} component - The component to check.\n * @returns {boolean} - TRUE if the component has a component, FALSE otherwise.\n */\n hasComponent(component) {\n let result = false;\n this.everyComponent((comp) => {\n if (comp === component) {\n result = true;\n return false;\n }\n });\n return result;\n }\n /**\n * Get the flattened components of this NestedComponent.\n * @returns {object} - The flattened components of this NestedComponent.\n */\n flattenComponents() {\n const result = {};\n this.everyComponent((component) => {\n result[component.component.flattenAs || component.key] = component;\n });\n return result;\n }\n /**\n * Perform an iteration over each component within this container component.\n * @param {Function} fn - Called for each component\n */\n eachComponent(fn) {\n lodash_1.default.each(this.getComponents(), (component, index) => {\n if (fn(component, index) === false) {\n return false;\n }\n });\n }\n /**\n * Returns a component provided a key. This performs a deep search within the component tree.\n * @param {string} path - The path to the component.\n * @returns {any} - The component that is located.\n */\n getComponent(path) {\n var _a;\n path = (0, utils_1.getStringFromComponentPath)(path);\n const matches = {\n path: undefined,\n fullPath: undefined,\n localPath: undefined,\n fullLocalPath: undefined,\n dataPath: undefined,\n localDataPath: undefined,\n key: undefined,\n };\n this.everyComponent((component) => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n // All searches are relative to this component so replace this path from the child paths.\n (0, utils_1.componentMatches)(component.component, {\n path: (_b = (_a = component.paths) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.replace(new RegExp(`^${(_c = this.paths) === null || _c === void 0 ? void 0 : _c.path}\\\\.?`), ''),\n fullPath: (_e = (_d = component.paths) === null || _d === void 0 ? void 0 : _d.fullPath) === null || _e === void 0 ? void 0 : _e.replace(new RegExp(`^${(_f = this.paths) === null || _f === void 0 ? void 0 : _f.fullPath}\\\\.?`), ''),\n localPath: (_h = (_g = component.paths) === null || _g === void 0 ? void 0 : _g.localPath) === null || _h === void 0 ? void 0 : _h.replace(new RegExp(`^${(_j = this.paths) === null || _j === void 0 ? void 0 : _j.localPath}\\\\.?`), ''),\n fullLocalPath: (_l = (_k = component.paths) === null || _k === void 0 ? void 0 : _k.fullLocalPath) === null || _l === void 0 ? void 0 : _l.replace(new RegExp(`^${(_m = this.paths) === null || _m === void 0 ? void 0 : _m.fullLocalPath}\\\\.?`), ''),\n dataPath: (_p = (_o = component.paths) === null || _o === void 0 ? void 0 : _o.dataPath) === null || _p === void 0 ? void 0 : _p.replace(new RegExp(`^${(_q = this.paths) === null || _q === void 0 ? void 0 : _q.dataPath}\\\\.?`), ''),\n localDataPath: (_s = (_r = component.paths) === null || _r === void 0 ? void 0 : _r.localDataPath) === null || _s === void 0 ? void 0 : _s.replace(new RegExp(`^${(_t = this.paths) === null || _t === void 0 ? void 0 : _t.localDataPath}\\\\.?`), ''),\n }, path, this.rowIndex, matches, (type, match) => {\n match.instance = component;\n return match;\n });\n });\n return (_a = (0, utils_1.getBestMatch)(matches)) === null || _a === void 0 ? void 0 : _a.instance;\n }\n /**\n * Return a component provided the Id of the component.\n * @param {string} id - The Id of the component.\n * @param {Function} fn - Called with the component once it is retrieved.\n * @returns {object} - The component retrieved.\n */\n getComponentById(id, fn = null) {\n let comp = null;\n this.everyComponent((component, components) => {\n if (component.id === id) {\n comp = component;\n if (fn) {\n fn(component, components);\n }\n return false;\n }\n });\n return comp;\n }\n /**\n * Create a new component and add it to the components array.\n * @param {import('@formio/core').Component} component - The component JSON schema to create.\n * @param {object} options - The options to create the component with.\n * @param {import('@formio/core').DataObject} data - The submission data object to house the data for this component.\n * @param {import('@formio/core').Component} [before] - The component before which to add this component.\n * @param {import('@formio/core').Component} [replacedComp] - The component to replace with this component.\n * @returns {any} - The created component instance.\n */\n createComponent(component, options, data, before, replacedComp) {\n if (!component) {\n return;\n }\n options = options || this.options;\n data = data || this.data;\n options.parent = this;\n options.parentVisible = this.visible;\n options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;\n options.localRoot = this.localRoot;\n options.skipInit = true;\n if (!(options.display === 'pdf' && this.builderMode)) {\n component.id = (0, utils_1.getRandomComponentId)();\n }\n const comp = Components_1.default.create(component, options, data, true);\n comp.init();\n if (component.internal) {\n return comp;\n }\n if (before) {\n const index = lodash_1.default.findIndex(this.components, { id: before.id });\n if (index !== -1) {\n this.components.splice(index, 0, comp);\n }\n else {\n this.components.push(comp);\n }\n }\n else if (replacedComp) {\n const index = lodash_1.default.findIndex(this.components, { id: replacedComp.id });\n if (index !== -1) {\n this.components[index] = comp;\n }\n else {\n this.components.push(comp);\n }\n }\n else {\n this.components.push(comp);\n }\n return comp;\n }\n getContainer() {\n return this.element;\n }\n get componentComponents() {\n return this.component.components || [];\n }\n get nestedKey() {\n return `nested-${this.key}`;\n }\n get templateName() {\n return 'container';\n }\n init() {\n this.components = this.components || [];\n this.addComponents();\n return super.init();\n }\n /**\n * Add a new component instance to the components array.\n * @param {import('@formio/core').DataObject} [data] - The Submission data for this component.\n * @param {object} [options] - The options for this component.\n */\n addComponents(data, options) {\n data = data || this.data;\n this.components = this.components || [];\n options = options || this.options;\n if (options.components) {\n this.components = options.components;\n }\n else {\n const components = this.hook('addComponents', this.componentComponents, this) || [];\n components.forEach((component) => this.addComponent(component, data));\n }\n }\n /**\n * Add a new component to the components array.\n * @param {import('@formio/core').Component} component - The component JSON schema to add.\n * @param {object} data - The submission data object to house the data for this component.\n * @param {HTMLElement} before - A DOM element to insert this element before.\n * @param {boolean} [noAdd] - A possibly extraneous boolean flag.\n * @returns {any} - The created component instance.\n */\n addComponent(component, data = null, before = null, noAdd = false) {\n data = data || this.data;\n this.components = this.components || [];\n component = this.hook('addComponent', component, data, before, noAdd);\n const comp = this.createComponent(component, this.options, data, before ? before : null);\n if (noAdd) {\n return comp;\n }\n return comp;\n }\n beforeFocus() {\n if (this.parent && 'beforeFocus' in this.parent) {\n this.parent.beforeFocus(this);\n }\n }\n render(children) {\n // If already rendering, don't re-render.\n return super.render(children || this.renderTemplate(this.templateName, {\n children: !this.visible ? '' : this.renderComponents(),\n nestedKey: this.nestedKey,\n collapsed: this.options.pdf ? false : this.collapsed,\n }));\n }\n renderComponents(components) {\n components = components || this.getComponents();\n const children = components.map(component => component.render());\n return this.renderTemplate('components', {\n children,\n components,\n });\n }\n attach(element) {\n const superPromise = super.attach(element);\n this.loadRefs(element, {\n header: 'single',\n collapsed: this.collapsed,\n [this.nestedKey]: 'single',\n messageContainer: 'single-scope',\n });\n let childPromise = Promise.resolve();\n if (this.refs[this.nestedKey]) {\n childPromise = this.attachComponents(this.refs[this.nestedKey]);\n }\n if (!this.visible) {\n this.attachComponentsLogic();\n }\n if (this.component.collapsible && this.refs.header) {\n this.addEventListener(this.refs.header, 'click', () => {\n this.collapsed = !this.collapsed;\n });\n this.addEventListener(this.refs.header, 'keydown', (e) => {\n if (e.keyCode === 13 || e.keyCode === 32) {\n e.preventDefault();\n this.collapsed = !this.collapsed;\n }\n });\n }\n return Promise.all([\n superPromise,\n childPromise,\n ]);\n }\n /**\n * Attach the logic to the components.\n * @param {import('@formio/core').Component[]} components - The components to attach logic to.\n */\n attachComponentsLogic(components) {\n components = components || this.components;\n lodash_1.default.each(components, (comp) => {\n comp.attachLogic();\n if (lodash_1.default.isFunction(comp.attachComponentsLogic)) {\n comp.attachComponentsLogic();\n }\n });\n }\n attachComponents(element, components, container) {\n components = components || this.components;\n container = container || this.component.components;\n element = this.hook('attachComponents', element, components, container, this);\n if (!element) {\n // Return a non-resolving promise.\n return (new Promise(() => { }));\n }\n let index = 0;\n const promises = [];\n Array.prototype.slice.call(element.children).forEach(child => {\n if (!child.getAttribute('data-noattach') && components[index]) {\n promises.push(components[index].attach(child));\n index++;\n }\n });\n return Promise.all(promises);\n }\n /**\n * Remove a component from the components array and from the children object\n * @param {import('@formio/core').Component} component - The component to remove from the components.\n * @param {import('@formio/core').Component[]} components - An array of components to remove this component from.\n * @param {boolean} [all] - If set to TRUE will cascade remove all components.\n */\n removeComponent(component, components, all = false) {\n components = components || this.components;\n component.destroy(all);\n lodash_1.default.remove(components, { id: component.id });\n if (this.componentsMap[component.path]) {\n delete this.componentsMap[component.path];\n }\n }\n /**\n * Removes a component provided the API key of that component.\n * @param {string} key - The API key of the component to remove.\n * @param {Function} fn - Called once the component is removed.\n * @returns {null|void} - Returns nothing if the component is not found.\n */\n removeComponentByKey(key, fn = null) {\n const comp = this.getComponent(key, (component, components) => {\n this.removeComponent(component, components);\n if (fn) {\n fn(component, components);\n }\n });\n if (!comp) {\n if (fn) {\n fn(null);\n }\n return null;\n }\n }\n /**\n * Removes a component provided the Id of the component.\n * @param {string} id - The Id of the component to remove.\n * @param {Function} fn - Called when the component is removed.\n * @returns {null|void} - Returns nothing if the component is not found.\n */\n removeComponentById(id, fn = null) {\n const comp = this.getComponentById(id, (component, components) => {\n this.removeComponent(component, components);\n if (fn) {\n fn(component, components);\n }\n });\n if (!comp) {\n if (fn) {\n fn(null);\n }\n return null;\n }\n }\n updateValue(value, flags = {}) {\n return this.components.reduce((changed, comp) => {\n return comp.updateValue(null, flags) || changed;\n }, super.updateValue(value, flags));\n }\n shouldSkipValidation(data, row, flags) {\n // Nested components with no input should not be validated.\n if (!this.component.input) {\n return true;\n }\n else {\n return super.shouldSkipValidation(data, row, flags);\n }\n }\n checkData(data, flags, row, components) {\n if (this.builderMode) {\n return true;\n }\n data = data || this.rootValue;\n flags = flags || {};\n row = row || this.data;\n components = components && lodash_1.default.isArray(components) ? components : this.getComponents();\n super.checkData(data, Object.assign({}, flags), row);\n components.forEach((comp) => comp.checkData(data, Object.assign({}, flags), row));\n }\n checkConditions(data, flags, row) {\n // check conditions of parent component first, because it may influence on visibility of it's children\n const check = super.checkConditions(data, flags, row);\n //row data of parent component not always corresponds to row of nested components, use comp.data as row data for children instead\n this.getComponents().forEach(comp => comp.checkConditions(data, flags, comp.data));\n return check;\n }\n clearOnHide(show) {\n super.clearOnHide(show);\n this.getComponents().forEach(component => component.clearOnHide(show));\n }\n /**\n * Allow components to hook into the next page trigger to perform their own logic.\n * @param {Function} next - The callback to continue to the next page.\n * @returns {Promise} - A promise when the page has been processed.\n */\n beforePage(next) {\n return Promise.all(this.getComponents().map((comp) => comp.beforePage(next)));\n }\n /**\n * Allow components to hook into the submission to provide their own async data.\n * @returns {Promise} - Returns a promise when the constituent beforeSubmit functions are complete.\n */\n beforeSubmit() {\n return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));\n }\n calculateValue(data, flags, row) {\n // Do not iterate into children and calculateValues if this nested component is conditionally hidden.\n if (this.conditionallyHidden()) {\n return false;\n }\n return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));\n }\n isLastPage() {\n return this.pages.length - 1 === this.page;\n }\n isValid(data, dirty) {\n return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));\n }\n validationProcessor({ scope, data, row, instance, paths }, flags) {\n var _a;\n const { dirty } = flags;\n if (this.root.hasExtraPages && this.page !== this.root.page) {\n instance = ((_a = this.componentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(paths.dataPath))\n ? this.componentsMap[paths.dataPath]\n : this.getComponent(paths.dataPath);\n }\n if (!instance) {\n return;\n }\n instance.checkComponentValidity(data, dirty, row, flags, scope.errors);\n if (instance.processOwnValidation) {\n scope.noRecurse = true;\n }\n }\n /**\n * Perform a validation on all child components of this nested component.\n * @param {import('@formio/core').Component[]} components - The components to validate.\n * @param {import('@formio/core').DataObject} data - The data to validate.\n * @param {object} flags - The flags to use when validating.\n * @returns {Promise<Array>|Array} - The errors if any exist.\n */\n validateComponents(components = null, data = null, flags = {}) {\n components = components || this.component.components;\n data = data || this.rootValue;\n const { async, dirty, process } = flags;\n const validationProcessorProcess = (context) => this.validationProcessor(context, flags);\n const checkModalProcessorProcess = ({ instance, component, components }) => {\n // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.\n if (instance &&\n instance.parent &&\n (component === components[components.length - 1]) &&\n instance.parent.componentModal) {\n instance.parent.checkModal(instance.parent.childErrors, dirty);\n }\n };\n const processorContext = {\n process: process || 'unknown',\n components,\n instances: this.componentsMap,\n data: data,\n local: !!flags.local,\n scope: { errors: [] },\n parent: this.component,\n parentPaths: this.paths,\n processors: [\n {\n process: validationProcessorProcess,\n processSync: validationProcessorProcess\n },\n {\n process: checkModalProcessorProcess,\n processSync: checkModalProcessorProcess\n }\n ]\n };\n return async ? (0, process_1.process)(processorContext).then((scope) => scope.errors) : (0, process_1.processSync)(processorContext).errors;\n }\n /**\n * Validate a nested component with data, or its own internal data.\n * @param {import('@formio/core').DataObject} data - The data to validate.\n * @param {object} flags - The flags to use when validating.\n * @returns {Array} - The errors if any exist.\n */\n validate(data = null, flags = {}) {\n data = data || this.rootValue;\n return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);\n }\n checkComponentValidity(data = null, dirty = false, row = null, flags = {}, allErrors = []) {\n this.childErrors = [];\n return super.checkComponentValidity(data, dirty, row, flags, allErrors);\n }\n /**\n * Checks the validity of the component.\n * @param {*} data - The data to check if the component is valid.\n * @param {boolean} dirty - If the component is dirty.\n * @param {*} row - The contextual row data for this component.\n * @param {boolean} silentCheck - If the check should be silent and not set the error messages.\n * @param {Array<any>} childErrors - An array of all errors that have occured so that it can be appended when another one occurs here.\n * @returns {boolean} - TRUE if the component is valid.\n */\n checkValidity(data = null, dirty = false, row = null, silentCheck = false, childErrors = []) {\n childErrors.push(...this.validate(data, { dirty, silentCheck }));\n return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;\n }\n checkAsyncValidity(data = null, dirty = false, row = null, silentCheck = false) {\n return this.ready.then(() => {\n return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {\n return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {\n return valid && childErrors.length === 0;\n });\n });\n });\n }\n setPristine(pristine) {\n super.setPristine(pristine);\n this.getComponents().forEach((comp) => comp.setPristine(pristine));\n }\n get isPristine() {\n return this.pristine && this.getComponents().every((c) => c.isPristine);\n }\n get isDirty() {\n return this.dirty && this.getComponents().every((c) => c.isDirty);\n }\n detach() {\n this.components.forEach(component => {\n component.detach();\n });\n super.detach();\n }\n clear() {\n this.components.forEach(component => {\n component.clear();\n });\n super.clear();\n }\n destroy(all = false) {\n this.destroyComponents(all);\n super.destroy(all);\n }\n destroyComponents(all = false) {\n const components = this.getComponents().slice();\n components.forEach((comp) => this.removeComponent(comp, this.components, all));\n this.components = [];\n }\n get visibleErrors() {\n return this.getComponents().reduce((errors, comp) => errors.concat(comp.visibleErrors || []), super.visibleErrors);\n }\n get errors() {\n const thisErrors = super.errors;\n return this.getComponents()\n .reduce((errors, comp) => errors.concat(comp.errors || []), thisErrors)\n .filter(err => err.level !== 'hidden');\n }\n getValue() {\n return this.data;\n }\n resetValue() {\n super.resetValue();\n this.getComponents().forEach((comp) => comp.resetValue());\n this.setPristine(true);\n }\n get dataReady() {\n return Promise.all(this.getComponents().map((component) => component.dataReady));\n }\n setNestedValue(component, value, flags = {}) {\n component._data = this.componentContext(component);\n if (component.type === 'button') {\n return false;\n }\n if (component.type === 'components') {\n if (component.tree && component.hasValue(value)) {\n return component.setValue(lodash_1.default.get(value, component.key), flags);\n }\n return component.setValue(value, flags);\n }\n else if (value && component.hasValue(value)) {\n return component.setValue(lodash_1.default.get(value, component.key), flags);\n }\n else if ((!this.rootPristine || component.visible) && component.shouldAddDefaultValue) {\n flags.noValidate = !flags.dirty;\n flags.resetValue = true;\n return component.setValue(component.defaultValue, flags);\n }\n }\n setValue(value, flags = {}) {\n if (!value) {\n return false;\n }\n return this.getComponents().reduce((changed, component) => {\n return this.setNestedValue(component, value, flags, changed) || changed;\n }, false);\n }\n get lazyLoad() {\n var _a;\n return (_a = this.component.lazyLoad) !== null && _a !== void 0 ? _a : false;\n }\n}\nexports[\"default\"] = NestedComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/_classes/nested/NestedComponent.js?");
|
5011
5011
|
|
5012
5012
|
/***/ }),
|
5013
5013
|
|
@@ -5128,7 +5128,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
5128
5128
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
5129
5129
|
|
5130
5130
|
"use strict";
|
5131
|
-
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 NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass DataGridComponent extends NestedArrayComponent_1.default {\n static schema(...extend) {\n return NestedArrayComponent_1.default.schema({\n label: 'Data Grid',\n key: 'dataGrid',\n type: 'datagrid',\n clearOnHide: true,\n input: true,\n tree: true,\n components: []\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Data Grid',\n icon: 'th',\n group: 'data',\n documentation: '/userguide/form-building/data-components#data-grid',\n showPreview: false,\n weight: 30,\n schema: DataGridComponent.schema()\n };\n }\n constructor(...args) {\n super(...args);\n this.type = 'datagrid';\n this.tabIndex = 0;\n }\n init() {\n this.components = this.components || [];\n // Add new values based on minLength.\n this.rows = [];\n this.columns = [...this.component.components];\n if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {\n this.createRows(true);\n }\n if (this.allowReorder) {\n this.dragulaReady = this.getDragula();\n }\n this.visibleColumns = {};\n this.prevHasAddButton = this.hasAddButton();\n this.checkColumns();\n }\n get dataValue() {\n const dataValue = super.dataValue;\n if (!dataValue || !Array.isArray(dataValue)) {\n return this.emptyValue;\n }\n return dataValue;\n }\n set dataValue(value) {\n super.dataValue = value;\n }\n get defaultSchema() {\n return DataGridComponent.schema();\n }\n get initEmpty() {\n return this.component.initEmpty || this.component.noFirstRow;\n }\n get initRows() {\n return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;\n }\n get emptyValue() {\n return this.initEmpty ? [] : [{}];\n }\n get addAnotherPosition() {\n return lodash_1.default.get(this.component, 'addAnotherPosition', 'bottom');\n }\n get minLength() {\n if (this.hasRowGroups()) {\n return lodash_1.default.sum(this.getGroupSizes());\n }\n else {\n return lodash_1.default.get(this.component, 'validate.minLength', 0);\n }\n }\n get defaultValue() {\n const isBuilderMode = this.builderMode;\n const isEmptyInit = this.initEmpty;\n // Ensure we have one and only one row in builder mode.\n if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {\n return isEmptyInit && !isBuilderMode ? [] : [{}];\n }\n const value = super.defaultValue;\n let defaultValue;\n if (Array.isArray(value)) {\n defaultValue = value;\n }\n else if (value && (typeof value === 'object')) {\n defaultValue = [value];\n }\n else {\n defaultValue = this.emptyValue;\n }\n for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {\n defaultValue.push({});\n }\n return defaultValue;\n }\n set disabled(disabled) {\n super.disabled = disabled;\n lodash_1.default.each(this.refs[`${this.datagridKey}-addRow`], (button) => {\n button.disabled = disabled;\n });\n lodash_1.default.each(this.refs[`${this.datagridKey}-removeRow`], (button) => {\n button.disabled = disabled;\n });\n }\n get disabled() {\n return super.disabled;\n }\n get datagridKey() {\n return `datagrid-${this.key}`;\n }\n get allowReorder() {\n return !this.options.readOnly && lodash_1.default.get(this.component, 'reorder', false);\n }\n get iteratableRows() {\n return this.rows.map((row, index) => ({\n components: row,\n data: this.dataValue[index],\n }));\n }\n isEmpty(value = this.dataValue) {\n var _a;\n const isEmpty = super.isEmpty(value);\n if ((_a = this.components) === null || _a === void 0 ? void 0 : _a.length) {\n return this.components.reduce((isEmpty, component) => {\n return isEmpty && component.isEmpty();\n }, true);\n }\n return isEmpty;\n }\n /**\n * Split rows into chunks.\n * @param {number[]} groups - array of numbers where each item is size of group\n * @param {Array<T>} rows - rows collection\n * @returns {Array<T[]>} - The chunked rows\n */\n getRowChunks(groups, rows) {\n const [, chunks] = groups.reduce(([startIndex, acc], size) => {\n const endIndex = startIndex + size;\n return [endIndex, [...acc, [startIndex, endIndex]]];\n }, [0, []]);\n return chunks.map(range => lodash_1.default.slice(rows, ...range));\n }\n /**\n * Create groups object.\n * Each key in object represents index of first row in group.\n * @returns {object} - The groups object.\n */\n getGroups() {\n const groups = lodash_1.default.get(this.component, 'rowGroups', []);\n const sizes = lodash_1.default.map(groups, 'numberOfRows').slice(0, -1);\n const indexes = sizes.reduce((groupIndexes, size) => {\n const last = groupIndexes[groupIndexes.length - 1];\n return groupIndexes.concat(last + size);\n }, [0]);\n return groups.reduce((gidxs, group, idx) => {\n return Object.assign(Object.assign({}, gidxs), { [indexes[idx]]: group });\n }, {});\n }\n /**\n * Get group sizes.\n * @returns {number[]} - The array of group sizes.\n */\n getGroupSizes() {\n return lodash_1.default.map(lodash_1.default.get(this.component, 'rowGroups', []), 'numberOfRows');\n }\n hasRowGroups() {\n return lodash_1.default.get(this, 'component.enableRowGroups', false) && !this.builderMode;\n }\n totalRowsNumber(groups) {\n return lodash_1.default.sum(lodash_1.default.map(groups, 'numberOfRows'));\n }\n setStaticValue(n) {\n this.dataValue = lodash_1.default.range(n).map(() => ({}));\n }\n hasExtraColumn() {\n return (this.hasRemoveButtons() || this.canAddColumn);\n }\n hasRemoveButtons() {\n return !this.builderMode && !this.component.disableAddingRemovingRows &&\n !this.options.readOnly &&\n !this.disabled &&\n this.fullMode &&\n (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n }\n hasTopSubmit() {\n return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);\n }\n hasBottomSubmit() {\n return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);\n }\n get canAddColumn() {\n return this.builderMode && !this.options.design;\n }\n render() {\n const columns = this.getColumns();\n let columnExtra = 0;\n const hasRemoveButtons = this.hasRemoveButtons();\n if (this.component.reorder) {\n columnExtra++;\n }\n if (hasRemoveButtons) {\n columnExtra++;\n }\n if (this.canAddColumn) {\n columnExtra++;\n }\n const colWidth = Math.floor(12 / (columns.length + columnExtra));\n return super.render(this.renderTemplate('datagrid', {\n rows: this.getRows(),\n columns: columns,\n groups: this.hasRowGroups() ? this.getGroups() : [],\n visibleColumns: this.visibleColumns,\n hasToggle: lodash_1.default.get(this, 'component.groupToggle', false),\n hasHeader: this.hasHeader(),\n hasExtraColumn: this.hasExtraColumn(),\n hasAddButton: this.hasAddButton(),\n hasRemoveButtons,\n hasTopSubmit: this.hasTopSubmit(),\n hasBottomSubmit: this.hasBottomSubmit(),\n hasGroups: this.hasRowGroups(),\n numColumns: columns.length + (this.hasExtraColumn() ? 1 : 0),\n datagridKey: this.datagridKey,\n allowReorder: this.allowReorder,\n builder: this.builderMode,\n canAddColumn: this.canAddColumn,\n tabIndex: this.tabIndex,\n placeholder: this.renderTemplate('builderPlaceholder', {\n position: this.componentComponents.length,\n }),\n colWidth: colWidth.toString()\n }));\n }\n getRows() {\n return this.rows.map(row => {\n const components = {};\n lodash_1.default.each(row, (col, key) => {\n components[key] = col.render();\n });\n return components;\n });\n }\n getColumns() {\n return this.columns.filter((comp) => {\n return (!this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key]);\n });\n }\n hasHeader() {\n return this.component.components.reduce((hasHeader, col) => {\n // If any of the components has a title and it isn't hidden, display the header.\n return hasHeader || ((col.label || col.title) && !col.hideLabel);\n }, false);\n }\n attach(element) {\n this.loadRefs(element, {\n [`${this.datagridKey}-row`]: 'multiple',\n [`${this.datagridKey}-tbody`]: 'single',\n [`${this.datagridKey}-addRow`]: 'multiple',\n [`${this.datagridKey}-removeRow`]: 'multiple',\n [`${this.datagridKey}-group-header`]: 'multiple',\n [this.datagridKey]: 'multiple',\n });\n if (this.allowReorder) {\n this.refs[`${this.datagridKey}-row`].forEach((row, index) => {\n row.dragInfo = { index };\n });\n this.dragulaReady.then((dragula) => {\n // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous\n // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).\n // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must\n // be saved in this.dragula and have its container contents reset if it exists\n if (this.dragula && this.dragula.containers) {\n this.dragula.containers = [];\n }\n this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {\n moves: (_draggedElement, _oldParent, clickedElement) => {\n const clickedElementKey = clickedElement.getAttribute('data-key');\n const oldParentKey = _oldParent.getAttribute('data-key');\n //Check if the clicked button belongs to that container, if false, it belongs to the nested container\n if (oldParentKey === clickedElementKey) {\n return clickedElement.classList.contains('formio-drag-button');\n }\n }\n }).on('drop', this.onReorder.bind(this))\n .on('cloned', this.onCloned.bind(this));\n });\n }\n this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {\n this.addEventListener(addButton, 'click', this.addRow.bind(this));\n });\n this.refs[`${this.datagridKey}-removeRow`].forEach((removeButton, index) => {\n this.addEventListener(removeButton, 'click', this.removeRow.bind(this, index));\n });\n if (this.hasRowGroups()) {\n this.refs.chunks = this.getRowChunks(this.getGroupSizes(), this.refs[`${this.datagridKey}-row`]);\n this.refs[`${this.datagridKey}-group-header`].forEach((header, index) => {\n this.addEventListener(header, 'click', () => this.toggleGroup(header, index));\n });\n }\n const columns = this.getColumns();\n const rowLength = columns.length;\n this.rows.forEach((row, rowIndex) => {\n let columnIndex = 0;\n columns.forEach((col) => {\n this.attachComponents(this.refs[this.datagridKey][(rowIndex * rowLength) + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());\n columnIndex++;\n });\n });\n return super.attach(element);\n }\n getComponentsContainer() {\n return this.component.components;\n }\n /**\n * Reorder values in array based on the old and new position\n * @param {any} valuesArr - An array of values.\n * @param {number} oldPosition - The index of the value in array before reordering.\n * @param {number} newPosition - The index of the value in array after reordering.\n * @param {boolean|any} movedBelow - Whether or not the value is moved below.\n * @returns {void}\n */\n reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {\n if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {\n return;\n }\n const draggedRowData = valuesArr[oldPosition];\n //insert element at new position\n valuesArr.splice(newPosition, 0, draggedRowData);\n //remove element from old position (if was moved above, after insertion it's at +1 index)\n valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n }\n onReorder(element, _target, _source, sibling) {\n if (!element.dragInfo || (sibling && !sibling.dragInfo)) {\n console.warn(this.t('noDragInfoError'));\n return;\n }\n const oldPosition = element.dragInfo.index;\n //should drop at next sibling position; no next sibling means drop to last position\n const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;\n const movedBelow = newPosition > oldPosition;\n const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);\n this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);\n //reorder select data\n this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);\n // When components are reordered we need to set the dataGrid and form pristine properties to false\n this.root.pristine = false;\n this.pristine = false;\n //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)\n this.setValue(dataValue, { isReordered: true });\n this.rebuild();\n }\n onCloned(el, original) {\n if (el && el.children && original && original.children) {\n lodash_1.default.each(original.children, (child, index) => {\n const styles = getComputedStyle(child, null);\n if (styles.cssText !== '') {\n el.children[index].style.cssText = styles.cssText;\n }\n else {\n const cssText = Object.values(styles).reduce((css, propertyName) => {\n return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;\n }, '');\n el.children[index].style.cssText = cssText;\n }\n });\n }\n }\n focusOnNewRowElement(row) {\n Object.keys(row).find((key) => {\n const element = row[key].element;\n if (element) {\n const focusableElements = (0, utils_1.getFocusableElements)(element);\n if (focusableElements && focusableElements[0]) {\n focusableElements[0].focus();\n return true;\n }\n }\n return false;\n });\n }\n addRow() {\n const index = this.rows.length;\n // Handle length mismatch between rows and dataValue\n if (this.dataValue.length === index) {\n this.dataValue.push({});\n }\n let row;\n const dataValue = this.dataValue;\n const defaultValue = this.defaultValue;\n if (this.initEmpty && defaultValue[index]) {\n row = defaultValue[index];\n dataValue[index] = row;\n }\n else {\n row = dataValue[index];\n }\n this.rows[index] = this.createRowComponents(row, index);\n this.emit('dataGridAddRow', {\n component: this.component,\n row\n });\n this.checkConditions();\n this.triggerChange({ modified: true });\n this.redraw().then(() => {\n this.focusOnNewRowElement(this.rows[index]);\n });\n }\n updateComponentsRowIndex(components, rowIndex) {\n components.forEach((component, colIndex) => {\n var _a;\n if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {\n const newName = `[${this.key}][${rowIndex}]`;\n component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);\n }\n component.rowIndex = rowIndex;\n component.row = `${rowIndex}-${colIndex}`;\n });\n }\n updateRowsComponents(rowIndex) {\n this.rows.slice(rowIndex).forEach((row, index) => {\n this.updateComponentsRowIndex(Object.values(row), rowIndex + index);\n });\n }\n removeRow(index) {\n const makeEmpty = index === 0 && this.rows.length === 1;\n const flags = { isReordered: !makeEmpty, resetValue: makeEmpty, modified: true };\n this.splice(index, flags);\n this.emit('dataGridDeleteRow', { index });\n const [row] = this.rows.splice(index, 1);\n this.removeSubmissionMetadataRow(index);\n this.removeRowComponents(row);\n this.updateRowsComponents(index);\n this.setValue(this.dataValue, flags);\n this.redraw();\n }\n removeRowComponents(row) {\n lodash_1.default.each(row, (component) => this.removeComponent(component));\n }\n getRowValues() {\n return this.dataValue;\n }\n setRowComponentsData(rowIndex, rowData) {\n lodash_1.default.each(this.rows[rowIndex], (component) => {\n component.data = rowData;\n });\n }\n createRows(init, rebuild) {\n let added = false;\n const rowValues = this.getRowValues();\n // Create any missing rows.\n rowValues.forEach((row, index) => {\n if (!rebuild && this.rows[index]) {\n this.setRowComponentsData(index, row);\n }\n else {\n if (this.rows[index]) {\n this.removeRowComponents(this.rows[index]);\n }\n this.rows[index] = this.createRowComponents(row, index);\n added = true;\n }\n });\n // Delete any extra rows.\n const removedRows = this.rows.splice(rowValues.length);\n const removed = !!removedRows.length;\n // Delete components of extra rows (to make sure that this.components contain only components of exisiting rows)\n if (removed) {\n removedRows.forEach(row => this.removeRowComponents(row));\n }\n if (!init && (added || removed)) {\n this.redraw();\n }\n return added;\n }\n createRowComponents(row, rowIndex) {\n const components = {};\n this.tabIndex = 0;\n this.component.components.map((col, colIndex) => {\n const options = lodash_1.default.clone(this.options);\n options.name += `[${rowIndex}]`;\n options.row = `${rowIndex}-${colIndex}`;\n options.rowIndex = rowIndex;\n options.onChange = (flags, changed, modified) => {\n this.triggerChange({ modified });\n };\n let columnComponent;\n if (this.builderMode) {\n col.id = col.id + rowIndex;\n columnComponent = col;\n }\n else {\n columnComponent = Object.assign(Object.assign({}, col), { id: (col.id + rowIndex) });\n }\n const component = this.createComponent(columnComponent, options, row);\n component.parentDisabled = !!this.disabled;\n component.rowIndex = rowIndex;\n component.inDataGrid = true;\n if (columnComponent.tabindex &&\n parseInt(columnComponent.tabindex) > this.tabIndex) {\n this.tabIndex = parseInt(columnComponent.tabindex);\n }\n components[col.key] = component;\n });\n return components;\n }\n checkColumns(data, flags = {}) {\n data = data || this.rootValue;\n let show = false;\n if (!this.rows || !this.rows.length) {\n return { rebuild: false, show: false };\n }\n if (this.builderMode) {\n return { rebuild: false, show: true };\n }\n const visibility = {};\n let logicRebuild = false;\n const dataValue = this.dataValue;\n this.rows.forEach((row, rowIndex) => {\n lodash_1.default.each(row, (col, key) => {\n if (col && (typeof col.checkConditions === 'function')) {\n const firstRowCheck = visibility[key] === undefined;\n visibility[key] = !!visibility[key] ||\n (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');\n if (col.component.logic && firstRowCheck) {\n const compIndex = lodash_1.default.findIndex(this.columns, ['key', key]);\n const equalColumns = lodash_1.default.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {\n // Don't compare columns by their auto-generated ids.\n if (key === 'id') {\n return true;\n }\n });\n if (!equalColumns) {\n logicRebuild = true;\n this.columns[compIndex] = col.component;\n }\n }\n }\n });\n });\n const rebuild = !lodash_1.default.isEqual(visibility, this.visibleColumns) || logicRebuild;\n lodash_1.default.each(visibility, (col) => {\n show |= col;\n });\n this.visibleColumns = visibility;\n return { rebuild, show };\n }\n checkComponentConditions(data, flags, row) {\n const isVisible = this.visible;\n // If table isn't visible, don't bother calculating columns.\n if (!super.checkComponentConditions(data, flags, row)) {\n return false;\n }\n const { rebuild, show } = this.checkColumns(data, flags);\n // Check if a rebuild is needed or the visibility changes.\n if (rebuild || !isVisible) {\n this.createRows(false, rebuild);\n }\n // Return if this table should show.\n return show;\n }\n setValue(value, flags = {}) {\n if (!value) {\n this.dataValue = this.defaultValue;\n this.createRows();\n return false;\n }\n if (!Array.isArray(value)) {\n if (typeof value === 'object') {\n value = [value];\n }\n else {\n this.createRows();\n value = [{}];\n }\n }\n // Make sure we always have at least one row.\n // NOTE: Removing this will break \"Public Configurations\" in portal. ;)\n if (value && !value.length && !this.initEmpty) {\n value.push({});\n }\n const isSettingSubmission = flags.fromSubmission && !lodash_1.default.isEqual(value, this.emptyValue);\n const changed = this.hasChanged(value, this.dataValue);\n this.dataValue = value;\n if (this.initRows || isSettingSubmission ||\n (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {\n if (!this.createRows() && changed) {\n this.redraw();\n }\n }\n if (this.componentModal && isSettingSubmission) {\n this.componentModal.setValue(value);\n }\n this.rows.forEach((row, rowIndex) => {\n if (value.length <= rowIndex) {\n return;\n }\n lodash_1.default.each(row, (col) => {\n col.rowIndex = rowIndex;\n this.setNestedValue(col, value[rowIndex], flags);\n });\n });\n this.updateOnChange(flags, changed);\n return changed;\n }\n restoreComponentsContext() {\n this.rows.forEach((row, index) => lodash_1.default.forIn(row, (component) => component.data = this.dataValue[index]));\n }\n toggleGroup(element, index) {\n element.classList.toggle('collapsed');\n lodash_1.default.each(this.refs.chunks[index], row => {\n row.classList.toggle('hidden');\n });\n }\n}\nexports[\"default\"] = DataGridComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datagrid/DataGrid.js?");
|
5131
|
+
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 NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nclass DataGridComponent extends NestedArrayComponent_1.default {\n static schema(...extend) {\n return NestedArrayComponent_1.default.schema({\n label: 'Data Grid',\n key: 'dataGrid',\n type: 'datagrid',\n clearOnHide: true,\n input: true,\n tree: true,\n components: []\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Data Grid',\n icon: 'th',\n group: 'data',\n documentation: '/userguide/form-building/data-components#data-grid',\n showPreview: false,\n weight: 30,\n schema: DataGridComponent.schema()\n };\n }\n constructor(...args) {\n super(...args);\n this.type = 'datagrid';\n this.tabIndex = 0;\n }\n init() {\n this.components = this.components || [];\n // Add new values based on minLength.\n this.rows = [];\n this.columns = [...this.component.components];\n if (this.initRows || !lodash_1.default.isEqual(this.dataValue, this.emptyValue)) {\n this.createRows(true);\n }\n if (this.allowReorder) {\n this.dragulaReady = this.getDragula();\n }\n this.visibleColumns = {};\n this.prevHasAddButton = this.hasAddButton();\n this.checkColumns();\n }\n get dataValue() {\n const dataValue = super.dataValue;\n if (!dataValue || !Array.isArray(dataValue)) {\n return this.emptyValue;\n }\n return dataValue;\n }\n set dataValue(value) {\n super.dataValue = value;\n }\n get defaultSchema() {\n return DataGridComponent.schema();\n }\n get initEmpty() {\n return this.component.initEmpty || this.component.noFirstRow;\n }\n get initRows() {\n return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;\n }\n get emptyValue() {\n return this.initEmpty ? [] : [{}];\n }\n get addAnotherPosition() {\n return lodash_1.default.get(this.component, 'addAnotherPosition', 'bottom');\n }\n get minLength() {\n if (this.hasRowGroups()) {\n return lodash_1.default.sum(this.getGroupSizes());\n }\n else {\n return lodash_1.default.get(this.component, 'validate.minLength', 0);\n }\n }\n get defaultValue() {\n const isBuilderMode = this.builderMode;\n const isEmptyInit = this.initEmpty;\n // Ensure we have one and only one row in builder mode.\n if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {\n return isEmptyInit && !isBuilderMode ? [] : [{}];\n }\n const value = super.defaultValue;\n let defaultValue;\n if (Array.isArray(value)) {\n defaultValue = value;\n }\n else if (value && (typeof value === 'object')) {\n defaultValue = [value];\n }\n else {\n defaultValue = this.emptyValue;\n }\n for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {\n defaultValue.push({});\n }\n return defaultValue;\n }\n set disabled(disabled) {\n super.disabled = disabled;\n lodash_1.default.each(this.refs[`${this.datagridKey}-addRow`], (button) => {\n button.disabled = disabled;\n });\n lodash_1.default.each(this.refs[`${this.datagridKey}-removeRow`], (button) => {\n button.disabled = disabled;\n });\n }\n get disabled() {\n return super.disabled;\n }\n get datagridKey() {\n return `datagrid-${this.key}`;\n }\n get allowReorder() {\n return !this.options.readOnly && lodash_1.default.get(this.component, 'reorder', false);\n }\n get iteratableRows() {\n return this.rows.map((row, index) => ({\n components: row,\n data: this.dataValue[index],\n }));\n }\n isEmpty(value = this.dataValue) {\n var _a;\n const isEmpty = super.isEmpty(value);\n if ((_a = this.components) === null || _a === void 0 ? void 0 : _a.length) {\n return this.components.reduce((isEmpty, component) => {\n return isEmpty && component.isEmpty();\n }, true);\n }\n return isEmpty;\n }\n /**\n * Split rows into chunks.\n * @param {number[]} groups - array of numbers where each item is size of group\n * @param {Array<T>} rows - rows collection\n * @returns {Array<T[]>} - The chunked rows\n */\n getRowChunks(groups, rows) {\n const [, chunks] = groups.reduce(([startIndex, acc], size) => {\n const endIndex = startIndex + size;\n return [endIndex, [...acc, [startIndex, endIndex]]];\n }, [0, []]);\n return chunks.map(range => lodash_1.default.slice(rows, ...range));\n }\n /**\n * Create groups object.\n * Each key in object represents index of first row in group.\n * @returns {object} - The groups object.\n */\n getGroups() {\n const groups = lodash_1.default.get(this.component, 'rowGroups', []);\n const sizes = lodash_1.default.map(groups, 'numberOfRows').slice(0, -1);\n const indexes = sizes.reduce((groupIndexes, size) => {\n const last = groupIndexes[groupIndexes.length - 1];\n return groupIndexes.concat(last + size);\n }, [0]);\n return groups.reduce((gidxs, group, idx) => {\n return Object.assign(Object.assign({}, gidxs), { [indexes[idx]]: group });\n }, {});\n }\n /**\n * Get group sizes.\n * @returns {number[]} - The array of group sizes.\n */\n getGroupSizes() {\n return lodash_1.default.map(lodash_1.default.get(this.component, 'rowGroups', []), 'numberOfRows');\n }\n hasRowGroups() {\n return lodash_1.default.get(this, 'component.enableRowGroups', false) && !this.builderMode;\n }\n totalRowsNumber(groups) {\n return lodash_1.default.sum(lodash_1.default.map(groups, 'numberOfRows'));\n }\n setStaticValue(n) {\n this.dataValue = lodash_1.default.range(n).map(() => ({}));\n }\n hasExtraColumn() {\n return (this.hasRemoveButtons() || this.canAddColumn);\n }\n hasRemoveButtons() {\n return !this.builderMode && !this.component.disableAddingRemovingRows &&\n !this.options.readOnly &&\n !this.disabled &&\n this.fullMode &&\n (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n }\n hasTopSubmit() {\n return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);\n }\n hasBottomSubmit() {\n return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);\n }\n get canAddColumn() {\n return this.builderMode && !this.options.design;\n }\n render() {\n const columns = this.getColumns();\n let columnExtra = 0;\n const hasRemoveButtons = this.hasRemoveButtons();\n if (this.component.reorder) {\n columnExtra++;\n }\n if (hasRemoveButtons) {\n columnExtra++;\n }\n if (this.canAddColumn) {\n columnExtra++;\n }\n const colWidth = Math.floor(12 / (columns.length + columnExtra));\n return super.render(this.renderTemplate('datagrid', {\n rows: this.getRows(),\n columns: columns,\n groups: this.hasRowGroups() ? this.getGroups() : [],\n visibleColumns: this.visibleColumns,\n hasToggle: lodash_1.default.get(this, 'component.groupToggle', false),\n hasHeader: this.hasHeader(),\n hasExtraColumn: this.hasExtraColumn(),\n hasAddButton: this.hasAddButton(),\n hasRemoveButtons,\n hasTopSubmit: this.hasTopSubmit(),\n hasBottomSubmit: this.hasBottomSubmit(),\n hasGroups: this.hasRowGroups(),\n numColumns: columns.length + (this.hasExtraColumn() ? 1 : 0),\n datagridKey: this.datagridKey,\n allowReorder: this.allowReorder,\n builder: this.builderMode,\n canAddColumn: this.canAddColumn,\n tabIndex: this.tabIndex,\n placeholder: this.renderTemplate('builderPlaceholder', {\n position: this.componentComponents.length,\n }),\n colWidth: colWidth.toString()\n }));\n }\n getRows() {\n return this.rows.map(row => {\n const components = {};\n lodash_1.default.each(row, (col, key) => {\n components[key] = col.render();\n });\n return components;\n });\n }\n getColumns() {\n return this.columns.filter((comp) => {\n return (!this.visibleColumns.hasOwnProperty(comp.key) || this.visibleColumns[comp.key]);\n });\n }\n hasHeader() {\n return this.component.components.reduce((hasHeader, col) => {\n // If any of the components has a title and it isn't hidden, display the header.\n return hasHeader || ((col.label || col.title) && !col.hideLabel);\n }, false);\n }\n attach(element) {\n this.loadRefs(element, {\n [`${this.datagridKey}-row`]: 'multiple',\n [`${this.datagridKey}-tbody`]: 'single',\n [`${this.datagridKey}-addRow`]: 'multiple',\n [`${this.datagridKey}-removeRow`]: 'multiple',\n [`${this.datagridKey}-group-header`]: 'multiple',\n [this.datagridKey]: 'multiple',\n });\n if (this.allowReorder) {\n this.refs[`${this.datagridKey}-row`].forEach((row, index) => {\n row.dragInfo = { index };\n });\n this.dragulaReady.then((dragula) => {\n // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous\n // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).\n // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must\n // be saved in this.dragula and have its container contents reset if it exists\n if (this.dragula && this.dragula.containers) {\n this.dragula.containers = [];\n }\n this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {\n moves: (_draggedElement, _oldParent, clickedElement) => {\n const clickedElementKey = clickedElement.getAttribute('data-key');\n const oldParentKey = _oldParent.getAttribute('data-key');\n //Check if the clicked button belongs to that container, if false, it belongs to the nested container\n if (oldParentKey === clickedElementKey) {\n return clickedElement.classList.contains('formio-drag-button');\n }\n }\n }).on('drop', this.onReorder.bind(this))\n .on('cloned', this.onCloned.bind(this));\n });\n }\n this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {\n this.addEventListener(addButton, 'click', this.addRow.bind(this));\n });\n this.refs[`${this.datagridKey}-removeRow`].forEach((removeButton, index) => {\n this.addEventListener(removeButton, 'click', this.removeRow.bind(this, index));\n });\n if (this.hasRowGroups()) {\n this.refs.chunks = this.getRowChunks(this.getGroupSizes(), this.refs[`${this.datagridKey}-row`]);\n this.refs[`${this.datagridKey}-group-header`].forEach((header, index) => {\n this.addEventListener(header, 'click', () => this.toggleGroup(header, index));\n });\n }\n const columns = this.getColumns();\n const rowLength = columns.length;\n this.rows.forEach((row, rowIndex) => {\n let columnIndex = 0;\n columns.forEach((col) => {\n this.attachComponents(this.refs[this.datagridKey][(rowIndex * rowLength) + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());\n columnIndex++;\n });\n });\n return super.attach(element);\n }\n getComponentsContainer() {\n return this.component.components;\n }\n /**\n * Reorder values in array based on the old and new position\n * @param {any} valuesArr - An array of values.\n * @param {number} oldPosition - The index of the value in array before reordering.\n * @param {number} newPosition - The index of the value in array after reordering.\n * @param {boolean|any} movedBelow - Whether or not the value is moved below.\n * @returns {void}\n */\n reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {\n if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {\n return;\n }\n const draggedRowData = valuesArr[oldPosition];\n //insert element at new position\n valuesArr.splice(newPosition, 0, draggedRowData);\n //remove element from old position (if was moved above, after insertion it's at +1 index)\n valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);\n }\n onReorder(element, _target, _source, sibling) {\n if (!element.dragInfo || (sibling && !sibling.dragInfo)) {\n console.warn(this.t('noDragInfoError'));\n return;\n }\n const oldPosition = element.dragInfo.index;\n //should drop at next sibling position; no next sibling means drop to last position\n const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;\n const movedBelow = newPosition > oldPosition;\n const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);\n this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);\n //reorder select data\n this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);\n // When components are reordered we need to set the dataGrid and form pristine properties to false\n this.root.pristine = false;\n this.pristine = false;\n //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)\n this.setValue(dataValue, { isReordered: true });\n this.rebuild();\n }\n onCloned(el, original) {\n if (el && el.children && original && original.children) {\n lodash_1.default.each(original.children, (child, index) => {\n const styles = getComputedStyle(child, null);\n if (styles.cssText !== '') {\n el.children[index].style.cssText = styles.cssText;\n }\n else {\n const cssText = Object.values(styles).reduce((css, propertyName) => {\n return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;\n }, '');\n el.children[index].style.cssText = cssText;\n }\n });\n }\n }\n focusOnNewRowElement(row) {\n Object.keys(row).find((key) => {\n const element = row[key].element;\n if (element) {\n const focusableElements = (0, utils_1.getFocusableElements)(element);\n if (focusableElements && focusableElements[0]) {\n focusableElements[0].focus();\n return true;\n }\n }\n return false;\n });\n }\n addRow() {\n const index = this.rows.length;\n // Handle length mismatch between rows and dataValue\n if (this.dataValue.length === index) {\n this.dataValue.push({});\n }\n let row;\n const dataValue = this.dataValue;\n const defaultValue = this.defaultValue;\n if (this.initEmpty && defaultValue[index]) {\n row = defaultValue[index];\n dataValue[index] = row;\n }\n else {\n row = dataValue[index];\n }\n this.rows[index] = this.createRowComponents(row, index);\n this.emit('dataGridAddRow', {\n component: this.component,\n row\n });\n this.checkConditions();\n this.triggerChange({ modified: true });\n this.redraw().then(() => {\n this.focusOnNewRowElement(this.rows[index]);\n });\n }\n updateComponentsRowIndex(components, rowIndex) {\n components.forEach((component, colIndex) => {\n var _a;\n if ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {\n const newName = `[${this.key}][${rowIndex}]`;\n component.options.name = component.options.name.replace(`[${this.key}][${component.rowIndex}]`, newName);\n }\n component.rowIndex = rowIndex;\n component.row = `${rowIndex}-${colIndex}`;\n });\n }\n updateRowsComponents(rowIndex) {\n this.rows.slice(rowIndex).forEach((row, index) => {\n this.updateComponentsRowIndex(Object.values(row), rowIndex + index);\n });\n }\n removeRow(index) {\n const makeEmpty = index === 0 && this.rows.length === 1;\n const flags = { isReordered: !makeEmpty, resetValue: makeEmpty, modified: true };\n this.splice(index, flags);\n this.emit('dataGridDeleteRow', { index });\n const [row] = this.rows.splice(index, 1);\n this.removeSubmissionMetadataRow(index);\n this.removeRowComponents(row);\n this.updateRowsComponents(index);\n this.setValue(this.dataValue, flags);\n this.redraw();\n }\n removeRowComponents(row) {\n lodash_1.default.each(row, (component) => this.removeComponent(component));\n }\n getRowValues() {\n return this.dataValue;\n }\n setRowComponentsData(rowIndex, rowData) {\n lodash_1.default.each(this.rows[rowIndex], (component) => {\n component.data = rowData;\n });\n }\n createRows(init, rebuild) {\n let added = false;\n const rowValues = this.getRowValues();\n // Create any missing rows.\n rowValues.forEach((row, index) => {\n if (!rebuild && this.rows[index]) {\n this.setRowComponentsData(index, row);\n }\n else {\n if (this.rows[index]) {\n this.removeRowComponents(this.rows[index]);\n }\n this.rows[index] = this.createRowComponents(row, index);\n added = true;\n }\n });\n // Delete any extra rows.\n const removedRows = this.rows.splice(rowValues.length);\n const removed = !!removedRows.length;\n // Delete components of extra rows (to make sure that this.components contain only components of exisiting rows)\n if (removed) {\n removedRows.forEach(row => this.removeRowComponents(row));\n }\n if (!init && (added || removed)) {\n this.redraw();\n }\n return added;\n }\n createRowComponents(row, rowIndex) {\n const components = {};\n this.tabIndex = 0;\n this.component.components.map((col, colIndex) => {\n const options = lodash_1.default.clone(this.options);\n options.name += `[${rowIndex}]`;\n options.row = `${rowIndex}-${colIndex}`;\n options.rowIndex = rowIndex;\n options.onChange = (flags, changed, modified) => {\n this.triggerChange({ modified });\n };\n let columnComponent;\n if (this.builderMode) {\n col.id = col.id + rowIndex;\n columnComponent = col;\n }\n else {\n columnComponent = Object.assign(Object.assign({}, col), { id: (col.id + rowIndex) });\n }\n const component = this.createComponent(columnComponent, options, row);\n component.parentDisabled = !!this.disabled;\n component.rowIndex = rowIndex;\n component.inDataGrid = true;\n if (columnComponent.tabindex &&\n parseInt(columnComponent.tabindex) > this.tabIndex) {\n this.tabIndex = parseInt(columnComponent.tabindex);\n }\n components[col.key] = component;\n });\n return components;\n }\n checkColumns(data, flags = {}) {\n data = data || this.rootValue;\n let show = false;\n if (!this.rows || !this.rows.length) {\n return { rebuild: false, show: false };\n }\n if (this.builderMode) {\n return { rebuild: false, show: true };\n }\n const visibility = {};\n let logicRebuild = false;\n const dataValue = this.dataValue;\n this.rows.forEach((row, rowIndex) => {\n lodash_1.default.each(row, (col, key) => {\n if (col && (typeof col.checkConditions === 'function')) {\n const firstRowCheck = visibility[key] === undefined;\n visibility[key] = !!visibility[key] ||\n (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');\n if (col.component.logic && firstRowCheck) {\n const compIndex = lodash_1.default.findIndex(this.columns, ['key', key]);\n const equalColumns = lodash_1.default.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {\n // Don't compare columns by their auto-generated ids.\n if (key === 'id') {\n return true;\n }\n });\n if (!equalColumns) {\n logicRebuild = true;\n this.columns[compIndex] = col.component;\n }\n }\n }\n });\n });\n const rebuild = !lodash_1.default.isEqual(visibility, this.visibleColumns) || logicRebuild;\n lodash_1.default.each(visibility, (col) => {\n show |= col;\n });\n this.visibleColumns = visibility;\n return { rebuild, show };\n }\n checkComponentConditions(data, flags, row) {\n const isVisible = this.visible;\n // If table isn't visible, don't bother calculating columns.\n if (!super.checkComponentConditions(data, flags, row)) {\n return false;\n }\n const { rebuild, show } = this.checkColumns(data, flags);\n // Check if a rebuild is needed or the visibility changes.\n if (rebuild || !isVisible) {\n this.createRows(false, rebuild);\n }\n // Return if this table should show.\n return show;\n }\n setValue(value, flags = {}) {\n if (!value) {\n this.dataValue = this.defaultValue;\n this.createRows();\n return false;\n }\n if (!Array.isArray(value)) {\n if (typeof value === 'object') {\n value = [value];\n }\n else {\n this.createRows();\n value = [{}];\n }\n }\n // Make sure we always have at least one row.\n // NOTE: Removing this will break \"Public Configurations\" in portal. ;)\n if (value && !value.length && !this.initEmpty) {\n value.push({});\n }\n const isSettingSubmission = flags.fromSubmission && !lodash_1.default.isEqual(value, this.emptyValue);\n const changed = this.hasChanged(value, this.dataValue);\n this.dataValue = value;\n if (this.initRows || isSettingSubmission ||\n (Array.isArray(this.dataValue) && this.dataValue.length !== this.rows.length)) {\n if (!this.createRows() && changed) {\n this.redraw();\n }\n }\n if (this.componentModal && isSettingSubmission) {\n this.componentModal.setValue(value);\n }\n this.rows.forEach((row, rowIndex) => {\n if (value.length <= rowIndex) {\n return;\n }\n lodash_1.default.each(row, (col) => {\n col.rowIndex = rowIndex;\n this.setNestedValue(col, value[rowIndex], flags);\n });\n });\n this.updateOnChange(flags, changed);\n return changed;\n }\n toggleGroup(element, index) {\n element.classList.toggle('collapsed');\n lodash_1.default.each(this.refs.chunks[index], row => {\n row.classList.toggle('hidden');\n });\n }\n}\nexports[\"default\"] = DataGridComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/datagrid/DataGrid.js?");
|
5132
5132
|
|
5133
5133
|
/***/ }),
|
5134
5134
|
|
@@ -5172,7 +5172,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
5172
5172
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
5173
5173
|
|
5174
5174
|
"use strict";
|
5175
|
-
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 process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst components_1 = __webpack_require__(/*! @formio/bootstrap/components */ \"./node_modules/@formio/bootstrap/lib/cjs/templates/components/index.js\");\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst Alert_1 = __importDefault(__webpack_require__(/*! ../alert/Alert */ \"./lib/cjs/components/alert/Alert.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst EditRowState = {\n New: 'new',\n Editing: 'editing',\n Saved: 'saved',\n Viewing: 'viewing',\n Removed: 'removed',\n Draft: 'draft',\n};\nclass EditGridComponent extends NestedArrayComponent_1.default {\n static schema(...extend) {\n return NestedArrayComponent_1.default.schema({\n type: 'editgrid',\n label: 'Edit Grid',\n key: 'editGrid',\n clearOnHide: true,\n input: true,\n tree: true,\n removeRow: 'Cancel',\n defaultOpen: false,\n openWhenEmpty: false,\n modal: false,\n components: [],\n inlineEdit: false,\n templates: {\n header: EditGridComponent.defaultHeaderTemplate,\n row: EditGridComponent.defaultRowTemplate,\n tableHeader: EditGridComponent.defaultTableHeaderTemplate,\n tableRow: EditGridComponent.defaultTableRowTemplate,\n footer: '',\n },\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Edit Grid',\n icon: 'tasks',\n group: 'data',\n documentation: '/userguide/form-building/data-components#edit-grid',\n showPreview: false,\n weight: 30,\n schema: EditGridComponent.schema(),\n };\n }\n static get defaultHeaderTemplate() {\n return `<div class=\"row\">\n {% util.eachComponent(components, function(component) { %}\n {% if (displayValue(component)) { %}\n <div class=\"col-sm-2\">{{ t(component.label) }}</div>\n {% } %}\n {% }) %}\n </div>`;\n }\n static get defaultTableHeaderTemplate() {\n return `\n <tr>\n {% util.eachComponent(components, function(component) { %}\n {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n <td class=\"editgrid-table-column\">{{ component.label }}</td>\n {% } %}\n {% }) %}\n {% if (!instance.options.readOnly && !instance.disabled) { %}\n <td class=\"editgrid-table-column\">Actions</td>\n {% } %}\n </tr>\n `;\n }\n static get defaultRowTemplate() {\n return `<div class=\"row\">\n {% util.eachComponent(components, function(component) { %}\n {% if (displayValue(component)) { %}\n <div class=\"col-sm-2\">\n {{ isVisibleInRow(component) ? getView(component, row[component.key]) : ''}}\n </div>\n {% } %}\n {% }) %}\n {% if (!instance.options.readOnly && !instance.disabled) { %}\n <div class=\"col-sm-2\">\n <div class=\"btn-group pull-right\">\n <button class=\"btn btn-default btn-light btn-sm editRow\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n <button class=\"btn btn-danger btn-sm removeRow\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n {% } %}\n </div>\n </div>\n {% } %}\n </div>`;\n }\n static get defaultTableRowTemplate() {\n return `\n {% util.eachComponent(components, function(component) { %}\n {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n <td class=\"editgrid-table-column\">\n {{ getView(component, row[component.key]) }}\n </td>\n {% } %}\n {% }) %}\n {% if (!instance.options.readOnly && !instance.disabled) { %}\n <td class=\"editgrid-table-column\">\n <div class=\"btn-group\">\n <button class=\"btn btn-default btn-light btn-sm editRow\" aria-label=\"{{ t('Edit row') }}\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n <button class=\"btn btn-danger btn-sm removeRow\" aria-label=\"{{ t('Remove row') }}\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n {% } %}\n </div>\n </td>\n {% } %}\n `;\n }\n get defaultDialogTemplate() {\n return `\n <h3 ${this._referenceAttributeName}=\"dialogHeader\">${this.t('wantToClearData')}</h3>\n <div style=\"display:flex; justify-content: flex-end;\">\n <button ${this._referenceAttributeName}=\"dialogCancelButton\" class=\"btn btn-secondary\" aria-label=\"${this.t('cancel')}\">${this.t('cancel')}</button>\n <button ${this._referenceAttributeName}=\"dialogYesButton\" class=\"btn btn-danger\" aria-label=\"${this.t('yesDelete')}\">${this.t('yesDelete')}</button>\n </div>\n `;\n }\n get defaultRowTemplate() {\n return this.displayAsTable\n ? EditGridComponent.defaultTableRowTemplate\n : EditGridComponent.defaultRowTemplate;\n }\n get defaultHeaderTemplate() {\n return this.displayAsTable\n ? EditGridComponent.defaultTableHeaderTemplate\n : EditGridComponent.defaultHeaderTemplate;\n }\n get rowTemplate() {\n let rowTemplate;\n if (utils_1.Evaluator.noeval) {\n rowTemplate = this.displayAsTable ?\n components_1.editgrid.tableRow\n : components_1.editgrid.row;\n }\n else {\n rowTemplate = this.displayAsTable ?\n lodash_1.default.get(this.component, 'templates.tableRow', this.defaultRowTemplate)\n : lodash_1.default.get(this.component, 'templates.row', this.defaultRowTemplate);\n }\n return rowTemplate;\n }\n get headerTemplate() {\n let headerTemplate;\n if (utils_1.Evaluator.noeval) {\n headerTemplate = this.displayAsTable ?\n components_1.editgrid.tableHeader\n : components_1.editgrid.header;\n }\n else {\n headerTemplate = this.displayAsTable ?\n lodash_1.default.get(this.component, 'templates.tableHeader', this.defaultHeaderTemplate)\n : lodash_1.default.get(this.component, 'templates.header', this.defaultHeaderTemplate);\n }\n return headerTemplate;\n }\n /**\n * @returns {boolean} - Returns true if the component has nested components which don't trigger changes on the root level\n */\n get hasScopedChildren() {\n return !this.inlineEditMode;\n }\n get defaultSchema() {\n return EditGridComponent.schema();\n }\n get emptyValue() {\n return [];\n }\n get editgridKey() {\n return `editgrid-${this.key}`;\n }\n get rowRef() {\n return `${this.editgridKey}-row`;\n }\n get rowElements() {\n return this.refs[this.rowRef];\n }\n get rowRefs() {\n return this.refs[`editgrid-${this.component.key}-row`];\n }\n get addRowRef() {\n return `${this.editgridKey}-addRow`;\n }\n get addRowElements() {\n return this.refs[this.addRowRef];\n }\n get saveRowRef() {\n return `${this.editgridKey}-saveRow`;\n }\n get saveRowElements() {\n return this.refs[this.saveRowRef];\n }\n get cancelRowRef() {\n return `${this.editgridKey}-cancelRow`;\n }\n get cancelRowElements() {\n return this.refs[this.cancelRowRef];\n }\n get inlineEditMode() {\n return this.component.inlineEdit;\n }\n get saveEditMode() {\n return !this.inlineEditMode;\n }\n get minLength() {\n return this.builderMode ? 0 : lodash_1.default.get(this.component, 'validate.minLength', 0);\n }\n get data() {\n return this._data;\n }\n get dataValue() {\n return super.dataValue || [];\n }\n set dataValue(value) {\n super.dataValue = value;\n }\n get displayAsTable() {\n return this.component.displayAsTable;\n }\n set data(value) {\n this._data = value;\n const data = this.dataValue;\n (this.editRows || []).forEach((row, index) => {\n if (!data[index] && row.state !== EditRowState.New) {\n data[index] = {};\n }\n const rowData = data[index] || {};\n row.data = rowData;\n row.components.forEach((component) => {\n component.data = rowData;\n });\n });\n }\n get iteratableRows() {\n return this.editRows;\n }\n get defaultValue() {\n const value = super.defaultValue;\n const defaultValue = Array.isArray(value) ? value : [];\n lodash_1.default.times(this.minLength - defaultValue.length, () => defaultValue.push({}));\n return defaultValue;\n }\n constructor(...args) {\n super(...args);\n this.type = 'editgrid';\n }\n hasRemoveButtons() {\n return !this.component.disableAddingRemovingRows &&\n !this.options.readOnly &&\n !this.disabled &&\n this.fullMode &&\n (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n }\n init() {\n if (this.builderMode) {\n this.editRows = [];\n return super.init();\n }\n this.components = this.components || [];\n const dataValue = this.dataValue;\n const openWhenEmpty = !dataValue.length && this.component.openWhenEmpty;\n if (openWhenEmpty) {\n const dataObj = {};\n this.editRows = [];\n this.createRow(dataObj, 0);\n }\n else {\n this.editRows = dataValue.map((row, rowIndex) => ({\n components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n data: row,\n state: EditRowState.Saved,\n backup: null,\n error: null,\n rowIndex,\n }));\n }\n this.prevHasAddButton = this.hasAddButton();\n this.checkData();\n this.setVariableTypeComponents();\n if (this.variableTypeComponentsIndexes.length) {\n lodash_1.default.each(this.editRows || [], (editRow, rowIndex) => this.checkRowVariableTypeComponents(editRow, rowIndex));\n }\n }\n checkRowVariableTypeComponents(editRow, rowIndex) {\n const rowComponents = editRow.components;\n let typeChanged = false;\n if (lodash_1.default.some(this.variableTypeComponentsIndexes, (compIndex) => {\n const variableTypeComp = rowComponents[compIndex];\n return variableTypeComp.type !== variableTypeComp.component.type;\n })) {\n editRow.components = this.createRowComponents(editRow.data, rowIndex, true);\n typeChanged = true;\n }\n return typeChanged;\n }\n setVariableTypeComponents() {\n //set components which type is changing within a row (e.g.,by mergeComponentSchema action)\n this.variableTypeComponentsIndexes = [];\n lodash_1.default.each(this.component.components, (comp, index) => {\n if (comp.typeChangeEnabled) {\n this.variableTypeComponentsIndexes.push(index);\n }\n });\n }\n isOpen(editRow) {\n return [EditRowState.New, EditRowState.Editing, EditRowState.Viewing].includes(editRow.state);\n }\n isComponentVisibleInSomeRow(component) {\n const rows = this.editRows;\n const savedStates = [EditRowState.Saved, EditRowState.Editing, EditRowState.Draft];\n const savedRows = rows.filter(row => lodash_1.default.includes(savedStates, row.state));\n this.visibleInHeader = this.visibleInHeader || [];\n const changeVisibleInHeader = (component, isVisible) => {\n if (!isVisible) {\n lodash_1.default.remove(this.visibleInHeader, (key) => key === component.key);\n }\n if (isVisible && !lodash_1.default.includes(this.visibleInHeader, component.key)) {\n this.visibleInHeader.push(component.key);\n }\n };\n if (lodash_1.default.isEmpty(rows)) {\n const rowComponents = this.createRowComponents({}, 0);\n let checkComponent;\n (0, utils_1.eachComponent)(rowComponents, (comp) => {\n if (comp.component.key === component.key) {\n checkComponent = comp;\n }\n comp.checkConditions();\n });\n const isVisible = checkComponent ? checkComponent.visible : true;\n [...this.components].forEach((comp) => this.removeComponent(comp, this.components));\n changeVisibleInHeader(component, isVisible);\n return isVisible;\n }\n const isOpenRowWhenEmpty = lodash_1.default.get(this.component, 'openWhenEmpty') && rows.length === 1 && rows[0].state === EditRowState.New;\n if (!lodash_1.default.isEmpty(rows) && lodash_1.default.isEmpty(savedRows) && !isOpenRowWhenEmpty) {\n return lodash_1.default.includes(this.visibleInHeader, component.key);\n }\n return lodash_1.default.some(isOpenRowWhenEmpty ? rows : savedRows, (row, index) => {\n const editingRow = row.state === EditRowState.Editing;\n let isVisible;\n if (!editingRow) {\n const flattenedComponents = this.flattenComponents(index);\n const instance = flattenedComponents[component.key];\n isVisible = instance ? instance.visible : true;\n changeVisibleInHeader(component, isVisible);\n }\n else {\n isVisible = lodash_1.default.includes(this.visibleInHeader, component.key);\n }\n return isVisible;\n });\n }\n render(children) {\n if (this.builderMode) {\n return super.render();\n }\n const dataValue = this.dataValue;\n const headerTemplate = this.headerTemplate;\n const t = this.t.bind(this);\n const templateName = this.displayAsTable ? 'editgridTable' : 'editgrid';\n return super.render(children || this.renderTemplate(templateName, {\n ref: {\n row: this.rowRef,\n addRow: this.addRowRef,\n saveRow: this.saveRowRef,\n cancelRow: this.cancelRowRef,\n },\n header: this.renderString(headerTemplate, {\n displayValue: (component) => this.displayComponentValue(component, true),\n components: this.component.components,\n value: dataValue,\n t\n }),\n footer: this.renderString(lodash_1.default.get(this.component, 'templates.footer'), {\n components: this.component.components,\n value: dataValue,\n t\n }),\n rows: this.editRows.map(this.renderRow.bind(this)),\n openRows: this.editRows.map((row) => this.isOpen(row)),\n errors: this.editRows.map((row) => row.error),\n hasAddButton: this.hasAddButton(),\n hasRemoveButtons: this.hasRemoveButtons(),\n }));\n }\n renderComponents(components) {\n components = components || this.getComponents();\n const children = components.map(component => component.render());\n const templateName = this.displayAsTable && this.prevHasAddButton ? 'tableComponents' : 'components';\n return this.renderTemplate(templateName, {\n children,\n components,\n });\n }\n attach(element) {\n if (this.builderMode) {\n return super.attach(element);\n }\n this.loadRefs(element, {\n [this.addRowRef]: 'multiple',\n [this.saveRowRef]: 'multiple',\n [this.cancelRowRef]: 'multiple',\n [this.rowRef]: 'multiple',\n });\n this.addRowElements.forEach((addButton) => {\n this.addEventListener(addButton, 'click', () => this.addRow());\n });\n let openRowCount = 0;\n this.rowElements.forEach((row, rowIndex) => {\n const editRow = this.editRows[rowIndex];\n if (editRow === null || editRow === void 0 ? void 0 : editRow.isRowSelected) {\n row.classList.add('selected');\n }\n if (this.isOpen(editRow)) {\n this.attachComponents(row, editRow.components);\n this.addEventListener(this.saveRowElements[openRowCount], 'click', () => this.saveRow(rowIndex, true));\n this.addEventListener(this.cancelRowElements[openRowCount], 'click', () => this.cancelRow(rowIndex));\n openRowCount++;\n }\n else {\n // Attach edit and remove button events.\n [\n {\n className: 'removeRow',\n event: 'click',\n action: () => this.removeRow(rowIndex, true),\n },\n {\n className: 'editRow',\n event: 'click',\n action: () => {\n this.editRow(rowIndex).then(() => {\n var _a;\n if (this.component.rowDrafts) {\n const errors = this.validateRow(editRow, false);\n const shouldShowRowErrorsAlert = this.component.modal && errors.length && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted);\n if (shouldShowRowErrorsAlert) {\n this.alert.showErrors(errors, false);\n editRow.alerts = true;\n }\n }\n });\n },\n },\n {\n className: 'row',\n event: 'click',\n action: () => {\n row.classList.toggle('selected');\n let eventName = 'editGridSelectRow';\n if (Array.from(row.classList).includes('selected')) {\n editRow.isRowSelected = true;\n }\n else {\n delete editRow.isRowSelected;\n eventName = 'editGridUnSelectRow';\n }\n this.emit(eventName, {\n component: this.component,\n data: this.dataValue[rowIndex]\n });\n },\n }\n ].forEach(({ className, event, action, }) => {\n const elements = row.getElementsByClassName(className);\n Array.prototype.forEach.call(elements, (element) => {\n if (this.options.pdf && lodash_1.default.intersection(element.classList, ['editRow', 'removeRow']).length) {\n element.style.display = 'none';\n }\n else {\n this.addEventListener(element, event, action);\n }\n });\n });\n }\n });\n // Add open class to the element if any edit grid row is open\n if (openRowCount) {\n this.addClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n }\n else {\n this.removeClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n }\n return super.attach(element);\n }\n flattenRowDataValue(dataValue) {\n const flattened = {};\n Object.keys(dataValue).forEach((key) => {\n if (lodash_1.default.isObject(dataValue[key]) && !lodash_1.default.isNil(dataValue[key])) {\n Object.assign(flattened, this.flattenRowDataValue(dataValue[key]));\n }\n else {\n flattened[key] = dataValue[key];\n }\n });\n return flattened;\n }\n isComponentVisibleInRow(component, flattenedComponents) {\n const instance = flattenedComponents[component.key];\n return instance ? instance.visible : true;\n }\n displayComponentValue(component, header) {\n return !!((!component.hasOwnProperty('tableView') || component.tableView)\n && header ? this.isComponentVisibleInSomeRow(component) : lodash_1.default.includes(this.visibleInHeader, component.key));\n }\n renderRow(row, rowIndex) {\n const dataValue = this.dataValue;\n if (this.isOpen(row)) {\n return this.renderComponents(row.components);\n }\n else {\n const flattenedComponents = this.flattenComponents(rowIndex);\n const rowTemplate = this.rowTemplate;\n return this.renderString(rowTemplate, {\n row: dataValue[rowIndex] || {},\n data: this.data,\n rowIndex,\n components: this.component.components,\n flattenedComponents,\n displayValue: (component) => this.displayComponentValue(component),\n isVisibleInRow: (component) => this.isComponentVisibleInRow(component, flattenedComponents),\n getView: (component, data) => {\n var _a, _b;\n const instance = flattenedComponents[component.key];\n const view = instance ? instance.getView(data || instance.dataValue) : '';\n // If there is an html tag in view, don't allow it to be injected in template\n const htmlTagRegExp = new RegExp('<(.*?)>');\n return typeof view === 'string' && view.length && !((_a = instance.component) === null || _a === void 0 ? void 0 : _a.template) && htmlTagRegExp.test(view) && ((_b = instance.component) === null || _b === void 0 ? void 0 : _b.inputFormat) !== 'html'\n ? `<input type=\"text\" value=\"${view.replace(/\"/g, '"')}\" readonly/>`\n : view;\n },\n state: this.editRows[rowIndex].state,\n t: this.t.bind(this)\n });\n }\n }\n eachComponent(fn, rowIndex) {\n lodash_1.default.each(this.getComponents(rowIndex), (component, index) => {\n if (fn(component, index) === false) {\n return false;\n }\n });\n }\n restoreComponentsContext() {\n this.getComponents().forEach((component) => {\n var _a;\n const rowData = this.dataValue[component.rowIndex];\n const editRowData = (_a = this.editRows[component.rowIndex]) === null || _a === void 0 ? void 0 : _a.data;\n component.data = rowData || editRowData;\n });\n }\n flattenComponents(rowIndex) {\n const result = {};\n this.everyComponent((component) => {\n result[component.component.flattenAs || component.key] = component;\n }, rowIndex);\n return result;\n }\n getComponents(rowIndex) {\n var _a;\n // Ensure editrows is set.\n this.editRows = this.editRows || [];\n return this.builderMode\n ? super.getComponents()\n : lodash_1.default.isNumber(rowIndex)\n ? (((_a = this.editRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.components) || [])\n : this.editRows.reduce((result, row) => result.concat(row.components || []), []);\n }\n destroy(all = false) {\n this.calculatedValue = undefined;\n super.destroy(all);\n }\n destroyComponents(all = false, rowIndex = 0) {\n if (this.builderMode) {\n return super.destroyComponents(all);\n }\n const components = this.getComponents(rowIndex).slice();\n components.forEach((comp) => this.removeComponent(comp, this.components, all));\n }\n createRow(dataObj, rowIndex) {\n const editRow = {\n components: this.createRowComponents(dataObj, rowIndex),\n data: dataObj,\n state: EditRowState.New,\n backup: null,\n error: null,\n rowIndex,\n };\n this.editRows.push(editRow);\n if (this.inlineEditMode) {\n this.dataValue.push(dataObj);\n }\n return editRow;\n }\n addRow() {\n if (this.options.readOnly) {\n return;\n }\n const dataObj = {};\n const rowIndex = this.editRows.length;\n const editRow = this.createRow(dataObj, rowIndex);\n if (editRow.state === EditRowState.New) {\n this.emptyRow = (0, utils_1.fastCloneDeep)(editRow.data);\n }\n if (this.inlineEditMode) {\n this.triggerChange();\n }\n this.emit('editGridAddRow', {\n component: this.component,\n row: editRow,\n });\n this.processRow('checkData', null, {}, editRow.data, editRow.components);\n if (this.component.modal) {\n this.addRowModal(rowIndex);\n }\n else {\n this.redraw();\n }\n return editRow;\n }\n addRowModal(rowIndex) {\n const modalContent = this.ce('div');\n const editRow = this.editRows[rowIndex];\n editRow.willBeSaved = false;\n const { components } = editRow;\n modalContent.innerHTML = this.renderComponents(components);\n const dialog = this.component.modal ? this.createModal(modalContent, {}, () => this.showDialog(rowIndex)) : undefined;\n dialog.classList.add(`editgrid-row-modal-${this.id}`);\n editRow.dialog = dialog;\n if (this.alert) {\n this.alert.clear();\n this.alert = null;\n }\n this.alert = new Alert_1.default(dialog.refs.dialogContents, this);\n this.addEventListener(dialog, 'close', () => {\n if (!editRow.willBeSaved) {\n if (this.editRows[rowIndex] && this.editRows[rowIndex].state !== EditRowState.New) {\n this.editRows[rowIndex].components.forEach((comp) => {\n comp.setPristine(true);\n });\n }\n this.cancelRow(rowIndex);\n }\n if (this.alert) {\n this.alert.clear();\n this.alert = null;\n }\n // Remove references to dialog elements to prevent possible in some cases memory leaks\n delete editRow.confirmationDialog;\n delete editRow.dialog;\n });\n dialog.refs.dialogContents.appendChild(this.ce('button', {\n class: 'btn btn-primary',\n onClick: () => {\n // After an attempt to save, all the components inside the row should become not pristine\n if (!this.component.rowDrafts) {\n editRow.components.forEach((comp) => comp.setPristine(false));\n }\n const errors = this.validateRow(editRow, true);\n if (!errors.length || this.component.rowDrafts) {\n editRow.willBeSaved = true;\n dialog.close();\n this.saveRow(rowIndex, true);\n }\n else {\n this.alert.showErrors(errors, false);\n editRow.alerts = true;\n }\n },\n }, this.component.saveRow || 'Save'));\n this.emit('editGridOpenModal', {\n component: this.component,\n row: editRow,\n instance: this,\n });\n return this.attachComponents(modalContent, components);\n }\n showDialog(rowIndex) {\n const editRow = this.editRows[rowIndex];\n if (editRow.state === EditRowState.New ? lodash_1.default.isEqual(this.emptyRow, editRow.data) : lodash_1.default.isEqual(editRow.backup, editRow.data)) {\n return Promise.resolve();\n }\n const wrapper = this.ce('div', { ref: 'confirmationDialog' });\n const dialogContent = this.component.dialogTemplate || this.defaultDialogTemplate;\n wrapper.innerHTML = dialogContent;\n wrapper.refs = {};\n this.loadRefs.call(wrapper, wrapper, {\n dialogHeader: 'single',\n dialogCancelButton: 'single',\n dialogYesButton: 'single',\n });\n const dialog = this.createModal(wrapper);\n dialog.classList.add(`editgrid-row-modal-confirmation-${this.id}`);\n const close = (event) => {\n event.preventDefault();\n dialog.close();\n };\n let dialogResult;\n const promise = new Promise((resolve, reject) => {\n dialogResult = { resolve, reject };\n });\n this.addEventListener(wrapper.refs.dialogYesButton, 'click', (event) => {\n close(event);\n dialogResult.resolve();\n });\n this.addEventListener(wrapper.refs.dialogCancelButton, 'click', (event) => {\n close(event);\n dialogResult.reject();\n });\n editRow.confirmationDialog = dialog;\n return promise;\n }\n editRow(rowIndex) {\n const editRow = this.editRows[rowIndex];\n const isAlreadyEditing = editRow.state === EditRowState.Editing || editRow.state === EditRowState.New;\n if (!editRow || isAlreadyEditing) {\n return Promise.resolve();\n }\n editRow.prevState = editRow.state;\n editRow.state = this.options.readOnly ? EditRowState.Viewing : EditRowState.Editing;\n if (this.lazyLoad && (editRow.components.length === 0)) {\n editRow.components = this.createRowComponents(editRow.data, rowIndex);\n }\n const dataSnapshot = (0, utils_1.fastCloneDeep)(editRow.data);\n if (this.inlineEditMode) {\n editRow.backup = dataSnapshot;\n }\n else {\n editRow.backup = (0, utils_1.fastCloneDeep)(editRow.data);\n editRow.data = dataSnapshot;\n this.restoreRowContext(editRow);\n }\n this.emit('editGridEditRow', {\n component: this.component,\n row: editRow,\n instance: this,\n });\n if (this.component.modal) {\n return this.addRowModal(rowIndex);\n }\n return this.redraw();\n }\n clearErrors(rowIndex) {\n const editRow = this.editRows[rowIndex];\n if (editRow && Array.isArray(editRow.components)) {\n editRow.components.forEach((comp) => {\n comp.setPristine(true);\n comp.setCustomValidity('');\n });\n }\n }\n cancelRow(rowIndex) {\n if (this.options.readOnly) {\n return;\n }\n const editRow = this.editRows[rowIndex];\n switch (editRow.state) {\n case EditRowState.New: {\n editRow.state = EditRowState.Removed;\n this.clearErrors(rowIndex);\n this.destroyComponents(false, rowIndex);\n if (this.inlineEditMode) {\n this.splice(rowIndex);\n }\n this.editRows.splice(rowIndex, 1);\n this.openWhenEmpty();\n break;\n }\n case EditRowState.Editing: {\n editRow.state = editRow.prevState;\n if (this.inlineEditMode) {\n this.dataValue[rowIndex] = editRow.backup;\n }\n editRow.data = editRow.backup;\n editRow.backup = null;\n this.restoreRowContext(editRow);\n this.clearErrors(rowIndex);\n break;\n }\n }\n this.emit('editGridCancelRow', {\n instance: this,\n component: this.component,\n editRow,\n });\n this.checkValidity(null, true);\n this.redraw();\n if (this.component.rowDrafts) {\n this.checkValidity(this.data, false);\n }\n }\n saveRow(rowIndex, modified) {\n var _a, _b;\n const editRow = this.editRows[rowIndex];\n if (this.options.readOnly) {\n return;\n }\n // After an attempt to save, all the components inside the row should become not pristine\n if (!this.component.rowDrafts) {\n editRow.components.forEach((comp) => comp.setPristine(false));\n }\n const errors = this.validateRow(editRow, true);\n if (!this.component.rowDrafts) {\n if (errors.length) {\n return false;\n }\n }\n if (this.saveEditMode) {\n const dataValue = this.dataValue;\n if ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.component.typeChangeEnabled) {\n this.root.focusedComponent = null;\n }\n switch (editRow.state) {\n case EditRowState.New: {\n const newIndex = dataValue.length;\n dataValue.push(editRow.data);\n editRow.components.forEach(component => component.rowIndex = newIndex);\n if (rowIndex !== newIndex) {\n this.editRows.splice(rowIndex, 1);\n this.editRows.splice(newIndex, 0, editRow);\n }\n break;\n }\n case EditRowState.Editing: {\n dataValue[rowIndex] = editRow.data;\n break;\n }\n }\n }\n editRow.state = this.component.rowDrafts && errors.length ? EditRowState.Draft : EditRowState.Saved;\n editRow.backup = null;\n this.updateValue();\n this.emit('editGridSaveRow', {\n component: this.component,\n row: editRow.data,\n instance: this\n });\n this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n if (this.component.rowDrafts) {\n editRow.components.forEach(comp => comp.setPristine(this.pristine));\n }\n this.checkValidity(null, true);\n this.redraw();\n if (editRow.alerts) {\n editRow.alerts = false;\n }\n return true;\n }\n beforeFocus(component) {\n if ('beforeFocus' in this.parent) {\n this.parent.beforeFocus(this);\n }\n const relativePath = this.getRelativePath(component.path);\n const arrayPath = (0, utils_1.getArrayFromComponentPath)(relativePath);\n const rowIndex = arrayPath[0];\n let rowToEditIndex = arrayPath[0];\n this.editRows.forEach((row, indexInArray) => {\n if (row.rowIndex === rowIndex) {\n rowToEditIndex = indexInArray;\n }\n });\n if (lodash_1.default.isNumber(rowToEditIndex)) {\n this.editRow(rowToEditIndex);\n }\n }\n updateComponentsRowIndex(components, rowIndex) {\n components.forEach((component, colIndex) => {\n component.rowIndex = rowIndex;\n component.row = `${rowIndex}-${colIndex}`;\n });\n }\n updateRowsComponents(rowIndex) {\n this.editRows.slice(rowIndex).forEach((row, index) => {\n this.updateComponentsRowIndex(row.components, rowIndex + index);\n });\n }\n baseRemoveRow(rowIndex) {\n const editRow = this.editRows[rowIndex];\n editRow.state = EditRowState.Removed;\n this.destroyComponents(false, rowIndex);\n return editRow;\n }\n removeRow(rowIndex, modified) {\n if (this.options.readOnly) {\n return;\n }\n this.clearErrors(rowIndex);\n this.baseRemoveRow(rowIndex);\n this.removeSubmissionMetadataRow(rowIndex);\n this.splice(rowIndex);\n this.emit('editGridDeleteRow', {\n index: rowIndex\n });\n this.editRows.splice(rowIndex, 1);\n this.openWhenEmpty();\n this.updateRowsComponents(rowIndex);\n this.updateValue();\n this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n this.checkValidity(null, true);\n this.checkData();\n this.redraw();\n }\n createRowComponents(row, rowIndex, recreatePartially) {\n // Iterate through existing components and destroy the ones with the same rowIndex.\n if (this.components) {\n for (let i = 0; i < this.components.length; i++) {\n if (this.components[i].rowIndex === rowIndex) {\n this.components[i].destroy();\n this.components.splice(i, 1);\n }\n }\n }\n const currentRowComponents = lodash_1.default.get(this.editRows, `[${rowIndex}].components`, null);\n return this.component.components.map((col, colIndex) => {\n var _a;\n if (recreatePartially && currentRowComponents && this.variableTypeComponentsIndexes.length) {\n const currentComp = currentRowComponents[colIndex];\n const shouldRecreate = lodash_1.default.includes(this.variableTypeComponentsIndexes, colIndex) && (currentComp === null || currentComp === void 0 ? void 0 : currentComp.type) !== ((_a = currentComp === null || currentComp === void 0 ? void 0 : currentComp.component) === null || _a === void 0 ? void 0 : _a.type);\n if (!shouldRecreate) {\n return currentComp;\n }\n col = currentComp.component;\n }\n const column = lodash_1.default.clone(col);\n const options = lodash_1.default.clone(this.options);\n options.name += `[${rowIndex}]`;\n options.row = `${rowIndex}-${colIndex}`;\n options.rowIndex = rowIndex;\n options.onChange = (flags = {}, changed, modified) => {\n var _a, _b;\n if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {\n changed.instance.root.triggerChange(flags, changed, modified);\n }\n else if (!this.component.modal) {\n this.triggerRootChange(flags, changed, modified);\n }\n if (this.inlineEditMode) {\n return;\n }\n const editRow = this.editRows[rowIndex];\n if (editRow) {\n this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), editRow.data, editRow.components);\n this.validateRow(editRow, false, false);\n }\n if (this.variableTypeComponentsIndexes.length) {\n const typeChanged = this.checkRowVariableTypeComponents(editRow, rowIndex);\n if (typeChanged) {\n this.redraw();\n }\n }\n };\n const comp = this.createComponent(lodash_1.default.assign({}, column, { row: options.row }), options, row, null, recreatePartially && currentRowComponents ? currentRowComponents[colIndex] : null);\n comp.rowIndex = rowIndex;\n comp.inEditGrid = true;\n return comp;\n });\n }\n hasOpenRows() {\n return this.editRows.some(row => this.isOpen(row));\n }\n getAttachedData(data = null) {\n const ourData = (0, utils_1.fastCloneDeep)(data || this._data || this.rootValue);\n lodash_1.default.set(ourData, this.key, this.editRows.map((row) => row.data));\n return ourData;\n }\n shouldValidateDraft(editRow) {\n var _a, _b;\n // Draft rows should be validated only when there was an attempt to submit a form\n return (editRow.state === EditRowState.Draft &&\n !this.pristine &&\n !((_a = this.root) === null || _a === void 0 ? void 0 : _a.pristine) &&\n !this.hasOpenRows()) ||\n ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted);\n }\n shouldValidateRow(editRow, dirty, fromSubmission) {\n return this.shouldValidateDraft(editRow) ||\n editRow.state === EditRowState.New ||\n editRow.state === EditRowState.Editing ||\n editRow.alerts ||\n fromSubmission ||\n dirty;\n }\n validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {\n var _a, _b;\n editRow.errors = [];\n if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {\n const silentCheck = forceSilentCheck === false ? false : ((this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck);\n const rootValue = (0, utils_1.fastCloneDeep)(this.rootValue);\n const editGridValue = lodash_1.default.get(rootValue, this.path, []);\n editGridValue[editRow.rowIndex] = editRow.data;\n lodash_1.default.set(rootValue, this.path, editGridValue);\n const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });\n const errors = (0, process_1.processSync)({\n components: this.component.components,\n data: rootValue,\n row: editRow.data,\n process: 'validateRow',\n instances: this.componentsMap,\n scope: { errors: [] },\n parent: this.component,\n parentPaths: Object.assign(Object.assign({}, this.paths), { dataIndex: editRow.rowIndex }),\n processors: [\n {\n process: validationProcessorProcess,\n processSync: validationProcessorProcess\n }\n ]\n }).errors;\n editRow.errors = (this.component.modal || this.component.rowDrafts)\n ? errors\n : errors.filter((err) => lodash_1.default.find(this.visibleErrors, ['component.id', err.component.id]));\n }\n // TODO: this is essentially running its own custom validation and should be moved into a validation rule\n if (this.component.validate && this.component.validate.row) {\n const valid = this.evaluate(this.component.validate.row, {\n valid: (editRow.length === 0),\n row: editRow.data\n }, 'valid', true);\n if (valid.toString() !== 'true') {\n editRow.errors.push({\n type: 'error',\n rowError: true,\n message: valid.toString()\n });\n }\n if (valid === null) {\n editRow.errors.push({\n type: 'error',\n message: this.t('componentInvalidRowValidation', { componentKey: this.key })\n });\n }\n }\n if (editRow.alerts && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {\n this.showRowErrorAlerts(editRow, editRow.errors);\n }\n else if ((_b = editRow.errors) === null || _b === void 0 ? void 0 : _b.length) {\n this.setCustomValidity(editRow.errors, dirty);\n }\n return editRow.errors;\n }\n showRowErrorAlerts(editRow, errors) {\n if (editRow.alerts) {\n if (this.alert) {\n if (errors.length) {\n this.alert.showErrors(errors, false);\n editRow.alerts = true;\n }\n else {\n this.alert.clear();\n this.alert = null;\n }\n }\n }\n }\n /**\n * @returns {boolean} - Return that this component processes its own validation.\n */\n get processOwnValidation() {\n return true;\n }\n checkComponentValidity(data, dirty, row, options = {}, errors = []) {\n var _a, _b;\n const { silentCheck, fromSubmission } = options;\n const superValid = super.checkComponentValidity(data, dirty, row, options, errors);\n // If super tells us that component invalid and there is no need to update alerts, just return false\n if (!superValid && (!this.alert && !this.hasOpenRows())) {\n return false;\n }\n let rowsEditing = false;\n const allRowErrors = [];\n this.editRows.forEach((editRow, index) => {\n // Trigger all errors on the row.\n const rowErrors = this.validateRow(editRow, dirty, silentCheck, fromSubmission);\n errors.push(...rowErrors);\n allRowErrors.push(...rowErrors);\n if (this.rowRefs) {\n const rowContainer = this.rowRefs[index];\n if (rowContainer) {\n const errorContainer = rowContainer.querySelector('.editgrid-row-error');\n if (rowErrors.length && errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n const rowError = rowErrors.find(error => error.rowError);\n this.addClass(errorContainer, 'help-block');\n errorContainer.textContent = this.t(rowError ? rowError.message : this.errorMessage('invalidRowError'));\n }\n else if (errorContainer) {\n errorContainer.textContent = '';\n this.removeClass(errorContainer, 'help-block');\n }\n }\n }\n // If this is a dirty check, and any rows are still editing, we need to throw validation error.\n rowsEditing |= (dirty && this.isOpen(editRow));\n });\n if (allRowErrors.length) {\n if (!silentCheck && (dirty || this.dirty) && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {\n this.setCustomValidity(this.t(this.errorMessage('invalidRowsError')), dirty);\n this.removeClass(this.element, 'has-error');\n }\n return false;\n }\n else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {\n this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);\n errors.push(...this._errors);\n return false;\n }\n const message = this.invalid || this.invalidMessage(data, dirty, false, row);\n if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {\n this._errors = this.setCustomValidity(message, dirty);\n errors.push(...this._errors);\n this.root.showErrors([message]);\n }\n else {\n this._errors = this.setCustomValidity(message, dirty);\n errors.push(...this._errors);\n }\n return superValid;\n }\n setRowInvalid(ref, index) {\n const editRow = this.editRows[index];\n const errorContainer = ref.querySelector('.editgrid-row-error');\n if (errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n this.addClass(errorContainer, 'help-block');\n errorContainer.textContent = this.t(this.errorMessage('invalidRowError'));\n }\n else if (errorContainer) {\n errorContainer.textContent = '';\n }\n }\n changeState(changed, flags) {\n if (this.visible && (changed || (flags.resetValue && this.component.modalEdit))) {\n this.rebuild();\n }\n else {\n this.redraw();\n }\n }\n setValue(value, flags = {}) {\n if (!value) {\n value = this.defaultValue;\n }\n if (!Array.isArray(value)) {\n if (typeof value === 'object') {\n value = [value];\n }\n else {\n return false;\n }\n }\n const changed = this.hasChanged(value, this.dataValue);\n this.dataValue = value;\n // Refresh editRow data when data changes.\n this.dataValue.forEach((row, rowIndex) => {\n const editRow = this.editRows[rowIndex];\n if (editRow) {\n editRow.data = row;\n this.restoreRowContext(editRow, flags);\n editRow.state = EditRowState.Saved;\n editRow.backup = null;\n editRow.errors = [];\n }\n else {\n this.editRows[rowIndex] = {\n components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n data: row,\n state: EditRowState.Saved,\n backup: null,\n errors: [],\n };\n }\n });\n let { length: dataLength } = this.dataValue;\n // If the last row is a new row, then do not remove it.\n if (this.editRows[dataLength] && (this.editRows[dataLength].state === EditRowState.New)) {\n dataLength = (dataLength + 1);\n }\n this.editRows.slice(dataLength).forEach((editRow, index) => this.baseRemoveRow(dataLength + index));\n this.editRows = this.editRows.slice(0, dataLength);\n this.openWhenEmpty();\n this.updateOnChange(flags, changed);\n this.changeState(changed, flags);\n return changed;\n }\n openWhenEmpty() {\n const shouldBeOpened = !this.dataValue.length && this.component.openWhenEmpty;\n const hasNoRows = !this.editRows.length;\n if (hasNoRows && shouldBeOpened && !this.builderMode) {\n const dataObj = {};\n this.createRow(dataObj, 0);\n }\n }\n restoreRowContext(editRow, flags = {}) {\n editRow.components.forEach((component) => {\n component.data = editRow.data;\n this.setNestedValue(component, editRow.data, flags);\n });\n }\n emptyRows() {\n this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));\n this.editRows = [];\n }\n resetValue() {\n super.resetValue();\n this.emptyRows();\n }\n}\nexports[\"default\"] = EditGridComponent;\nEditGridComponent.prototype.hasChanged = Component_1.default.prototype.hasChanged;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/editgrid/EditGrid.js?");
|
5175
|
+
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 process_1 = __webpack_require__(/*! @formio/core/process */ \"./node_modules/@formio/core/lib/process/index.js\");\nconst components_1 = __webpack_require__(/*! @formio/bootstrap/components */ \"./node_modules/@formio/bootstrap/lib/cjs/templates/components/index.js\");\nconst NestedArrayComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/nestedarray/NestedArrayComponent */ \"./lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js\"));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst Alert_1 = __importDefault(__webpack_require__(/*! ../alert/Alert */ \"./lib/cjs/components/alert/Alert.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils/utils */ \"./lib/cjs/utils/utils.js\");\nconst EditRowState = {\n New: 'new',\n Editing: 'editing',\n Saved: 'saved',\n Viewing: 'viewing',\n Removed: 'removed',\n Draft: 'draft',\n};\nclass EditGridComponent extends NestedArrayComponent_1.default {\n static schema(...extend) {\n return NestedArrayComponent_1.default.schema({\n type: 'editgrid',\n label: 'Edit Grid',\n key: 'editGrid',\n clearOnHide: true,\n input: true,\n tree: true,\n removeRow: 'Cancel',\n defaultOpen: false,\n openWhenEmpty: false,\n modal: false,\n components: [],\n inlineEdit: false,\n templates: {\n header: EditGridComponent.defaultHeaderTemplate,\n row: EditGridComponent.defaultRowTemplate,\n tableHeader: EditGridComponent.defaultTableHeaderTemplate,\n tableRow: EditGridComponent.defaultTableRowTemplate,\n footer: '',\n },\n }, ...extend);\n }\n static get builderInfo() {\n return {\n title: 'Edit Grid',\n icon: 'tasks',\n group: 'data',\n documentation: '/userguide/form-building/data-components#edit-grid',\n showPreview: false,\n weight: 30,\n schema: EditGridComponent.schema(),\n };\n }\n static get defaultHeaderTemplate() {\n return `<div class=\"row\">\n {% util.eachComponent(components, function(component) { %}\n {% if (displayValue(component)) { %}\n <div class=\"col-sm-2\">{{ t(component.label) }}</div>\n {% } %}\n {% }) %}\n </div>`;\n }\n static get defaultTableHeaderTemplate() {\n return `\n <tr>\n {% util.eachComponent(components, function(component) { %}\n {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n <td class=\"editgrid-table-column\">{{ component.label }}</td>\n {% } %}\n {% }) %}\n {% if (!instance.options.readOnly && !instance.disabled) { %}\n <td class=\"editgrid-table-column\">Actions</td>\n {% } %}\n </tr>\n `;\n }\n static get defaultRowTemplate() {\n return `<div class=\"row\">\n {% util.eachComponent(components, function(component) { %}\n {% if (displayValue(component)) { %}\n <div class=\"col-sm-2\">\n {{ isVisibleInRow(component) ? getView(component, row[component.key]) : ''}}\n </div>\n {% } %}\n {% }) %}\n {% if (!instance.options.readOnly && !instance.disabled) { %}\n <div class=\"col-sm-2\">\n <div class=\"btn-group pull-right\">\n <button class=\"btn btn-default btn-light btn-sm editRow\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n <button class=\"btn btn-danger btn-sm removeRow\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n {% } %}\n </div>\n </div>\n {% } %}\n </div>`;\n }\n static get defaultTableRowTemplate() {\n return `\n {% util.eachComponent(components, function(component) { %}\n {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n <td class=\"editgrid-table-column\">\n {{ getView(component, row[component.key]) }}\n </td>\n {% } %}\n {% }) %}\n {% if (!instance.options.readOnly && !instance.disabled) { %}\n <td class=\"editgrid-table-column\">\n <div class=\"btn-group\">\n <button class=\"btn btn-default btn-light btn-sm editRow\" aria-label=\"{{ t('Edit row') }}\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n <button class=\"btn btn-danger btn-sm removeRow\" aria-label=\"{{ t('Remove row') }}\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n {% } %}\n </div>\n </td>\n {% } %}\n `;\n }\n get defaultDialogTemplate() {\n return `\n <h3 ${this._referenceAttributeName}=\"dialogHeader\">${this.t('wantToClearData')}</h3>\n <div style=\"display:flex; justify-content: flex-end;\">\n <button ${this._referenceAttributeName}=\"dialogCancelButton\" class=\"btn btn-secondary\" aria-label=\"${this.t('cancel')}\">${this.t('cancel')}</button>\n <button ${this._referenceAttributeName}=\"dialogYesButton\" class=\"btn btn-danger\" aria-label=\"${this.t('yesDelete')}\">${this.t('yesDelete')}</button>\n </div>\n `;\n }\n get defaultRowTemplate() {\n return this.displayAsTable\n ? EditGridComponent.defaultTableRowTemplate\n : EditGridComponent.defaultRowTemplate;\n }\n get defaultHeaderTemplate() {\n return this.displayAsTable\n ? EditGridComponent.defaultTableHeaderTemplate\n : EditGridComponent.defaultHeaderTemplate;\n }\n get rowTemplate() {\n let rowTemplate;\n if (utils_1.Evaluator.noeval) {\n rowTemplate = this.displayAsTable ?\n components_1.editgrid.tableRow\n : components_1.editgrid.row;\n }\n else {\n rowTemplate = this.displayAsTable ?\n lodash_1.default.get(this.component, 'templates.tableRow', this.defaultRowTemplate)\n : lodash_1.default.get(this.component, 'templates.row', this.defaultRowTemplate);\n }\n return rowTemplate;\n }\n get headerTemplate() {\n let headerTemplate;\n if (utils_1.Evaluator.noeval) {\n headerTemplate = this.displayAsTable ?\n components_1.editgrid.tableHeader\n : components_1.editgrid.header;\n }\n else {\n headerTemplate = this.displayAsTable ?\n lodash_1.default.get(this.component, 'templates.tableHeader', this.defaultHeaderTemplate)\n : lodash_1.default.get(this.component, 'templates.header', this.defaultHeaderTemplate);\n }\n return headerTemplate;\n }\n /**\n * @returns {boolean} - Returns true if the component has nested components which don't trigger changes on the root level\n */\n get hasScopedChildren() {\n return !this.inlineEditMode;\n }\n get defaultSchema() {\n return EditGridComponent.schema();\n }\n get emptyValue() {\n return [];\n }\n get editgridKey() {\n return `editgrid-${this.key}`;\n }\n get rowRef() {\n return `${this.editgridKey}-row`;\n }\n get rowElements() {\n return this.refs[this.rowRef];\n }\n get rowRefs() {\n return this.refs[`editgrid-${this.component.key}-row`];\n }\n get addRowRef() {\n return `${this.editgridKey}-addRow`;\n }\n get addRowElements() {\n return this.refs[this.addRowRef];\n }\n get saveRowRef() {\n return `${this.editgridKey}-saveRow`;\n }\n get saveRowElements() {\n return this.refs[this.saveRowRef];\n }\n get cancelRowRef() {\n return `${this.editgridKey}-cancelRow`;\n }\n get cancelRowElements() {\n return this.refs[this.cancelRowRef];\n }\n get inlineEditMode() {\n return this.component.inlineEdit;\n }\n get saveEditMode() {\n return !this.inlineEditMode;\n }\n get minLength() {\n return this.builderMode ? 0 : lodash_1.default.get(this.component, 'validate.minLength', 0);\n }\n get data() {\n return this._data;\n }\n get dataValue() {\n return super.dataValue || [];\n }\n set dataValue(value) {\n super.dataValue = value;\n }\n get displayAsTable() {\n return this.component.displayAsTable;\n }\n set data(value) {\n this._data = value;\n const data = this.dataValue;\n (this.editRows || []).forEach((row, index) => {\n if (!data[index] && row.state !== EditRowState.New) {\n data[index] = {};\n }\n const rowData = data[index] || {};\n row.data = rowData;\n row.components.forEach((component) => {\n component.data = rowData;\n });\n });\n }\n get iteratableRows() {\n return this.editRows;\n }\n get defaultValue() {\n const value = super.defaultValue;\n const defaultValue = Array.isArray(value) ? value : [];\n lodash_1.default.times(this.minLength - defaultValue.length, () => defaultValue.push({}));\n return defaultValue;\n }\n constructor(...args) {\n super(...args);\n this.type = 'editgrid';\n }\n hasRemoveButtons() {\n return !this.component.disableAddingRemovingRows &&\n !this.options.readOnly &&\n !this.disabled &&\n this.fullMode &&\n (this.dataValue.length > lodash_1.default.get(this.component, 'validate.minLength', 0));\n }\n init() {\n if (this.builderMode) {\n this.editRows = [];\n return super.init();\n }\n this.components = this.components || [];\n const dataValue = this.dataValue;\n const openWhenEmpty = !dataValue.length && this.component.openWhenEmpty;\n if (openWhenEmpty) {\n const dataObj = {};\n this.editRows = [];\n this.createRow(dataObj, 0);\n }\n else {\n this.editRows = dataValue.map((row, rowIndex) => ({\n components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n data: row,\n state: EditRowState.Saved,\n backup: null,\n error: null,\n rowIndex,\n }));\n }\n this.prevHasAddButton = this.hasAddButton();\n this.checkData();\n this.setVariableTypeComponents();\n if (this.variableTypeComponentsIndexes.length) {\n lodash_1.default.each(this.editRows || [], (editRow, rowIndex) => this.checkRowVariableTypeComponents(editRow, rowIndex));\n }\n }\n checkRowVariableTypeComponents(editRow, rowIndex) {\n const rowComponents = editRow.components;\n let typeChanged = false;\n if (lodash_1.default.some(this.variableTypeComponentsIndexes, (compIndex) => {\n const variableTypeComp = rowComponents[compIndex];\n return variableTypeComp.type !== variableTypeComp.component.type;\n })) {\n editRow.components = this.createRowComponents(editRow.data, rowIndex, true);\n typeChanged = true;\n }\n return typeChanged;\n }\n setVariableTypeComponents() {\n //set components which type is changing within a row (e.g.,by mergeComponentSchema action)\n this.variableTypeComponentsIndexes = [];\n lodash_1.default.each(this.component.components, (comp, index) => {\n if (comp.typeChangeEnabled) {\n this.variableTypeComponentsIndexes.push(index);\n }\n });\n }\n isOpen(editRow) {\n return [EditRowState.New, EditRowState.Editing, EditRowState.Viewing].includes(editRow.state);\n }\n isComponentVisibleInSomeRow(component) {\n const rows = this.editRows;\n const savedStates = [EditRowState.Saved, EditRowState.Editing, EditRowState.Draft];\n const savedRows = rows.filter(row => lodash_1.default.includes(savedStates, row.state));\n this.visibleInHeader = this.visibleInHeader || [];\n const changeVisibleInHeader = (component, isVisible) => {\n if (!isVisible) {\n lodash_1.default.remove(this.visibleInHeader, (key) => key === component.key);\n }\n if (isVisible && !lodash_1.default.includes(this.visibleInHeader, component.key)) {\n this.visibleInHeader.push(component.key);\n }\n };\n if (lodash_1.default.isEmpty(rows)) {\n const rowComponents = this.createRowComponents({}, 0);\n let checkComponent;\n (0, utils_1.eachComponent)(rowComponents, (comp) => {\n if (comp.component.key === component.key) {\n checkComponent = comp;\n }\n comp.checkConditions();\n });\n const isVisible = checkComponent ? checkComponent.visible : true;\n [...this.components].forEach((comp) => this.removeComponent(comp, this.components));\n changeVisibleInHeader(component, isVisible);\n return isVisible;\n }\n const isOpenRowWhenEmpty = lodash_1.default.get(this.component, 'openWhenEmpty') && rows.length === 1 && rows[0].state === EditRowState.New;\n if (!lodash_1.default.isEmpty(rows) && lodash_1.default.isEmpty(savedRows) && !isOpenRowWhenEmpty) {\n return lodash_1.default.includes(this.visibleInHeader, component.key);\n }\n return lodash_1.default.some(isOpenRowWhenEmpty ? rows : savedRows, (row, index) => {\n const editingRow = row.state === EditRowState.Editing;\n let isVisible;\n if (!editingRow) {\n const flattenedComponents = this.flattenComponents(index);\n const instance = flattenedComponents[component.key];\n isVisible = instance ? instance.visible : true;\n changeVisibleInHeader(component, isVisible);\n }\n else {\n isVisible = lodash_1.default.includes(this.visibleInHeader, component.key);\n }\n return isVisible;\n });\n }\n render(children) {\n if (this.builderMode) {\n return super.render();\n }\n const dataValue = this.dataValue;\n const headerTemplate = this.headerTemplate;\n const t = this.t.bind(this);\n const templateName = this.displayAsTable ? 'editgridTable' : 'editgrid';\n return super.render(children || this.renderTemplate(templateName, {\n ref: {\n row: this.rowRef,\n addRow: this.addRowRef,\n saveRow: this.saveRowRef,\n cancelRow: this.cancelRowRef,\n },\n header: this.renderString(headerTemplate, {\n displayValue: (component) => this.displayComponentValue(component, true),\n components: this.component.components,\n value: dataValue,\n t\n }),\n footer: this.renderString(lodash_1.default.get(this.component, 'templates.footer'), {\n components: this.component.components,\n value: dataValue,\n t\n }),\n rows: this.editRows.map(this.renderRow.bind(this)),\n openRows: this.editRows.map((row) => this.isOpen(row)),\n errors: this.editRows.map((row) => row.error),\n hasAddButton: this.hasAddButton(),\n hasRemoveButtons: this.hasRemoveButtons(),\n }));\n }\n renderComponents(components) {\n components = components || this.getComponents();\n const children = components.map(component => component.render());\n const templateName = this.displayAsTable && this.prevHasAddButton ? 'tableComponents' : 'components';\n return this.renderTemplate(templateName, {\n children,\n components,\n });\n }\n attach(element) {\n if (this.builderMode) {\n return super.attach(element);\n }\n this.loadRefs(element, {\n [this.addRowRef]: 'multiple',\n [this.saveRowRef]: 'multiple',\n [this.cancelRowRef]: 'multiple',\n [this.rowRef]: 'multiple',\n });\n this.addRowElements.forEach((addButton) => {\n this.addEventListener(addButton, 'click', () => this.addRow());\n });\n let openRowCount = 0;\n this.rowElements.forEach((row, rowIndex) => {\n const editRow = this.editRows[rowIndex];\n if (editRow === null || editRow === void 0 ? void 0 : editRow.isRowSelected) {\n row.classList.add('selected');\n }\n if (this.isOpen(editRow)) {\n this.attachComponents(row, editRow.components);\n this.addEventListener(this.saveRowElements[openRowCount], 'click', () => this.saveRow(rowIndex, true));\n this.addEventListener(this.cancelRowElements[openRowCount], 'click', () => this.cancelRow(rowIndex));\n openRowCount++;\n }\n else {\n // Attach edit and remove button events.\n [\n {\n className: 'removeRow',\n event: 'click',\n action: () => this.removeRow(rowIndex, true),\n },\n {\n className: 'editRow',\n event: 'click',\n action: () => {\n this.editRow(rowIndex).then(() => {\n var _a;\n if (this.component.rowDrafts) {\n const errors = this.validateRow(editRow, false);\n const shouldShowRowErrorsAlert = this.component.modal && errors.length && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted);\n if (shouldShowRowErrorsAlert) {\n this.alert.showErrors(errors, false);\n editRow.alerts = true;\n }\n }\n });\n },\n },\n {\n className: 'row',\n event: 'click',\n action: () => {\n row.classList.toggle('selected');\n let eventName = 'editGridSelectRow';\n if (Array.from(row.classList).includes('selected')) {\n editRow.isRowSelected = true;\n }\n else {\n delete editRow.isRowSelected;\n eventName = 'editGridUnSelectRow';\n }\n this.emit(eventName, {\n component: this.component,\n data: this.dataValue[rowIndex]\n });\n },\n }\n ].forEach(({ className, event, action, }) => {\n const elements = row.getElementsByClassName(className);\n Array.prototype.forEach.call(elements, (element) => {\n if (this.options.pdf && lodash_1.default.intersection(element.classList, ['editRow', 'removeRow']).length) {\n element.style.display = 'none';\n }\n else {\n this.addEventListener(element, event, action);\n }\n });\n });\n }\n });\n // Add open class to the element if any edit grid row is open\n if (openRowCount) {\n this.addClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n }\n else {\n this.removeClass(this.refs.component, `formio-component-${this.component.type}-row-open`);\n }\n return super.attach(element);\n }\n flattenRowDataValue(dataValue) {\n const flattened = {};\n Object.keys(dataValue).forEach((key) => {\n if (lodash_1.default.isObject(dataValue[key]) && !lodash_1.default.isNil(dataValue[key])) {\n Object.assign(flattened, this.flattenRowDataValue(dataValue[key]));\n }\n else {\n flattened[key] = dataValue[key];\n }\n });\n return flattened;\n }\n isComponentVisibleInRow(component, flattenedComponents) {\n const instance = flattenedComponents[component.key];\n return instance ? instance.visible : true;\n }\n displayComponentValue(component, header) {\n return !!((!component.hasOwnProperty('tableView') || component.tableView)\n && header ? this.isComponentVisibleInSomeRow(component) : lodash_1.default.includes(this.visibleInHeader, component.key));\n }\n renderRow(row, rowIndex) {\n const dataValue = this.dataValue;\n if (this.isOpen(row)) {\n return this.renderComponents(row.components);\n }\n else {\n const flattenedComponents = this.flattenComponents(rowIndex);\n const rowTemplate = this.rowTemplate;\n return this.renderString(rowTemplate, {\n row: dataValue[rowIndex] || {},\n data: this.data,\n rowIndex,\n components: this.component.components,\n flattenedComponents,\n displayValue: (component) => this.displayComponentValue(component),\n isVisibleInRow: (component) => this.isComponentVisibleInRow(component, flattenedComponents),\n getView: (component, data) => {\n var _a, _b;\n const instance = flattenedComponents[component.key];\n const view = instance ? instance.getView(data || instance.dataValue) : '';\n // If there is an html tag in view, don't allow it to be injected in template\n const htmlTagRegExp = new RegExp('<(.*?)>');\n return typeof view === 'string' && view.length && !((_a = instance.component) === null || _a === void 0 ? void 0 : _a.template) && htmlTagRegExp.test(view) && ((_b = instance.component) === null || _b === void 0 ? void 0 : _b.inputFormat) !== 'html'\n ? `<input type=\"text\" value=\"${view.replace(/\"/g, '"')}\" readonly/>`\n : view;\n },\n state: this.editRows[rowIndex].state,\n t: this.t.bind(this)\n });\n }\n }\n eachComponent(fn, rowIndex) {\n lodash_1.default.each(this.getComponents(rowIndex), (component, index) => {\n if (fn(component, index) === false) {\n return false;\n }\n });\n }\n flattenComponents(rowIndex) {\n const result = {};\n this.everyComponent((component) => {\n result[component.component.flattenAs || component.key] = component;\n }, rowIndex);\n return result;\n }\n getComponents(rowIndex) {\n var _a;\n // Ensure editrows is set.\n this.editRows = this.editRows || [];\n return this.builderMode\n ? super.getComponents()\n : lodash_1.default.isNumber(rowIndex)\n ? (((_a = this.editRows[rowIndex]) === null || _a === void 0 ? void 0 : _a.components) || [])\n : this.editRows.reduce((result, row) => result.concat(row.components || []), []);\n }\n destroy(all = false) {\n this.calculatedValue = undefined;\n super.destroy(all);\n }\n destroyComponents(all = false, rowIndex = 0) {\n if (this.builderMode) {\n return super.destroyComponents(all);\n }\n const components = this.getComponents(rowIndex).slice();\n components.forEach((comp) => this.removeComponent(comp, this.components, all));\n }\n createRow(dataObj, rowIndex) {\n const editRow = {\n components: this.createRowComponents(dataObj, rowIndex),\n data: dataObj,\n state: EditRowState.New,\n backup: null,\n error: null,\n rowIndex,\n };\n this.editRows.push(editRow);\n if (this.inlineEditMode) {\n this.dataValue.push(dataObj);\n }\n return editRow;\n }\n addRow() {\n if (this.options.readOnly) {\n return;\n }\n const dataObj = {};\n const rowIndex = this.editRows.length;\n const editRow = this.createRow(dataObj, rowIndex);\n if (editRow.state === EditRowState.New) {\n this.emptyRow = (0, utils_1.fastCloneDeep)(editRow.data);\n }\n if (this.inlineEditMode) {\n this.triggerChange();\n }\n this.emit('editGridAddRow', {\n component: this.component,\n row: editRow,\n });\n this.processRow('checkData', null, {}, editRow.data, editRow.components);\n if (this.component.modal) {\n this.addRowModal(rowIndex);\n }\n else {\n this.redraw();\n }\n return editRow;\n }\n addRowModal(rowIndex) {\n const modalContent = this.ce('div');\n const editRow = this.editRows[rowIndex];\n editRow.willBeSaved = false;\n const { components } = editRow;\n modalContent.innerHTML = this.renderComponents(components);\n const dialog = this.component.modal ? this.createModal(modalContent, {}, () => this.showDialog(rowIndex)) : undefined;\n dialog.classList.add(`editgrid-row-modal-${this.id}`);\n editRow.dialog = dialog;\n if (this.alert) {\n this.alert.clear();\n this.alert = null;\n }\n this.alert = new Alert_1.default(dialog.refs.dialogContents, this);\n this.addEventListener(dialog, 'close', () => {\n if (!editRow.willBeSaved) {\n if (this.editRows[rowIndex] && this.editRows[rowIndex].state !== EditRowState.New) {\n this.editRows[rowIndex].components.forEach((comp) => {\n comp.setPristine(true);\n });\n }\n this.cancelRow(rowIndex);\n }\n if (this.alert) {\n this.alert.clear();\n this.alert = null;\n }\n // Remove references to dialog elements to prevent possible in some cases memory leaks\n delete editRow.confirmationDialog;\n delete editRow.dialog;\n });\n dialog.refs.dialogContents.appendChild(this.ce('button', {\n class: 'btn btn-primary',\n onClick: () => {\n // After an attempt to save, all the components inside the row should become not pristine\n if (!this.component.rowDrafts) {\n editRow.components.forEach((comp) => comp.setPristine(false));\n }\n const errors = this.validateRow(editRow, true);\n if (!errors.length || this.component.rowDrafts) {\n editRow.willBeSaved = true;\n dialog.close();\n this.saveRow(rowIndex, true);\n }\n else {\n this.alert.showErrors(errors, false);\n editRow.alerts = true;\n }\n },\n }, this.component.saveRow || 'Save'));\n this.emit('editGridOpenModal', {\n component: this.component,\n row: editRow,\n instance: this,\n });\n return this.attachComponents(modalContent, components);\n }\n showDialog(rowIndex) {\n const editRow = this.editRows[rowIndex];\n if (editRow.state === EditRowState.New ? lodash_1.default.isEqual(this.emptyRow, editRow.data) : lodash_1.default.isEqual(editRow.backup, editRow.data)) {\n return Promise.resolve();\n }\n const wrapper = this.ce('div', { ref: 'confirmationDialog' });\n const dialogContent = this.component.dialogTemplate || this.defaultDialogTemplate;\n wrapper.innerHTML = dialogContent;\n wrapper.refs = {};\n this.loadRefs.call(wrapper, wrapper, {\n dialogHeader: 'single',\n dialogCancelButton: 'single',\n dialogYesButton: 'single',\n });\n const dialog = this.createModal(wrapper);\n dialog.classList.add(`editgrid-row-modal-confirmation-${this.id}`);\n const close = (event) => {\n event.preventDefault();\n dialog.close();\n };\n let dialogResult;\n const promise = new Promise((resolve, reject) => {\n dialogResult = { resolve, reject };\n });\n this.addEventListener(wrapper.refs.dialogYesButton, 'click', (event) => {\n close(event);\n dialogResult.resolve();\n });\n this.addEventListener(wrapper.refs.dialogCancelButton, 'click', (event) => {\n close(event);\n dialogResult.reject();\n });\n editRow.confirmationDialog = dialog;\n return promise;\n }\n editRow(rowIndex) {\n const editRow = this.editRows[rowIndex];\n const isAlreadyEditing = editRow.state === EditRowState.Editing || editRow.state === EditRowState.New;\n if (!editRow || isAlreadyEditing) {\n return Promise.resolve();\n }\n editRow.prevState = editRow.state;\n editRow.state = this.options.readOnly ? EditRowState.Viewing : EditRowState.Editing;\n if (this.lazyLoad && (editRow.components.length === 0)) {\n editRow.components = this.createRowComponents(editRow.data, rowIndex);\n }\n const dataSnapshot = (0, utils_1.fastCloneDeep)(editRow.data);\n if (this.inlineEditMode) {\n editRow.backup = dataSnapshot;\n }\n else {\n editRow.backup = (0, utils_1.fastCloneDeep)(editRow.data);\n editRow.data = dataSnapshot;\n this.restoreRowContext(editRow);\n }\n this.emit('editGridEditRow', {\n component: this.component,\n row: editRow,\n instance: this,\n });\n if (this.component.modal) {\n return this.addRowModal(rowIndex);\n }\n return this.redraw();\n }\n clearErrors(rowIndex) {\n const editRow = this.editRows[rowIndex];\n if (editRow && Array.isArray(editRow.components)) {\n editRow.components.forEach((comp) => {\n comp.setPristine(true);\n comp.setCustomValidity('');\n });\n }\n }\n cancelRow(rowIndex) {\n if (this.options.readOnly) {\n return;\n }\n const editRow = this.editRows[rowIndex];\n switch (editRow.state) {\n case EditRowState.New: {\n editRow.state = EditRowState.Removed;\n this.clearErrors(rowIndex);\n this.destroyComponents(false, rowIndex);\n if (this.inlineEditMode) {\n this.splice(rowIndex);\n }\n this.editRows.splice(rowIndex, 1);\n this.openWhenEmpty();\n break;\n }\n case EditRowState.Editing: {\n editRow.state = editRow.prevState;\n if (this.inlineEditMode) {\n this.dataValue[rowIndex] = editRow.backup;\n }\n editRow.data = editRow.backup;\n editRow.backup = null;\n this.restoreRowContext(editRow);\n this.clearErrors(rowIndex);\n break;\n }\n }\n this.emit('editGridCancelRow', {\n instance: this,\n component: this.component,\n editRow,\n });\n this.checkValidity(null, true);\n this.redraw();\n if (this.component.rowDrafts) {\n this.checkValidity(this.data, false);\n }\n }\n saveRow(rowIndex, modified) {\n var _a, _b;\n const editRow = this.editRows[rowIndex];\n if (this.options.readOnly) {\n return;\n }\n // After an attempt to save, all the components inside the row should become not pristine\n if (!this.component.rowDrafts) {\n editRow.components.forEach((comp) => comp.setPristine(false));\n }\n const errors = this.validateRow(editRow, true);\n if (!this.component.rowDrafts) {\n if (errors.length) {\n return false;\n }\n }\n if (this.saveEditMode) {\n const dataValue = this.dataValue;\n if ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.component.typeChangeEnabled) {\n this.root.focusedComponent = null;\n }\n switch (editRow.state) {\n case EditRowState.New: {\n const newIndex = dataValue.length;\n dataValue.push(editRow.data);\n editRow.components.forEach(component => component.rowIndex = newIndex);\n if (rowIndex !== newIndex) {\n this.editRows.splice(rowIndex, 1);\n this.editRows.splice(newIndex, 0, editRow);\n }\n break;\n }\n case EditRowState.Editing: {\n dataValue[rowIndex] = editRow.data;\n break;\n }\n }\n }\n editRow.state = this.component.rowDrafts && errors.length ? EditRowState.Draft : EditRowState.Saved;\n editRow.backup = null;\n this.updateValue();\n this.emit('editGridSaveRow', {\n component: this.component,\n row: editRow.data,\n instance: this\n });\n this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n if (this.component.rowDrafts) {\n editRow.components.forEach(comp => comp.setPristine(this.pristine));\n }\n this.checkValidity(null, true);\n this.redraw();\n if (editRow.alerts) {\n editRow.alerts = false;\n }\n return true;\n }\n beforeFocus(component) {\n if ('beforeFocus' in this.parent) {\n this.parent.beforeFocus(this);\n }\n const relativePath = this.getRelativePath(component.path);\n const arrayPath = (0, utils_1.getArrayFromComponentPath)(relativePath);\n const rowIndex = arrayPath[0];\n let rowToEditIndex = arrayPath[0];\n this.editRows.forEach((row, indexInArray) => {\n if (row.rowIndex === rowIndex) {\n rowToEditIndex = indexInArray;\n }\n });\n if (lodash_1.default.isNumber(rowToEditIndex)) {\n this.editRow(rowToEditIndex);\n }\n }\n updateComponentsRowIndex(components, rowIndex) {\n components.forEach((component, colIndex) => {\n component.rowIndex = rowIndex;\n component.row = `${rowIndex}-${colIndex}`;\n });\n }\n updateRowsComponents(rowIndex) {\n this.editRows.slice(rowIndex).forEach((row, index) => {\n this.updateComponentsRowIndex(row.components, rowIndex + index);\n });\n }\n baseRemoveRow(rowIndex) {\n const editRow = this.editRows[rowIndex];\n editRow.state = EditRowState.Removed;\n this.destroyComponents(false, rowIndex);\n return editRow;\n }\n removeRow(rowIndex, modified) {\n if (this.options.readOnly) {\n return;\n }\n this.clearErrors(rowIndex);\n this.baseRemoveRow(rowIndex);\n this.removeSubmissionMetadataRow(rowIndex);\n this.splice(rowIndex);\n this.emit('editGridDeleteRow', {\n index: rowIndex\n });\n this.editRows.splice(rowIndex, 1);\n this.openWhenEmpty();\n this.updateRowsComponents(rowIndex);\n this.updateValue();\n this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });\n this.checkValidity(null, true);\n this.checkData();\n this.redraw();\n }\n createRowComponents(row, rowIndex, recreatePartially) {\n // Iterate through existing components and destroy the ones with the same rowIndex.\n if (this.components) {\n for (let i = 0; i < this.components.length; i++) {\n if (this.components[i].rowIndex === rowIndex) {\n this.components[i].destroy();\n this.components.splice(i, 1);\n }\n }\n }\n const currentRowComponents = lodash_1.default.get(this.editRows, `[${rowIndex}].components`, null);\n return this.component.components.map((col, colIndex) => {\n var _a;\n if (recreatePartially && currentRowComponents && this.variableTypeComponentsIndexes.length) {\n const currentComp = currentRowComponents[colIndex];\n const shouldRecreate = lodash_1.default.includes(this.variableTypeComponentsIndexes, colIndex) && (currentComp === null || currentComp === void 0 ? void 0 : currentComp.type) !== ((_a = currentComp === null || currentComp === void 0 ? void 0 : currentComp.component) === null || _a === void 0 ? void 0 : _a.type);\n if (!shouldRecreate) {\n return currentComp;\n }\n col = currentComp.component;\n }\n const column = lodash_1.default.clone(col);\n const options = lodash_1.default.clone(this.options);\n options.name += `[${rowIndex}]`;\n options.row = `${rowIndex}-${colIndex}`;\n options.rowIndex = rowIndex;\n options.onChange = (flags = {}, changed, modified) => {\n var _a, _b;\n if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && (((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id)) {\n changed.instance.root.triggerChange(flags, changed, modified);\n }\n else if (!this.component.modal) {\n this.triggerRootChange(flags, changed, modified);\n }\n if (this.inlineEditMode) {\n return;\n }\n const editRow = this.editRows[rowIndex];\n if (editRow) {\n this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), editRow.data, editRow.components);\n this.validateRow(editRow, false, false);\n }\n if (this.variableTypeComponentsIndexes.length) {\n const typeChanged = this.checkRowVariableTypeComponents(editRow, rowIndex);\n if (typeChanged) {\n this.redraw();\n }\n }\n };\n const comp = this.createComponent(lodash_1.default.assign({}, column, { row: options.row }), options, row, null, recreatePartially && currentRowComponents ? currentRowComponents[colIndex] : null);\n comp.rowIndex = rowIndex;\n comp.inEditGrid = true;\n return comp;\n });\n }\n hasOpenRows() {\n return this.editRows.some(row => this.isOpen(row));\n }\n getAttachedData(data = null) {\n const ourData = (0, utils_1.fastCloneDeep)(data || this._data || this.rootValue);\n lodash_1.default.set(ourData, this.key, this.editRows.map((row) => row.data));\n return ourData;\n }\n shouldValidateDraft(editRow) {\n var _a, _b;\n // Draft rows should be validated only when there was an attempt to submit a form\n return (editRow.state === EditRowState.Draft &&\n !this.pristine &&\n !((_a = this.root) === null || _a === void 0 ? void 0 : _a.pristine) &&\n !this.hasOpenRows()) ||\n ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted);\n }\n shouldValidateRow(editRow, dirty, fromSubmission) {\n return this.shouldValidateDraft(editRow) ||\n editRow.state === EditRowState.New ||\n editRow.state === EditRowState.Editing ||\n editRow.alerts ||\n fromSubmission ||\n dirty;\n }\n validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {\n var _a, _b;\n editRow.errors = [];\n if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {\n const silentCheck = forceSilentCheck === false ? false : ((this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck);\n const rootValue = (0, utils_1.fastCloneDeep)(this.rootValue);\n const editGridValue = lodash_1.default.get(rootValue, this.path, []);\n editGridValue[editRow.rowIndex] = editRow.data;\n lodash_1.default.set(rootValue, this.path, editGridValue);\n const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });\n const errors = (0, process_1.processSync)({\n components: this.component.components,\n data: rootValue,\n row: editRow.data,\n process: 'validateRow',\n instances: this.componentsMap,\n scope: { errors: [] },\n parent: this.component,\n parentPaths: Object.assign(Object.assign({}, this.paths), { dataIndex: editRow.rowIndex }),\n processors: [\n {\n process: validationProcessorProcess,\n processSync: validationProcessorProcess\n }\n ]\n }).errors;\n editRow.errors = (this.component.modal || this.component.rowDrafts)\n ? errors\n : errors.filter((err) => lodash_1.default.find(this.visibleErrors, ['component.id', err.component.id]));\n }\n // TODO: this is essentially running its own custom validation and should be moved into a validation rule\n if (this.component.validate && this.component.validate.row) {\n const valid = this.evaluate(this.component.validate.row, {\n valid: (editRow.length === 0),\n row: editRow.data\n }, 'valid', true);\n if (valid.toString() !== 'true') {\n editRow.errors.push({\n type: 'error',\n rowError: true,\n message: valid.toString()\n });\n }\n if (valid === null) {\n editRow.errors.push({\n type: 'error',\n message: this.t('componentInvalidRowValidation', { componentKey: this.key })\n });\n }\n }\n if (editRow.alerts && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {\n this.showRowErrorAlerts(editRow, editRow.errors);\n }\n else if ((_b = editRow.errors) === null || _b === void 0 ? void 0 : _b.length) {\n this.setCustomValidity(editRow.errors, dirty);\n }\n return editRow.errors;\n }\n showRowErrorAlerts(editRow, errors) {\n if (editRow.alerts) {\n if (this.alert) {\n if (errors.length) {\n this.alert.showErrors(errors, false);\n editRow.alerts = true;\n }\n else {\n this.alert.clear();\n this.alert = null;\n }\n }\n }\n }\n /**\n * @returns {boolean} - Return that this component processes its own validation.\n */\n get processOwnValidation() {\n return true;\n }\n checkComponentValidity(data, dirty, row, options = {}, errors = []) {\n var _a, _b;\n const { silentCheck, fromSubmission } = options;\n const superValid = super.checkComponentValidity(data, dirty, row, options, errors);\n // If super tells us that component invalid and there is no need to update alerts, just return false\n if (!superValid && (!this.alert && !this.hasOpenRows())) {\n return false;\n }\n let rowsEditing = false;\n const allRowErrors = [];\n this.editRows.forEach((editRow, index) => {\n // Trigger all errors on the row.\n const rowErrors = this.validateRow(editRow, dirty, silentCheck, fromSubmission);\n errors.push(...rowErrors);\n allRowErrors.push(...rowErrors);\n if (this.rowRefs) {\n const rowContainer = this.rowRefs[index];\n if (rowContainer) {\n const errorContainer = rowContainer.querySelector('.editgrid-row-error');\n if (rowErrors.length && errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n const rowError = rowErrors.find(error => error.rowError);\n this.addClass(errorContainer, 'help-block');\n errorContainer.textContent = this.t(rowError ? rowError.message : this.errorMessage('invalidRowError'));\n }\n else if (errorContainer) {\n errorContainer.textContent = '';\n this.removeClass(errorContainer, 'help-block');\n }\n }\n }\n // If this is a dirty check, and any rows are still editing, we need to throw validation error.\n rowsEditing |= (dirty && this.isOpen(editRow));\n });\n if (allRowErrors.length) {\n if (!silentCheck && (dirty || this.dirty) && (!this.component.rowDrafts || ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted))) {\n this.setCustomValidity(this.t(this.errorMessage('invalidRowsError')), dirty);\n this.removeClass(this.element, 'has-error');\n }\n return false;\n }\n else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {\n this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);\n errors.push(...this._errors);\n return false;\n }\n const message = this.invalid || this.invalidMessage(data, dirty, false, row);\n if (allRowErrors.length && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submitted) && !message) {\n this._errors = this.setCustomValidity(message, dirty);\n errors.push(...this._errors);\n this.root.showErrors([message]);\n }\n else {\n this._errors = this.setCustomValidity(message, dirty);\n errors.push(...this._errors);\n }\n return superValid;\n }\n setRowInvalid(ref, index) {\n const editRow = this.editRows[index];\n const errorContainer = ref.querySelector('.editgrid-row-error');\n if (errorContainer && (!this.component.rowDrafts || this.shouldValidateDraft(editRow))) {\n this.addClass(errorContainer, 'help-block');\n errorContainer.textContent = this.t(this.errorMessage('invalidRowError'));\n }\n else if (errorContainer) {\n errorContainer.textContent = '';\n }\n }\n changeState(changed, flags) {\n if (this.visible && (changed || (flags.resetValue && this.component.modalEdit))) {\n this.rebuild();\n }\n else {\n this.redraw();\n }\n }\n setValue(value, flags = {}) {\n if (!value) {\n value = this.defaultValue;\n }\n if (!Array.isArray(value)) {\n if (typeof value === 'object') {\n value = [value];\n }\n else {\n return false;\n }\n }\n const changed = this.hasChanged(value, this.dataValue);\n this.dataValue = value;\n // Refresh editRow data when data changes.\n this.dataValue.forEach((row, rowIndex) => {\n const editRow = this.editRows[rowIndex];\n if (editRow) {\n editRow.data = row;\n this.restoreRowContext(editRow, flags);\n editRow.state = EditRowState.Saved;\n editRow.backup = null;\n editRow.errors = [];\n }\n else {\n this.editRows[rowIndex] = {\n components: this.lazyLoad ? [] : this.createRowComponents(row, rowIndex),\n data: row,\n state: EditRowState.Saved,\n backup: null,\n errors: [],\n };\n }\n });\n let { length: dataLength } = this.dataValue;\n // If the last row is a new row, then do not remove it.\n if (this.editRows[dataLength] && (this.editRows[dataLength].state === EditRowState.New)) {\n dataLength = (dataLength + 1);\n }\n this.editRows.slice(dataLength).forEach((editRow, index) => this.baseRemoveRow(dataLength + index));\n this.editRows = this.editRows.slice(0, dataLength);\n this.openWhenEmpty();\n this.updateOnChange(flags, changed);\n this.changeState(changed, flags);\n return changed;\n }\n openWhenEmpty() {\n const shouldBeOpened = !this.dataValue.length && this.component.openWhenEmpty;\n const hasNoRows = !this.editRows.length;\n if (hasNoRows && shouldBeOpened && !this.builderMode) {\n const dataObj = {};\n this.createRow(dataObj, 0);\n }\n }\n restoreRowContext(editRow, flags = {}) {\n editRow.components.forEach((component) => {\n component.data = editRow.data;\n this.setNestedValue(component, editRow.data, flags);\n });\n }\n emptyRows() {\n this.editRows.forEach((editRow, index) => this.destroyComponents(false, index));\n this.editRows = [];\n }\n resetValue() {\n super.resetValue();\n this.emptyRows();\n }\n}\nexports[\"default\"] = EditGridComponent;\nEditGridComponent.prototype.hasChanged = Component_1.default.prototype.hasChanged;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/editgrid/EditGrid.js?");
|
5176
5176
|
|
5177
5177
|
/***/ }),
|
5178
5178
|
|
@@ -6085,7 +6085,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
|
|
6085
6085
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
6086
6086
|
|
6087
6087
|
"use strict";
|
6088
|
-
eval("\n/* global jQuery */\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;\nexports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nexports._ = lodash_1.default;\nconst json_logic_js_1 = __importDefault(__webpack_require__(/*! json-logic-js */ \"./node_modules/json-logic-js/logic.js\"));\nexports.jsonLogic = json_logic_js_1.default;\nconst moment_timezone_1 = __importDefault(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\nexports.moment = moment_timezone_1.default;\nconst jstimezonedetect_1 = __importDefault(__webpack_require__(/*! jstimezonedetect */ \"./node_modules/jstimezonedetect/dist/jstz.min.js\"));\nconst operators_1 = __webpack_require__(/*! ./jsonlogic/operators */ \"./lib/cjs/utils/jsonlogic/operators.js\");\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.cjs.js\"));\nconst formUtils_1 = __webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nObject.defineProperty(exports, \"Evaluator\", ({ enumerable: true, get: function () { return Evaluator_1.Evaluator; } }));\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\nexports.ConditionOperators = conditionOperators_1.default;\nconst interpolate = Evaluator_1.Evaluator.interpolate;\nexports.interpolate = interpolate;\n__exportStar(__webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\"), exports);\n// Configure JsonLogic\noperators_1.lodashOperators.forEach((name) => json_logic_js_1.default.add_operation(`_${name}`, lodash_1.default[name]));\n// Retrieve Any Date\njson_logic_js_1.default.add_operation('getDate', (date) => {\n return (0, moment_timezone_1.default)(date).toISOString();\n});\n// Set Relative Minimum Date\njson_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {\n return (0, moment_timezone_1.default)().subtract(relativeMinDate, 'days').toISOString();\n});\n// Set Relative Maximum Date\njson_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {\n return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();\n});\n/**\n * Evaluate a method.\n * @param {Function|string|object} func - The function to evaluate.\n * @param {*} args - A map of arguments to pass to the function.\n * @param {string} ret - The name of the \"return\" variable in the script.\n * @param {boolean} interpolate - True if the script should be interpolated before being executed.\n * @param {import('@formio/core').EvaluatorOptions} options - The evaluator options.\n * @returns {*} - The result of the evaluation.\n */\nfunction evaluate(func, args, ret, interpolate, options = {}) {\n return Evaluator_1.Evaluator.evaluate(func, args, ret, interpolate, undefined, options);\n}\nexports.evaluate = evaluate;\n/**\n * Returns a random compoennt ID.\n * @returns {string} - A random component ID.\n */\nfunction getRandomComponentId() {\n return `e${Math.random().toString(36).substring(7)}`;\n}\nexports.getRandomComponentId = getRandomComponentId;\n/**\n * Get a property value of an element.\n * @param {CSSStyleDeclaration} style - The style element to get the property value from.\n * @param {string} prop - The property to get the value for.\n * @returns {number} - The value of the property.\n */\nfunction getPropertyValue(style, prop) {\n let value = style.getPropertyValue(prop);\n value = value ? value.replace(/[^0-9.]/g, '') : '0';\n return parseFloat(value);\n}\nexports.getPropertyValue = getPropertyValue;\n/**\n * Get an elements bounding rectagle.\n * @param {HTMLElement} element - A DOM element to get the bounding rectangle for.\n * @returns {{x: number, y: number, width: number, height: number}} - The bounding rectangle.\n */\nfunction getElementRect(element) {\n const style = window.getComputedStyle(element, null);\n return {\n x: getPropertyValue(style, 'left'),\n y: getPropertyValue(style, 'top'),\n width: getPropertyValue(style, 'width'),\n height: getPropertyValue(style, 'height')\n };\n}\nexports.getElementRect = getElementRect;\n/**\n * Get non HTMLElement property in the window object\n * @param {string} property - The window property to fetch the script plugin from.\n * @returns {any | undefined} - The HTML Element property on the window object.\n */\nfunction getScriptPlugin(property) {\n const obj = window[property];\n if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2\n obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {\n return undefined;\n }\n return obj;\n}\nexports.getScriptPlugin = getScriptPlugin;\n/**\n * Determines the boolean value of a setting.\n * @param {string|boolean} value - A string or boolean value to convert to boolean.\n * @returns {boolean} - The boolean value of the setting.\n */\nfunction boolValue(value) {\n if (lodash_1.default.isBoolean(value)) {\n return value;\n }\n else if (lodash_1.default.isString(value)) {\n return (value.toLowerCase() === 'true');\n }\n else {\n return !!value;\n }\n}\nexports.boolValue = boolValue;\n/**\n * Check to see if an ID is a mongoID.\n * @param {string} text - The text to check if it is a mongoID.\n * @returns {boolean} - TRUE if the text is a mongoID; FALSE otherwise.\n */\nfunction isMongoId(text) {\n return !!text.toString().match(/^[0-9a-fA-F]{24}$/);\n}\nexports.isMongoId = isMongoId;\n/**\n * Checks the calculated value for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the calculated value.\n * @param {import('@formio/core').Submission} submission - A submission object.\n * @param {*} rowData - The contextual row data for the component.\n */\nfunction checkCalculated(component, submission, rowData) {\n // Process calculated value stuff if present.\n if (component.calculateValue) {\n lodash_1.default.set(rowData, component.key, evaluate(component.calculateValue, {\n value: undefined,\n data: submission ? submission.data : rowData,\n row: rowData,\n util: this,\n component\n }, 'value'));\n }\n}\nexports.checkCalculated = checkCalculated;\n/**\n * Check if a simple conditional evaluates to true.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {import('@formio/core').SimpleConditional} condition - The condition to check.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\n/**\n *\n * @param conditionPaths\n * @param data\n */\nfunction getConditionalPathsRecursive(conditionPaths, data) {\n let currentGlobalIndex = 0;\n const conditionalPathsArray = [];\n const getConditionalPaths = (data, currentPath = '', localIndex = 0) => {\n currentPath = currentPath.replace(/^\\.+|\\.+$/g, '');\n const currentLocalIndex = localIndex;\n const currentData = lodash_1.default.get(data, currentPath);\n if (Array.isArray(currentData) && currentData.filter(Boolean).length > 0) {\n if (currentData.some(element => typeof element !== 'object')) {\n return;\n }\n const hasInnerDataArray = currentData.find(x => Array.isArray(x[conditionPaths[currentLocalIndex]]));\n if (hasInnerDataArray) {\n currentData.forEach((_, indexOutside) => {\n const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;\n getConditionalPaths(data, innerCompDataPath, currentLocalIndex + 1);\n });\n }\n else {\n currentData.forEach((x, index) => {\n if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {\n const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;\n conditionalPathsArray.push(compDataPath);\n }\n });\n }\n }\n else {\n if (!conditionPaths[currentGlobalIndex]) {\n return;\n }\n currentGlobalIndex = currentGlobalIndex + 1;\n getConditionalPaths(data, `${currentPath}.${conditionPaths[currentGlobalIndex - 1]}`, currentGlobalIndex);\n }\n };\n getConditionalPaths(data);\n return conditionalPathsArray;\n}\n/**\n *\n * @param component\n * @param condition\n * @param row\n * @param data\n * @param instance\n */\nfunction checkSimpleConditional(component, condition, row, data, instance) {\n if (condition.when) {\n const value = getComponentActualValue(condition.when, data, row);\n const eq = String(condition.eq);\n const show = String(condition.show);\n // Special check for selectboxes component.\n if (lodash_1.default.isObject(value) && lodash_1.default.has(value, condition.eq)) {\n return String(value[condition.eq]) === show;\n }\n // FOR-179 - Check for multiple values.\n if (Array.isArray(value) && value.map(String).includes(eq)) {\n return show === 'true';\n }\n return (String(value) === eq) === (show === 'true');\n }\n else {\n const { conditions = [], conjunction = 'all', show = true } = condition;\n if (!conditions.length) {\n return true;\n }\n const conditionsResult = lodash_1.default.map(conditions, (cond) => {\n var _a, _b;\n const { value: comparedValue, operator, component: conditionComponentPath } = cond;\n if (!conditionComponentPath) {\n return true;\n }\n const splittedConditionPath = conditionComponentPath.split('.');\n const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);\n if (conditionalPaths.length > 0) {\n return conditionalPaths.map((path) => {\n const value = getComponentActualValue(path, data, row);\n const ConditionOperator = conditionOperators_1.default[operator];\n return ConditionOperator\n ? new ConditionOperator().getResult({ value, comparedValue, instance, component, path })\n : true;\n });\n }\n else {\n const value = getComponentActualValue(conditionComponentPath, data, row);\n const СonditionOperator = conditionOperators_1.default[operator];\n return СonditionOperator\n ? new СonditionOperator().getResult({ value, comparedValue, instance, component, path: conditionComponentPath })\n : true;\n }\n });\n let result = false;\n switch (conjunction) {\n case 'any':\n result = lodash_1.default.some(conditionsResult.flat(), res => !!res);\n break;\n default:\n result = lodash_1.default.every(conditionsResult.flat(), res => !!res);\n }\n return show ? result : !result;\n }\n}\nexports.checkSimpleConditional = checkSimpleConditional;\n/**\n * Returns a components normalized value.\n * @param {string} compPath - The full path to the component.\n * @param {*} data - The data object to get the value from.\n * @param {*} row - The contextual row data for the component.\n * @returns {*} - The normalized value of the component.\n */\nfunction getComponentActualValue(compPath, data, row) {\n let value = null;\n if (data) {\n value = (0, formUtils_1.getValue)({ data }, compPath);\n }\n if (row && lodash_1.default.isNil(value)) {\n value = (0, formUtils_1.getValue)({ data: row }, compPath);\n }\n // FOR-400 - Fix issue where falsey values were being evaluated as show=true\n if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {\n value = '';\n }\n return value;\n}\nexports.getComponentActualValue = getComponentActualValue;\n/**\n * Check custom javascript conditional.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {string} custom - The custom conditional string to evaluate.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {string} variable - The variable name for the result of the custom conditional.\n * @param {*} onError - A custom return if there is an error or the value is null from the evaluation.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {*} - The result of the evaulation.\n */\nfunction checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {\n if (typeof custom === 'string') {\n custom = `var ${variable} = true; ${custom}; return ${variable};`;\n }\n const value = (instance && instance.evaluate) ?\n instance.evaluate(custom, { row, data, form }) :\n evaluate(custom, { row, data, form });\n if (value === null) {\n return onError;\n }\n return value;\n}\nexports.checkCustomConditional = checkCustomConditional;\n/**\n * Check a component for JSON conditionals.\n * @param {import('@formio/core').Component} component - The component\n * @param {import('@formio/core').JSONConditional} json - The json conditional to check.\n * @param {*} row - The contextual row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The Form JSON of the form.\n * @param {*} onError - Custom return value if there is an error.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkJsonConditional(component, json, row, data, form, onError) {\n try {\n return json_logic_js_1.default.apply(json, {\n data,\n row,\n form,\n _: lodash_1.default,\n });\n }\n catch (err) {\n console.warn(`An error occurred in jsonLogic advanced condition for ${component.key}`, err);\n return onError;\n }\n}\nexports.checkJsonConditional = checkJsonConditional;\n/**\n * Returns the contextual row data for a component.\n * @param {import('@formio/core').Component} component - The component to get the row data for.\n * @param {*} row - The row data for the component.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @param {*} conditional - The component conditional.\n * @returns {*} - The contextual row data for the component.\n */\nfunction getRow(component, row, instance, conditional) {\n var _a, _b, _c;\n const condition = conditional || component.conditional;\n // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema\n if (!instance) {\n instance = lodash_1.default.cloneDeep(component);\n }\n const dataParent = getDataParentComponent(instance);\n if (dataParent) {\n const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;\n const isTriggerCondtionComponentPath = condition.when || !condition.conditions\n ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)\n : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });\n if (isTriggerCondtionComponentPath) {\n const newRow = {};\n lodash_1.default.set(newRow, parentPath, row);\n row = newRow;\n }\n }\n return row;\n}\n/**\n * Checks the conditions for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the condition.\n * @param {*} row - The data within a row\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkCondition(component, row, data, form, instance) {\n const { customConditional, conditional } = component;\n if (customConditional) {\n return checkCustomConditional(component, customConditional, row, data, form, 'show', true, instance);\n }\n else if (conditional && (conditional.when || lodash_1.default.some(conditional.conditions || [], condition => condition.component && condition.operator))) {\n row = getRow(component, row, instance);\n return checkSimpleConditional(component, conditional, row, data, instance);\n }\n else if (conditional && conditional.json) {\n return checkJsonConditional(component, conditional.json, row, data, form, true);\n }\n // Default to show.\n return true;\n}\nexports.checkCondition = checkCondition;\n/**\n * Test a trigger on a component.\n * @param {import('@formio/core').Component} component - The component to test the trigger against.\n * @param {import('@formio/core').LogicTrigger} trigger - The trigger configuration.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The root data object.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {any} instance - The component that is performing the trigger.\n * @returns {boolean} - TRUE if the trigger should fire; FALSE otherwise.\n */\nfunction checkTrigger(component, trigger, row, data, form, instance) {\n // If trigger is empty, don't fire it\n if (!trigger || !trigger[trigger.type]) {\n return false;\n }\n switch (trigger.type) {\n case 'simple':\n row = getRow(component, row, instance, trigger.simple);\n return checkSimpleConditional(component, trigger.simple, row, data, instance);\n case 'javascript':\n return checkCustomConditional(component, trigger.javascript, row, data, form, 'result', false, instance);\n case 'json':\n return checkJsonConditional(component, trigger.json, row, data, form, false);\n }\n // If none of the types matched, don't fire the trigger.\n return false;\n}\nexports.checkTrigger = checkTrigger;\n/**\n * Sets a property on a component via an executed Logic action.\n * @param {import('@formio/core').Component} component - The component to set the property on.\n * @param {import('@formio/core').LogicAction} action - The action to perform on the component.\n * @param {string} result - The name of the variable in the evaulation to use as the result.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The full submission data.\n * @param {any} instance - The component instance.\n * @returns {import('@formio/core').Component} - The modified component.\n */\nfunction setActionProperty(component, action, result, row, data, instance) {\n const property = action.property.value;\n switch (action.property.type) {\n case 'boolean': {\n const currentValue = lodash_1.default.get(component, property, false).toString();\n const newValue = action.state.toString();\n if (currentValue !== newValue) {\n lodash_1.default.set(component, property, newValue === 'true');\n }\n break;\n }\n case 'string': {\n const evalData = {\n data,\n row,\n component,\n result,\n };\n const textValue = action.property.component ? action[action.property.component] : action.text;\n const currentValue = lodash_1.default.get(component, property, '');\n const newValue = (instance && instance.interpolate)\n ? instance.interpolate(textValue, evalData)\n : Evaluator_1.Evaluator.interpolate(textValue, evalData);\n if (newValue !== currentValue) {\n lodash_1.default.set(component, property, newValue);\n }\n break;\n }\n }\n return component;\n}\nexports.setActionProperty = setActionProperty;\n/**\n * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World\n * @param {string} str - The string to remove HTML tags from.\n * @returns {string} - The string without HTML tags.\n */\nfunction removeHTML(str) {\n const doc = new window.DOMParser().parseFromString(str, 'text/html');\n return (doc.body.textContent || '').trim();\n}\nexports.removeHTML = removeHTML;\n/**\n * Unescape HTML characters like <, >, & and etc.\n * @param {string} str - The string to unescape.\n * @returns {string} - The unescaped string.\n */\nfunction unescapeHTML(str) {\n if (typeof window === 'undefined' || !('DOMParser' in window)) {\n return str;\n }\n const elem = document.createElement('textarea');\n elem.innerHTML = str;\n return elem.value;\n}\nexports.unescapeHTML = unescapeHTML;\n/**\n * Make HTML element from string\n * @param {string} str - The string to convert to an HTML element.\n * @param {string} selector - The selector to use to get the element once it is created.\n * @returns {HTMLElement} - The HTML element that was created.\n */\nfunction convertStringToHTMLElement(str, selector) {\n const doc = new window.DOMParser().parseFromString(str, 'text/html');\n return doc.body.querySelector(selector);\n}\nexports.convertStringToHTMLElement = convertStringToHTMLElement;\n/**\n * Make a filename guaranteed to be unique.\n * @param {string} name - The original name of the file.\n * @param {string} template - The template to use for the unique name.\n * @param {object} evalContext - The context to use for the evaluation.\n * @returns {string} - A unique filename.\n */\nfunction uniqueName(name, template, evalContext) {\n template = template || '{{fileName}}-{{guid}}';\n //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n if (!template.includes('{{guid}}')) {\n template = `${template}-{{guid}}`;\n }\n const parts = name.split('.');\n let fileName = parts.slice(0, parts.length - 1).join('.');\n const extension = parts.length > 1\n ? `.${lodash_1.default.last(parts)}`\n : '';\n //allow only 100 characters from original name to avoid issues with filename length restrictions\n fileName = fileName.substr(0, 100);\n evalContext = Object.assign(evalContext || {}, {\n fileName,\n guid: guid()\n });\n //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Returns a GUID\n * @returns {string} - A GUID.\n */\nfunction guid() {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n const r = Math.random() * 16 | 0;\n const v = c === 'x'\n ? r\n : (r & 0x3 | 0x8);\n return v.toString(16);\n });\n}\nexports.guid = guid;\n/**\n * Return a translated date setting.\n * @param {string|Date} date - The date to translate.\n * @returns {(null|Date)} - The translated date.\n */\nfunction getDateSetting(date) {\n if (lodash_1.default.isNil(date) || lodash_1.default.isNaN(date) || date === '') {\n return null;\n }\n if (date instanceof Date) {\n return date;\n }\n else if (typeof date.toDate === 'function') {\n return date.isValid() ? date.toDate() : null;\n }\n let dateSetting = ((typeof date !== 'string') || (date.indexOf('moment(') === -1)) ? (0, moment_timezone_1.default)(date) : null;\n if (dateSetting && dateSetting.isValid()) {\n return dateSetting.toDate();\n }\n dateSetting = null;\n try {\n const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(moment_timezone_1.default);\n if (typeof value === 'string') {\n dateSetting = (0, moment_timezone_1.default)(value);\n }\n else if (typeof value.toDate === 'function') {\n dateSetting = (0, moment_timezone_1.default)(value.toDate().toUTCString());\n }\n else if (value instanceof Date) {\n dateSetting = (0, moment_timezone_1.default)(value);\n }\n }\n catch (e) {\n return null;\n }\n if (!dateSetting) {\n return null;\n }\n // Ensure this is a date.\n if (!dateSetting.isValid()) {\n return null;\n }\n return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\n/**\n * Returns true if the date is a valid date. False otherwise.\n * @param {Date|string} date - The date to check for validity.\n * @returns {boolean} - TRUE if the date is valid; FALSE otherwise.\n */\nfunction isValidDate(date) {\n return lodash_1.default.isDate(date) && !lodash_1.default.isNaN(date.getDate());\n}\nexports.isValidDate = isValidDate;\n/**\n * Get the current timezone string.\n * @returns {string} - The current timezone.\n */\nfunction currentTimezone() {\n if (moment_timezone_1.default.currentTimezone) {\n return moment_timezone_1.default.currentTimezone;\n }\n moment_timezone_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();\n return moment_timezone_1.default.currentTimezone;\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Get an offset date provided a date object and timezone object.\n * @param {Date} date - The date to offset.\n * @param {string} timezone - The timezone to offset the date to.\n * @returns {Date} - The offset date.\n */\nfunction offsetDate(date, timezone) {\n if (timezone === 'UTC') {\n return {\n date: new Date(date.getTime() + (date.getTimezoneOffset() * 60000)),\n abbr: 'UTC'\n };\n }\n const dateMoment = (0, moment_timezone_1.default)(date).tz(timezone);\n return {\n date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),\n abbr: dateMoment.format('z')\n };\n}\nexports.offsetDate = offsetDate;\n/**\n * Returns if the zones are loaded.\n * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.\n */\nfunction zonesLoaded() {\n return moment_timezone_1.default.zonesLoaded;\n}\nexports.zonesLoaded = zonesLoaded;\n/**\n * Returns if we should load the zones.\n * @param {string} timezone - The timezone to check if we should load the zones.\n * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.\n */\nfunction shouldLoadZones(timezone) {\n if (timezone === currentTimezone() || timezone === 'UTC') {\n return false;\n }\n return true;\n}\nexports.shouldLoadZones = shouldLoadZones;\n/**\n * Externally load the timezone data.\n * @param {string} url - The URL to load the timezone data from.\n * @param {string} timezone - The timezone to load.\n * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.\n */\nfunction loadZones(url, timezone) {\n if (timezone && !shouldLoadZones(timezone)) {\n // Return non-resolving promise.\n return new Promise(lodash_1.default.noop);\n }\n if (moment_timezone_1.default.zonesPromise) {\n return moment_timezone_1.default.zonesPromise;\n }\n return moment_timezone_1.default.zonesPromise = fetch(url)\n .then(resp => resp.json().then(zones => {\n moment_timezone_1.default.tz.load(zones);\n moment_timezone_1.default.zonesLoaded = true;\n // Trigger a global event that the timezones have finished loading.\n if (document && document.createEvent && document.body && document.body.dispatchEvent) {\n var event = document.createEvent('Event');\n event.initEvent('zonesLoaded', true, true);\n document.body.dispatchEvent(event);\n }\n }));\n}\nexports.loadZones = loadZones;\n/**\n * Get the moment date object for translating dates with timezones.\n * @param {string|Date} value - The value to convert into a moment date.\n * @param {string} format - The format to convert the date to.\n * @param {string} timezone - The timezone to convert the date to.\n * @param {object} options - The options object\n * @returns {Date} - The moment date object.\n */\nfunction momentDate(value, format, timezone, options) {\n const momentDate = (0, moment_timezone_1.default)(value);\n if (!timezone) {\n return momentDate;\n }\n if (timezone === 'UTC') {\n timezone = 'Etc/UTC';\n }\n if ((timezone !== currentTimezone() || (format && format.match(/\\s(z$|z\\s)/))) && (moment_timezone_1.default.zonesLoaded || (options === null || options === void 0 ? void 0 : options.email))) {\n return momentDate.tz(timezone);\n }\n return momentDate;\n}\nexports.momentDate = momentDate;\n/**\n * Format a date provided a value, format, and timezone object.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {string|Date} value - The value to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @param {string} flatPickrInputFormat - The format to use for flatpickr input.\n * @returns {string} - The formatted date.\n */\nfunction formatDate(timezonesUrl, value, format, timezone, flatPickrInputFormat) {\n const momentDate = (0, moment_timezone_1.default)(value, flatPickrInputFormat || undefined);\n if (timezone === currentTimezone()) {\n // See if our format contains a \"z\" timezone character.\n if (format.match(/\\s(z$|z\\s)/)) {\n loadZones(timezonesUrl);\n if (moment_timezone_1.default.zonesLoaded) {\n return momentDate.tz(timezone).format(convertFormatToMoment(format));\n }\n else {\n return momentDate.format(convertFormatToMoment(format.replace(/\\s(z$|z\\s)/, '')));\n }\n }\n // Return the standard format.\n return momentDate.format(convertFormatToMoment(format));\n }\n if (timezone === 'UTC') {\n const offset = offsetDate(momentDate.toDate(), 'UTC');\n return `${(0, moment_timezone_1.default)(offset.date).format(convertFormatToMoment(format))} UTC`;\n }\n // Load the zones since we need timezone information.\n loadZones(timezonesUrl);\n if (moment_timezone_1.default.zonesLoaded && timezone) {\n return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);\n }\n else {\n return momentDate.format(convertFormatToMoment(format));\n }\n}\nexports.formatDate = formatDate;\n/**\n * Pass a format function to format within a timezone.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {Function} formatFn - The format function to use.\n * @param {Date|string} date - The date to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @returns {string} - The formatted date.\n */\nfunction formatOffset(timezonesUrl, formatFn, date, format, timezone) {\n if (timezone === currentTimezone()) {\n return formatFn(date, format);\n }\n if (timezone === 'UTC') {\n return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;\n }\n // Load the zones since we need timezone information.\n loadZones(timezonesUrl);\n if (moment_timezone_1.default.zonesLoaded) {\n const offset = offsetDate(date, timezone);\n return `${formatFn(offset.date, format)} ${offset.abbr}`;\n }\n else {\n return formatFn(date, format);\n }\n}\nexports.formatOffset = formatOffset;\n/**\n * Returns the local date format information.\n * @param {Intl.LocalesArgument} locale - The locale to get the date format for.\n * @returns {object} - The local date format information.\n */\nfunction getLocaleDateFormatInfo(locale) {\n const formatInfo = {};\n const day = 21;\n const exampleDate = new Date(2017, 11, day);\n const localDateString = exampleDate.toLocaleDateString(locale);\n formatInfo.dayFirst = localDateString.slice(0, 2) === day.toString();\n return formatInfo;\n}\nexports.getLocaleDateFormatInfo = getLocaleDateFormatInfo;\n/**\n * Convert the format from the angular-datepicker module to flatpickr format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToFlatpickr(format) {\n return format\n // Remove the Z timezone offset, not supported by flatpickr.\n .replace(/Z/g, '')\n // Year conversion.\n .replace(/y/g, 'Y')\n .replace('YYYY', 'Y')\n .replace('YY', 'y')\n // Month conversion.\n .replace('MMMM', 'F')\n .replace(/M/g, 'n')\n .replace('nnn', 'M')\n .replace('nn', 'm')\n // Day in month.\n .replace(/d/g, 'j')\n .replace(/jj/g, 'd')\n // Day in week.\n .replace('EEEE', 'l')\n .replace('EEE', 'D')\n // Hours, minutes, seconds\n .replace('HH', 'H')\n .replace('hh', 'G')\n .replace('mm', 'i')\n .replace('ss', 'S')\n .replace(/a/g, 'K');\n}\nexports.convertFormatToFlatpickr = convertFormatToFlatpickr;\n/**\n * Convert the format from the angular-datepicker module to moment format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMoment(format) {\n return format\n // Year conversion.\n .replace(/y/g, 'Y')\n // Day in month.\n .replace(/d/g, 'D')\n // Day in week.\n .replace(/E/g, 'd')\n // AM/PM marker\n .replace(/a/g, 'A')\n // Unix Timestamp\n .replace(/U/g, 'X');\n}\nexports.convertFormatToMoment = convertFormatToMoment;\n/**\n * Convert the format from the angular-datepicker module to mask format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMask(format) {\n return format\n // Long month replacement.\n .replace(/M{4}/g, 'MM')\n // Initial short month conversion.\n .replace(/M{3}/g, '***')\n // Short month conversion if input as text.\n .replace(/e/g, 'Q')\n // Month number conversion.\n .replace(/W/g, '99')\n // Year conversion.\n .replace(/[ydhmswHMG]/g, '9')\n // AM/PM conversion.\n .replace(/a/g, 'AA');\n}\nexports.convertFormatToMask = convertFormatToMask;\n/**\n * Returns an input mask that is compatible with the input mask library.\n * @param {string} mask - The Form.io input mask.\n * @param {string} placeholderChar - Char which is used as a placeholder.\n * @returns {Array} - The input mask for the mask library.\n */\nfunction getInputMask(mask, placeholderChar) {\n if (mask instanceof Array) {\n return mask;\n }\n const maskArray = [];\n maskArray.numeric = true;\n for (let i = 0; i < mask.length; i++) {\n switch (mask[i]) {\n case '9':\n maskArray.push(/\\d/);\n break;\n case 'A':\n maskArray.numeric = false;\n maskArray.push(/[a-zA-Z]/);\n break;\n case 'a':\n maskArray.numeric = false;\n maskArray.push(/[a-z]/);\n break;\n case '*':\n maskArray.numeric = false;\n maskArray.push(/[a-zA-Z0-9]/);\n break;\n // If char which is used inside mask placeholder was used in the mask, replace it with space to prevent errors\n case placeholderChar:\n maskArray.numeric = false;\n maskArray.push(' ');\n break;\n default:\n maskArray.numeric = false;\n maskArray.push(mask[i]);\n break;\n }\n }\n return maskArray;\n}\nexports.getInputMask = getInputMask;\n/**\n * Unmasks a value using the provided mask and placeholder characters.\n * @param {string} value - The value to unmask.\n * @param {string} mask - The mask to use for unmasking.\n * @param {string} placeholderChar - The placeholder character to use for unmasking.\n * @returns {string} - The unmasked value.\n */\nfunction unmaskValue(value, mask, placeholderChar) {\n if (!mask || !value || value.length > mask.length) {\n return value;\n }\n let unmaskedValue = value.split('');\n for (let i = 0; i < mask.length; i++) {\n const char = value[i] || '';\n const charPart = mask[i];\n if (!lodash_1.default.isRegExp(charPart) && char === charPart) {\n unmaskedValue[i] = '';\n }\n }\n unmaskedValue = unmaskedValue.join('').replace(placeholderChar, '');\n return unmaskedValue;\n}\nexports.unmaskValue = unmaskValue;\n/**\n * Returns true if the value matches the input mask format.\n * @param {string} value - The value to check.\n * @param {string} inputMask - The input mask to check against.\n * @returns {boolean} - TRUE if the value matches the input mask; FALSE otherwise.\n */\nfunction matchInputMask(value, inputMask) {\n if (!inputMask) {\n return true;\n }\n // If value is longer than mask, it isn't valid.\n if (value.length > inputMask.length) {\n return false;\n }\n for (let i = 0; i < inputMask.length; i++) {\n const char = value[i] || '';\n const charPart = inputMask[i];\n if (!(lodash_1.default.isRegExp(charPart) && charPart.test(char) || charPart === char)) {\n return false;\n }\n }\n return true;\n}\nexports.matchInputMask = matchInputMask;\n/**\n * Returns the number separators (i.e. 1,000) for the provided language.\n * @param {string} lang - The language code to get the number separators for.\n * @returns {{delimiter: string, decimalSeparator: string}} - The number separators.\n */\nfunction getNumberSeparators(lang = 'en') {\n const formattedNumberString = (12345.6789).toLocaleString(lang);\n const delimeters = formattedNumberString.match(/..(.)...(.)../);\n if (!delimeters) {\n return {\n delimiter: ',',\n decimalSeparator: '.'\n };\n }\n return {\n delimiter: (delimeters.length > 1) ? delimeters[1] : ',',\n decimalSeparator: (delimeters.length > 2) ? delimeters[2] : '.',\n };\n}\nexports.getNumberSeparators = getNumberSeparators;\n/**\n * Returns the number for the maximum amount of decimal places for a number.\n * @param {import('@formio/core').Component} component - The component to check for decimal limits.\n * @param {number} defaultLimit - The default limit to use if none is provided in the component.\n * @returns {number} - The number of decimal places allowed.\n */\nfunction getNumberDecimalLimit(component, defaultLimit) {\n if (lodash_1.default.has(component, 'decimalLimit')) {\n return lodash_1.default.get(component, 'decimalLimit');\n }\n // Determine the decimal limit. Defaults to 20 but can be overridden by validate.step or decimalLimit settings.\n let decimalLimit = defaultLimit || 20;\n const step = lodash_1.default.get(component, 'validate.step', 'any');\n if (step !== 'any') {\n const parts = step.toString().split('.');\n if (parts.length > 1) {\n decimalLimit = parts[1].length;\n }\n }\n return decimalLimit;\n}\nexports.getNumberDecimalLimit = getNumberDecimalLimit;\n/**\n * Returns the currency affixes for a specific language.\n * @param {object} arg0 - The arguments object.\n * @param {string} arg0.currency - The currency code to get the affixes for.\n * @param {number} arg0.decimalLimit - The number of decimal places to use.\n * @param {string} arg0.decimalSeparator - The decimal separator to use.\n * @param {string} arg0.lang - The language code to use.\n * @returns {{prefix: string, suffix: string}} - The currency affixes.\n */\nfunction getCurrencyAffixes({ currency, decimalLimit, decimalSeparator, lang, }) {\n // Get the prefix and suffix from the localized string.\n let regex = `(.*)?${(100).toLocaleString(lang)}`;\n if (decimalLimit) {\n regex += `${decimalSeparator === '.' ? '\\\\.' : decimalSeparator}${(0).toLocaleString(lang)}{${decimalLimit}}`;\n }\n regex += '(.*)?';\n const parts = (100).toLocaleString(lang, {\n style: 'currency',\n currency: currency ? currency : 'USD',\n useGrouping: true,\n maximumFractionDigits: decimalLimit || 0,\n minimumFractionDigits: decimalLimit || 0\n }).replace('.', decimalSeparator).match(new RegExp(regex));\n return {\n prefix: (parts === null || parts === void 0 ? void 0 : parts[1]) || '',\n suffix: (parts === null || parts === void 0 ? void 0 : parts[2]) || ''\n };\n}\nexports.getCurrencyAffixes = getCurrencyAffixes;\n/**\n * Fetch the field data provided a component.\n * @param {import('@formio/core').DataObject} data - The data object to fetch the field data from.\n * @param {import('@formio/core').Component} component - The component to fetch the field data for.\n * @returns {*} - The field data.\n */\nfunction fieldData(data, component) {\n if (!data) {\n return '';\n }\n if (!component || !component.key) {\n return data;\n }\n if (component.key.includes('.')) {\n let value = data;\n const parts = component.key.split('.');\n let key = '';\n for (let i = 0; i < parts.length; i++) {\n key = parts[i];\n // Handle nested resources\n if (value.hasOwnProperty('_id')) {\n value = value.data;\n }\n // Return if the key is not found on the value.\n if (!value.hasOwnProperty(key)) {\n return;\n }\n // Convert old single field data in submissions to multiple\n if (key === parts[parts.length - 1] && component.multiple && !Array.isArray(value[key])) {\n value[key] = [value[key]];\n }\n // Set the value of this key.\n value = value[key];\n }\n return value;\n }\n else {\n // Convert old single field data in submissions to multiple\n if (component.multiple && !Array.isArray(data[component.key])) {\n data[component.key] = [data[component.key]];\n }\n // Fix for checkbox type radio submission values in tableView\n if (component.type === 'checkbox' && component.inputType === 'radio') {\n return data[component.name] === component.value;\n }\n return data[component.key];\n }\n}\nexports.fieldData = fieldData;\n/**\n * Delays function execution with possibility to execute function synchronously or cancel it.\n * @param {Function} fn - Function to delay\n * @param {number} delay - Delay time\n * @param {...any} args - Arguments to pass to the function\n * @returns {*} - Function to cancel the delay\n */\nfunction delay(fn, delay = 0, ...args) {\n const timer = setTimeout(fn, delay, ...args);\n /**\n *\n */\n function cancel() {\n clearTimeout(timer);\n }\n /**\n * Execute the function early.\n * @returns {*} - The result of the function.\n */\n function earlyCall() {\n cancel();\n return fn(...args);\n }\n earlyCall.timer = timer;\n earlyCall.cancel = cancel;\n return earlyCall;\n}\nexports.delay = delay;\n/**\n * Iterate the given key to make it unique.\n * @param {string} key\n * Modify the component key to be unique.\n * @returns {string}\n * The new component key.\n */\nfunction iterateKey(key) {\n if (!key.match(/(\\d+)$/)) {\n return `${key}1`;\n }\n return key.replace(/(\\d+)$/, function (suffix) {\n return Number(suffix) + 1;\n });\n}\nexports.iterateKey = iterateKey;\n/**\n * Determines a unique key within a map provided the base key.\n * @param {Record<string, string>} map - The map to check for uniqueness.\n * @param {string} base - The base path of the key.\n * @returns {string} - The unique key.\n */\nfunction uniqueKey(map, base) {\n let newKey = base;\n while (map.hasOwnProperty(newKey)) {\n newKey = iterateKey(newKey);\n }\n return newKey;\n}\nexports.uniqueKey = uniqueKey;\n/**\n * Determines the major version number of bootstrap.\n * @param {object} options - The options to check for bootstrap version.\n * @param {string} options.bootstrap - The bootstrap version to use.\n * @returns {number} - The bootstrap version.\n */\nfunction bootstrapVersion(options) {\n if (options.bootstrap) {\n return options.bootstrap;\n }\n if ((typeof jQuery === 'function') && (typeof jQuery().collapse === 'function')) {\n return parseInt(jQuery.fn.collapse.Constructor.VERSION.split('.')[0], 10);\n }\n if (window.bootstrap && window.bootstrap.Collapse) {\n return parseInt(window.bootstrap.Collapse.VERSION.split('.')[0], 10);\n }\n return 0;\n}\nexports.bootstrapVersion = bootstrapVersion;\n/**\n * Retrun provided argument.\n * If argument is a function, returns the result of a function call.\n * @param {Function|any} e - The argument to check if a function and call if so.\n * @returns {any} - Either the result of the function call (e) or e if it is not a function.\n */\nfunction unfold(e) {\n if (typeof e === 'function') {\n return e();\n }\n return e;\n}\nexports.unfold = unfold;\n/**\n * Map values through unfold and return first non-nil value.\n * @param {Array<T>} collection - The collection to map through unfold.;\n * @returns {T} - The first non-nil value.\n */\nexports.firstNonNil = lodash_1.default.flow([\n lodash_1.default.partialRight(lodash_1.default.map, unfold),\n lodash_1.default.partialRight(lodash_1.default.find, v => !lodash_1.default.isUndefined(v))\n]);\n/**\n * Create enclosed state. Returns functions to getting and cycling between states.\n * @param {*} a - initial state.\n * @param {*} b - next state.\n * @returns {Functions[]} -- [get, toggle];\n */\nfunction withSwitch(a, b) {\n let state = a;\n let next = b;\n /**\n * Returns the state of the switch.\n * @returns {*} - The current state.\n */\n function get() {\n return state;\n }\n /**\n * Toggles the state of the switch.\n */\n function toggle() {\n const prev = state;\n state = next;\n next = prev;\n }\n return [get, toggle];\n}\nexports.withSwitch = withSwitch;\n/**\n * Create a function that will call the provided function only the provided limit.\n * @param {Function} callback - The callback to call.\n * @param {object} options - The options to use.\n * @param {number} options.limit - The limit to call the callback.\n * @param {number} options.delay - The delay to wait before resetting the call count.\n * @returns {Function} - The function that will call the callback only the provided limit.\n */\nfunction observeOverload(callback, options = {}) {\n const { limit = 50, delay = 500 } = options;\n let callCount = 0;\n let timeoutID = 0;\n const reset = () => callCount = 0;\n return () => {\n if (timeoutID !== 0) {\n clearTimeout(timeoutID);\n timeoutID = 0;\n }\n timeoutID = setTimeout(reset, delay);\n callCount += 1;\n if (callCount >= limit) {\n clearTimeout(timeoutID);\n reset();\n return callback();\n }\n };\n}\nexports.observeOverload = observeOverload;\n/**\n * Returns the components that are provided within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @param {boolean} excludeNested - Exclude nested components.\n * @param {Array<string>} excludedTypes - The types of components to exclude.\n * @returns {Array} - The components within the evaluation context.\n */\nfunction getContextComponents(context, excludeNested, excludedTypes = []) {\n const values = [];\n context.utils.eachComponent(context.instance.options.editForm.components, (component, path) => {\n const addToContextComponents = excludeNested ? !component.tree : true;\n if (component.key !== context.data.key && addToContextComponents && !lodash_1.default.includes(excludedTypes, component.type)) {\n values.push({\n label: `${component.label || component.key} (${path})`,\n value: path,\n });\n }\n });\n return values;\n}\nexports.getContextComponents = getContextComponents;\n/**\n * Returns the button components that are within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @returns {Array} - The button components within the evaluation context.\n */\nfunction getContextButtons(context) {\n const values = [];\n context.utils.eachComponent(context.instance.options.editForm.components, (component) => {\n if (component.type === 'button') {\n values.push({\n label: `${component.key} (${component.label})`,\n value: component.key,\n });\n }\n });\n return values;\n}\nexports.getContextButtons = getContextButtons;\n// Tags that could be in text, that should be ommited or handled in a special way\nconst inTextTags = ['#text', 'A', 'B', 'EM', 'I', 'SMALL', 'STRONG', 'SUB', 'SUP', 'INS', 'DEL', 'MARK', 'CODE'];\n/**\n * Helper function for 'translateHTMLTemplate'. Translates text value of the passed html element.\n * @param {HTMLElement} elem - The element to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Translated element template.\n */\nfunction translateElemValue(elem, translate) {\n if (!elem.innerText) {\n return elem.innerHTML;\n }\n const elemValue = elem.innerText.replace(Evaluator_1.Evaluator.templateSettings.interpolate, '').replace(/\\s\\s+/g, ' ').trim();\n const translatedValue = translate(elemValue);\n if (elemValue !== translatedValue) {\n const links = elem.innerHTML.match(/<a[^>]*>(.*?)<\\/a>/g);\n if (links && links.length) {\n if (links.length === 1 && links[0].length === elem.innerHTML.length) {\n return elem.innerHTML.replace(elemValue, translatedValue);\n }\n const translatedLinks = links.map(link => {\n const linkElem = document.createElement('a');\n linkElem.innerHTML = link;\n return translateElemValue(linkElem, translate);\n });\n return `${translatedValue} (${translatedLinks.join(', ')})`;\n }\n else {\n return elem.innerText.replace(elemValue, translatedValue);\n }\n }\n else {\n return elem.innerHTML;\n }\n}\n/**\n * Helper function for 'translateHTMLTemplate'. Goes deep through html tag children and calls function to translate their text values.\n * @param {HTMLElement} tag - The tag to translate.\n * @param {Function} translate - The translation function.\n * @returns {void}\n */\nfunction translateDeepTag(tag, translate) {\n const children = tag.children.length && [...tag.children];\n const shouldTranslateEntireContent = children && children.every(child => child.children.length === 0\n && inTextTags.some(tag => child.nodeName === tag));\n if (!children || shouldTranslateEntireContent) {\n tag.innerHTML = translateElemValue(tag, translate);\n }\n else {\n children.forEach(child => translateDeepTag(child, translate));\n }\n}\n/**\n * Translates text values in html template.\n * @param {string} template - The template to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Html template with translated values.\n */\nfunction translateHTMLTemplate(template, translate) {\n const isHTML = /<[^>]*>/.test(template);\n if (!isHTML) {\n return translate(template);\n }\n const tempElem = document.createElement('div');\n tempElem.innerHTML = template;\n if (tempElem.innerText && tempElem.children.length) {\n translateDeepTag(tempElem, translate);\n return tempElem.innerHTML;\n }\n return template;\n}\nexports.translateHTMLTemplate = translateHTMLTemplate;\n/**\n * Sanitize an html string.\n * @param {string} string - The string to sanitize.\n * @param {any} options - The options to use for sanitization.\n * @returns {string} - The sanitized html string.\n */\nfunction sanitize(string, options) {\n if (typeof dompurify_1.default.sanitize !== 'function') {\n return string;\n }\n // Dompurify configuration\n const sanitizeOptions = {\n ADD_ATTR: ['ref', 'target'],\n USE_PROFILES: { html: true }\n };\n // Use profiles\n if (options.sanitizeConfig && options.sanitizeConfig.useProfiles) {\n Object.keys(options.sanitizeConfig.useProfiles).forEach(key => {\n sanitizeOptions.USE_PROFILES[key] = options.sanitizeConfig.useProfiles[key];\n });\n }\n // Add attrs\n if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addAttr) && options.sanitizeConfig.addAttr.length > 0) {\n options.sanitizeConfig.addAttr.forEach((attr) => {\n sanitizeOptions.ADD_ATTR.push(attr);\n });\n }\n // Add tags\n if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addTags) && options.sanitizeConfig.addTags.length > 0) {\n sanitizeOptions.ADD_TAGS = options.sanitizeConfig.addTags;\n }\n // Allow tags\n if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedTags) && options.sanitizeConfig.allowedTags.length > 0) {\n sanitizeOptions.ALLOWED_TAGS = options.sanitizeConfig.allowedTags;\n }\n // Allow attributes\n if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedAttrs) && options.sanitizeConfig.allowedAttrs.length > 0) {\n sanitizeOptions.ALLOWED_ATTR = options.sanitizeConfig.allowedAttrs;\n }\n // Allowd URI Regex\n if (options.sanitizeConfig && options.sanitizeConfig.allowedUriRegex) {\n const allowedUriRegex = options.sanitizeConfig.allowedUriRegex;\n sanitizeOptions.ALLOWED_URI_REGEXP = lodash_1.default.isString(allowedUriRegex) ? new RegExp(allowedUriRegex) : allowedUriRegex;\n }\n // Allow to extend the existing array of elements that are safe for URI-like values\n if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addUriSafeAttr) && options.sanitizeConfig.addUriSafeAttr.length > 0) {\n sanitizeOptions.ADD_URI_SAFE_ATTR = options.sanitizeConfig.addUriSafeAttr;\n }\n return dompurify_1.default.sanitize(string, sanitizeOptions);\n}\nexports.sanitize = sanitize;\n/**\n * Fast cloneDeep for JSON objects only.\n * @param {any} obj - The object to perform a fast clone deep against.\n * @returns {any} - The cloned object.\n */\nfunction fastCloneDeep(obj) {\n return obj ? JSON.parse(JSON.stringify(obj)) : obj;\n}\nexports.fastCloneDeep = fastCloneDeep;\n/**\n * Returns if the component is an input component.\n * @param {import('@formio/core').Component} componentJson - The JSON of a component.\n * @returns {bool} - TRUE if the component is an input component; FALSE otherwise.\n */\nfunction isInputComponent(componentJson) {\n if (componentJson.input === false || componentJson.input === true) {\n return componentJson.input;\n }\n switch (componentJson.type) {\n case 'htmlelement':\n case 'content':\n case 'columns':\n case 'fieldset':\n case 'panel':\n case 'table':\n case 'tabs':\n case 'well':\n case 'button':\n return false;\n default:\n return true;\n }\n}\nexports.isInputComponent = isInputComponent;\n/**\n * Takes a component path, and returns a component path array.\n * @param {string} pathStr - The path string to convert to an array.\n * @returns {Arryay<number>} - The array of paths.\n */\nfunction getArrayFromComponentPath(pathStr) {\n if (!pathStr || !lodash_1.default.isString(pathStr)) {\n if (!lodash_1.default.isArray(pathStr)) {\n return [pathStr];\n }\n return pathStr;\n }\n return pathStr.replace(/[[\\]]/g, '.')\n .replace(/\\.\\./g, '.')\n .replace(/(^\\.)|(\\.$)/g, '')\n .split('.')\n .map(part => lodash_1.default.defaultTo(lodash_1.default.toNumber(part), part));\n}\nexports.getArrayFromComponentPath = getArrayFromComponentPath;\n/**\n * Returns true if the component is a child of the parent.\n * @param {any} child - The child component to check.\n * @param {any} parent - The parent component to check.\n * @returns {boolean} - TRUE if the child is a child of the parent; FALSE otherwise.\n */\nfunction isChildOf(child, parent) {\n while (child && child.parent) {\n if (child.parent === parent) {\n return true;\n }\n child = child.parent;\n }\n return false;\n}\nexports.isChildOf = isChildOf;\n/**\n * Takes an array of component path indexes, and returns a string version of that array.\n * @param {Array<number>} path - The path array to convert to a string.\n * @returns {string} - The string version of the path.\n */\nfunction getStringFromComponentPath(path) {\n if (!lodash_1.default.isArray(path)) {\n return path;\n }\n let strPath = '';\n path.forEach((part, i) => {\n if (lodash_1.default.isNumber(part)) {\n strPath += `[${part}]`;\n }\n else {\n strPath += i === 0 ? part : `.${part}`;\n }\n });\n return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Takes a number and rounds it to the provided precision amount.\n * @param {number} number - The number to round.\n * @param {number} precision - The precision to round the number to.\n * @returns {string} - The rounded number.\n */\nfunction round(number, precision) {\n if (lodash_1.default.isNumber(number)) {\n return number.toFixed(precision);\n }\n return number.toString();\n}\nexports.round = round;\n/**\n * Check for Internet Explorer browser version\n * @returns {(number|null)} - The IE browser version or null if not IE\n */\nfunction getIEBrowserVersion() {\n const { ie, version } = getBrowserInfo();\n return ie ? version : null;\n}\nexports.getIEBrowserVersion = getIEBrowserVersion;\n/**\n * Get browser name and version (modified from 'jquery-browser-plugin')\n * @returns {object} -- {{browser name, version, isWebkit?}}\n * Possible browser names: chrome, safari, ie, edge, opera, mozilla, yabrowser\n */\nfunction getBrowserInfo() {\n const browser = {};\n if (typeof window === 'undefined') {\n return browser;\n }\n const ua = window.navigator.userAgent.toLowerCase();\n const match = /(edge|edg)\\/([\\w.]+)/.exec(ua) ||\n /(opr)[/]([\\w.]+)/.exec(ua) ||\n /(yabrowser)[ /]([\\w.]+)/.exec(ua) ||\n /(chrome)[ /]([\\w.]+)/.exec(ua) ||\n /(iemobile)[/]([\\w.]+)/.exec(ua) ||\n /(version)(applewebkit)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n /(webkit)[ /]([\\w.]+).*(version)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n /(webkit)[ /]([\\w.]+)/.exec(ua) ||\n /(opera)(?:.*version|)[ /]([\\w.]+)/.exec(ua) ||\n /(msie) ([\\w.]+)/.exec(ua) ||\n ua.indexOf('trident') >= 0 && /(rv)(?::| )([\\w.]+)/.exec(ua) ||\n ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua) ||\n [];\n const matched = {\n browser: match[5] || match[3] || match[1] || '',\n version: match[4] || match[2] || '0'\n };\n if (matched.browser) {\n browser[matched.browser] = true;\n browser.version = parseInt(matched.version, 10);\n }\n // Chrome, Opera 15+, Safari and Yandex.Browser are webkit based browsers\n if (browser.chrome || browser.opr || browser.safari || browser.edg || browser.yabrowser) {\n browser.isWebkit = true;\n }\n // IE11 has a new token so we will assign it ie to avoid breaking changes\n if (browser.rv || browser.iemobile) {\n browser.ie = true;\n }\n // Edge has a new token since it became webkit based\n if (browser.edg) {\n browser.edge = true;\n }\n // Opera 15+ are identified as opr\n if (browser.opr) {\n browser.opera = true;\n }\n return browser;\n}\nexports.getBrowserInfo = getBrowserInfo;\n/**\n * Takes a component path, which may include array indicies (i.e. [0][1]), and returns the compoennt path without the indicies.\n * @param {string} path - The path to remove the indicies from.\n * @returns {string} - The path without the indicies.\n */\nfunction getComponentPathWithoutIndicies(path = '') {\n return path.replace(/\\[\\d+\\]/, '');\n}\nexports.getComponentPathWithoutIndicies = getComponentPathWithoutIndicies;\n/**\n * Returns a path to the component which based on its schema\n * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property\n * @returns {string} - Path to the component\n */\nfunction getComponentPath(component) {\n return component.paths.localDataPath;\n}\nexports.getComponentPath = getComponentPath;\n/**\n * Returns a parent component of the passed component instance skipping all the Layout components\n * @param {Component} componentInstance - The component to check for the parent.\n * @returns {Component|undefined} - The parent data component.\n */\nfunction getDataParentComponent(componentInstance) {\n if (!componentInstance) {\n return;\n }\n const { parent } = componentInstance;\n if (parent && (parent.isInputComponent || parent.input)) {\n return parent;\n }\n else {\n return getDataParentComponent(parent);\n }\n}\nexports.getDataParentComponent = getDataParentComponent;\n/**\n * Returns whether the value is a promise\n * @param {any} value - The value to check\n * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise\n */\nfunction isPromise(value) {\n return value\n && value.then\n && typeof value.then === 'function'\n && Object.prototype.toString.call(value) === '[object Promise]';\n}\nexports.isPromise = isPromise;\n/**\n * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its\n * changes by itself, e.g. EditGrid)\n * @param {Component} componentInstance - The component to check for the scoping parent.\n * @param {boolean} firstPass - Whether it is the first pass of the function\n * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise\n */\nfunction isInsideScopingComponent(componentInstance, firstPass = true) {\n if (!firstPass && (componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.hasScopedChildren)) {\n return true;\n }\n const dataParent = getDataParentComponent(componentInstance);\n if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.hasScopedChildren) {\n return true;\n }\n else if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.parent) {\n return isInsideScopingComponent(dataParent.parent, false);\n }\n return false;\n}\nexports.isInsideScopingComponent = isInsideScopingComponent;\n/**\n * Returns all the focusable elements within the provided dom element.\n * @param {HTMLElement} element - The element to get the focusable elements from.\n * @returns {NodeList<HTMLElement>} - The focusable elements within the provided element.\n */\nfunction getFocusableElements(element) {\n const focusableSelector = `button:not([disabled]), input:not([disabled]), select:not([disabled]),\n textarea:not([disabled]), button:not([disabled]), [href]`;\n return element.querySelectorAll(focusableSelector);\n}\nexports.getFocusableElements = getFocusableElements;\nexports.componentValueTypes = {\n number: 'number',\n string: 'string',\n boolean: 'boolean',\n array: 'array',\n object: 'object',\n date: 'date',\n any: 'any',\n};\n/**\n * Returns the saved types for the component\n * @param {import('@formio/core').Component} fullSchema - The component schema\n * @returns {Array<string>|null} - The saved types for the component\n */\nfunction getComponentSavedTypes(fullSchema) {\n const schema = fullSchema || {};\n if (schema.persistent !== true) {\n return [];\n }\n if (schema.multiple) {\n return [exports.componentValueTypes.array];\n }\n return null;\n}\nexports.getComponentSavedTypes = getComponentSavedTypes;\n/**\n * Interpolates @formio/core errors so that they are compatible with the renderer\n * @param {Component} component - The component to interpolate the errors for\n * @param {FieldError[]} errors - The errors to interpolate\n * @param {Function} interpolateFn - The interpolation function\n * @returns {[]} - The interpolated errors\n */\nconst interpolateErrors = (component, errors, interpolateFn) => {\n return errors.map((error) => {\n error.component = component;\n const { errorKeyOrMessage, context } = error;\n const toInterpolate = component.errors && component.errors[errorKeyOrMessage] ? component.errors[errorKeyOrMessage] : errorKeyOrMessage;\n return Object.assign(Object.assign({}, error), { message: unescapeHTML(interpolateFn(toInterpolate, context)), context: Object.assign({}, context) });\n });\n};\nexports.interpolateErrors = interpolateErrors;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/utils.js?");
|
6088
|
+
eval("\n/* global jQuery */\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;\nexports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\"));\nexports._ = lodash_1.default;\nconst json_logic_js_1 = __importDefault(__webpack_require__(/*! json-logic-js */ \"./node_modules/json-logic-js/logic.js\"));\nexports.jsonLogic = json_logic_js_1.default;\nconst moment_timezone_1 = __importDefault(__webpack_require__(/*! moment-timezone/moment-timezone */ \"./node_modules/moment-timezone/moment-timezone.js\"));\nexports.moment = moment_timezone_1.default;\nconst jstimezonedetect_1 = __importDefault(__webpack_require__(/*! jstimezonedetect */ \"./node_modules/jstimezonedetect/dist/jstz.min.js\"));\nconst operators_1 = __webpack_require__(/*! ./jsonlogic/operators */ \"./lib/cjs/utils/jsonlogic/operators.js\");\nconst dompurify_1 = __importDefault(__webpack_require__(/*! dompurify */ \"./node_modules/dompurify/dist/purify.cjs.js\"));\nconst formUtils_1 = __webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\");\nconst Evaluator_1 = __webpack_require__(/*! ./Evaluator */ \"./lib/cjs/utils/Evaluator.js\");\nObject.defineProperty(exports, \"Evaluator\", ({ enumerable: true, get: function () { return Evaluator_1.Evaluator; } }));\nconst conditionOperators_1 = __importDefault(__webpack_require__(/*! ./conditionOperators */ \"./lib/cjs/utils/conditionOperators/index.js\"));\nexports.ConditionOperators = conditionOperators_1.default;\nconst interpolate = Evaluator_1.Evaluator.interpolate;\nexports.interpolate = interpolate;\n__exportStar(__webpack_require__(/*! ./formUtils */ \"./lib/cjs/utils/formUtils.js\"), exports);\n// Configure JsonLogic\noperators_1.lodashOperators.forEach((name) => json_logic_js_1.default.add_operation(`_${name}`, lodash_1.default[name]));\n// Retrieve Any Date\njson_logic_js_1.default.add_operation('getDate', (date) => {\n return (0, moment_timezone_1.default)(date).toISOString();\n});\n// Set Relative Minimum Date\njson_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {\n return (0, moment_timezone_1.default)().subtract(relativeMinDate, 'days').toISOString();\n});\n// Set Relative Maximum Date\njson_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {\n return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();\n});\n/**\n * Evaluate a method.\n * @param {Function|string|object} func - The function to evaluate.\n * @param {*} args - A map of arguments to pass to the function.\n * @param {string} ret - The name of the \"return\" variable in the script.\n * @param {boolean} interpolate - True if the script should be interpolated before being executed.\n * @param {import('@formio/core').EvaluatorOptions} options - The evaluator options.\n * @returns {*} - The result of the evaluation.\n */\nfunction evaluate(func, args, ret, interpolate, options = {}) {\n return Evaluator_1.Evaluator.evaluate(func, args, ret, interpolate, undefined, options);\n}\nexports.evaluate = evaluate;\n/**\n * Returns a random compoennt ID.\n * @returns {string} - A random component ID.\n */\nfunction getRandomComponentId() {\n return `e${Math.random().toString(36).substring(7)}`;\n}\nexports.getRandomComponentId = getRandomComponentId;\n/**\n * Get a property value of an element.\n * @param {CSSStyleDeclaration} style - The style element to get the property value from.\n * @param {string} prop - The property to get the value for.\n * @returns {number} - The value of the property.\n */\nfunction getPropertyValue(style, prop) {\n let value = style.getPropertyValue(prop);\n value = value ? value.replace(/[^0-9.]/g, '') : '0';\n return parseFloat(value);\n}\nexports.getPropertyValue = getPropertyValue;\n/**\n * Get an elements bounding rectagle.\n * @param {HTMLElement} element - A DOM element to get the bounding rectangle for.\n * @returns {{x: number, y: number, width: number, height: number}} - The bounding rectangle.\n */\nfunction getElementRect(element) {\n const style = window.getComputedStyle(element, null);\n return {\n x: getPropertyValue(style, 'left'),\n y: getPropertyValue(style, 'top'),\n width: getPropertyValue(style, 'width'),\n height: getPropertyValue(style, 'height')\n };\n}\nexports.getElementRect = getElementRect;\n/**\n * Get non HTMLElement property in the window object\n * @param {string} property - The window property to fetch the script plugin from.\n * @returns {any | undefined} - The HTML Element property on the window object.\n */\nfunction getScriptPlugin(property) {\n const obj = window[property];\n if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2\n obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {\n return undefined;\n }\n return obj;\n}\nexports.getScriptPlugin = getScriptPlugin;\n/**\n * Determines the boolean value of a setting.\n * @param {string|boolean} value - A string or boolean value to convert to boolean.\n * @returns {boolean} - The boolean value of the setting.\n */\nfunction boolValue(value) {\n if (lodash_1.default.isBoolean(value)) {\n return value;\n }\n else if (lodash_1.default.isString(value)) {\n return (value.toLowerCase() === 'true');\n }\n else {\n return !!value;\n }\n}\nexports.boolValue = boolValue;\n/**\n * Check to see if an ID is a mongoID.\n * @param {string} text - The text to check if it is a mongoID.\n * @returns {boolean} - TRUE if the text is a mongoID; FALSE otherwise.\n */\nfunction isMongoId(text) {\n return !!text.toString().match(/^[0-9a-fA-F]{24}$/);\n}\nexports.isMongoId = isMongoId;\n/**\n * Checks the calculated value for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the calculated value.\n * @param {import('@formio/core').Submission} submission - A submission object.\n * @param {*} rowData - The contextual row data for the component.\n */\nfunction checkCalculated(component, submission, rowData) {\n // Process calculated value stuff if present.\n if (component.calculateValue) {\n lodash_1.default.set(rowData, component.key, evaluate(component.calculateValue, {\n value: undefined,\n data: submission ? submission.data : rowData,\n row: rowData,\n util: this,\n component\n }, 'value'));\n }\n}\nexports.checkCalculated = checkCalculated;\n/**\n * Check if a simple conditional evaluates to true.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {import('@formio/core').SimpleConditional} condition - The condition to check.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\n/**\n *\n * @param conditionPaths\n * @param data\n */\nfunction getConditionalPathsRecursive(conditionPaths, data) {\n let currentGlobalIndex = 0;\n const conditionalPathsArray = [];\n const getConditionalPaths = (data, currentPath = '', localIndex = 0) => {\n currentPath = currentPath.replace(/^\\.+|\\.+$/g, '');\n const currentLocalIndex = localIndex;\n const currentData = lodash_1.default.get(data, currentPath);\n if (Array.isArray(currentData) && currentData.filter(Boolean).length > 0) {\n if (currentData.some(element => typeof element !== 'object')) {\n return;\n }\n const hasInnerDataArray = currentData.find(x => Array.isArray(x[conditionPaths[currentLocalIndex]]));\n if (hasInnerDataArray) {\n currentData.forEach((_, indexOutside) => {\n const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;\n getConditionalPaths(data, innerCompDataPath, currentLocalIndex + 1);\n });\n }\n else {\n currentData.forEach((x, index) => {\n if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {\n const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;\n conditionalPathsArray.push(compDataPath);\n }\n });\n }\n }\n else {\n if (!conditionPaths[currentGlobalIndex]) {\n return;\n }\n currentGlobalIndex = currentGlobalIndex + 1;\n getConditionalPaths(data, `${currentPath}.${conditionPaths[currentGlobalIndex - 1]}`, currentGlobalIndex);\n }\n };\n getConditionalPaths(data);\n return conditionalPathsArray;\n}\n/**\n *\n * @param component\n * @param condition\n * @param row\n * @param data\n * @param instance\n */\nfunction checkSimpleConditional(component, condition, row, data, instance) {\n if (condition.when) {\n const value = getComponentActualValue(condition.when, data, row);\n const eq = String(condition.eq);\n const show = String(condition.show);\n // Special check for selectboxes component.\n if (lodash_1.default.isObject(value) && lodash_1.default.has(value, condition.eq)) {\n return String(value[condition.eq]) === show;\n }\n // FOR-179 - Check for multiple values.\n if (Array.isArray(value) && value.map(String).includes(eq)) {\n return show === 'true';\n }\n return (String(value) === eq) === (show === 'true');\n }\n else {\n const { conditions = [], conjunction = 'all', show = true } = condition;\n if (!conditions.length) {\n return true;\n }\n const conditionsResult = lodash_1.default.map(conditions, (cond) => {\n var _a, _b;\n const { value: comparedValue, operator, component: conditionComponentPath } = cond;\n if (!conditionComponentPath) {\n return true;\n }\n const splittedConditionPath = conditionComponentPath.split('.');\n const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);\n if (conditionalPaths.length > 0) {\n return conditionalPaths.map((path) => {\n const value = getComponentActualValue(path, data, row);\n const ConditionOperator = conditionOperators_1.default[operator];\n return ConditionOperator\n ? new ConditionOperator().getResult({ value, comparedValue, instance, component, path })\n : true;\n });\n }\n else {\n const value = getComponentActualValue(conditionComponentPath, data, row);\n const СonditionOperator = conditionOperators_1.default[operator];\n return СonditionOperator\n ? new СonditionOperator().getResult({ value, comparedValue, instance, component, path: conditionComponentPath })\n : true;\n }\n });\n let result = false;\n switch (conjunction) {\n case 'any':\n result = lodash_1.default.some(conditionsResult.flat(), res => !!res);\n break;\n default:\n result = lodash_1.default.every(conditionsResult.flat(), res => !!res);\n }\n return show ? result : !result;\n }\n}\nexports.checkSimpleConditional = checkSimpleConditional;\n/**\n * Returns a components normalized value.\n * @param {string} compPath - The full path to the component.\n * @param {*} data - The data object to get the value from.\n * @param {*} row - The contextual row data for the component.\n * @returns {*} - The normalized value of the component.\n */\nfunction getComponentActualValue(compPath, data, row) {\n let value = null;\n if (data) {\n value = (0, formUtils_1.getValue)({ data }, compPath);\n }\n if (row && lodash_1.default.isNil(value)) {\n value = (0, formUtils_1.getValue)({ data: row }, compPath);\n }\n // FOR-400 - Fix issue where falsey values were being evaluated as show=true\n if (lodash_1.default.isNil(value) || (lodash_1.default.isObject(value) && lodash_1.default.isEmpty(value))) {\n value = '';\n }\n return value;\n}\nexports.getComponentActualValue = getComponentActualValue;\n/**\n * Check custom javascript conditional.\n * @param {import('@formio/core').Component} component - The component to check for the conditional.\n * @param {string} custom - The custom conditional string to evaluate.\n * @param {*} row - The row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {string} variable - The variable name for the result of the custom conditional.\n * @param {*} onError - A custom return if there is an error or the value is null from the evaluation.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {*} - The result of the evaulation.\n */\nfunction checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {\n if (typeof custom === 'string') {\n custom = `var ${variable} = true; ${custom}; return ${variable};`;\n }\n const value = (instance && instance.evaluate) ?\n instance.evaluate(custom, { row, data, form }) :\n evaluate(custom, { row, data, form });\n if (value === null) {\n return onError;\n }\n return value;\n}\nexports.checkCustomConditional = checkCustomConditional;\n/**\n * Check a component for JSON conditionals.\n * @param {import('@formio/core').Component} component - The component\n * @param {import('@formio/core').JSONConditional} json - The json conditional to check.\n * @param {*} row - The contextual row data for the component.\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The Form JSON of the form.\n * @param {*} onError - Custom return value if there is an error.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkJsonConditional(component, json, row, data, form, onError) {\n try {\n return json_logic_js_1.default.apply(json, {\n data,\n row,\n form,\n _: lodash_1.default,\n });\n }\n catch (err) {\n console.warn(`An error occurred in jsonLogic advanced condition for ${component.key}`, err);\n return onError;\n }\n}\nexports.checkJsonConditional = checkJsonConditional;\n/**\n * Returns the contextual row data for a component.\n * @param {import('@formio/core').Component} component - The component to get the row data for.\n * @param {*} row - The row data for the component.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @param {*} conditional - The component conditional.\n * @returns {*} - The contextual row data for the component.\n */\nfunction getRow(component, row, instance, conditional) {\n var _a, _b, _c;\n const condition = conditional || component.conditional;\n // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema\n if (!instance) {\n instance = lodash_1.default.cloneDeep(component);\n }\n const dataParent = getDataParentComponent(instance);\n if (dataParent) {\n const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;\n const isTriggerCondtionComponentPath = condition.when || !condition.conditions\n ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)\n : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });\n if (isTriggerCondtionComponentPath) {\n const newRow = {};\n lodash_1.default.set(newRow, parentPath, row);\n row = newRow;\n }\n }\n return row;\n}\n/**\n * Checks the conditions for a provided component and data.\n * @param {import('@formio/core').Component} component - The component to check for the condition.\n * @param {*} row - The data within a row\n * @param {*} data - The full submission data.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {import('../../src/components/_classes/component/Component').Component} instance - The component instance.\n * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.\n */\nfunction checkCondition(component, row, data, form, instance) {\n const { customConditional, conditional } = component;\n if (customConditional) {\n return checkCustomConditional(component, customConditional, row, data, form, 'show', true, instance);\n }\n else if (conditional && (conditional.when || lodash_1.default.some(conditional.conditions || [], condition => condition.component && condition.operator))) {\n row = getRow(component, row, instance);\n return checkSimpleConditional(component, conditional, row, data, instance);\n }\n else if (conditional && conditional.json) {\n return checkJsonConditional(component, conditional.json, row, data, form, true);\n }\n // Default to show.\n return true;\n}\nexports.checkCondition = checkCondition;\n/**\n * Test a trigger on a component.\n * @param {import('@formio/core').Component} component - The component to test the trigger against.\n * @param {import('@formio/core').LogicTrigger} trigger - The trigger configuration.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The root data object.\n * @param {import('@formio/core').Form} form - The form object.\n * @param {any} instance - The component that is performing the trigger.\n * @returns {boolean} - TRUE if the trigger should fire; FALSE otherwise.\n */\nfunction checkTrigger(component, trigger, row, data, form, instance) {\n // If trigger is empty, don't fire it\n if (!trigger || !trigger[trigger.type]) {\n return false;\n }\n switch (trigger.type) {\n case 'simple':\n row = getRow(component, row, instance, trigger.simple);\n return checkSimpleConditional(component, trigger.simple, row, data, instance);\n case 'javascript':\n return checkCustomConditional(component, trigger.javascript, row, data, form, 'result', false, instance);\n case 'json':\n return checkJsonConditional(component, trigger.json, row, data, form, false);\n }\n // If none of the types matched, don't fire the trigger.\n return false;\n}\nexports.checkTrigger = checkTrigger;\n/**\n * Sets a property on a component via an executed Logic action.\n * @param {import('@formio/core').Component} component - The component to set the property on.\n * @param {import('@formio/core').LogicAction} action - The action to perform on the component.\n * @param {string} result - The name of the variable in the evaulation to use as the result.\n * @param {import('@formio/core').DataObject} row - The contextual row data.\n * @param {import('@formio/core').DataObject} data - The full submission data.\n * @param {any} instance - The component instance.\n * @returns {import('@formio/core').Component} - The modified component.\n */\nfunction setActionProperty(component, action, result, row, data, instance) {\n const property = action.property.value;\n switch (action.property.type) {\n case 'boolean': {\n const currentValue = lodash_1.default.get(component, property, false).toString();\n const newValue = action.state.toString();\n if (currentValue !== newValue) {\n lodash_1.default.set(component, property, newValue === 'true');\n }\n break;\n }\n case 'string': {\n const evalData = {\n data,\n row,\n component,\n result,\n };\n const textValue = action.property.component ? action[action.property.component] : action.text;\n const currentValue = lodash_1.default.get(component, property, '');\n const newValue = (instance && instance.interpolate)\n ? instance.interpolate(textValue, evalData)\n : Evaluator_1.Evaluator.interpolate(textValue, evalData);\n if (newValue !== currentValue) {\n lodash_1.default.set(component, property, newValue);\n }\n break;\n }\n }\n return component;\n}\nexports.setActionProperty = setActionProperty;\n/**\n * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World\n * @param {string} str - The string to remove HTML tags from.\n * @returns {string} - The string without HTML tags.\n */\nfunction removeHTML(str) {\n const doc = new window.DOMParser().parseFromString(str, 'text/html');\n return (doc.body.textContent || '').trim();\n}\nexports.removeHTML = removeHTML;\n/**\n * Unescape HTML characters like <, >, & and etc.\n * @param {string} str - The string to unescape.\n * @returns {string} - The unescaped string.\n */\nfunction unescapeHTML(str) {\n if (typeof window === 'undefined' || !('DOMParser' in window)) {\n return str;\n }\n const elem = document.createElement('textarea');\n elem.innerHTML = str;\n return elem.value;\n}\nexports.unescapeHTML = unescapeHTML;\n/**\n * Make HTML element from string\n * @param {string} str - The string to convert to an HTML element.\n * @param {string} selector - The selector to use to get the element once it is created.\n * @returns {HTMLElement} - The HTML element that was created.\n */\nfunction convertStringToHTMLElement(str, selector) {\n const doc = new window.DOMParser().parseFromString(str, 'text/html');\n return doc.body.querySelector(selector);\n}\nexports.convertStringToHTMLElement = convertStringToHTMLElement;\n/**\n * Make a filename guaranteed to be unique.\n * @param {string} name - The original name of the file.\n * @param {string} template - The template to use for the unique name.\n * @param {object} evalContext - The context to use for the evaluation.\n * @returns {string} - A unique filename.\n */\nfunction uniqueName(name, template, evalContext) {\n template = template || '{{fileName}}-{{guid}}';\n //include guid in template anyway, to prevent overwriting issue if filename matches existing file\n if (!template.includes('{{guid}}')) {\n template = `${template}-{{guid}}`;\n }\n const parts = name.split('.');\n let fileName = parts.slice(0, parts.length - 1).join('.');\n const extension = parts.length > 1\n ? `.${lodash_1.default.last(parts)}`\n : '';\n //allow only 100 characters from original name to avoid issues with filename length restrictions\n fileName = fileName.substr(0, 100);\n evalContext = Object.assign(evalContext || {}, {\n fileName,\n guid: guid()\n });\n //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash\n const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\\-_ ]/g, '-');\n return uniqueName;\n}\nexports.uniqueName = uniqueName;\n/**\n * Returns a GUID\n * @returns {string} - A GUID.\n */\nfunction guid() {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n const r = Math.random() * 16 | 0;\n const v = c === 'x'\n ? r\n : (r & 0x3 | 0x8);\n return v.toString(16);\n });\n}\nexports.guid = guid;\n/**\n * Return a translated date setting.\n * @param {string|Date} date - The date to translate.\n * @returns {(null|Date)} - The translated date.\n */\nfunction getDateSetting(date) {\n if (lodash_1.default.isNil(date) || lodash_1.default.isNaN(date) || date === '') {\n return null;\n }\n if (date instanceof Date) {\n return date;\n }\n else if (typeof date.toDate === 'function') {\n return date.isValid() ? date.toDate() : null;\n }\n let dateSetting = ((typeof date !== 'string') || (date.indexOf('moment(') === -1)) ? (0, moment_timezone_1.default)(date) : null;\n if (dateSetting && dateSetting.isValid()) {\n return dateSetting.toDate();\n }\n dateSetting = null;\n try {\n const value = Evaluator_1.Evaluator.evaluator(`return ${date};`, 'moment')(moment_timezone_1.default);\n if (typeof value === 'string') {\n dateSetting = (0, moment_timezone_1.default)(value);\n }\n else if (typeof value.toDate === 'function') {\n dateSetting = (0, moment_timezone_1.default)(value.toDate().toUTCString());\n }\n else if (value instanceof Date) {\n dateSetting = (0, moment_timezone_1.default)(value);\n }\n }\n catch (e) {\n return null;\n }\n if (!dateSetting) {\n return null;\n }\n // Ensure this is a date.\n if (!dateSetting.isValid()) {\n return null;\n }\n return dateSetting.toDate();\n}\nexports.getDateSetting = getDateSetting;\n/**\n * Returns true if the date is a valid date. False otherwise.\n * @param {Date|string} date - The date to check for validity.\n * @returns {boolean} - TRUE if the date is valid; FALSE otherwise.\n */\nfunction isValidDate(date) {\n return lodash_1.default.isDate(date) && !lodash_1.default.isNaN(date.getDate());\n}\nexports.isValidDate = isValidDate;\n/**\n * Get the current timezone string.\n * @returns {string} - The current timezone.\n */\nfunction currentTimezone() {\n if (moment_timezone_1.default.currentTimezone) {\n return moment_timezone_1.default.currentTimezone;\n }\n moment_timezone_1.default.currentTimezone = jstimezonedetect_1.default.determine().name();\n return moment_timezone_1.default.currentTimezone;\n}\nexports.currentTimezone = currentTimezone;\n/**\n * Get an offset date provided a date object and timezone object.\n * @param {Date} date - The date to offset.\n * @param {string} timezone - The timezone to offset the date to.\n * @returns {Date} - The offset date.\n */\nfunction offsetDate(date, timezone) {\n if (timezone === 'UTC') {\n return {\n date: new Date(date.getTime() + (date.getTimezoneOffset() * 60000)),\n abbr: 'UTC'\n };\n }\n const dateMoment = (0, moment_timezone_1.default)(date).tz(timezone);\n return {\n date: new Date(date.getTime() + ((dateMoment.utcOffset() + date.getTimezoneOffset()) * 60000)),\n abbr: dateMoment.format('z')\n };\n}\nexports.offsetDate = offsetDate;\n/**\n * Returns if the zones are loaded.\n * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.\n */\nfunction zonesLoaded() {\n return moment_timezone_1.default.zonesLoaded;\n}\nexports.zonesLoaded = zonesLoaded;\n/**\n * Returns if we should load the zones.\n * @param {string} timezone - The timezone to check if we should load the zones.\n * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.\n */\nfunction shouldLoadZones(timezone) {\n if (timezone === currentTimezone() || timezone === 'UTC') {\n return false;\n }\n return true;\n}\nexports.shouldLoadZones = shouldLoadZones;\n/**\n * Externally load the timezone data.\n * @param {string} url - The URL to load the timezone data from.\n * @param {string} timezone - The timezone to load.\n * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.\n */\nfunction loadZones(url, timezone) {\n if (timezone && !shouldLoadZones(timezone)) {\n // Return non-resolving promise.\n return new Promise(lodash_1.default.noop);\n }\n if (moment_timezone_1.default.zonesPromise) {\n return moment_timezone_1.default.zonesPromise;\n }\n return moment_timezone_1.default.zonesPromise = fetch(url)\n .then(resp => resp.json().then(zones => {\n moment_timezone_1.default.tz.load(zones);\n moment_timezone_1.default.zonesLoaded = true;\n // Trigger a global event that the timezones have finished loading.\n if (document && document.createEvent && document.body && document.body.dispatchEvent) {\n var event = document.createEvent('Event');\n event.initEvent('zonesLoaded', true, true);\n document.body.dispatchEvent(event);\n }\n }));\n}\nexports.loadZones = loadZones;\n/**\n * Get the moment date object for translating dates with timezones.\n * @param {string|Date} value - The value to convert into a moment date.\n * @param {string} format - The format to convert the date to.\n * @param {string} timezone - The timezone to convert the date to.\n * @param {object} options - The options object\n * @returns {Date} - The moment date object.\n */\nfunction momentDate(value, format, timezone, options) {\n const momentDate = (0, moment_timezone_1.default)(value);\n if (!timezone) {\n return momentDate;\n }\n if (timezone === 'UTC') {\n timezone = 'Etc/UTC';\n }\n if ((timezone !== currentTimezone() || (format && format.match(/\\s(z$|z\\s)/))) && (moment_timezone_1.default.zonesLoaded || (options === null || options === void 0 ? void 0 : options.email))) {\n return momentDate.tz(timezone);\n }\n return momentDate;\n}\nexports.momentDate = momentDate;\n/**\n * Format a date provided a value, format, and timezone object.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {string|Date} value - The value to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @param {string} flatPickrInputFormat - The format to use for flatpickr input.\n * @returns {string} - The formatted date.\n */\nfunction formatDate(timezonesUrl, value, format, timezone, flatPickrInputFormat) {\n const momentDate = (0, moment_timezone_1.default)(value, flatPickrInputFormat || undefined);\n if (timezone === currentTimezone()) {\n // See if our format contains a \"z\" timezone character.\n if (format.match(/\\s(z$|z\\s)/)) {\n loadZones(timezonesUrl);\n if (moment_timezone_1.default.zonesLoaded) {\n return momentDate.tz(timezone).format(convertFormatToMoment(format));\n }\n else {\n return momentDate.format(convertFormatToMoment(format.replace(/\\s(z$|z\\s)/, '')));\n }\n }\n // Return the standard format.\n return momentDate.format(convertFormatToMoment(format));\n }\n if (timezone === 'UTC') {\n const offset = offsetDate(momentDate.toDate(), 'UTC');\n return `${(0, moment_timezone_1.default)(offset.date).format(convertFormatToMoment(format))} UTC`;\n }\n // Load the zones since we need timezone information.\n loadZones(timezonesUrl);\n if (moment_timezone_1.default.zonesLoaded && timezone) {\n return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);\n }\n else {\n return momentDate.format(convertFormatToMoment(format));\n }\n}\nexports.formatDate = formatDate;\n/**\n * Pass a format function to format within a timezone.\n * @param {string} timezonesUrl - The URL to load the timezone data from.\n * @param {Function} formatFn - The format function to use.\n * @param {Date|string} date - The date to format.\n * @param {string} format - The format to format the date to.\n * @param {string} timezone - The timezone to format the date to.\n * @returns {string} - The formatted date.\n */\nfunction formatOffset(timezonesUrl, formatFn, date, format, timezone) {\n if (timezone === currentTimezone()) {\n return formatFn(date, format);\n }\n if (timezone === 'UTC') {\n return `${formatFn(offsetDate(date, 'UTC').date, format)} UTC`;\n }\n // Load the zones since we need timezone information.\n loadZones(timezonesUrl);\n if (moment_timezone_1.default.zonesLoaded) {\n const offset = offsetDate(date, timezone);\n return `${formatFn(offset.date, format)} ${offset.abbr}`;\n }\n else {\n return formatFn(date, format);\n }\n}\nexports.formatOffset = formatOffset;\n/**\n * Returns the local date format information.\n * @param {Intl.LocalesArgument} locale - The locale to get the date format for.\n * @returns {object} - The local date format information.\n */\nfunction getLocaleDateFormatInfo(locale) {\n const formatInfo = {};\n const day = 21;\n const exampleDate = new Date(2017, 11, day);\n const localDateString = exampleDate.toLocaleDateString(locale);\n formatInfo.dayFirst = localDateString.slice(0, 2) === day.toString();\n return formatInfo;\n}\nexports.getLocaleDateFormatInfo = getLocaleDateFormatInfo;\n/**\n * Convert the format from the angular-datepicker module to flatpickr format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToFlatpickr(format) {\n return format\n // Remove the Z timezone offset, not supported by flatpickr.\n .replace(/Z/g, '')\n // Year conversion.\n .replace(/y/g, 'Y')\n .replace('YYYY', 'Y')\n .replace('YY', 'y')\n // Month conversion.\n .replace('MMMM', 'F')\n .replace(/M/g, 'n')\n .replace('nnn', 'M')\n .replace('nn', 'm')\n // Day in month.\n .replace(/d/g, 'j')\n .replace(/jj/g, 'd')\n // Day in week.\n .replace('EEEE', 'l')\n .replace('EEE', 'D')\n // Hours, minutes, seconds\n .replace('HH', 'H')\n .replace('hh', 'G')\n .replace('mm', 'i')\n .replace('ss', 'S')\n .replace(/a/g, 'K');\n}\nexports.convertFormatToFlatpickr = convertFormatToFlatpickr;\n/**\n * Convert the format from the angular-datepicker module to moment format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMoment(format) {\n return format\n // Year conversion.\n .replace(/y/g, 'Y')\n // Day in month.\n .replace(/d/g, 'D')\n // Day in week.\n .replace(/E/g, 'd')\n // AM/PM marker\n .replace(/a/g, 'A')\n // Unix Timestamp\n .replace(/U/g, 'X');\n}\nexports.convertFormatToMoment = convertFormatToMoment;\n/**\n * Convert the format from the angular-datepicker module to mask format.\n * @param {string} format - The format to convert.\n * @returns {string} - The converted format.\n */\nfunction convertFormatToMask(format) {\n return format\n // Long month replacement.\n .replace(/M{4}/g, 'MM')\n // Initial short month conversion.\n .replace(/M{3}/g, '***')\n // Short month conversion if input as text.\n .replace(/e/g, 'Q')\n // Month number conversion.\n .replace(/W/g, '99')\n // Year conversion.\n .replace(/[ydhmswHMG]/g, '9')\n // AM/PM conversion.\n .replace(/a/g, 'AA');\n}\nexports.convertFormatToMask = convertFormatToMask;\n/**\n * Returns an input mask that is compatible with the input mask library.\n * @param {string} mask - The Form.io input mask.\n * @param {string} placeholderChar - Char which is used as a placeholder.\n * @returns {Array} - The input mask for the mask library.\n */\nfunction getInputMask(mask, placeholderChar) {\n if (mask instanceof Array) {\n return mask;\n }\n const maskArray = [];\n maskArray.numeric = true;\n for (let i = 0; i < mask.length; i++) {\n switch (mask[i]) {\n case '9':\n maskArray.push(/\\d/);\n break;\n case 'A':\n maskArray.numeric = false;\n maskArray.push(/[a-zA-Z]/);\n break;\n case 'a':\n maskArray.numeric = false;\n maskArray.push(/[a-z]/);\n break;\n case '*':\n maskArray.numeric = false;\n maskArray.push(/[a-zA-Z0-9]/);\n break;\n // If char which is used inside mask placeholder was used in the mask, replace it with space to prevent errors\n case placeholderChar:\n maskArray.numeric = false;\n maskArray.push(' ');\n break;\n default:\n maskArray.numeric = false;\n maskArray.push(mask[i]);\n break;\n }\n }\n return maskArray;\n}\nexports.getInputMask = getInputMask;\n/**\n * Unmasks a value using the provided mask and placeholder characters.\n * @param {string} value - The value to unmask.\n * @param {string} mask - The mask to use for unmasking.\n * @param {string} placeholderChar - The placeholder character to use for unmasking.\n * @returns {string} - The unmasked value.\n */\nfunction unmaskValue(value, mask, placeholderChar) {\n if (!mask || !value || value.length > mask.length) {\n return value;\n }\n let unmaskedValue = value.split('');\n for (let i = 0; i < mask.length; i++) {\n const char = value[i] || '';\n const charPart = mask[i];\n if (!lodash_1.default.isRegExp(charPart) && char === charPart) {\n unmaskedValue[i] = '';\n }\n }\n unmaskedValue = unmaskedValue.join('').replace(placeholderChar, '');\n return unmaskedValue;\n}\nexports.unmaskValue = unmaskValue;\n/**\n * Returns true if the value matches the input mask format.\n * @param {string} value - The value to check.\n * @param {string} inputMask - The input mask to check against.\n * @returns {boolean} - TRUE if the value matches the input mask; FALSE otherwise.\n */\nfunction matchInputMask(value, inputMask) {\n if (!inputMask) {\n return true;\n }\n // If value is longer than mask, it isn't valid.\n if (value.length > inputMask.length) {\n return false;\n }\n for (let i = 0; i < inputMask.length; i++) {\n const char = value[i] || '';\n const charPart = inputMask[i];\n if (!(lodash_1.default.isRegExp(charPart) && charPart.test(char) || charPart === char)) {\n return false;\n }\n }\n return true;\n}\nexports.matchInputMask = matchInputMask;\n/**\n * Returns the number separators (i.e. 1,000) for the provided language.\n * @param {string} lang - The language code to get the number separators for.\n * @returns {{delimiter: string, decimalSeparator: string}} - The number separators.\n */\nfunction getNumberSeparators(lang = 'en') {\n const formattedNumberString = (12345.6789).toLocaleString(lang);\n const delimeters = formattedNumberString.match(/..(.)...(.)../);\n if (!delimeters) {\n return {\n delimiter: ',',\n decimalSeparator: '.'\n };\n }\n return {\n delimiter: (delimeters.length > 1) ? delimeters[1] : ',',\n decimalSeparator: (delimeters.length > 2) ? delimeters[2] : '.',\n };\n}\nexports.getNumberSeparators = getNumberSeparators;\n/**\n * Returns the number for the maximum amount of decimal places for a number.\n * @param {import('@formio/core').Component} component - The component to check for decimal limits.\n * @param {number} defaultLimit - The default limit to use if none is provided in the component.\n * @returns {number} - The number of decimal places allowed.\n */\nfunction getNumberDecimalLimit(component, defaultLimit) {\n if (lodash_1.default.has(component, 'decimalLimit')) {\n return lodash_1.default.get(component, 'decimalLimit');\n }\n // Determine the decimal limit. Defaults to 20 but can be overridden by validate.step or decimalLimit settings.\n let decimalLimit = defaultLimit || 20;\n const step = lodash_1.default.get(component, 'validate.step', 'any');\n if (step !== 'any') {\n const parts = step.toString().split('.');\n if (parts.length > 1) {\n decimalLimit = parts[1].length;\n }\n }\n return decimalLimit;\n}\nexports.getNumberDecimalLimit = getNumberDecimalLimit;\n/**\n * Returns the currency affixes for a specific language.\n * @param {object} arg0 - The arguments object.\n * @param {string} arg0.currency - The currency code to get the affixes for.\n * @param {number} arg0.decimalLimit - The number of decimal places to use.\n * @param {string} arg0.decimalSeparator - The decimal separator to use.\n * @param {string} arg0.lang - The language code to use.\n * @returns {{prefix: string, suffix: string}} - The currency affixes.\n */\nfunction getCurrencyAffixes({ currency, decimalLimit, decimalSeparator, lang, }) {\n // Get the prefix and suffix from the localized string.\n let regex = `(.*)?${(100).toLocaleString(lang)}`;\n if (decimalLimit) {\n regex += `${decimalSeparator === '.' ? '\\\\.' : decimalSeparator}${(0).toLocaleString(lang)}{${decimalLimit}}`;\n }\n regex += '(.*)?';\n const parts = (100).toLocaleString(lang, {\n style: 'currency',\n currency: currency ? currency : 'USD',\n useGrouping: true,\n maximumFractionDigits: decimalLimit || 0,\n minimumFractionDigits: decimalLimit || 0\n }).replace('.', decimalSeparator).match(new RegExp(regex));\n return {\n prefix: (parts === null || parts === void 0 ? void 0 : parts[1]) || '',\n suffix: (parts === null || parts === void 0 ? void 0 : parts[2]) || ''\n };\n}\nexports.getCurrencyAffixes = getCurrencyAffixes;\n/**\n * Fetch the field data provided a component.\n * @param {import('@formio/core').DataObject} data - The data object to fetch the field data from.\n * @param {import('@formio/core').Component} component - The component to fetch the field data for.\n * @returns {*} - The field data.\n */\nfunction fieldData(data, component) {\n if (!data) {\n return '';\n }\n if (!component || !component.key) {\n return data;\n }\n if (component.key.includes('.')) {\n let value = data;\n const parts = component.key.split('.');\n let key = '';\n for (let i = 0; i < parts.length; i++) {\n key = parts[i];\n // Handle nested resources\n if (value.hasOwnProperty('_id')) {\n value = value.data;\n }\n // Return if the key is not found on the value.\n if (!value.hasOwnProperty(key)) {\n return;\n }\n // Convert old single field data in submissions to multiple\n if (key === parts[parts.length - 1] && component.multiple && !Array.isArray(value[key])) {\n value[key] = [value[key]];\n }\n // Set the value of this key.\n value = value[key];\n }\n return value;\n }\n else {\n // Convert old single field data in submissions to multiple\n if (component.multiple && !Array.isArray(data[component.key])) {\n data[component.key] = [data[component.key]];\n }\n // Fix for checkbox type radio submission values in tableView\n if (component.type === 'checkbox' && component.inputType === 'radio') {\n return data[component.name] === component.value;\n }\n return data[component.key];\n }\n}\nexports.fieldData = fieldData;\n/**\n * Delays function execution with possibility to execute function synchronously or cancel it.\n * @param {Function} fn - Function to delay\n * @param {number} delay - Delay time\n * @param {...any} args - Arguments to pass to the function\n * @returns {*} - Function to cancel the delay\n */\nfunction delay(fn, delay = 0, ...args) {\n const timer = setTimeout(fn, delay, ...args);\n /**\n *\n */\n function cancel() {\n clearTimeout(timer);\n }\n /**\n * Execute the function early.\n * @returns {*} - The result of the function.\n */\n function earlyCall() {\n cancel();\n return fn(...args);\n }\n earlyCall.timer = timer;\n earlyCall.cancel = cancel;\n return earlyCall;\n}\nexports.delay = delay;\n/**\n * Iterate the given key to make it unique.\n * @param {string} key\n * Modify the component key to be unique.\n * @returns {string}\n * The new component key.\n */\nfunction iterateKey(key) {\n if (!key.match(/(\\d+)$/)) {\n return `${key}1`;\n }\n return key.replace(/(\\d+)$/, function (suffix) {\n return Number(suffix) + 1;\n });\n}\nexports.iterateKey = iterateKey;\n/**\n * Determines a unique key within a map provided the base key.\n * @param {Record<string, string>} map - The map to check for uniqueness.\n * @param {string} base - The base path of the key.\n * @returns {string} - The unique key.\n */\nfunction uniqueKey(map, base) {\n let newKey = base;\n while (map.hasOwnProperty(newKey)) {\n newKey = iterateKey(newKey);\n }\n return newKey;\n}\nexports.uniqueKey = uniqueKey;\n/**\n * Determines the major version number of bootstrap.\n * @param {object} options - The options to check for bootstrap version.\n * @param {string} options.bootstrap - The bootstrap version to use.\n * @returns {number} - The bootstrap version.\n */\nfunction bootstrapVersion(options) {\n if (options.bootstrap) {\n return options.bootstrap;\n }\n if ((typeof jQuery === 'function') && (typeof jQuery().collapse === 'function')) {\n return parseInt(jQuery.fn.collapse.Constructor.VERSION.split('.')[0], 10);\n }\n if (window.bootstrap && window.bootstrap.Collapse) {\n return parseInt(window.bootstrap.Collapse.VERSION.split('.')[0], 10);\n }\n return 0;\n}\nexports.bootstrapVersion = bootstrapVersion;\n/**\n * Retrun provided argument.\n * If argument is a function, returns the result of a function call.\n * @param {Function|any} e - The argument to check if a function and call if so.\n * @returns {any} - Either the result of the function call (e) or e if it is not a function.\n */\nfunction unfold(e) {\n if (typeof e === 'function') {\n return e();\n }\n return e;\n}\nexports.unfold = unfold;\n/**\n * Map values through unfold and return first non-nil value.\n * @param {Array<T>} collection - The collection to map through unfold.;\n * @returns {T} - The first non-nil value.\n */\nexports.firstNonNil = lodash_1.default.flow([\n lodash_1.default.partialRight(lodash_1.default.map, unfold),\n lodash_1.default.partialRight(lodash_1.default.find, v => !lodash_1.default.isUndefined(v))\n]);\n/**\n * Create enclosed state. Returns functions to getting and cycling between states.\n * @param {*} a - initial state.\n * @param {*} b - next state.\n * @returns {Functions[]} -- [get, toggle];\n */\nfunction withSwitch(a, b) {\n let state = a;\n let next = b;\n /**\n * Returns the state of the switch.\n * @returns {*} - The current state.\n */\n function get() {\n return state;\n }\n /**\n * Toggles the state of the switch.\n */\n function toggle() {\n const prev = state;\n state = next;\n next = prev;\n }\n return [get, toggle];\n}\nexports.withSwitch = withSwitch;\n/**\n * Create a function that will call the provided function only the provided limit.\n * @param {Function} callback - The callback to call.\n * @param {object} options - The options to use.\n * @param {number} options.limit - The limit to call the callback.\n * @param {number} options.delay - The delay to wait before resetting the call count.\n * @returns {Function} - The function that will call the callback only the provided limit.\n */\nfunction observeOverload(callback, options = {}) {\n const { limit = 50, delay = 500 } = options;\n let callCount = 0;\n let timeoutID = 0;\n const reset = () => callCount = 0;\n return () => {\n if (timeoutID !== 0) {\n clearTimeout(timeoutID);\n timeoutID = 0;\n }\n timeoutID = setTimeout(reset, delay);\n callCount += 1;\n if (callCount >= limit) {\n clearTimeout(timeoutID);\n reset();\n return callback();\n }\n };\n}\nexports.observeOverload = observeOverload;\n/**\n * Returns the components that are provided within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @param {boolean} excludeNested - Exclude nested components.\n * @param {Array<string>} excludedTypes - The types of components to exclude.\n * @returns {Array} - The components within the evaluation context.\n */\nfunction getContextComponents(context, excludeNested, excludedTypes = []) {\n const values = [];\n context.utils.eachComponent(context.instance.options.editForm.components, (component, path) => {\n const addToContextComponents = excludeNested ? !component.tree : true;\n if (component.key !== context.data.key && addToContextComponents && !lodash_1.default.includes(excludedTypes, component.type)) {\n values.push({\n label: `${component.label || component.key} (${path})`,\n value: path,\n });\n }\n });\n return values;\n}\nexports.getContextComponents = getContextComponents;\n/**\n * Returns the button components that are within an evaluation context.\n * @param {any} context - The evaluation context to get the components from.\n * @returns {Array} - The button components within the evaluation context.\n */\nfunction getContextButtons(context) {\n const values = [];\n context.utils.eachComponent(context.instance.options.editForm.components, (component) => {\n if (component.type === 'button') {\n values.push({\n label: `${component.key} (${component.label})`,\n value: component.key,\n });\n }\n });\n return values;\n}\nexports.getContextButtons = getContextButtons;\n// Tags that could be in text, that should be ommited or handled in a special way\nconst inTextTags = ['#text', 'A', 'B', 'EM', 'I', 'SMALL', 'STRONG', 'SUB', 'SUP', 'INS', 'DEL', 'MARK', 'CODE'];\n/**\n * Helper function for 'translateHTMLTemplate'. Translates text value of the passed html element.\n * @param {HTMLElement} elem - The element to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Translated element template.\n */\nfunction translateElemValue(elem, translate) {\n if (!elem.innerText) {\n return elem.innerHTML;\n }\n const elemValue = elem.innerText.replace(Evaluator_1.Evaluator.templateSettings.interpolate, '').replace(/\\s\\s+/g, ' ').trim();\n const translatedValue = translate(elemValue);\n if (elemValue !== translatedValue) {\n const links = elem.innerHTML.match(/<a[^>]*>(.*?)<\\/a>/g);\n if (links && links.length) {\n if (links.length === 1 && links[0].length === elem.innerHTML.length) {\n return elem.innerHTML.replace(elemValue, translatedValue);\n }\n const translatedLinks = links.map(link => {\n const linkElem = document.createElement('a');\n linkElem.innerHTML = link;\n return translateElemValue(linkElem, translate);\n });\n return `${translatedValue} (${translatedLinks.join(', ')})`;\n }\n else {\n return elem.innerText.replace(elemValue, translatedValue);\n }\n }\n else {\n return elem.innerHTML;\n }\n}\n/**\n * Helper function for 'translateHTMLTemplate'. Goes deep through html tag children and calls function to translate their text values.\n * @param {HTMLElement} tag - The tag to translate.\n * @param {Function} translate - The translation function.\n * @returns {void}\n */\nfunction translateDeepTag(tag, translate) {\n const children = tag.children.length && [...tag.children];\n const shouldTranslateEntireContent = children && children.every(child => child.children.length === 0\n && inTextTags.some(tag => child.nodeName === tag));\n if (!children || shouldTranslateEntireContent) {\n tag.innerHTML = translateElemValue(tag, translate);\n }\n else {\n children.forEach(child => translateDeepTag(child, translate));\n }\n}\n/**\n * Translates text values in html template.\n * @param {string} template - The template to translate.\n * @param {Function} translate - The translation function.\n * @returns {string} - Html template with translated values.\n */\nfunction translateHTMLTemplate(template, translate) {\n const isHTML = /<[^>]*>/.test(template);\n if (!isHTML) {\n return translate(template);\n }\n const tempElem = document.createElement('div');\n tempElem.innerHTML = template;\n if (tempElem.innerText && tempElem.children.length) {\n translateDeepTag(tempElem, translate);\n return tempElem.innerHTML;\n }\n return template;\n}\nexports.translateHTMLTemplate = translateHTMLTemplate;\n/**\n * Sanitize an html string.\n * @param {string} string - The string to sanitize.\n * @param {any} options - The options to use for sanitization.\n * @returns {string} - The sanitized html string.\n */\nfunction sanitize(string, options) {\n if (typeof dompurify_1.default.sanitize !== 'function') {\n return string;\n }\n // Dompurify configuration\n const sanitizeOptions = {\n ADD_ATTR: ['ref', 'target'],\n USE_PROFILES: { html: true }\n };\n // Use profiles\n if (options.sanitizeConfig && options.sanitizeConfig.useProfiles) {\n Object.keys(options.sanitizeConfig.useProfiles).forEach(key => {\n sanitizeOptions.USE_PROFILES[key] = options.sanitizeConfig.useProfiles[key];\n });\n }\n // Add attrs\n if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addAttr) && options.sanitizeConfig.addAttr.length > 0) {\n options.sanitizeConfig.addAttr.forEach((attr) => {\n sanitizeOptions.ADD_ATTR.push(attr);\n });\n }\n // Add tags\n if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addTags) && options.sanitizeConfig.addTags.length > 0) {\n sanitizeOptions.ADD_TAGS = options.sanitizeConfig.addTags;\n }\n // Allow tags\n if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedTags) && options.sanitizeConfig.allowedTags.length > 0) {\n sanitizeOptions.ALLOWED_TAGS = options.sanitizeConfig.allowedTags;\n }\n // Allow attributes\n if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.allowedAttrs) && options.sanitizeConfig.allowedAttrs.length > 0) {\n sanitizeOptions.ALLOWED_ATTR = options.sanitizeConfig.allowedAttrs;\n }\n // Allowd URI Regex\n if (options.sanitizeConfig && options.sanitizeConfig.allowedUriRegex) {\n const allowedUriRegex = options.sanitizeConfig.allowedUriRegex;\n sanitizeOptions.ALLOWED_URI_REGEXP = lodash_1.default.isString(allowedUriRegex) ? new RegExp(allowedUriRegex) : allowedUriRegex;\n }\n // Allow to extend the existing array of elements that are safe for URI-like values\n if (options.sanitizeConfig && Array.isArray(options.sanitizeConfig.addUriSafeAttr) && options.sanitizeConfig.addUriSafeAttr.length > 0) {\n sanitizeOptions.ADD_URI_SAFE_ATTR = options.sanitizeConfig.addUriSafeAttr;\n }\n return dompurify_1.default.sanitize(string, sanitizeOptions);\n}\nexports.sanitize = sanitize;\n/**\n * Fast cloneDeep for JSON objects only.\n * @param {any} obj - The object to perform a fast clone deep against.\n * @returns {any} - The cloned object.\n */\nfunction fastCloneDeep(obj) {\n return obj ? JSON.parse(JSON.stringify(obj)) : obj;\n}\nexports.fastCloneDeep = fastCloneDeep;\n/**\n * Returns if the component is an input component.\n * @param {import('@formio/core').Component} componentJson - The JSON of a component.\n * @returns {bool} - TRUE if the component is an input component; FALSE otherwise.\n */\nfunction isInputComponent(componentJson) {\n if (componentJson.input === false || componentJson.input === true) {\n return componentJson.input;\n }\n switch (componentJson.type) {\n case 'htmlelement':\n case 'content':\n case 'columns':\n case 'fieldset':\n case 'panel':\n case 'table':\n case 'tabs':\n case 'well':\n case 'button':\n return false;\n default:\n return true;\n }\n}\nexports.isInputComponent = isInputComponent;\n/**\n * Takes a component path, and returns a component path array.\n * @param {string} pathStr - The path string to convert to an array.\n * @returns {Arryay<number>} - The array of paths.\n */\nfunction getArrayFromComponentPath(pathStr) {\n if (!pathStr || !lodash_1.default.isString(pathStr)) {\n if (!lodash_1.default.isArray(pathStr)) {\n return [pathStr];\n }\n return pathStr;\n }\n return pathStr.replace(/[[\\]]/g, '.')\n .replace(/\\.\\./g, '.')\n .replace(/(^\\.)|(\\.$)/g, '')\n .split('.')\n .map(part => lodash_1.default.defaultTo(lodash_1.default.toNumber(part), part));\n}\nexports.getArrayFromComponentPath = getArrayFromComponentPath;\n/**\n * Returns true if the component is a child of the parent.\n * @param {any} child - The child component to check.\n * @param {any} parent - The parent component to check.\n * @returns {boolean} - TRUE if the child is a child of the parent; FALSE otherwise.\n */\nfunction isChildOf(child, parent) {\n while (child && child.parent) {\n if (child.parent === parent) {\n return true;\n }\n child = child.parent;\n }\n return false;\n}\nexports.isChildOf = isChildOf;\n/**\n * Takes an array of component path indexes, and returns a string version of that array.\n * @param {Array<number>} path - The path array to convert to a string.\n * @returns {string} - The string version of the path.\n */\nfunction getStringFromComponentPath(path) {\n if (!lodash_1.default.isArray(path)) {\n return path;\n }\n let strPath = '';\n path.forEach((part, i) => {\n if (lodash_1.default.isNumber(part)) {\n strPath += `[${part}]`;\n }\n else {\n strPath += i === 0 ? part : `.${part}`;\n }\n });\n return strPath;\n}\nexports.getStringFromComponentPath = getStringFromComponentPath;\n/**\n * Takes a number and rounds it to the provided precision amount.\n * @param {number} number - The number to round.\n * @param {number} precision - The precision to round the number to.\n * @returns {string} - The rounded number.\n */\nfunction round(number, precision) {\n if (lodash_1.default.isNumber(number)) {\n return number.toFixed(precision);\n }\n return number.toString();\n}\nexports.round = round;\n/**\n * Check for Internet Explorer browser version\n * @returns {(number|null)} - The IE browser version or null if not IE\n */\nfunction getIEBrowserVersion() {\n const { ie, version } = getBrowserInfo();\n return ie ? version : null;\n}\nexports.getIEBrowserVersion = getIEBrowserVersion;\n/**\n * Get browser name and version (modified from 'jquery-browser-plugin')\n * @returns {object} -- {{browser name, version, isWebkit?}}\n * Possible browser names: chrome, safari, ie, edge, opera, mozilla, yabrowser\n */\nfunction getBrowserInfo() {\n const browser = {};\n if (typeof window === 'undefined') {\n return browser;\n }\n const ua = window.navigator.userAgent.toLowerCase();\n const match = /(edge|edg)\\/([\\w.]+)/.exec(ua) ||\n /(opr)[/]([\\w.]+)/.exec(ua) ||\n /(yabrowser)[ /]([\\w.]+)/.exec(ua) ||\n /(chrome)[ /]([\\w.]+)/.exec(ua) ||\n /(iemobile)[/]([\\w.]+)/.exec(ua) ||\n /(version)(applewebkit)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n /(webkit)[ /]([\\w.]+).*(version)[ /]([\\w.]+).*(safari)[ /]([\\w.]+)/.exec(ua) ||\n /(webkit)[ /]([\\w.]+)/.exec(ua) ||\n /(opera)(?:.*version|)[ /]([\\w.]+)/.exec(ua) ||\n /(msie) ([\\w.]+)/.exec(ua) ||\n ua.indexOf('trident') >= 0 && /(rv)(?::| )([\\w.]+)/.exec(ua) ||\n ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua) ||\n [];\n const matched = {\n browser: match[5] || match[3] || match[1] || '',\n version: match[4] || match[2] || '0'\n };\n if (matched.browser) {\n browser[matched.browser] = true;\n browser.version = parseInt(matched.version, 10);\n }\n // Chrome, Opera 15+, Safari and Yandex.Browser are webkit based browsers\n if (browser.chrome || browser.opr || browser.safari || browser.edg || browser.yabrowser) {\n browser.isWebkit = true;\n }\n // IE11 has a new token so we will assign it ie to avoid breaking changes\n if (browser.rv || browser.iemobile) {\n browser.ie = true;\n }\n // Edge has a new token since it became webkit based\n if (browser.edg) {\n browser.edge = true;\n }\n // Opera 15+ are identified as opr\n if (browser.opr) {\n browser.opera = true;\n }\n return browser;\n}\nexports.getBrowserInfo = getBrowserInfo;\n/**\n * Takes a component path, which may include array indicies (i.e. [0][1]), and returns the compoennt path without the indicies.\n * @param {string} path - The path to remove the indicies from.\n * @returns {string} - The path without the indicies.\n */\nfunction getComponentPathWithoutIndicies(path = '') {\n return path.replace(/\\[\\d+\\]/, '');\n}\nexports.getComponentPathWithoutIndicies = getComponentPathWithoutIndicies;\n/**\n * Returns a path to the component which based on its schema\n * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property\n * @returns {string} - Path to the component\n */\nfunction getComponentPath(component) {\n return component.paths.localDataPath;\n}\nexports.getComponentPath = getComponentPath;\n/**\n * Returns a parent component of the passed component instance skipping all the Layout components\n * @param {Component} componentInstance - The component to check for the parent.\n * @returns {Component|undefined} - The parent data component.\n */\nfunction getDataParentComponent(componentInstance) {\n if (!componentInstance) {\n return;\n }\n const { parent } = componentInstance;\n if (parent && (parent.isInputComponent || parent.input)) {\n return parent;\n }\n else {\n return getDataParentComponent(parent);\n }\n}\nexports.getDataParentComponent = getDataParentComponent;\n/**\n * Returns whether the value is a promise\n * @param {any} value - The value to check\n * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise\n */\nfunction isPromise(value) {\n return value\n && value.then\n && typeof value.then === 'function'\n && Object.prototype.toString.call(value) === '[object Promise]';\n}\nexports.isPromise = isPromise;\n/**\n * Returns all the focusable elements within the provided dom element.\n * @param {HTMLElement} element - The element to get the focusable elements from.\n * @returns {NodeList<HTMLElement>} - The focusable elements within the provided element.\n */\nfunction getFocusableElements(element) {\n const focusableSelector = `button:not([disabled]), input:not([disabled]), select:not([disabled]),\n textarea:not([disabled]), button:not([disabled]), [href]`;\n return element.querySelectorAll(focusableSelector);\n}\nexports.getFocusableElements = getFocusableElements;\nexports.componentValueTypes = {\n number: 'number',\n string: 'string',\n boolean: 'boolean',\n array: 'array',\n object: 'object',\n date: 'date',\n any: 'any',\n};\n/**\n * Returns the saved types for the component\n * @param {import('@formio/core').Component} fullSchema - The component schema\n * @returns {Array<string>|null} - The saved types for the component\n */\nfunction getComponentSavedTypes(fullSchema) {\n const schema = fullSchema || {};\n if (schema.persistent !== true) {\n return [];\n }\n if (schema.multiple) {\n return [exports.componentValueTypes.array];\n }\n return null;\n}\nexports.getComponentSavedTypes = getComponentSavedTypes;\n/**\n * Interpolates @formio/core errors so that they are compatible with the renderer\n * @param {Component} component - The component to interpolate the errors for\n * @param {FieldError[]} errors - The errors to interpolate\n * @param {Function} interpolateFn - The interpolation function\n * @returns {[]} - The interpolated errors\n */\nconst interpolateErrors = (component, errors, interpolateFn) => {\n return errors.map((error) => {\n error.component = component;\n const { errorKeyOrMessage, context } = error;\n const toInterpolate = component.errors && component.errors[errorKeyOrMessage] ? component.errors[errorKeyOrMessage] : errorKeyOrMessage;\n return Object.assign(Object.assign({}, error), { message: unescapeHTML(interpolateFn(toInterpolate, context)), context: Object.assign({}, context) });\n });\n};\nexports.interpolateErrors = interpolateErrors;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/utils/utils.js?");
|
6089
6089
|
|
6090
6090
|
/***/ }),
|
6091
6091
|
|