@formio/js 5.4.2 → 5.4.4-api99.0

package/dist/formio.form.js

@@ -4392,7 +4392,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncon
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = {\n    'border-default': '',\n    'formio-tab-panel-active': 'active',\n    'formio-tab-link-active': 'active',\n    'formio-tab-link-container-active': 'active',\n    'formio-form-error': 'formio-error-wrapper has-message',\n    'formio-form-alert': 'alert alert-danger',\n    'formio-label-error': '',\n    'formio-input-error': '',\n    'formio-alert-danger': 'alert alert-danger',\n    'formio-alert-success': 'alert alert-success',\n    'formio-alert-warning': 'alert alert-warning',\n    'formio-modal-cancel-button': 'btn btn-danger formio-dialog-button',\n    'formio-modal-confirm-button': 'btn btn-primary formio-dialog-button',\n    'form-group': 'formio-form-group',\n};\n\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/cssClasses.js?\n}");
+eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = {\n    'border-default': '',\n    'sr-only': 'visually-hidden',\n    'formio-tab-panel-active': 'active',\n    'formio-tab-link-active': 'active',\n    'formio-tab-link-container-active': 'active',\n    'formio-form-error': 'formio-error-wrapper has-message',\n    'formio-form-alert': 'alert alert-danger',\n    'formio-label-error': '',\n    'formio-input-error': '',\n    'formio-alert-danger': 'alert alert-danger',\n    'formio-alert-success': 'alert alert-success',\n    'formio-alert-warning': 'alert alert-warning',\n    'formio-modal-cancel-button': 'btn btn-danger formio-dialog-button',\n    'formio-modal-confirm-button': 'btn btn-primary formio-dialog-button',\n    'form-group': 'formio-form-group',\n};\n\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/cssClasses.js?\n}");
 
 /***/ }),
 
@@ -4402,7 +4402,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexp
   \**********************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<table class=\"table datagrid-table table-bordered\\n    ' +\n((__t = ( ctx.component.striped ? 'table-striped' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.hover ? 'table-hover' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.condensed ? 'table-sm' : '')) == null ? '' : __t) +\n'\\n    \" ';\n if (ctx.component.layoutFixed || ctx.readOnly) { ;\n__p += 'style=\"table-layout: fixed;\"';\n } ;\n__p += '>\\n    <colgroup>\\n      ';\n if (ctx.component.reorder) { ;\n__p += '\\n      <col>\\n      ';\n } ;\n__p += '\\n    \\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n      ';\n if (!col.hidden || ctx.builder) { ;\n__p += '\\n      <col>\\n      ';\n } ;\n__p += '\\n      ';\n }) ;\n__p += '\\n    \\n      ';\n if (ctx.hasExtraColumn && !ctx.builder) { ;\n__p += '\\n      <col class=\"extra-remove-col\">\\n      ';\n } ;\n__p += '\\n    </colgroup>\\n  ';\n if (ctx.hasHeader) { ;\n__p += '\\n  <thead>\\n    <tr>\\n      ';\n if (ctx.component.reorder) { ;\n__p += '<th></th>';\n } ;\n__p += '\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        ';\n if (!col.hidden || ctx.builder) { ;\n__p += '\\n          <th class=\"' +\n((__t = (col.validate && col.validate.required ? 'field-required' : '')) == null ? '' : __t) +\n'\">\\n            ' +\n((__t = ( col.hideLabel ? '' : ctx.t(col.label || col.title, { _userInput: true }) )) == null ? '' : __t) +\n'\\n            ';\n if (col.tooltip) { ;\n__p += ' <i ref=\"tooltip\" tabindex=\"0\" data-title=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\" class=\"' +\n((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +\n' text-muted\" data-tooltip=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\"></i>';\n } ;\n__p += '\\n          </th>\\n        ';\n } ;\n__p += '\\n      ';\n }) ;\n__p += '\\n      ';\n if (ctx.hasExtraColumn) { ;\n__p += '\\n      <th>\\n         <span class=\"visually-hidden\">' +\n((__t = ( ctx.t('addOrRemove') )) == null ? '' : __t) +\n'</span>\\n        ';\n if (!ctx.builder && ctx.hasAddButton && ctx.hasTopSubmit) { ;\n__p += '\\n        <button class=\"btn btn-primary formio-button-add-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-addRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\">\\n          <i class=\"' +\n((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother }))) == null ? '' : __t) +\n'\\n        </button>\\n        ';\n } ;\n__p += '\\n      </th>\\n      ';\n } ;\n__p += '\\n    </tr>\\n  </thead>\\n  ';\n } ;\n__p += '\\n  <tbody ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-tbody\" data-key=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\">\\n    ';\n ctx.rows.forEach(function(row, index) { ;\n__p += '\\n    ';\n if (ctx.hasGroups && ctx.groups[index]) { ;\n__p += '\\n    <tr ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-group-header\" class=\"datagrid-group-header' +\n((__t = (ctx.hasToggle ? ' clickable' : '')) == null ? '' : __t) +\n'\">\\n      <td\\n        ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-group-label\"\\n        colspan=\"' +\n((__t = (ctx.numColumns)) == null ? '' : __t) +\n'\"\\n        class=\"datagrid-group-label\">' +\n((__t = (ctx.groups[index].label)) == null ? '' : __t) +\n'</td>\\n    </tr>\\n    ';\n } ;\n__p += '\\n    <tr ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-row\">\\n      ';\n if (ctx.component.reorder) { ;\n__p += '\\n        <td>\\n          <button type=\"button\" class=\"formio-drag-button btn btn-default bi bi-list\" data-key=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\" style=\"display: block; margin: 0 auto\"></button>\\n        </td>\\n      ';\n } ;\n__p += '\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        <td ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\" ';\n if (col.key && col.overlay && col.overlay.width) { ;\n__p += ' style=\"width: ' +\n((__t = (col.overlay.width + 'px')) == null ? '' : __t) +\n'\"';\n } ;\n__p += ' >\\n          ' +\n((__t = (row[col.key])) == null ? '' : __t) +\n'\\n        </td>\\n      ';\n }) ;\n__p += '\\n      ';\n if (ctx.hasExtraColumn) { ;\n__p += '\\n        ';\n if (ctx.hasRemoveButtons) { ;\n__p += '\\n        <td>\\n          <button type=\"button\" class=\"btn btn-secondary formio-button-remove-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-removeRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\" aria-label=\"' +\n((__t = (ctx.t('remove'))) == null ? '' : __t) +\n'\" style=\"display: block; margin: 0 auto\">\\n            <i class=\"' +\n((__t = (ctx.iconClass('circle-xmark'))) == null ? '' : __t) +\n'\"></i>\\n          </button>\\n        </td>\\n        ';\n } ;\n__p += '\\n        ';\n if (ctx.canAddColumn) { ;\n__p += '\\n        <td ref=\"' +\n((__t = (ctx.key)) == null ? '' : __t) +\n'-container\">\\n          ' +\n((__t = (ctx.placeholder)) == null ? '' : __t) +\n'\\n        </td>\\n        ';\n } ;\n__p += '\\n      ';\n } ;\n__p += '\\n    </tr>\\n    ';\n }) ;\n__p += '\\n  </tbody>\\n  ';\n if (!ctx.builder && ctx.hasAddButton && ctx.hasBottomSubmit) { ;\n__p += '\\n  <tfoot>\\n    <tr>\\n      <td colspan=\"' +\n((__t = (ctx.component.layoutFixed ? ctx.numColumns :  ctx.numColumns + 1)) == null ? '' : __t) +\n'\">\\n        <button class=\"btn btn-primary formio-button-add-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-addRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\">\\n          <i class=\"' +\n((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother }))) == null ? '' : __t) +\n'\\n        </button>\\n      </td>\\n    </tr>\\n  </tfoot>\\n  ';\n } ;\n__p += '\\n</table>\\n<span class=\"visually-hidden\" ref=\"liveRegion\" aria-live=\"polite\"></span>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/datagrid/form.ejs.js?\n}");
+eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<table class=\"table datagrid-table table-bordered\\n    ' +\n((__t = ( ctx.component.striped ? 'table-striped' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.hover ? 'table-hover' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.condensed ? 'table-sm' : '')) == null ? '' : __t) +\n'\\n    \" ';\n if (ctx.component.layoutFixed || ctx.readOnly) { ;\n__p += 'style=\"table-layout: fixed;\"';\n } ;\n__p += '>\\n  <caption class=\"visually-hidden\">' +\n((__t = (ctx.t(ctx.component.label))) == null ? '' : __t) +\n'</caption>\\n    <colgroup>\\n      ';\n if (ctx.component.reorder) { ;\n__p += '\\n      <col>\\n      ';\n } ;\n__p += '\\n    \\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n      ';\n if (!col.hidden || ctx.builder) { ;\n__p += '\\n      <col>\\n      ';\n } ;\n__p += '\\n      ';\n }) ;\n__p += '\\n    \\n      ';\n if (ctx.hasExtraColumn && !ctx.builder) { ;\n__p += '\\n      <col class=\"extra-remove-col\">\\n      ';\n } ;\n__p += '\\n    </colgroup>\\n  ';\n if (ctx.hasHeader) { ;\n__p += '\\n  <thead>\\n    <tr>\\n      ';\n if (ctx.component.reorder) { ;\n__p += '<th></th>';\n } ;\n__p += '\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        ';\n if (!col.hidden || ctx.builder) { ;\n__p += '\\n          <th class=\"' +\n((__t = (col.validate && col.validate.required ? 'field-required' : '')) == null ? '' : __t) +\n'\">\\n            ' +\n((__t = ( col.hideLabel ? '' : ctx.t(col.label || col.title, { _userInput: true }) )) == null ? '' : __t) +\n'\\n            ';\n if (col.tooltip) { ;\n__p += ' <i ref=\"tooltip\" tabindex=\"0\" data-title=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\" class=\"' +\n((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +\n' text-muted\" data-tooltip=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\"></i>';\n } ;\n__p += '\\n          </th>\\n        ';\n } ;\n__p += '\\n      ';\n }) ;\n__p += '\\n      ';\n if (ctx.hasExtraColumn) { ;\n__p += '\\n      <th>\\n         <span class=\"visually-hidden\">' +\n((__t = ( ctx.t('addOrRemove') )) == null ? '' : __t) +\n'</span>\\n        ';\n if (!ctx.builder && ctx.hasAddButton && ctx.hasTopSubmit) { ;\n__p += '\\n        <button class=\"btn btn-primary formio-button-add-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-addRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\">\\n          <i class=\"' +\n((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +\n'\"></i>' +\n((__t = (ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother }))) == null ? '' : __t) +\n'\\n        </button>\\n        ';\n } ;\n__p += '\\n      </th>\\n      ';\n } ;\n__p += '\\n    </tr>\\n  </thead>\\n  ';\n } ;\n__p += '\\n  <tbody ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-tbody\" data-key=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\">\\n    ';\n ctx.rows.forEach(function(row, index) { ;\n__p += '\\n    ';\n if (ctx.hasGroups && ctx.groups[index]) { ;\n__p += '\\n    <tr ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-group-header\" class=\"datagrid-group-header' +\n((__t = (ctx.hasToggle ? ' clickable' : '')) == null ? '' : __t) +\n'\">\\n      <td\\n        ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-group-label\"\\n        colspan=\"' +\n((__t = (ctx.numColumns)) == null ? '' : __t) +\n'\"\\n        class=\"datagrid-group-label\">' +\n((__t = (ctx.groups[index].label)) == null ? '' : __t) +\n'</td>\\n    </tr>\\n    ';\n } ;\n__p += '\\n    <tr ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-row\">\\n      ';\n if (ctx.component.reorder) { ;\n__p += '\\n        <td>\\n          <button type=\"button\" class=\"formio-drag-button btn btn-default bi bi-list\" data-key=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\" style=\"display: block; margin: 0 auto\"></button>\\n        </td>\\n      ';\n } ;\n__p += '\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        <td ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\" ';\n if (col.key && col.overlay && col.overlay.width) { ;\n__p += ' style=\"width: ' +\n((__t = (col.overlay.width + 'px')) == null ? '' : __t) +\n'\"';\n } ;\n__p += ' >\\n          ' +\n((__t = (row[col.key])) == null ? '' : __t) +\n'\\n        </td>\\n      ';\n }) ;\n__p += '\\n      ';\n if (ctx.hasExtraColumn) { ;\n__p += '\\n        ';\n if (ctx.hasRemoveButtons) { ;\n__p += '\\n        <td>\\n          <button type=\"button\" class=\"btn btn-secondary formio-button-remove-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-removeRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\" aria-label=\"' +\n((__t = (ctx.t('remove'))) == null ? '' : __t) +\n'\" style=\"display: block; margin: 0 auto\">\\n            <i class=\"' +\n((__t = (ctx.iconClass('circle-xmark'))) == null ? '' : __t) +\n'\"></i>\\n          </button>\\n        </td>\\n        ';\n } ;\n__p += '\\n        ';\n if (ctx.canAddColumn) { ;\n__p += '\\n        <td ref=\"' +\n((__t = (ctx.key)) == null ? '' : __t) +\n'-container\">\\n          ' +\n((__t = (ctx.placeholder)) == null ? '' : __t) +\n'\\n        </td>\\n        ';\n } ;\n__p += '\\n      ';\n } ;\n__p += '\\n    </tr>\\n    ';\n }) ;\n__p += '\\n  </tbody>\\n  ';\n if (!ctx.builder && ctx.hasAddButton && ctx.hasBottomSubmit) { ;\n__p += '\\n  <tfoot>\\n    <tr>\\n      <td colspan=\"' +\n((__t = (ctx.component.layoutFixed ? ctx.numColumns :  ctx.numColumns + 1)) == null ? '' : __t) +\n'\">\\n        <button class=\"btn btn-primary formio-button-add-row\" ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'-addRow\" tabindex=\"' +\n((__t = (ctx.tabIndex)) == null ? '' : __t) +\n'\">\\n          <i class=\"' +\n((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +\n'\"></i> ' +\n((__t = (ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother }))) == null ? '' : __t) +\n'\\n        </button>\\n      </td>\\n    </tr>\\n  </tfoot>\\n  ';\n } ;\n__p += '\\n</table>\\n<span class=\"visually-hidden\" ref=\"liveRegion\" aria-live=\"polite\"></span>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/datagrid/form.ejs.js?\n}");
 
 /***/ }),
 
@@ -4412,7 +4412,7 @@ eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\ne
   \**********************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<table class=\"table datagrid-table table-bordered\\n    ' +\n((__t = ( ctx.component.striped ? 'table-striped' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.hover ? 'table-hover' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.condensed ? 'table-sm' : '')) == null ? '' : __t) +\n'\\n    \">\\n  ';\n if (ctx.hasHeader) { ;\n__p += '\\n  <thead>\\n    <tr>\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        <th class=\"' +\n((__t = (col.validate && col.validate.required ? 'field-required' : '')) == null ? '' : __t) +\n'\">\\n          ' +\n((__t = ( col.hideLabel ? '' : ctx.t(col.label || col.title, { _userInput: true }) )) == null ? '' : __t) +\n'\\n          ';\n if (col.tooltip) { ;\n__p += ' <i ref=\"tooltip\" tabindex=\"0\" data-title=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\" class=\"' +\n((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +\n' text-muted\" data-tooltip=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\"></i>';\n } ;\n__p += '\\n        </th>\\n      ';\n }) ;\n__p += '\\n    </tr>\\n  </thead>\\n  ';\n } ;\n__p += '\\n  <tbody>\\n    ';\n ctx.rows.forEach(function(row) { ;\n__p += '\\n    <tr>\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        <td ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\">\\n          ' +\n((__t = (row[col.key])) == null ? '' : __t) +\n'\\n        </td>\\n      ';\n }) ;\n__p += '\\n    </tr>\\n    ';\n }) ;\n__p += '\\n  </tbody>\\n</table>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/datagrid/html.ejs.js?\n}");
+eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<table class=\"table datagrid-table table-bordered\\n    ' +\n((__t = ( ctx.component.striped ? 'table-striped' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.hover ? 'table-hover' : '')) == null ? '' : __t) +\n'\\n    ' +\n((__t = ( ctx.component.condensed ? 'table-sm' : '')) == null ? '' : __t) +\n'\\n    \">\\n  <caption class=\"visually-hidden\">' +\n((__t = (ctx.t(ctx.component.label))) == null ? '' : __t) +\n'</caption>\\n  ';\n if (ctx.hasHeader) { ;\n__p += '\\n  <thead>\\n    <tr>\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        <th class=\"' +\n((__t = (col.validate && col.validate.required ? 'field-required' : '')) == null ? '' : __t) +\n'\">\\n          ' +\n((__t = ( col.hideLabel ? '' : ctx.t(col.label || col.title, { _userInput: true }) )) == null ? '' : __t) +\n'\\n          ';\n if (col.tooltip) { ;\n__p += ' <i ref=\"tooltip\" tabindex=\"0\" data-title=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\" class=\"' +\n((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +\n' text-muted\" data-tooltip=\"' +\n((__t = (col.tooltip)) == null ? '' : __t) +\n'\"></i>';\n } ;\n__p += '\\n        </th>\\n      ';\n }) ;\n__p += '\\n    </tr>\\n  </thead>\\n  ';\n } ;\n__p += '\\n  <tbody>\\n    ';\n ctx.rows.forEach(function(row) { ;\n__p += '\\n    <tr>\\n      ';\n ctx.columns.forEach(function(col) { ;\n__p += '\\n        <td ref=\"' +\n((__t = (ctx.datagridKey)) == null ? '' : __t) +\n'\">\\n          ' +\n((__t = (row[col.key])) == null ? '' : __t) +\n'\\n        </td>\\n      ';\n }) ;\n__p += '\\n    </tr>\\n    ';\n }) ;\n__p += '\\n  </tbody>\\n</table>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/datagrid/html.ejs.js?\n}");
 
 /***/ }),
 
@@ -4433,7 +4433,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncon
   \*****************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n\n var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; ;\n__p += '\\n<div class=\"row\" role=\"group\"\\n  ';\n if (ctx.label.hidden) { ;\n__p += '\\n  aria-label=\"' +\n((__t = (ctx.component.label)) == null ? '' : __t) +\n'\"\\n  ';\n } else { ;\n__p += '\\n  aria-labelledby=\"';\n if (fieldsetLegendIds) { ;\n__p +=\n((__t = (fieldsetLegendIds)) == null ? '' : __t) +\n' ';\n } ;\n__p += 'l-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.component.description) { ;\n__p += '\\n  aria-describedby=\"d-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n  ';\n } ;\n__p += '\\n  >\\n  ';\n if (ctx.dayFirst && ctx.showDay) { ;\n__p += '\\n  <div class=\"col col-xs-3\">\\n    ';\n if (!ctx.component.hideInputLabels) { ;\n__p += '\\n    <label for=\"' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'-day\" class=\"';\n if(ctx.component.fields.day.required) { ;\n__p += 'field-required';\n } ;\n__p += '\">' +\n((__t = (ctx.t('day'))) == null ? '' : __t) +\n'</label>\\n    ';\n } ;\n__p += '\\n    <div>' +\n((__t = (ctx.day)) == null ? '' : __t) +\n'</div>\\n  </div>\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.showMonth) { ;\n__p += '\\n  <div class=\"col col-xs-4\">\\n    ';\n if (!ctx.component.hideInputLabels) { ;\n__p += '\\n    <label for=\"' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'-month\" class=\"';\n if(ctx.component.fields.month.required) { ;\n__p += 'field-required';\n } ;\n__p += '\">' +\n((__t = (ctx.t('month'))) == null ? '' : __t) +\n'</label>\\n    ';\n } ;\n__p += '\\n    <div>' +\n((__t = (ctx.month)) == null ? '' : __t) +\n'</div>\\n  </div>\\n  ';\n } ;\n__p += '\\n  ';\n if (!ctx.dayFirst && ctx.showDay) { ;\n__p += '\\n  <div class=\"col col-xs-3\">\\n    ';\n if (!ctx.component.hideInputLabels) { ;\n__p += '\\n    <label for=\"' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'-day\" class=\"';\n if(ctx.component.fields.day.required) { ;\n__p += 'field-required';\n } ;\n__p += '\">' +\n((__t = (ctx.t('day'))) == null ? '' : __t) +\n'</label>\\n    ';\n } ;\n__p += '\\n    <div>' +\n((__t = (ctx.day)) == null ? '' : __t) +\n'</div>\\n  </div>\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.showYear) { ;\n__p += '\\n  <div class=\"col col-xs-5\">\\n    ';\n if (!ctx.component.hideInputLabels) { ;\n__p += '\\n    <label for=\"' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'-year\" class=\"';\n if(ctx.component.fields.year.required) { ;\n__p += 'field-required';\n } ;\n__p += '\">' +\n((__t = (ctx.t('year'))) == null ? '' : __t) +\n'</label>\\n    ';\n } ;\n__p += '\\n    <div>' +\n((__t = (ctx.year)) == null ? '' : __t) +\n'</div>\\n  </div>\\n  ';\n } ;\n__p += '\\n</div>\\n<input name=\"ctx.data[day]\" type=\"hidden\" class=\"form-control\" lang=\"en\" value=\"\" ref=\"input\">\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/day/form.ejs.js?\n}");
+eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n\n var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; ;\n__p += '\\n<div class=\"row\" role=\"group\" ref=\"dayContainer\"\\n  ';\n if (ctx.label.hidden) { ;\n__p += '\\n  aria-label=\"' +\n((__t = (ctx.component.label)) == null ? '' : __t) +\n'\"\\n  ';\n } else { ;\n__p += '\\n  aria-labelledby=\"';\n if (fieldsetLegendIds) { ;\n__p +=\n((__t = (fieldsetLegendIds)) == null ? '' : __t) +\n' ';\n } ;\n__p += 'l-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.component.description) { ;\n__p += '\\n  aria-describedby=\"d-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n  ';\n } ;\n__p += '\\n  >\\n  ';\n if (ctx.dayFirst && ctx.showDay) { ;\n__p += '\\n  <div class=\"col col-xs-3\">\\n    ';\n if (!ctx.component.hideInputLabels) { ;\n__p += '\\n    <label for=\"' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'-day\" class=\"';\n if(ctx.component.fields.day.required) { ;\n__p += 'field-required';\n } ;\n__p += '\">' +\n((__t = (ctx.t('day'))) == null ? '' : __t) +\n'</label>\\n    ';\n } ;\n__p += '\\n    <div>' +\n((__t = (ctx.day)) == null ? '' : __t) +\n'</div>\\n  </div>\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.showMonth) { ;\n__p += '\\n  <div class=\"col col-xs-4\">\\n    ';\n if (!ctx.component.hideInputLabels) { ;\n__p += '\\n    <label for=\"' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'-month\" class=\"';\n if(ctx.component.fields.month.required) { ;\n__p += 'field-required';\n } ;\n__p += '\">' +\n((__t = (ctx.t('month'))) == null ? '' : __t) +\n'</label>\\n    ';\n } ;\n__p += '\\n    <div>' +\n((__t = (ctx.month)) == null ? '' : __t) +\n'</div>\\n  </div>\\n  ';\n } ;\n__p += '\\n  ';\n if (!ctx.dayFirst && ctx.showDay) { ;\n__p += '\\n  <div class=\"col col-xs-3\">\\n    ';\n if (!ctx.component.hideInputLabels) { ;\n__p += '\\n    <label for=\"' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'-day\" class=\"';\n if(ctx.component.fields.day.required) { ;\n__p += 'field-required';\n } ;\n__p += '\">' +\n((__t = (ctx.t('day'))) == null ? '' : __t) +\n'</label>\\n    ';\n } ;\n__p += '\\n    <div>' +\n((__t = (ctx.day)) == null ? '' : __t) +\n'</div>\\n  </div>\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.showYear) { ;\n__p += '\\n  <div class=\"col col-xs-5\">\\n    ';\n if (!ctx.component.hideInputLabels) { ;\n__p += '\\n    <label for=\"' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'-year\" class=\"';\n if(ctx.component.fields.year.required) { ;\n__p += 'field-required';\n } ;\n__p += '\">' +\n((__t = (ctx.t('year'))) == null ? '' : __t) +\n'</label>\\n    ';\n } ;\n__p += '\\n    <div>' +\n((__t = (ctx.year)) == null ? '' : __t) +\n'</div>\\n  </div>\\n  ';\n } ;\n__p += '\\n</div>\\n<input name=\"ctx.data[day]\" type=\"hidden\" class=\"form-control\" lang=\"en\" value=\"\" ref=\"input\">\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/day/form.ejs.js?\n}");
 
 /***/ }),
 
@@ -4506,7 +4506,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncon
   \***************************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<div class=\"editgrid-table-container\">\\n  <div class=\"table-responsive\">\\n    <table class=\"table\\n      ' +\n((__t = ( ctx.component.striped ? 'table-striped' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.bordered ? 'table-bordered' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.hover ? 'table-hover' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.condensed ? 'table-sm' : '')) == null ? '' : __t) +\n'\\n    \">\\n      ';\n if (ctx.header) { ;\n__p += '\\n      <thead class=\"editgrid-table-head\">\\n        ' +\n((__t = (ctx.header)) == null ? '' : __t) +\n'\\n      </thead>\\n      ';\n } ;\n__p += '\\n      <tbody class=\"editgrid-table-body\">\\n        ';\n ctx.rows.forEach(function(row, rowIndex) { ;\n__p += '\\n        <tr ref=\"' +\n((__t = (ctx.ref.row)) == null ? '' : __t) +\n'\">\\n          ' +\n((__t = (row)) == null ? '' : __t) +\n'\\n          ';\n if (ctx.openRows[rowIndex] && !ctx.readOnly) { ;\n__p += '\\n            <td class=\"editgrid-table-column\">\\n              <div class=\"editgrid-actions\">\\n                <button class=\"btn btn-primary\" ref=\"' +\n((__t = (ctx.ref.saveRow)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow }))) == null ? '' : __t) +\n'</button>\\n                ';\n if (ctx.component.removeRow) { ;\n__p += '\\n                <button class=\"btn btn-danger\" ref=\"' +\n((__t = (ctx.ref.cancelRow)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow }))) == null ? '' : __t) +\n'</button>\\n                ';\n } ;\n__p += '\\n              </div>\\n            </td>\\n          ';\n } ;\n__p += '\\n          ';\n if (ctx.errors[rowIndex]) { ;\n__p += '\\n          <td class=\"editgrid-table-column\">\\n            <div class=\"has-error\">\\n              <div class=\"editgrid-row-error help-block\">\\n                ' +\n((__t = (ctx.errors[rowIndex])) == null ? '' : __t) +\n'\\n              </div>\\n            </div>\\n          </td>\\n          ';\n } ;\n__p += '\\n        </tr>\\n        ';\n }) ;\n__p += '\\n      </tbody>\\n      ';\n if (ctx.footer) { ;\n__p += '\\n      <tfoot>\\n        <tr>\\n          ' +\n((__t = (ctx.footer)) == null ? '' : __t) +\n'\\n        </tr>\\n      <tfoot>\\n      ';\n } ;\n__p += '\\n    </table>\\n  </div>\\n</div>\\n';\n if (!ctx.readOnly && ctx.hasAddButton) { ;\n__p += '\\n<button class=\"btn btn-primary\" ref=\"' +\n((__t = (ctx.ref.addRow)) == null ? '' : __t) +\n'\">\\n  <i class=\"' +\n((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +\n'\"></i>\\n  ' +\n((__t = (ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother }))) == null ? '' : __t) +\n'\\n</button>\\n';\n } ;\n__p += '\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/editgridTable/form.ejs.js?\n}");
+eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<div class=\"editgrid-table-container\">\\n  <div class=\"table-responsive\">\\n    <table class=\"table\\n      ' +\n((__t = ( ctx.component.striped ? 'table-striped' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.bordered ? 'table-bordered' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.hover ? 'table-hover' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.condensed ? 'table-sm' : '')) == null ? '' : __t) +\n'\\n    \">\\n      <caption class=\"visually-hidden\">' +\n((__t = (ctx.t(ctx.component.label))) == null ? '' : __t) +\n'</caption>\\n      ';\n if (ctx.header) { ;\n__p += '\\n      <thead class=\"editgrid-table-head\">\\n        ' +\n((__t = (ctx.header)) == null ? '' : __t) +\n'\\n      </thead>\\n      ';\n } ;\n__p += '\\n      <tbody class=\"editgrid-table-body\">\\n        ';\n ctx.rows.forEach(function(row, rowIndex) { ;\n__p += '\\n        <tr ref=\"' +\n((__t = (ctx.ref.row)) == null ? '' : __t) +\n'\">\\n          ' +\n((__t = (row)) == null ? '' : __t) +\n'\\n          ';\n if (ctx.openRows[rowIndex] && !ctx.readOnly) { ;\n__p += '\\n            <td class=\"editgrid-table-column\">\\n              <div class=\"editgrid-actions\">\\n                <button class=\"btn btn-primary\" ref=\"' +\n((__t = (ctx.ref.saveRow)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow }))) == null ? '' : __t) +\n'</button>\\n                ';\n if (ctx.component.removeRow) { ;\n__p += '\\n                <button class=\"btn btn-danger\" ref=\"' +\n((__t = (ctx.ref.cancelRow)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow }))) == null ? '' : __t) +\n'</button>\\n                ';\n } ;\n__p += '\\n              </div>\\n            </td>\\n          ';\n } ;\n__p += '\\n          ';\n if (ctx.errors[rowIndex]) { ;\n__p += '\\n          <td class=\"editgrid-table-column\">\\n            <div class=\"has-error\">\\n              <div class=\"editgrid-row-error help-block\">\\n                ' +\n((__t = (ctx.errors[rowIndex])) == null ? '' : __t) +\n'\\n              </div>\\n            </div>\\n          </td>\\n          ';\n } ;\n__p += '\\n        </tr>\\n        ';\n }) ;\n__p += '\\n      </tbody>\\n      ';\n if (ctx.footer) { ;\n__p += '\\n      <tfoot>\\n        <tr>\\n          ' +\n((__t = (ctx.footer)) == null ? '' : __t) +\n'\\n        </tr>\\n      <tfoot>\\n      ';\n } ;\n__p += '\\n    </table>\\n  </div>\\n</div>\\n';\n if (!ctx.readOnly && ctx.hasAddButton) { ;\n__p += '\\n<button class=\"btn btn-primary\" ref=\"' +\n((__t = (ctx.ref.addRow)) == null ? '' : __t) +\n'\">\\n  <i class=\"' +\n((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +\n'\"></i>\\n  ' +\n((__t = (ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother }))) == null ? '' : __t) +\n'\\n</button>\\n';\n } ;\n__p += '\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/editgridTable/form.ejs.js?\n}");
 
 /***/ }),
 
@@ -4516,7 +4516,7 @@ eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\ne
   \***************************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<div class=\"editgrid-table-container\">\\n  <div class=\"table-responsive\">\\n    <table class=\"table\\n      ' +\n((__t = ( ctx.component.striped ? 'table-striped' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.bordered ? 'table-bordered' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.hover ? 'table-hover' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.condensed ? 'table-sm' : '')) == null ? '' : __t) +\n'\\n    \">\\n      ';\n if (ctx.header) { ;\n__p += '\\n      <thead class=\"editgrid-table-head\">\\n        ' +\n((__t = (ctx.header)) == null ? '' : __t) +\n'\\n      </thead>\\n      ';\n } ;\n__p += '\\n      <tbody class=\"editgrid-table-body\">\\n        ';\n ctx.rows.forEach(function(row, rowIndex) { ;\n__p += '\\n        <tr ref=\"' +\n((__t = (ctx.ref.row)) == null ? '' : __t) +\n'\">\\n          ' +\n((__t = (row)) == null ? '' : __t) +\n'\\n          ';\n if (ctx.openRows[rowIndex] && !ctx.readOnly) { ;\n__p += '\\n          <td class=\"editgrid-table-column\">\\n            <div class=\"editgrid-actions\">\\n              <button class=\"btn btn-primary\" ref=\"' +\n((__t = (ctx.ref.saveRow)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow }))) == null ? '' : __t) +\n'</button>\\n              ';\n if (ctx.component.removeRow) { ;\n__p += '\\n              <button class=\"btn btn-danger\" ref=\"' +\n((__t = (ctx.ref.cancelRow)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow }))) == null ? '' : __t) +\n'</button>\\n              ';\n } ;\n__p += '\\n            </div>\\n          </td>\\n          ';\n } ;\n__p += '\\n          ';\n if (ctx.errors[rowIndex]) { ;\n__p += '\\n          <td class=\"editgrid-table-column\">\\n            <div class=\"has-error\">\\n              <div class=\"editgrid-row-error help-block\">\\n                ' +\n((__t = (ctx.errors[rowIndex])) == null ? '' : __t) +\n'\\n              </div>\\n            </div>\\n          </td>\\n          ';\n } ;\n__p += '\\n        </tr>\\n        ';\n }) ;\n__p += '\\n      </tbody>\\n      ';\n if (ctx.footer) { ;\n__p += '\\n      <tfoot>\\n        <tr>\\n          ' +\n((__t = (ctx.footer)) == null ? '' : __t) +\n'\\n         </tr>\\n      <tfoot>\\n      ';\n } ;\n__p += '\\n    </table>\\n  </div>\\n</div>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/editgridTable/html.ejs.js?\n}");
+eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<div class=\"editgrid-table-container\">\\n  <div class=\"table-responsive\">\\n    <table class=\"table\\n      ' +\n((__t = ( ctx.component.striped ? 'table-striped' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.bordered ? 'table-bordered' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.hover ? 'table-hover' : '')) == null ? '' : __t) +\n'\\n      ' +\n((__t = ( ctx.component.condensed ? 'table-sm' : '')) == null ? '' : __t) +\n'\\n    \">\\n      <caption class=\"visually-hidden\">' +\n((__t = (ctx.t(ctx.component.label))) == null ? '' : __t) +\n'</caption>\\n      ';\n if (ctx.header) { ;\n__p += '\\n      <thead class=\"editgrid-table-head\">\\n        ' +\n((__t = (ctx.header)) == null ? '' : __t) +\n'\\n      </thead>\\n      ';\n } ;\n__p += '\\n      <tbody class=\"editgrid-table-body\">\\n        ';\n ctx.rows.forEach(function(row, rowIndex) { ;\n__p += '\\n        <tr ref=\"' +\n((__t = (ctx.ref.row)) == null ? '' : __t) +\n'\">\\n          ' +\n((__t = (row)) == null ? '' : __t) +\n'\\n          ';\n if (ctx.openRows[rowIndex] && !ctx.readOnly) { ;\n__p += '\\n          <td class=\"editgrid-table-column\">\\n            <div class=\"editgrid-actions\">\\n              <button class=\"btn btn-primary\" ref=\"' +\n((__t = (ctx.ref.saveRow)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow }))) == null ? '' : __t) +\n'</button>\\n              ';\n if (ctx.component.removeRow) { ;\n__p += '\\n              <button class=\"btn btn-danger\" ref=\"' +\n((__t = (ctx.ref.cancelRow)) == null ? '' : __t) +\n'\">' +\n((__t = (ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow }))) == null ? '' : __t) +\n'</button>\\n              ';\n } ;\n__p += '\\n            </div>\\n          </td>\\n          ';\n } ;\n__p += '\\n          ';\n if (ctx.errors[rowIndex]) { ;\n__p += '\\n          <td class=\"editgrid-table-column\">\\n            <div class=\"has-error\">\\n              <div class=\"editgrid-row-error help-block\">\\n                ' +\n((__t = (ctx.errors[rowIndex])) == null ? '' : __t) +\n'\\n              </div>\\n            </div>\\n          </td>\\n          ';\n } ;\n__p += '\\n        </tr>\\n        ';\n }) ;\n__p += '\\n      </tbody>\\n      ';\n if (ctx.footer) { ;\n__p += '\\n      <tfoot>\\n        <tr>\\n          ' +\n((__t = (ctx.footer)) == null ? '' : __t) +\n'\\n         </tr>\\n      <tfoot>\\n      ';\n } ;\n__p += '\\n    </table>\\n  </div>\\n</div>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/editgridTable/html.ejs.js?\n}");
 
 /***/ }),
 
@@ -4537,7 +4537,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncon
   \************************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<p>' +\n((__t = (ctx.t('error'))) == null ? '' : __t) +\n'\\n  ';\n if (ctx.options.vpat) { ;\n__p += '\\n  <span ref=\"errorTooltip\" class=\"' +\n((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +\n'\" tabindex=\"0\"></span>\\n  ';\n } ;\n__p += '\\n</p>\\n<ul>\\n  ';\n ctx.errors.forEach(function(err) { ;\n__p += '\\n  <li>\\n    <span\\n      data-component-key = \"' +\n((__t = (err.keyOrPath)) == null ? '' : __t) +\n'\"\\n      ref = \"errorRef\"\\n      tabIndex = \"0\"\\n      role=\"link\"\\n    >\\n      ' +\n((__t = (err.message)) == null ? '' : __t) +\n'\\n    </span>\\n  </li>\\n  ';\n }) ;\n__p += '\\n</ul>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/errorsList/form.ejs.js?\n}");
+eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<p>' +\n((__t = (ctx.t('error'))) == null ? '' : __t) +\n'\\n  ';\n if (ctx.options.vpat) { ;\n__p += '\\n  <span ref=\"errorTooltip\" class=\"' +\n((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +\n'\" tabindex=\"0\"></span>\\n  ';\n } ;\n__p += '\\n</p>\\n<ul>\\n  ';\n ctx.errors.forEach(function(err) { ;\n__p += '\\n  <li>\\n    <span data-component-key=\"' +\n((__t = (err.keyOrPath)) == null ? '' : __t) +\n'\" ref=\"errorRef\" tabIndex=\"0\" role=\"link\">\\n      ' +\n((__t = (err.message)) == null ? '' : __t) +\n'\\n      ';\n if (err.errorPageTitle) { ;\n__p += '\\n      <span class=\"visually-hidden\">. Click to navigate to the component within ' +\n((__t = ( err.errorPageTitle )) == null ? '' : __t) +\n' </span>\\n      ';\n } ;\n__p += '\\n    </span>\\n  </li>\\n  ';\n }) ;\n__p += '\\n</ul>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/errorsList/form.ejs.js?\n}");
 
 /***/ }),
 
@@ -4568,7 +4568,7 @@ eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\ne
   \*******************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n\n if (!ctx.label.hidden && ctx.label.labelPosition !== 'bottom') { ;\n__p += '\\n  ' +\n((__t = ( ctx.labelMarkup )) == null ? '' : __t) +\n'\\n';\n } ;\n__p += '\\n\\n';\n if (ctx.label.hidden && ctx.label.className && ctx.component.validate.required) { ;\n__p += '\\n  <label class=\"' +\n((__t = (ctx.label.className)) == null ? '' : __t) +\n'\"></label>\\n';\n } ;\n__p += '\\n\\n' +\n((__t = (ctx.element)) == null ? '' : __t) +\n'\\n\\n';\n if (!ctx.label.hidden && ctx.label.labelPosition === 'bottom') { ;\n__p += '\\n  ' +\n((__t = ( ctx.labelMarkup )) == null ? '' : __t) +\n'\\n';\n } ;\n__p += '\\n';\n if (ctx.component.description) { ;\n__p += '\\n  <div id=\"d-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\" class=\"form-text text-muted\">' +\n((__t = (ctx.t(ctx.component.description, { _userInput: true }))) == null ? '' : __t) +\n'</div>\\n';\n } ;\n__p += '\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/field/form.ejs.js?\n}");
+eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n\n if (!ctx.label.hidden && ctx.label.labelPosition !== 'bottom') { ;\n__p += '\\n  ' +\n((__t = ( ctx.labelMarkup )) == null ? '' : __t) +\n'\\n';\n } ;\n__p += '\\n\\n';\n if (ctx.label.hidden && !ctx.options.floatingLabels && ctx.component.label && ctx.component.type !== 'checkbox' && ctx.component.type !== 'button') { ;\n__p += '\\n  ' +\n((__t = ( ctx.labelMarkup )) == null ? '' : __t) +\n'\\n';\n } ;\n__p += '\\n\\n' +\n((__t = (ctx.element)) == null ? '' : __t) +\n'\\n\\n';\n if (!ctx.label.hidden && ctx.label.labelPosition === 'bottom') { ;\n__p += '\\n  ' +\n((__t = ( ctx.labelMarkup )) == null ? '' : __t) +\n'\\n';\n } ;\n__p += '\\n';\n if (ctx.component.description) { ;\n__p += '\\n  <div id=\"d-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\" class=\"form-text text-muted\">' +\n((__t = (ctx.t(ctx.component.description, { _userInput: true }))) == null ? '' : __t) +\n'</div>\\n';\n } ;\n__p += '\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/field/form.ejs.js?\n}");
 
 /***/ }),
 
@@ -4695,7 +4695,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncon
   \*******************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n\n if (ctx.prefix || ctx.suffix) { ;\n__p += '\\n<div class=\"input-group\">\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.prefix) { ;\n__p += '\\n    <div class=\"input-group-text\" ref=\"prefix\">\\n      ';\n if(ctx.prefix instanceof HTMLElement){ ;\n__p += '\\n        ' +\n((__t = ( ctx.t(ctx.prefix.outerHTML, { _userInput: true }) )) == null ? '' : __t) +\n'\\n      ';\n } else{ ;\n__p += '\\n        ' +\n((__t = ( ctx.t(ctx.prefix, { _userInput: true }) )) == null ? '' : __t) +\n'\\n      ';\n } ;\n__p += '\\n    </div>\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.options.floatingLabels) { ;\n__p += '\\n  <div class=\"form-floating\">\\n  ';\n } ;\n__p += '\\n  ';\n if (!ctx.component.editor && !ctx.component.wysiwyg) { ;\n__p += '\\n    ';\n var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; ;\n__p += '\\n    <' +\n((__t = (ctx.input.type)) == null ? '' : __t) +\n'\\n      ref=\"' +\n((__t = (ctx.input.ref ? ctx.input.ref : 'input')) == null ? '' : __t) +\n'\"\\n      ';\n for (var attr in ctx.input.attr) { ;\n__p += '\\n        ' +\n((__t = (attr)) == null ? '' : __t) +\n'=\"' +\n((__t = (ctx.input.attr[attr])) == null ? '' : __t) +\n'\"\\n      ';\n } ;\n__p += '\\n      id=\"' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n      aria-labelledby=\"';\n if (fieldsetLegendIds) { ;\n__p +=\n((__t = (fieldsetLegendIds)) == null ? '' : __t) +\n' ';\n } ;\n__p += 'l-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n' ';\n if (ctx.component.description) { ;\n__p += 'd-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t);\n } ;\n__p += '\"\\n      ';\n if (ctx.component.description || ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { ;\n__p += '\\n      aria-describedby=\"';\n if (ctx.component.description) { ;\n__p += 'd-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t);\n } ;\n\n if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { ;\n__p += ' h-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t);\n } ;\n__p += '\"\\n      ';\n } ;\n__p += '\\n      aria-required=\"' +\n((__t = (ctx.input.ref === 'input' || !ctx.input.ref ? ctx.component.validate.required :\n        ctx.component.fields && ctx.component.fields[ctx.input.ref] && ctx.component.fields[ctx.input.ref].required || false)) == null ? '' : __t) +\n'\"\\n    >' +\n((__t = (ctx.input.content)) == null ? '' : __t) +\n'</' +\n((__t = (ctx.input.type)) == null ? '' : __t) +\n'>\\n    ';\n if (ctx.options.floatingLabels) { ;\n__p += '\\n    <label ref=\"label\" class=\"col-form-label ' +\n((__t = (ctx.label.className)) == null ? '' : __t) +\n'\"\\n      for=\"' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n      id=\"l-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n    >' +\n((__t = ( ctx.t(ctx.component.label, { _userInput: true }) )) == null ? '' : __t) +\n'</label>\\n    ';\n } ;\n__p += '\\n    ';\n if (ctx.hasValueMaskInput) { ;\n__p += '\\n      <input ref=\"valueMaskInput\" />\\n    ';\n } ;\n__p += '\\n';\n } ;\n__p += '\\n';\n if (ctx.component.editor || ctx.component.wysiwyg) { ;\n__p += '\\n  <div ref=\"input\"></div>\\n';\n } ;\n__p += '\\n';\n if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { ;\n__p += '\\n<span id=\"h-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\" class=\"visually-hidden\">' +\n((__t = (ctx.t('numeric only'))) == null ? '' : __t) +\n'</span>\\n';\n } ;\n__p += '\\n';\n if (ctx.component.type === 'datetime') { ;\n__p += '\\n<span aria-live=\"assertive\" id=\"' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-liveRegion\" class=\"visually-hidden\" ref=\"liveRegion\"></span>\\n';\n } ;\n__p += '\\n';\n if (ctx.suffix) { ;\n__p += '\\n  <div class=\"input-group-text\"\\n    ref=\"suffix\"\\n    ';\n if (ctx.readOnly) { ;\n__p += '\\n    role=\"presentation\"\\n    ';\n } ;\n__p += '\\n    >\\n    ';\n if(ctx.suffix instanceof HTMLElement){ ;\n__p += '\\n      ' +\n((__t = ( ctx.t(ctx.suffix.outerHTML, { _userInput: true }) )) == null ? '' : __t) +\n'\\n    ';\n } else{ ;\n__p += '\\n      ' +\n((__t = ( ctx.t(ctx.suffix, { _userInput: true }) )) == null ? '' : __t) +\n'\\n    ';\n } ;\n__p += '\\n  </div>\\n';\n } ;\n__p += '\\n';\n if (ctx.prefix || ctx.suffix || ctx.options.floatingLabels) { ;\n__p += '\\n  </div>\\n';\n } ;\n__p += '\\n';\n /* GOTCHA(G-BS01) */ ;\n__p += '\\n<span class=\"visually-hidden\" ref=\"announceMessage\" aria-live=\"polite\" aria-atomic=\"true\"></span>\\n';\n if (ctx.component.showCharCount || ctx.component.showWordCount) { ;\n__p += '\\n<div class=\"form-text ' +\n((__t = (ctx.component.description ? 'float-end' : 'text-end')) == null ? '' : __t) +\n'\">\\n  ';\n if (ctx.component.showCharCount) { ;\n__p += '\\n  <span class=\"text-muted\" ref=\"charcount\" aria-hidden=\"true\"></span>\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.component.showWordCount) { ;\n__p += '\\n  <span class=\"text-muted\" ref=\"wordcount\" aria-hidden=\"true\"></span>\\n  ';\n } ;\n__p += '\\n</div>\\n';\n } ;\n__p += '\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/input/form.ejs.js?\n}");
+eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n\n if (ctx.prefix || ctx.suffix) { ;\n__p += '\\n<div class=\"input-group\">\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.prefix) { ;\n__p += '\\n    <div class=\"input-group-text\" ref=\"prefix\">\\n      ';\n if(ctx.prefix instanceof HTMLElement){ ;\n__p += '\\n        ' +\n((__t = ( ctx.t(ctx.prefix.outerHTML, { _userInput: true }) )) == null ? '' : __t) +\n'\\n      ';\n } else{ ;\n__p += '\\n        ' +\n((__t = ( ctx.t(ctx.prefix, { _userInput: true }) )) == null ? '' : __t) +\n'\\n      ';\n } ;\n__p += '\\n    </div>\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.options.floatingLabels) { ;\n__p += '\\n  <div class=\"form-floating\">\\n  ';\n } ;\n__p += '\\n  ';\n if (!ctx.component.editor && !ctx.component.wysiwyg) { ;\n__p += '\\n    ';\n var fieldsetLegendIds = ctx.instance.getFieldsetLegendIds ? ctx.instance.getFieldsetLegendIds() : ''; ;\n__p += '\\n    <' +\n((__t = (ctx.input.type)) == null ? '' : __t) +\n'\\n      ref=\"' +\n((__t = (ctx.input.ref ? ctx.input.ref : 'input')) == null ? '' : __t) +\n'\"\\n      ';\n for (var attr in ctx.input.attr) { ;\n__p += '\\n        ' +\n((__t = (attr)) == null ? '' : __t) +\n'=\"' +\n((__t = (ctx.input.attr[attr])) == null ? '' : __t) +\n'\"\\n      ';\n } ;\n__p += '\\n      id=\"' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n      aria-labelledby=\"';\n if (fieldsetLegendIds) { ;\n__p +=\n((__t = (fieldsetLegendIds)) == null ? '' : __t) +\n' ';\n } ;\n__p += 'l-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n' ';\n if (ctx.component.description) { ;\n__p += 'd-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t);\n } ;\n__p += '\"\\n      ';\n if (ctx.component.description) { ;\n__p += '\\n      aria-describedby=\"d-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n      ';\n } ;\n__p += '\\n      aria-required=\"' +\n((__t = (ctx.input.ref === 'input' || !ctx.input.ref ? ctx.component.validate.required :\n        ctx.component.fields && ctx.component.fields[ctx.input.ref] && ctx.component.fields[ctx.input.ref].required || false)) == null ? '' : __t) +\n'\"\\n    >' +\n((__t = (ctx.input.content)) == null ? '' : __t) +\n'</' +\n((__t = (ctx.input.type)) == null ? '' : __t) +\n'>\\n    ';\n if (ctx.options.floatingLabels) { ;\n__p += '\\n    <label ref=\"label\" class=\"col-form-label ' +\n((__t = (ctx.label.className)) == null ? '' : __t) +\n'\"\\n      for=\"' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n      id=\"l-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n    >' +\n((__t = ( ctx.t(ctx.component.label, { _userInput: true }) )) == null ? '' : __t) +\n'</label>\\n    ';\n } ;\n__p += '\\n    ';\n if (ctx.hasValueMaskInput) { ;\n__p += '\\n      <input ref=\"valueMaskInput\" />\\n    ';\n } ;\n__p += '\\n';\n } ;\n__p += '\\n';\n if (ctx.component.editor || ctx.component.wysiwyg) { ;\n__p += '\\n  <div ref=\"input\"></div>\\n';\n } ;\n__p += '\\n';\n if (ctx.component.type === 'datetime') { ;\n__p += '\\n<span aria-live=\"assertive\" id=\"' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-liveRegion\" class=\"visually-hidden\" ref=\"liveRegion\"></span>\\n';\n } ;\n__p += '\\n';\n if (ctx.suffix) { ;\n__p += '\\n  <div class=\"input-group-text\"\\n    ref=\"suffix\"\\n    ';\n if (ctx.readOnly) { ;\n__p += '\\n    role=\"presentation\"\\n    ';\n } ;\n__p += '\\n    >\\n    ';\n if(ctx.suffix instanceof HTMLElement){ ;\n__p += '\\n      ' +\n((__t = ( ctx.t(ctx.suffix.outerHTML, { _userInput: true }) )) == null ? '' : __t) +\n'\\n    ';\n } else{ ;\n__p += '\\n      ' +\n((__t = ( ctx.t(ctx.suffix, { _userInput: true }) )) == null ? '' : __t) +\n'\\n    ';\n } ;\n__p += '\\n  </div>\\n';\n } ;\n__p += '\\n';\n if (ctx.prefix || ctx.suffix || ctx.options.floatingLabels) { ;\n__p += '\\n  </div>\\n';\n } ;\n__p += '\\n';\n /* GOTCHA(G-BS01) */ ;\n__p += '\\n<span class=\"visually-hidden\" ref=\"announceMessage\" aria-live=\"polite\" aria-atomic=\"true\"></span>\\n';\n if (ctx.component.showCharCount || ctx.component.showWordCount) { ;\n__p += '\\n<div class=\"form-text ' +\n((__t = (ctx.component.description ? 'float-end' : 'text-end')) == null ? '' : __t) +\n'\">\\n  ';\n if (ctx.component.showCharCount) { ;\n__p += '\\n  <span class=\"text-muted\" ref=\"charcount\" aria-hidden=\"true\"></span>\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.component.showWordCount) { ;\n__p += '\\n  <span class=\"text-muted\" ref=\"wordcount\" aria-hidden=\"true\"></span>\\n  ';\n } ;\n__p += '\\n</div>\\n';\n } ;\n__p += '\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/input/form.ejs.js?\n}");
 
 /***/ }),
 
@@ -4726,7 +4726,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncon
   \*******************************************************************/
 /***/ (function(__unused_webpack_module, exports) {
 
-eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<label\\n  ref=\"label\"\\n  class=\"col-form-label ' +\n((__t = (ctx.label.className)) == null ? '' : __t) +\n'\"\\n  ';\n if (!ctx.readOnly && ctx.component.type !== 'radio') { ;\n__p += '\\n  for=\"' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n  ';\n } ;\n__p += '\\n  id=\"l-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n>\\n  ' +\n((__t = ( ctx.t(ctx.component.label, { _userInput: true }) )) == null ? '' : __t) +\n'\\n  ';\n if (ctx.component.validate && ctx.component.validate.required) { ;\n__p += '\\n    <span class=\"required-star\" aria-hidden=\"true\">*</span>\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.component.tooltip) { ;\n__p += '\\n    <i ref=\"tooltip\" tabindex=\"0\" class=\"' +\n((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +\n' text-muted\" data-tooltip=\"' +\n((__t = (ctx.component.tooltip)) == null ? '' : __t) +\n'\"></i>\\n  ';\n } ;\n__p += '\\n</label>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/label/form.ejs.js?\n}");
+eval("{Object.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports[\"default\"]=function(ctx) {\nvar __t, __p = '', __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n__p += '<label\\n  ref=\"label\"\\n  class=\"col-form-label ' +\n((__t = (ctx.label.className)) == null ? '' : __t) +\n' ' +\n((__t = (ctx.label.hidden ? 'visually-hidden' : '')) == null ? '' : __t) +\n'\"\\n  ';\n if (!ctx.readOnly && ctx.component.type !== 'radio' && ctx.component.type !== 'selectboxes') { ;\n__p += '\\n  for=\"' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.component.type === 'radio' || ctx.component.type === 'selectboxes' || ctx.label.hidden) { ;\n__p += '\\n  aria-hidden=\"true\"\\n  ';\n } ;\n__p += '\\n  id=\"l-' +\n((__t = (ctx.instance.id)) == null ? '' : __t) +\n'-' +\n((__t = (ctx.component.key)) == null ? '' : __t) +\n'\"\\n>\\n  ' +\n((__t = ( ctx.t(ctx.component.label, { _userInput: true }) )) == null ? '' : __t) +\n'\\n  ';\n if (ctx.component.validate && ctx.component.validate.required) { ;\n__p += '\\n    <span class=\"required-star\" aria-hidden=\"true\">*</span>\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { ;\n__p += '\\n    <span class=\"visually-hidden\">, ' +\n((__t = (ctx.t('numeric only'))) == null ? '' : __t) +\n',</span>\\n  ';\n } ;\n__p += '\\n  ';\n if (ctx.component.tooltip && !ctx.label.hidden) { ;\n__p += '\\n    <i ref=\"tooltip\" tabindex=\"0\" class=\"' +\n((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +\n' text-muted\" data-tooltip=\"' +\n((__t = (ctx.component.tooltip)) == null ? '' : __t) +\n'\"></i>\\n  ';\n } ;\n__p += '\\n</label>\\n';\nreturn __p\n}\n\n//# sourceURL=webpack://Formio/../bootstrap/lib/cjs/templates/bootstrap5/label/form.ejs.js?\n}");
 
 /***/ }),
 
@@ -6001,7 +6001,7 @@ eval("{\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argumen
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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 __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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n__exportStar(__webpack_require__(/*! ./validation */ \"../core/lib/process/validation/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./calculation */ \"../core/lib/process/calculation/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./conditions */ \"../core/lib/process/conditions/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./defaultValue */ \"../core/lib/process/defaultValue/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./fetch */ \"../core/lib/process/fetch/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./filter */ \"../core/lib/process/filter/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./logic */ \"../core/lib/process/logic/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./populate */ \"../core/lib/process/populate/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./processOne */ \"../core/lib/process/processOne.js\"), exports);\n__exportStar(__webpack_require__(/*! ./process */ \"../core/lib/process/process.js\"), exports);\n__exportStar(__webpack_require__(/*! ./normalize */ \"../core/lib/process/normalize/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./dereference */ \"../core/lib/process/dereference/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./clearHidden */ \"../core/lib/process/clearHidden/index.js\"), exports);\n\n\n//# sourceURL=webpack://Formio/../core/lib/process/index.js?\n}");
+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 __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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n__exportStar(__webpack_require__(/*! ./validation */ \"../core/lib/process/validation/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./calculation */ \"../core/lib/process/calculation/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./conditions */ \"../core/lib/process/conditions/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./defaultValue */ \"../core/lib/process/defaultValue/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./fetch */ \"../core/lib/process/fetch/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./filter */ \"../core/lib/process/filter/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./logic */ \"../core/lib/process/logic/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./populate */ \"../core/lib/process/populate/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./processOne */ \"../core/lib/process/processOne.js\"), exports);\n__exportStar(__webpack_require__(/*! ./process */ \"../core/lib/process/process.js\"), exports);\n__exportStar(__webpack_require__(/*! ./normalize */ \"../core/lib/process/normalize/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./dereference */ \"../core/lib/process/dereference/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./clearHidden */ \"../core/lib/process/clearHidden/index.js\"), exports);\n__exportStar(__webpack_require__(/*! ./serverOverride */ \"../core/lib/process/serverOverride/index.js\"), exports);\n\n\n//# sourceURL=webpack://Formio/../core/lib/process/index.js?\n}");
 
 /***/ }),
 
@@ -7145,7 +7145,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexp
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Evaluator = exports.DefaultEvaluator = void 0;\nexports.registerEvaluator = registerEvaluator;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\");\nconst jsonlogic_1 = __webpack_require__(/*! ./jsonlogic */ \"../core/lib/utils/jsonlogic/index.js\");\nclass DefaultEvaluator {\n    constructor(options = {}) {\n        this.templateSettings = {\n            interpolate: /{{([\\s\\S]+?)}}/g,\n            evaluate: /\\{%([\\s\\S]+?)%\\}/g,\n            escape: /\\{\\{\\{([\\s\\S]+?)\\}\\}\\}/g,\n        };\n        this.noeval = !!options.noeval;\n    }\n    evaluator(func, ...params) {\n        if (this.noeval) {\n            console.warn('No evaluations allowed for this renderer.');\n            return lodash_1.noop;\n        }\n        if (typeof func === 'function') {\n            return func;\n        }\n        if (typeof params[0] === 'object') {\n            params = (0, lodash_1.keys)(params[0]);\n        }\n        return new Function(...params, func);\n    }\n    interpolateString(rawTemplate, data, options = {}) {\n        if (!rawTemplate) {\n            return '';\n        }\n        if (typeof rawTemplate !== 'string') {\n            return rawTemplate.toString();\n        }\n        return rawTemplate.replace(/({{\\s*(.*?)\\s*}})/g, (match, $1, $2) => {\n            // If this is a function call and we allow evals.\n            if ($2.indexOf('(') !== -1 && !(this.noeval || options.noeval)) {\n                return $2.replace(/([^(]+)\\(([^)]+)\\s*\\);?/, (evalMatch, funcName, args) => {\n                    funcName = (0, lodash_1.trim)(funcName);\n                    const func = (0, lodash_1.get)(data, funcName);\n                    if (func) {\n                        if (args) {\n                            args = args.split(',').map((arg) => {\n                                arg = (0, lodash_1.trim)(arg);\n                                if (arg.indexOf('\"') === 0 || arg.indexOf(\"'\") === 0) {\n                                    return arg.substring(1, arg.length - 1);\n                                }\n                                return (0, lodash_1.get)(data, arg);\n                            });\n                        }\n                        return this.evaluate(func, args, '', false, data, options);\n                    }\n                    return '';\n                });\n            }\n            else {\n                let dataPath = $2;\n                if ($2.indexOf('?') !== -1) {\n                    dataPath = $2.replace(/\\?\\./g, '.');\n                }\n                // Allow for conditional values.\n                const parts = dataPath.split('||').map((item) => item.trim());\n                let value = '';\n                let path = '';\n                for (let i = 0; i < parts.length; i++) {\n                    path = parts[i];\n                    value = (0, lodash_1.get)(data, path);\n                    if (value) {\n                        break;\n                    }\n                }\n                if (options.data) {\n                    (0, lodash_1.set)(options.data, path, value);\n                }\n                return value;\n            }\n        });\n    }\n    interpolate(rawTemplate, data, options = {}) {\n        if (typeof rawTemplate === 'function' && !(this.noeval || options.noeval)) {\n            try {\n                return rawTemplate(data);\n            }\n            catch (err) {\n                console.warn('Error interpolating template', err, data);\n                return err.message;\n            }\n        }\n        return this.interpolateString(String(rawTemplate), data, options);\n    }\n    /**\n     * Evaluate a method.\n     *\n     * @param func\n     * @param args\n     * @return {*}\n     */\n    evaluate(func, args = {}, ret = '', interpolate = false, context = {}, options = {}) {\n        let returnVal = null;\n        options = (0, lodash_1.isObject)(options) ? options : { noeval: options };\n        const component = args.component ? args.component : { key: 'unknown' };\n        if (!args.form && args.instance) {\n            args.form = (0, lodash_1.get)(args.instance, 'root._form', {});\n        }\n        const componentKey = component.key;\n        if (typeof func === 'object') {\n            try {\n                returnVal = jsonlogic_1.jsonLogic.apply(func, args);\n            }\n            catch (err) {\n                returnVal = null;\n                console.warn(`An error occured within JSON Logic`, err);\n            }\n            return returnVal;\n        }\n        else if (typeof func === 'string') {\n            if (ret) {\n                func = `var ${ret};\n        ${func};\n        return ${ret}`;\n            }\n            if (options.formModule) {\n                func = `const module = ${options.formModule};\n          if (module.options?.form?.evalContext) {\n            Object.keys(module.options.form.evalContext).forEach((key) => globalThis[key] = module[key]);\n          }\n          ${func};\n        `;\n            }\n            if (interpolate) {\n                func = this.interpolate(func, args, options);\n            }\n            try {\n                if (this.noeval || options.noeval) {\n                    func = lodash_1.noop;\n                }\n                else {\n                    func = this.evaluator(func, args, context);\n                }\n                args = (0, lodash_1.values)(args);\n            }\n            catch (err) {\n                console.warn(`An error occured within the custom function for ${componentKey}`, err);\n                returnVal = null;\n                func = false;\n            }\n        }\n        if (typeof func === 'function') {\n            try {\n                returnVal = this.execute(func, args, context, options);\n            }\n            catch (err) {\n                returnVal = null;\n                console.warn(`An error occured within custom function for ${componentKey}`, err);\n            }\n        }\n        else if (func) {\n            console.warn(`Unknown function type for ${componentKey}`);\n        }\n        return returnVal;\n    }\n    /**\n     * Execute a function.\n     *\n     * @param func\n     * @param args\n     * @returns\n     */\n    execute(func, args, context = {}, options = {}) {\n        options = (0, lodash_1.isObject)(options) ? options : { noeval: options };\n        if (this.noeval || options.noeval) {\n            console.warn('No evaluations allowed for this renderer.');\n            return;\n        }\n        return Array.isArray(args) ? func.apply(context, args) : func.call(context, args);\n    }\n}\nexports.DefaultEvaluator = DefaultEvaluator;\n// The mutable singleton instance\nexports.Evaluator = new DefaultEvaluator();\nfunction registerEvaluator(override) {\n    exports.Evaluator = override;\n}\n\n\n//# sourceURL=webpack://Formio/../core/lib/utils/Evaluator.js?\n}");
+eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Evaluator = exports.DefaultEvaluator = void 0;\nexports.registerEvaluator = registerEvaluator;\nconst lodash_1 = __webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\");\nconst jsonlogic_1 = __webpack_require__(/*! ./jsonlogic */ \"../core/lib/utils/jsonlogic/index.js\");\nclass DefaultEvaluator {\n    constructor(options = {}) {\n        this.templateSettings = {\n            interpolate: /{{([\\s\\S]+?)}}/g,\n            evaluate: /\\{%([\\s\\S]+?)%\\}/g,\n            escape: /\\{\\{\\{([\\s\\S]+?)\\}\\}\\}/g,\n        };\n        this.noeval = !!options.noeval;\n    }\n    evaluator(func, ...params) {\n        if (this.noeval) {\n            console.warn('No evaluations allowed for this renderer.');\n            return lodash_1.noop;\n        }\n        if (typeof func === 'function') {\n            return func;\n        }\n        if (typeof params[0] === 'object') {\n            params = (0, lodash_1.keys)(params[0]);\n        }\n        return new Function(...params, func);\n    }\n    interpolateString(rawTemplate, data, options = {}) {\n        if (!rawTemplate) {\n            return '';\n        }\n        if (typeof rawTemplate !== 'string') {\n            return rawTemplate.toString();\n        }\n        return rawTemplate.replace(/({{\\s*(.*?)\\s*}})/g, (match, $1, $2) => {\n            // If this is a function call and we allow evals.\n            if ($2.indexOf('(') !== -1 && !(this.noeval || options.noeval)) {\n                return $2.replace(/([^(]+)\\(([^)]+)\\s*\\);?/, (evalMatch, funcName, args) => {\n                    funcName = (0, lodash_1.trim)(funcName);\n                    const func = (0, lodash_1.get)(data, funcName);\n                    if (func) {\n                        if (args) {\n                            args = args.split(',').map((arg) => {\n                                arg = (0, lodash_1.trim)(arg);\n                                if (arg.indexOf('\"') === 0 || arg.indexOf(\"'\") === 0) {\n                                    return arg.substring(1, arg.length - 1);\n                                }\n                                return (0, lodash_1.get)(data, arg);\n                            });\n                        }\n                        return this.evaluate(func, args, '', false, data, options);\n                    }\n                    return '';\n                });\n            }\n            else {\n                let dataPath = $2;\n                if ($2.indexOf('?') !== -1) {\n                    dataPath = $2.replace(/\\?\\./g, '.');\n                }\n                // Allow for conditional values.\n                const parts = dataPath.split('||').map((item) => item.trim());\n                let value = '';\n                let path = '';\n                for (let i = 0; i < parts.length; i++) {\n                    path = parts[i];\n                    value = (0, lodash_1.get)(data, path);\n                    if (value) {\n                        break;\n                    }\n                }\n                if (options.data) {\n                    (0, lodash_1.set)(options.data, path, value);\n                }\n                return value;\n            }\n        });\n    }\n    interpolate(rawTemplate, data, options = {}) {\n        if (typeof rawTemplate === 'function' && !(this.noeval || options.noeval)) {\n            try {\n                return rawTemplate(data);\n            }\n            catch (err) {\n                console.warn('Error interpolating template', err, data);\n                return err.message;\n            }\n        }\n        return this.interpolateString(String(rawTemplate), data, options);\n    }\n    /**\n     * Evaluate a method.\n     *\n     * @param func\n     * @param args\n     * @return {*}\n     */\n    evaluate(func, args = {}, ret = '', interpolate = false, context = {}, options = {}) {\n        let returnVal = null;\n        options = (0, lodash_1.isObject)(options) ? options : { noeval: options };\n        const component = args.component ? args.component : { key: 'unknown' };\n        if (!args.form && args.instance) {\n            args.form = (0, lodash_1.get)(args.instance, 'root._form', {});\n        }\n        const componentKey = component.key;\n        if (typeof func === 'object') {\n            try {\n                returnVal = jsonlogic_1.jsonLogic.apply(func, args);\n            }\n            catch (err) {\n                returnVal = null;\n                console.warn(`An error occured within JSON Logic`, err);\n            }\n            return returnVal;\n        }\n        else if (typeof func === 'string') {\n            if (ret) {\n                func = `var ${ret};\n        ${func};\n        return ${ret}`;\n            }\n            if (options.formModule) {\n                func = `const module = ${options.formModule};\n          if (module.options?.form?.evalContext) {\n            Object.keys(module.options.form.evalContext).forEach((key) => globalThis[key] = module.options.form.evalContext[key]);\n          }\n          ${func};\n        `;\n            }\n            if (interpolate) {\n                func = this.interpolate(func, args, options);\n            }\n            try {\n                if (this.noeval || options.noeval) {\n                    func = lodash_1.noop;\n                }\n                else {\n                    func = this.evaluator(func, args, context);\n                }\n                args = (0, lodash_1.values)(args);\n            }\n            catch (err) {\n                console.warn(`An error occured within the custom function for ${componentKey}`, err);\n                returnVal = null;\n                func = false;\n            }\n        }\n        if (typeof func === 'function') {\n            try {\n                returnVal = this.execute(func, args, context, options);\n            }\n            catch (err) {\n                returnVal = null;\n                console.warn(`An error occured within custom function for ${componentKey}`, err);\n            }\n        }\n        else if (func) {\n            console.warn(`Unknown function type for ${componentKey}`);\n        }\n        return returnVal;\n    }\n    /**\n     * Execute a function.\n     *\n     * @param func\n     * @param args\n     * @returns\n     */\n    execute(func, args, context = {}, options = {}) {\n        options = (0, lodash_1.isObject)(options) ? options : { noeval: options };\n        if (this.noeval || options.noeval) {\n            console.warn('No evaluations allowed for this renderer.');\n            return;\n        }\n        return Array.isArray(args) ? func.apply(context, args) : func.call(context, args);\n    }\n}\nexports.DefaultEvaluator = DefaultEvaluator;\n// The mutable singleton instance\nexports.Evaluator = new DefaultEvaluator();\nfunction registerEvaluator(override) {\n    exports.Evaluator = override;\n}\n\n\n//# sourceURL=webpack://Formio/../core/lib/utils/Evaluator.js?\n}");
 
 /***/ }),
 
@@ -7629,7 +7629,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n//
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"../../node_modules/.pnpm/moment@2.30.1/node_modules/moment/moment.js\"));\nconst vanilla_text_mask_1 = __importDefault(__webpack_require__(/*! @formio/vanilla-text-mask */ \"../../node_modules/.pnpm/@formio+vanilla-text-mask@5.1.1-formio.1/node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\"));\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst i18n_1 = __webpack_require__(/*! ./utils/i18n */ \"./lib/cjs/utils/i18n.js\");\nconst utils_1 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\"));\n/**\n * The root component for all elements within the Form.io renderer.\n * @property {object} options - The options for this component. Subclasses should override this type with more specific options.\n */\nclass Element {\n    constructor(options) {\n        var _a;\n        /**\n         * The options for this component.\n         * @type {object}\n         */\n        this.options = Object.assign({\n            language: 'en',\n            highlightErrors: true,\n            componentErrorClass: 'formio-error-wrapper',\n            componentWarningClass: 'formio-warning-wrapper',\n            row: '',\n            namespace: 'formio',\n        }, options || {});\n        /**\n         * The ID of this component. This value is auto-generated when the component is created, but\n         * can also be provided from the component.id value passed into the constructor.\n         * @type {string}\n         */\n        this.id = utils_1.default.getRandomComponentId();\n        /**\n         * An array of event handlers so that the destry command can deregister them.\n         * @type {Array}\n         */\n        this.eventHandlers = [];\n        // Use the i18next that is passed in, otherwise use the global version.\n        this.options.i18n = this.options.i18n || {};\n        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.language) {\n            this.options.i18n.language = this.options.language;\n        }\n        this.options.i18next = this.i18next = this.options.i18next || i18n_1.I18n.init(this.options.i18n);\n        /**\n         * An instance of the EventEmitter class to handle the emitting and registration of events.\n         * @type {EventEmitter}\n         */\n        this.events = options && options.events ? options.events : new EventEmitter_1.default();\n        this.defaultMask = null;\n        /**\n         * Conditional to show or hide helplinks in editForm\n         * @type {*|boolean}\n         */\n        this.helplinks =\n            this.options.helplinks === 'false' ? false : this.options.helplinks || 'https://help.form.io';\n    }\n    /**\n     * Register for a new event within this component.\n     * @example\n     * let component = new BaseComponent({\n     *   type: 'textfield',\n     *   label: 'First Name',\n     *   key: 'firstName'\n     * });\n     * component.on('componentChange', (changed) => {\n     *   console.log('this element is changed.');\n     * });\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @param {boolean} [internal] - This is an internal event handler.\n     * @param {boolean} [once] - This event should only fire once.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    on(event, cb, internal, once = false) {\n        if (!this.events) {\n            return;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        // Store the component id in the handler so that we can determine which events are for this component.\n        cb.id = this.id;\n        cb.key = this.key;\n        cb.internal = internal;\n        // Register for this event.\n        return this.events[once ? 'once' : 'on'](type, cb);\n    }\n    /**\n     * Register for a new single-fire event within this component.\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @param {boolean} internal - This is an internal event handler.\n     * @returns {EventEmitter} - The event emitter instance.\n     */\n    once(event, cb, internal) {\n        return this.on(event, cb, internal, true);\n    }\n    /**\n     * Allow catching any event.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    onAny(cb) {\n        if (!this.events) {\n            return;\n        }\n        return this.events.onAny(cb);\n    }\n    /**\n     * Removes the listener that will be fired when any event is emitted.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    offAny(cb) {\n        if (!this.events) {\n            return;\n        }\n        return this.events.offAny(cb);\n    }\n    /**\n     * Removes a listener for a certain event. Not passing the 2nd arg will remove all listeners for that event.\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function | undefined} cb - The callback handler to handle this event.\n     */\n    off(event, cb) {\n        var _a;\n        if (!this.events) {\n            return;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        (_a = this.events) === null || _a === void 0 ? void 0 : _a.listeners(type).forEach((listener) => {\n            var _a;\n            // Ensure the listener is for this element\n            if (!listener || listener.id !== this.id) {\n                return;\n            }\n            // If there is a given callback, only deal with the match\n            if (cb && cb !== listener) {\n                return;\n            }\n            (_a = this.events) === null || _a === void 0 ? void 0 : _a.off(type, listener);\n        });\n    }\n    /**\n     * Emit a new event.\n     * @param {string} event - The event to emit.\n     * @param {object} data - The data to emit with the handler.\n     */\n    emit(event, ...data) {\n        if (this.events) {\n            this.events.emit(`${this.options.namespace}.${event}`, ...data);\n        }\n    }\n    /**\n     * Check if the component has an event handler set up for the event.\n     * @param {string} event - The event name.\n     * @returns {boolean} - TRUE if the event is registered, FALSE otherwise.\n     */\n    hasEventHandler(event) {\n        if (!this.events) {\n            return false;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        return this.events.listeners(type).some((listener) => {\n            if (!listener) {\n                return false;\n            }\n            return listener.id === this.id || listener.key === this.key;\n        });\n    }\n    /**\n     * Wrapper method to add an event listener to an HTML element.\n     * @param {HtmlElement} obj - The DOM element to add the event to.\n     * @param {string} type - The event name to add.\n     * @param {Function} func - The callback function to be executed when the listener is triggered.\n     * @param {boolean} persistent - If this listener should persist beyond \"destroy\" commands.\n     * @param {boolean} capture - If this listener should be executed in the capture phase.\n     * @returns {void | this} - The instance of the element.\n     */\n    addEventListener(obj, type, func, persistent, capture) {\n        if (!obj) {\n            return;\n        }\n        if (!persistent) {\n            this.eventHandlers.push({ id: this.id, obj, type, func });\n        }\n        if ('addEventListener' in obj) {\n            obj.addEventListener(type, func, !!capture);\n        }\n        else if ('attachEvent' in obj) {\n            obj.attachEvent(`on${type}`, func);\n        }\n        return this;\n    }\n    /**\n     * Remove an event listener from the object.\n     * @param {HTMLElement} obj - The DOM element to remove the event from.\n     * @param {string} type - The event name to remove.\n     * @param {Function} func - The callback function to remove.\n     * @returns {this | void} - The instance of the element.\n     */\n    removeEventListener(obj, type, func = null) {\n        const indexes = [];\n        if (!obj) {\n            return;\n        }\n        this.eventHandlers.forEach((handler, index) => {\n            if (handler.id === this.id &&\n                obj.removeEventListener &&\n                handler.type === type &&\n                (!func || handler.func === func)) {\n                obj.removeEventListener(type, handler.func);\n                indexes.push(index);\n            }\n        });\n        if (indexes.length) {\n            lodash_1.default.pullAt(this.eventHandlers, indexes);\n        }\n        return this;\n    }\n    removeEventListeners() {\n        this.eventHandlers.forEach((handler) => {\n            if (this.id === handler.id &&\n                handler.type &&\n                handler.obj &&\n                handler.obj.removeEventListener) {\n                handler.obj.removeEventListener(handler.type, handler.func);\n            }\n        });\n        this.eventHandlers = [];\n    }\n    removeAllEvents(includeExternal) {\n        if (this.events) {\n            lodash_1.default.each(this.events._events, (events, type) => {\n                lodash_1.default.each(events, (listener) => {\n                    if (listener && this.id === listener.id && (includeExternal || listener.internal)) {\n                        this.events.off(type, listener);\n                    }\n                });\n            });\n        }\n    }\n    teardown() {\n        delete this.i18next;\n        delete this.events;\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     * @param {boolean} all - If all events should be removed, including external events.\n     */\n    destroy(all = false) {\n        this.removeEventListeners();\n        this.removeAllEvents();\n        if (all) {\n            this.teardown();\n        }\n    }\n    /**\n     * Append an HTML DOM element to a container.\n     * @param {HTMLElement} element - The DOM element to append.\n     * @param {HTMLElement} container - The DOM element that is the container of the element getting appended.\n     * @returns {this} - The instance of the element.\n     */\n    appendTo(element, container) {\n        container === null || container === void 0 ? void 0 : container.appendChild(element);\n        return this;\n    }\n    /**\n     * Prepend an HTML DOM element to a container.\n     * @param {HTMLElement} element - The DOM element to prepend.\n     * @param {HTMLElement} container - The DOM element that is the container of the element getting prepended.\n     * @returns {this} - The instance of the element.\n     */\n    prependTo(element, container) {\n        if (container) {\n            if (container.firstChild) {\n                try {\n                    container.insertBefore(element, container.firstChild);\n                }\n                catch (err) {\n                    console.warn(err);\n                    container.appendChild(element);\n                }\n            }\n            else {\n                container.appendChild(element);\n            }\n        }\n        return this;\n    }\n    /**\n     * Removes an HTML DOM element from its bounding container.\n     * @param {HTMLElement} element - The element to remove.\n     * @param {HTMLElement} container - The DOM element that is the container of the element to remove.\n     * @returns {this} - The instance of the element.\n     */\n    removeChildFrom(element, container) {\n        if (container && container.contains(element)) {\n            try {\n                container.removeChild(element);\n            }\n            catch (err) {\n                console.warn(err);\n            }\n        }\n        return this;\n    }\n    /**\n     * Alias for document.createElement.\n     * @param {string} type - The type of element to create\n     * @param {object} attr - The element attributes to add to the created element.\n     * @param {Various} children - Child elements. Can be a DOM Element, string or array of both.\n     * @returns {HTMLElement} - The created element.\n     */\n    ce(type, attr, children = null) {\n        // console.warn('Call to deprecated this.ce(). Dom elements should be created with templates, not manually with ce.');\n        // Create the element.\n        const element = document.createElement(type);\n        // Add attributes.\n        if (attr) {\n            this.attr(element, attr);\n        }\n        // Append the children.\n        this.appendChild(element, children);\n        return element;\n    }\n    /**\n     * Append different types of children.\n     * @param {HTMLElement} element - The element to append to.\n     * @param {HTMLElement} child - The child element to append.\n     * @returns {this} - The instance of the element.\n     */\n    appendChild(element, child) {\n        if (Array.isArray(child)) {\n            child.forEach((oneChild) => this.appendChild(element, oneChild));\n        }\n        else if (child instanceof HTMLElement || child instanceof Text) {\n            element.appendChild(child);\n        }\n        else if (child) {\n            element.appendChild(this.text(child.toString()));\n        }\n        return this;\n    }\n    /**\n     * Creates a new input mask placeholder.\n     * @param {HTMLElement} mask - The input mask.\n     * @returns {string} - The placeholder that will exist within the input as they type.\n     */\n    maskPlaceholder(mask) {\n        return mask.map((char) => (char instanceof RegExp ? this.placeholderChar : char)).join('');\n    }\n    /**\n     * Get the placeholder character for the input mask.\n     * @returns {string} - The placeholder character.\n     */\n    get placeholderChar() {\n        var _a;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.inputMaskPlaceholderChar) || '_';\n    }\n    /**\n     * Sets the input mask for an input.\n     * @param {HTMLElement} input - The html input to apply the mask to.\n     * @param {string} inputMask - The input mask to add to this input.\n     * @param {boolean} usePlaceholder - Set the mask placeholder on the input.\n     */\n    setInputMask(input, inputMask, usePlaceholder) {\n        var _a, _b;\n        if (input && inputMask) {\n            const mask = utils_1.default.getInputMask(inputMask, this.placeholderChar);\n            this.defaultMask = mask;\n            try {\n                //destroy previous mask\n                if (input.mask) {\n                    input.mask.destroy();\n                }\n                input.mask = (0, vanilla_text_mask_1.default)({\n                    inputElement: input,\n                    mask,\n                    placeholderChar: this.placeholderChar,\n                    shadowRoot: ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) || ((_b = this.settings) === null || _b === void 0 ? void 0 : _b.shadowRoot),\n                });\n            }\n            catch (e) {\n                // Don't pass error up, to prevent form rejection.\n                // Internal bug of vanilla-text-mask on iOS (`selectionEnd`);\n                console.warn(e);\n            }\n            if (mask.numeric) {\n                input.setAttribute('pattern', '\\\\d*');\n            }\n            if (usePlaceholder) {\n                input.setAttribute('placeholder', this.maskPlaceholder(mask));\n            }\n        }\n    }\n    /**\n     * Translate a text using the i18n system.\n     * @param {string|Array<string>} text - The i18n identifier.\n     * @param {...any} args - The arguments to pass to the i18n translation.\n     * @returns {string} - The translated text.\n     */\n    t(text, ...args) {\n        return this.i18next ? this.i18next.t(text, ...args) : text;\n    }\n    /**\n     * Alias to create a text node.\n     * @param {string} text - The text to create.\n     * @returns {HtmlElement} - The created text node.\n     */\n    text(text) {\n        return document.createTextNode(this.t(text));\n    }\n    /**\n     * Adds an object of attributes onto an element.\n     * @param {HtmlElement} element - The element to add the attributes to.\n     * @param {object} attr - The attributes to add to the input element.\n     */\n    attr(element, attr) {\n        if (!element) {\n            return;\n        }\n        lodash_1.default.each(attr, (value, key) => {\n            if (typeof value !== 'undefined') {\n                if (key.indexOf('on') === 0) {\n                    // If this is an event, add a listener.\n                    this.addEventListener(element, key.substr(2).toLowerCase(), value);\n                }\n                else {\n                    // Otherwise it is just an attribute.\n                    element.setAttribute(key, value);\n                }\n            }\n        });\n    }\n    /**\n     * Determines if an element has a class.\n     *\n     * Taken from jQuery https://j11y.io/jquery/#v=1.5.0&fn=jQuery.fn.hasClass\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The class to check for.\n     * @returns {boolean} - TRUE if the element has the class, FALSE otherwise.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return false;\n        }\n        // Allow templates to intercept.\n        className = ` ${className} `;\n        return ` ${element.className} `.replace(/[\\n\\t\\r]/g, ' ').indexOf(className) > -1;\n    }\n    /**\n     * Adds a class to a DOM element.\n     * @param {HTMLElement} element - The element to add a class to.\n     * @param {string} className - The name of the class to add.\n     * @returns {this} - The instance of the element.\n     */\n    addClass(element, className) {\n        if (!element || !(element instanceof HTMLElement)) {\n            return this;\n        }\n        // Allow templates to intercept.\n        const classes = element.getAttribute('class');\n        if (!(classes === null || classes === void 0 ? void 0 : classes.includes(className))) {\n            element.setAttribute('class', `${classes} ${className}`);\n        }\n        return this;\n    }\n    /**\n     * Remove a class from a DOM element.\n     * @param {HTMLElement} element - The DOM element to remove the class from.\n     * @param {string} className - The name of the class that is to be removed.\n     * @returns {this} - The instance of the element.\n     */\n    removeClass(element, className) {\n        if (!element || !className || !(element instanceof HTMLElement)) {\n            return this;\n        }\n        // Allow templates to intercept.\n        let cls = element.getAttribute('class');\n        if (cls) {\n            cls = cls.replace(new RegExp(` ${className}`, 'g'), '');\n            element.setAttribute('class', cls);\n        }\n        return this;\n    }\n    /**\n     * Idempotently add or remove a class on a DOM element based on a boolean.\n     * Skips the mutation when the element is already in the desired state, so\n     * callers can safely invoke it on every change without triggering redundant\n     * CSS transitions or attribute writes.\n     * @param {HTMLElement} element - The DOM element to toggle the class on.\n     * @param {string} className - The class name to add or remove.\n     * @param {boolean} want - TRUE to ensure the class is present, FALSE to ensure it is absent.\n     * @returns {this} - The instance of the element.\n     */\n    toggleClass(element, className, want) {\n        var _a;\n        if (!element || !className || !(element instanceof HTMLElement)) {\n            return this;\n        }\n        const has = !!((_a = element.classList) === null || _a === void 0 ? void 0 : _a.contains(className));\n        if (want && !has) {\n            this.addClass(element, className);\n        }\n        else if (!want && has) {\n            this.removeClass(element, className);\n        }\n        return this;\n    }\n    /**\n     * Empty's an HTML DOM element.\n     * @param {HTMLElement} element - The element you wish to empty.\n     */\n    empty(element) {\n        if (element) {\n            while (element.firstChild) {\n                element.removeChild(element.firstChild);\n            }\n        }\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {object} additional - Additional context to apply to the evaluation context.\n     * @returns {*} - The evaluation context.\n     */\n    evalContext(additional) {\n        var _a;\n        return Object.assign({\n            _: lodash_1.default,\n            utils: utils_1.default,\n            util: utils_1.default,\n            user: Formio_1.Formio.getUser(),\n            moment: moment_1.default,\n            instance: this,\n            self: this,\n            token: Formio_1.Formio.getToken({\n                decode: true,\n            }),\n            options: this.options,\n            config: this.root && this.root.form && this.root.form.config\n                ? this.root.form.config\n                : ((_a = this.options) === null || _a === void 0 ? void 0 : _a.formConfig)\n                    ? this.options.formConfig\n                    : {},\n        }, additional, lodash_1.default.get(this.root, 'options.evalContext', {}));\n    }\n    /**\n     * Performs an interpolation using the evaluation context of this component.\n     * @param {string} string - The string to interpolate.\n     * @param {object} data - The data to use in the interpolation.\n     * @param {object} options - The options to pass to the interpolation.\n     * @returns {XML|string|*|void} - The interpolated string.\n     */\n    interpolate(string, data, options = {}) {\n        if (typeof string !== 'function' &&\n            (this.component.content || this.component.html) &&\n            !utils_1.default.Evaluator.templateSettings.interpolate.test(string)) {\n            string = utils_1.default.translateHTMLTemplate(String(string), (value) => this.t(value));\n        }\n        if (this.component.filter === string && !this.options.building) {\n            const evalContext = this.evalContext(data);\n            evalContext.data = lodash_1.default.mapValues(evalContext.data, (val) => lodash_1.default.isString(val) ? encodeURIComponent(val) : val);\n            return utils_1.default.interpolate(string, evalContext, options);\n        }\n        return utils_1.default.interpolate(string, this.evalContext(data), options);\n    }\n    /**\n     * Performs an evaluation using the evaluation context of this component.\n     * @param {string|Function|object} func - The function or string to evaluate.\n     * @param {object} args - The arguments to pass to the evaluation.\n     * @param {string} ret - The name of the variable within the evaluation context to return.\n     * @param {boolean} interpolate - Determines if it should replace all {{ }} token references with actual data.\n     * @param {import('@formio/core').EvaluatorOptions} options - The options to pass to the evaluation.\n     * @returns {*} - The result of the evaluation.\n     */\n    evaluate(func, args, ret, interpolate, options = {}) {\n        return utils_1.default.evaluate(func, this.evalContext(args), ret, interpolate, options);\n    }\n    /**\n     * Allow for options to hook into the functionality of this renderer.\n     * @returns {*} - The result of the hook function.\n     */\n    hook() {\n        const name = arguments[0];\n        if (this.options && this.options.hooks && this.options.hooks[name]) {\n            return this.options.hooks[name].apply(this, Array.prototype.slice.call(arguments, 1));\n        }\n        else {\n            // If this is an async hook instead of a sync.\n            const fn = typeof arguments[arguments.length - 1] === 'function'\n                ? arguments[arguments.length - 1]\n                : null;\n            if (fn) {\n                return fn(null, arguments[1]);\n            }\n            else {\n                return arguments[1];\n            }\n        }\n    }\n}\nexports[\"default\"] = Element;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Element.js?\n}");
+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/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"../../node_modules/.pnpm/moment@2.30.1/node_modules/moment/moment.js\"));\nconst vanilla_text_mask_1 = __importDefault(__webpack_require__(/*! @formio/vanilla-text-mask */ \"../../node_modules/.pnpm/@formio+vanilla-text-mask@5.1.1-formio.1/node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\"));\nconst EventEmitter_1 = __importDefault(__webpack_require__(/*! ./EventEmitter */ \"./lib/cjs/EventEmitter.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst i18n_1 = __webpack_require__(/*! ./utils/i18n */ \"./lib/cjs/utils/i18n.js\");\nconst utils_1 = __importDefault(__webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\"));\n/**\n * The root component for all elements within the Form.io renderer.\n * @property {object} options - The options for this component. Subclasses should override this type with more specific options.\n */\nclass Element {\n    constructor(options) {\n        var _a;\n        /**\n         * The options for this component.\n         * @type {object}\n         */\n        this.options = Object.assign({\n            language: 'en',\n            highlightErrors: true,\n            componentErrorClass: 'formio-error-wrapper',\n            componentWarningClass: 'formio-warning-wrapper',\n            row: '',\n            namespace: 'formio',\n        }, options || {});\n        /**\n         * The ID of this component. This value is auto-generated when the component is created, but\n         * can also be provided from the component.id value passed into the constructor.\n         * @type {string}\n         */\n        this.id = utils_1.default.getRandomComponentId();\n        /**\n         * An array of event handlers so that the destry command can deregister them.\n         * @type {Array}\n         */\n        this.eventHandlers = [];\n        // Use the i18next that is passed in, otherwise use the global version.\n        this.options.i18n = this.options.i18n || {};\n        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.language) {\n            this.options.i18n.language = this.options.language;\n        }\n        this.options.i18next = this.i18next = this.options.i18next || i18n_1.I18n.init(this.options.i18n);\n        /**\n         * An instance of the EventEmitter class to handle the emitting and registration of events.\n         * @type {EventEmitter}\n         */\n        this.events = options && options.events ? options.events : new EventEmitter_1.default();\n        this.defaultMask = null;\n        /**\n         * Conditional to show or hide helplinks in editForm\n         * @type {*|boolean}\n         */\n        this.helplinks =\n            this.options.helplinks === 'false' ? false : this.options.helplinks || 'https://help.form.io';\n    }\n    /**\n     * Register for a new event within this component.\n     * @example\n     * let component = new BaseComponent({\n     *   type: 'textfield',\n     *   label: 'First Name',\n     *   key: 'firstName'\n     * });\n     * component.on('componentChange', (changed) => {\n     *   console.log('this element is changed.');\n     * });\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @param {boolean} [internal] - This is an internal event handler.\n     * @param {boolean} [once] - This event should only fire once.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    on(event, cb, internal, once = false) {\n        if (!this.events) {\n            return;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        // Store the component id in the handler so that we can determine which events are for this component.\n        cb.id = this.id;\n        cb.key = this.key;\n        cb.internal = internal;\n        // Register for this event.\n        return this.events[once ? 'once' : 'on'](type, cb);\n    }\n    /**\n     * Register for a new single-fire event within this component.\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @param {boolean} internal - This is an internal event handler.\n     * @returns {EventEmitter} - The event emitter instance.\n     */\n    once(event, cb, internal) {\n        return this.on(event, cb, internal, true);\n    }\n    /**\n     * Allow catching any event.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    onAny(cb) {\n        if (!this.events) {\n            return;\n        }\n        return this.events.onAny(cb);\n    }\n    /**\n     * Removes the listener that will be fired when any event is emitted.\n     * @param {Function} cb - The callback handler to handle this event.\n     * @returns {EventEmitter | void} - The event emitter instance.\n     */\n    offAny(cb) {\n        if (!this.events) {\n            return;\n        }\n        return this.events.offAny(cb);\n    }\n    /**\n     * Removes a listener for a certain event. Not passing the 2nd arg will remove all listeners for that event.\n     * @param {string} event - The event you wish to register the handler for.\n     * @param {Function | undefined} cb - The callback handler to handle this event.\n     */\n    off(event, cb) {\n        var _a;\n        if (!this.events) {\n            return;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        (_a = this.events) === null || _a === void 0 ? void 0 : _a.listeners(type).forEach((listener) => {\n            var _a;\n            // Ensure the listener is for this element\n            if (!listener || listener.id !== this.id) {\n                return;\n            }\n            // If there is a given callback, only deal with the match\n            if (cb && cb !== listener) {\n                return;\n            }\n            (_a = this.events) === null || _a === void 0 ? void 0 : _a.off(type, listener);\n        });\n    }\n    /**\n     * Emit a new event.\n     * @param {string} event - The event to emit.\n     * @param {object} data - The data to emit with the handler.\n     */\n    emit(event, ...data) {\n        if (this.events) {\n            this.events.emit(`${this.options.namespace}.${event}`, ...data);\n        }\n    }\n    /**\n     * Check if the component has an event handler set up for the event.\n     * @param {string} event - The event name.\n     * @returns {boolean} - TRUE if the event is registered, FALSE otherwise.\n     */\n    hasEventHandler(event) {\n        if (!this.events) {\n            return false;\n        }\n        const type = `${this.options.namespace}.${event}`;\n        return this.events.listeners(type).some((listener) => {\n            if (!listener) {\n                return false;\n            }\n            return listener.id === this.id || listener.key === this.key;\n        });\n    }\n    /**\n     * Wrapper method to add an event listener to an HTML element.\n     * @param {HtmlElement} obj - The DOM element to add the event to.\n     * @param {string} type - The event name to add.\n     * @param {Function} func - The callback function to be executed when the listener is triggered.\n     * @param {boolean} persistent - If this listener should persist beyond \"destroy\" commands.\n     * @param {boolean} capture - If this listener should be executed in the capture phase.\n     * @returns {void | this} - The instance of the element.\n     */\n    addEventListener(obj, type, func, persistent, capture) {\n        if (!obj) {\n            return;\n        }\n        if (!persistent) {\n            this.eventHandlers.push({ id: this.id, obj, type, func });\n        }\n        if ('addEventListener' in obj) {\n            obj.addEventListener(type, func, !!capture);\n        }\n        else if ('attachEvent' in obj) {\n            obj.attachEvent(`on${type}`, func);\n        }\n        return this;\n    }\n    /**\n     * Remove an event listener from the object.\n     * @param {HTMLElement} obj - The DOM element to remove the event from.\n     * @param {string} type - The event name to remove.\n     * @param {Function} func - The callback function to remove.\n     * @returns {this | void} - The instance of the element.\n     */\n    removeEventListener(obj, type, func = null) {\n        const indexes = [];\n        if (!obj) {\n            return;\n        }\n        this.eventHandlers.forEach((handler, index) => {\n            if (handler.id === this.id &&\n                obj.removeEventListener &&\n                handler.type === type &&\n                (!func || handler.func === func)) {\n                obj.removeEventListener(type, handler.func);\n                indexes.push(index);\n            }\n        });\n        if (indexes.length) {\n            lodash_1.default.pullAt(this.eventHandlers, indexes);\n        }\n        return this;\n    }\n    removeEventListeners() {\n        this.eventHandlers.forEach((handler) => {\n            if (this.id === handler.id &&\n                handler.type &&\n                handler.obj &&\n                handler.obj.removeEventListener) {\n                handler.obj.removeEventListener(handler.type, handler.func);\n            }\n        });\n        this.eventHandlers = [];\n    }\n    removeAllEvents(includeExternal) {\n        if (this.events) {\n            lodash_1.default.each(this.events._events, (events, type) => {\n                lodash_1.default.each(events, (listener) => {\n                    if (listener && this.id === listener.id && (includeExternal || listener.internal)) {\n                        this.events.off(type, listener);\n                    }\n                });\n            });\n        }\n    }\n    teardown() {\n        delete this.i18next;\n        delete this.events;\n    }\n    /**\n     * Removes all event listeners attached to this component.\n     * @param {boolean} all - If all events should be removed, including external events.\n     */\n    destroy(all = false) {\n        this.removeEventListeners();\n        this.removeAllEvents();\n        if (all) {\n            this.teardown();\n        }\n    }\n    /**\n     * Append an HTML DOM element to a container.\n     * @param {HTMLElement} element - The DOM element to append.\n     * @param {HTMLElement} container - The DOM element that is the container of the element getting appended.\n     * @returns {this} - The instance of the element.\n     */\n    appendTo(element, container) {\n        container === null || container === void 0 ? void 0 : container.appendChild(element);\n        return this;\n    }\n    /**\n     * Prepend an HTML DOM element to a container.\n     * @param {HTMLElement} element - The DOM element to prepend.\n     * @param {HTMLElement} container - The DOM element that is the container of the element getting prepended.\n     * @returns {this} - The instance of the element.\n     */\n    prependTo(element, container) {\n        if (container) {\n            if (container.firstChild) {\n                try {\n                    container.insertBefore(element, container.firstChild);\n                }\n                catch (err) {\n                    console.warn(err);\n                    container.appendChild(element);\n                }\n            }\n            else {\n                container.appendChild(element);\n            }\n        }\n        return this;\n    }\n    /**\n     * Removes an HTML DOM element from its bounding container.\n     * @param {HTMLElement} element - The element to remove.\n     * @param {HTMLElement} container - The DOM element that is the container of the element to remove.\n     * @returns {this} - The instance of the element.\n     */\n    removeChildFrom(element, container) {\n        if (container && container.contains(element)) {\n            try {\n                container.removeChild(element);\n            }\n            catch (err) {\n                console.warn(err);\n            }\n        }\n        return this;\n    }\n    /**\n     * Alias for document.createElement.\n     * @param {string} type - The type of element to create\n     * @param {object} attr - The element attributes to add to the created element.\n     * @param {Various} children - Child elements. Can be a DOM Element, string or array of both.\n     * @returns {HTMLElement} - The created element.\n     */\n    ce(type, attr, children = null) {\n        // console.warn('Call to deprecated this.ce(). Dom elements should be created with templates, not manually with ce.');\n        // Create the element.\n        const element = document.createElement(type);\n        // Add attributes.\n        if (attr) {\n            this.attr(element, attr);\n        }\n        // Append the children.\n        this.appendChild(element, children);\n        return element;\n    }\n    /**\n     * Append different types of children.\n     * @param {HTMLElement} element - The element to append to.\n     * @param {HTMLElement} child - The child element to append.\n     * @returns {this} - The instance of the element.\n     */\n    appendChild(element, child) {\n        if (Array.isArray(child)) {\n            child.forEach((oneChild) => this.appendChild(element, oneChild));\n        }\n        else if (child instanceof HTMLElement || child instanceof Text) {\n            element.appendChild(child);\n        }\n        else if (child) {\n            element.appendChild(this.text(child.toString()));\n        }\n        return this;\n    }\n    /**\n     * Creates a new input mask placeholder.\n     * @param {HTMLElement} mask - The input mask.\n     * @returns {string} - The placeholder that will exist within the input as they type.\n     */\n    maskPlaceholder(mask) {\n        return mask.map((char) => (char instanceof RegExp ? this.placeholderChar : char)).join('');\n    }\n    /**\n     * Get the placeholder character for the input mask.\n     * @returns {string} - The placeholder character.\n     */\n    get placeholderChar() {\n        var _a;\n        return ((_a = this.component) === null || _a === void 0 ? void 0 : _a.inputMaskPlaceholderChar) || '_';\n    }\n    /**\n     * Sets the input mask for an input.\n     * @param {HTMLElement} input - The html input to apply the mask to.\n     * @param {string} inputMask - The input mask to add to this input.\n     * @param {boolean} usePlaceholder - Set the mask placeholder on the input.\n     */\n    setInputMask(input, inputMask, usePlaceholder) {\n        var _a, _b;\n        if (input && inputMask) {\n            const mask = utils_1.default.getInputMask(inputMask, this.placeholderChar);\n            this.defaultMask = mask;\n            try {\n                //destroy previous mask\n                if (input.mask) {\n                    input.mask.destroy();\n                }\n                input.mask = (0, vanilla_text_mask_1.default)({\n                    inputElement: input,\n                    mask,\n                    placeholderChar: this.placeholderChar,\n                    shadowRoot: ((_a = this.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) || ((_b = this.settings) === null || _b === void 0 ? void 0 : _b.shadowRoot),\n                });\n            }\n            catch (e) {\n                // Don't pass error up, to prevent form rejection.\n                // Internal bug of vanilla-text-mask on iOS (`selectionEnd`);\n                console.warn(e);\n            }\n            if (mask.numeric) {\n                input.setAttribute('pattern', '\\\\d*');\n            }\n            if (usePlaceholder) {\n                input.setAttribute('placeholder', this.maskPlaceholder(mask));\n            }\n        }\n    }\n    /**\n     * Translate a text using the i18n system.\n     * @param {string|Array<string>} text - The i18n identifier.\n     * @param {...any} args - The arguments to pass to the i18n translation.\n     * @returns {string} - The translated text.\n     */\n    t(text, ...args) {\n        return this.i18next ? this.i18next.t(text, ...args) : text;\n    }\n    /**\n     * Alias to create a text node.\n     * @param {string} text - The text to create.\n     * @returns {HtmlElement} - The created text node.\n     */\n    text(text) {\n        return document.createTextNode(this.t(text));\n    }\n    /**\n     * Adds an object of attributes onto an element.\n     * @param {HtmlElement} element - The element to add the attributes to.\n     * @param {object} attr - The attributes to add to the input element.\n     */\n    attr(element, attr) {\n        if (!element) {\n            return;\n        }\n        lodash_1.default.each(attr, (value, key) => {\n            if (typeof value !== 'undefined') {\n                if (key.indexOf('on') === 0) {\n                    // If this is an event, add a listener.\n                    this.addEventListener(element, key.substr(2).toLowerCase(), value);\n                }\n                else {\n                    // Otherwise it is just an attribute.\n                    element.setAttribute(key, value);\n                }\n            }\n        });\n    }\n    /**\n     * Determines if an element has a class.\n     *\n     * Taken from jQuery https://j11y.io/jquery/#v=1.5.0&fn=jQuery.fn.hasClass\n     * @param {HTMLElement} element - The element to check for the class.\n     * @param {string} className - The class to check for.\n     * @returns {boolean} - TRUE if the element has the class, FALSE otherwise.\n     */\n    hasClass(element, className) {\n        if (!element) {\n            return false;\n        }\n        // Allow templates to intercept.\n        className = ` ${className} `;\n        return ` ${element.className} `.replace(/[\\n\\t\\r]/g, ' ').indexOf(className) > -1;\n    }\n    /**\n     * Adds a class to a DOM element.\n     * @param {HTMLElement} element - The element to add a class to.\n     * @param {string} className - The name of the class to add.\n     * @returns {this} - The instance of the element.\n     */\n    addClass(element, className) {\n        if (!element || !(element instanceof HTMLElement)) {\n            return this;\n        }\n        // Allow templates to intercept.\n        const classes = element.getAttribute('class');\n        if (!(classes === null || classes === void 0 ? void 0 : classes.includes(className))) {\n            element.setAttribute('class', `${classes} ${className}`);\n        }\n        return this;\n    }\n    /**\n     * Remove a class from a DOM element.\n     * @param {HTMLElement} element - The DOM element to remove the class from.\n     * @param {string} className - The name of the class that is to be removed.\n     * @returns {this} - The instance of the element.\n     */\n    removeClass(element, className) {\n        if (!element || !className || !(element instanceof HTMLElement)) {\n            return this;\n        }\n        // Allow templates to intercept.\n        let cls = element.getAttribute('class');\n        if (cls) {\n            cls = cls.replace(new RegExp(` ${className}`, 'g'), '');\n            element.setAttribute('class', cls);\n        }\n        return this;\n    }\n    /**\n     * Idempotently add or remove a class on a DOM element based on a boolean.\n     * Skips the mutation when the element is already in the desired state, so\n     * callers can safely invoke it on every change without triggering redundant\n     * CSS transitions or attribute writes.\n     * @param {HTMLElement} element - The DOM element to toggle the class on.\n     * @param {string} className - The class name to add or remove.\n     * @param {boolean} want - TRUE to ensure the class is present, FALSE to ensure it is absent.\n     * @returns {this} - The instance of the element.\n     */\n    toggleClass(element, className, want) {\n        var _a;\n        if (!element || !className || !(element instanceof HTMLElement)) {\n            return this;\n        }\n        const has = !!((_a = element.classList) === null || _a === void 0 ? void 0 : _a.contains(className));\n        if (want && !has) {\n            this.addClass(element, className);\n        }\n        else if (!want && has) {\n            this.removeClass(element, className);\n        }\n        return this;\n    }\n    /**\n     * Empty's an HTML DOM element.\n     * @param {HTMLElement} element - The element you wish to empty.\n     */\n    empty(element) {\n        if (element) {\n            while (element.firstChild) {\n                element.removeChild(element.firstChild);\n            }\n        }\n    }\n    /**\n     * Create an evaluation context for all script executions and interpolations.\n     * @param {object} additional - Additional context to apply to the evaluation context.\n     * @returns {*} - The evaluation context.\n     */\n    evalContext(additional) {\n        var _a;\n        return Object.assign({\n            _: lodash_1.default,\n            utils: utils_1.default,\n            util: utils_1.default,\n            user: Formio_1.Formio.getUser(),\n            moment: moment_1.default,\n            instance: this,\n            self: this,\n            token: Formio_1.Formio.getToken({\n                decode: true,\n            }),\n            options: this.options,\n            config: this.root && this.root.form && this.root.form.config\n                ? this.root.form.config\n                : ((_a = this.options) === null || _a === void 0 ? void 0 : _a.formConfig)\n                    ? this.options.formConfig\n                    : {},\n        }, additional, lodash_1.default.get(this.root, 'options.evalContext', {}));\n    }\n    /**\n     * Performs an interpolation using the evaluation context of this component.\n     * @param {string} string - The string to interpolate.\n     * @param {object} data - The data to use in the interpolation.\n     * @param {object} options - The options to pass to the interpolation.\n     * @returns {XML|string|*|void} - The interpolated string.\n     */\n    interpolate(string, data, options = {}) {\n        if (typeof string !== 'function' &&\n            (this.component.content || this.component.html) &&\n            !(new RegExp(utils_1.default.Evaluator.templateSettings.interpolate)).test(string)) {\n            string = utils_1.default.translateHTMLTemplate(String(string), (value) => this.t(value));\n        }\n        if (this.component.filter === string && !this.options.building) {\n            const evalContext = this.evalContext(data);\n            evalContext.data = lodash_1.default.mapValues(evalContext.data, (val) => lodash_1.default.isString(val) ? encodeURIComponent(val) : val);\n            return utils_1.default.interpolate(string, evalContext, options);\n        }\n        return utils_1.default.interpolate(string, this.evalContext(data), options);\n    }\n    /**\n     * Performs an evaluation using the evaluation context of this component.\n     * @param {string|Function|object} func - The function or string to evaluate.\n     * @param {object} args - The arguments to pass to the evaluation.\n     * @param {string} ret - The name of the variable within the evaluation context to return.\n     * @param {boolean} interpolate - Determines if it should replace all {{ }} token references with actual data.\n     * @param {import('@formio/core').EvaluatorOptions} options - The options to pass to the evaluation.\n     * @returns {*} - The result of the evaluation.\n     */\n    evaluate(func, args, ret, interpolate, options = {}) {\n        return utils_1.default.evaluate(func, this.evalContext(args), ret, interpolate, options);\n    }\n    /**\n     * Allow for options to hook into the functionality of this renderer.\n     * @returns {*} - The result of the hook function.\n     */\n    hook() {\n        const name = arguments[0];\n        if (this.options && this.options.hooks && this.options.hooks[name]) {\n            return this.options.hooks[name].apply(this, Array.prototype.slice.call(arguments, 1));\n        }\n        else {\n            // If this is an async hook instead of a sync.\n            const fn = typeof arguments[arguments.length - 1] === 'function'\n                ? arguments[arguments.length - 1]\n                : null;\n            if (fn) {\n                return fn(null, arguments[1]);\n            }\n            else {\n                return arguments[1];\n            }\n        }\n    }\n}\nexports[\"default\"] = Element;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Element.js?\n}");
 
 /***/ }),
 
@@ -7640,7 +7640,7 @@ eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod)
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("{\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};\nvar _a;\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.FormBuilder = exports.Form = exports.Formio = void 0;\nconst CDN_js_1 = __importDefault(__webpack_require__(/*! ./CDN.js */ \"./lib/cjs/CDN.js\"));\nclass Formio {\n    static setLicense(license, norecurse = false) {\n        _a.license = license;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setLicense(license);\n        }\n    }\n    static setBaseUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setBaseUrl(url);\n        }\n    }\n    static setApiUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setApiUrl(url);\n        }\n    }\n    static setProjectUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setProjectUrl(url);\n        }\n    }\n    static setAppUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setAppUrl(url);\n        }\n    }\n    static setPathType(type, norecurse = false) {\n        _a.pathType = type;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setPathType(type);\n        }\n    }\n    static debug(...args) {\n        if (_a.config.debug) {\n            console.log(...args);\n        }\n    }\n    static clearCache() {\n        if (_a.FormioClass) {\n            _a.FormioClass.clearCache();\n        }\n    }\n    static global(prop, flag = '') {\n        const globalValue = window[prop];\n        if (flag && globalValue && !globalValue[flag]) {\n            return null;\n        }\n        _a.debug(`Getting global ${prop}`, globalValue);\n        return globalValue;\n    }\n    static use(module) {\n        if (_a.FormioClass && _a.FormioClass.isRenderer) {\n            _a.FormioClass.use(module);\n        }\n        else {\n            _a.modules.push(module);\n        }\n    }\n    static createElement(type, attrs, children) {\n        const element = document.createElement(type);\n        if (!attrs) {\n            return element;\n        }\n        Object.keys(attrs).forEach((key) => {\n            element.setAttribute(key, attrs[key]);\n        });\n        (children || []).forEach((child) => {\n            element.appendChild(_a.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    static addScript(wrapper, src, name, flag = '') {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!src) {\n                return Promise.resolve();\n            }\n            if (typeof src !== 'string' && src.length) {\n                return Promise.all(src.map((ref) => _a.addScript(wrapper, ref)));\n            }\n            if (name && _a.global(name, flag)) {\n                _a.debug(`${name} already loaded.`);\n                return Promise.resolve(_a.global(name));\n            }\n            _a.debug('Adding Script', src);\n            try {\n                wrapper.appendChild(_a.createElement('script', {\n                    src,\n                }));\n            }\n            catch (err) {\n                _a.debug(err);\n                return Promise.resolve();\n            }\n            if (!name) {\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                _a.debug(`Waiting to load ${name}`);\n                const wait = setInterval(() => {\n                    if (_a.global(name, flag)) {\n                        clearInterval(wait);\n                        _a.debug(`${name} loaded.`);\n                        resolve(_a.global(name));\n                    }\n                }, 100);\n            });\n        });\n    }\n    static addStyles(wrapper, href) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!href) {\n                return;\n            }\n            if (typeof href !== 'string' && href.length) {\n                href.forEach((ref) => _a.addStyles(wrapper, ref));\n                return;\n            }\n            _a.debug('Adding Styles', href);\n            wrapper.appendChild(_a.createElement('link', {\n                rel: 'stylesheet',\n                href,\n            }));\n        });\n    }\n    static submitDone(instance, submission) {\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.debug('Submision Complete', submission);\n            if (_a.config.submitDone) {\n                _a.config.submitDone(submission, instance);\n            }\n            const successMessage = (_a.config.success || '').toString();\n            if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {\n                instance.element.innerHTML = `<div class=\"alert-success\" role=\"alert\">${successMessage}</div>`;\n            }\n            const announcementMessage = successMessage && successMessage.toLowerCase() !== 'false'\n                ? successMessage\n                : 'Form submission complete';\n            let liveRegion = document.getElementById('formio-announcements');\n            if (!liveRegion) {\n                liveRegion = _a.createElement('div', {\n                    id: 'formio-announcements',\n                    role: 'status',\n                    'aria-live': 'polite',\n                    'aria-atomic': 'true',\n                    style: 'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);',\n                });\n                document.body.appendChild(liveRegion);\n            }\n            // Announce the submission completion using VPAT clear-and-reset technique\n            liveRegion.textContent = '';\n            liveRegion.setAttribute('aria-live', 'off');\n            requestAnimationFrame(() => {\n                setTimeout(() => {\n                    liveRegion.setAttribute('aria-live', 'polite');\n                    liveRegion.textContent = announcementMessage;\n                    setTimeout(() => {\n                        if (liveRegion) {\n                            liveRegion.textContent = '';\n                        }\n                    }, 1000);\n                }, 100);\n            });\n            let returnUrl = _a.config.redirect;\n            // Allow form based configuration for return url.\n            if (!returnUrl &&\n                instance._form &&\n                instance._form.settings &&\n                (instance._form.settings.returnUrl || instance._form.settings.redirect)) {\n                _a.debug('Return url found in form configuration');\n                returnUrl = instance._form.settings.returnUrl || instance._form.settings.redirect;\n            }\n            if (returnUrl) {\n                const formSrc = instance.formio ? instance.formio.formUrl : '';\n                const hasQuery = !!returnUrl.match(/\\?/);\n                const isOrigin = returnUrl.indexOf(location.origin) === 0;\n                returnUrl += hasQuery ? '&' : '?';\n                returnUrl += `sub=${submission._id}`;\n                if (!isOrigin && formSrc) {\n                    returnUrl += `&form=${encodeURIComponent(formSrc)}`;\n                }\n                _a.debug('Return URL', returnUrl);\n                window.location.href = returnUrl;\n                if (isOrigin) {\n                    window.location.reload();\n                }\n            }\n        });\n    }\n    // Return the full script if the builder is being used.\n    static formioScript(script, builder) {\n        builder = builder || _a.config.includeBuilder;\n        if (_a.fullAdded || builder) {\n            _a.fullAdded = true;\n            return script.replace('formio.form', 'formio.full');\n        }\n        return script;\n    }\n    static addLibrary(libWrapper, lib, name) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!lib) {\n                return;\n            }\n            if (lib.dependencies) {\n                for (let i = 0; i < lib.dependencies.length; i++) {\n                    const libName = lib.dependencies[i];\n                    yield _a.addLibrary(libWrapper, _a.config.libs[libName], libName);\n                }\n            }\n            if (lib.css) {\n                yield _a.addStyles(lib.global ? document.body : libWrapper, lib.css);\n            }\n            if (lib.js) {\n                const module = yield _a.addScript(lib.global ? document.body : libWrapper, lib.js, lib.use ? name : false);\n                if (lib.use) {\n                    _a.debug(`Using ${name}`);\n                    const options = lib.options || {};\n                    if (!options.license && _a.license) {\n                        options.license = _a.license;\n                    }\n                    _a.use(typeof lib.use === 'function' ? lib.use(module) : module, options);\n                }\n            }\n            if (lib.globalStyle) {\n                const style = _a.createElement('style');\n                style.type = 'text/css';\n                style.innerHTML = lib.globalStyle;\n                document.body.appendChild(style);\n            }\n        });\n    }\n    static addLoader(wrapper) {\n        return __awaiter(this, void 0, void 0, function* () {\n            wrapper.appendChild(_a.createElement('div', {\n                class: 'formio-loader',\n            }, [\n                {\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper',\n                    },\n                    children: [\n                        {\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center',\n                            },\n                        },\n                    ],\n                },\n            ]));\n        });\n    }\n    static init(element, options = {}, builder = false) {\n        var _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.cdn = new CDN_js_1.default(_a.config.cdn, _a.config.cdnUrls || {});\n            _a.config.libs = _a.config.libs || {\n                uswds: {\n                    dependencies: ['fontawesome'],\n                    js: `${_a.cdn.uswds}/uswds.min.js`,\n                    css: `${_a.cdn.uswds}/uswds.min.css`,\n                    use: true,\n                },\n                fontawesome: {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,\n                    globalStyle: `@font-face {\n                    font-family: 'FontAwesome';\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');\n                    font-weight: normal;\n                    font-style: normal;\n                  }`,\n                },\n                bootstrap4: {\n                    dependencies: ['fontawesome'],\n                    css: `${_a.cdn.bootstrap4}/css/bootstrap.min.css`,\n                },\n                bootstrap: {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootstrap}/css/bootstrap.min.css`,\n                },\n                'bootstrap-icons': {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',\n                    globalStyle: `@font-face {\n                    font-display: block;\n                    font-family: \"bootstrap-icons\";\n                    src: url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6\") format(\"woff2\"),\n                         url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6\") format(\"woff\");\n                }`,\n                },\n            };\n            // Add all bootswatch templates.\n            [\n                'cerulean',\n                'cosmo',\n                'cyborg',\n                'darkly',\n                'flatly',\n                'journal',\n                'litera',\n                'lumen',\n                'lux',\n                'materia',\n                'minty',\n                'pulse',\n                'sandstone',\n                'simplex',\n                'sketchy',\n                'slate',\n                'solar',\n                'spacelab',\n                'superhero',\n                'united',\n                'yeti',\n            ].forEach((template) => {\n                _a.config.libs[template] = {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootswatch}/dist/${template}/bootstrap.min.css`,\n                };\n            });\n            const id = _a.config.id || `formio-${Math.random().toString(36).substring(7)}`;\n            const hasQuillComponent = (components = []) => {\n                if (!Array.isArray(components)) {\n                    return false;\n                }\n                return components.some((component) => {\n                    var _b, _c;\n                    if (!component || typeof component !== 'object') {\n                        return false;\n                    }\n                    const isQuillTextarea = component.type === 'textarea' &&\n                        component.wysiwyg === true &&\n                        component.editor === 'quill';\n                    return (isQuillTextarea ||\n                        hasQuillComponent(component.components) ||\n                        hasQuillComponent((_b = component.columns) === null || _b === void 0 ? void 0 : _b.flatMap((column) => column.components || [])) ||\n                        hasQuillComponent((_c = component.rows) === null || _c === void 0 ? void 0 : _c.flatMap((row) => row.flatMap((cell) => cell.components || []))));\n                });\n            };\n            const disableShadowForQuill = hasQuillComponent((_b = _a.config.form) === null || _b === void 0 ? void 0 : _b.components);\n            // Create a new wrapper and add the element inside of a new wrapper.\n            let wrapper = _a.createElement('div', {\n                id: `${id}-wrapper`,\n            });\n            element.parentNode.insertBefore(wrapper, element);\n            // If we include the libraries, then we will attempt to run this in shadow dom.\n            const useShadowDom = _a.config.includeLibs &&\n                !_a.config.noshadow &&\n                !disableShadowForQuill &&\n                typeof wrapper.attachShadow === 'function';\n            if (useShadowDom) {\n                wrapper = wrapper.attachShadow({\n                    mode: 'open',\n                });\n                options.shadowRoot = wrapper;\n                // Due to an issue with quill not loading styles in the shadowdom, we need to add quill styles and js to the shadowdom\n                const quill = {\n                    js: `${_a.cdn.quill}/quill.js`,\n                    css: `${_a.cdn.quill}/quill.snow.css`,\n                };\n                yield _a.addLibrary(wrapper, quill, 'quill');\n            }\n            element.parentNode.removeChild(element);\n            wrapper.appendChild(element);\n            // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.\n            const libWrapper = useShadowDom ? wrapper : document.body;\n            // Load the renderer styles.\n            yield _a.addStyles(libWrapper, _a.config.embedCSS || `${_a.cdn.js}/formio.embed.css`);\n            // Add a loader.\n            _a.addLoader(wrapper);\n            const formioSrc = _a.config.full ? 'formio.full' : 'formio.form';\n            const renderer = _a.config.debug ? formioSrc : `${formioSrc}.min`;\n            _a.FormioClass = yield _a.addScript(libWrapper, _a.formioScript(_a.config.script || `${_a.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');\n            _a.FormioClass.cdn = _a.cdn;\n            _a.FormioClass.setBaseUrl(options.baseUrl || _a.baseUrl || _a.config.base);\n            _a.FormioClass.setProjectUrl(options.projectUrl || _a.projectUrl || _a.config.project);\n            _a.FormioClass.language = _a.language;\n            _a.setLicense(_a.license || _a.config.license || false);\n            _a.modules.forEach((module) => {\n                _a.FormioClass.use(module);\n            });\n            if (_a.icons) {\n                _a.FormioClass.icons = _a.icons;\n            }\n            if (_a.pathType) {\n                _a.FormioClass.setPathType(_a.pathType);\n            }\n            // Add libraries if they wish to include the libs.\n            if (_a.config.template && _a.config.includeLibs) {\n                yield _a.addLibrary(libWrapper, _a.config.libs[_a.config.template], _a.config.template);\n            }\n            if (!_a.config.libraries) {\n                _a.config.libraries = _a.config.modules || {};\n            }\n            // Adding premium if it is provided via the config.\n            if (_a.config.premium) {\n                _a.config.libraries.premium = _a.config.premium;\n            }\n            // Allow adding dynamic modules.\n            if (_a.config.libraries) {\n                for (const name in _a.config.libraries) {\n                    const lib = _a.config.libraries[name];\n                    lib.use = lib.use || true;\n                    yield _a.addLibrary(libWrapper, lib, name);\n                }\n            }\n            yield _a.addStyles(libWrapper, _a.formioScript(_a.config.style || `${_a.cdn.js}/${renderer}.css`, builder));\n            if (_a.config.before) {\n                yield _a.config.before(_a.FormioClass, element, _a.config);\n            }\n            _a.FormioClass.license = true;\n            _a._formioReady(_a.FormioClass);\n            return wrapper;\n        });\n    }\n    // Called after an instance has been created.\n    static afterCreate(instance, wrapper, readyEvent) {\n        var _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            const loader = wrapper.querySelector('.formio-loader');\n            if (loader) {\n                wrapper.removeChild(loader);\n            }\n            (_b = _a.FormioClass.events) === null || _b === void 0 ? void 0 : _b.emit(readyEvent, instance);\n            if (_a.config.after) {\n                _a.debug('Calling ready callback');\n                _a.config.after(instance, _a.config);\n            }\n            return instance;\n        });\n    }\n    // Create a new form.\n    static createForm(element, form, options = {}) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (_a.FormioClass) {\n                return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true }));\n            }\n            const wrapper = yield _a.init(element, options);\n            return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {\n                // Set the default submission data.\n                if (_a.config.submission) {\n                    _a.debug('Setting submission', _a.config.submission);\n                    instance.submission = _a.config.submission;\n                }\n                // Call the after create method.\n                _a.afterCreate(instance, wrapper, 'formEmbedded');\n                return instance;\n            });\n        });\n    }\n    // Create a form builder.\n    static builder(element, form, options = {}) {\n        var _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.builder) {\n                return _a.FormioClass.builder(element, form, options);\n            }\n            const wrapper = yield _a.init(element, options, true);\n            return _a.FormioClass.builder(element, form, options).then((instance) => {\n                _a.afterCreate(instance, wrapper, 'builderEmbedded');\n                return instance;\n            });\n        });\n    }\n}\nexports.Formio = Formio;\n_a = Formio;\nFormio.FormioClass = null;\nFormio.config = {};\nFormio.modules = [];\nFormio.icons = '';\nFormio.license = '';\nFormio.formioReady = new Promise((ready, reject) => {\n    _a._formioReady = ready;\n    _a._formioReadyReject = reject;\n});\nFormio.version = '5.4.2';\n// Create a report.\nFormio.Report = {\n    create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {\n        var _b;\n        if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.Report) {\n            return _a.FormioClass.Report.create(element, submission, options);\n        }\n        const wrapper = yield _a.init(element, options, true);\n        return _a.FormioClass.Report.create(element, submission, options).then((instance) => {\n            _a.afterCreate(instance, wrapper, 'reportEmbedded');\n            return instance;\n        });\n    }),\n};\nCDN_js_1.default.defaultCDN = Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nclass Form {\n    constructor(element, form, options) {\n        this.form = form;\n        this.element = element;\n        this.options = options || {};\n        this.init();\n        this.instance = {\n            proxy: true,\n            ready: this.ready,\n            destroy: () => { },\n        };\n    }\n    init() {\n        if (this.instance && !this.instance.proxy) {\n            this.instance.destroy();\n        }\n        this.element.innerHTML = '';\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.form = instance.form;\n            return instance;\n        });\n    }\n    create() {\n        return Formio.createForm(this.element, this.form, this.options);\n    }\n    setForm(form) {\n        this.form = form;\n        if (this.instance) {\n            this.instance.setForm(form);\n        }\n    }\n    setDisplay(display) {\n        if (this.instance.proxy) {\n            return this.ready;\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.setForm(this.form);\n        });\n        return this.ready;\n    }\n}\nexports.Form = Form;\nclass FormBuilder extends Form {\n    create() {\n        return Formio.builder(this.element, this.form, this.options);\n    }\n}\nexports.FormBuilder = FormBuilder;\nFormio.Form = Form;\nFormio.FormBuilder = FormBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Embed.js?\n}");
+eval("{\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};\nvar _a;\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.FormBuilder = exports.Form = exports.Formio = void 0;\nconst CDN_js_1 = __importDefault(__webpack_require__(/*! ./CDN.js */ \"./lib/cjs/CDN.js\"));\nclass Formio {\n    static setLicense(license, norecurse = false) {\n        _a.license = license;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setLicense(license);\n        }\n    }\n    static setBaseUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setBaseUrl(url);\n        }\n    }\n    static setApiUrl(url, norecurse = false) {\n        _a.baseUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setApiUrl(url);\n        }\n    }\n    static setProjectUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setProjectUrl(url);\n        }\n    }\n    static setAppUrl(url, norecurse = false) {\n        _a.projectUrl = url;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setAppUrl(url);\n        }\n    }\n    static setPathType(type, norecurse = false) {\n        _a.pathType = type;\n        if (!norecurse && _a.FormioClass) {\n            _a.FormioClass.setPathType(type);\n        }\n    }\n    static debug(...args) {\n        if (_a.config.debug) {\n            console.log(...args);\n        }\n    }\n    static clearCache() {\n        if (_a.FormioClass) {\n            _a.FormioClass.clearCache();\n        }\n    }\n    static global(prop, flag = '') {\n        const globalValue = window[prop];\n        if (flag && globalValue && !globalValue[flag]) {\n            return null;\n        }\n        _a.debug(`Getting global ${prop}`, globalValue);\n        return globalValue;\n    }\n    static use(module) {\n        if (_a.FormioClass && _a.FormioClass.isRenderer) {\n            _a.FormioClass.use(module);\n        }\n        else {\n            _a.modules.push(module);\n        }\n    }\n    static createElement(type, attrs, children) {\n        const element = document.createElement(type);\n        if (!attrs) {\n            return element;\n        }\n        Object.keys(attrs).forEach((key) => {\n            element.setAttribute(key, attrs[key]);\n        });\n        (children || []).forEach((child) => {\n            element.appendChild(_a.createElement(child.tag, child.attrs, child.children));\n        });\n        return element;\n    }\n    static addScript(wrapper, src, name, flag = '') {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!src) {\n                return Promise.resolve();\n            }\n            if (typeof src !== 'string' && src.length) {\n                return Promise.all(src.map((ref) => _a.addScript(wrapper, ref)));\n            }\n            if (name && _a.global(name, flag)) {\n                _a.debug(`${name} already loaded.`);\n                return Promise.resolve(_a.global(name));\n            }\n            _a.debug('Adding Script', src);\n            try {\n                wrapper.appendChild(_a.createElement('script', {\n                    src,\n                }));\n            }\n            catch (err) {\n                _a.debug(err);\n                return Promise.resolve();\n            }\n            if (!name) {\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                _a.debug(`Waiting to load ${name}`);\n                const wait = setInterval(() => {\n                    if (_a.global(name, flag)) {\n                        clearInterval(wait);\n                        _a.debug(`${name} loaded.`);\n                        resolve(_a.global(name));\n                    }\n                }, 100);\n            });\n        });\n    }\n    static addStyles(wrapper, href) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!href) {\n                return;\n            }\n            if (typeof href !== 'string' && href.length) {\n                href.forEach((ref) => _a.addStyles(wrapper, ref));\n                return;\n            }\n            _a.debug('Adding Styles', href);\n            wrapper.appendChild(_a.createElement('link', {\n                rel: 'stylesheet',\n                href,\n            }));\n        });\n    }\n    static submitDone(instance, submission) {\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.debug('Submision Complete', submission);\n            if (_a.config.submitDone) {\n                _a.config.submitDone(submission, instance);\n            }\n            const successMessage = (_a.config.success || '').toString();\n            if (successMessage && successMessage.toLowerCase() !== 'false' && instance.element) {\n                instance.element.innerHTML = `<div class=\"alert-success\" role=\"alert\">${successMessage}</div>`;\n            }\n            const announcementMessage = successMessage && successMessage.toLowerCase() !== 'false'\n                ? successMessage\n                : 'Form submission complete';\n            let liveRegion = document.getElementById('formio-announcements');\n            if (!liveRegion) {\n                liveRegion = _a.createElement('div', {\n                    id: 'formio-announcements',\n                    role: 'status',\n                    'aria-live': 'polite',\n                    'aria-atomic': 'true',\n                    style: 'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);',\n                });\n                document.body.appendChild(liveRegion);\n            }\n            // Announce the submission completion using VPAT clear-and-reset technique\n            liveRegion.textContent = '';\n            liveRegion.setAttribute('aria-live', 'off');\n            requestAnimationFrame(() => {\n                setTimeout(() => {\n                    liveRegion.setAttribute('aria-live', 'polite');\n                    liveRegion.textContent = announcementMessage;\n                    setTimeout(() => {\n                        if (liveRegion) {\n                            liveRegion.textContent = '';\n                        }\n                    }, 1000);\n                }, 100);\n            });\n            let returnUrl = _a.config.redirect;\n            // Allow form based configuration for return url.\n            if (!returnUrl &&\n                instance._form &&\n                instance._form.settings &&\n                (instance._form.settings.returnUrl || instance._form.settings.redirect)) {\n                _a.debug('Return url found in form configuration');\n                returnUrl = instance._form.settings.returnUrl || instance._form.settings.redirect;\n            }\n            if (returnUrl) {\n                const formSrc = instance.formio ? instance.formio.formUrl : '';\n                const hasQuery = !!returnUrl.match(/\\?/);\n                const isOrigin = returnUrl.indexOf(location.origin) === 0;\n                returnUrl += hasQuery ? '&' : '?';\n                returnUrl += `sub=${submission._id}`;\n                if (!isOrigin && formSrc) {\n                    returnUrl += `&form=${encodeURIComponent(formSrc)}`;\n                }\n                _a.debug('Return URL', returnUrl);\n                window.location.href = returnUrl;\n                if (isOrigin) {\n                    window.location.reload();\n                }\n            }\n        });\n    }\n    // Return the full script if the builder is being used.\n    static formioScript(script, builder) {\n        builder = builder || _a.config.includeBuilder;\n        if (_a.fullAdded || builder) {\n            _a.fullAdded = true;\n            return script.replace('formio.form', 'formio.full');\n        }\n        return script;\n    }\n    static addLibrary(libWrapper, lib, name) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!lib) {\n                return;\n            }\n            if (lib.dependencies) {\n                for (let i = 0; i < lib.dependencies.length; i++) {\n                    const libName = lib.dependencies[i];\n                    yield _a.addLibrary(libWrapper, _a.config.libs[libName], libName);\n                }\n            }\n            if (lib.css) {\n                yield _a.addStyles(lib.global ? document.body : libWrapper, lib.css);\n            }\n            if (lib.js) {\n                const module = yield _a.addScript(lib.global ? document.body : libWrapper, lib.js, lib.use ? name : false);\n                if (lib.use) {\n                    _a.debug(`Using ${name}`);\n                    const options = lib.options || {};\n                    if (!options.license && _a.license) {\n                        options.license = _a.license;\n                    }\n                    _a.use(typeof lib.use === 'function' ? lib.use(module) : module, options);\n                }\n            }\n            if (lib.globalStyle) {\n                const style = _a.createElement('style');\n                style.type = 'text/css';\n                style.innerHTML = lib.globalStyle;\n                document.body.appendChild(style);\n            }\n        });\n    }\n    static addLoader(wrapper) {\n        return __awaiter(this, void 0, void 0, function* () {\n            wrapper.appendChild(_a.createElement('div', {\n                class: 'formio-loader',\n            }, [\n                {\n                    tag: 'div',\n                    attrs: {\n                        class: 'loader-wrapper',\n                    },\n                    children: [\n                        {\n                            tag: 'div',\n                            attrs: {\n                                class: 'loader text-center',\n                            },\n                        },\n                    ],\n                },\n            ]));\n        });\n    }\n    static init(element, options = {}, builder = false) {\n        var _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            _a.cdn = new CDN_js_1.default(_a.config.cdn, _a.config.cdnUrls || {});\n            _a.config.libs = _a.config.libs || {\n                uswds: {\n                    dependencies: ['fontawesome'],\n                    js: `${_a.cdn.uswds}/uswds.min.js`,\n                    css: `${_a.cdn.uswds}/uswds.min.css`,\n                    use: true,\n                },\n                fontawesome: {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: `https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css`,\n                    globalStyle: `@font-face {\n                    font-family: 'FontAwesome';\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');\n                    src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');\n                    font-weight: normal;\n                    font-style: normal;\n                  }`,\n                },\n                bootstrap4: {\n                    dependencies: ['fontawesome'],\n                    css: `${_a.cdn.bootstrap4}/css/bootstrap.min.css`,\n                },\n                bootstrap: {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootstrap}/css/bootstrap.min.css`,\n                },\n                'bootstrap-icons': {\n                    // Due to an issue with font-face not loading in the shadowdom (https://issues.chromium.org/issues/41085401), we need\n                    // to do 2 things. 1.) Load the fonts from the global cdn, and 2.) add the font-face to the global styles on the page.\n                    css: 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css',\n                    globalStyle: `@font-face {\n                    font-display: block;\n                    font-family: \"bootstrap-icons\";\n                    src: url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6\") format(\"woff2\"),\n                         url(\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6\") format(\"woff\");\n                }`,\n                },\n            };\n            // Add all bootswatch templates.\n            [\n                'cerulean',\n                'cosmo',\n                'cyborg',\n                'darkly',\n                'flatly',\n                'journal',\n                'litera',\n                'lumen',\n                'lux',\n                'materia',\n                'minty',\n                'pulse',\n                'sandstone',\n                'simplex',\n                'sketchy',\n                'slate',\n                'solar',\n                'spacelab',\n                'superhero',\n                'united',\n                'yeti',\n            ].forEach((template) => {\n                _a.config.libs[template] = {\n                    dependencies: ['bootstrap-icons'],\n                    css: `${_a.cdn.bootswatch}/dist/${template}/bootstrap.min.css`,\n                };\n            });\n            const id = _a.config.id || `formio-${Math.random().toString(36).substring(7)}`;\n            const hasQuillComponent = (components = []) => {\n                if (!Array.isArray(components)) {\n                    return false;\n                }\n                return components.some((component) => {\n                    var _b, _c;\n                    if (!component || typeof component !== 'object') {\n                        return false;\n                    }\n                    const isQuillTextarea = component.type === 'textarea' &&\n                        component.wysiwyg === true &&\n                        component.editor === 'quill';\n                    return (isQuillTextarea ||\n                        hasQuillComponent(component.components) ||\n                        hasQuillComponent((_b = component.columns) === null || _b === void 0 ? void 0 : _b.flatMap((column) => column.components || [])) ||\n                        hasQuillComponent((_c = component.rows) === null || _c === void 0 ? void 0 : _c.flatMap((row) => row.flatMap((cell) => cell.components || []))));\n                });\n            };\n            const disableShadowForQuill = hasQuillComponent((_b = _a.config.form) === null || _b === void 0 ? void 0 : _b.components);\n            // Create a new wrapper and add the element inside of a new wrapper.\n            let wrapper = _a.createElement('div', {\n                id: `${id}-wrapper`,\n            });\n            element.parentNode.insertBefore(wrapper, element);\n            // If we include the libraries, then we will attempt to run this in shadow dom.\n            const useShadowDom = _a.config.includeLibs &&\n                !_a.config.noshadow &&\n                !disableShadowForQuill &&\n                typeof wrapper.attachShadow === 'function';\n            if (useShadowDom) {\n                wrapper = wrapper.attachShadow({\n                    mode: 'open',\n                });\n                options.shadowRoot = wrapper;\n                // Due to an issue with quill not loading styles in the shadowdom, we need to add quill styles and js to the shadowdom\n                const quill = {\n                    js: `${_a.cdn.quill}/quill.js`,\n                    css: `${_a.cdn.quill}/quill.snow.css`,\n                };\n                yield _a.addLibrary(wrapper, quill, 'quill');\n            }\n            element.parentNode.removeChild(element);\n            wrapper.appendChild(element);\n            // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.\n            const libWrapper = useShadowDom ? wrapper : document.body;\n            // Load the renderer styles.\n            yield _a.addStyles(libWrapper, _a.config.embedCSS || `${_a.cdn.js}/formio.embed.css`);\n            // Add a loader.\n            _a.addLoader(wrapper);\n            const formioSrc = _a.config.full ? 'formio.full' : 'formio.form';\n            const renderer = _a.config.debug ? formioSrc : `${formioSrc}.min`;\n            _a.FormioClass = yield _a.addScript(libWrapper, _a.formioScript(_a.config.script || `${_a.cdn.js}/${renderer}.js`, builder), 'Formio', builder ? 'isBuilder' : 'isRenderer');\n            _a.FormioClass.cdn = _a.cdn;\n            _a.FormioClass.setBaseUrl(options.baseUrl || _a.baseUrl || _a.config.base);\n            _a.FormioClass.setProjectUrl(options.projectUrl || _a.projectUrl || _a.config.project);\n            _a.FormioClass.language = _a.language;\n            _a.setLicense(_a.license || _a.config.license || false);\n            _a.modules.forEach((module) => {\n                _a.FormioClass.use(module);\n            });\n            if (_a.icons) {\n                _a.FormioClass.icons = _a.icons;\n            }\n            if (_a.pathType) {\n                _a.FormioClass.setPathType(_a.pathType);\n            }\n            // Add libraries if they wish to include the libs.\n            if (_a.config.template && _a.config.includeLibs) {\n                yield _a.addLibrary(libWrapper, _a.config.libs[_a.config.template], _a.config.template);\n            }\n            if (!_a.config.libraries) {\n                _a.config.libraries = _a.config.modules || {};\n            }\n            // Adding premium if it is provided via the config.\n            if (_a.config.premium) {\n                _a.config.libraries.premium = _a.config.premium;\n            }\n            // Allow adding dynamic modules.\n            if (_a.config.libraries) {\n                for (const name in _a.config.libraries) {\n                    const lib = _a.config.libraries[name];\n                    lib.use = lib.use || true;\n                    yield _a.addLibrary(libWrapper, lib, name);\n                }\n            }\n            yield _a.addStyles(libWrapper, _a.formioScript(_a.config.style || `${_a.cdn.js}/${renderer}.css`, builder));\n            if (_a.config.before) {\n                yield _a.config.before(_a.FormioClass, element, _a.config);\n            }\n            _a.FormioClass.license = true;\n            _a._formioReady(_a.FormioClass);\n            return wrapper;\n        });\n    }\n    // Called after an instance has been created.\n    static afterCreate(instance, wrapper, readyEvent) {\n        var _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            const loader = wrapper.querySelector('.formio-loader');\n            if (loader) {\n                wrapper.removeChild(loader);\n            }\n            (_b = _a.FormioClass.events) === null || _b === void 0 ? void 0 : _b.emit(readyEvent, instance);\n            if (_a.config.after) {\n                _a.debug('Calling ready callback');\n                _a.config.after(instance, _a.config);\n            }\n            return instance;\n        });\n    }\n    // Create a new form.\n    static createForm(element, form, options = {}) {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (_a.FormioClass) {\n                return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true }));\n            }\n            const wrapper = yield _a.init(element, options);\n            return _a.FormioClass.createForm(element, form, Object.assign(Object.assign({}, options), { noLoader: true })).then((instance) => {\n                // Set the default submission data.\n                if (_a.config.submission) {\n                    _a.debug('Setting submission', _a.config.submission);\n                    instance.submission = _a.config.submission;\n                }\n                // Call the after create method.\n                _a.afterCreate(instance, wrapper, 'formEmbedded');\n                return instance;\n            });\n        });\n    }\n    // Create a form builder.\n    static builder(element, form, options = {}) {\n        var _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.builder) {\n                return _a.FormioClass.builder(element, form, options);\n            }\n            const wrapper = yield _a.init(element, options, true);\n            return _a.FormioClass.builder(element, form, options).then((instance) => {\n                _a.afterCreate(instance, wrapper, 'builderEmbedded');\n                return instance;\n            });\n        });\n    }\n}\nexports.Formio = Formio;\n_a = Formio;\nFormio.FormioClass = null;\nFormio.config = {};\nFormio.modules = [];\nFormio.icons = '';\nFormio.license = '';\nFormio.formioReady = new Promise((ready, reject) => {\n    _a._formioReady = ready;\n    _a._formioReadyReject = reject;\n});\nFormio.version = '5.4.4-api99.0';\n// Create a report.\nFormio.Report = {\n    create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {\n        var _b;\n        if ((_b = _a.FormioClass) === null || _b === void 0 ? void 0 : _b.Report) {\n            return _a.FormioClass.Report.create(element, submission, options);\n        }\n        const wrapper = yield _a.init(element, options, true);\n        return _a.FormioClass.Report.create(element, submission, options).then((instance) => {\n            _a.afterCreate(instance, wrapper, 'reportEmbedded');\n            return instance;\n        });\n    }),\n};\nCDN_js_1.default.defaultCDN = Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';\nclass Form {\n    constructor(element, form, options) {\n        this.form = form;\n        this.element = element;\n        this.options = options || {};\n        this.init();\n        this.instance = {\n            proxy: true,\n            ready: this.ready,\n            destroy: () => { },\n        };\n    }\n    init() {\n        if (this.instance && !this.instance.proxy) {\n            this.instance.destroy();\n        }\n        this.element.innerHTML = '';\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.form = instance.form;\n            return instance;\n        });\n    }\n    create() {\n        return Formio.createForm(this.element, this.form, this.options);\n    }\n    setForm(form) {\n        this.form = form;\n        if (this.instance) {\n            this.instance.setForm(form);\n        }\n    }\n    setDisplay(display) {\n        if (this.instance.proxy) {\n            return this.ready;\n        }\n        this.form.display = display;\n        this.instance.destroy();\n        this.ready = this.create().then((instance) => {\n            this.instance = instance;\n            this.setForm(this.form);\n        });\n        return this.ready;\n    }\n}\nexports.Form = Form;\nclass FormBuilder extends Form {\n    create() {\n        return Formio.builder(this.element, this.form, this.options);\n    }\n}\nexports.FormBuilder = FormBuilder;\nFormio.Form = Form;\nFormio.FormBuilder = FormBuilder;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Embed.js?\n}");
 
 /***/ }),
 
@@ -7673,7 +7673,7 @@ eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod)
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Formio = void 0;\nconst sdk_1 = __webpack_require__(/*! @formio/core/sdk */ \"../core/lib/sdk/index.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return sdk_1.Formio; } }));\nconst Embed_1 = __webpack_require__(/*! ./Embed */ \"./lib/cjs/Embed.js\");\nconst CDN_1 = __importDefault(__webpack_require__(/*! ./CDN */ \"./lib/cjs/CDN.js\"));\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nsdk_1.Formio.cdn = new CDN_1.default();\nsdk_1.Formio.Providers = providers_1.default;\nsdk_1.Formio.version = '5.4.2';\nCDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc')\n    ? 'https://cdn.test-form.io'\n    : 'https://cdn.form.io';\nconst isNil = (val) => val === null || val === undefined;\nsdk_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {\n    const requestArgs = {\n        provider: storage,\n        method: 'upload',\n        file: file,\n        fileName: fileName,\n        dir: dir,\n    };\n    fileKey = fileKey || 'file';\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs).then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs).then((result) => {\n            if (storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    if (uploadStartCallback) {\n                        uploadStartCallback();\n                    }\n                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions);\n                }\n                else {\n                    throw 'Storage provider not found';\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.downloadFile = function (file, options) {\n    const requestArgs = {\n        method: 'download',\n        file: file,\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs).then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs).then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.downloadFile(file, options);\n                }\n                else {\n                    throw 'Storage provider not found';\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.deleteFile = function (file, options) {\n    const requestArgs = {\n        method: 'delete',\n        file: file,\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs).then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs).then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.deleteFile(file, options);\n                }\n                else {\n                    throw 'Storage provider not found';\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\n// Esnure we proxy the following methods to the FormioEmbed class.\n['setBaseUrl', 'setApiUrl', 'setAppUrl', 'setProjectUrl', 'setPathType', 'setLicense'].forEach((fn) => {\n    const baseFn = sdk_1.Formio[fn];\n    sdk_1.Formio[fn] = function (arg) {\n        const retVal = Embed_1.Formio[fn](arg, true);\n        return baseFn ? baseFn.call(this, arg) : retVal;\n    };\n});\n// For reverse compatability.\nsdk_1.Formio.Promise = Promise;\nsdk_1.Formio.formioReady = Embed_1.Formio.formioReady;\nsdk_1.Formio.config = Embed_1.Formio.config;\nsdk_1.Formio.builder = Embed_1.Formio.builder;\nsdk_1.Formio.Report = Embed_1.Formio.Report;\nsdk_1.Formio.Form = Embed_1.Formio.Form;\nsdk_1.Formio.FormBuilder = Embed_1.Formio.FormBuilder;\nsdk_1.Formio.use = Embed_1.Formio.use;\nsdk_1.Formio.createForm = Embed_1.Formio.createForm;\nsdk_1.Formio.submitDone = Embed_1.Formio.submitDone;\nsdk_1.Formio.addLibrary = Embed_1.Formio.addLibrary;\nsdk_1.Formio.addLoader = Embed_1.Formio.addLoader;\nsdk_1.Formio.addToGlobal = (global) => {\n    if (typeof global === 'object' && !global.Formio) {\n        global.Formio = sdk_1.Formio;\n    }\n};\nif (typeof globalThis !== 'undefined') {\n    sdk_1.Formio.addToGlobal(globalThis);\n}\nif (typeof window !== 'undefined') {\n    sdk_1.Formio.addToGlobal(window);\n}\nEmbed_1.Formio._formioReady(sdk_1.Formio);\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Formio.js?\n}");
+eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Formio = void 0;\nconst sdk_1 = __webpack_require__(/*! @formio/core/sdk */ \"../core/lib/sdk/index.js\");\nObject.defineProperty(exports, \"Formio\", ({ enumerable: true, get: function () { return sdk_1.Formio; } }));\nconst Embed_1 = __webpack_require__(/*! ./Embed */ \"./lib/cjs/Embed.js\");\nconst CDN_1 = __importDefault(__webpack_require__(/*! ./CDN */ \"./lib/cjs/CDN.js\"));\nconst providers_1 = __importDefault(__webpack_require__(/*! ./providers */ \"./lib/cjs/providers/index.js\"));\nsdk_1.Formio.cdn = new CDN_1.default();\nsdk_1.Formio.Providers = providers_1.default;\nsdk_1.Formio.version = '5.4.4-api99.0';\nCDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc')\n    ? 'https://cdn.test-form.io'\n    : 'https://cdn.form.io';\nconst isNil = (val) => val === null || val === undefined;\nsdk_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {\n    const requestArgs = {\n        provider: storage,\n        method: 'upload',\n        file: file,\n        fileName: fileName,\n        dir: dir,\n    };\n    fileKey = fileKey || 'file';\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs).then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs).then((result) => {\n            if (storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    if (uploadStartCallback) {\n                        uploadStartCallback();\n                    }\n                    return provider.uploadFile(file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback, multipartOptions);\n                }\n                else {\n                    throw 'Storage provider not found';\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.downloadFile = function (file, options) {\n    const requestArgs = {\n        method: 'download',\n        file: file,\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs).then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs).then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.downloadFile(file, options);\n                }\n                else {\n                    throw 'Storage provider not found';\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\nsdk_1.Formio.prototype.deleteFile = function (file, options) {\n    const requestArgs = {\n        method: 'delete',\n        file: file,\n    };\n    const request = sdk_1.Formio.pluginWait('preRequest', requestArgs).then(() => {\n        return sdk_1.Formio.pluginGet('fileRequest', requestArgs).then((result) => {\n            if (file.storage && isNil(result)) {\n                const Provider = providers_1.default.getProvider('storage', file.storage);\n                if (Provider) {\n                    const provider = new Provider(this);\n                    return provider.deleteFile(file, options);\n                }\n                else {\n                    throw 'Storage provider not found';\n                }\n            }\n            return result || { url: '' };\n        });\n    });\n    return sdk_1.Formio.pluginAlter('wrapFileRequestPromise', request, requestArgs);\n};\n// Esnure we proxy the following methods to the FormioEmbed class.\n['setBaseUrl', 'setApiUrl', 'setAppUrl', 'setProjectUrl', 'setPathType', 'setLicense'].forEach((fn) => {\n    const baseFn = sdk_1.Formio[fn];\n    sdk_1.Formio[fn] = function (arg) {\n        const retVal = Embed_1.Formio[fn](arg, true);\n        return baseFn ? baseFn.call(this, arg) : retVal;\n    };\n});\n// For reverse compatability.\nsdk_1.Formio.Promise = Promise;\nsdk_1.Formio.formioReady = Embed_1.Formio.formioReady;\nsdk_1.Formio.config = Embed_1.Formio.config;\nsdk_1.Formio.builder = Embed_1.Formio.builder;\nsdk_1.Formio.Report = Embed_1.Formio.Report;\nsdk_1.Formio.Form = Embed_1.Formio.Form;\nsdk_1.Formio.FormBuilder = Embed_1.Formio.FormBuilder;\nsdk_1.Formio.use = Embed_1.Formio.use;\nsdk_1.Formio.createForm = Embed_1.Formio.createForm;\nsdk_1.Formio.submitDone = Embed_1.Formio.submitDone;\nsdk_1.Formio.addLibrary = Embed_1.Formio.addLibrary;\nsdk_1.Formio.addLoader = Embed_1.Formio.addLoader;\nsdk_1.Formio.addToGlobal = (global) => {\n    if (typeof global === 'object' && !global.Formio) {\n        global.Formio = sdk_1.Formio;\n    }\n};\nif (typeof globalThis !== 'undefined') {\n    sdk_1.Formio.addToGlobal(globalThis);\n}\nif (typeof window !== 'undefined') {\n    sdk_1.Formio.addToGlobal(window);\n}\nEmbed_1.Formio._formioReady(sdk_1.Formio);\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Formio.js?\n}");
 
 /***/ }),
 
@@ -7706,7 +7706,7 @@ eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod)
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nclass Wizard extends Webform_1.default {\n    /**\n     * Constructor for wizard-based forms.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.\n     *    - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.\n     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.\n     *    - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.\n     */\n    constructor(elementOrOptions = undefined, _options = undefined) {\n        let element, options;\n        if (elementOrOptions instanceof HTMLElement || _options) {\n            element = elementOrOptions;\n            options = _options || {};\n        }\n        else {\n            options = elementOrOptions || {};\n        }\n        options.display = 'wizard';\n        super(element, options);\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        this.components = [];\n        this.originalComponents = [];\n        this.page = 0;\n        this.currentPanel = null;\n        this.currentNextPage = 0;\n        this._seenPages = [0];\n        this.subWizards = [];\n        this.allPages = [];\n        this.lastPromise = Promise.resolve();\n        this.enabledIndex = 0;\n        this.editMode = false;\n        this.originalOptions = lodash_1.default.cloneDeep(this.options);\n    }\n    isLastPage() {\n        const next = this.getNextPage();\n        if (lodash_1.default.isNumber(next)) {\n            return next === -1;\n        }\n        return lodash_1.default.isNull(next);\n    }\n    getPages(args = {}) {\n        const { all = false } = args;\n        const pages = this.hasSubWizards ? this.components : this.pages;\n        const filteredPages = pages.filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));\n        return filteredPages;\n    }\n    get hasSubWizards() {\n        return !lodash_1.default.isEmpty(this.subWizards);\n    }\n    get data() {\n        return super.data;\n    }\n    get localData() {\n        var _a, _b;\n        return ((_b = (_a = this.pages[this.page]) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.submission.data) || this.submission.data;\n    }\n    checkConditions(data, flags, row) {\n        const visible = super.checkConditions(data, flags, row);\n        this.establishPages(data);\n        return visible;\n    }\n    set data(value) {\n        this._data = value;\n        lodash_1.default.each(this.getPages({ all: true }), (component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    getComponents() {\n        return this.submitting ? this.getPages({ all: this.isLastPage() }) : super.getComponents();\n    }\n    resetValue() {\n        this.getPages({ all: true }).forEach((page) => page.resetValue());\n        this.setPristine(true);\n    }\n    init() {\n        var _a;\n        // Check for and initlize button settings object\n        this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {\n            showPrevious: true,\n            showNext: true,\n            showSubmit: true,\n            showCancel: !this.options.readOnly,\n        });\n        this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {\n            clickable: true,\n        });\n        this.options.allowPrevious = this.options.allowPrevious || false;\n        this.page = 0;\n        const onReady = super.init();\n        this.setComponentSchema();\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            this.component = this.pages[this.page].component;\n        }\n        this.on('subWizardsUpdated', (subForm) => {\n            const subWizard = this.subWizards.find((subWizard) => { var _a; return (subForm === null || subForm === void 0 ? void 0 : subForm.id) && ((_a = subWizard.subForm) === null || _a === void 0 ? void 0 : _a.id) === (subForm === null || subForm === void 0 ? void 0 : subForm.id); });\n            if (this.subWizards.length && subWizard) {\n                // GOTCHA(G-FJS01)\n                subWizard.subForm.setValue(subForm._submission, {}, true);\n                this.establishPages();\n                this.redraw();\n            }\n        });\n        return onReady;\n    }\n    get wizardKey() {\n        return `wizard-${this.id}`;\n    }\n    get wizard() {\n        return this.form;\n    }\n    set wizard(form) {\n        this.setForm(form);\n    }\n    get buttons() {\n        const buttons = {};\n        [\n            { name: 'cancel', method: 'cancel' },\n            { name: 'previous', method: 'prevPage' },\n            { name: 'next', method: 'nextPage' },\n            { name: 'submit', method: 'submit' },\n        ].forEach((button) => {\n            if (this.hasButton(button.name)) {\n                buttons[button.name] = button;\n            }\n        });\n        return buttons;\n    }\n    get buttonOrder() {\n        var _a, _b, _d;\n        const defaultButtonOrder = ['cancel', 'previous', 'next', 'submit'];\n        return ((_d = (_b = (_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.wizardButtonOrder) === null || _b === void 0 ? void 0 : _b.toLowerCase().split(', ')) !== null && _d !== void 0 ? _d : defaultButtonOrder);\n    }\n    get renderContext() {\n        var _a, _b;\n        return {\n            disableWizardSubmit: this.form.disableWizardSubmit,\n            wizardKey: this.wizardKey,\n            isBreadcrumbClickable: this.isBreadcrumbClickable(),\n            isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',\n            panels: this.allPages.length\n                ? this.allPages.map((page) => page.component)\n                : this.pages.map((page) => page.component),\n            buttons: this.buttons,\n            currentPage: this.page,\n            buttonOrder: this.buttonOrder,\n        };\n    }\n    prepareNavigationSettings(ctx) {\n        const currentPanel = this.currentPanel;\n        if (currentPanel && currentPanel.buttonSettings) {\n            Object.keys(currentPanel.buttonSettings).forEach(() => {\n                Object.keys(ctx.buttons).forEach((key) => {\n                    if ((typeof currentPanel.buttonSettings[key] !== 'undefined' &&\n                        !currentPanel.buttonSettings[key]) ||\n                        ctx.isSubForm) {\n                        ctx.buttons[key] = null;\n                    }\n                });\n            });\n        }\n        return this.renderTemplate('wizardNav', ctx);\n    }\n    prepareHeaderSettings(ctx, headerType) {\n        var _a;\n        const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||\n            lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';\n        if (shouldHideBreadcrumbs || ctx.isSubForm) {\n            return null;\n        }\n        return this.renderTemplate(headerType, ctx);\n    }\n    render() {\n        var _a;\n        const ctx = this.renderContext;\n        if (this.component.id) {\n            ctx.panels.forEach((panel) => {\n                if (panel.id === this.component.id) {\n                    this.currentPanel = panel;\n                    ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n                }\n            });\n        }\n        const wizardNav = this.prepareNavigationSettings(ctx);\n        const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n        const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n        const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n        return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n            wizardHeaderType,\n            wizardHeaderLocation,\n            wizardNav, components: this.renderComponents([\n                ...this.prefixComps,\n                ...(((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components) || []),\n                ...this.suffixComps,\n            ]) }), this.builderMode ? 'builder' : 'form');\n    }\n    redrawNavigation() {\n        if (this.element) {\n            let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n            if (navElement) {\n                this.detachNav();\n                navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n                navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n                this.loadRefs(navElement, {\n                    [`${this.wizardKey}-cancel`]: 'single',\n                    [`${this.wizardKey}-previous`]: 'single',\n                    [`${this.wizardKey}-next`]: 'single',\n                    [`${this.wizardKey}-submit`]: 'single',\n                });\n                this.attachNav();\n            }\n        }\n    }\n    redrawHeader() {\n        if (this.element) {\n            let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n            if (headerElement) {\n                this.detachHeader();\n                headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n                headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n                this.loadRefs(headerElement, {\n                    [`${this.wizardKey}-link`]: 'multiple',\n                    [`${this.wizardKey}-tooltip`]: 'multiple',\n                });\n                this.attachHeader();\n            }\n        }\n    }\n    /**\n     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n     * and emits a render event. It will initialize the wizard's index if necessary,\n     * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n     * @returns {Promise} A promise that resolves when all components have been successfully attached.\n     */\n    attach(element) {\n        var _a, _b;\n        this.setElement(element);\n        this.loadRefs(element, {\n            [this.wizardKey]: 'single',\n            [`${this.wizardKey}-header`]: 'single',\n            [`${this.wizardKey}-cancel`]: 'single',\n            [`${this.wizardKey}-previous`]: 'single',\n            [`${this.wizardKey}-next`]: 'single',\n            [`${this.wizardKey}-submit`]: 'single',\n            [`${this.wizardKey}-link`]: 'multiple',\n            [`${this.wizardKey}-tooltip`]: 'multiple',\n        });\n        if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n            this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n        }\n        this.hook('attachWebform', element, this);\n        const promises = this.attachComponents(this.refs[this.wizardKey], [\n            ...this.prefixComps,\n            ...(((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.components) || []),\n            ...this.suffixComps,\n        ]);\n        this.attachNav();\n        this.attachHeader();\n        return promises.then(() => {\n            this.emit('render', { component: this.currentPage, page: this.page });\n            if (this.component.scrollToTop) {\n                this.scrollPageToTop();\n            }\n        });\n    }\n    scrollPageToTop() {\n        var _a;\n        const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n        if (!pageTop) {\n            return;\n        }\n        if ('scrollIntoView' in pageTop) {\n            pageTop.scrollIntoView(true);\n        }\n        else {\n            this.scrollIntoView(pageTop);\n        }\n    }\n    isBreadcrumbClickable() {\n        let currentPage = null;\n        this.pages.map((page) => {\n            var _a;\n            if (lodash_1.default.isEqual((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n            return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n        }\n        if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n            return this.options.breadcrumbSettings.clickable;\n        }\n        return true;\n    }\n    isAllowPrevious() {\n        let currentPage = null;\n        this.pages.map((page) => {\n            var _a;\n            if (lodash_1.default.isEqual((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        return lodash_1.default.get(currentPage === null || currentPage === void 0 ? void 0 : currentPage.component, 'allowPrevious', this.options.allowPrevious);\n    }\n    /**\n     * Handles navigate on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleNaviageteOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    /**\n     * Handles save on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleSaveOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    attachNav() {\n        if (this.component.navigateOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n            this.addEventListener(buttonElement, 'click', (event) => {\n                event.preventDefault();\n                // Disable the button until done.\n                buttonElement.setAttribute('disabled', 'disabled');\n                this.setLoading(buttonElement, true);\n                // Call the button method, then re-enable the button.\n                this[button.method]()\n                    .then(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                })\n                    .catch(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                });\n            });\n        });\n    }\n    /**\n     * Emits an event indicating that a wizard page has been selected.\n     * @param {number} index - Index of the selected wizard page in the `pages` array.\n     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n     */\n    emitWizardPageSelected(index) {\n        this.emit('wizardPageSelected', this.pages[index], index);\n    }\n    attachHeader() {\n        var _a, _b;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n                if (!isAllowPrevious || index <= this.enabledIndex) {\n                    this.addEventListener(link, 'click', (event) => {\n                        this.emit('wizardNavigationClicked', this.pages[index]);\n                        event.preventDefault();\n                        return this.setPage(index).then(() => {\n                            this.emitWizardPageSelected(index);\n                        });\n                    });\n                }\n            });\n        }\n    }\n    detachNav() {\n        if (this.component.navigateOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n        });\n    }\n    detachHeader() {\n        if (this.refs[`${this.wizardKey}-link`]) {\n            this.refs[`${this.wizardKey}-link`].forEach((link) => {\n                this.removeEventListener(link, 'click');\n            });\n        }\n    }\n    transformPages() {\n        const allComponents = [];\n        const components = this.getSortedComponents(this);\n        let defferedComponents = [];\n        this.allPages = [];\n        // Get all components including all nested components and line up in the correct order\n        const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n            const nestedPages = [];\n            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm)\n                ? this.getSortedComponents(nestedComp.subForm)\n                : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n            const visibleComponents = currentComponents.filter((comp) => comp._visible);\n            const filteredComponents = visibleComponents.filter((comp) => !dataArrayComponents.includes(comp.component.type) &&\n                (comp.type !== 'form' || comp.isNestedWizard));\n            const additionalComponents = currentComponents.filter((comp) => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n            let hasNested = false;\n            (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n                if (comp && comp.component) {\n                    if (comp.component.type === 'panel' &&\n                        (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) &&\n                        !getAllComponents(comp, compsArr, false)) {\n                        if (pushAllowed) {\n                            this.setRootPanelId(comp);\n                            nestedPages.push(comp);\n                        }\n                        hasNested = true;\n                    }\n                    if (comp.isNestedWizard && comp.subForm) {\n                        const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n                        if (!hasNested) {\n                            hasNested = hasNestedForm;\n                        }\n                    }\n                }\n            }, true);\n            if (nestedComp.component.type === 'panel') {\n                if (!hasNested && pushAllowed) {\n                    this.setRootPanelId(nestedComp);\n                    compsArr.push(nestedComp);\n                }\n                if (hasNested && additionalComponents.length) {\n                    const newComp = lodash_1.default.clone(nestedComp);\n                    newComp.components = additionalComponents;\n                    this.setRootPanelId(newComp);\n                    defferedComponents.push(newComp);\n                }\n            }\n            if (pushAllowed) {\n                compsArr.push(...defferedComponents, ...nestedPages);\n                defferedComponents = [];\n            }\n            return hasNested;\n        };\n        components.forEach((component) => {\n            if (component.visible) {\n                getAllComponents(component, allComponents);\n            }\n        }, []);\n        // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n        if (this.localRoot && this.id === this.localRoot.id) {\n            allComponents.forEach((comp, index) => {\n                comp.eachComponent((component) => {\n                    component.page = index;\n                });\n            });\n        }\n        this.allPages = allComponents;\n    }\n    getSortedComponents({ components, originalComponents }) {\n        // sorts components if they were shuffled after the conditional logic\n        const currentComponents = [];\n        const currentPages = [];\n        if (components && components.length) {\n            components.map((page) => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n            if (!item.key) {\n                item.key = item.title;\n            }\n            if (currentPages[item.key]) {\n                currentComponents.push(currentPages[item.key]);\n            }\n        });\n        return currentComponents;\n    }\n    findRootPanel(component) {\n        var _a;\n        return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n    }\n    setRootPanelId(component) {\n        var _a;\n        if (component.rootPanelId && component.rootPanelId !== component.id) {\n            return;\n        }\n        const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n        component.rootPanelId = parent.id;\n    }\n    establishPages(data = this.data) {\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        const visible = [];\n        const currentPages = {};\n        const pageOptions = Object.assign(Object.assign({}, lodash_1.default.clone(this.options)), (this.parent ? { root: this } : {}));\n        if (this.components && this.components.length) {\n            this.components.forEach((page) => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        if (this.originalComponents) {\n            this.originalComponents.forEach((item) => {\n                if (item.type === 'panel') {\n                    if (!item.key) {\n                        item.key = item.title;\n                    }\n                    let page = currentPages[item.key];\n                    const forceShow = this.shouldForceShow(item);\n                    const forceHide = this.shouldForceHide(item);\n                    let isVisible = !page\n                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n                        : page.visible;\n                    if (forceShow) {\n                        isVisible = true;\n                    }\n                    else if (forceHide) {\n                        isVisible = false;\n                    }\n                    if (isVisible) {\n                        visible.push(item);\n                        if (page) {\n                            this.pages.push(page);\n                        }\n                    }\n                    if (!page && isVisible) {\n                        page = this.createComponent(item, pageOptions);\n                        page.visible = isVisible;\n                        this.pages.push(page);\n                        page.eachComponent((component) => {\n                            component.page = this.pages.length - 1;\n                        });\n                    }\n                }\n                else if (item.type !== 'button') {\n                    if (!this.pages.length) {\n                        this.prefixComps.push(this.createComponent(item, pageOptions));\n                    }\n                    else {\n                        this.suffixComps.push(this.createComponent(item, pageOptions));\n                    }\n                }\n            });\n        }\n        if (this.pages.length) {\n            this.emit('pagesChanged');\n        }\n        this.transformPages();\n        if (this.allPages && this.allPages.length) {\n            this.updatePages();\n        }\n        return visible;\n    }\n    updatePages() {\n        this.pages = this.allPages;\n    }\n    addComponents() {\n        this.establishPages();\n    }\n    setPage(num) {\n        if (num === this.page) {\n            return Promise.resolve();\n        }\n        if (num >= 0 && num < this.pages.length) {\n            this.page = num;\n            this.pageFieldLogic(num);\n            this.getNextPage();\n            let parentNum = num;\n            if (this.hasSubWizards) {\n                const pageFromPages = this.pages[num];\n                const pageFromComponents = this.components[num];\n                if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n                    parentNum = this.components.findIndex((comp) => {\n                        var _a, _b;\n                        return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n                    });\n                }\n            }\n            if (!this._seenPages.includes(parentNum)) {\n                this._seenPages = this._seenPages.concat(parentNum);\n            }\n            return this.redraw().then(() => {\n                var _a;\n                this.checkData(this.submission.data);\n                this.triggerCaptcha((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components);\n                const errors = this.submitted\n                    ? this.validate(this.localData, { dirty: true })\n                    : this.validateCurrentPage();\n                if (this.alert) {\n                    this.showErrors(errors, true, true);\n                }\n            });\n        }\n        else if (!this.pages.length) {\n            this.redraw();\n            return Promise.resolve();\n        }\n        return Promise.reject(this.t('pageNotFound'));\n    }\n    pageFieldLogic(page) {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n            // Handle field logic on pages.\n            this.component = this.pages[page].component;\n            this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n            this.fieldLogic(this.data);\n            // If disabled changed, be sure to distribute the setting.\n            this.disabled = this.shouldDisabled;\n        }\n    }\n    get currentPage() {\n        return this.pages && this.pages.length >= this.page\n            ? this.pages[this.page]\n            : { components: [] };\n    }\n    getNextPage() {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            const data = this.submission.data;\n            const form = this.pages[this.page].component;\n            // Check conditional nextPage\n            if (form) {\n                const page = this.pages.length > this.page + 1 && !this.showAllErrors ? this.page + 1 : -1;\n                if (form.nextPage) {\n                    const next = this.evaluate(form.nextPage, {\n                        next: page,\n                        data,\n                        page,\n                        form,\n                    }, 'next');\n                    if (next === null) {\n                        this.currentNextPage = null;\n                        return null;\n                    }\n                    const pageNum = parseInt(next, 10);\n                    if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n                        this.currentNextPage = pageNum;\n                        return pageNum;\n                    }\n                    this.currentNextPage = this.getPageIndexByKey(next);\n                    return this.currentNextPage;\n                }\n                this.currentNextPage = page;\n                return page;\n            }\n            this.currentNextPage = null;\n        }\n        return null;\n    }\n    getPreviousPage() {\n        return this.page - 1;\n    }\n    mergeDefaultsFromSchema(data) {\n        var _a, _b;\n        const components = (_a = this.form) === null || _a === void 0 ? void 0 : _a.components;\n        if (!components || !data || ((_b = this.options) === null || _b === void 0 ? void 0 : _b.readOnly)) {\n            return;\n        }\n        (0, utils_1.eachComponent)(components, (component, _path, _c, _parent, compPaths) => {\n            if (!(component === null || component === void 0 ? void 0 : component.key) ||\n                component.type === 'button' ||\n                component.persistent === 'client-only' ||\n                !component.hasOwnProperty('clearOnHide') ||\n                component.clearOnHide !== false ||\n                !component.hasOwnProperty('defaultValue')) {\n                return;\n            }\n            const modelType = (0, utils_1.getModelType)(component);\n            if (modelType === 'none' || modelType === 'content' || component.input === false) {\n                return;\n            }\n            const dataPath = (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || component.key;\n            if (!dataPath || lodash_1.default.get(data, dataPath) != null) {\n                return;\n            }\n            lodash_1.default.set(data, dataPath, component.defaultValue);\n        }, true);\n    }\n    beforeSubmit() {\n        this.mergeDefaultsFromSchema(this.data);\n        const pages = this.getPages({ all: true });\n        return Promise.all(pages.map((page) => {\n            this.triggerButtonCaptcha(page);\n            page.options.beforeSubmit = true;\n            return page.beforeSubmit();\n        }));\n    }\n    beforePage(next) {\n        return new Promise((resolve, reject) => {\n            this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n                if (err) {\n                    this.showErrors(err, true);\n                    reject(err);\n                }\n                const form = this.currentPage;\n                if (form) {\n                    form.beforePage(next).then(resolve).catch(reject);\n                }\n                else {\n                    resolve();\n                }\n            });\n        });\n    }\n    emitNextPage() {\n        this.emit('nextPage', { page: this.page, submission: this.submission });\n        this.announceCurrentPage();\n    }\n    nextPage() {\n        // Read-only forms should not worry about validation before going to next page, nor should they submit.\n        if (this.options.readOnly) {\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    this.emitNextPage();\n                });\n            });\n        }\n        // Validate the form before going to the next page\n        const currentPageErrors = this.validateCurrentPage({ dirty: true });\n        const errors = this.submitted\n            ? this.validate(this.localData, { dirty: true })\n            : currentPageErrors;\n        // allow going to the next page if the current page is valid, even if there are form level errors\n        if (currentPageErrors.length === 0) {\n            this.checkData(this.submission.data);\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n                        this.enabledIndex = this.page;\n                        this.redraw();\n                    }\n                    this.emitNextPage();\n                });\n            });\n        }\n        else {\n            this.currentPage.components.forEach((comp) => comp.setPristine(false));\n            this.scrollIntoView(this.element, true);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a, _b, _d, _e, _f;\n        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {\n            return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.parent.validateComponents(components, (_e = this.root) === null || _e === void 0 ? void 0 : _e.data, flags);\n        }\n        return (_f = this.currentPage) === null || _f === void 0 ? void 0 : _f.validateComponents(components, this.root ? this.root.data : this.data, flags);\n    }\n    emitPrevPage() {\n        this.emit('prevPage', { page: this.page, submission: this.submission });\n        this.announceCurrentPage();\n    }\n    announceCurrentPage() {\n        if (lodash_1.default.get(this.form, 'settings.wizardHeaderType', '') === 'StepIndicator') {\n            (0, utils_1.screenReaderSpeech)(`Now on step ${this.page + 1} of ${this.pages.length}: ${lodash_1.default.get(this.currentPage, 'component.title')}`);\n            const currentLink = lodash_1.default.get(this.refs, `${this.wizardKey}-link.[${this.page}]`);\n            if (currentLink) {\n                currentLink.focus();\n            }\n        }\n    }\n    prevPage() {\n        return this.beforePage().then(() => {\n            return this.setPage(this.getPreviousPage()).then(() => {\n                this.emitPrevPage();\n            });\n        });\n    }\n    cancel(noconfirm) {\n        if (this.options.readOnly) {\n            return Promise.resolve();\n        }\n        if (super.cancel(noconfirm)) {\n            this.setPristine(true);\n            return this.setPage(0).then(() => {\n                if (this.enabledIndex) {\n                    this.enabledIndex = 0;\n                }\n                this.onChange({ resetValue: true });\n                this.redraw();\n                return this.page;\n            });\n        }\n        return Promise.resolve();\n    }\n    getPageIndexByKey(key) {\n        let pageIndex = this.page;\n        this.pages.forEach((page, index) => {\n            if (page.component.key === key) {\n                pageIndex = index;\n                return false;\n            }\n        });\n        return pageIndex;\n    }\n    get schema() {\n        return this.wizard;\n    }\n    setComponentSchema() {\n        const pageKeys = {};\n        this.originalComponents = [];\n        this.component.components.map((item) => {\n            if (item.type === 'panel') {\n                item.key = (0, utils_1.uniqueKey)(pageKeys, item.key || 'panel');\n                pageKeys[item.key] = true;\n                if (this.wizard.full) {\n                    this.options.show = this.options.show || {};\n                    this.options.show[item.key] = true;\n                }\n                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full') &&\n                    !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n                    this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n                }\n            }\n            this.originalComponents.push(lodash_1.default.clone(item));\n        });\n        if (!Object.keys(pageKeys).length) {\n            const newPage = {\n                type: 'panel',\n                title: 'Page 1',\n                label: 'Page 1',\n                key: 'page1',\n                components: this.component.components,\n            };\n            this.component.components = [newPage];\n            this.originalComponents.push(lodash_1.default.clone(newPage));\n        }\n    }\n    setForm(form, flags = {}) {\n        if (!form) {\n            return;\n        }\n        return super.setForm(form, flags);\n    }\n    onSetForm(clonedForm, initialForm) {\n        this.component.components =\n            (this.parent ? initialForm.components : clonedForm.components) || [];\n        this.setComponentSchema();\n    }\n    setEditMode(submission) {\n        if (!this.editMode && submission._id && !this.options.readOnly) {\n            this.editMode = true;\n            this.redraw();\n        }\n    }\n    setValue(submission, flags = {}, ignoreEstablishment) {\n        if (!submission || !submission.data) {\n            submission = {\n                data: {},\n            };\n        }\n        const changed = this.getPages({ all: true }).reduce((changed, page) => {\n            return this.setNestedValue(page, submission.data, flags, changed) || changed;\n        }, false);\n        this.mergeData(this.data, submission.data);\n        if (changed) {\n            this.pageFieldLogic(this.page);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        if (!ignoreEstablishment) {\n            this.establishPages(submission.data);\n        }\n        this.setEditMode(submission);\n        return changed;\n    }\n    isClickable(page, index) {\n        return (this.page !== index &&\n            (0, utils_1.firstNonNil)([lodash_1.default.get(page, 'breadcrumbClickable'), this.options.breadcrumbSettings.clickable]));\n    }\n    hasButton(name, nextPage = this.getNextPage()) {\n        // get page options with global options as default values\n        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext, } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});\n        switch (name) {\n            case 'previous':\n                return previous && this.getPreviousPage() > -1;\n            case 'next':\n                return next && nextPage !== null && nextPage !== -1;\n            case 'cancel':\n                return cancel && !this.options.readOnly;\n            case 'submit':\n                return (submit &&\n                    !this.options.readOnly &&\n                    (nextPage === null || this.page === this.pages.length - 1));\n            default:\n                return true;\n        }\n    }\n    pageId(page) {\n        if (page.key) {\n            // Some panels have the same key....\n            return `${page.key}-${page.title}`;\n        }\n        else if (page.components && page.components.length > 0) {\n            return this.pageId(page.components[0]);\n        }\n        else {\n            return page.title;\n        }\n    }\n    onChange(flags, changed, modified, changes) {\n        var _a;\n        super.onChange(flags, changed, modified, changes);\n        // The onChange loop doesn't need all components for wizards\n        const errors = (flags === null || flags === void 0 ? void 0 : flags.noValidate)\n            ? []\n            : this.submitted\n                ? this.validate(this.localData, { dirty: true })\n                : this.validateCurrentPage();\n        if (this.alert) {\n            this.showErrors(errors, true, true);\n        }\n        // If the pages change, need to redraw the header.\n        const currentPanels = this.pages;\n        // calling this.establishPages() updates/mutates this.pages to be the current pages\n        this.establishPages();\n        const newPanels = this.pages;\n        const currentNextPage = this.currentNextPage;\n        const panelsUpdated = !lodash_1.default.isEqual(newPanels, currentPanels);\n        if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.id) &&\n            this.pages.length &&\n            (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {\n            const newIndex = this.pages.findIndex((page) => page.id === this.currentPanel.id);\n            if (newIndex !== -1)\n                this.setPage(newIndex);\n        }\n        if (panelsUpdated || (flags && flags.fromSubmission)) {\n            this.redrawHeader();\n        }\n        // If the next page changes, then make sure to redraw navigation.\n        if (currentNextPage !== this.getNextPage()) {\n            this.redrawNavigation();\n        }\n        if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n            this.redraw();\n        }\n    }\n    rebuild() {\n        const currentPage = this.page;\n        const setCurrentPage = () => this.setPage(currentPage);\n        return super.rebuild().then(setCurrentPage);\n    }\n    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n        var _a;\n        if (!this.checkCondition(row, data)) {\n            this.setCustomValidity('');\n            return true;\n        }\n        const components = !currentPageOnly || this.isLastPage() ? this.getComponents() : (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components;\n        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n    }\n    get errors() {\n        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n    }\n    focusOnComponent(key) {\n        const component = this.getComponent(key);\n        if (component) {\n            let topPanel = component.parent;\n            while (!(topPanel.parent instanceof Wizard)) {\n                topPanel = topPanel.parent;\n            }\n            const pageIndex = this.pages.findIndex((page) => page.id === topPanel.id);\n            if (pageIndex >= 0) {\n                const page = this.pages[pageIndex];\n                if (page && page !== this.currentPage) {\n                    return this.setPage(pageIndex).then(() => super.focusOnComponent(key));\n                }\n            }\n        }\n        return super.focusOnComponent(key);\n    }\n    triggerButtonCaptcha(page) {\n        if (!page.components) {\n            return;\n        }\n        let captchaComponent;\n        page.eachComponent((component) => {\n            if (/^(re)?captcha$/.test(component.component.type) &&\n                component.component.eventType === 'buttonClick' &&\n                component.component.buttonKey === 'submit') {\n                captchaComponent = component;\n            }\n        });\n        if (captchaComponent) {\n            captchaComponent.verify(`submitClick`);\n        }\n    }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.js?\n}");
+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/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst Webform_1 = __importDefault(__webpack_require__(/*! ./Webform */ \"./lib/cjs/Webform.js\"));\nconst Formio_1 = __webpack_require__(/*! ./Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ./utils */ \"./lib/cjs/utils/index.js\");\nclass Wizard extends Webform_1.default {\n    /**\n     * Constructor for wizard-based forms.\n     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.\n     * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.\n     *    - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.\n     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.\n     *    - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.\n     */\n    constructor(elementOrOptions = undefined, _options = undefined) {\n        let element, options;\n        if (elementOrOptions instanceof HTMLElement || _options) {\n            element = elementOrOptions;\n            options = _options || {};\n        }\n        else {\n            options = elementOrOptions || {};\n        }\n        options.display = 'wizard';\n        super(element, options);\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        this.components = [];\n        this.originalComponents = [];\n        this.page = 0;\n        this.currentPanel = null;\n        this.currentNextPage = 0;\n        this._seenPages = [0];\n        this.subWizards = [];\n        this.allPages = [];\n        this.lastPromise = Promise.resolve();\n        this.enabledIndex = 0;\n        this.editMode = false;\n        this.originalOptions = lodash_1.default.cloneDeep(this.options);\n    }\n    isLastPage() {\n        const next = this.getNextPage();\n        if (lodash_1.default.isNumber(next)) {\n            return next === -1;\n        }\n        return lodash_1.default.isNull(next);\n    }\n    getPages(args = {}) {\n        const { all = false } = args;\n        const pages = this.hasSubWizards ? this.components : this.pages;\n        const filteredPages = pages.filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));\n        return filteredPages;\n    }\n    get hasSubWizards() {\n        return !lodash_1.default.isEmpty(this.subWizards);\n    }\n    get data() {\n        return super.data;\n    }\n    get localData() {\n        var _a, _b;\n        return ((_b = (_a = this.pages[this.page]) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.submission.data) || this.submission.data;\n    }\n    checkConditions(data, flags, row) {\n        const visible = super.checkConditions(data, flags, row);\n        this.establishPages(data);\n        return visible;\n    }\n    set data(value) {\n        this._data = value;\n        lodash_1.default.each(this.getPages({ all: true }), (component) => {\n            component.data = this.componentContext(component);\n        });\n    }\n    getComponents() {\n        return this.submitting ? this.getPages({ all: this.isLastPage() }) : super.getComponents();\n    }\n    resetValue() {\n        this.getPages({ all: true }).forEach((page) => page.resetValue());\n        this.setPristine(true);\n    }\n    init() {\n        var _a;\n        // Check for and initlize button settings object\n        this.options.buttonSettings = lodash_1.default.defaults(this.options.buttonSettings, {\n            showPrevious: true,\n            showNext: true,\n            showSubmit: true,\n            showCancel: !this.options.readOnly,\n        });\n        this.options.breadcrumbSettings = lodash_1.default.defaults(this.options.breadcrumbSettings, {\n            clickable: true,\n        });\n        this.options.allowPrevious = this.options.allowPrevious || false;\n        this.page = 0;\n        const onReady = super.init();\n        this.setComponentSchema();\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            this.component = this.pages[this.page].component;\n        }\n        this.on('subWizardsUpdated', (subForm) => {\n            const subWizard = this.subWizards.find((subWizard) => { var _a; return (subForm === null || subForm === void 0 ? void 0 : subForm.id) && ((_a = subWizard.subForm) === null || _a === void 0 ? void 0 : _a.id) === (subForm === null || subForm === void 0 ? void 0 : subForm.id); });\n            if (this.subWizards.length && subWizard) {\n                // GOTCHA(G-FJS01)\n                subWizard.subForm.setValue(subForm._submission, {}, true);\n                this.establishPages();\n                this.redraw();\n            }\n        });\n        return onReady;\n    }\n    get wizardKey() {\n        return `wizard-${this.id}`;\n    }\n    get wizard() {\n        return this.form;\n    }\n    set wizard(form) {\n        this.setForm(form);\n    }\n    get buttons() {\n        const buttons = {};\n        [\n            { name: 'cancel', method: 'cancel' },\n            { name: 'previous', method: 'prevPage' },\n            { name: 'next', method: 'nextPage' },\n            { name: 'submit', method: 'submit' },\n        ].forEach((button) => {\n            if (this.hasButton(button.name)) {\n                buttons[button.name] = button;\n            }\n        });\n        return buttons;\n    }\n    get buttonOrder() {\n        var _a, _b, _d;\n        const defaultButtonOrder = ['cancel', 'previous', 'next', 'submit'];\n        return ((_d = (_b = (_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.wizardButtonOrder) === null || _b === void 0 ? void 0 : _b.toLowerCase().split(', ')) !== null && _d !== void 0 ? _d : defaultButtonOrder);\n    }\n    get renderContext() {\n        var _a, _b;\n        return {\n            disableWizardSubmit: this.form.disableWizardSubmit,\n            wizardKey: this.wizardKey,\n            isBreadcrumbClickable: this.isBreadcrumbClickable(),\n            isSubForm: !!this.parent && !((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.type) === 'wizard',\n            panels: this.allPages.length\n                ? this.allPages.map((page) => page.component)\n                : this.pages.map((page) => page.component),\n            buttons: this.buttons,\n            currentPage: this.page,\n            buttonOrder: this.buttonOrder,\n        };\n    }\n    prepareNavigationSettings(ctx) {\n        const currentPanel = this.currentPanel;\n        if (currentPanel && currentPanel.buttonSettings) {\n            Object.keys(currentPanel.buttonSettings).forEach(() => {\n                Object.keys(ctx.buttons).forEach((key) => {\n                    if ((typeof currentPanel.buttonSettings[key] !== 'undefined' &&\n                        !currentPanel.buttonSettings[key]) ||\n                        ctx.isSubForm) {\n                        ctx.buttons[key] = null;\n                    }\n                });\n            });\n        }\n        return this.renderTemplate('wizardNav', ctx);\n    }\n    prepareHeaderSettings(ctx, headerType) {\n        var _a;\n        const shouldHideBreadcrumbs = ((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.breadcrumb) === 'none' ||\n            lodash_1.default.get(this.form, 'settings.wizardBreadcrumbsType', '') === 'none';\n        if (shouldHideBreadcrumbs || ctx.isSubForm) {\n            return null;\n        }\n        return this.renderTemplate(headerType, ctx);\n    }\n    render() {\n        var _a;\n        const ctx = this.renderContext;\n        if (this.component.id) {\n            ctx.panels.forEach((panel) => {\n                if (panel.id === this.component.id) {\n                    this.currentPanel = panel;\n                    ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);\n                }\n            });\n        }\n        const wizardNav = this.prepareNavigationSettings(ctx);\n        const wizardHeaderType = `wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`;\n        const wizardHeaderLocation = lodash_1.default.get(this.form, 'settings.wizardHeaderLocation', 'left');\n        const wizardHeader = this.prepareHeaderSettings(ctx, wizardHeaderType);\n        return this.renderTemplate('wizard', Object.assign(Object.assign({}, ctx), { className: super.getClassName(), wizardHeader,\n            wizardHeaderType,\n            wizardHeaderLocation,\n            wizardNav, components: this.renderComponents([\n                ...this.prefixComps,\n                ...(((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components) || []),\n                ...this.suffixComps,\n            ]) }), this.builderMode ? 'builder' : 'form');\n    }\n    redrawNavigation() {\n        if (this.element) {\n            let navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n            if (navElement) {\n                this.detachNav();\n                navElement.outerHTML = this.renderTemplate('wizardNav', this.renderContext);\n                navElement = this.element.querySelector(`#${this.wizardKey}-nav`);\n                this.loadRefs(navElement, {\n                    [`${this.wizardKey}-cancel`]: 'single',\n                    [`${this.wizardKey}-previous`]: 'single',\n                    [`${this.wizardKey}-next`]: 'single',\n                    [`${this.wizardKey}-submit`]: 'single',\n                });\n                this.attachNav();\n            }\n        }\n    }\n    redrawHeader() {\n        if (this.element) {\n            let headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n            if (headerElement) {\n                this.detachHeader();\n                headerElement.outerHTML = this.renderTemplate(`wizardHeader${lodash_1.default.get(this.form, 'settings.wizardHeaderType', '')}`, this.renderContext);\n                headerElement = this.element.querySelector(`#${this.wizardKey}-header`);\n                this.loadRefs(headerElement, {\n                    [`${this.wizardKey}-link`]: 'multiple',\n                    [`${this.wizardKey}-tooltip`]: 'multiple',\n                });\n                this.attachHeader();\n            }\n        }\n    }\n    /**\n     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,\n     * and emits a render event. It will initialize the wizard's index if necessary,\n     * attach event hooks, and make sure that the current page is rendered and displayed correctly.\n     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.\n     * @returns {Promise} A promise that resolves when all components have been successfully attached.\n     */\n    attach(element) {\n        var _a, _b;\n        this.setElement(element);\n        this.loadRefs(element, {\n            [this.wizardKey]: 'single',\n            [`${this.wizardKey}-header`]: 'single',\n            [`${this.wizardKey}-cancel`]: 'single',\n            [`${this.wizardKey}-previous`]: 'single',\n            [`${this.wizardKey}-next`]: 'single',\n            [`${this.wizardKey}-submit`]: 'single',\n            [`${this.wizardKey}-link`]: 'multiple',\n            [`${this.wizardKey}-tooltip`]: 'multiple',\n        });\n        if ((this.options.readOnly || this.editMode) && !this.enabledIndex) {\n            this.enabledIndex = ((_a = this.pages) === null || _a === void 0 ? void 0 : _a.length) - 1;\n        }\n        this.hook('attachWebform', element, this);\n        const promises = this.attachComponents(this.refs[this.wizardKey], [\n            ...this.prefixComps,\n            ...(((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.components) || []),\n            ...this.suffixComps,\n        ]);\n        this.attachNav();\n        this.attachHeader();\n        return promises.then(() => {\n            this.emit('render', { component: this.currentPage, page: this.page });\n            if (this.component.scrollToTop) {\n                this.scrollPageToTop();\n            }\n        });\n    }\n    scrollPageToTop() {\n        var _a;\n        const pageTop = (_a = this.refs[`${this.wizardKey}-header`]) !== null && _a !== void 0 ? _a : this.refs[this.wizardKey];\n        if (!pageTop) {\n            return;\n        }\n        if ('scrollIntoView' in pageTop) {\n            pageTop.scrollIntoView(true);\n        }\n        else {\n            this.scrollIntoView(pageTop);\n        }\n    }\n    isBreadcrumbClickable() {\n        let currentPage = null;\n        this.pages.map((page) => {\n            var _a;\n            if (lodash_1.default.isEqual((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        if (lodash_1.default.has(currentPage, 'component.breadcrumbClickable')) {\n            return lodash_1.default.get(currentPage, 'component.breadcrumbClickable');\n        }\n        if (lodash_1.default.has(this.options, 'breadcrumbSettings.clickable')) {\n            return this.options.breadcrumbSettings.clickable;\n        }\n        return true;\n    }\n    isAllowPrevious() {\n        let currentPage = null;\n        this.pages.map((page) => {\n            var _a;\n            if (lodash_1.default.isEqual((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.component, page.component)) {\n                currentPage = page;\n            }\n        });\n        return lodash_1.default.get(currentPage === null || currentPage === void 0 ? void 0 : currentPage.component, 'allowPrevious', this.options.allowPrevious);\n    }\n    /**\n     * Handles navigate on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleNaviageteOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.next.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    /**\n     * Handles save on 'Enter' key event in a wizard form.\n     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.\n     */\n    handleSaveOnEnter(event) {\n        if (event.keyCode === 13) {\n            const clickEvent = new CustomEvent('click');\n            const buttonElement = this.refs[`${this.wizardKey}-${this.buttons.submit.name}`];\n            if (buttonElement) {\n                buttonElement.dispatchEvent(clickEvent);\n            }\n        }\n    }\n    attachNav() {\n        if (this.component.navigateOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.addEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            const buttonElement = this.refs[`${this.wizardKey}-${button.name}`];\n            this.addEventListener(buttonElement, 'click', (event) => {\n                event.preventDefault();\n                // Disable the button until done.\n                buttonElement.setAttribute('disabled', 'disabled');\n                this.setLoading(buttonElement, true);\n                // Call the button method, then re-enable the button.\n                this[button.method]()\n                    .then(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                })\n                    .catch(() => {\n                    buttonElement.removeAttribute('disabled');\n                    this.setLoading(buttonElement, false);\n                });\n            });\n        });\n    }\n    /**\n     * Emits an event indicating that a wizard page has been selected.\n     * @param {number} index - Index of the selected wizard page in the `pages` array.\n     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.\n     */\n    emitWizardPageSelected(index) {\n        this.emit('wizardPageSelected', this.pages[index], index);\n    }\n    attachHeader() {\n        var _a, _b;\n        const isAllowPrevious = this.isAllowPrevious();\n        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);\n        if (this.isBreadcrumbClickable() || isAllowPrevious) {\n            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {\n                if (!isAllowPrevious || index <= this.enabledIndex) {\n                    this.addEventListener(link, 'click', (event) => {\n                        this.emit('wizardNavigationClicked', this.pages[index]);\n                        event.preventDefault();\n                        return this.setPage(index).then(() => {\n                            this.emitWizardPageSelected(index);\n                        });\n                    });\n                }\n            });\n        }\n    }\n    detachNav() {\n        if (this.component.navigateOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleNaviageteOnEnter.bind(this));\n        }\n        if (this.component.saveOnEnter) {\n            this.removeEventListener(document, 'keyup', this.handleSaveOnEnter.bind(this));\n        }\n        lodash_1.default.each(this.buttons, (button) => {\n            this.removeEventListener(this.refs[`${this.wizardKey}-${button.name}`], 'click');\n        });\n    }\n    detachHeader() {\n        if (this.refs[`${this.wizardKey}-link`]) {\n            this.refs[`${this.wizardKey}-link`].forEach((link) => {\n                this.removeEventListener(link, 'click');\n            });\n        }\n    }\n    transformPages() {\n        const allComponents = [];\n        const components = this.getSortedComponents(this);\n        let defferedComponents = [];\n        this.allPages = [];\n        // Get all components including all nested components and line up in the correct order\n        const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {\n            const nestedPages = [];\n            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];\n            const currentComponents = (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.subForm)\n                ? this.getSortedComponents(nestedComp.subForm)\n                : (nestedComp === null || nestedComp === void 0 ? void 0 : nestedComp.components) || [];\n            const visibleComponents = currentComponents.filter((comp) => comp._visible);\n            const filteredComponents = visibleComponents.filter((comp) => !dataArrayComponents.includes(comp.component.type) &&\n                (comp.type !== 'form' || comp.isNestedWizard));\n            const additionalComponents = currentComponents.filter((comp) => { var _a; return ((_a = comp.subForm) === null || _a === void 0 ? void 0 : _a._form.display) !== 'wizard'; });\n            let hasNested = false;\n            (0, utils_1.eachComponent)(filteredComponents, (comp) => {\n                if (comp && comp.component) {\n                    if (comp.component.type === 'panel' &&\n                        (comp === null || comp === void 0 ? void 0 : comp.parent.wizard) &&\n                        !getAllComponents(comp, compsArr, false)) {\n                        if (pushAllowed) {\n                            this.setRootPanelId(comp);\n                            nestedPages.push(comp);\n                        }\n                        hasNested = true;\n                    }\n                    if (comp.isNestedWizard && comp.subForm) {\n                        const hasNestedForm = getAllComponents(comp, nestedPages, pushAllowed);\n                        if (!hasNested) {\n                            hasNested = hasNestedForm;\n                        }\n                    }\n                }\n            }, true);\n            if (nestedComp.component.type === 'panel') {\n                if (!hasNested && pushAllowed) {\n                    this.setRootPanelId(nestedComp);\n                    compsArr.push(nestedComp);\n                }\n                if (hasNested && additionalComponents.length) {\n                    const newComp = lodash_1.default.clone(nestedComp);\n                    newComp.components = additionalComponents;\n                    this.setRootPanelId(newComp);\n                    defferedComponents.push(newComp);\n                }\n            }\n            if (pushAllowed) {\n                compsArr.push(...defferedComponents, ...nestedPages);\n                defferedComponents = [];\n            }\n            return hasNested;\n        };\n        components.forEach((component) => {\n            if (component.visible) {\n                getAllComponents(component, allComponents);\n            }\n        }, []);\n        // recalculate pages only for root wizards, including the situation when the wizard is in a wrapper\n        if (this.localRoot && this.id === this.localRoot.id) {\n            allComponents.forEach((comp, index) => {\n                comp.eachComponent((component) => {\n                    component.page = index;\n                });\n            });\n        }\n        this.allPages = allComponents;\n    }\n    getSortedComponents({ components, originalComponents }) {\n        // sorts components if they were shuffled after the conditional logic\n        const currentComponents = [];\n        const currentPages = [];\n        if (components && components.length) {\n            components.map((page) => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        originalComponents === null || originalComponents === void 0 ? void 0 : originalComponents.forEach((item) => {\n            if (!item.key) {\n                item.key = item.title;\n            }\n            if (currentPages[item.key]) {\n                currentComponents.push(currentPages[item.key]);\n            }\n        });\n        return currentComponents;\n    }\n    findRootPanel(component) {\n        var _a;\n        return ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n    }\n    setRootPanelId(component) {\n        var _a;\n        if (component.rootPanelId && component.rootPanelId !== component.id) {\n            return;\n        }\n        const parent = ((_a = component.parent) === null || _a === void 0 ? void 0 : _a.parent) ? this.findRootPanel(component.parent) : component;\n        component.rootPanelId = parent.id;\n    }\n    establishPages(data = this.data) {\n        this.pages = [];\n        this.prefixComps = [];\n        this.suffixComps = [];\n        const visible = [];\n        const currentPages = {};\n        const pageOptions = Object.assign(Object.assign({}, lodash_1.default.clone(this.options)), (this.parent ? { root: this } : {}));\n        if (this.components && this.components.length) {\n            this.components.forEach((page) => {\n                if (page.component.type === 'panel') {\n                    currentPages[page.component.key || page.component.title] = page;\n                }\n            });\n        }\n        if (this.originalComponents) {\n            this.originalComponents.forEach((item) => {\n                if (item.type === 'panel') {\n                    if (!item.key) {\n                        item.key = item.title;\n                    }\n                    let page = currentPages[item.key];\n                    const forceShow = this.shouldForceShow(item);\n                    const forceHide = this.shouldForceHide(item);\n                    let isVisible = !page\n                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden\n                        : page.visible;\n                    if (forceShow) {\n                        isVisible = true;\n                    }\n                    else if (forceHide) {\n                        isVisible = false;\n                    }\n                    if (isVisible) {\n                        visible.push(item);\n                        if (page) {\n                            this.pages.push(page);\n                        }\n                    }\n                    if (!page && isVisible) {\n                        page = this.createComponent(item, pageOptions);\n                        page.visible = isVisible;\n                        this.pages.push(page);\n                        page.eachComponent((component) => {\n                            component.page = this.pages.length - 1;\n                        });\n                    }\n                }\n                else if (item.type !== 'button') {\n                    if (!this.pages.length) {\n                        this.prefixComps.push(this.createComponent(item, pageOptions));\n                    }\n                    else {\n                        this.suffixComps.push(this.createComponent(item, pageOptions));\n                    }\n                }\n            });\n        }\n        if (this.pages.length) {\n            this.emit('pagesChanged');\n        }\n        this.transformPages();\n        if (this.allPages && this.allPages.length) {\n            this.updatePages();\n        }\n        return visible;\n    }\n    updatePages() {\n        this.pages = this.allPages;\n    }\n    addComponents() {\n        this.establishPages();\n    }\n    setPage(num) {\n        if (num === this.page) {\n            return Promise.resolve();\n        }\n        if (num >= 0 && num < this.pages.length) {\n            this.page = num;\n            this.pageFieldLogic(num);\n            this.getNextPage();\n            let parentNum = num;\n            if (this.hasSubWizards) {\n                const pageFromPages = this.pages[num];\n                const pageFromComponents = this.components[num];\n                if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {\n                    parentNum = this.components.findIndex((comp) => {\n                        var _a, _b;\n                        return comp.id === ((_b = (_a = this.pages) === null || _a === void 0 ? void 0 : _a[parentNum]) === null || _b === void 0 ? void 0 : _b.rootPanelId);\n                    });\n                }\n            }\n            if (!this._seenPages.includes(parentNum)) {\n                this._seenPages = this._seenPages.concat(parentNum);\n            }\n            return this.redraw().then(() => {\n                var _a;\n                this.checkData(this.submission.data);\n                this.triggerCaptcha((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components);\n                const errors = this.submitted\n                    ? this.validate(this.localData, { dirty: true })\n                    : this.validateCurrentPage();\n                if (this.alert) {\n                    this.showErrors(errors, true, true);\n                }\n            });\n        }\n        else if (!this.pages.length) {\n            this.redraw();\n            return Promise.resolve();\n        }\n        return Promise.reject(this.t('pageNotFound'));\n    }\n    pageFieldLogic(page) {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[page]) {\n            // Handle field logic on pages.\n            this.component = this.pages[page].component;\n            this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);\n            this.fieldLogic(this.data);\n            // If disabled changed, be sure to distribute the setting.\n            this.disabled = this.shouldDisabled;\n        }\n    }\n    get currentPage() {\n        return this.pages && this.pages.length >= this.page\n            ? this.pages[this.page]\n            : { components: [] };\n    }\n    getNextPage() {\n        var _a;\n        if ((_a = this.pages) === null || _a === void 0 ? void 0 : _a[this.page]) {\n            const data = this.submission.data;\n            const form = this.pages[this.page].component;\n            // Check conditional nextPage\n            if (form) {\n                const page = this.pages.length > this.page + 1 && !this.showAllErrors ? this.page + 1 : -1;\n                if (form.nextPage) {\n                    const next = this.evaluate(form.nextPage, {\n                        next: page,\n                        data,\n                        page,\n                        form,\n                    }, 'next');\n                    if (next === null) {\n                        this.currentNextPage = null;\n                        return null;\n                    }\n                    const pageNum = parseInt(next, 10);\n                    if (!isNaN(parseInt(pageNum, 10)) && isFinite(pageNum)) {\n                        this.currentNextPage = pageNum;\n                        return pageNum;\n                    }\n                    this.currentNextPage = this.getPageIndexByKey(next);\n                    return this.currentNextPage;\n                }\n                this.currentNextPage = page;\n                return page;\n            }\n            this.currentNextPage = null;\n        }\n        return null;\n    }\n    getPreviousPage() {\n        return this.page - 1;\n    }\n    renderTemplate(...args) {\n        if (args[0] === 'errorsList' && lodash_1.default.isPlainObject(args[1])) {\n            const pages = this.getPages({ all: true });\n            const errors = args[1].errors;\n            if (lodash_1.default.isArray(errors)) {\n                lodash_1.default.forEach(errors, (compWithError) => {\n                    const pageNum = lodash_1.default.findIndex(pages, (page) => page.getComponent(compWithError.keyOrPath));\n                    if (pageNum >= 0) {\n                        compWithError.errorPageTitle = lodash_1.default.get(pages[pageNum], 'component.title');\n                    }\n                });\n            }\n        }\n        return super.renderTemplate(...args);\n    }\n    mergeDefaultsFromSchema(data) {\n        var _a, _b;\n        const components = (_a = this.form) === null || _a === void 0 ? void 0 : _a.components;\n        if (!components || !data || ((_b = this.options) === null || _b === void 0 ? void 0 : _b.readOnly)) {\n            return;\n        }\n        (0, utils_1.eachComponent)(components, (component, _path, _c, _parent, compPaths) => {\n            if (!(component === null || component === void 0 ? void 0 : component.key) ||\n                component.type === 'button' ||\n                component.persistent === 'client-only' ||\n                !component.hasOwnProperty('clearOnHide') ||\n                component.clearOnHide !== false ||\n                !component.hasOwnProperty('defaultValue')) {\n                return;\n            }\n            const modelType = (0, utils_1.getModelType)(component);\n            if (modelType === 'none' || modelType === 'content' || component.input === false) {\n                return;\n            }\n            const dataPath = (compPaths === null || compPaths === void 0 ? void 0 : compPaths.dataPath) || component.key;\n            if (!dataPath || lodash_1.default.get(data, dataPath) != null) {\n                return;\n            }\n            lodash_1.default.set(data, dataPath, component.defaultValue);\n        }, true);\n    }\n    beforeSubmit() {\n        this.mergeDefaultsFromSchema(this.data);\n        const pages = this.getPages({ all: true });\n        return Promise.all(pages.map((page) => {\n            this.triggerButtonCaptcha(page);\n            page.options.beforeSubmit = true;\n            return page.beforeSubmit();\n        }));\n    }\n    beforePage(next) {\n        return new Promise((resolve, reject) => {\n            this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {\n                if (err) {\n                    this.showErrors(err, true);\n                    reject(err);\n                }\n                const form = this.currentPage;\n                if (form) {\n                    form.beforePage(next).then(resolve).catch(reject);\n                }\n                else {\n                    resolve();\n                }\n            });\n        });\n    }\n    emitNextPage() {\n        this.emit('nextPage', { page: this.page, submission: this.submission });\n        this.announceCurrentPage();\n    }\n    nextPage() {\n        // Read-only forms should not worry about validation before going to next page, nor should they submit.\n        if (this.options.readOnly) {\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    this.emitNextPage();\n                });\n            });\n        }\n        // Validate the form before going to the next page\n        const currentPageErrors = this.validateCurrentPage({ dirty: true });\n        const errors = this.submitted\n            ? this.validate(this.localData, { dirty: true })\n            : currentPageErrors;\n        // allow going to the next page if the current page is valid, even if there are form level errors\n        if (currentPageErrors.length === 0) {\n            this.checkData(this.submission.data);\n            return this.beforePage(true).then(() => {\n                return this.setPage(this.getNextPage()).then(() => {\n                    if (!(this.options.readOnly || this.editMode) && this.enabledIndex < this.page) {\n                        this.enabledIndex = this.page;\n                        this.redraw();\n                    }\n                    this.emitNextPage();\n                });\n            });\n        }\n        else {\n            this.currentPage.components.forEach((comp) => comp.setPristine(false));\n            this.scrollIntoView(this.element, true);\n            return Promise.reject(this.showErrors(errors, true));\n        }\n    }\n    validateCurrentPage(flags = {}) {\n        var _a, _b, _d, _e, _f;\n        const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);\n        // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation\n        if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {\n            return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.parent.validateComponents(components, (_e = this.root) === null || _e === void 0 ? void 0 : _e.data, flags);\n        }\n        return (_f = this.currentPage) === null || _f === void 0 ? void 0 : _f.validateComponents(components, this.root ? this.root.data : this.data, flags);\n    }\n    emitPrevPage() {\n        this.emit('prevPage', { page: this.page, submission: this.submission });\n        this.announceCurrentPage();\n    }\n    announceCurrentPage() {\n        if (lodash_1.default.get(this.form, 'settings.wizardHeaderType', '') === 'StepIndicator') {\n            (0, utils_1.screenReaderSpeech)(`Now on step ${this.page + 1} of ${this.pages.length}: ${lodash_1.default.get(this.currentPage, 'component.title')}`);\n            const currentLink = lodash_1.default.get(this.refs, `${this.wizardKey}-link.[${this.page}]`);\n            if (currentLink) {\n                currentLink.focus();\n            }\n        }\n    }\n    prevPage() {\n        return this.beforePage().then(() => {\n            return this.setPage(this.getPreviousPage()).then(() => {\n                this.emitPrevPage();\n            });\n        });\n    }\n    cancel(noconfirm) {\n        if (this.options.readOnly) {\n            return Promise.resolve();\n        }\n        if (super.cancel(noconfirm)) {\n            this.setPristine(true);\n            return this.setPage(0).then(() => {\n                if (this.enabledIndex) {\n                    this.enabledIndex = 0;\n                }\n                this.onChange({ resetValue: true });\n                this.redraw();\n                return this.page;\n            });\n        }\n        return Promise.resolve();\n    }\n    getPageIndexByKey(key) {\n        let pageIndex = this.page;\n        this.pages.forEach((page, index) => {\n            if (page.component.key === key) {\n                pageIndex = index;\n                return false;\n            }\n        });\n        return pageIndex;\n    }\n    get schema() {\n        return this.wizard;\n    }\n    setComponentSchema() {\n        const pageKeys = {};\n        this.originalComponents = [];\n        this.component.components.map((item) => {\n            if (item.type === 'panel') {\n                item.key = (0, utils_1.uniqueKey)(pageKeys, item.key || 'panel');\n                pageKeys[item.key] = true;\n                if (this.wizard.full) {\n                    this.options.show = this.options.show || {};\n                    this.options.show[item.key] = true;\n                }\n                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full') &&\n                    !lodash_1.default.isEqual(this.originalOptions.show, this.options.show)) {\n                    this.options.show = Object.assign({}, (this.originalOptions.show || {}));\n                }\n            }\n            this.originalComponents.push(lodash_1.default.clone(item));\n        });\n        if (!Object.keys(pageKeys).length) {\n            const newPage = {\n                type: 'panel',\n                title: 'Page 1',\n                label: 'Page 1',\n                key: 'page1',\n                components: this.component.components,\n            };\n            this.component.components = [newPage];\n            this.originalComponents.push(lodash_1.default.clone(newPage));\n        }\n    }\n    setForm(form, flags = {}) {\n        if (!form) {\n            return;\n        }\n        return super.setForm(form, flags);\n    }\n    onSetForm(clonedForm, initialForm) {\n        this.component.components =\n            (this.parent ? initialForm.components : clonedForm.components) || [];\n        this.setComponentSchema();\n    }\n    setEditMode(submission) {\n        if (!this.editMode && submission._id && !this.options.readOnly) {\n            this.editMode = true;\n            this.redraw();\n        }\n    }\n    setValue(submission, flags = {}, ignoreEstablishment) {\n        if (!submission || !submission.data) {\n            submission = {\n                data: {},\n            };\n        }\n        const changed = this.getPages({ all: true }).reduce((changed, page) => {\n            return this.setNestedValue(page, submission.data, flags, changed) || changed;\n        }, false);\n        this.mergeData(this.data, submission.data);\n        if (changed) {\n            this.pageFieldLogic(this.page);\n        }\n        submission.data = this.data;\n        this._submission = submission;\n        if (!ignoreEstablishment) {\n            this.establishPages(submission.data);\n        }\n        this.setEditMode(submission);\n        return changed;\n    }\n    isClickable(page, index) {\n        return (this.page !== index &&\n            (0, utils_1.firstNonNil)([lodash_1.default.get(page, 'breadcrumbClickable'), this.options.breadcrumbSettings.clickable]));\n    }\n    hasButton(name, nextPage = this.getNextPage()) {\n        // get page options with global options as default values\n        const { previous = this.options.buttonSettings.showPrevious, cancel = this.options.buttonSettings.showCancel, submit = this.options.buttonSettings.showSubmit, next = this.options.buttonSettings.showNext, } = lodash_1.default.get(this.currentPage, 'component.buttonSettings', {});\n        switch (name) {\n            case 'previous':\n                return previous && this.getPreviousPage() > -1;\n            case 'next':\n                return next && nextPage !== null && nextPage !== -1;\n            case 'cancel':\n                return cancel && !this.options.readOnly;\n            case 'submit':\n                return (submit &&\n                    !this.options.readOnly &&\n                    (nextPage === null || this.page === this.pages.length - 1));\n            default:\n                return true;\n        }\n    }\n    pageId(page) {\n        if (page.key) {\n            // Some panels have the same key....\n            return `${page.key}-${page.title}`;\n        }\n        else if (page.components && page.components.length > 0) {\n            return this.pageId(page.components[0]);\n        }\n        else {\n            return page.title;\n        }\n    }\n    onChange(flags, changed, modified, changes) {\n        var _a;\n        super.onChange(flags, changed, modified, changes);\n        // The onChange loop doesn't need all components for wizards\n        const errors = (flags === null || flags === void 0 ? void 0 : flags.noValidate)\n            ? []\n            : this.submitted\n                ? this.validate(this.localData, { dirty: true })\n                : this.validateCurrentPage();\n        if (this.alert) {\n            this.showErrors(errors, true, true);\n        }\n        // If the pages change, need to redraw the header.\n        const currentPanels = this.pages;\n        // calling this.establishPages() updates/mutates this.pages to be the current pages\n        this.establishPages();\n        const newPanels = this.pages;\n        const currentNextPage = this.currentNextPage;\n        const panelsUpdated = !lodash_1.default.isEqual(newPanels, currentPanels);\n        if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.id) &&\n            this.pages.length &&\n            (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {\n            const newIndex = this.pages.findIndex((page) => page.id === this.currentPanel.id);\n            if (newIndex !== -1)\n                this.setPage(newIndex);\n        }\n        if (panelsUpdated || (flags && flags.fromSubmission)) {\n            this.redrawHeader();\n        }\n        // If the next page changes, then make sure to redraw navigation.\n        if (currentNextPage !== this.getNextPage()) {\n            this.redrawNavigation();\n        }\n        if (this.options.readOnly && (this.prefixComps.length || this.suffixComps.length)) {\n            this.redraw();\n        }\n    }\n    rebuild() {\n        const currentPage = this.page;\n        const setCurrentPage = () => this.setPage(currentPage);\n        return super.rebuild().then(setCurrentPage);\n    }\n    checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {\n        var _a;\n        if (!this.checkCondition(row, data)) {\n            this.setCustomValidity('');\n            return true;\n        }\n        const components = !currentPageOnly || this.isLastPage() ? this.getComponents() : (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components;\n        return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);\n    }\n    get errors() {\n        return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;\n    }\n    focusOnComponent(key) {\n        const component = this.getComponent(key);\n        if (component) {\n            let topPanel = component.parent;\n            while (!(topPanel.parent instanceof Wizard)) {\n                topPanel = topPanel.parent;\n            }\n            const pageIndex = this.pages.findIndex((page) => page.id === topPanel.id);\n            if (pageIndex >= 0) {\n                const page = this.pages[pageIndex];\n                if (page && page !== this.currentPage) {\n                    return this.setPage(pageIndex).then(() => super.focusOnComponent(key));\n                }\n            }\n        }\n        return super.focusOnComponent(key);\n    }\n    triggerButtonCaptcha(page) {\n        if (!page.components) {\n            return;\n        }\n        let captchaComponent;\n        page.eachComponent((component) => {\n            if (/^(re)?captcha$/.test(component.component.type) &&\n                component.component.eventType === 'buttonClick' &&\n                component.component.buttonKey === 'submit') {\n                captchaComponent = component;\n            }\n        });\n        if (captchaComponent) {\n            captchaComponent.verify(`submitClick`);\n        }\n    }\n}\nexports[\"default\"] = Wizard;\nWizard.setBaseUrl = Formio_1.Formio.setBaseUrl;\nWizard.setApiUrl = Formio_1.Formio.setApiUrl;\nWizard.setAppUrl = Formio_1.Formio.setAppUrl;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/Wizard.js?\n}");
 
 /***/ }),
 
@@ -8058,7 +8058,7 @@ eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod)
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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/.pnpm/lodash@4.18.1/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 */ \"./lib/cjs/utils/index.js\");\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"../../node_modules/.pnpm/dragula@3.7.3/node_modules/dragula/dragula.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        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        if (this.component.customDefaultValue) {\n            return defaultValue;\n        }\n        if (defaultValue.length === 1 && this.columns) {\n            (0, utils_1.eachComponent)(this.components, (comp, path) => {\n                var _a;\n                if (((_a = comp.component) === null || _a === void 0 ? void 0 : _a.input) && comp.defaultValue) {\n                    lodash_1.default.set(defaultValue[0], path, comp.defaultValue);\n                }\n            });\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 &&\n            !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.dragula = (0, dragula_1.default)([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            this.dragula.on('cloned', (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        }\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        //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    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        var _a;\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        (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, { modified: true, noPristineChangeOnModified: true });\n        this.redraw().then(() => {\n            this.focusOnNewRowElement(this.rows[index]);\n            this.announce(this.t('Row has been added'));\n        });\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            var _a;\n            // The rowIndex setter cascades into descendants and regenerates their\n            // paths, but does not re-key them in componentsMap. Collect the slot\n            // and every descendant up front so we can re-key them after paths\n            // regenerate. Required for nested-form / sub-wizard scenarios where\n            // the outer wizard validates against its own componentsMap copy.\n            const entries = [{ instance: component, oldPath: component.paths.dataPath }];\n            if (typeof component.everyComponent === 'function') {\n                component.everyComponent((descendant) => {\n                    entries.push({ instance: descendant, oldPath: descendant.paths.dataPath });\n                });\n            }\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            entries.forEach(({ instance, oldPath }) => {\n                instance.eachRootChildComponentsMap((map) => {\n                    if (map[oldPath] === instance) {\n                        delete map[oldPath];\n                    }\n                    map[instance.paths.dataPath] = instance;\n                });\n            });\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 = {\n            isReordered: !makeEmpty,\n            resetValue: makeEmpty,\n            modified: true,\n            noPristineChangeOnModified: true,\n        };\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().then(() => {\n            this.announce(this.t('Row has been deleted'));\n        });\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                var _a, _b, _c, _d;\n                const changedComponent = changed.component;\n                if ((changedComponent === null || changedComponent === void 0 ? void 0 : changedComponent.type) === 'form' && (changedComponent === null || changedComponent === void 0 ? void 0 : changedComponent.key)) {\n                    const formComp = (0, utils_1.getComponent)(this.component.components, changedComponent.key);\n                    lodash_1.default.set(formComp, 'components', changed.component.components);\n                }\n                // If we're in a nested form we need to ensure our changes are triggered upstream\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                    (_d = (_c = changed.instance.root).triggerChange) === null || _d === void 0 ? void 0 : _d.call(_c, flags, changed, modified);\n                }\n                else {\n                    if (modified && !flags.noPristineChangeOnModified) {\n                        this.pristine = false;\n                    }\n                    this.triggerRootChange(flags, {\n                        instance: this,\n                        component: this.component,\n                        value: this.dataValue,\n                        flags,\n                    }, modified);\n                    this.triggerRootChange(flags, changed, modified);\n                }\n                this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), row, lodash_1.default.toArray(this.rows[rowIndex]));\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 && 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] =\n                        !!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 ||\n            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?\n}");
+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/.pnpm/lodash@4.18.1/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 */ \"./lib/cjs/utils/index.js\");\nconst dragula_1 = __importDefault(__webpack_require__(/*! dragula */ \"../../node_modules/.pnpm/dragula@3.7.3/node_modules/dragula/dragula.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        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        if (this.component.customDefaultValue) {\n            return defaultValue;\n        }\n        if (defaultValue.length === 1 && this.columns) {\n            (0, utils_1.eachComponent)(this.components, (comp, path) => {\n                var _a;\n                if (((_a = comp.component) === null || _a === void 0 ? void 0 : _a.input) && comp.defaultValue) {\n                    lodash_1.default.set(defaultValue[0], path, comp.defaultValue);\n                }\n            });\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 &&\n            !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.dragula = (0, dragula_1.default)([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            this.dragula.on('cloned', (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        }\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        //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    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        var _a;\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        (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, { modified: true, noPristineChangeOnModified: true });\n        this.redraw().then(() => {\n            this.focusOnNewRowElement(this.rows[index]);\n            this.announce(this.t('Row has been added'));\n        });\n    }\n    updateComponentsRowIndex(components, rowIndex) {\n        components.forEach((component, colIndex) => {\n            var _a;\n            // The rowIndex setter cascades into descendants and regenerates their\n            // paths, but does not re-key them in componentsMap. Collect the slot\n            // and every descendant up front so we can re-key them after paths\n            // regenerate. Required for nested-form / sub-wizard scenarios where\n            // the outer wizard validates against its own componentsMap copy.\n            const entries = [{ instance: component, oldPath: component.paths.dataPath }];\n            if (typeof component.everyComponent === 'function') {\n                component.everyComponent((descendant) => {\n                    entries.push({ instance: descendant, oldPath: descendant.paths.dataPath });\n                });\n            }\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            entries.forEach(({ instance, oldPath }) => {\n                instance.eachRootChildComponentsMap((map) => {\n                    if (map[oldPath] === instance) {\n                        delete map[oldPath];\n                    }\n                    map[instance.paths.dataPath] = instance;\n                });\n            });\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 wasLastRow = index === this.rows.length - 1;\n        const flags = {\n            isReordered: !makeEmpty,\n            resetValue: makeEmpty,\n            modified: true,\n            noPristineChangeOnModified: true,\n        };\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().then(() => {\n            var _a, _b;\n            if (wasLastRow && (!makeEmpty || this.initEmpty)) {\n                (_b = (_a = this.refs[`${this.datagridKey}-addRow`]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.focus();\n            }\n            else {\n                this.focusOnNewRowElement(this.rows[index]);\n            }\n            this.announce(this.t('Row has been deleted'));\n        });\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                var _a, _b, _c, _d;\n                const changedComponent = changed.component;\n                if ((changedComponent === null || changedComponent === void 0 ? void 0 : changedComponent.type) === 'form' && (changedComponent === null || changedComponent === void 0 ? void 0 : changedComponent.key)) {\n                    const formComp = (0, utils_1.getComponent)(this.component.components, changedComponent.key);\n                    lodash_1.default.set(formComp, 'components', changed.component.components);\n                }\n                // If we're in a nested form we need to ensure our changes are triggered upstream\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                    (_d = (_c = changed.instance.root).triggerChange) === null || _d === void 0 ? void 0 : _d.call(_c, flags, changed, modified);\n                }\n                else {\n                    if (modified && !flags.noPristineChangeOnModified) {\n                        this.pristine = false;\n                    }\n                    this.triggerRootChange(flags, {\n                        instance: this,\n                        component: this.component,\n                        value: this.dataValue,\n                        flags,\n                    }, modified);\n                    this.triggerRootChange(flags, changed, modified);\n                }\n                this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), row, lodash_1.default.toArray(this.rows[rowIndex]));\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 && 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] =\n                        !!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 ||\n            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?\n}");
 
 /***/ }),
 
@@ -8135,7 +8135,7 @@ eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod)
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("{\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 }));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst downloadjs_1 = __importDefault(__webpack_require__(/*! downloadjs */ \"../../node_modules/.pnpm/downloadjs@1.4.7/node_modules/downloadjs/download.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst fileProcessor_1 = __importDefault(__webpack_require__(/*! ../../providers/processor/fileProcessor */ \"./lib/cjs/providers/processor/fileProcessor.js\"));\nconst browser_md5_file_1 = __importDefault(__webpack_require__(/*! browser-md5-file */ \"../../node_modules/.pnpm/browser-md5-file@1.1.1/node_modules/browser-md5-file/dist/index.umd.js\"));\nlet Camera;\nlet webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;\n// canvas.toBlob polyfill.\nlet htmlCanvasElement;\nif (typeof window !== 'undefined') {\n    htmlCanvasElement = window.HTMLCanvasElement;\n}\nelse if (typeof globalThis !== 'undefined') {\n    htmlCanvasElement = globalThis.HTMLCanvasElement;\n}\nif (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {\n    Object.defineProperty(htmlCanvasElement.prototype, 'toBlob', {\n        value: function (callback, type, quality) {\n            var canvas = this;\n            setTimeout(function () {\n                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len);\n                for (var i = 0; i < len; i++) {\n                    arr[i] = binStr.charCodeAt(i);\n                }\n                callback(new Blob([arr], { type: type || 'image/png' }));\n            });\n        },\n    });\n}\nconst createRandomString = () => Math.random().toString(36).substring(2, 15);\nclass FileComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'file',\n            label: 'Upload',\n            key: 'file',\n            image: false,\n            privateDownload: false,\n            imageSize: '200',\n            filePattern: '*',\n            fileMinSize: '0KB',\n            fileMaxSize: '1GB',\n            uploadOnly: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'File',\n            group: 'premium',\n            icon: 'file',\n            documentation: '/userguide/form-building/premium-components#file',\n            weight: 100,\n            schema: FileComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return FileComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        webViewCamera = navigator.camera || Camera;\n        const fileReaderSupported = typeof FileReader !== 'undefined';\n        const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;\n        const progressSupported = typeof window !== 'undefined' && window.XMLHttpRequest\n            ? 'upload' in new XMLHttpRequest()\n            : false;\n        this.support = {\n            filereader: fileReaderSupported,\n            formdata: formDataSupported,\n            hasWarning: !fileReaderSupported || !formDataSupported || !progressSupported,\n            progress: progressSupported,\n        };\n        this.cameraMode = false;\n        this.fileDropHidden = false;\n        this.filesToSync = {\n            filesToUpload: [],\n            filesToDelete: [],\n        };\n        this.isSyncing = false;\n        this.abortUploads = [];\n        this.pendingfiles = [];\n        this.resolvedFiles = [];\n    }\n    get dataReady() {\n        return this.filesReady || Promise.resolve();\n    }\n    get defaultSchema() {\n        return FileComponent.schema();\n    }\n    loadImage(fileInfo) {\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        // pass the component to the downloadFile method\n        return this.fileService.downloadFile(fileInfo, this.component).then((result) => result.url);\n    }\n    get emptyValue() {\n        return [];\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.review) && !this.component.uploadOnly) {\n            return lodash_1.default.map(value, (val, index) => {\n                return `<a href=\"${val.url || '#'}\" target=\"_blank\" data-path='${this.path}' data-fileindex='${index}'>${val.originalName}</a>`;\n            }).join(', ');\n        }\n        if (lodash_1.default.isArray(value)) {\n            return lodash_1.default.map(value, 'originalName').join(', ');\n        }\n        return lodash_1.default.get(value, 'originalName', '');\n    }\n    getValue() {\n        return this.dataValue;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        return Array.isArray(value) ? value : [];\n    }\n    get hasTypes() {\n        return (this.component.fileTypes &&\n            Array.isArray(this.component.fileTypes) &&\n            this.component.fileTypes.length !== 0 &&\n            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== ''));\n    }\n    get fileDropHidden() {\n        return this._fileBrowseHidden;\n    }\n    set fileDropHidden(value) {\n        if (typeof value !== 'boolean' || this.component.multiple) {\n            return;\n        }\n        this._fileBrowseHidden = value;\n    }\n    get shouldSyncFiles() {\n        return Boolean(this.filesToSync.filesToDelete.length || this.filesToSync.filesToUpload.length);\n    }\n    get autoSync() {\n        // Disable autoSync for now\n        return false;\n        // return _.get(this, 'component.autoSync', false);\n    }\n    get columnsSize() {\n        const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;\n        const typeColumn = this.hasTypes ? 2 : 0;\n        const sizeColumn = 2;\n        const nameColumn = 12 - actionsColumn - typeColumn - sizeColumn;\n        return {\n            name: nameColumn,\n            size: sizeColumn,\n            type: typeColumn,\n            actions: actionsColumn,\n        };\n    }\n    render() {\n        const { filesToDelete, filesToUpload } = this.filesToSync;\n        return super.render(this.renderTemplate('file', {\n            fileSize: this.fileSize,\n            files: this.dataValue || [],\n            filesToDelete,\n            filesToUpload,\n            disabled: this.disabled,\n            support: this.support,\n            fileDropHidden: this.fileDropHidden,\n            showSyncButton: this.autoSync && (filesToDelete.length || filesToUpload.length),\n            isSyncing: this.isSyncing,\n            columns: this.columnsSize,\n        }));\n    }\n    getVideoStream(constraints) {\n        return navigator.mediaDevices.getUserMedia({\n            video: Object.assign({ width: { min: 640, ideal: 1920 }, height: { min: 360, ideal: 1080 }, aspectRatio: { ideal: 16 / 9 } }, constraints),\n            audio: false,\n        });\n    }\n    stopVideoStream(videoStream) {\n        videoStream.getVideoTracks().forEach((track) => track.stop());\n    }\n    getFrame(videoPlayer) {\n        return new Promise((resolve) => {\n            const canvas = document.createElement('canvas');\n            canvas.height = videoPlayer.videoHeight;\n            canvas.width = videoPlayer.videoWidth;\n            const context = canvas.getContext('2d');\n            context.drawImage(videoPlayer, 0, 0);\n            canvas.toBlob(resolve);\n        });\n    }\n    startVideo() {\n        this.getVideoStream()\n            .then((stream) => {\n            this.videoStream = stream;\n            const { videoPlayer } = this.refs;\n            if (!videoPlayer) {\n                console.warn(this.t('videoPlayerNotFound'));\n                this.cameraMode = false;\n                this.redraw();\n                return;\n            }\n            videoPlayer.srcObject = stream;\n            const width = parseInt(this.component.webcamSize) || 320;\n            videoPlayer.setAttribute('width', width);\n            videoPlayer.play();\n        })\n            .catch((err) => {\n            console.error(err);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    stopVideo() {\n        if (this.videoStream) {\n            this.stopVideoStream(this.videoStream);\n            this.videoStream = null;\n        }\n    }\n    takePicture() {\n        const { videoPlayer } = this.refs;\n        if (!videoPlayer) {\n            console.warn(this.t('videoPlayerNotFound'));\n            this.cameraMode = false;\n            this.redraw();\n            return;\n        }\n        this.getFrame(videoPlayer).then((frame) => {\n            frame.name = `photo-${Date.now()}.png`;\n            this.handleFilesToUpload([frame]);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    browseFiles(attrs = {}) {\n        return new Promise((resolve) => {\n            const fileInput = this.ce('input', Object.assign({ type: 'file', style: 'height: 0; width: 0; visibility: hidden;', tabindex: '-1' }, attrs));\n            document.body.appendChild(fileInput);\n            fileInput.addEventListener('change', () => {\n                resolve(fileInput.files);\n                document.body.removeChild(fileInput);\n            }, true);\n            // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n            // a click event on it.\n            if (typeof fileInput.trigger === 'function') {\n                fileInput.trigger('click');\n            }\n            else {\n                fileInput.click();\n            }\n        });\n    }\n    set cameraMode(value) {\n        this._cameraMode = value;\n        if (value) {\n            this.startVideo();\n        }\n        else {\n            this.stopVideo();\n        }\n    }\n    get cameraMode() {\n        return this._cameraMode;\n    }\n    get useWebViewCamera() {\n        return this.imageUpload && webViewCamera;\n    }\n    get imageUpload() {\n        return Boolean(this.component.image);\n    }\n    get browseOptions() {\n        const options = {};\n        if (this.component.multiple) {\n            options.multiple = true;\n        }\n        if (this.component.capture) {\n            options.capture = this.component.capture;\n        }\n        //use \"accept\" attribute only for desktop devices because of its limited support by mobile browsers\n        const filePattern = this.component.filePattern.trim() || '';\n        if (!this.isMobile.any) {\n            const imagesPattern = 'image/*';\n            if (this.imageUpload && (!filePattern || filePattern === '*')) {\n                options.accept = imagesPattern;\n            }\n            else if (this.imageUpload && !filePattern.includes(imagesPattern)) {\n                options.accept = `${imagesPattern},${filePattern}`;\n            }\n            else {\n                options.accept = filePattern;\n            }\n        }\n        // if input capture is set, we need the \"accept\" attribute to determine which device to launch\n        else if (this.component.capture) {\n            if (filePattern.includes('video')) {\n                options.accept = 'video/*';\n            }\n            else if (filePattern.includes('audio')) {\n                options.accept = 'audio/*';\n            }\n            else {\n                options.accept = 'image/*';\n            }\n        }\n        return options;\n    }\n    get actions() {\n        return {\n            abort: this.abortRequest.bind(this),\n        };\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            fileDrop: 'single',\n            fileBrowse: 'single',\n            galleryButton: 'single',\n            cameraButton: 'single',\n            takePictureButton: 'single',\n            toggleCameraMode: 'single',\n            videoPlayer: 'single',\n            fileLink: 'multiple',\n            removeLink: 'multiple',\n            fileToSyncRemove: 'multiple',\n            fileImage: 'multiple',\n            fileType: 'multiple',\n            fileProcessingLoader: 'single',\n            syncNow: 'single',\n            restoreFile: 'multiple',\n            progress: 'multiple',\n        });\n        // Ensure we have an empty input refs. We need this for the setValue method to redraw the control when it is set.\n        this.refs.input = [];\n        const superAttach = super.attach(element);\n        if (this.refs.fileDrop) {\n            // if (!this.statuses.length) {\n            //   this.refs.fileDrop.removeAttribute('hidden');\n            // }\n            const _this = this;\n            this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n                this.className = 'fileSelector fileDragOver';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n                _this.handleFilesToUpload(event.dataTransfer.files);\n            });\n        }\n        this.addEventListener(element, 'click', (event) => {\n            this.handleAction(event);\n        });\n        if (this.refs.fileBrowse) {\n            this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n                event.preventDefault();\n                this.browseFiles(this.browseOptions).then((files) => {\n                    this.handleFilesToUpload(files);\n                });\n            });\n        }\n        this.refs.fileLink.forEach((fileLink, index) => {\n            this.addEventListener(fileLink, 'click', (event) => {\n                event.preventDefault();\n                this.getFile(this.dataValue[index]);\n            });\n        });\n        this.refs.removeLink.forEach((removeLink, index) => {\n            this.addEventListener(removeLink, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.dataValue[index];\n                this.handleFileToRemove(fileInfo);\n            });\n        });\n        this.refs.fileToSyncRemove.forEach((fileToSyncRemove, index) => {\n            this.addEventListener(fileToSyncRemove, 'click', (event) => {\n                event.preventDefault();\n                this.filesToSync.filesToUpload.splice(index, 1);\n                this.redraw();\n            });\n        });\n        this.refs.restoreFile.forEach((fileToRestore, index) => {\n            this.addEventListener(fileToRestore, 'click', (event) => {\n                var _a;\n                event.preventDefault();\n                const fileInfo = this.filesToSync.filesToDelete[index];\n                delete fileInfo.status;\n                delete fileInfo.message;\n                this.filesToSync.filesToDelete.splice(index, 1);\n                this.dataValue.push(fileInfo);\n                (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this);\n                this.redraw();\n            });\n        });\n        if (this.refs.galleryButton && webViewCamera) {\n            this.addEventListener(this.refs.galleryButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.PHOTOLIBRARY,\n                });\n            });\n        }\n        if (this.refs.cameraButton && webViewCamera) {\n            this.addEventListener(this.refs.cameraButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.CAMERA,\n                    encodingType: webViewCamera.EncodingType.PNG,\n                    mediaType: webViewCamera.MediaType.PICTURE,\n                    saveToPhotoAlbum: true,\n                    correctOrientation: false,\n                });\n            });\n        }\n        if (this.refs.takePictureButton) {\n            this.addEventListener(this.refs.takePictureButton, 'click', (event) => {\n                event.preventDefault();\n                this.takePicture();\n            });\n        }\n        if (this.refs.toggleCameraMode) {\n            this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {\n                event.preventDefault();\n                this.cameraMode = !this.cameraMode;\n                this.redraw();\n            });\n        }\n        this.refs.fileType.forEach((fileType, index) => {\n            if (!this.dataValue[index]) {\n                return;\n            }\n            this.dataValue[index].fileType =\n                this.dataValue[index].fileType || this.component.fileTypes[0].label;\n            this.addEventListener(fileType, 'change', (event) => {\n                event.preventDefault();\n                const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);\n                this.dataValue[index].fileType = fileType.label;\n            });\n        });\n        this.addEventListener(this.refs.syncNow, 'click', (event) => {\n            event.preventDefault();\n            this.syncFiles();\n        });\n        const fileService = this.fileService;\n        if (fileService) {\n            const loadingImages = [];\n            this.filesReady = new Promise((resolve, reject) => {\n                this.filesReadyResolve = resolve;\n                this.filesReadyReject = reject;\n            });\n            this.refs.fileImage.forEach((image, index) => {\n                loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));\n            });\n            if (loadingImages.length) {\n                Promise.all(loadingImages)\n                    .then(() => {\n                    this.filesReadyResolve();\n                })\n                    .catch(() => this.filesReadyReject());\n            }\n            else {\n                this.filesReadyResolve();\n            }\n        }\n        return superAttach;\n    }\n    fileSize(a, b, c, d, e) {\n        return `${((b = Math), (c = b.log), (d = 1024), (e = (c(a) / c(d)) | 0), a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;\n    }\n    globStringToRegex(str) {\n        str = str.replace(/\\s/g, '');\n        let regexp = '', excludes = [];\n        if (str.length > 2 && str[0] === '/' && str[str.length - 1] === '/') {\n            regexp = str.substring(1, str.length - 1);\n        }\n        else {\n            const split = str.split(',');\n            if (split.length > 1) {\n                for (let i = 0; i < split.length; i++) {\n                    const r = this.globStringToRegex(split[i]);\n                    if (r.regexp) {\n                        regexp += `(${r.regexp})`;\n                        if (i < split.length - 1) {\n                            regexp += '|';\n                        }\n                    }\n                    else {\n                        excludes = excludes.concat(r.excludes);\n                    }\n                }\n            }\n            else {\n                if (str.startsWith('!')) {\n                    excludes.push(`^((?!${this.globStringToRegex(str.substring(1)).regexp}).)*$`);\n                }\n                else {\n                    if (str.startsWith('.')) {\n                        str = `*${str}`;\n                    }\n                    regexp = `^${str.replace(new RegExp('[.\\\\\\\\+*?\\\\[\\\\^\\\\]$(){}=!<>|:\\\\-]', 'g'), '\\\\$&')}$`;\n                    regexp = regexp.replace(/\\\\\\*/g, '.*').replace(/\\\\\\?/g, '.');\n                }\n            }\n        }\n        return { regexp, excludes };\n    }\n    translateScalars(str) {\n        if (typeof str === 'string') {\n            if (str.search(/kb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024);\n            }\n            if (str.search(/mb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024);\n            }\n            if (str.search(/gb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024 * 1024);\n            }\n            if (str.search(/b/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/s/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/m/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 60);\n            }\n            if (str.search(/h/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 3600);\n            }\n        }\n        return str;\n    }\n    validatePattern(file, val) {\n        if (!val) {\n            return true;\n        }\n        const pattern = this.globStringToRegex(val);\n        let valid = true;\n        if (pattern.regexp && pattern.regexp.length) {\n            const regexp = new RegExp(pattern.regexp, 'i');\n            valid =\n                (!lodash_1.default.isNil(file.type) && regexp.test(file.type)) ||\n                    (!lodash_1.default.isNil(file.name) && regexp.test(file.name));\n        }\n        valid = pattern.excludes.reduce((result, excludePattern) => {\n            const exclude = new RegExp(excludePattern, 'i');\n            return (result &&\n                (lodash_1.default.isNil(file.type) || exclude.test(file.type)) &&\n                (lodash_1.default.isNil(file.name) || exclude.test(file.name)));\n        }, valid);\n        return valid;\n    }\n    validateMinSize(file, val) {\n        return file.size + 0.1 >= this.translateScalars(val);\n    }\n    validateMaxSize(file, val) {\n        return file.size - 0.1 <= this.translateScalars(val);\n    }\n    abortRequest(id) {\n        const abortUpload = this.abortUploads.find((abortUpload) => abortUpload.id === id);\n        if (abortUpload) {\n            abortUpload.abort();\n        }\n    }\n    handleAction(event) {\n        const target = event.target;\n        if (!target.id) {\n            return;\n        }\n        const [action, id] = target.id.split('-');\n        if (!action || !id || !this.actions[action]) {\n            return;\n        }\n        this.actions[action](id);\n    }\n    getFileName(file) {\n        return (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());\n    }\n    getInitFileToSync(file) {\n        const escapedFileName = file.name\n            ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;')\n            : file.name;\n        return {\n            id: createRandomString(),\n            // Get a unique name for this file to keep file collisions from occurring.\n            dir: this.interpolate(this.component.dir || ''),\n            name: this.getFileName(file),\n            originalName: escapedFileName,\n            fileKey: this.component.fileKey || 'file',\n            storage: this.component.storage,\n            options: this.component.options,\n            file,\n            size: file.size,\n            status: 'info',\n            message: this.t('waitFileProcessing'),\n            hash: '',\n        };\n    }\n    handleSubmissionRevisions(file) {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            if (((_a = this.root) === null || _a === void 0 ? void 0 : _a.form.submissionRevisions) !== 'true') {\n                return '';\n            }\n            const bmf = new browser_md5_file_1.default();\n            const hash = yield new Promise((resolve, reject) => {\n                this.emit('fileUploadingStart');\n                bmf.md5(file, (err, md5) => {\n                    if (err) {\n                        return reject(err);\n                    }\n                    return resolve(md5);\n                });\n            });\n            this.emit('fileUploadingEnd');\n            return hash;\n        });\n    }\n    validateFileName(file) {\n        // Check if file with the same name is being uploaded\n        const fileWithSameNameUploading = this.filesToSync.filesToUpload.some((fileToSync) => { var _a; return ((_a = fileToSync.file) === null || _a === void 0 ? void 0 : _a.name) === file.name; });\n        const fileWithSameNameUploaded = lodash_1.default.some(this.dataValue, (fileStatus) => fileStatus.originalName === file.name);\n        return fileWithSameNameUploaded || fileWithSameNameUploading\n            ? {\n                status: 'error',\n                message: this.t(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),\n            }\n            : {};\n    }\n    validateFileSettings(file) {\n        // Check file pattern\n        if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {\n            return {\n                status: 'error',\n                message: this.t('wrongFileType', {\n                    pattern: this.component.filePattern,\n                }),\n            };\n        }\n        // Check file minimum size\n        if (this.component.fileMinSize) {\n            const interpolatedMinSize = this.interpolate(this.component.fileMinSize, this.evalContext());\n            // This case is when the user entered fileMinSize expression, but did not enter or made a typo when\n            // setting the fileMinSize variable in the config of the project\n            if (!interpolatedMinSize) {\n                return {\n                    status: 'error',\n                    message: this.t('checkEnteredParameters'),\n                };\n            }\n            if (!this.validateMinSize(file, interpolatedMinSize)) {\n                return {\n                    status: 'error',\n                    message: this.t('fileTooSmall', {\n                        size: interpolatedMinSize,\n                    }),\n                };\n            }\n        }\n        // Check file maximum size\n        if (this.component.fileMaxSize) {\n            const interpolatedMaxSize = this.interpolate(this.component.fileMaxSize, this.evalContext());\n            if (!interpolatedMaxSize) {\n                return {\n                    status: 'error',\n                    message: this.t('checkEnteredParameters'),\n                };\n            }\n            if (!this.validateMaxSize(file, interpolatedMaxSize)) {\n                return {\n                    status: 'error',\n                    message: this.t('fileTooBig', {\n                        size: interpolatedMaxSize,\n                    }),\n                };\n            }\n        }\n        return {};\n    }\n    validateFileService() {\n        const { fileService } = this;\n        return !fileService\n            ? {\n                status: 'error',\n                message: this.t('noFileService'),\n            }\n            : {};\n    }\n    validateFile(file) {\n        const fileServiceValidation = this.validateFileService();\n        if (fileServiceValidation.status === 'error') {\n            return fileServiceValidation;\n        }\n        const fileNameValidation = this.validateFileName(file);\n        if (fileNameValidation.status === 'error') {\n            return fileNameValidation;\n        }\n        return this.validateFileSettings(file);\n    }\n    getGroupPermissions() {\n        var _a;\n        let groupKey = null;\n        let groupPermissions = null;\n        //Iterate through form components to find group resource if one exists\n        (_a = this.root) === null || _a === void 0 ? void 0 : _a.everyComponent((element) => {\n            var _a, _b;\n            if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {\n                groupPermissions = !element.component.submissionAccess\n                    ? [\n                        {\n                            type: element.component.defaultPermission,\n                            roles: [],\n                        },\n                    ]\n                    : element.component.submissionAccess;\n                groupPermissions.forEach((permission) => {\n                    groupKey = ['admin', 'write', 'create'].includes(permission.type)\n                        ? element.component.key\n                        : null;\n                });\n            }\n        });\n        return { groupKey, groupPermissions };\n    }\n    triggerFileProcessor(file) {\n        var _a, _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            let processedFile = null;\n            if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.options.fileProcessor) {\n                try {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'block';\n                    }\n                    const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, (_b = this.root) === null || _b === void 0 ? void 0 : _b.options.fileProcessor);\n                    processedFile = yield fileProcessorHandler(file, this.component.properties);\n                }\n                catch (ignoreErr) {\n                    this.fileDropHidden = false;\n                    return {\n                        status: 'error',\n                        message: this.t('fileProcessingFailed'),\n                    };\n                }\n                finally {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'none';\n                    }\n                }\n            }\n            return {\n                file: processedFile,\n            };\n        });\n    }\n    prepareFileToUpload(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const fileToSync = this.getInitFileToSync(file);\n            fileToSync.hash = yield this.handleSubmissionRevisions(file);\n            const { status, message } = this.validateFile(file);\n            if (status === 'error') {\n                fileToSync.isValidationError = true;\n                fileToSync.status = status;\n                fileToSync.message = message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.component.privateDownload) {\n                file.private = true;\n            }\n            const { groupKey, groupPermissions } = this.getGroupPermissions();\n            const processedFile = yield this.triggerFileProcessor(file);\n            if (processedFile.status === 'error') {\n                fileToSync.status === 'error';\n                fileToSync.message = processedFile.message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.autoSync) {\n                fileToSync.message = this.t('readyForUpload');\n            }\n            this.filesToSync.filesToUpload.push(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));\n        });\n    }\n    prepareFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Only allow one upload if not multiple.\n            if (!this.component.multiple) {\n                files = Array.prototype.slice.call(files, 0, 1);\n            }\n            if (this.component.storage && files && files.length) {\n                this.fileDropHidden = true;\n                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {\n                    yield this.prepareFileToUpload(file);\n                    this.redraw();\n                })));\n            }\n            else {\n                return Promise.resolve();\n            }\n        });\n    }\n    handleFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            yield this.prepareFilesToUpload(files);\n            if (!this.autoSync) {\n                yield this.syncFiles();\n            }\n        });\n    }\n    prepareFileToDelete(fileInfo) {\n        this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, fileInfo), { status: 'info', message: this.autoSync\n                ? this.t('readyForRemovingFromStorage')\n                : this.t('preparingFileToRemove') }));\n        const index = this.dataValue.findIndex((file) => file.name === fileInfo.name);\n        this.splice(index);\n        this.redraw();\n    }\n    handleFileToRemove(fileInfo) {\n        this.prepareFileToDelete(fileInfo);\n        if (!this.autoSync) {\n            this.syncFiles();\n        }\n    }\n    deleteFile(fileInfo) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const { options = {} } = this.component;\n            if (fileInfo &&\n                ['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage)) {\n                const { fileService } = this;\n                if (fileService && typeof fileService.deleteFile === 'function') {\n                    return yield fileService.deleteFile(fileInfo, options);\n                }\n                else {\n                    const formio = this.options.formio || (this.root && this.root.formio);\n                    if (formio) {\n                        return yield formio.makeRequest('', fileInfo.url, 'delete');\n                    }\n                }\n            }\n        });\n    }\n    delete() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToDelete.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToDelete.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                try {\n                    if (fileToSync.isValidationError) {\n                        return { fileToSync };\n                    }\n                    yield this.deleteFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('succefullyRemoved');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt((100.0 * progressEvent.loaded) / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, (progressElement) => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart\n            ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                    count++;\n                    fileToSync.status = 'progress';\n                    fileToSync.progress = parseInt((100 * count) / total);\n                    delete fileToSync.message;\n                    this.redraw();\n                }, changeMessage: (message) => {\n                    fileToSync.message = message;\n                    this.redraw();\n                } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const filePromise = this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {\n                this.emit('fileUploadingStart', filePromise);\n            }, \n            // Abort upload callback\n            (abort) => this.abortUploads.push({\n                id: fileToSync.id,\n                abort,\n            }), this.getMultipartOptions(fileToSync));\n            return yield filePromise;\n        });\n    }\n    upload() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToUpload.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToUpload.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                let fileInfo = null;\n                try {\n                    if (fileToSync.isValidationError) {\n                        return {\n                            fileToSync,\n                            fileInfo,\n                        };\n                    }\n                    if (fileToSync.status === 'success') {\n                        const uploadedFile = this.resolvedFiles.find((x) => x.fileToSync.originalName === fileToSync.originalName);\n                        return {\n                            fileToSync: uploadedFile.fileToSync,\n                            fileInfo: uploadedFile.fileInfo,\n                        };\n                    }\n                    const pendingFile = this.pendingfiles.find((x) => x.name === fileToSync.name);\n                    if (pendingFile) {\n                        fileInfo = yield pendingFile.fileInfoProm;\n                    }\n                    else {\n                        const promInfo = this.uploadFile(fileToSync);\n                        this.pendingfiles.push({ name: fileToSync.name, fileInfoProm: promInfo });\n                        fileInfo = yield promInfo;\n                    }\n                    this.pendingfiles = this.pendingfiles.filter((x) => x.name !== fileToSync.name);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('succefullyUploaded');\n                    fileInfo.originalName = fileToSync.originalName;\n                    fileInfo.hash = fileToSync.hash;\n                    this.emit('fileUploadingEnd', Promise.resolve(fileInfo));\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    delete fileToSync.progress;\n                    fileToSync.message =\n                        typeof response === 'string'\n                            ? response\n                            : response.type === 'abort'\n                                ? this.t('requestAborted')\n                                : response.toString();\n                    this.emit('fileUploadingEnd', Promise.reject(response));\n                    this.emit(lodash_1.default.get(response, 'type') === 'abort' ? 'fileUploadCanceled' : 'fileUploadError', {\n                        fileToSync,\n                        response,\n                    });\n                }\n                finally {\n                    delete fileToSync.progress;\n                    this.redraw();\n                    if (fileInfo) {\n                        const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);\n                        if (!fileExists && fileToSync.status !== 'error') {\n                            this.resolvedFiles.push({ fileToSync, fileInfo });\n                        }\n                    }\n                }\n                return {\n                    fileToSync,\n                    fileInfo,\n                };\n            })));\n        });\n    }\n    syncFiles() {\n        var _a, _b, _c;\n        return __awaiter(this, void 0, void 0, function* () {\n            this.isSyncing = true;\n            this.fileDropHidden = true;\n            this.redraw();\n            try {\n                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([\n                    this.delete(),\n                    this.upload(),\n                ]);\n                if (filesToUpload.length !== ((_b = (_a = this.filesToSync) === null || _a === void 0 ? void 0 : _a.filesToUpload) === null || _b === void 0 ? void 0 : _b.length)) {\n                    return;\n                }\n                this.filesToSync.filesToDelete = filesToDelete\n                    .filter((file) => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map((file) => file.fileToSync);\n                this.filesToSync.filesToUpload = filesToUpload\n                    .filter((file) => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map((file) => file.fileToSync);\n                if (!this.hasValue()) {\n                    this.dataValue = [];\n                }\n                const data = filesToUpload\n                    .filter((file) => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })\n                    .map((file) => file.fileInfo);\n                this.dataValue.push(...data);\n                (_c = this.triggerChange) === null || _c === void 0 ? void 0 : _c.call(this, {\n                    modified: true,\n                });\n                return Promise.resolve();\n            }\n            catch (ignoreErr) {\n                return Promise.reject();\n            }\n            finally {\n                this.isSyncing = false;\n                this.fileDropHidden = false;\n                this.abortUploads = [];\n                this.redraw();\n            }\n        });\n    }\n    getFile(fileInfo) {\n        const { options = {} } = this.component;\n        const { fileService } = this;\n        if (!fileService) {\n            return alert(this.t('noFileService'));\n        }\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        fileService\n            .downloadFile(fileInfo, options)\n            .then((file) => {\n            if (file) {\n                if (['base64', 'indexeddb'].includes(file.storage)) {\n                    (0, downloadjs_1.default)(file.url, file.originalName || file.name, file.type);\n                }\n                else {\n                    window.open(file.url, '_blank');\n                }\n            }\n        })\n            .catch((response) => {\n            // Is alert the best way to do this?\n            // User is expecting an immediate notification due to attempting to download a file.\n            alert(response);\n        });\n    }\n    focus() {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (this.refs.fileBrowse) {\n            this.refs.fileBrowse.focus();\n        }\n    }\n    beforeSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (!this.autoSync) {\n                    return Promise.resolve();\n                }\n                yield this.syncFiles();\n                return this.shouldSyncFiles ? Promise.reject(this.t('synchronizationFailed')) : Promise.resolve();\n            }\n            catch (error) {\n                return Promise.reject(error.message);\n            }\n        });\n    }\n    destroy(all) {\n        this.stopVideo();\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = FileComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/file/File.js?\n}");
+eval("{\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 }));\nconst Field_1 = __importDefault(__webpack_require__(/*! ../_classes/field/Field */ \"./lib/cjs/components/_classes/field/Field.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nconst downloadjs_1 = __importDefault(__webpack_require__(/*! downloadjs */ \"../../node_modules/.pnpm/downloadjs@1.4.7/node_modules/downloadjs/download.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst fileProcessor_1 = __importDefault(__webpack_require__(/*! ../../providers/processor/fileProcessor */ \"./lib/cjs/providers/processor/fileProcessor.js\"));\nconst browser_md5_file_1 = __importDefault(__webpack_require__(/*! browser-md5-file */ \"../../node_modules/.pnpm/browser-md5-file@1.1.1/node_modules/browser-md5-file/dist/index.umd.js\"));\nlet Camera;\nlet webViewCamera = 'undefined' !== typeof window ? navigator.camera : Camera;\n// canvas.toBlob polyfill.\nlet htmlCanvasElement;\nif (typeof window !== 'undefined') {\n    htmlCanvasElement = window.HTMLCanvasElement;\n}\nelse if (typeof globalThis !== 'undefined') {\n    htmlCanvasElement = globalThis.HTMLCanvasElement;\n}\nif (htmlCanvasElement && !htmlCanvasElement.prototype.toBlob) {\n    Object.defineProperty(htmlCanvasElement.prototype, 'toBlob', {\n        value: function (callback, type, quality) {\n            var canvas = this;\n            setTimeout(function () {\n                var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]), len = binStr.length, arr = new Uint8Array(len);\n                for (var i = 0; i < len; i++) {\n                    arr[i] = binStr.charCodeAt(i);\n                }\n                callback(new Blob([arr], { type: type || 'image/png' }));\n            });\n        },\n    });\n}\nconst createRandomString = () => Math.random().toString(36).substring(2, 15);\nclass FileComponent extends Field_1.default {\n    static schema(...extend) {\n        return Field_1.default.schema({\n            type: 'file',\n            label: 'Upload',\n            key: 'file',\n            image: false,\n            privateDownload: false,\n            imageSize: '200',\n            filePattern: '*',\n            fileMinSize: '0KB',\n            fileMaxSize: '1GB',\n            uploadOnly: false,\n            options: {},\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'File',\n            group: 'premium',\n            icon: 'file',\n            documentation: '/userguide/form-building/premium-components#file',\n            weight: 100,\n            schema: FileComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return FileComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];\n    }\n    init() {\n        super.init();\n        webViewCamera = navigator.camera || Camera;\n        const fileReaderSupported = typeof FileReader !== 'undefined';\n        const formDataSupported = typeof window !== 'undefined' ? Boolean(window.FormData) : false;\n        const progressSupported = typeof window !== 'undefined' && window.XMLHttpRequest\n            ? 'upload' in new XMLHttpRequest()\n            : false;\n        this.support = {\n            filereader: fileReaderSupported,\n            formdata: formDataSupported,\n            hasWarning: !fileReaderSupported || !formDataSupported || !progressSupported,\n            progress: progressSupported,\n        };\n        this.cameraMode = false;\n        this.fileDropHidden = false;\n        this.filesToSync = {\n            filesToUpload: [],\n            filesToDelete: [],\n        };\n        this.isSyncing = false;\n        this.abortUploads = [];\n        this.pendingfiles = [];\n        this.resolvedFiles = [];\n    }\n    get dataReady() {\n        return this.filesReady || Promise.resolve();\n    }\n    get defaultSchema() {\n        return FileComponent.schema();\n    }\n    loadImage(fileInfo) {\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        // pass the component to the downloadFile method\n        return this.fileService.downloadFile(fileInfo, this.component).then((result) => result.url);\n    }\n    get emptyValue() {\n        return [];\n    }\n    getValueAsString(value, options) {\n        if ((options === null || options === void 0 ? void 0 : options.review) && !this.component.uploadOnly && !(options === null || options === void 0 ? void 0 : options.pdf)) {\n            return lodash_1.default.map(value, (val, index) => {\n                return `<a href=\"${val.url || '#'}\" target=\"_blank\" data-path='${this.path}' data-fileindex='${index}'>${val.originalName}</a>`;\n            }).join(', ');\n        }\n        if (lodash_1.default.isArray(value)) {\n            return lodash_1.default.map(value, 'originalName').join(', ');\n        }\n        return lodash_1.default.get(value, 'originalName', '');\n    }\n    getValue() {\n        return this.dataValue;\n    }\n    get defaultValue() {\n        const value = super.defaultValue;\n        return Array.isArray(value) ? value : [];\n    }\n    get hasTypes() {\n        return (this.component.fileTypes &&\n            Array.isArray(this.component.fileTypes) &&\n            this.component.fileTypes.length !== 0 &&\n            (this.component.fileTypes[0].label !== '' || this.component.fileTypes[0].value !== ''));\n    }\n    get fileDropHidden() {\n        return this._fileBrowseHidden;\n    }\n    set fileDropHidden(value) {\n        if (typeof value !== 'boolean' || this.component.multiple) {\n            return;\n        }\n        this._fileBrowseHidden = value;\n    }\n    get shouldSyncFiles() {\n        return Boolean(this.filesToSync.filesToDelete.length || this.filesToSync.filesToUpload.length);\n    }\n    get autoSync() {\n        // Disable autoSync for now\n        return false;\n        // return _.get(this, 'component.autoSync', false);\n    }\n    get columnsSize() {\n        const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;\n        const typeColumn = this.hasTypes ? 2 : 0;\n        const sizeColumn = 2;\n        const nameColumn = 12 - actionsColumn - typeColumn - sizeColumn;\n        return {\n            name: nameColumn,\n            size: sizeColumn,\n            type: typeColumn,\n            actions: actionsColumn,\n        };\n    }\n    render() {\n        const { filesToDelete, filesToUpload } = this.filesToSync;\n        return super.render(this.renderTemplate('file', {\n            fileSize: this.fileSize,\n            files: this.dataValue || [],\n            filesToDelete,\n            filesToUpload,\n            disabled: this.disabled,\n            support: this.support,\n            fileDropHidden: this.fileDropHidden,\n            showSyncButton: this.autoSync && (filesToDelete.length || filesToUpload.length),\n            isSyncing: this.isSyncing,\n            columns: this.columnsSize,\n        }));\n    }\n    getVideoStream(constraints) {\n        return navigator.mediaDevices.getUserMedia({\n            video: Object.assign({ width: { min: 640, ideal: 1920 }, height: { min: 360, ideal: 1080 }, aspectRatio: { ideal: 16 / 9 } }, constraints),\n            audio: false,\n        });\n    }\n    stopVideoStream(videoStream) {\n        videoStream.getVideoTracks().forEach((track) => track.stop());\n    }\n    getFrame(videoPlayer) {\n        return new Promise((resolve) => {\n            const canvas = document.createElement('canvas');\n            canvas.height = videoPlayer.videoHeight;\n            canvas.width = videoPlayer.videoWidth;\n            const context = canvas.getContext('2d');\n            context.drawImage(videoPlayer, 0, 0);\n            canvas.toBlob(resolve);\n        });\n    }\n    startVideo() {\n        this.getVideoStream()\n            .then((stream) => {\n            this.videoStream = stream;\n            const { videoPlayer } = this.refs;\n            if (!videoPlayer) {\n                console.warn(this.t('videoPlayerNotFound'));\n                this.cameraMode = false;\n                this.redraw();\n                return;\n            }\n            videoPlayer.srcObject = stream;\n            const width = parseInt(this.component.webcamSize) || 320;\n            videoPlayer.setAttribute('width', width);\n            videoPlayer.play();\n        })\n            .catch((err) => {\n            console.error(err);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    stopVideo() {\n        if (this.videoStream) {\n            this.stopVideoStream(this.videoStream);\n            this.videoStream = null;\n        }\n    }\n    takePicture() {\n        const { videoPlayer } = this.refs;\n        if (!videoPlayer) {\n            console.warn(this.t('videoPlayerNotFound'));\n            this.cameraMode = false;\n            this.redraw();\n            return;\n        }\n        this.getFrame(videoPlayer).then((frame) => {\n            frame.name = `photo-${Date.now()}.png`;\n            this.handleFilesToUpload([frame]);\n            this.cameraMode = false;\n            this.redraw();\n        });\n    }\n    browseFiles(attrs = {}) {\n        return new Promise((resolve) => {\n            const fileInput = this.ce('input', Object.assign({ type: 'file', style: 'height: 0; width: 0; visibility: hidden;', tabindex: '-1' }, attrs));\n            document.body.appendChild(fileInput);\n            fileInput.addEventListener('change', () => {\n                resolve(fileInput.files);\n                document.body.removeChild(fileInput);\n            }, true);\n            // There is no direct way to trigger a file dialog. To work around this, create an input of type file and trigger\n            // a click event on it.\n            if (typeof fileInput.trigger === 'function') {\n                fileInput.trigger('click');\n            }\n            else {\n                fileInput.click();\n            }\n        });\n    }\n    set cameraMode(value) {\n        this._cameraMode = value;\n        if (value) {\n            this.startVideo();\n        }\n        else {\n            this.stopVideo();\n        }\n    }\n    get cameraMode() {\n        return this._cameraMode;\n    }\n    get useWebViewCamera() {\n        return this.imageUpload && webViewCamera;\n    }\n    get imageUpload() {\n        return Boolean(this.component.image);\n    }\n    get browseOptions() {\n        const options = {};\n        if (this.component.multiple) {\n            options.multiple = true;\n        }\n        if (this.component.capture) {\n            options.capture = this.component.capture;\n        }\n        //use \"accept\" attribute only for desktop devices because of its limited support by mobile browsers\n        const filePattern = this.component.filePattern.trim() || '';\n        if (!this.isMobile.any) {\n            const imagesPattern = 'image/*';\n            if (this.imageUpload && (!filePattern || filePattern === '*')) {\n                options.accept = imagesPattern;\n            }\n            else if (this.imageUpload && !filePattern.includes(imagesPattern)) {\n                options.accept = `${imagesPattern},${filePattern}`;\n            }\n            else {\n                options.accept = filePattern;\n            }\n        }\n        // if input capture is set, we need the \"accept\" attribute to determine which device to launch\n        else if (this.component.capture) {\n            if (filePattern.includes('video')) {\n                options.accept = 'video/*';\n            }\n            else if (filePattern.includes('audio')) {\n                options.accept = 'audio/*';\n            }\n            else {\n                options.accept = 'image/*';\n            }\n        }\n        return options;\n    }\n    get actions() {\n        return {\n            abort: this.abortRequest.bind(this),\n        };\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            fileDrop: 'single',\n            fileBrowse: 'single',\n            galleryButton: 'single',\n            cameraButton: 'single',\n            takePictureButton: 'single',\n            toggleCameraMode: 'single',\n            videoPlayer: 'single',\n            fileLink: 'multiple',\n            removeLink: 'multiple',\n            fileToSyncRemove: 'multiple',\n            fileImage: 'multiple',\n            fileType: 'multiple',\n            fileProcessingLoader: 'single',\n            syncNow: 'single',\n            restoreFile: 'multiple',\n            progress: 'multiple',\n        });\n        // Ensure we have an empty input refs. We need this for the setValue method to redraw the control when it is set.\n        this.refs.input = [];\n        const superAttach = super.attach(element);\n        if (this.refs.fileDrop) {\n            // if (!this.statuses.length) {\n            //   this.refs.fileDrop.removeAttribute('hidden');\n            // }\n            const _this = this;\n            this.addEventListener(this.refs.fileDrop, 'dragover', function (event) {\n                this.className = 'fileSelector fileDragOver';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'dragleave', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n            });\n            this.addEventListener(this.refs.fileDrop, 'drop', function (event) {\n                this.className = 'fileSelector';\n                event.preventDefault();\n                _this.handleFilesToUpload(event.dataTransfer.files);\n            });\n        }\n        this.addEventListener(element, 'click', (event) => {\n            this.handleAction(event);\n        });\n        if (this.refs.fileBrowse) {\n            this.addEventListener(this.refs.fileBrowse, 'click', (event) => {\n                event.preventDefault();\n                this.browseFiles(this.browseOptions).then((files) => {\n                    this.handleFilesToUpload(files);\n                });\n            });\n        }\n        this.refs.fileLink.forEach((fileLink, index) => {\n            this.addEventListener(fileLink, 'click', (event) => {\n                event.preventDefault();\n                this.getFile(this.dataValue[index]);\n            });\n        });\n        this.refs.removeLink.forEach((removeLink, index) => {\n            this.addEventListener(removeLink, 'click', (event) => {\n                event.preventDefault();\n                const fileInfo = this.dataValue[index];\n                this.handleFileToRemove(fileInfo);\n            });\n        });\n        this.refs.fileToSyncRemove.forEach((fileToSyncRemove, index) => {\n            this.addEventListener(fileToSyncRemove, 'click', (event) => {\n                event.preventDefault();\n                this.filesToSync.filesToUpload.splice(index, 1);\n                this.redraw();\n            });\n        });\n        this.refs.restoreFile.forEach((fileToRestore, index) => {\n            this.addEventListener(fileToRestore, 'click', (event) => {\n                var _a;\n                event.preventDefault();\n                const fileInfo = this.filesToSync.filesToDelete[index];\n                delete fileInfo.status;\n                delete fileInfo.message;\n                this.filesToSync.filesToDelete.splice(index, 1);\n                this.dataValue.push(fileInfo);\n                (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this);\n                this.redraw();\n            });\n        });\n        if (this.refs.galleryButton && webViewCamera) {\n            this.addEventListener(this.refs.galleryButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.PHOTOLIBRARY,\n                });\n            });\n        }\n        if (this.refs.cameraButton && webViewCamera) {\n            this.addEventListener(this.refs.cameraButton, 'click', (event) => {\n                event.preventDefault();\n                webViewCamera.getPicture((success) => {\n                    window.resolveLocalFileSystemURL(success, (fileEntry) => {\n                        fileEntry.file((file) => {\n                            const reader = new FileReader();\n                            reader.onloadend = (evt) => {\n                                const blob = new Blob([new Uint8Array(evt.target.result)], { type: file.type });\n                                blob.name = file.name;\n                                this.handleFilesToUpload([blob]);\n                            };\n                            reader.readAsArrayBuffer(file);\n                        });\n                    });\n                }, (err) => {\n                    console.error(err);\n                }, {\n                    sourceType: webViewCamera.PictureSourceType.CAMERA,\n                    encodingType: webViewCamera.EncodingType.PNG,\n                    mediaType: webViewCamera.MediaType.PICTURE,\n                    saveToPhotoAlbum: true,\n                    correctOrientation: false,\n                });\n            });\n        }\n        if (this.refs.takePictureButton) {\n            this.addEventListener(this.refs.takePictureButton, 'click', (event) => {\n                event.preventDefault();\n                this.takePicture();\n            });\n        }\n        if (this.refs.toggleCameraMode) {\n            this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {\n                event.preventDefault();\n                this.cameraMode = !this.cameraMode;\n                this.redraw();\n            });\n        }\n        this.refs.fileType.forEach((fileType, index) => {\n            if (!this.dataValue[index]) {\n                return;\n            }\n            this.dataValue[index].fileType =\n                this.dataValue[index].fileType || this.component.fileTypes[0].label;\n            this.addEventListener(fileType, 'change', (event) => {\n                event.preventDefault();\n                const fileType = this.component.fileTypes.find((typeObj) => typeObj.value === event.target.value);\n                this.dataValue[index].fileType = fileType.label;\n            });\n        });\n        this.addEventListener(this.refs.syncNow, 'click', (event) => {\n            event.preventDefault();\n            this.syncFiles();\n        });\n        const fileService = this.fileService;\n        if (fileService) {\n            const loadingImages = [];\n            this.filesReady = new Promise((resolve, reject) => {\n                this.filesReadyResolve = resolve;\n                this.filesReadyReject = reject;\n            });\n            this.refs.fileImage.forEach((image, index) => {\n                loadingImages.push(this.loadImage(this.dataValue[index]).then((url) => (image.src = url)));\n            });\n            if (loadingImages.length) {\n                Promise.all(loadingImages)\n                    .then(() => {\n                    this.filesReadyResolve();\n                })\n                    .catch(() => this.filesReadyReject());\n            }\n            else {\n                this.filesReadyResolve();\n            }\n        }\n        return superAttach;\n    }\n    fileSize(a, b, c, d, e) {\n        return `${((b = Math), (c = b.log), (d = 1024), (e = (c(a) / c(d)) | 0), a / b.pow(d, e)).toFixed(2)} ${e ? `${'kMGTPEZY'[--e]}B` : 'Bytes'}`;\n    }\n    globStringToRegex(str) {\n        str = str.replace(/\\s/g, '');\n        let regexp = '', excludes = [];\n        if (str.length > 2 && str[0] === '/' && str[str.length - 1] === '/') {\n            regexp = str.substring(1, str.length - 1);\n        }\n        else {\n            const split = str.split(',');\n            if (split.length > 1) {\n                for (let i = 0; i < split.length; i++) {\n                    const r = this.globStringToRegex(split[i]);\n                    if (r.regexp) {\n                        regexp += `(${r.regexp})`;\n                        if (i < split.length - 1) {\n                            regexp += '|';\n                        }\n                    }\n                    else {\n                        excludes = excludes.concat(r.excludes);\n                    }\n                }\n            }\n            else {\n                if (str.startsWith('!')) {\n                    excludes.push(`^((?!${this.globStringToRegex(str.substring(1)).regexp}).)*$`);\n                }\n                else {\n                    if (str.startsWith('.')) {\n                        str = `*${str}`;\n                    }\n                    regexp = `^${str.replace(new RegExp('[.\\\\\\\\+*?\\\\[\\\\^\\\\]$(){}=!<>|:\\\\-]', 'g'), '\\\\$&')}$`;\n                    regexp = regexp.replace(/\\\\\\*/g, '.*').replace(/\\\\\\?/g, '.');\n                }\n            }\n        }\n        return { regexp, excludes };\n    }\n    translateScalars(str) {\n        if (typeof str === 'string') {\n            if (str.search(/kb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024);\n            }\n            if (str.search(/mb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024);\n            }\n            if (str.search(/gb/i) === str.length - 2) {\n                return parseFloat(str.substring(0, str.length - 2) * 1024 * 1024 * 1024);\n            }\n            if (str.search(/b/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/s/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1));\n            }\n            if (str.search(/m/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 60);\n            }\n            if (str.search(/h/i) === str.length - 1) {\n                return parseFloat(str.substring(0, str.length - 1) * 3600);\n            }\n        }\n        return str;\n    }\n    validatePattern(file, val) {\n        if (!val) {\n            return true;\n        }\n        const pattern = this.globStringToRegex(val);\n        let valid = true;\n        if (pattern.regexp && pattern.regexp.length) {\n            const regexp = new RegExp(pattern.regexp, 'i');\n            valid =\n                (!lodash_1.default.isNil(file.type) && regexp.test(file.type)) ||\n                    (!lodash_1.default.isNil(file.name) && regexp.test(file.name));\n        }\n        valid = pattern.excludes.reduce((result, excludePattern) => {\n            const exclude = new RegExp(excludePattern, 'i');\n            return (result &&\n                (lodash_1.default.isNil(file.type) || exclude.test(file.type)) &&\n                (lodash_1.default.isNil(file.name) || exclude.test(file.name)));\n        }, valid);\n        return valid;\n    }\n    validateMinSize(file, val) {\n        return file.size + 0.1 >= this.translateScalars(val);\n    }\n    validateMaxSize(file, val) {\n        return file.size - 0.1 <= this.translateScalars(val);\n    }\n    abortRequest(id) {\n        const abortUpload = this.abortUploads.find((abortUpload) => abortUpload.id === id);\n        if (abortUpload) {\n            abortUpload.abort();\n        }\n    }\n    handleAction(event) {\n        const target = event.target;\n        if (!target.id) {\n            return;\n        }\n        const [action, id] = target.id.split('-');\n        if (!action || !id || !this.actions[action]) {\n            return;\n        }\n        this.actions[action](id);\n    }\n    getFileName(file) {\n        return (0, utils_1.uniqueName)(file.name, this.component.fileNameTemplate, this.evalContext());\n    }\n    getInitFileToSync(file) {\n        const escapedFileName = file.name\n            ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;')\n            : file.name;\n        return {\n            id: createRandomString(),\n            // Get a unique name for this file to keep file collisions from occurring.\n            dir: this.interpolate(this.component.dir || ''),\n            name: this.getFileName(file),\n            originalName: escapedFileName,\n            fileKey: this.component.fileKey || 'file',\n            storage: this.component.storage,\n            options: this.component.storage === 'url'\n                ? (this.component.urlRequestOptions || this.component.options)\n                : this.component.options,\n            file,\n            size: file.size,\n            status: 'info',\n            message: this.t('waitFileProcessing'),\n            hash: '',\n        };\n    }\n    handleSubmissionRevisions(file) {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            if (((_a = this.root) === null || _a === void 0 ? void 0 : _a.form.submissionRevisions) !== 'true') {\n                return '';\n            }\n            const bmf = new browser_md5_file_1.default();\n            const hash = yield new Promise((resolve, reject) => {\n                this.emit('fileUploadingStart');\n                bmf.md5(file, (err, md5) => {\n                    if (err) {\n                        return reject(err);\n                    }\n                    return resolve(md5);\n                });\n            });\n            this.emit('fileUploadingEnd');\n            return hash;\n        });\n    }\n    validateFileName(file) {\n        // Check if file with the same name is being uploaded\n        const fileWithSameNameUploading = this.filesToSync.filesToUpload.some((fileToSync) => { var _a; return ((_a = fileToSync.file) === null || _a === void 0 ? void 0 : _a.name) === file.name; });\n        const fileWithSameNameUploaded = lodash_1.default.some(this.dataValue, (fileStatus) => fileStatus.originalName === file.name);\n        return fileWithSameNameUploaded || fileWithSameNameUploading\n            ? {\n                status: 'error',\n                message: this.t(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),\n            }\n            : {};\n    }\n    validateFileSettings(file) {\n        // Check file pattern\n        if (this.component.filePattern && !this.validatePattern(file, this.component.filePattern)) {\n            return {\n                status: 'error',\n                message: this.t('wrongFileType', {\n                    pattern: this.component.filePattern,\n                }),\n            };\n        }\n        // Check file minimum size\n        if (this.component.fileMinSize) {\n            const interpolatedMinSize = this.interpolate(this.component.fileMinSize, this.evalContext());\n            // This case is when the user entered fileMinSize expression, but did not enter or made a typo when\n            // setting the fileMinSize variable in the config of the project\n            if (!interpolatedMinSize) {\n                return {\n                    status: 'error',\n                    message: this.t('checkEnteredParameters'),\n                };\n            }\n            if (!this.validateMinSize(file, interpolatedMinSize)) {\n                return {\n                    status: 'error',\n                    message: this.t('fileTooSmall', {\n                        size: interpolatedMinSize,\n                    }),\n                };\n            }\n        }\n        // Check file maximum size\n        if (this.component.fileMaxSize) {\n            const interpolatedMaxSize = this.interpolate(this.component.fileMaxSize, this.evalContext());\n            if (!interpolatedMaxSize) {\n                return {\n                    status: 'error',\n                    message: this.t('checkEnteredParameters'),\n                };\n            }\n            if (!this.validateMaxSize(file, interpolatedMaxSize)) {\n                return {\n                    status: 'error',\n                    message: this.t('fileTooBig', {\n                        size: interpolatedMaxSize,\n                    }),\n                };\n            }\n        }\n        return {};\n    }\n    validateFileService() {\n        const { fileService } = this;\n        return !fileService\n            ? {\n                status: 'error',\n                message: this.t('noFileService'),\n            }\n            : {};\n    }\n    validateFile(file) {\n        const fileServiceValidation = this.validateFileService();\n        if (fileServiceValidation.status === 'error') {\n            return fileServiceValidation;\n        }\n        const fileNameValidation = this.validateFileName(file);\n        if (fileNameValidation.status === 'error') {\n            return fileNameValidation;\n        }\n        return this.validateFileSettings(file);\n    }\n    getGroupPermissions() {\n        var _a;\n        let groupKey = null;\n        let groupPermissions = null;\n        //Iterate through form components to find group resource if one exists\n        (_a = this.root) === null || _a === void 0 ? void 0 : _a.everyComponent((element) => {\n            var _a, _b;\n            if (((_a = element.component) === null || _a === void 0 ? void 0 : _a.submissionAccess) || ((_b = element.component) === null || _b === void 0 ? void 0 : _b.defaultPermission)) {\n                groupPermissions = !element.component.submissionAccess\n                    ? [\n                        {\n                            type: element.component.defaultPermission,\n                            roles: [],\n                        },\n                    ]\n                    : element.component.submissionAccess;\n                groupPermissions.forEach((permission) => {\n                    groupKey = ['admin', 'write', 'create'].includes(permission.type)\n                        ? element.component.key\n                        : null;\n                });\n            }\n        });\n        return { groupKey, groupPermissions };\n    }\n    triggerFileProcessor(file) {\n        var _a, _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            let processedFile = null;\n            if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.options.fileProcessor) {\n                try {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'block';\n                    }\n                    const fileProcessorHandler = (0, fileProcessor_1.default)(this.fileService, (_b = this.root) === null || _b === void 0 ? void 0 : _b.options.fileProcessor);\n                    processedFile = yield fileProcessorHandler(file, this.component.properties);\n                }\n                catch (ignoreErr) {\n                    this.fileDropHidden = false;\n                    return {\n                        status: 'error',\n                        message: this.t('fileProcessingFailed'),\n                    };\n                }\n                finally {\n                    if (this.refs.fileProcessingLoader) {\n                        this.refs.fileProcessingLoader.style.display = 'none';\n                    }\n                }\n            }\n            return {\n                file: processedFile,\n            };\n        });\n    }\n    prepareFileToUpload(file) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const fileToSync = this.getInitFileToSync(file);\n            fileToSync.hash = yield this.handleSubmissionRevisions(file);\n            const { status, message } = this.validateFile(file);\n            if (status === 'error') {\n                fileToSync.isValidationError = true;\n                fileToSync.status = status;\n                fileToSync.message = message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.component.privateDownload) {\n                file.private = true;\n            }\n            const { groupKey, groupPermissions } = this.getGroupPermissions();\n            const processedFile = yield this.triggerFileProcessor(file);\n            if (processedFile.status === 'error') {\n                fileToSync.status === 'error';\n                fileToSync.message = processedFile.message;\n                return this.filesToSync.filesToUpload.push(fileToSync);\n            }\n            if (this.autoSync) {\n                fileToSync.message = this.t('readyForUpload');\n            }\n            this.filesToSync.filesToUpload.push(Object.assign(Object.assign({}, fileToSync), { message: fileToSync.message, file: processedFile.file || file, url: this.interpolate(this.component.url, { file: fileToSync }), groupPermissions, groupResourceId: groupKey ? this.currentForm.submission.data[groupKey]._id : null }));\n        });\n    }\n    prepareFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Only allow one upload if not multiple.\n            if (!this.component.multiple) {\n                files = Array.prototype.slice.call(files, 0, 1);\n            }\n            if (this.component.storage && files && files.length) {\n                this.fileDropHidden = true;\n                return Promise.all([...files].map((file) => __awaiter(this, void 0, void 0, function* () {\n                    yield this.prepareFileToUpload(file);\n                    this.redraw();\n                })));\n            }\n            else {\n                return Promise.resolve();\n            }\n        });\n    }\n    handleFilesToUpload(files) {\n        return __awaiter(this, void 0, void 0, function* () {\n            yield this.prepareFilesToUpload(files);\n            if (!this.autoSync) {\n                yield this.syncFiles();\n            }\n        });\n    }\n    prepareFileToDelete(fileInfo) {\n        this.filesToSync.filesToDelete.push(Object.assign(Object.assign({}, fileInfo), { status: 'info', message: this.autoSync\n                ? this.t('readyForRemovingFromStorage')\n                : this.t('preparingFileToRemove') }));\n        const index = this.dataValue.findIndex((file) => file.name === fileInfo.name);\n        this.splice(index);\n        this.redraw();\n    }\n    handleFileToRemove(fileInfo) {\n        this.prepareFileToDelete(fileInfo);\n        if (!this.autoSync) {\n            this.syncFiles();\n        }\n    }\n    deleteFile(fileInfo) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const options = this.component.storage === 'url'\n                ? (this.component.urlRequestOptions || this.component.options || {})\n                : (this.component.options || {});\n            if (fileInfo &&\n                ['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage)) {\n                const { fileService } = this;\n                if (fileService && typeof fileService.deleteFile === 'function') {\n                    return yield fileService.deleteFile(fileInfo, options);\n                }\n                else {\n                    const formio = this.options.formio || (this.root && this.root.formio);\n                    if (formio) {\n                        return yield formio.makeRequest('', fileInfo.url, 'delete');\n                    }\n                }\n            }\n        });\n    }\n    delete() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToDelete.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToDelete.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                try {\n                    if (fileToSync.isValidationError) {\n                        return { fileToSync };\n                    }\n                    yield this.deleteFile(fileToSync);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('succefullyRemoved');\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    fileToSync.message = typeof response === 'string' ? response : response.toString();\n                }\n                finally {\n                    this.redraw();\n                }\n                return { fileToSync };\n            })));\n        });\n    }\n    updateProgress(fileInfo, progressEvent) {\n        fileInfo.progress = parseInt((100.0 * progressEvent.loaded) / progressEvent.total);\n        if (fileInfo.status !== 'progress') {\n            fileInfo.status = 'progress';\n            delete fileInfo.message;\n            this.redraw();\n        }\n        else {\n            const progress = Array.prototype.find.call(this.refs.progress, (progressElement) => progressElement.id === fileInfo.id);\n            progress.innerHTML = `<span class=\"visually-hidden\">${fileInfo.progress}% ${this.t('Complete')}</span>`;\n            progress.style.width = `${fileInfo.progress}%`;\n            progress.ariaValueNow = fileInfo.progress.toString();\n        }\n    }\n    getMultipartOptions(fileToSync) {\n        let count = 0;\n        return this.component.useMultipartUpload && this.component.multipart\n            ? Object.assign(Object.assign({}, this.component.multipart), { progressCallback: (total) => {\n                    count++;\n                    fileToSync.status = 'progress';\n                    fileToSync.progress = parseInt((100 * count) / total);\n                    delete fileToSync.message;\n                    this.redraw();\n                }, changeMessage: (message) => {\n                    fileToSync.message = message;\n                    this.redraw();\n                } }) : false;\n    }\n    uploadFile(fileToSync) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const filePromise = this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, \n            // Progress callback\n            this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {\n                this.emit('fileUploadingStart', filePromise);\n            }, \n            // Abort upload callback\n            (abort) => this.abortUploads.push({\n                id: fileToSync.id,\n                abort,\n            }), this.getMultipartOptions(fileToSync));\n            return yield filePromise;\n        });\n    }\n    upload() {\n        return __awaiter(this, void 0, void 0, function* () {\n            if (!this.filesToSync.filesToUpload.length) {\n                return Promise.resolve();\n            }\n            return yield Promise.all(this.filesToSync.filesToUpload.map((fileToSync) => __awaiter(this, void 0, void 0, function* () {\n                let fileInfo = null;\n                try {\n                    if (fileToSync.isValidationError) {\n                        return {\n                            fileToSync,\n                            fileInfo,\n                        };\n                    }\n                    if (fileToSync.status === 'success') {\n                        const uploadedFile = this.resolvedFiles.find((x) => x.fileToSync.originalName === fileToSync.originalName);\n                        return {\n                            fileToSync: uploadedFile.fileToSync,\n                            fileInfo: uploadedFile.fileInfo,\n                        };\n                    }\n                    const pendingFile = this.pendingfiles.find((x) => x.name === fileToSync.name);\n                    if (pendingFile) {\n                        fileInfo = yield pendingFile.fileInfoProm;\n                    }\n                    else {\n                        const promInfo = this.uploadFile(fileToSync);\n                        this.pendingfiles.push({ name: fileToSync.name, fileInfoProm: promInfo });\n                        fileInfo = yield promInfo;\n                    }\n                    this.pendingfiles = this.pendingfiles.filter((x) => x.name !== fileToSync.name);\n                    fileToSync.status = 'success';\n                    fileToSync.message = this.t('succefullyUploaded');\n                    fileInfo.originalName = fileToSync.originalName;\n                    fileInfo.hash = fileToSync.hash;\n                    this.emit('fileUploadingEnd', Promise.resolve(fileInfo));\n                }\n                catch (response) {\n                    fileToSync.status = 'error';\n                    delete fileToSync.progress;\n                    fileToSync.message =\n                        typeof response === 'string'\n                            ? response\n                            : response.type === 'abort'\n                                ? this.t('requestAborted')\n                                : response.message || response.toString();\n                    this.emit('fileUploadingEnd', Promise.reject(response));\n                    this.emit(lodash_1.default.get(response, 'type') === 'abort' ? 'fileUploadCanceled' : 'fileUploadError', {\n                        fileToSync,\n                        response,\n                    });\n                }\n                finally {\n                    delete fileToSync.progress;\n                    this.redraw();\n                    if (fileInfo) {\n                        const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);\n                        if (!fileExists && fileToSync.status !== 'error') {\n                            this.resolvedFiles.push({ fileToSync, fileInfo });\n                        }\n                    }\n                }\n                return {\n                    fileToSync,\n                    fileInfo,\n                };\n            })));\n        });\n    }\n    syncFiles() {\n        var _a, _b, _c;\n        return __awaiter(this, void 0, void 0, function* () {\n            this.isSyncing = true;\n            this.fileDropHidden = true;\n            this.redraw();\n            try {\n                const [filesToDelete = [], filesToUpload = []] = yield Promise.all([\n                    this.delete(),\n                    this.upload(),\n                ]);\n                if (filesToUpload.length !== ((_b = (_a = this.filesToSync) === null || _a === void 0 ? void 0 : _a.filesToUpload) === null || _b === void 0 ? void 0 : _b.length)) {\n                    return;\n                }\n                this.filesToSync.filesToDelete = filesToDelete\n                    .filter((file) => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map((file) => file.fileToSync);\n                this.filesToSync.filesToUpload = filesToUpload\n                    .filter((file) => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })\n                    .map((file) => file.fileToSync);\n                if (!this.hasValue()) {\n                    this.dataValue = [];\n                }\n                const data = filesToUpload\n                    .filter((file) => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })\n                    .map((file) => file.fileInfo);\n                this.dataValue.push(...data);\n                (_c = this.triggerChange) === null || _c === void 0 ? void 0 : _c.call(this, {\n                    modified: true,\n                });\n                return Promise.resolve();\n            }\n            catch (ignoreErr) {\n                return Promise.reject();\n            }\n            finally {\n                this.isSyncing = false;\n                this.fileDropHidden = false;\n                this.abortUploads = [];\n                this.redraw();\n            }\n        });\n    }\n    getFile(fileInfo) {\n        const options = this.component.storage === 'url'\n            ? (this.component.urlRequestOptions || this.component.options || {})\n            : (this.component.options || {});\n        const { fileService } = this;\n        if (!fileService) {\n            return alert(this.t('noFileService'));\n        }\n        if (this.component.privateDownload) {\n            fileInfo.private = true;\n        }\n        fileService\n            .downloadFile(fileInfo, options)\n            .then((file) => {\n            if (file) {\n                if (['base64', 'indexeddb'].includes(file.storage)) {\n                    (0, downloadjs_1.default)(file.url, file.originalName || file.name, file.type);\n                }\n                else {\n                    window.open(file.url, '_blank');\n                }\n            }\n        })\n            .catch((response) => {\n            // Is alert the best way to do this?\n            // User is expecting an immediate notification due to attempting to download a file.\n            alert(response);\n        });\n    }\n    focus() {\n        if ('beforeFocus' in this.parent) {\n            this.parent.beforeFocus(this);\n        }\n        if (this.refs.fileBrowse) {\n            this.refs.fileBrowse.focus();\n        }\n    }\n    beforeSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (!this.autoSync) {\n                    return Promise.resolve();\n                }\n                yield this.syncFiles();\n                return this.shouldSyncFiles ? Promise.reject(this.t('synchronizationFailed')) : Promise.resolve();\n            }\n            catch (error) {\n                return Promise.reject(error.message);\n            }\n        });\n    }\n    destroy(all) {\n        this.stopVideo();\n        super.destroy(all);\n    }\n}\nexports[\"default\"] = FileComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/file/File.js?\n}");
 
 /***/ }),
 
@@ -8168,7 +8168,7 @@ eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod)
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nclass HTMLComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'HTML',\n            type: 'htmlelement',\n            tag: 'div',\n            attrs: [],\n            content: '',\n            input: false,\n            persistent: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'HTML Element',\n            group: 'layout',\n            icon: 'code',\n            weight: 0,\n            documentation: '/userguide/form-building/layout-components#html-element',\n            showPreview: false,\n            schema: HTMLComponent.schema(),\n        };\n    }\n    static savedValueTypes() {\n        return [];\n    }\n    get defaultSchema() {\n        return HTMLComponent.schema();\n    }\n    get content() {\n        if (this.builderMode) {\n            return this.component.content;\n        }\n        // i18n returns error exactly with word 'select', spaces will be trimmed\n        if (this.component.content.replace(/(<(\\/?[^>]+)>)/g, '').trim() === 'select') {\n            return ` ${this.component.content} `;\n        }\n        const submission = lodash_1.default.get(this.root, 'submission', {});\n        const content = this.component.content\n            ? this.interpolate(this.sanitize(this.component.content, this.shouldSanitizeValue), {\n                metadata: submission.metadata || {},\n                submission: submission,\n                data: this.rootValue,\n                row: this.data,\n            })\n            : '';\n        return content;\n    }\n    get singleTags() {\n        return ['br', 'img', 'hr'];\n    }\n    checkRefreshOn(changed) {\n        super.checkRefreshOn(changed);\n        const isVisible = () => {\n            return this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n        };\n        const shouldSetContent = !this.builderMode &&\n            this.component.refreshOnChange &&\n            this.element &&\n            !lodash_1.default.isUndefined(changed) &&\n            ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed)) &&\n            isVisible();\n        if (shouldSetContent) {\n            this.setContent(this.element, this.renderContent());\n        }\n    }\n    renderContent() {\n        const submission = lodash_1.default.get(this.root, 'submission', {});\n        return this.renderTemplate('html', {\n            component: this.component,\n            tag: this.component.tag,\n            attrs: (this.component.attrs || []).map((attr) => {\n                return {\n                    attr: attr.attr,\n                    value: this.interpolate(attr.value, {\n                        metadata: submission.metadata || {},\n                        submission: submission,\n                        data: this.rootValue,\n                        row: this.data,\n                    }),\n                };\n            }),\n            content: this.content,\n            singleTags: this.singleTags,\n        });\n    }\n    render() {\n        return super.render(this.renderContent());\n    }\n    get dataReady() {\n        var _a;\n        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submissionReady) || Promise.resolve();\n    }\n    attach(element) {\n        this.loadRefs(element, { html: 'single' });\n        this.dataReady.then(() => {\n            if (this.refs.html) {\n                this.setContent(this.refs.html, this.content);\n            }\n        });\n        return super.attach(element);\n    }\n}\nexports[\"default\"] = HTMLComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/html/HTML.js?\n}");
+eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst Component_1 = __importDefault(__webpack_require__(/*! ../_classes/component/Component */ \"./lib/cjs/components/_classes/component/Component.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nclass HTMLComponent extends Component_1.default {\n    static schema(...extend) {\n        return Component_1.default.schema({\n            label: 'HTML',\n            type: 'htmlelement',\n            tag: 'div',\n            attrs: [],\n            content: '',\n            input: false,\n            persistent: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'HTML Element',\n            group: 'layout',\n            icon: 'code',\n            weight: 0,\n            documentation: '/userguide/form-building/layout-components#html-element',\n            showPreview: false,\n            schema: HTMLComponent.schema(),\n        };\n    }\n    static savedValueTypes() {\n        return [];\n    }\n    get defaultSchema() {\n        return HTMLComponent.schema();\n    }\n    get content() {\n        if (this.builderMode) {\n            return this.component.content;\n        }\n        // i18n returns error exactly with word 'select', spaces will be trimmed\n        if (this.component.content.replace(/(<(\\/?[^>]+)>)/g, '').trim() === 'select') {\n            return ` ${this.component.content} `;\n        }\n        const submission = lodash_1.default.get(this.root, 'submission', {});\n        const content = this.component.content\n            ? this.interpolate(this.sanitize(this.component.content, this.shouldSanitizeValue), {\n                metadata: submission.metadata || {},\n                submission: submission,\n                data: this.rootValue,\n                row: this.data,\n            })\n            : '';\n        return content;\n    }\n    get singleTags() {\n        return ['br', 'img', 'hr'];\n    }\n    checkRefreshOn(changed) {\n        super.checkRefreshOn(changed);\n        const isVisible = () => {\n            return this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;\n        };\n        const shouldSetContent = !this.builderMode &&\n            this.component.refreshOnChange &&\n            this.element &&\n            !lodash_1.default.isUndefined(changed) &&\n            ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed)) &&\n            isVisible();\n        if (shouldSetContent) {\n            this.setContent(this.element, this.renderContent());\n        }\n    }\n    renderContent(content = this.content) {\n        const submission = lodash_1.default.get(this.root, 'submission', {});\n        return this.renderTemplate('html', {\n            component: this.component,\n            tag: this.component.tag,\n            attrs: (this.component.attrs || []).map((attr) => {\n                return {\n                    attr: attr.attr,\n                    value: this.interpolate(attr.value, {\n                        metadata: submission.metadata || {},\n                        submission: submission,\n                        data: this.rootValue,\n                        row: this.data,\n                    }),\n                };\n            }),\n            content,\n            singleTags: this.singleTags,\n        });\n    }\n    render() {\n        return super.render(this.renderContent(''));\n    }\n    get dataReady() {\n        var _a;\n        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submissionReady) || Promise.resolve();\n    }\n    attach(element) {\n        this.loadRefs(element, { html: 'single' });\n        const setHtmlContent = () => {\n            if (this.refs.html) {\n                this.setContent(this.refs.html, this.content);\n            }\n        };\n        setHtmlContent();\n        this.dataReady.then(setHtmlContent);\n        return super.attach(element);\n    }\n}\nexports[\"default\"] = HTMLComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/html/HTML.js?\n}");
 
 /***/ }),
 
@@ -8190,7 +8190,7 @@ eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod)
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst text_mask_addons_1 = __webpack_require__(/*! @formio/text-mask-addons */ \"../../node_modules/.pnpm/@formio+text-mask-addons@3.8.0-formio.4/node_modules/@formio/text-mask-addons/dist/textMaskAddons.js\");\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"../../node_modules/.pnpm/@formio+vanilla-text-mask@5.1.1-formio.1/node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nclass NumberComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'number',\n            label: 'Number',\n            key: 'number',\n            validate: {\n                min: '',\n                max: '',\n                step: 'any',\n                integer: '',\n            },\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Number',\n            icon: 'hashtag',\n            group: 'basic',\n            documentation: '/userguide/form-building/form-components#number',\n            weight: 30,\n            schema: NumberComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return NumberComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [\n                ...super.conditionOperatorsSettings.operators,\n                'lessThan',\n                'greaterThan',\n                'lessThanOrEqual',\n                'greaterThanOrEqual',\n            ], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'number' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.number];\n    }\n    constructor(...args) {\n        var _a, _b, _c;\n        super(...args);\n        const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);\n        this.decimalSeparator = this.options.decimalSeparator =\n            this.component.decimalSymbol ||\n                this.options.decimalSeparator ||\n                ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator) ||\n                separators.decimalSeparator;\n        if (this.component.delimiter) {\n            this.delimiter =\n                this.component.thousandsSeparator ||\n                    ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) ||\n                    this.options.thousandsSeparator ||\n                    separators.delimiter;\n        }\n        else {\n            if (this.component.thousandsSeparator ||\n                ((_c = this.options.properties) === null || _c === void 0 ? void 0 : _c.thousandsSeparator) ||\n                this.options.thousandsSeparator) {\n                console.warn(this.t('noDelimiterSet'));\n            }\n            this.delimiter = '';\n        }\n        const requireDecimal = lodash_1.default.get(this.component, 'requireDecimal', false);\n        this.decimalLimit = (0, utils_1.getNumberDecimalLimit)(this.component, requireDecimal ? 2 : 20);\n        // Currencies to override BrowserLanguage Config. Object key {}\n        if (lodash_1.default.has(this.options, `languageOverride.${this.options.language}`)) {\n            const override = lodash_1.default.get(this.options, `languageOverride.${this.options.language}`);\n            this.decimalSeparator = override.decimalSeparator;\n            this.delimiter = override.delimiter;\n        }\n        this.numberMask = this.createNumberMask();\n    }\n    /**\n     * Creates the number mask for normal numbers.\n     * @returns {*} - The number mask.\n     */\n    createNumberMask() {\n        return (0, text_mask_addons_1.createNumberMask)({\n            prefix: '',\n            suffix: '',\n            requireDecimal: lodash_1.default.get(this.component, 'requireDecimal', false),\n            thousandsSeparatorSymbol: this.delimiter || '',\n            decimalSymbol: lodash_1.default.get(this.component, 'decimalSymbol', this.decimalSeparator),\n            decimalLimit: lodash_1.default.get(this.component, 'decimalLimit', this.decimalLimit),\n            allowNegative: lodash_1.default.get(this.component, 'allowNegative', true),\n            allowDecimal: this.isDecimalAllowed(),\n        });\n    }\n    get defaultSchema() {\n        return NumberComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (typeof defaultValue === 'string' && defaultValue) {\n            // Default value may be a string or have custom thousands separators or decimal symbols, so we need to call\n            // parseNumber on it\n            defaultValue = this.parseNumber(defaultValue);\n            // If default value does not contain valid value that could be parsed to number, set it to null to prevent errors\n            if (lodash_1.default.isNaN(defaultValue)) {\n                defaultValue = null;\n            }\n        }\n        if (!defaultValue && this.component.defaultValue === 0) {\n            defaultValue = this.component.defaultValue;\n        }\n        if (!this.component.multiple && lodash_1.default.isArray(defaultValue)) {\n            defaultValue = !defaultValue[0] && defaultValue[0] !== 0 ? null : defaultValue[0];\n        }\n        return defaultValue;\n    }\n    isDecimalAllowed() {\n        return lodash_1.default.get(this.component, 'allowDecimal', !(this.component.validate && this.component.validate.integer));\n    }\n    /**\n     * parses a numeric string by removing the delimiters and replacing the decimal separator back to '.' so that it can\n     * be processed by either parseInt or parseFloat\n     * @param {string} value the value to be parsed\n     * @returns {number} a parsed number\n     */\n    parseNumber(value) {\n        // Remove delimiters and convert decimal separator to dot.\n        value = value.split(this.delimiter).join('').replace(this.decimalSeparator, '.');\n        if (this.component.validate && this.component.validate.integer) {\n            return parseInt(value, 10);\n        }\n        else {\n            return parseFloat(value);\n        }\n    }\n    normalizeValue(value, flags = {}, emptyValue = this.emptyValue) {\n        var _a;\n        if (typeof value === 'string') {\n            const result = this.parseNumber(value);\n            value = lodash_1.default.isNaN(result) ? this.emptyValue : result;\n        }\n        if (((_a = this.component) === null || _a === void 0 ? void 0 : _a.multiple) && Array.isArray(value)) {\n            const normilizedValues = value.map((val) => {\n                if (typeof val === 'string') {\n                    const result = this.parseNumber(val);\n                    return lodash_1.default.isNaN(result) ? this.emptyValue : result;\n                }\n                return val;\n            });\n            value = normilizedValues;\n        }\n        return super.normalizeValue(value, flags, emptyValue);\n    }\n    setInputMask(input) {\n        let numberPattern = '[0-9';\n        numberPattern += this.decimalSeparator || '';\n        numberPattern += this.delimiter || '';\n        numberPattern += ']*';\n        input.setAttribute('pattern', numberPattern);\n        input.mask = (0, vanilla_text_mask_1.maskInput)({\n            inputElement: input,\n            mask: this.numberMask,\n            shadowRoot: this.root ? this.root.shadowRoot : null,\n        });\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        if (this.component.mask) {\n            info.attr.type = 'password';\n        }\n        else {\n            info.attr.type = 'text';\n        }\n        info.attr.inputmode = this.isDecimalAllowed() ? 'decimal' : 'numeric';\n        info.changeEvent = 'input';\n        return info;\n    }\n    getValueAt(index) {\n        if (!this.refs.input.length || !this.refs.input[index]) {\n            return null;\n        }\n        const val = this.refs.input[index].value;\n        return val && val !== '-_' ? this.parseNumber(val) : null;\n    }\n    setValueAt(index, value, flags = {}) {\n        return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);\n    }\n    /**\n     * Converts a string to a floating point number, formats the number based on the parsed float function\n     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the\n     * formatted number back as a string\n     * Example Input: \"123.456,22\"\n     * Example Output: \"123456,22\"\n     * @param {string | number} input the numeric string to parse\n     * @returns {string | null} a parsed string\n     */\n    parseValue(input) {\n        if (typeof input === 'string') {\n            input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');\n        }\n        let value;\n        if (!lodash_1.default.isNaN(input)) {\n            // Format scientific notation\n            if (/[0-9]+[eE]/.test(String(input))) {\n                // Convert to exponential notation will depend on the decimal limit set in the component\n                // Example: 1.23e-5 will be converted to 1.23e-5 if decimal limit is set to 2\n                // Example: 1.23e5 will be converted to 1.23e+5 if decimal limit is set to 2\n                // if decimal limit is 3, 1.23e5 will be converted to 1.230e+5\n                // if decimal limit is not set, 1.23e5 will be converted to 1.23000000000000000000e+5\n                value = parseFloat(input);\n                value = value.toExponential(this.decimalLimit);\n            }\n            else {\n                value = parseFloat(input);\n                value = !lodash_1.default.isNaN(value) ? String(value).replace('.', this.decimalSeparator) : null;\n            }\n        }\n        else {\n            value = null;\n        }\n        return value;\n    }\n    formatValue(value) {\n        if (this.component.requireDecimal && value && !value.includes(this.decimalSeparator)) {\n            return `${value}${this.decimalSeparator}${lodash_1.default.repeat('0', this.decimalLimit)}`;\n        }\n        else if (this.component.requireDecimal && value && value.includes(this.decimalSeparator)) {\n            return `${value}${lodash_1.default.repeat('0', this.decimalLimit - value.split(this.decimalSeparator)[1].length)}`;\n        }\n        return value;\n    }\n    focus() {\n        const input = this.refs.input[0];\n        if (input) {\n            super.focus.call(this);\n            input.setSelectionRange(0, input.value.length);\n        }\n    }\n    getMaskedValue(value) {\n        value = value === null ? '0' : value.toString();\n        if (value.includes('.') && '.' !== this.decimalSeparator) {\n            value = value.replace('.', this.decimalSeparator);\n        }\n        return (0, vanilla_text_mask_1.conformToMask)(this.formatValue(value), this.numberMask).conformedValue;\n    }\n    getValueAsString(value, options) {\n        if (!value && value !== 0) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.map((val) => this.getMaskedValue(val)).join(', ');\n        }\n        return this.getMaskedValue(value);\n    }\n    addFocusBlurEvents(element) {\n        super.addFocusBlurEvents(element);\n        this.addEventListener(element, 'blur', () => {\n            element.value = this.getValueAsString(this.formatValue(this.parseValue(element.value)));\n        });\n    }\n}\nexports[\"default\"] = NumberComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/number/Number.js?\n}");
+eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst text_mask_addons_1 = __webpack_require__(/*! @formio/text-mask-addons */ \"../../node_modules/.pnpm/@formio+text-mask-addons@3.8.0-formio.4/node_modules/@formio/text-mask-addons/dist/textMaskAddons.js\");\nconst vanilla_text_mask_1 = __webpack_require__(/*! @formio/vanilla-text-mask */ \"../../node_modules/.pnpm/@formio+vanilla-text-mask@5.1.1-formio.1/node_modules/@formio/vanilla-text-mask/dist/vanillaTextMask.js\");\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nclass NumberComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'number',\n            label: 'Number',\n            key: 'number',\n            validate: {\n                min: '',\n                max: '',\n                step: 'any',\n                integer: '',\n            },\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Number',\n            icon: 'hashtag',\n            group: 'basic',\n            documentation: '/userguide/form-building/form-components#number',\n            weight: 30,\n            schema: NumberComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return NumberComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [\n                ...super.conditionOperatorsSettings.operators,\n                'lessThan',\n                'greaterThan',\n                'lessThanOrEqual',\n                'greaterThanOrEqual',\n            ], valueComponent(classComp) {\n                return Object.assign(Object.assign({}, classComp), { type: 'number' });\n            } });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.number];\n    }\n    constructor(...args) {\n        var _a, _b, _c;\n        super(...args);\n        const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);\n        this.decimalSeparator = this.options.decimalSeparator =\n            this.component.decimalSymbol ||\n                this.options.decimalSeparator ||\n                ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator) ||\n                separators.decimalSeparator;\n        if (this.component.delimiter) {\n            this.delimiter =\n                this.component.thousandsSeparator ||\n                    ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) ||\n                    this.options.thousandsSeparator ||\n                    separators.delimiter;\n        }\n        else {\n            if (this.component.thousandsSeparator ||\n                ((_c = this.options.properties) === null || _c === void 0 ? void 0 : _c.thousandsSeparator) ||\n                this.options.thousandsSeparator) {\n                console.warn(this.t('noDelimiterSet'));\n            }\n            this.delimiter = '';\n        }\n        const requireDecimal = lodash_1.default.get(this.component, 'requireDecimal', false);\n        this.decimalLimit = (0, utils_1.getNumberDecimalLimit)(this.component, requireDecimal ? 2 : 20);\n        // Currencies to override BrowserLanguage Config. Object key {}\n        if (lodash_1.default.has(this.options, `languageOverride.${this.options.language}`)) {\n            const override = lodash_1.default.get(this.options, `languageOverride.${this.options.language}`);\n            this.decimalSeparator = override.decimalSeparator;\n            this.delimiter = override.delimiter;\n        }\n        this.numberMask = this.createNumberMask();\n    }\n    /**\n     * Creates the number mask for normal numbers.\n     * @returns {*} - The number mask.\n     */\n    createNumberMask() {\n        return (0, text_mask_addons_1.createNumberMask)({\n            prefix: '',\n            suffix: '',\n            requireDecimal: lodash_1.default.get(this.component, 'requireDecimal', false),\n            thousandsSeparatorSymbol: this.delimiter || '',\n            decimalSymbol: lodash_1.default.get(this.component, 'decimalSymbol', this.decimalSeparator),\n            decimalLimit: lodash_1.default.get(this.component, 'decimalLimit', this.decimalLimit),\n            allowNegative: lodash_1.default.get(this.component, 'allowNegative', true),\n            allowDecimal: this.isDecimalAllowed(),\n        });\n    }\n    get defaultSchema() {\n        return NumberComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (typeof defaultValue === 'string' && defaultValue) {\n            // Default value may be a string or have custom thousands separators or decimal symbols, so we need to call\n            // parseNumber on it\n            defaultValue = this.parseNumber(defaultValue);\n            // If default value does not contain valid value that could be parsed to number, set it to null to prevent errors\n            if (lodash_1.default.isNaN(defaultValue)) {\n                defaultValue = null;\n            }\n        }\n        if (!defaultValue && this.component.defaultValue === 0) {\n            defaultValue = this.component.defaultValue;\n        }\n        if (!this.component.multiple && lodash_1.default.isArray(defaultValue)) {\n            defaultValue = !defaultValue[0] && defaultValue[0] !== 0 ? null : defaultValue[0];\n        }\n        return defaultValue;\n    }\n    isDecimalAllowed() {\n        return lodash_1.default.get(this.component, 'allowDecimal', !(this.component.validate && this.component.validate.integer));\n    }\n    /**\n     * parses a numeric string by removing the delimiters and replacing the decimal separator back to '.' so that it can\n     * be processed by either parseInt or parseFloat\n     * @param {string} value the value to be parsed\n     * @returns {number} a parsed number\n     */\n    parseNumber(value) {\n        // Remove delimiters and convert decimal separator to dot.\n        value = value.split(this.delimiter).join('').replace(this.decimalSeparator, '.');\n        if (this.component.validate && this.component.validate.integer) {\n            return parseInt(value, 10);\n        }\n        else {\n            return parseFloat(value);\n        }\n    }\n    normalizeValue(value, flags = {}, emptyValue = this.emptyValue) {\n        var _a;\n        if (typeof value === 'string') {\n            const result = this.parseNumber(value);\n            value = lodash_1.default.isNaN(result) ? this.emptyValue : result;\n        }\n        if (((_a = this.component) === null || _a === void 0 ? void 0 : _a.multiple) && Array.isArray(value)) {\n            const normilizedValues = value.map((val) => {\n                if (typeof val === 'string') {\n                    const result = this.parseNumber(val);\n                    return lodash_1.default.isNaN(result) ? this.emptyValue : result;\n                }\n                return val;\n            });\n            value = normilizedValues;\n        }\n        return super.normalizeValue(value, flags, emptyValue);\n    }\n    setInputMask(input) {\n        let numberPattern = '[0-9';\n        numberPattern += this.decimalSeparator || '';\n        numberPattern += this.delimiter || '';\n        numberPattern += ']*';\n        input.setAttribute('pattern', numberPattern);\n        input.mask = (0, vanilla_text_mask_1.maskInput)({\n            inputElement: input,\n            mask: this.numberMask,\n            shadowRoot: this.root ? this.root.shadowRoot : null,\n        });\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        if (this.component.mask) {\n            info.attr.type = 'password';\n        }\n        else {\n            info.attr.type = 'text';\n        }\n        info.attr.inputmode = this.isDecimalAllowed() ? 'decimal' : 'numeric';\n        info.changeEvent = 'input';\n        return info;\n    }\n    getValueAt(index) {\n        if (!this.refs.input.length || !this.refs.input[index]) {\n            return null;\n        }\n        const val = this.refs.input[index].value;\n        const result = val && val !== '-_' ? this.parseNumber(val) : null;\n        if (lodash_1.default.isNaN(result)) {\n            return null;\n        }\n        return result;\n    }\n    setValueAt(index, value, flags = {}) {\n        return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);\n    }\n    /**\n     * Converts a string to a floating point number, formats the number based on the parsed float function\n     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the\n     * formatted number back as a string\n     * Example Input: \"123.456,22\"\n     * Example Output: \"123456,22\"\n     * @param {string | number} input the numeric string to parse\n     * @returns {string | null} a parsed string\n     */\n    parseValue(input) {\n        if (typeof input === 'string') {\n            input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');\n        }\n        let value;\n        if (!lodash_1.default.isNaN(input)) {\n            // Format scientific notation\n            if (/[0-9]+[eE]/.test(String(input))) {\n                // Convert to exponential notation will depend on the decimal limit set in the component\n                // Example: 1.23e-5 will be converted to 1.23e-5 if decimal limit is set to 2\n                // Example: 1.23e5 will be converted to 1.23e+5 if decimal limit is set to 2\n                // if decimal limit is 3, 1.23e5 will be converted to 1.230e+5\n                // if decimal limit is not set, 1.23e5 will be converted to 1.23000000000000000000e+5\n                value = parseFloat(input);\n                value = value.toExponential(this.decimalLimit);\n            }\n            else {\n                value = parseFloat(input);\n                value = !lodash_1.default.isNaN(value) ? String(value).replace('.', this.decimalSeparator) : null;\n            }\n        }\n        else {\n            value = null;\n        }\n        return value;\n    }\n    formatValue(value) {\n        if (this.component.requireDecimal && value && !value.includes(this.decimalSeparator)) {\n            return `${value}${this.decimalSeparator}${lodash_1.default.repeat('0', this.decimalLimit)}`;\n        }\n        else if (this.component.requireDecimal && value && value.includes(this.decimalSeparator)) {\n            return `${value}${lodash_1.default.repeat('0', this.decimalLimit - value.split(this.decimalSeparator)[1].length)}`;\n        }\n        return value;\n    }\n    focus() {\n        const input = this.refs.input[0];\n        if (input) {\n            super.focus.call(this);\n            input.setSelectionRange(0, input.value.length);\n        }\n    }\n    getMaskedValue(value) {\n        value = value === null ? '0' : value.toString();\n        if (value.includes('.') && '.' !== this.decimalSeparator) {\n            value = value.replace('.', this.decimalSeparator);\n        }\n        return (0, vanilla_text_mask_1.conformToMask)(this.formatValue(value), this.numberMask).conformedValue;\n    }\n    getValueAsString(value, options) {\n        if (!value && value !== 0) {\n            return '';\n        }\n        value = this.getWidgetValueAsString(value, options);\n        if (Array.isArray(value)) {\n            return value.map((val) => this.getMaskedValue(val)).join(', ');\n        }\n        return this.getMaskedValue(value);\n    }\n    addFocusBlurEvents(element) {\n        super.addFocusBlurEvents(element);\n        this.addEventListener(element, 'blur', () => {\n            element.value = this.getValueAsString(this.formatValue(this.parseValue(element.value)));\n        });\n    }\n}\nexports[\"default\"] = NumberComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/number/Number.js?\n}");
 
 /***/ }),
 
@@ -8234,7 +8234,7 @@ eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod)
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nclass RadioComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'radio',\n            inputType: 'radio',\n            label: 'Radio',\n            key: 'radio',\n            values: [{ label: '', value: '' }],\n            data: {\n                url: '',\n            },\n            fieldSet: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Radio',\n            group: 'basic',\n            icon: 'dot-circle-o',\n            weight: 80,\n            documentation: '/userguide/form-building/form-components#radio',\n            schema: RadioComponent.schema(),\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';\n                return isValuesSrc\n                    ? {\n                        type: 'select',\n                        dataSrc: 'custom',\n                        valueProperty: 'value',\n                        dataType: classComp.dataType || '',\n                        data: {\n                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,\n                        },\n                    }\n                    : Object.assign(Object.assign({}, classComp), { type: 'select' });\n            } });\n    }\n    static get serverConditionSettings() {\n        return RadioComponent.conditionOperatorsSettings;\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.previousValue = this.dataValue || null;\n    }\n    get defaultSchema() {\n        return RadioComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultValue === false) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    resetValue() {\n        this.unset();\n        this.setValue(this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true,\n        });\n    }\n    get inputInfo() {\n        var _a;\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.changeEvent = 'click';\n        info.attr.class = 'form-check-input';\n        info.attr.name = info.attr.name += `[${(_a = this.root) === null || _a === void 0 ? void 0 : _a.id}-${this.id}]`;\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get isRadio() {\n        return this.component.inputType === 'radio';\n    }\n    get optionSelectedClass() {\n        return 'radio-selected';\n    }\n    get listData() {\n        const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});\n        return lodash_1.default.get(listData, this.path);\n    }\n    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.//\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';\n        this.loadedOptions = [];\n        if (!this.visible || this.optionsLoaded) {\n            this.itemsLoadedResolve();\n        }\n        // Get the template keys for this radio component.\n        this.getTemplateKeys();\n    }\n    beforeSubmit() {\n        return new Promise((res) => {\n            this.dataReady.then(() => res(true));\n        });\n    }\n    render() {\n        if (!this.optionsLoaded) {\n            return super.render(this.renderTemplate('loader'));\n        }\n        return super.render(this.renderTemplate('radio', {\n            input: this.inputInfo,\n            inline: this.component.inline,\n            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,\n            value: this.dataValue,\n            row: this.row,\n        }));\n    }\n    attach(element) {\n        this.loadRefs(element, { input: 'multiple', wrapper: 'multiple' });\n        this.refs.input.forEach((input, index) => {\n            this.addEventListener(input, this.inputInfo.changeEvent, () => {\n                this.updateValue(null, {\n                    modified: true,\n                });\n            });\n            if (this.component.values[index]) {\n                this.addShortcut(input, this.component.values[index].shortcut);\n            }\n            if (this.isRadio) {\n                let dataValue = this.dataValue;\n                if (!lodash_1.default.isString(this.dataValue)) {\n                    dataValue = lodash_1.default.toString(this.dataValue);\n                }\n                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {\n                    const optionValue = this.component.dataType === 'string'\n                        ? JSON.stringify(this.loadedOptions[index].value)\n                        : this.loadedOptions[index].value;\n                    input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);\n                }\n                else {\n                    input.checked =\n                        dataValue === input.value && (input.value || this.component.dataSrc !== 'url');\n                }\n                this.addEventListener(input, 'keyup', (event) => {\n                    if (event.key === ' ' && dataValue === input.value) {\n                        event.preventDefault();\n                        this.updateValue(null, {\n                            modified: true,\n                        });\n                    }\n                });\n            }\n        });\n        this.triggerUpdate();\n        this.setSelectedClasses();\n        return super.attach(element);\n    }\n    detach(element) {\n        if (element && this.refs.input) {\n            this.refs.input.forEach((input, index) => {\n                if (this.component.values[index]) {\n                    this.removeShortcut(input, this.component.values[index].shortcut);\n                }\n            });\n        }\n        super.detach();\n    }\n    getValue() {\n        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        // If the input type of the component is checkbox the value should be determined by the checkboxes checked property\n        let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;\n        this.refs.input.forEach((input, index) => {\n            if (input.checked) {\n                value =\n                    this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)\n                        ? this.loadedOptions[index].value\n                        : input.value;\n            }\n        });\n        return value;\n    }\n    validateValueProperty() {\n        if (this.component.dataSrc === 'values') {\n            return true;\n        }\n        return !lodash_1.default.some(this.refs.wrapper, (wrapper, index) => this.refs.input[index].checked && this.loadedOptions[index].invalid);\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions;\n        if (values) {\n            return (values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !==\n                -1);\n        }\n        return false;\n    }\n    getValueAsString(value, options = {}) {\n        if (lodash_1.default.isObject(value)) {\n            value = JSON.stringify(value);\n        }\n        else if (!lodash_1.default.isString(value)) {\n            value = lodash_1.default.toString(value);\n        }\n        const shouldUseSelectData = (options.modalPreview || this.inDataTable) &&\n            this.component.dataSrc === 'url' &&\n            (this.loadedOptions.length || this.selectData);\n        if (this.component.dataSrc !== 'values' && !shouldUseSelectData) {\n            return value;\n        }\n        const values = shouldUseSelectData ? this.loadedOptions : this.component.values;\n        const option = !(values === null || values === void 0 ? void 0 : values.length) && shouldUseSelectData\n            ? {\n                label: this.itemTemplate(this.selectData),\n            }\n            : lodash_1.default.find(values, (v) => v.value === value);\n        if (!value) {\n            return lodash_1.default.get(option, 'label', '');\n        }\n        return lodash_1.default.get(option, 'label', '');\n    }\n    setValueAt(index, value) {\n        if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {\n            const inputValue = this.refs.input[index].value;\n            this.refs.input[index].checked = inputValue === value.toString();\n        }\n    }\n    get shouldLoad() {\n        // do not load options if the value is empty in readOnly and we have options available in metadata\n        if (this.options.readOnly && this.isEmpty() && this.listData) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        if (this.optionsLoaded) {\n            this.itemsLoadedResolve();\n            return;\n        }\n        if (!this.shouldLoad && this.listData) {\n            this.loadItemsFromMetadata();\n            this.itemsLoadedResolve();\n            this.optionsLoaded = true;\n            return;\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        // Allow for url interpolation.\n        url = this.sanitize(this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit)),\n        }), this.shouldSanitizeValue);\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response);\n        })\n            .catch((err) => {\n            this.handleLoadingError(err);\n        })\n            .finally(() => {\n            this.optionsLoaded = true;\n            this.redraw();\n        });\n    }\n    loadItemsFromMetadata() {\n        this.listData.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                label: this.itemTemplate(item),\n            };\n            if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n                this.loadedOptions[i].value = this.dataValue;\n            }\n        });\n        this.optionsLoaded = true;\n        this.redraw();\n    }\n    setItems(items) {\n        var _a;\n        const listData = [];\n        items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n            const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);\n            this.loadedOptions[i] = {\n                value: this.component.valueProperty ? valueAtProperty : item,\n                label: this.component.valueProperty\n                    ? this.itemTemplate(item, valueAtProperty)\n                    : this.itemTemplate(item, item, i),\n            };\n            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);\n            const value = this.loadedOptions[i].value;\n            if (!this.isRadio && (lodash_1.default.isObject(value) || lodash_1.default.isBoolean(value) || lodash_1.default.isUndefined(value))) {\n                this.loadedOptions[i].invalid = true;\n            }\n        });\n        if (this.isSelectURL) {\n            const submission = (_a = this.root) === null || _a === void 0 ? void 0 : _a.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.listData) {\n                submission.metadata.listData = {};\n            }\n            lodash_1.default.set(submission.metadata.listData, this.path, listData);\n        }\n        this.itemsLoadedResolve();\n    }\n    setSelectedClasses() {\n        if (this.refs.wrapper) {\n            //add/remove selected option class\n            const value = this.dataValue;\n            this.refs.wrapper.forEach((wrapper, index) => {\n                const input = this.refs.input[index];\n                const checked = value === undefined || value === null\n                    ? false\n                    : input.type === 'checkbox'\n                        ? value[input.value] || input.checked\n                        : input.value.toString() === value.toString();\n                if (checked) {\n                    //add class to container when selected\n                    this.addClass(wrapper, this.optionSelectedClass);\n                    //change \"checked\" attribute\n                    input.setAttribute('checked', 'true');\n                }\n                else {\n                    this.removeClass(wrapper, this.optionSelectedClass);\n                    input.removeAttribute('checked');\n                }\n            });\n        }\n    }\n    updateValue(value, flags) {\n        var _a;\n        const changed = super.updateValue(value, flags);\n        if (changed) {\n            this.setSelectedClasses();\n        }\n        if (!flags || !flags.modified || !this.isRadio) {\n            if (changed) {\n                this.previousValue = this.dataValue;\n            }\n            if (!this.visible) {\n                this.previousValue = this.emptyValue;\n            }\n            return changed;\n        }\n        // If they clicked on the radio that is currently selected, it needs to reset the value.\n        this.currentValue = this.dataValue;\n        const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;\n        if (shouldResetValue) {\n            this.resetValue();\n            (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, flags);\n            this.setSelectedClasses();\n        }\n        this.previousValue = this.dataValue;\n        return changed;\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        var _a;\n        const dataType = this.component.dataType || 'auto';\n        if (value === this.emptyValue) {\n            return value;\n        }\n        switch (dataType) {\n            case 'auto':\n                if (!isNaN(parseFloat(value)) &&\n                    isFinite(value) &&\n                    lodash_1.default.toString(value) === Number(value).toString()) {\n                    value = +value;\n                }\n                if (value === 'true') {\n                    value = true;\n                }\n                if (value === 'false') {\n                    value = false;\n                }\n                break;\n            case 'number':\n                value = +value;\n                break;\n            case 'string':\n                if (typeof value === 'object') {\n                    value = JSON.stringify(value);\n                }\n                else {\n                    value = String(value);\n                }\n                break;\n            case 'boolean':\n                value = !(!value || value.toString() === 'false');\n                break;\n        }\n        if (this.isSelectURL && this.templateData && this.templateData[value]) {\n            const submission = (_a = this.root) === null || _a === void 0 ? void 0 : _a.submission;\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);\n        }\n        return super.normalizeValue(value);\n    }\n}\nexports[\"default\"] = RadioComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/radio/Radio.js?\n}");
+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/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst ListComponent_1 = __importDefault(__webpack_require__(/*! ../_classes/list/ListComponent */ \"./lib/cjs/components/_classes/list/ListComponent.js\"));\nconst Formio_1 = __webpack_require__(/*! ../../Formio */ \"./lib/cjs/Formio.js\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nclass RadioComponent extends ListComponent_1.default {\n    static schema(...extend) {\n        return ListComponent_1.default.schema({\n            type: 'radio',\n            inputType: 'radio',\n            label: 'Radio',\n            key: 'radio',\n            values: [{ label: '', value: '' }],\n            data: {\n                url: '',\n            },\n            fieldSet: false,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Radio',\n            group: 'basic',\n            icon: 'dot-circle-o',\n            weight: 80,\n            documentation: '/userguide/form-building/form-components#radio',\n            schema: RadioComponent.schema(),\n        };\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { valueComponent(classComp) {\n                const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';\n                return isValuesSrc\n                    ? {\n                        type: 'select',\n                        dataSrc: 'custom',\n                        valueProperty: 'value',\n                        dataType: classComp.dataType || '',\n                        data: {\n                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,\n                        },\n                    }\n                    : Object.assign(Object.assign({}, classComp), { type: 'select' });\n            } });\n    }\n    static get serverConditionSettings() {\n        return RadioComponent.conditionOperatorsSettings;\n    }\n    static savedValueTypes(schema) {\n        const { boolean, string, number, object, array } = utils_1.componentValueTypes;\n        const { dataType } = schema;\n        const types = (0, utils_1.getComponentSavedTypes)(schema);\n        if (types) {\n            return types;\n        }\n        if (dataType === 'object') {\n            return [object, array];\n        }\n        if (utils_1.componentValueTypes[dataType]) {\n            return [utils_1.componentValueTypes[dataType]];\n        }\n        return [boolean, string, number, object, array];\n    }\n    constructor(component, options, data) {\n        super(component, options, data);\n        this.previousValue = this.dataValue || null;\n    }\n    get defaultSchema() {\n        return RadioComponent.schema();\n    }\n    get defaultValue() {\n        let defaultValue = super.defaultValue;\n        if (!defaultValue && this.component.defaultValue === false) {\n            defaultValue = this.component.defaultValue;\n        }\n        return defaultValue;\n    }\n    resetValue() {\n        this.unset();\n        this.setValue(this.emptyValue, {\n            noUpdateEvent: true,\n            noValidate: true,\n            resetValue: true,\n        });\n    }\n    get inputInfo() {\n        var _a;\n        const info = super.elementInfo();\n        info.type = 'input';\n        info.changeEvent = 'click';\n        info.attr.class = 'form-check-input';\n        info.attr.name = info.attr.name += `[${(_a = this.root) === null || _a === void 0 ? void 0 : _a.id}-${this.id}]`;\n        return info;\n    }\n    get emptyValue() {\n        return '';\n    }\n    get isRadio() {\n        return this.component.inputType === 'radio';\n    }\n    get optionSelectedClass() {\n        return 'radio-selected';\n    }\n    get listData() {\n        const listData = lodash_1.default.get(this.root, 'submission.metadata.listData', {});\n        return lodash_1.default.get(listData, this.path);\n    }\n    get selectMetadata() {\n        return super.selectData;\n    }\n    get selectData() {\n        return this.selectMetadata || this.component.selectData;\n    }\n    init() {\n        super.init();\n        this.templateData = {};\n        // Trigger an update.//\n        let updateArgs = [];\n        const triggerUpdate = lodash_1.default.debounce((...args) => {\n            updateArgs = [];\n            return this.updateItems.apply(this, args);\n        }, 100);\n        this.triggerUpdate = (...args) => {\n            // Make sure we always resolve the previous promise before reassign it\n            if (typeof this.itemsLoadedResolve === 'function') {\n                this.itemsLoadedResolve();\n            }\n            this.itemsLoaded = new Promise((resolve) => {\n                this.itemsLoadedResolve = resolve;\n            });\n            if (args.length) {\n                updateArgs = args;\n            }\n            return triggerUpdate(...updateArgs);\n        };\n        this.itemsLoaded = new Promise((resolve) => {\n            this.itemsLoadedResolve = resolve;\n        });\n        this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';\n        this.loadedOptions = [];\n        if (!this.visible || this.optionsLoaded) {\n            this.itemsLoadedResolve();\n        }\n        // Get the template keys for this radio component.\n        this.getTemplateKeys();\n    }\n    beforeSubmit() {\n        return new Promise((res) => {\n            this.dataReady.then(() => res(true));\n        });\n    }\n    render() {\n        if (!this.optionsLoaded) {\n            return super.render(this.renderTemplate('loader'));\n        }\n        return super.render(this.renderTemplate('radio', {\n            input: this.inputInfo,\n            inline: this.component.inline,\n            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,\n            value: this.dataValue,\n            row: this.row,\n        }));\n    }\n    attach(element) {\n        this.loadRefs(element, { input: 'multiple', wrapper: 'multiple' });\n        this.refs.input.forEach((input, index) => {\n            this.addEventListener(input, this.inputInfo.changeEvent, () => {\n                this.updateValue(null, {\n                    modified: true,\n                });\n            });\n            if (this.component.values[index]) {\n                this.addShortcut(input, this.component.values[index].shortcut);\n            }\n            if (this.isRadio) {\n                let dataValue = this.dataValue;\n                if (!lodash_1.default.isString(this.dataValue)) {\n                    dataValue = lodash_1.default.toString(this.dataValue);\n                }\n                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {\n                    const optionValue = this.component.dataType === 'string'\n                        ? JSON.stringify(this.loadedOptions[index].value)\n                        : this.loadedOptions[index].value;\n                    input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);\n                }\n                else {\n                    input.checked =\n                        dataValue === input.value && (input.value || this.component.dataSrc !== 'url');\n                }\n                this.addEventListener(input, 'keyup', (event) => {\n                    if (event.key === ' ' && dataValue === input.value) {\n                        event.preventDefault();\n                        this.updateValue(null, {\n                            modified: true,\n                        });\n                    }\n                });\n            }\n        });\n        this.triggerUpdate();\n        this.setSelectedClasses();\n        return super.attach(element);\n    }\n    detach(element) {\n        if (element && this.refs.input) {\n            this.refs.input.forEach((input, index) => {\n                if (this.component.values[index]) {\n                    this.removeShortcut(input, this.component.values[index].shortcut);\n                }\n            });\n        }\n        super.detach();\n    }\n    getValue() {\n        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {\n            return this.dataValue;\n        }\n        // If the input type of the component is checkbox the value should be determined by the checkboxes checked property\n        let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;\n        this.refs.input.forEach((input, index) => {\n            if (input.checked) {\n                value =\n                    this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)\n                        ? this.loadedOptions[index].value\n                        : input.value;\n            }\n        });\n        return value;\n    }\n    validateValueProperty() {\n        if (this.component.dataSrc === 'values') {\n            return true;\n        }\n        return !lodash_1.default.some(this.refs.wrapper, (wrapper, index) => this.refs.input[index].checked && this.loadedOptions[index].invalid);\n    }\n    validateValueAvailability(setting, value) {\n        if (!(0, utils_1.boolValue)(setting) || !value) {\n            return true;\n        }\n        const values = this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions;\n        if (values) {\n            return (values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !==\n                -1);\n        }\n        return false;\n    }\n    getValueAsString(value, options = {}) {\n        if (lodash_1.default.isObject(value)) {\n            value = JSON.stringify(value);\n        }\n        else if (!lodash_1.default.isString(value)) {\n            value = lodash_1.default.toString(value);\n        }\n        const shouldUseSelectData = (options.modalPreview || this.inDataTable) &&\n            this.component.dataSrc === 'url' &&\n            (this.loadedOptions.length || this.selectData);\n        if (this.component.dataSrc !== 'values' && !shouldUseSelectData) {\n            return value;\n        }\n        const values = shouldUseSelectData ? this.loadedOptions : this.component.values;\n        const option = !(values === null || values === void 0 ? void 0 : values.length) && shouldUseSelectData\n            ? {\n                label: this.itemTemplate(this.selectData),\n            }\n            : lodash_1.default.find(values, (v) => v.value === value);\n        if (!value) {\n            return lodash_1.default.get(option, 'label', '');\n        }\n        return lodash_1.default.get(option, 'label', '');\n    }\n    setValueAt(index, value) {\n        if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {\n            const inputValue = this.refs.input[index].value;\n            this.refs.input[index].checked = inputValue === value.toString();\n        }\n    }\n    get shouldLoad() {\n        // do not load options if the value is empty in readOnly and we have options available in metadata\n        if (this.options.readOnly && this.isEmpty() && this.listData) {\n            return false;\n        }\n        return super.shouldLoad;\n    }\n    loadItems(url, search, headers, options, method, body) {\n        if (this.optionsLoaded) {\n            this.itemsLoadedResolve();\n            return;\n        }\n        if (!this.shouldLoad && this.listData) {\n            this.loadItemsFromMetadata();\n            this.itemsLoadedResolve();\n            this.optionsLoaded = true;\n            return;\n        }\n        // Ensure we have a method and remove any body if method is get\n        method = method || 'GET';\n        if (method.toUpperCase() === 'GET') {\n            body = null;\n        }\n        const limit = this.component.limit || 100;\n        const skip = this.isScrollLoading ? this.selectOptions.length : 0;\n        // Allow for url interpolation.\n        url = this.sanitize(this.interpolate(url, {\n            formioBase: Formio_1.Formio.getBaseUrl(),\n            search,\n            limit,\n            skip,\n            page: Math.abs(Math.floor(skip / limit)),\n        }), this.shouldSanitizeValue);\n        // Set ignoreCache if it is\n        options.ignoreCache = this.component.ignoreCache;\n        // Make the request.\n        options.header = headers;\n        this.loading = true;\n        Formio_1.Formio.makeRequest(this.options.formio, 'select', url, method, body, options)\n            .then((response) => {\n            this.loading = false;\n            this.setItems(response);\n        })\n            .catch((err) => {\n            this.handleLoadingError(err);\n        })\n            .finally(() => {\n            this.optionsLoaded = true;\n            this.redraw();\n        });\n    }\n    loadItemsFromMetadata() {\n        this.listData.forEach((item, i) => {\n            this.loadedOptions[i] = {\n                label: this.itemTemplate(item),\n            };\n            if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {\n                this.loadedOptions[i].value = this.dataValue;\n            }\n        });\n        this.optionsLoaded = true;\n        this.redraw();\n    }\n    setItems(items) {\n        var _a;\n        const listData = [];\n        // If the items is a string, then parse as JSON.\n        if (typeof items == 'string') {\n            try {\n                items = JSON.parse(items);\n            }\n            catch (err) {\n                console.warn(err.message);\n                items = [];\n            }\n        }\n        items === null || items === void 0 ? void 0 : items.forEach((item, i) => {\n            const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);\n            this.loadedOptions[i] = {\n                value: this.component.valueProperty ? valueAtProperty : item,\n                label: this.component.valueProperty\n                    ? this.itemTemplate(item, valueAtProperty)\n                    : this.itemTemplate(item, item, i),\n            };\n            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);\n            const value = this.loadedOptions[i].value;\n            if (!this.isRadio && (lodash_1.default.isObject(value) || lodash_1.default.isBoolean(value) || lodash_1.default.isUndefined(value))) {\n                this.loadedOptions[i].invalid = true;\n            }\n        });\n        if (this.isSelectURL) {\n            const submission = (_a = this.root) === null || _a === void 0 ? void 0 : _a.submission;\n            if (!submission.metadata) {\n                submission.metadata = {};\n            }\n            if (!submission.metadata.listData) {\n                submission.metadata.listData = {};\n            }\n            lodash_1.default.set(submission.metadata.listData, this.path, listData);\n        }\n        this.itemsLoadedResolve();\n    }\n    setSelectedClasses() {\n        if (this.refs.wrapper) {\n            //add/remove selected option class\n            const value = this.dataValue;\n            this.refs.wrapper.forEach((wrapper, index) => {\n                const input = this.refs.input[index];\n                const checked = value === undefined || value === null\n                    ? false\n                    : input.type === 'checkbox'\n                        ? value[input.value] || input.checked\n                        : input.value.toString() === value.toString();\n                if (checked) {\n                    //add class to container when selected\n                    this.addClass(wrapper, this.optionSelectedClass);\n                    //change \"checked\" attribute\n                    input.setAttribute('checked', 'true');\n                }\n                else {\n                    this.removeClass(wrapper, this.optionSelectedClass);\n                    input.removeAttribute('checked');\n                }\n            });\n        }\n    }\n    updateValue(value, flags) {\n        var _a;\n        const changed = super.updateValue(value, flags);\n        if (changed) {\n            this.setSelectedClasses();\n        }\n        if (!flags || !flags.modified || !this.isRadio) {\n            if (changed) {\n                this.previousValue = this.dataValue;\n            }\n            if (!this.visible) {\n                this.previousValue = this.emptyValue;\n            }\n            return changed;\n        }\n        // If they clicked on the radio that is currently selected, it needs to reset the value.\n        this.currentValue = this.dataValue;\n        const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;\n        if (shouldResetValue) {\n            this.resetValue();\n            (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, flags);\n            this.setSelectedClasses();\n        }\n        this.previousValue = this.dataValue;\n        return changed;\n    }\n    /**\n     * Normalize values coming into updateValue. For example, depending on the configuration, string value `\"true\"` will be normalized to boolean `true`.\n     * @param {*} value - The value to normalize\n     * @returns {*} - Returns the normalized value\n     */\n    normalizeValue(value) {\n        var _a;\n        const dataType = this.component.dataType || 'auto';\n        if (value === this.emptyValue) {\n            return value;\n        }\n        switch (dataType) {\n            case 'auto':\n                if (!isNaN(parseFloat(value)) &&\n                    isFinite(value) &&\n                    lodash_1.default.toString(value) === Number(value).toString()) {\n                    value = +value;\n                }\n                if (value === 'true') {\n                    value = true;\n                }\n                if (value === 'false') {\n                    value = false;\n                }\n                break;\n            case 'number':\n                value = +value;\n                break;\n            case 'string':\n                if (typeof value === 'object') {\n                    value = JSON.stringify(value);\n                }\n                else {\n                    value = String(value);\n                }\n                break;\n            case 'boolean':\n                value = !(!value || value.toString() === 'false');\n                break;\n        }\n        if (this.isSelectURL && this.templateData && this.templateData[value]) {\n            const submission = (_a = this.root) === null || _a === void 0 ? void 0 : _a.submission;\n            if (!submission.metadata.selectData) {\n                submission.metadata.selectData = {};\n            }\n            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);\n        }\n        return super.normalizeValue(value);\n    }\n}\nexports[\"default\"] = RadioComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/radio/Radio.js?\n}");
 
 /***/ }),
 
@@ -8278,7 +8278,7 @@ eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod)
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst signature_pad_1 = __importDefault(__webpack_require__(/*! signature_pad */ \"../../node_modules/.pnpm/signature_pad@4.2.0/node_modules/signature_pad/dist/signature_pad.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nclass SignatureComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'signature',\n            label: 'Signature',\n            key: 'signature',\n            footer: 'Sign above',\n            width: '100%',\n            height: '150px',\n            penColor: 'black',\n            backgroundColor: 'rgb(245,245,235)',\n            minWidth: '0.5',\n            maxWidth: '2.5',\n            keepOverlayRatio: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Signature',\n            group: 'advanced',\n            icon: 'pencil',\n            weight: 120,\n            documentation: '/userguide/forms/form-building/form-components/advanced-components#signature',\n            schema: SignatureComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return SignatureComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];\n    }\n    init() {\n        var _a, _b, _c, _d;\n        super.init();\n        this.currentWidth = 0;\n        this.scale = 1;\n        if (!this.component.width) {\n            this.component.width = '100%';\n        }\n        if (!this.component.height) {\n            this.component.height = '200px';\n        }\n        if (this.component.keepOverlayRatio &&\n            this.options.pdf &&\n            ((_a = this.component.overlay) === null || _a === void 0 ? void 0 : _a.width) &&\n            ((_b = this.component.overlay) === null || _b === void 0 ? void 0 : _b.height)) {\n            this.ratio = ((_c = this.component.overlay) === null || _c === void 0 ? void 0 : _c.width) / ((_d = this.component.overlay) === null || _d === void 0 ? void 0 : _d.height);\n            this.component.width = '100%';\n            this.component.height = 'auto';\n        }\n    }\n    get emptyValue() {\n        return '';\n    }\n    get defaultSchema() {\n        return SignatureComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        return info;\n    }\n    get className() {\n        return `${super.className} signature-pad`;\n    }\n    labelIsHidden() {\n        return this.component.hideLabel;\n    }\n    setValue(value, flags = {}) {\n        var _a;\n        const changed = super.setValue(value, flags);\n        if (this.refs.signatureImage && (this.options.readOnly || this.disabled)) {\n            this.refs.signatureImage.setAttribute('src', value);\n            this.showCanvas(false);\n        }\n        if (this.signaturePad) {\n            if (!value) {\n                this.signaturePad.clear();\n            }\n            else if (changed) {\n                (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this);\n            }\n        }\n        if (this.signaturePad && this.dataValue && this.signaturePad.isEmpty()) {\n            this.setDataToSigaturePad();\n        }\n        return changed;\n    }\n    showCanvas(show) {\n        if (show) {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'inherit';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'none';\n            }\n        }\n        else {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'none';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'inherit';\n                this.refs.signatureImage.style.maxHeight = '100%';\n            }\n        }\n    }\n    onDisabled() {\n        this.showCanvas(!super.disabled);\n        if (this.signaturePad) {\n            if (super.disabled) {\n                this.signaturePad.off();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.add('disabled');\n                }\n                if (this.refs.signatureImage && this.dataValue) {\n                    this.refs.signatureImage.setAttribute('src', this.dataValue);\n                }\n            }\n            else {\n                this.signaturePad.on();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.remove('disabled');\n                }\n            }\n        }\n    }\n    checkSize(force, scale) {\n        if (this.refs.padBody &&\n            (force || (this.refs.padBody && this.refs.padBody.offsetWidth !== this.currentWidth))) {\n            this.scale = force ? scale : this.scale;\n            this.currentWidth = this.refs.padBody.offsetWidth;\n            const width = this.currentWidth * this.scale;\n            const height = this.ratio ? width / this.ratio : this.refs.padBody.offsetHeight * this.scale;\n            const maxHeight = this.ratio ? height : this.refs.padBody.offsetHeight * this.scale;\n            this.refs.canvas.width = width;\n            this.refs.canvas.height = height > maxHeight ? maxHeight : height;\n            this.refs.canvas.style.maxWidth = `${this.currentWidth * this.scale}px`;\n            this.refs.canvas.style.maxHeight = `${maxHeight}px`;\n            const ctx = this.refs.canvas.getContext('2d');\n            ctx.setTransform(1, 0, 0, 1, 0, 0);\n            ctx.scale(1 / this.scale, 1 / this.scale);\n            ctx.fillStyle = this.signaturePad.backgroundColor;\n            ctx.fillRect(0, 0, this.refs.canvas.width, this.refs.canvas.height);\n            this.signaturePad.clear();\n            if (this.dataValue) {\n                this.setDataToSigaturePad();\n            }\n            if (!this.disabled) {\n                this.showCanvas(true);\n            }\n        }\n    }\n    renderElement(value, index) {\n        return this.renderTemplate('signature', {\n            element: super.renderElement(value, index),\n            required: lodash_1.default.get(this.component, 'validate.required', false),\n        });\n    }\n    get hasModalSaveButton() {\n        return false;\n    }\n    getModalPreviewTemplate() {\n        return this.renderModalPreview({\n            previewText: this.dataValue\n                ? `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style=\"width: 100%;height: 100%;\" />`\n                : this.t('clickToSign'),\n        });\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            canvas: 'single',\n            refresh: 'single',\n            padBody: 'single',\n            signatureImage: 'single',\n        });\n        const superAttach = super.attach(element);\n        if (this.refs.refresh && this.options.readOnly) {\n            this.refs.refresh.classList.add('disabled');\n        }\n        // Create the signature pad.\n        if (this.refs.canvas) {\n            this.signaturePad = new signature_pad_1.default(this.refs.canvas, {\n                minWidth: this.component.minWidth,\n                maxWidth: this.component.maxWidth,\n                penColor: this.component.penColor,\n                backgroundColor: this.component.backgroundColor,\n            });\n            this.signaturePad.addEventListener('endStroke', () => this.setValue(this.signaturePad.toDataURL()));\n            this.refs.signatureImage.setAttribute('src', this.signaturePad.toDataURL());\n            this.onDisabled();\n            // Ensure the signature is always the size of its container.\n            if (this.refs.padBody) {\n                if (!this.refs.padBody.style.maxWidth) {\n                    this.refs.padBody.style.maxWidth = '100%';\n                }\n                if (!this.builderMode && !this.options.preview) {\n                    this.observer = new ResizeObserver(() => {\n                        this.checkSize();\n                    });\n                    this.observer.observe(this.refs.padBody);\n                }\n                this.addEventListener(window, 'resize', lodash_1.default.debounce(() => this.checkSize(), 10));\n                setTimeout(function checkWidth() {\n                    if (this.refs.padBody && this.refs.padBody.offsetWidth) {\n                        this.checkSize();\n                    }\n                    else {\n                        setTimeout(checkWidth.bind(this), 20);\n                    }\n                }.bind(this), 20);\n            }\n        }\n        this.addEventListener(this.refs.refresh, 'click', (event) => {\n            event.preventDefault();\n            this.showCanvas(true);\n            this.signaturePad.clear();\n            this.setValue(this.defaultValue);\n        });\n        this.setValue(this.dataValue);\n        return superAttach;\n    }\n    detach() {\n        if (this.observer) {\n            this.observer.disconnect();\n            this.observer = null;\n        }\n        if (this.signaturePad) {\n            this.signaturePad.off();\n        }\n        this.signaturePad = null;\n        this.currentWidth = 0;\n        super.detach();\n    }\n    getValueAsString(value) {\n        if (lodash_1.default.isUndefined(value) && this.inDataTable) {\n            return '';\n        }\n        return this.t(value ? 'yes' : 'no');\n    }\n    focus() {\n        this.refs.padBody.focus();\n    }\n    setDataToSigaturePad() {\n        this.signaturePad.fromDataURL(this.dataValue, {\n            ratio: 1,\n            width: this.refs.canvas.width,\n            height: this.refs.canvas.height,\n        });\n    }\n}\nexports[\"default\"] = SignatureComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/signature/Signature.js?\n}");
+eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst signature_pad_1 = __importDefault(__webpack_require__(/*! signature_pad */ \"../../node_modules/.pnpm/signature_pad@4.2.0/node_modules/signature_pad/dist/signature_pad.js\"));\nconst Input_1 = __importDefault(__webpack_require__(/*! ../_classes/input/Input */ \"./lib/cjs/components/_classes/input/Input.js\"));\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./lib/cjs/utils/index.js\");\nclass SignatureComponent extends Input_1.default {\n    static schema(...extend) {\n        return Input_1.default.schema({\n            type: 'signature',\n            label: 'Signature',\n            key: 'signature',\n            footer: 'Sign above',\n            width: '100%',\n            height: '150px',\n            penColor: 'black',\n            backgroundColor: 'rgb(245,245,235)',\n            minWidth: '0.5',\n            maxWidth: '2.5',\n            keepOverlayRatio: true,\n        }, ...extend);\n    }\n    static get builderInfo() {\n        return {\n            title: 'Signature',\n            group: 'advanced',\n            icon: 'pencil',\n            weight: 120,\n            documentation: '/userguide/forms/form-building/form-components/advanced-components#signature',\n            schema: SignatureComponent.schema(),\n        };\n    }\n    static get serverConditionSettings() {\n        return SignatureComponent.conditionOperatorsSettings;\n    }\n    static get conditionOperatorsSettings() {\n        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });\n    }\n    static savedValueTypes(schema) {\n        schema = schema || {};\n        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];\n    }\n    init() {\n        var _a, _b, _c, _d, _e;\n        super.init();\n        this.currentWidth = 0;\n        this.scale = 1;\n        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.inFormBuilder) {\n            if (!this.component.width) {\n                this.component.width = '100%';\n            }\n            if (!this.component.height) {\n                this.component.height = '200px';\n            }\n            if (this.component.keepOverlayRatio &&\n                this.options.pdf &&\n                ((_b = this.component.overlay) === null || _b === void 0 ? void 0 : _b.width) &&\n                ((_c = this.component.overlay) === null || _c === void 0 ? void 0 : _c.height)) {\n                this.ratio = ((_d = this.component.overlay) === null || _d === void 0 ? void 0 : _d.width) / ((_e = this.component.overlay) === null || _e === void 0 ? void 0 : _e.height);\n                this.component.width = '100%';\n                this.component.height = 'auto';\n            }\n        }\n    }\n    get emptyValue() {\n        return '';\n    }\n    get defaultSchema() {\n        return SignatureComponent.schema();\n    }\n    get inputInfo() {\n        const info = super.inputInfo;\n        info.type = 'input';\n        info.attr.type = 'hidden';\n        return info;\n    }\n    get className() {\n        return `${super.className} signature-pad`;\n    }\n    labelIsHidden() {\n        return this.component.hideLabel;\n    }\n    setValue(value, flags = {}) {\n        var _a;\n        const changed = super.setValue(value, flags);\n        if (this.refs.signatureImage && (this.options.readOnly || this.disabled)) {\n            this.refs.signatureImage.setAttribute('src', value);\n            this.showCanvas(false);\n        }\n        if (this.signaturePad) {\n            if (!value) {\n                this.signaturePad.clear();\n            }\n            else if (changed) {\n                (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this);\n            }\n        }\n        if (this.signaturePad && this.dataValue && this.signaturePad.isEmpty()) {\n            this.setDataToSigaturePad();\n        }\n        return changed;\n    }\n    showCanvas(show) {\n        if (show) {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'inherit';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'none';\n            }\n        }\n        else {\n            if (this.refs.canvas) {\n                this.refs.canvas.style.display = 'none';\n            }\n            if (this.refs.signatureImage) {\n                this.refs.signatureImage.style.display = 'inherit';\n                this.refs.signatureImage.style.maxHeight = '100%';\n            }\n        }\n    }\n    onDisabled() {\n        this.showCanvas(!super.disabled);\n        if (this.signaturePad) {\n            if (super.disabled) {\n                this.signaturePad.off();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.add('disabled');\n                }\n                if (this.refs.signatureImage && this.dataValue) {\n                    this.refs.signatureImage.setAttribute('src', this.dataValue);\n                }\n            }\n            else {\n                this.signaturePad.on();\n                if (this.refs.refresh) {\n                    this.refs.refresh.classList.remove('disabled');\n                }\n            }\n        }\n    }\n    checkSize(force, scale) {\n        if (this.refs.padBody &&\n            (force || (this.refs.padBody && this.refs.padBody.offsetWidth !== this.currentWidth))) {\n            this.scale = force ? scale : this.scale;\n            this.currentWidth = this.refs.padBody.offsetWidth;\n            const width = this.currentWidth * this.scale;\n            const height = this.ratio ? width / this.ratio : this.refs.padBody.offsetHeight * this.scale;\n            const maxHeight = this.ratio ? height : this.refs.padBody.offsetHeight * this.scale;\n            this.refs.canvas.width = width;\n            this.refs.canvas.height = height > maxHeight ? maxHeight : height;\n            this.refs.canvas.style.maxWidth = `${this.currentWidth * this.scale}px`;\n            this.refs.canvas.style.maxHeight = `${maxHeight}px`;\n            const ctx = this.refs.canvas.getContext('2d');\n            ctx.setTransform(1, 0, 0, 1, 0, 0);\n            ctx.scale(1 / this.scale, 1 / this.scale);\n            ctx.fillStyle = this.signaturePad.backgroundColor;\n            ctx.fillRect(0, 0, this.refs.canvas.width, this.refs.canvas.height);\n            this.signaturePad.clear();\n            if (this.dataValue) {\n                this.setDataToSigaturePad();\n            }\n            if (!this.disabled) {\n                this.showCanvas(true);\n            }\n        }\n    }\n    renderElement(value, index) {\n        return this.renderTemplate('signature', {\n            element: super.renderElement(value, index),\n            required: lodash_1.default.get(this.component, 'validate.required', false),\n        });\n    }\n    get hasModalSaveButton() {\n        return false;\n    }\n    getModalPreviewTemplate() {\n        return this.renderModalPreview({\n            previewText: this.dataValue\n                ? `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style=\"width: 100%;height: 100%;\" />`\n                : this.t('clickToSign'),\n        });\n    }\n    attach(element) {\n        this.loadRefs(element, {\n            canvas: 'single',\n            refresh: 'single',\n            padBody: 'single',\n            signatureImage: 'single',\n        });\n        const superAttach = super.attach(element);\n        if (this.refs.refresh && this.options.readOnly) {\n            this.refs.refresh.classList.add('disabled');\n        }\n        // Create the signature pad.\n        if (this.refs.canvas) {\n            this.signaturePad = new signature_pad_1.default(this.refs.canvas, {\n                minWidth: this.component.minWidth,\n                maxWidth: this.component.maxWidth,\n                penColor: this.component.penColor,\n                backgroundColor: this.component.backgroundColor,\n            });\n            this.signaturePad.addEventListener('endStroke', () => this.setValue(this.signaturePad.toDataURL()));\n            this.refs.signatureImage.setAttribute('src', this.signaturePad.toDataURL());\n            this.onDisabled();\n            // Ensure the signature is always the size of its container.\n            if (this.refs.padBody) {\n                if (!this.refs.padBody.style.maxWidth) {\n                    this.refs.padBody.style.maxWidth = '100%';\n                }\n                if (!this.builderMode && !this.options.preview) {\n                    this.observer = new ResizeObserver(() => {\n                        this.checkSize();\n                    });\n                    this.observer.observe(this.refs.padBody);\n                }\n                this.addEventListener(window, 'resize', lodash_1.default.debounce(() => this.checkSize(), 10));\n                setTimeout(function checkWidth() {\n                    if (this.refs.padBody && this.refs.padBody.offsetWidth) {\n                        this.checkSize();\n                    }\n                    else {\n                        setTimeout(checkWidth.bind(this), 20);\n                    }\n                }.bind(this), 20);\n            }\n        }\n        this.addEventListener(this.refs.refresh, 'click', (event) => {\n            event.preventDefault();\n            this.showCanvas(true);\n            this.signaturePad.clear();\n            this.setValue(this.defaultValue);\n        });\n        this.setValue(this.dataValue);\n        return superAttach;\n    }\n    detach() {\n        if (this.observer) {\n            this.observer.disconnect();\n            this.observer = null;\n        }\n        if (this.signaturePad) {\n            this.signaturePad.off();\n        }\n        this.signaturePad = null;\n        this.currentWidth = 0;\n        super.detach();\n    }\n    getValueAsString(value) {\n        if (lodash_1.default.isUndefined(value) && this.inDataTable) {\n            return '';\n        }\n        return this.t(value ? 'yes' : 'no');\n    }\n    focus() {\n        this.refs.padBody.focus();\n    }\n    setDataToSigaturePad() {\n        this.signaturePad.fromDataURL(this.dataValue, {\n            ratio: 1,\n            width: this.refs.canvas.width,\n            height: this.refs.canvas.height,\n        });\n    }\n}\nexports[\"default\"] = SignatureComponent;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/signature/Signature.js?\n}");
 
 /***/ }),
 
@@ -8619,7 +8619,7 @@ eval("{\nvar __importDefault = (this && this.__importDefault) || function (mod)
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst uuid_1 = __webpack_require__(/*! uuid */ \"../../node_modules/.pnpm/uuid@9.0.1/node_modules/uuid/dist/commonjs-browser/index.js\");\n/**\n * indexedDb provider for file storage.\n * @returns {import('./typedefs').FileProvider} The FileProvider interface defined in index.js.\n */\nfunction indexeddb() {\n    return {\n        title: 'indexedDB',\n        name: 'indexeddb',\n        uploadFile(file, fileName, dir, progressCallback, url, options) {\n            if (!('indexedDB' in window)) {\n                console.log(\"This browser doesn't support IndexedDB\");\n                return;\n            }\n            return new Promise((resolve) => {\n                const request = indexedDB.open(options.indexeddb);\n                request.onsuccess = function (event) {\n                    const db = event.target.result;\n                    resolve(db);\n                };\n                request.onupgradeneeded = function (e) {\n                    const db = e.target.result;\n                    db.createObjectStore(options.indexeddbTable);\n                };\n            }).then((db) => {\n                const reader = new FileReader();\n                return new Promise((resolve, reject) => {\n                    reader.onload = () => {\n                        const blobObject = new Blob([file], { type: file.type });\n                        const id = (0, uuid_1.v4)(blobObject);\n                        const data = {\n                            id,\n                            data: blobObject,\n                            name: file.name,\n                            size: file.size,\n                            type: file.type,\n                            url,\n                        };\n                        const trans = db.transaction([options.indexeddbTable], 'readwrite');\n                        const addReq = trans.objectStore(options.indexeddbTable).put(data, id);\n                        addReq.onerror = function (e) {\n                            console.log('error storing data');\n                            console.error(e);\n                        };\n                        trans.oncomplete = function () {\n                            resolve({\n                                storage: 'indexeddb',\n                                name: file.name,\n                                size: file.size,\n                                type: file.type,\n                                url: url,\n                                id,\n                            });\n                        };\n                    };\n                    reader.onerror = () => {\n                        return reject(this);\n                    };\n                    reader.readAsDataURL(file);\n                });\n            });\n        },\n        downloadFile(file, options) {\n            return new Promise((resolve) => {\n                const request = indexedDB.open(options.indexeddb);\n                request.onsuccess = function (event) {\n                    const db = event.target.result;\n                    resolve(db);\n                };\n            }).then((db) => {\n                return new Promise((resolve, reject) => {\n                    const trans = db.transaction([options.indexeddbTable], 'readonly');\n                    const store = trans.objectStore(options.indexeddbTable).get(file.id);\n                    store.onsuccess = () => {\n                        trans.oncomplete = () => {\n                            const result = store.result;\n                            const dbFile = new File([store.result.data], file.name, {\n                                type: store.result.type,\n                            });\n                            const reader = new FileReader();\n                            reader.onload = (event) => {\n                                result.url = event.target.result;\n                                result.storage = file.storage;\n                                resolve(result);\n                            };\n                            reader.onerror = () => {\n                                return reject(this);\n                            };\n                            reader.readAsDataURL(dbFile);\n                        };\n                    };\n                    store.onerror = () => {\n                        return reject(this);\n                    };\n                });\n            });\n        },\n        deleteFile(file, options) {\n            return new Promise((resolve) => {\n                const request = indexedDB.open(options.indexeddb);\n                request.onsuccess = function (event) {\n                    const db = event.target.result;\n                    resolve(db);\n                };\n            }).then((db) => {\n                return new Promise((resolve, reject) => {\n                    const trans = db.transaction([options.indexeddbTable], 'readwrite');\n                    const store = trans.objectStore(options.indexeddbTable).delete(file.id);\n                    store.onsuccess = () => {\n                        trans.oncomplete = () => {\n                            const result = store.result;\n                            resolve(result);\n                        };\n                    };\n                    store.onerror = () => {\n                        return reject(this);\n                    };\n                });\n            });\n        },\n    };\n}\nindexeddb.title = 'IndexedDB';\nexports[\"default\"] = indexeddb;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/indexeddb.js?\n}");
+eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst uuid_1 = __webpack_require__(/*! uuid */ \"../../node_modules/.pnpm/uuid@9.0.1/node_modules/uuid/dist/commonjs-browser/index.js\");\n/**\n * indexedDb provider for file storage.\n * @returns {import('./typedefs').FileProvider} The FileProvider interface defined in index.js.\n */\nfunction indexeddb() {\n    return {\n        title: 'indexedDB',\n        name: 'indexeddb',\n        uploadFile(file, fileName, dir, progressCallback, url, options) {\n            if (!('indexedDB' in window)) {\n                console.log(\"This browser doesn't support IndexedDB\");\n                return;\n            }\n            return new Promise((resolve) => {\n                const request = indexedDB.open(options.indexeddb);\n                request.onsuccess = function (event) {\n                    const db = event.target.result;\n                    resolve(db);\n                };\n                request.onupgradeneeded = function (e) {\n                    const db = e.target.result;\n                    db.createObjectStore(options.indexeddbTable);\n                };\n            }).then((db) => {\n                const reader = new FileReader();\n                return new Promise((resolve, reject) => {\n                    reader.onload = () => {\n                        const blobObject = new Blob([file], { type: file.type });\n                        const id = (0, uuid_1.v4)(blobObject);\n                        const data = {\n                            id,\n                            data: blobObject,\n                            name: file.name,\n                            size: file.size,\n                            type: file.type,\n                            url,\n                        };\n                        const trans = db.transaction([options.indexeddbTable], 'readwrite');\n                        const addReq = trans.objectStore(options.indexeddbTable).put(data, id);\n                        addReq.onerror = function (e) {\n                            console.log('error storing data');\n                            console.error(e);\n                        };\n                        trans.oncomplete = function () {\n                            resolve({\n                                storage: 'indexeddb',\n                                name: file.name,\n                                size: file.size,\n                                type: file.type,\n                                url: url,\n                                id,\n                            });\n                        };\n                    };\n                    reader.onerror = () => {\n                        return reject(this);\n                    };\n                    reader.readAsDataURL(file);\n                });\n            });\n        },\n        downloadFile(file, options) {\n            const opts = (options === null || options === void 0 ? void 0 : options.options) || options || {};\n            const dbName = opts.indexeddb;\n            const tableName = opts.indexeddbTable;\n            if (!dbName || !tableName) {\n                return Promise.reject(new Error('IndexedDB storage options (indexeddb, indexeddbTable) are required for download'));\n            }\n            return new Promise((resolve) => {\n                const request = indexedDB.open(dbName);\n                request.onsuccess = function (event) {\n                    const db = event.target.result;\n                    resolve(db);\n                };\n            }).then((db) => {\n                return new Promise((resolve, reject) => {\n                    const trans = db.transaction(tableName, 'readonly');\n                    const store = trans.objectStore(tableName).get(file.id);\n                    store.onsuccess = () => {\n                        trans.oncomplete = () => {\n                            const result = store.result;\n                            if (!result || !result.data) {\n                                return reject(new Error('File not found in IndexedDB'));\n                            }\n                            const dbFile = new File([result.data], file.name, {\n                                type: result.type,\n                            });\n                            const reader = new FileReader();\n                            reader.onload = (event) => {\n                                result.url = event.target.result;\n                                result.storage = file.storage;\n                                resolve(result);\n                            };\n                            reader.onerror = () => {\n                                return reject(this);\n                            };\n                            reader.readAsDataURL(dbFile);\n                        };\n                    };\n                    store.onerror = () => {\n                        return reject(this);\n                    };\n                });\n            });\n        },\n        deleteFile(file, options) {\n            return new Promise((resolve) => {\n                const request = indexedDB.open(options.indexeddb);\n                request.onsuccess = function (event) {\n                    const db = event.target.result;\n                    resolve(db);\n                };\n            }).then((db) => {\n                return new Promise((resolve, reject) => {\n                    const trans = db.transaction([options.indexeddbTable], 'readwrite');\n                    const store = trans.objectStore(options.indexeddbTable).delete(file.id);\n                    store.onsuccess = () => {\n                        trans.oncomplete = () => {\n                            const result = store.result;\n                            resolve(result);\n                        };\n                    };\n                    store.onerror = () => {\n                        return reject(this);\n                    };\n                });\n            });\n        },\n    };\n}\nindexeddb.title = 'IndexedDB';\nexports[\"default\"] = indexeddb;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/indexeddb.js?\n}");
 
 /***/ }),
 
@@ -8652,7 +8652,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexp
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/**\n *\n * @param {object} formio - formio instance\n * @returns {import('./typedefs').FileProvider} The FileProvider interface defined in index.js.\n */\nfunction url(formio) {\n    /**\n     *\n     * @param {object} options - options to set on the xhr\n     * @param {object} xhr - the xhr object\n     */\n    function setOptions(options, xhr) {\n        const parsedOptions = typeof options === 'string' ? JSON.parse(options) : options;\n        for (const prop in parsedOptions) {\n            if (prop === 'headers') {\n                const headers = parsedOptions['headers'];\n                for (const header in headers) {\n                    xhr.setRequestHeader(header, headers[header]);\n                }\n            }\n            else {\n                xhr[prop] = parsedOptions[prop];\n            }\n        }\n    }\n    const xhrRequest = (url, name, query, data, options, progressCallback, abortCallback) => {\n        return new Promise((resolve, reject) => {\n            const xhr = new XMLHttpRequest();\n            const json = typeof data === 'string';\n            const fd = new FormData();\n            if (typeof progressCallback === 'function') {\n                xhr.upload.onprogress = progressCallback;\n            }\n            if (typeof abortCallback === 'function') {\n                abortCallback(() => xhr.abort());\n            }\n            if (!json) {\n                for (const key in data) {\n                    fd.append(key, data[key]);\n                }\n            }\n            xhr.onload = () => {\n                if (xhr.status >= 200 && xhr.status < 300) {\n                    // Need to test if xhr.response is decoded or not.\n                    let respData = {};\n                    try {\n                        respData = typeof xhr.response === 'string' ? JSON.parse(xhr.response) : {};\n                        respData = respData && respData.data ? respData.data : respData;\n                    }\n                    catch (ignoreErr) {\n                        respData = {};\n                    }\n                    // Get the url of the file.\n                    let respUrl = respData.hasOwnProperty('url')\n                        ? respData.url\n                        : `${xhr.responseURL}/${name}`;\n                    // If they provide relative url, then prepend the url.\n                    if (respUrl && respUrl[0] === '/') {\n                        respUrl = `${url}${respUrl}`;\n                    }\n                    resolve({ url: respUrl, data: respData });\n                }\n                else {\n                    reject(xhr.response || 'Unable to upload file');\n                }\n            };\n            xhr.onerror = () => reject(xhr);\n            xhr.onabort = () => reject(xhr);\n            let requestUrl = url + (url.indexOf('?') > -1 ? '&' : '?');\n            for (const key in query) {\n                requestUrl += `${key}=${query[key]}&`;\n            }\n            if (requestUrl[requestUrl.length - 1] === '&') {\n                requestUrl = requestUrl.substr(0, requestUrl.length - 1);\n            }\n            xhr.open('POST', requestUrl);\n            if (json) {\n                xhr.setRequestHeader('Content-Type', 'application/json');\n            }\n            const token = formio.getToken();\n            if (token) {\n                xhr.setRequestHeader('x-jwt-token', token);\n            }\n            //Overrides previous request props\n            if (options) {\n                setOptions(options, xhr);\n            }\n            xhr.send(json ? data : fd);\n        });\n    };\n    return {\n        title: 'Url',\n        name: 'url',\n        uploadFile(file, name, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback) {\n            const uploadRequest = function (form) {\n                return xhrRequest(url, name, {\n                    baseUrl: encodeURIComponent(formio.projectUrl),\n                    project: form ? form.project : '',\n                    form: form ? form._id : '',\n                }, {\n                    [fileKey]: file,\n                    name,\n                    dir,\n                }, options, progressCallback, abortCallback).then((response) => {\n                    // Store the project and form url along with the metadata.\n                    response.data = response.data || {};\n                    response.data.baseUrl = formio.projectUrl;\n                    response.data.project = form ? form.project : '';\n                    response.data.form = form ? form._id : '';\n                    return {\n                        storage: 'url',\n                        name,\n                        url: response.url,\n                        size: file.size,\n                        type: file.type,\n                        data: response.data,\n                    };\n                });\n            };\n            if (file.private && formio.formId) {\n                return formio.loadForm().then((form) => uploadRequest(form));\n            }\n            else {\n                return uploadRequest();\n            }\n        },\n        deleteFile(fileInfo, options) {\n            return new Promise((resolve, reject) => {\n                const xhr = new XMLHttpRequest();\n                xhr.open('DELETE', fileInfo.url, true);\n                xhr.onload = () => {\n                    if (xhr.status >= 200 && xhr.status < 300) {\n                        resolve('File deleted');\n                    }\n                    else {\n                        reject(xhr.response || 'Unable to delete file');\n                    }\n                };\n                if (options) {\n                    setOptions(options, xhr);\n                }\n                xhr.send(null);\n            });\n        },\n        downloadFile(file) {\n            if (file.private) {\n                if (formio.submissionId && file.data) {\n                    file.data.submission = formio.submissionId;\n                }\n                return xhrRequest(file.url, file.name, {}, JSON.stringify(file)).then((response) => response.data);\n            }\n            // Return the original as there is nothing to do.\n            return Promise.resolve(file);\n        },\n    };\n}\nurl.title = 'Url';\nexports[\"default\"] = url;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/url.js?\n}");
+eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n/**\n *\n * @param {object} formio - formio instance\n * @returns {import('./typedefs').FileProvider} The FileProvider interface defined in index.js.\n */\nfunction url(formio) {\n    /**\n     *\n     * @param {object} options - options to set on the xhr\n     * @param {object} xhr - the xhr object\n     */\n    function setOptions(options, xhr) {\n        const parsedOptions = typeof options === 'string' ? JSON.parse(options) : options;\n        for (const prop in parsedOptions) {\n            if (prop === 'headers') {\n                const headers = parsedOptions['headers'];\n                for (const header in headers) {\n                    xhr.setRequestHeader(header, headers[header]);\n                }\n            }\n            else {\n                xhr[prop] = parsedOptions[prop];\n            }\n        }\n    }\n    const xhrRequest = (url, name, query, data, options, progressCallback, abortCallback) => {\n        return new Promise((resolve, reject) => {\n            const xhr = new XMLHttpRequest();\n            const json = typeof data === 'string';\n            const fd = new FormData();\n            if (typeof progressCallback === 'function') {\n                xhr.upload.onprogress = progressCallback;\n            }\n            if (typeof abortCallback === 'function') {\n                abortCallback(() => xhr.abort());\n            }\n            if (!json) {\n                for (const key in data) {\n                    fd.append(key, data[key]);\n                }\n            }\n            xhr.onload = () => {\n                if (xhr.status >= 200 && xhr.status < 300) {\n                    // Need to test if xhr.response is decoded or not.\n                    let respData = {};\n                    try {\n                        respData = typeof xhr.response === 'string' ? JSON.parse(xhr.response) : {};\n                        respData = respData && respData.data ? respData.data : respData;\n                    }\n                    catch (ignoreErr) {\n                        respData = {};\n                    }\n                    // Get the url of the file.\n                    let respUrl = respData.hasOwnProperty('url')\n                        ? respData.url\n                        : `${xhr.responseURL}/${name}`;\n                    // If they provide relative url, then prepend the url.\n                    if (respUrl && respUrl[0] === '/') {\n                        respUrl = `${url}${respUrl}`;\n                    }\n                    resolve({ url: respUrl, data: respData });\n                }\n                else {\n                    reject(xhr.response || 'Unable to upload file');\n                }\n            };\n            xhr.onerror = () => {\n                xhr.message =\n                    xhr.status >= 400\n                        ? `${xhr.status} ${xhr.statusText || ''}`.trim()\n                        : xhr.statusText && xhr.statusText.trim()\n                            ? xhr.statusText.trim()\n                            : 'Unable to upload file';\n                return reject(xhr);\n            };\n            xhr.onabort = () => {\n                xhr.type = 'abort';\n                return reject(xhr);\n            };\n            let requestUrl = url + (url.indexOf('?') > -1 ? '&' : '?');\n            for (const key in query) {\n                requestUrl += `${key}=${query[key]}&`;\n            }\n            if (requestUrl[requestUrl.length - 1] === '&') {\n                requestUrl = requestUrl.substr(0, requestUrl.length - 1);\n            }\n            xhr.open('POST', requestUrl);\n            if (json) {\n                xhr.setRequestHeader('Content-Type', 'application/json');\n            }\n            const token = formio.getToken();\n            if (token) {\n                xhr.setRequestHeader('x-jwt-token', token);\n            }\n            //Overrides previous request props\n            if (options) {\n                setOptions(options, xhr);\n            }\n            xhr.send(json ? data : fd);\n        });\n    };\n    return {\n        title: 'Url',\n        name: 'url',\n        uploadFile(file, name, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, abortCallback) {\n            const uploadRequest = function (form) {\n                return xhrRequest(url, name, {\n                    baseUrl: encodeURIComponent(formio.projectUrl),\n                    project: form ? form.project : '',\n                    form: form ? form._id : '',\n                }, {\n                    [fileKey]: file,\n                    name,\n                    dir,\n                }, options, progressCallback, abortCallback).then((response) => {\n                    // Store the project and form url along with the metadata.\n                    response.data = response.data || {};\n                    response.data.baseUrl = formio.projectUrl;\n                    response.data.project = form ? form.project : '';\n                    response.data.form = form ? form._id : '';\n                    return {\n                        storage: 'url',\n                        name,\n                        url: response.url,\n                        size: file.size,\n                        type: file.type,\n                        data: response.data,\n                    };\n                });\n            };\n            if (file.private && formio.formId) {\n                return formio.loadForm().then((form) => uploadRequest(form));\n            }\n            else {\n                return uploadRequest();\n            }\n        },\n        deleteFile(fileInfo, options) {\n            return new Promise((resolve, reject) => {\n                const xhr = new XMLHttpRequest();\n                xhr.open('DELETE', fileInfo.url, true);\n                xhr.onload = () => {\n                    if (xhr.status >= 200 && xhr.status < 300) {\n                        resolve('File deleted');\n                    }\n                    else {\n                        reject(xhr.response || 'Unable to delete file');\n                    }\n                };\n                if (options) {\n                    setOptions(options, xhr);\n                }\n                xhr.send(null);\n            });\n        },\n        downloadFile(file) {\n            if (file.private) {\n                if (formio.submissionId && file.data) {\n                    file.data.submission = formio.submissionId;\n                }\n                return xhrRequest(file.url, file.name, {}, JSON.stringify(file)).then((response) => response.data);\n            }\n            // Return the original as there is nothing to do.\n            return Promise.resolve(file);\n        },\n    };\n}\nurl.title = 'Url';\nexports[\"default\"] = url;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/url.js?\n}");
 
 /***/ }),
 
@@ -8674,7 +8674,7 @@ eval("{\n/**\n * @typedef {any[]} Args\n */\nvar __awaiter = (this && this.__awa
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("{\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 }));\nexports.setXhrHeaders = void 0;\nconst trim_1 = __importDefault(__webpack_require__(/*! lodash/trim */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/trim.js\"));\nconst setXhrHeaders = (formio, xhr) => {\n    const { headers } = formio.options;\n    if (headers) {\n        const ValidHeaders = {\n            'Content-Disposition': true,\n            Authorization: true,\n        };\n        for (const header in headers) {\n            if (ValidHeaders[header]) {\n                xhr.setRequestHeader(header, headers[header]);\n            }\n        }\n    }\n};\nexports.setXhrHeaders = setXhrHeaders;\nconst XHR = {\n    trim(text) {\n        return (0, trim_1.default)(text, '/');\n    },\n    path(items) {\n        return items\n            .filter((item) => !!item)\n            .map(XHR.trim)\n            .join('/');\n    },\n    upload(formio, type, xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Use makeRequest so portal plugins (e.g. x-remote-token) are applied.\n            let serverResponse;\n            try {\n                serverResponse = yield formio.makeRequest('file', `${formio.formUrl}/storage/${type}`, 'POST', {\n                    name: XHR.path([dir, fileName]),\n                    size: file.size,\n                    type: file.type,\n                    groupPermissions,\n                    groupId,\n                    multipart: multipartOptions,\n                });\n            }\n            catch (err) {\n                if (err === null || err === void 0 ? void 0 : err.networkError) {\n                    throw err;\n                }\n                if (err instanceof Error) {\n                    throw err;\n                }\n                const message = typeof err === 'string' ? err : (err === null || err === void 0 ? void 0 : err.message) || (err === null || err === void 0 ? void 0 : err.error);\n                const error = new Error(message || 'Unable to sign file.');\n                if ((err === null || err === void 0 ? void 0 : err.status) === 504) {\n                    error.networkError = true;\n                }\n                throw error;\n            }\n            return yield XHR.makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback);\n        });\n    },\n    makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback) {\n        return new Promise((resolve, reject) => {\n            // Send the file with data.\n            const xhr = new XMLHttpRequest();\n            xhr.openAndSetHeaders = (...params) => {\n                xhr.open(...params);\n                (0, exports.setXhrHeaders)(formio, xhr);\n            };\n            Promise.resolve(xhrCallback(xhr, serverResponse, abortCallback))\n                .then((payload) => {\n                // if payload is nullish we can assume the provider took care of the entire upload process\n                if (!payload) {\n                    return resolve(serverResponse);\n                }\n                // Fire on network error.\n                xhr.onerror = (err) => {\n                    err.networkError = true;\n                    reject(err);\n                };\n                // Fire on network abort.\n                xhr.onabort = (err) => {\n                    err.networkError = true;\n                    reject(err);\n                };\n                // Set the onabort error callback.\n                xhr.onabort = reject;\n                if (typeof progressCallback === 'function') {\n                    xhr.upload.onprogress = progressCallback;\n                }\n                if (typeof abortCallback === 'function') {\n                    abortCallback(() => xhr.abort());\n                }\n                // Fired when the response has made it back from the server.\n                xhr.onload = () => {\n                    if (xhr.status >= 200 && xhr.status < 300) {\n                        resolve(serverResponse);\n                    }\n                    else if (xhr.status === 504) {\n                        const error = new Error('Network request failed');\n                        error.networkError = true;\n                        reject(error);\n                    }\n                    else {\n                        reject(xhr.response || 'Unable to upload file');\n                    }\n                };\n                // Get the request and send it to the server.\n                xhr.send(payload);\n            })\n                .catch(reject);\n        });\n    },\n};\nexports[\"default\"] = XHR;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/xhr.js?\n}");
+eval("{\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 }));\nexports.setXhrHeaders = void 0;\nconst trim_1 = __importDefault(__webpack_require__(/*! lodash/trim */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/trim.js\"));\nconst setXhrHeaders = (formio, xhr) => {\n    const { headers } = formio.options;\n    if (headers) {\n        const ValidHeaders = {\n            'Content-Disposition': true,\n            Authorization: true,\n        };\n        for (const header in headers) {\n            if (ValidHeaders[header]) {\n                xhr.setRequestHeader(header, headers[header]);\n            }\n        }\n    }\n};\nexports.setXhrHeaders = setXhrHeaders;\nconst XHR = {\n    trim(text) {\n        return (0, trim_1.default)(text, '/');\n    },\n    path(items) {\n        return items\n            .filter((item) => !!item)\n            .map(XHR.trim)\n            .join('/');\n    },\n    upload(formio, type, xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // Use makeRequest so portal plugins (e.g. x-remote-token) are applied. GOTCHA(G-FJS05)\n            let serverResponse;\n            try {\n                serverResponse = yield formio.makeRequest('file', `${formio.formUrl}/storage/${type}`, 'POST', {\n                    name: XHR.path([dir, fileName]),\n                    size: file.size,\n                    type: file.type,\n                    groupPermissions,\n                    groupId,\n                    multipart: multipartOptions,\n                });\n            }\n            catch (err) {\n                if (err === null || err === void 0 ? void 0 : err.networkError) {\n                    throw err;\n                }\n                if (err instanceof Error) {\n                    throw err;\n                }\n                const message = typeof err === 'string' ? err : (err === null || err === void 0 ? void 0 : err.message) || (err === null || err === void 0 ? void 0 : err.error);\n                const error = new Error(message || 'Unable to sign file.');\n                if ((err === null || err === void 0 ? void 0 : err.status) === 504) {\n                    error.networkError = true;\n                }\n                throw error;\n            }\n            return yield XHR.makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback);\n        });\n    },\n    makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback) {\n        return new Promise((resolve, reject) => {\n            // Send the file with data.\n            const xhr = new XMLHttpRequest();\n            xhr.openAndSetHeaders = (...params) => {\n                xhr.open(...params);\n                (0, exports.setXhrHeaders)(formio, xhr);\n            };\n            Promise.resolve(xhrCallback(xhr, serverResponse, abortCallback))\n                .then((payload) => {\n                // if payload is nullish we can assume the provider took care of the entire upload process\n                if (!payload) {\n                    return resolve(serverResponse);\n                }\n                // Fire on network error.\n                xhr.onerror = (err) => {\n                    err.networkError = true;\n                    reject(err);\n                };\n                // Fire on network abort.\n                xhr.onabort = (err) => {\n                    err.networkError = true;\n                    reject(err);\n                };\n                // Set the onabort error callback.\n                xhr.onabort = reject;\n                if (typeof progressCallback === 'function') {\n                    xhr.upload.onprogress = progressCallback;\n                }\n                if (typeof abortCallback === 'function') {\n                    abortCallback(() => xhr.abort());\n                }\n                // Fired when the response has made it back from the server.\n                xhr.onload = () => {\n                    if (xhr.status >= 200 && xhr.status < 300) {\n                        resolve(serverResponse);\n                    }\n                    else if (xhr.status === 504) {\n                        const error = new Error('Network request failed');\n                        error.networkError = true;\n                        reject(error);\n                    }\n                    else {\n                        reject(xhr.response || 'Unable to upload file');\n                    }\n                };\n                // Get the request and send it to the server.\n                xhr.send(payload);\n            })\n                .catch(reject);\n        });\n    },\n};\nexports[\"default\"] = XHR;\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/providers/storage/xhr.js?\n}");
 
 /***/ }),