@formio/js 5.4.2 → 5.4.3

package/dist/formio.full.js

@@ -5050,7 +5050,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}");
 
 /***/ }),
 
@@ -5060,7 +5060,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}");
 
 /***/ }),
 
@@ -5070,7 +5070,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}");
 
 /***/ }),
 
@@ -5091,7 +5091,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}");
 
 /***/ }),
 
@@ -5164,7 +5164,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}");
 
 /***/ }),
 
@@ -5174,7 +5174,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}");
 
 /***/ }),
 
@@ -5195,7 +5195,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}");
 
 /***/ }),
 
@@ -5226,7 +5226,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}");
 
 /***/ }),
 
@@ -5353,7 +5353,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}");
 
 /***/ }),
 
@@ -5384,7 +5384,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}");
 
 /***/ }),
 
@@ -8287,7 +8287,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}");
 
 /***/ }),
 
@@ -8298,7 +8298,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.3';\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}");
 
 /***/ }),
 
@@ -8342,7 +8342,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.3';\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}");
 
 /***/ }),
 
@@ -8397,7 +8397,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}");
 
 /***/ }),
 
@@ -9068,7 +9068,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}");
 
 /***/ }),
 
@@ -9475,7 +9475,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}");
 
 /***/ }),
 
@@ -9508,7 +9508,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexp
 /***/ (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 Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nexports[\"default\"] = [\n    {\n        type: 'select',\n        input: true,\n        key: 'storage',\n        label: 'Storage',\n        placeholder: 'Select your file storage provider',\n        weight: 0,\n        tooltip: 'Which storage to save the files in.',\n        valueProperty: 'value',\n        dataSrc: 'custom',\n        data: {\n            custom() {\n                return lodash_1.default.map(Formio_1.Formio.Providers.getProviders('storage'), (storage, key) => ({\n                    label: storage.title,\n                    value: key,\n                }));\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'useMultipartUpload',\n        label: 'Use the S3 Multipart Upload API',\n        tooltip: \"The <a href='https://docs.aws.amazon.com/AmazonS3/latest/userguide/mpuoverview.html'>S3 Multipart Upload API</a> is designed to improve the upload experience for larger objects (> 5GB).\",\n        conditional: {\n            json: {\n                '===': [{ var: 'data.storage' }, 's3'],\n            },\n        },\n    },\n    {\n        label: 'Multipart Upload',\n        tableView: false,\n        key: 'multipart',\n        type: 'container',\n        input: true,\n        components: [\n            {\n                label: 'Part Size (MB)',\n                applyMaskOn: 'change',\n                mask: false,\n                tableView: false,\n                delimiter: false,\n                requireDecimal: false,\n                inputFormat: 'plain',\n                truncateMultipleSpaces: false,\n                validate: {\n                    min: 5,\n                    max: 5000,\n                },\n                key: 'partSize',\n                type: 'number',\n                input: true,\n                defaultValue: 500,\n            },\n        ],\n        conditional: {\n            json: {\n                '===': [{ var: 'data.useMultipartUpload' }, true],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'url',\n        label: 'Url',\n        weight: 10,\n        placeholder: 'Enter the url to post the files to.',\n        tooltip: \"See <a href='https://github.com/danialfarid/ng-file-upload#server-side' target='_blank'>https://github.com/danialfarid/ng-file-upload#server-side</a> for how to set up the server.\",\n        conditional: {\n            json: {\n                '===': [{ var: 'data.storage' }, 'url'],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'options.indexeddb',\n        label: 'Database',\n        weight: 10,\n        placeholder: 'Enter the indexeddb database name',\n        conditional: {\n            json: {\n                in: [\n                    {\n                        var: 'data.storage',\n                    },\n                    ['indexeddb'],\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        label: 'Table',\n        key: 'options.indexeddbTable',\n        weight: 10,\n        placeholder: 'Enter the name for indexeddb table',\n        conditional: {\n            json: {\n                in: [\n                    {\n                        var: 'data.storage',\n                    },\n                    ['indexeddb'],\n                ],\n            },\n        },\n    },\n    {\n        type: 'textarea',\n        key: 'options',\n        label: 'Custom request options',\n        tooltip: 'Pass your custom xhr options(optional)',\n        rows: 5,\n        editor: 'ace',\n        as: 'json',\n        input: true,\n        weight: 15,\n        placeholder: `{\n      \"withCredentials\": true,\n      \"headers\": {\n        \"Authorization\": \"Basic <key>\"\n      }\n    }`,\n        conditional: {\n            json: {\n                '===': [\n                    {\n                        var: 'data.storage',\n                    },\n                    'url',\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'fileKey',\n        label: 'File form-data key',\n        weight: 17,\n        placeholder: 'Enter the key name of a file for form data.',\n        tooltip: 'Key name that you would like to modify for the file while calling API request.',\n        conditional: {\n            json: {\n                '===': [\n                    {\n                        var: 'data.storage',\n                    },\n                    'url',\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'dir',\n        label: 'Directory',\n        placeholder: '(optional) Enter a directory for the files',\n        tooltip: 'This will place all the files uploaded in this field in the directory',\n        weight: 20,\n        logic: [\n            {\n                name: 'Change To File ID',\n                trigger: {\n                    type: 'simple',\n                    simple: {\n                        show: true,\n                        conjunction: 'all',\n                        conditions: [\n                            {\n                                component: 'storage',\n                                operator: 'isEqual',\n                                value: 'googledrive',\n                            },\n                        ],\n                    },\n                },\n                actions: [\n                    {\n                        name: 'Change placeholder',\n                        type: 'property',\n                        property: {\n                            label: 'Placeholder',\n                            value: 'placeholder',\n                            type: 'string',\n                        },\n                        text: '(optional) Enter an ID of the folder for the files',\n                    },\n                    {\n                        name: 'Change label',\n                        type: 'property',\n                        property: {\n                            label: 'Label',\n                            value: 'label',\n                            type: 'string',\n                        },\n                        text: 'Folder ID',\n                    },\n                ],\n            },\n            {\n                name: 'Change to Directory',\n                trigger: {\n                    type: 'simple',\n                    simple: {\n                        show: true,\n                        conjunction: 'all',\n                        conditions: [\n                            {\n                                component: 'storage',\n                                operator: 'isNotEqual',\n                                value: 'googledrive',\n                            },\n                        ],\n                    },\n                },\n                actions: [\n                    {\n                        name: 'Change placeholder',\n                        type: 'property',\n                        property: {\n                            label: 'Placeholder',\n                            value: 'placeholder',\n                            type: 'string',\n                        },\n                        text: '(optional) Enter a directory for the files',\n                    },\n                    {\n                        name: 'Change label',\n                        type: 'property',\n                        property: {\n                            label: 'Label',\n                            value: 'label',\n                            type: 'string',\n                        },\n                        text: 'Directory',\n                    },\n                ],\n            },\n        ],\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'fileNameTemplate',\n        label: 'File Name Template',\n        placeholder: '(optional) { {name} }-{ {guid} }',\n        tooltip: 'Specify template for name of uploaded file(s). Regular template variables are available (`data`, `component`, `user`, `value`, `moment` etc.), also `fileName`, `guid` variables are available. `guid` part must be present, if not found in template, will be added at the end.',\n        weight: 25,\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'image',\n        label: 'Display as image(s)',\n        tooltip: 'Instead of a list of linked files, images will be rendered in the view.',\n        weight: 30,\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'uploadOnly',\n        label: 'Upload Only',\n        tooltip: 'When this is checked, will only allow you to upload file(s) and consequently the download, in this component, will be unavailable.',\n        weight: 33,\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'privateDownload',\n        label: 'Private Download',\n        tooltip: 'When this is checked, the file download will send a POST request to the download URL with the x-jwt-token header. This will allow your endpoint to create a Private download system.',\n        weight: 31,\n        conditional: {\n            json: {\n                '===': [{ var: 'data.storage' }, 'url'],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'imageSize',\n        label: 'Image Size',\n        placeholder: '100',\n        tooltip: 'The image size for previewing images.',\n        weight: 40,\n        conditional: {\n            json: {\n                '==': [{ var: 'data.image' }, true],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'webcam',\n        label: 'Enable web camera',\n        tooltip: 'This will allow using an attached camera to directly take a picture instead of uploading an existing file.',\n        weight: 32,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'webcamSize',\n        label: 'Webcam Width',\n        placeholder: '320',\n        tooltip: 'The webcam size for taking pictures.',\n        weight: 38,\n        conditional: {\n            json: {\n                '==': [{ var: 'data.webcam' }, true],\n            },\n        },\n    },\n    {\n        type: 'radio',\n        input: true,\n        key: 'capture',\n        label: 'Enable device capture',\n        tooltip: 'This will allow a mobile device to open the camera or microphone directly in capture mode.',\n        optionsLabelPosition: 'right',\n        inline: true,\n        defaultValue: false,\n        values: [\n            {\n                label: 'Disabled',\n                value: 'false',\n            },\n            {\n                label: 'Environment (rear camera)',\n                value: 'environment',\n            },\n            {\n                label: 'User (front camera)',\n                value: 'user',\n            },\n        ],\n    },\n    {\n        type: 'datagrid',\n        input: true,\n        label: 'File Types',\n        key: 'fileTypes',\n        tooltip: 'Specify file types to classify the uploads. This is useful if you allow multiple types of uploads but want to allow the user to specify which type of file each is.',\n        weight: 11,\n        components: [\n            {\n                label: 'Label',\n                key: 'label',\n                input: true,\n                type: 'textfield',\n            },\n            {\n                label: 'Value',\n                key: 'value',\n                input: true,\n                type: 'textfield',\n            },\n        ],\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'filePattern',\n        label: 'File Pattern',\n        placeholder: '.jpg,video/*,application/pdf',\n        tooltip: \"See <a href='https://github.com/danialfarid/ng-file-upload#full-reference' target='_blank'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file patterns.\",\n        weight: 50,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'fileMinSize',\n        label: 'File Minimum Size',\n        placeholder: '1MB',\n        tooltip: \"See <a href='https://github.com/danialfarid/ng-file-upload#full-reference' target='_blank'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file sizes.\",\n        weight: 60,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'fileMaxSize',\n        label: 'File Maximum Size',\n        placeholder: '10MB',\n        tooltip: \"See <a href='https://github.com/danialfarid/ng-file-upload#full-reference' target='_blank'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file sizes.\",\n        weight: 70,\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/file/editForm/File.edit.file.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 Formio_1 = __webpack_require__(/*! ../../../Formio */ \"./lib/cjs/Formio.js\");\nconst lodash_1 = __importDefault(__webpack_require__(/*! lodash */ \"../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/lodash.js\"));\nexports[\"default\"] = [\n    {\n        type: 'select',\n        input: true,\n        key: 'storage',\n        label: 'Storage',\n        placeholder: 'Select your file storage provider',\n        weight: 0,\n        tooltip: 'Which storage to save the files in.',\n        valueProperty: 'value',\n        dataSrc: 'custom',\n        data: {\n            custom() {\n                return lodash_1.default.map(Formio_1.Formio.Providers.getProviders('storage'), (storage, key) => ({\n                    label: storage.title,\n                    value: key,\n                }));\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'useMultipartUpload',\n        label: 'Use the S3 Multipart Upload API',\n        tooltip: \"The <a href='https://docs.aws.amazon.com/AmazonS3/latest/userguide/mpuoverview.html'>S3 Multipart Upload API</a> is designed to improve the upload experience for larger objects (> 5GB).\",\n        conditional: {\n            json: {\n                '===': [{ var: 'data.storage' }, 's3'],\n            },\n        },\n    },\n    {\n        label: 'Multipart Upload',\n        tableView: false,\n        key: 'multipart',\n        type: 'container',\n        input: true,\n        components: [\n            {\n                label: 'Part Size (MB)',\n                applyMaskOn: 'change',\n                mask: false,\n                tableView: false,\n                delimiter: false,\n                requireDecimal: false,\n                inputFormat: 'plain',\n                truncateMultipleSpaces: false,\n                validate: {\n                    min: 5,\n                    max: 5000,\n                },\n                key: 'partSize',\n                type: 'number',\n                input: true,\n                defaultValue: 500,\n            },\n        ],\n        conditional: {\n            json: {\n                '===': [{ var: 'data.useMultipartUpload' }, true],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'url',\n        label: 'Url',\n        weight: 10,\n        placeholder: 'Enter the url to post the files to.',\n        tooltip: \"See <a href='https://github.com/danialfarid/ng-file-upload#server-side' target='_blank'>https://github.com/danialfarid/ng-file-upload#server-side</a> for how to set up the server.\",\n        conditional: {\n            json: {\n                '===': [{ var: 'data.storage' }, 'url'],\n            },\n        },\n    },\n    {\n        type: 'container',\n        key: 'options',\n        label: 'IndexedDB options',\n        weight: 10,\n        input: true,\n        conditional: {\n            json: {\n                in: [\n                    {\n                        var: 'data.storage',\n                    },\n                    ['indexeddb'],\n                ],\n            },\n        },\n        components: [\n            {\n                type: 'textfield',\n                input: true,\n                key: 'indexeddb',\n                label: 'Database',\n                placeholder: 'Enter the indexeddb database name',\n            },\n            {\n                type: 'textfield',\n                input: true,\n                key: 'indexeddbTable',\n                label: 'Table',\n                placeholder: 'Enter the name for indexeddb table',\n            },\n        ],\n    },\n    {\n        type: 'textarea',\n        key: 'urlRequestOptions',\n        label: 'Custom request options',\n        tooltip: 'Pass your custom xhr options(optional)',\n        rows: 5,\n        editor: 'ace',\n        as: 'json',\n        input: true,\n        weight: 15,\n        placeholder: `{\n      \"withCredentials\": true,\n      \"headers\": {\n        \"Authorization\": \"Basic <key>\"\n      }\n    }`,\n        conditional: {\n            json: {\n                '===': [\n                    {\n                        var: 'data.storage',\n                    },\n                    'url',\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'fileKey',\n        label: 'File form-data key',\n        weight: 17,\n        placeholder: 'Enter the key name of a file for form data.',\n        tooltip: 'Key name that you would like to modify for the file while calling API request.',\n        conditional: {\n            json: {\n                '===': [\n                    {\n                        var: 'data.storage',\n                    },\n                    'url',\n                ],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'dir',\n        label: 'Directory',\n        placeholder: '(optional) Enter a directory for the files',\n        tooltip: 'This will place all the files uploaded in this field in the directory',\n        weight: 20,\n        logic: [\n            {\n                name: 'Change To File ID',\n                trigger: {\n                    type: 'simple',\n                    simple: {\n                        show: true,\n                        conjunction: 'all',\n                        conditions: [\n                            {\n                                component: 'storage',\n                                operator: 'isEqual',\n                                value: 'googledrive',\n                            },\n                        ],\n                    },\n                },\n                actions: [\n                    {\n                        name: 'Change placeholder',\n                        type: 'property',\n                        property: {\n                            label: 'Placeholder',\n                            value: 'placeholder',\n                            type: 'string',\n                        },\n                        text: '(optional) Enter an ID of the folder for the files',\n                    },\n                    {\n                        name: 'Change label',\n                        type: 'property',\n                        property: {\n                            label: 'Label',\n                            value: 'label',\n                            type: 'string',\n                        },\n                        text: 'Folder ID',\n                    },\n                ],\n            },\n            {\n                name: 'Change to Directory',\n                trigger: {\n                    type: 'simple',\n                    simple: {\n                        show: true,\n                        conjunction: 'all',\n                        conditions: [\n                            {\n                                component: 'storage',\n                                operator: 'isNotEqual',\n                                value: 'googledrive',\n                            },\n                        ],\n                    },\n                },\n                actions: [\n                    {\n                        name: 'Change placeholder',\n                        type: 'property',\n                        property: {\n                            label: 'Placeholder',\n                            value: 'placeholder',\n                            type: 'string',\n                        },\n                        text: '(optional) Enter a directory for the files',\n                    },\n                    {\n                        name: 'Change label',\n                        type: 'property',\n                        property: {\n                            label: 'Label',\n                            value: 'label',\n                            type: 'string',\n                        },\n                        text: 'Directory',\n                    },\n                ],\n            },\n        ],\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'fileNameTemplate',\n        label: 'File Name Template',\n        placeholder: '(optional) { {name} }-{ {guid} }',\n        tooltip: 'Specify template for name of uploaded file(s). Regular template variables are available (`data`, `component`, `user`, `value`, `moment` etc.), also `fileName`, `guid` variables are available. `guid` part must be present, if not found in template, will be added at the end.',\n        weight: 25,\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'image',\n        label: 'Display as image(s)',\n        tooltip: 'Instead of a list of linked files, images will be rendered in the view.',\n        weight: 30,\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'uploadOnly',\n        label: 'Upload Only',\n        tooltip: 'When this is checked, will only allow you to upload file(s) and consequently the download, in this component, will be unavailable.',\n        weight: 33,\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'privateDownload',\n        label: 'Private Download',\n        tooltip: 'When this is checked, the file download will send a POST request to the download URL with the x-jwt-token header. This will allow your endpoint to create a Private download system.',\n        weight: 31,\n        conditional: {\n            json: {\n                '===': [{ var: 'data.storage' }, 'url'],\n            },\n        },\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'imageSize',\n        label: 'Image Size',\n        placeholder: '100',\n        tooltip: 'The image size for previewing images.',\n        weight: 40,\n        conditional: {\n            json: {\n                '==': [{ var: 'data.image' }, true],\n            },\n        },\n    },\n    {\n        type: 'checkbox',\n        input: true,\n        key: 'webcam',\n        label: 'Enable web camera',\n        tooltip: 'This will allow using an attached camera to directly take a picture instead of uploading an existing file.',\n        weight: 32,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'webcamSize',\n        label: 'Webcam Width',\n        placeholder: '320',\n        tooltip: 'The webcam size for taking pictures.',\n        weight: 38,\n        conditional: {\n            json: {\n                '==': [{ var: 'data.webcam' }, true],\n            },\n        },\n    },\n    {\n        type: 'radio',\n        input: true,\n        key: 'capture',\n        label: 'Enable device capture',\n        tooltip: 'This will allow a mobile device to open the camera or microphone directly in capture mode.',\n        optionsLabelPosition: 'right',\n        inline: true,\n        defaultValue: false,\n        values: [\n            {\n                label: 'Disabled',\n                value: 'false',\n            },\n            {\n                label: 'Environment (rear camera)',\n                value: 'environment',\n            },\n            {\n                label: 'User (front camera)',\n                value: 'user',\n            },\n        ],\n    },\n    {\n        type: 'datagrid',\n        input: true,\n        label: 'File Types',\n        key: 'fileTypes',\n        tooltip: 'Specify file types to classify the uploads. This is useful if you allow multiple types of uploads but want to allow the user to specify which type of file each is.',\n        weight: 11,\n        components: [\n            {\n                label: 'Label',\n                key: 'label',\n                input: true,\n                type: 'textfield',\n            },\n            {\n                label: 'Value',\n                key: 'value',\n                input: true,\n                type: 'textfield',\n            },\n        ],\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'filePattern',\n        label: 'File Pattern',\n        placeholder: '.jpg,video/*,application/pdf',\n        tooltip: \"See <a href='https://github.com/danialfarid/ng-file-upload#full-reference' target='_blank'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file patterns.\",\n        weight: 50,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'fileMinSize',\n        label: 'File Minimum Size',\n        placeholder: '1MB',\n        tooltip: \"See <a href='https://github.com/danialfarid/ng-file-upload#full-reference' target='_blank'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file sizes.\",\n        weight: 60,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'fileMaxSize',\n        label: 'File Maximum Size',\n        placeholder: '10MB',\n        tooltip: \"See <a href='https://github.com/danialfarid/ng-file-upload#full-reference' target='_blank'>https://github.com/danialfarid/ng-file-upload#full-reference</a> for how to specify file sizes.\",\n        weight: 70,\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/file/editForm/File.edit.file.js?\n}");
 
 /***/ }),
 
