@formio/js 5.0.0 → 5.1.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/dist/formio.embed.js +1 -1
  2. package/dist/formio.embed.min.js +1 -1
  3. package/dist/formio.embed.min.js.LICENSE.txt +1 -1
  4. package/dist/formio.form.js +127 -116
  5. package/dist/formio.form.min.js +1 -1
  6. package/dist/formio.form.min.js.LICENSE.txt +3 -3
  7. package/dist/formio.full.js +128 -117
  8. package/dist/formio.full.min.js +1 -1
  9. package/dist/formio.full.min.js.LICENSE.txt +3 -3
  10. package/dist/formio.js +3013 -283
  11. package/dist/formio.min.js +1 -1
  12. package/dist/formio.min.js.LICENSE.txt +14 -2
  13. package/dist/formio.utils.js +60 -49
  14. package/dist/formio.utils.min.js +1 -1
  15. package/dist/formio.utils.min.js.LICENSE.txt +3 -3
  16. package/lib/cjs/Webform.d.ts +8 -1
  17. package/lib/cjs/Webform.js +40 -32
  18. package/lib/cjs/WebformBuilder.js +4 -12
  19. package/lib/cjs/Wizard.js +4 -11
  20. package/lib/cjs/components/Components.d.ts +0 -7
  21. package/lib/cjs/components/Components.js +1 -33
  22. package/lib/cjs/components/_classes/component/Component.d.ts +52 -7
  23. package/lib/cjs/components/_classes/component/Component.js +120 -42
  24. package/lib/cjs/components/_classes/component/editForm/Component.edit.data.js +2 -2
  25. package/lib/cjs/components/_classes/componentModal/ComponentModal.d.ts +1 -0
  26. package/lib/cjs/components/_classes/componentModal/ComponentModal.js +1 -0
  27. package/lib/cjs/components/_classes/nested/NestedComponent.d.ts +4 -19
  28. package/lib/cjs/components/_classes/nested/NestedComponent.js +54 -60
  29. package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.d.ts +2 -1
  30. package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js +7 -44
  31. package/lib/cjs/components/datagrid/DataGrid.d.ts +0 -1
  32. package/lib/cjs/components/datagrid/DataGrid.js +1 -45
  33. package/lib/cjs/components/datamap/DataMap.js +2 -3
  34. package/lib/cjs/components/editgrid/EditGrid.js +8 -11
  35. package/lib/cjs/components/form/Form.d.ts +8 -3
  36. package/lib/cjs/components/form/Form.js +31 -29
  37. package/lib/cjs/components/html/HTML.js +15 -3
  38. package/lib/cjs/components/selectboxes/SelectBoxes.js +0 -1
  39. package/lib/cjs/components/signature/Signature.d.ts +0 -1
  40. package/lib/cjs/components/signature/Signature.js +1 -1
  41. package/lib/cjs/utils/conditionOperators/DateGreaterThan.js +2 -2
  42. package/lib/cjs/utils/conditionOperators/IsEmptyValue.d.ts +2 -2
  43. package/lib/cjs/utils/conditionOperators/IsEmptyValue.js +2 -2
  44. package/lib/cjs/utils/conditionOperators/IsEqualTo.d.ts +2 -2
  45. package/lib/cjs/utils/conditionOperators/IsEqualTo.js +2 -2
  46. package/lib/cjs/utils/formUtils.d.ts +25 -14
  47. package/lib/cjs/utils/formUtils.js +11 -16
  48. package/lib/cjs/utils/utils.d.ts +1 -3
  49. package/lib/cjs/utils/utils.js +19 -35
  50. package/lib/mjs/Webform.d.ts +8 -1
  51. package/lib/mjs/Webform.js +37 -31
  52. package/lib/mjs/WebformBuilder.js +4 -12
  53. package/lib/mjs/Wizard.js +2 -8
  54. package/lib/mjs/components/Components.d.ts +0 -7
  55. package/lib/mjs/components/Components.js +1 -32
  56. package/lib/mjs/components/_classes/component/Component.d.ts +52 -7
  57. package/lib/mjs/components/_classes/component/Component.js +130 -43
  58. package/lib/mjs/components/_classes/component/editForm/Component.edit.data.js +2 -2
  59. package/lib/mjs/components/_classes/componentModal/ComponentModal.d.ts +1 -0
  60. package/lib/mjs/components/_classes/componentModal/ComponentModal.js +1 -0
  61. package/lib/mjs/components/_classes/nested/NestedComponent.d.ts +4 -19
  62. package/lib/mjs/components/_classes/nested/NestedComponent.js +55 -61
  63. package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.d.ts +2 -1
  64. package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js +8 -43
  65. package/lib/mjs/components/datagrid/DataGrid.d.ts +0 -1
  66. package/lib/mjs/components/datagrid/DataGrid.js +1 -45
  67. package/lib/mjs/components/datamap/DataMap.js +2 -3
  68. package/lib/mjs/components/editgrid/EditGrid.js +11 -11
  69. package/lib/mjs/components/form/Form.d.ts +8 -3
  70. package/lib/mjs/components/form/Form.js +32 -29
  71. package/lib/mjs/components/html/HTML.js +15 -3
  72. package/lib/mjs/components/selectboxes/SelectBoxes.js +0 -1
  73. package/lib/mjs/components/signature/Signature.d.ts +0 -1
  74. package/lib/mjs/components/signature/Signature.js +1 -1
  75. package/lib/mjs/utils/conditionOperators/DateGreaterThan.js +2 -2
  76. package/lib/mjs/utils/conditionOperators/IsEmptyValue.d.ts +2 -2
  77. package/lib/mjs/utils/conditionOperators/IsEmptyValue.js +2 -2
  78. package/lib/mjs/utils/conditionOperators/IsEqualTo.d.ts +2 -2
  79. package/lib/mjs/utils/conditionOperators/IsEqualTo.js +2 -2
  80. package/lib/mjs/utils/formUtils.d.ts +25 -14
  81. package/lib/mjs/utils/formUtils.js +2 -12
  82. package/lib/mjs/utils/utils.d.ts +1 -3
  83. package/lib/mjs/utils/utils.js +18 -33
  84. package/package.json +4 -4