@@ -9640,7 +9640,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}");
 
 /***/ }),
 
@@ -9695,7 +9695,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}");
 
 /***/ }),
 
@@ -9882,7 +9882,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}");
 
 /***/ }),
 
@@ -10058,7 +10058,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}");
 
 /***/ }),
 
@@ -10080,7 +10080,7 @@ eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexp
 /***/ (function(__unused_webpack_module, exports) {
 
 "use strict";
-eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        type: 'textfield',\n        input: true,\n        key: 'footer',\n        label: 'Footer Label',\n        tooltip: 'The footer text that appears below the signature area.',\n        placeholder: 'Footer Label',\n        weight: 10,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'width',\n        label: 'Width',\n        tooltip: 'The width of the signature area.',\n        placeholder: 'Width',\n        conditional: {\n            json: {\n                '!': [{ var: 'data.keepOverlayRatio' }],\n            },\n        },\n        weight: 50,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'height',\n        label: 'Height',\n        tooltip: 'The height of the signature area.',\n        placeholder: 'Height',\n        conditional: {\n            json: {\n                '!': [{ var: 'data.keepOverlayRatio' }],\n            },\n        },\n        weight: 51,\n    },\n    {\n        weight: 52,\n        type: 'checkbox',\n        label: 'Keep Overlay Aspect Ratio',\n        tooltip: 'If checked, the field will have the same aspect ratio as its preview.',\n        key: 'keepOverlayRatio',\n        input: true,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'backgroundColor',\n        label: 'Background Color',\n        tooltip: 'The background color of the signature area.',\n        placeholder: 'Background Color',\n        weight: 52,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'penColor',\n        label: 'Pen Color',\n        tooltip: 'The ink color for the signature area.',\n        placeholder: 'Pen Color',\n        weight: 53,\n    },\n    {\n        key: 'placeholder',\n        ignore: true,\n    },\n    {\n        key: 'autofocus',\n        ignore: true,\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/signature/editForm/Signature.edit.display.js?\n}");
+eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = [\n    {\n        type: 'textfield',\n        input: true,\n        key: 'footer',\n        label: 'Footer Label',\n        tooltip: 'The footer text that appears below the signature area.',\n        placeholder: 'Footer Label',\n        weight: 10,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'width',\n        label: 'Width',\n        tooltip: 'The width of the signature area.',\n        placeholder: 'Width',\n        customConditional: (context) => {\n            var _a, _b, _c;\n            const isPdf = ((_b = (_a = context.options) === null || _a === void 0 ? void 0 : _a.editForm) === null || _b === void 0 ? void 0 : _b.display) === 'pdf';\n            return isPdf ? !((_c = context.data) === null || _c === void 0 ? void 0 : _c.keepOverlayRatio) : true;\n        },\n        weight: 50,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'height',\n        label: 'Height',\n        tooltip: 'The height of the signature area.',\n        placeholder: 'Height',\n        customConditional: (context) => {\n            var _a, _b, _c;\n            const isPdf = ((_b = (_a = context.options) === null || _a === void 0 ? void 0 : _a.editForm) === null || _b === void 0 ? void 0 : _b.display) === 'pdf';\n            return isPdf ? !((_c = context.data) === null || _c === void 0 ? void 0 : _c.keepOverlayRatio) : true;\n        },\n        weight: 51,\n    },\n    {\n        weight: 52,\n        type: 'checkbox',\n        label: 'Keep Overlay Aspect Ratio',\n        tooltip: 'If checked, the field will have the same aspect ratio as its preview.',\n        key: 'keepOverlayRatio',\n        input: true,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'backgroundColor',\n        label: 'Background Color',\n        tooltip: 'The background color of the signature area.',\n        placeholder: 'Background Color',\n        weight: 52,\n    },\n    {\n        type: 'textfield',\n        input: true,\n        key: 'penColor',\n        label: 'Pen Color',\n        tooltip: 'The ink color for the signature area.',\n        placeholder: 'Pen Color',\n        weight: 53,\n    },\n    {\n        key: 'placeholder',\n        ignore: true,\n    },\n    {\n        key: 'autofocus',\n        ignore: true,\n    },\n];\n\n\n//# sourceURL=webpack://Formio/./lib/cjs/components/signature/editForm/Signature.edit.display.js?\n}");
 
 /***/ }),
 
@@ -10751,7 +10751,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}");
 
 /***/ }),
 
@@ -10784,7 +10784,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}");
 
 /***/ }),
 
@@ -10806,7 +10806,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}");
 
 /***/ }),