@@ -234,6 +234,7 @@ class Component extends Element_1.default {
234
234
  */
235
235
  /* eslint-disable max-statements */
236
236
  constructor(component, options, data) {
237
+ var _a, _b, _c, _d;
237
238
  super(Object.assign({
238
239
  renderMode: 'form',
239
240
  attachMode: 'full',
@@ -249,6 +250,10 @@ class Component extends Element_1.default {
249
250
  * @private
250
251
  */
251
252
  this._hasCondition = null;
253
+ /**
254
+ * The row index for this component.
255
+ */
256
+ this._rowIndex = undefined;
252
257
  /**
253
258
  * References to dom elements
254
259
  */
@@ -259,11 +264,6 @@ class Component extends Element_1.default {
259
264
  this.options.components[component.type]) {
260
265
  lodash_1.default.merge(component, this.options.components[component.type]);
261
266
  }
262
- /**
263
- * The data path to this specific component instance.
264
- * @type {string}
265
- */
266
- this.path = (component === null || component === void 0 ? void 0 : component.key) || '';
267
267
  /**
268
268
  * An array of all the children components errors.
269
269
  */
@@ -332,15 +332,27 @@ class Component extends Element_1.default {
332
332
  * @type {Component}
333
333
  */
334
334
  this.parent = this.options.parent;
335
+ /**
336
+ * The component paths for this component.
337
+ * @type {import('@formio/core').ComponentPaths} - The component paths.
338
+ */
339
+ this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));
335
340
  this.options.name = this.options.name || 'data';
336
341
  this._path = '';
337
342
  // Needs for Nextgen Rules Engine
338
343
  this.resetCaches();
344
+ /**
345
+ * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.
346
+ * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
347
+ * conditionallyHidden separately from "regular" visibility.
348
+ */
349
+ this._parentConditionallyHidden = this.options.hasOwnProperty('parentConditionallyHidden') ? this.options.parentConditionallyHidden : false;
350
+ this._conditionallyHidden = this.checkConditionallyHidden(null, data) || this._parentConditionallyHidden;
339
351
  /**
340
352
  * Determines if this component is visible, or not.
341
353
  */
342
354
  this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;
343
- this._visible = this._parentVisible && this.conditionallyVisible(null, data);
355
+ this._visible = this._parentVisible && (this.hasCondition() ? !this._conditionallyHidden : !this.component.hidden);
344
356
  this._parentDisabled = false;
345
357
  /**
346
358
  * The reference attribute name for this component
@@ -409,7 +421,7 @@ class Component extends Element_1.default {
409
421
  if (this.allowData && this.key) {
410
422
  this.options.name += `[${this.key}]`;
411
423
  // If component is visible or not set to clear on hide, set the default value.
412
- if (this.visible || !this.component.clearOnHide) {
424
+ if (!(this.conditionallyHidden && this.component.clearOnHide)) {
413
425
  if (!this.hasValue()) {
414
426
  if (this.shouldAddDefaultValue) {
415
427
  this.dataValue = this.defaultValue;
@@ -438,12 +450,7 @@ class Component extends Element_1.default {
438
450
  /* eslint-enable max-statements */
439
451
  get componentsMap() {
440
452
  var _a;
441
- if ((_a = this.localRoot) === null || _a === void 0 ? void 0 : _a.childComponentsMap) {
442
- return this.localRoot.childComponentsMap;
443
- }
444
- const localMap = {};
445
- localMap[this.path] = this;
446
- return localMap;
453
+ return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};
447
454
  }
448
455
  get data() {
449
456
  return this._data;
@@ -485,11 +492,29 @@ class Component extends Element_1.default {
485
492
  init() {
486
493
  var _a;
487
494
  this.disabled = this.shouldDisabled;
488
- this._visible = this.conditionallyVisible(null, null);
495
+ this._conditionallyHidden = this.checkConditionallyHidden();
496
+ this._visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
489
497
  if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {
490
498
  this.component.addons.forEach((addon) => this.createAddon(addon));
491
499
  }
492
500
  }
501
+ /**
502
+ * Get Row Index.
503
+ * @returns {number} - The row index.
504
+ */
505
+ get rowIndex() {
506
+ return this._rowIndex;
507
+ }
508
+ /**
509
+ * Set Row Index to row and update each component.
510
+ * @param {number} value - The row index.
511
+ * @returns {void}
512
+ */
513
+ set rowIndex(value) {
514
+ var _a, _b;
515
+ this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));
516
+ this._rowIndex = value;
517
+ }
493
518
  afterComponentAssign() {
494
519
  //implement in extended classes
495
520
  }
@@ -559,6 +584,12 @@ class Component extends Element_1.default {
559
584
  get key() {
560
585
  return lodash_1.default.get(this.component, 'key', '');
561
586
  }
587
+ get path() {
588
+ return this.paths.dataPath;
589
+ }
590
+ set path(path) {
591
+ throw new Error('Should not be setting the path of a component.');
592
+ }
562
593
  set parentVisible(value) {
563
594
  this._parentVisible = value;
564
595
  }
@@ -604,7 +635,6 @@ class Component extends Element_1.default {
604
635
  return;
605
636
  }
606
637
  this._visible = value;
607
- this.clearOnHide();
608
638
  this.redraw();
609
639
  }
610
640
  }
@@ -625,6 +655,21 @@ class Component extends Element_1.default {
625
655
  }
626
656
  return this._visible && this._parentVisible;
627
657
  }
658
+ get conditionallyHidden() {
659
+ return this._conditionallyHidden || this._parentConditionallyHidden;
660
+ }
661
+ /**
662
+ * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).
663
+ * @param {object} data - The data object to evaluate the condition against.
664
+ * @param {object} row - The row object to evaluate the condition against.
665
+ * @returns {boolean} - Whether the component is conditionally hidden.
666
+ */
667
+ checkConditionallyHidden(data = null, row = null) {
668
+ if (!this.hasCondition()) {
669
+ return false;
670
+ }
671
+ return !this.conditionallyVisible(data, row);
672
+ }
628
673
  get currentForm() {
629
674
  return this._currentForm;
630
675
  }
@@ -1046,6 +1091,14 @@ class Component extends Element_1.default {
1046
1091
  setOpenModalElement(template = null) {
1047
1092
  this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());
1048
1093
  }
1094
+ /**
1095
+ * Renders a modal preview template and returns the markup as a string
1096
+ * @param {object|null|undefined} ctx - The rendering context
1097
+ * @return {string} - The modal preview markup
1098
+ */
1099
+ renderModalPreview(ctx) {
1100
+ return this.renderTemplate('modalPreview', ctx || {});
1101
+ }
1049
1102
  /**
1050
1103
  * Returns the modal preview template.
1051
1104
  * @returns {string} - The modal preview template.
@@ -1057,7 +1110,7 @@ class Component extends Element_1.default {
1057
1110
  if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {
1058
1111
  modalLabel = { className: 'field-required' };
1059
1112
  }
1060
- return this.renderTemplate('modalPreview', {
1113
+ return this.renderModalPreview({
1061
1114
  previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
1062
1115
  messages: '',
1063
1116
  labelInfo: modalLabel,
@@ -1106,6 +1159,19 @@ class Component extends Element_1.default {
1106
1159
  }, topLevel);
1107
1160
  }
1108
1161
  }
1162
+ /**
1163
+ * Creates the tooltip instance using tippy.js and returns it
1164
+ * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
1165
+ * @param {object|null|undefined} settings - tippy.js options
1166
+ * @return {import('tippy.js').Tippy} - tippy.js instance
1167
+ */
1168
+ createTooltip(tooltipEl, settings = {}) {
1169
+ const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
1170
+ const tooltipDataTitle = tooltipEl.getAttribute('data-title');
1171
+ const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
1172
+ .replace(/(?:\r\n|\r|\n)/g, '<br />');
1173
+ return (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));
1174
+ }
1109
1175
  /**
1110
1176
  * Attaches all the tooltips provided the refs object.
1111
1177
  * @param {object} toolTipsRefs - The refs for the tooltips within your template.
@@ -1114,18 +1180,7 @@ class Component extends Element_1.default {
1114
1180
  attachTooltips(toolTipsRefs) {
1115
1181
  toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {
1116
1182
  if (tooltip) {
1117
- const tooltipAttribute = tooltip.getAttribute('data-tooltip');
1118
- const tooltipDataTitle = tooltip.getAttribute('data-title');
1119
- const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
1120
- .replace(/(?:\r\n|\r|\n)/g, '<br />');
1121
- this.tooltips[index] = (0, tippy_js_1.default)(tooltip, {
1122
- allowHTML: true,
1123
- trigger: 'mouseenter click focus',
1124
- placement: 'right',
1125
- zIndex: 10000,
1126
- interactive: true,
1127
- content: this.t(this.sanitize(tooltipText), { _userInput: true }),
1128
- });
1183
+ this.tooltips[index] = this.createTooltip(tooltip);
1129
1184
  }
1130
1185
  });
1131
1186
  }
@@ -1255,6 +1310,7 @@ class Component extends Element_1.default {
1255
1310
  * @returns {void}
1256
1311
  */
1257
1312
  checkRefresh(refreshData, changed, flags) {
1313
+ var _a, _b;
1258
1314
  const changePath = lodash_1.default.get(changed, 'instance.path', false);
1259
1315
  // Don't let components change themselves.
1260
1316
  if (changePath && this.path === changePath) {
@@ -1263,7 +1319,7 @@ class Component extends Element_1.default {
1263
1319
  if (refreshData === 'data') {
1264
1320
  this.refresh(this.data, changed, flags);
1265
1321
  }
1266
- else if ((changePath && (0, utils_1.getComponentPath)(changed.instance) === refreshData) && changed && changed.instance &&
1322
+ else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData)) && changed && changed.instance &&
1267
1323
  // Make sure the changed component is not in a different "context". Solves issues where refreshOn being set
1268
1324
  // in fields inside EditGrids could alter their state from other rows (which is bad).
1269
1325
  this.inContext(changed.instance)) {
@@ -1782,7 +1838,7 @@ class Component extends Element_1.default {
1782
1838
  rebuild() {
1783
1839
  this.destroy();
1784
1840
  this.init();
1785
- this.visible = this.conditionallyVisible(null, null);
1841
+ this.visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
1786
1842
  return this.redraw();
1787
1843
  }
1788
1844
  /**
@@ -1849,8 +1905,8 @@ class Component extends Element_1.default {
1849
1905
  conditionallyVisible(data, row) {
1850
1906
  data = data || this.rootValue;
1851
1907
  row = row || this.data;
1852
- if (this.builderMode || this.previewMode || !this.hasCondition()) {
1853
- return !this.component.hidden;
1908
+ if (this.builderMode || this.previewMode) {
1909
+ return true;
1854
1910
  }
1855
1911
  data = data || (this.root ? this.root.data : {});
1856
1912
  return this.checkCondition(row, data);
@@ -1880,8 +1936,14 @@ class Component extends Element_1.default {
1880
1936
  if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {
1881
1937
  this.redraw();
1882
1938
  }
1883
- // Check advanced conditions
1884
- const visible = this.conditionallyVisible(data, row);
1939
+ // Check advanced conditions (and cache the result)
1940
+ const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;
1941
+ if (isConditionallyHidden !== this._conditionallyHidden) {
1942
+ this._conditionallyHidden = isConditionallyHidden;
1943
+ this.clearOnHide();
1944
+ }
1945
+ // Check visibility
1946
+ const visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
1885
1947
  if (this.visible !== visible) {
1886
1948
  this.visible = visible;
1887
1949
  }
@@ -1991,6 +2053,12 @@ class Component extends Element_1.default {
1991
2053
  FormioUtils.setActionProperty(newComponent, action, result, row, data, this);
1992
2054
  const property = action.property.value;
1993
2055
  if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {
2056
+ // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state
2057
+ // separately from the component's hidden property, and technically this Advanced Logic conditionally hides
2058
+ // a component, we need to set _conditionallyHidden to the new value
2059
+ if (property === 'hidden') {
2060
+ this._conditionallyHidden = newComponent.hidden;
2061
+ }
1994
2062
  changed = true;
1995
2063
  }
1996
2064
  break;
@@ -2004,7 +2072,7 @@ class Component extends Element_1.default {
2004
2072
  component: newComponent,
2005
2073
  result,
2006
2074
  });
2007
- if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
2075
+ if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
2008
2076
  this.setValue(newValue);
2009
2077
  if (this.viewOnly) {
2010
2078
  this.dataValue = newValue;
@@ -2037,7 +2105,7 @@ class Component extends Element_1.default {
2037
2105
  component: newComponent,
2038
2106
  result,
2039
2107
  }, 'value');
2040
- if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
2108
+ if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
2041
2109
  this.setValue(newValue);
2042
2110
  if (this.viewOnly) {
2043
2111
  this.dataValue = newValue;
@@ -2148,7 +2216,7 @@ class Component extends Element_1.default {
2148
2216
  this.component.clearOnHide !== false &&
2149
2217
  !this.options.readOnly &&
2150
2218
  !this.options.showHiddenFields) {
2151
- if (!this.visible) {
2219
+ if (this.conditionallyHidden) {
2152
2220
  this.deleteValue();
2153
2221
  }
2154
2222
  else if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2398,7 +2466,7 @@ class Component extends Element_1.default {
2398
2466
  */
2399
2467
  get dataValue() {
2400
2468
  if (!this.key ||
2401
- (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
2469
+ (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
2402
2470
  return this.emptyValue;
2403
2471
  }
2404
2472
  if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2417,7 +2485,7 @@ class Component extends Element_1.default {
2417
2485
  set dataValue(value) {
2418
2486
  if (!this.allowData ||
2419
2487
  !this.key ||
2420
- (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
2488
+ (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
2421
2489
  return;
2422
2490
  }
2423
2491
  if ((value !== null) && (value !== undefined)) {
@@ -2738,7 +2806,7 @@ class Component extends Element_1.default {
2738
2806
  // If no calculated value or
2739
2807
  // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
2740
2808
  const { clearOnHide } = this.component;
2741
- const shouldBeCleared = !this.visible && clearOnHide;
2809
+ const shouldBeCleared = this.conditionallyHidden && clearOnHide;
2742
2810
  const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);
2743
2811
  if (shouldBeCleared) {
2744
2812
  // remove calculated value so that the value is recalculated once component becomes visible
@@ -2864,6 +2932,10 @@ class Component extends Element_1.default {
2864
2932
  * @returns {string} - The message to show when the component is invalid.
2865
2933
  */
2866
2934
  invalidMessage(data, dirty, ignoreCondition, row) {
2935
+ var _a;
2936
+ if (!row) {
2937
+ row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);
2938
+ }
2867
2939
  if (!ignoreCondition && !this.checkCondition(row, data)) {
2868
2940
  return '';
2869
2941
  }
@@ -2881,6 +2953,8 @@ class Component extends Element_1.default {
2881
2953
  data,
2882
2954
  row,
2883
2955
  path: this.path || this.component.key,
2956
+ parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,
2957
+ paths: this.paths,
2884
2958
  scope: validationScope,
2885
2959
  instance: this,
2886
2960
  processors: [
@@ -2934,7 +3008,7 @@ class Component extends Element_1.default {
2934
3008
  if (flags.silentCheck) {
2935
3009
  return [];
2936
3010
  }
2937
- let isDirty = this.dirty || flags.dirty;
3011
+ let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);
2938
3012
  if (this.options.alwaysDirty) {
2939
3013
  isDirty = true;
2940
3014
  }
@@ -2949,6 +3023,7 @@ class Component extends Element_1.default {
2949
3023
  * @returns {Array<any>} - An array of errors if the component is invalid.
2950
3024
  */
2951
3025
  validateComponent(data = null, row = null, flags = {}) {
3026
+ var _a;
2952
3027
  data = data || this.rootValue;
2953
3028
  row = row || this.data;
2954
3029
  const { async = false } = flags;
@@ -2959,7 +3034,10 @@ class Component extends Element_1.default {
2959
3034
  component: this.component,
2960
3035
  data,
2961
3036
  row,
3037
+ local: !!flags.local,
2962
3038
  value: this.validationValue,
3039
+ parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,
3040
+ paths: this.paths,
2963
3041
  path: this.path || this.component.key,
2964
3042
  instance: this,
2965
3043
  form: this.root ? this.root._form : {},
@@ -3378,7 +3456,7 @@ class Component extends Element_1.default {
3378
3456
  // If component definition changed, replace it.
3379
3457
  if (!lodash_1.default.isEqual(this.component, newComponent)) {
3380
3458
  this.component = newComponent;
3381
- const visible = this.conditionallyVisible(null, null);
3459
+ const visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
3382
3460
  const disabled = this.shouldDisabled;
3383
3461
  // Change states which won't be recalculated during redrawing
3384
3462
  if (this.visible !== visible) {
@@ -133,10 +133,10 @@ exports.default = [
133
133
  {
134
134
  weight: 700,
135
135
  type: 'checkbox',
136
- label: 'Clear Value When Hidden',
136
+ label: 'Omit Value From Submission Data When Conditionally Hidden',
137
137
  key: 'clearOnHide',
138
138
  defaultValue: true,
139
- tooltip: 'When a field is hidden, clear the value.',
139
+ tooltip: 'When a field is conditionally hidden, omit the value from the submission data.',
140
140
  input: true
141
141
  },
142
142
  utils_1.default.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),
@@ -22,6 +22,7 @@ export default class ComponentModal {
22
22
  modalOverlay: string;
23
23
  modalContents: string;
24
24
  modalClose: string;
25
+ componentContent: string;
25
26
  openModalWrapper: string;
26
27
  openModal: string;
27
28
  modalSave: string;
@@ -64,6 +64,7 @@ class ComponentModal {
64
64
  modalOverlay: 'single',
65
65
  modalContents: 'single',
66
66
  modalClose: 'single',
67
+ componentContent: 'single',
67
68
  openModalWrapper: 'single',
68
69
  openModal: 'single',
69
70
  modalSave: 'single',
@@ -56,18 +56,6 @@ export default class NestedComponent extends Field {
56
56
  * @returns {object} - The current form object.
57
57
  */
58
58
  get currentForm(): object;
59
- /**
60
- * Set Row Index to row and update each component.
61
- * @param {number} value - The row index.
62
- * @returns {void}
63
- */
64
- set rowIndex(value: number);
65
- /**
66
- * Get Row Index.
67
- * @returns {number} - The row index.
68
- */
69
- get rowIndex(): number;
70
- _rowIndex: number | undefined;
71
59
  /**
72
60
  * Get Contextual data of the component.
73
61
  * @returns {object} - The contextual data of the component.
@@ -115,14 +103,11 @@ export default class NestedComponent extends Field {
115
103
  */
116
104
  eachComponent(fn: Function): void;
117
105
  /**
118
- * Returns a component provided a key. This performs a deep search within the
119
- * component tree.
106
+ * Returns a component provided a key. This performs a deep search within the component tree.
120
107
  * @param {string} path - The path to the component.
121
- * @param {Function} [fn] - Called with the component once found.
122
- * @param {string} [originalPath] - The original path to the component.
123
108
  * @returns {any} - The component that is located.
124
109
  */
125
- getComponent(path: string, fn?: Function | undefined, originalPath?: string | undefined): any;
110
+ getComponent(path: string): any;
126
111
  /**
127
112
  * Return a component provided the Id of the component.
128
113
  * @param {string} id - The Id of the component.
@@ -211,12 +196,12 @@ export default class NestedComponent extends Field {
211
196
  calculateValue(data: any, flags: any, row: any): any;
212
197
  isLastPage(): boolean;
213
198
  isValid(data: any, dirty: any): any;
214
- validationProcessor({ scope, data, row, instance, component }: {
199
+ validationProcessor({ scope, data, row, instance, paths }: {
215
200
  scope: any;
216
201
  data: any;
217
202
  row: any;
218
203
  instance: any;
219
- component: any;
204
+ paths: any;
220
205
  }, flags: any): void;
221
206
  /**
222
207
  * Perform a validation on all child components of this nested component.