@formio/js 5.0.0-dev.5913.d415fcc → 5.0.0-dev.5914.479573c

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 (71) hide show
  1. package/dist/formio.form.js +569 -579
  2. package/dist/formio.form.min.js +1 -1
  3. package/dist/formio.form.min.js.LICENSE.txt +1 -3
  4. package/dist/formio.full.js +570 -580
  5. package/dist/formio.full.min.js +1 -1
  6. package/dist/formio.full.min.js.LICENSE.txt +1 -3
  7. package/dist/formio.js +3006 -287
  8. package/dist/formio.min.js +1 -1
  9. package/dist/formio.min.js.LICENSE.txt +12 -0
  10. package/dist/formio.utils.js +40 -50
  11. package/dist/formio.utils.min.js +1 -1
  12. package/dist/formio.utils.min.js.LICENSE.txt +1 -3
  13. package/lib/cjs/Webform.d.ts +1 -1
  14. package/lib/cjs/Webform.js +27 -28
  15. package/lib/cjs/WebformBuilder.js +4 -12
  16. package/lib/cjs/Wizard.d.ts +2 -1
  17. package/lib/cjs/Wizard.js +31 -31
  18. package/lib/cjs/components/Components.d.ts +0 -7
  19. package/lib/cjs/components/Components.js +1 -33
  20. package/lib/cjs/components/_classes/component/Component.d.ts +24 -7
  21. package/lib/cjs/components/_classes/component/Component.js +47 -13
  22. package/lib/cjs/components/_classes/nested/NestedComponent.d.ts +4 -19
  23. package/lib/cjs/components/_classes/nested/NestedComponent.js +39 -54
  24. package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.d.ts +2 -1
  25. package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js +9 -46
  26. package/lib/cjs/components/datagrid/DataGrid.d.ts +0 -1
  27. package/lib/cjs/components/datagrid/DataGrid.js +1 -45
  28. package/lib/cjs/components/datamap/DataMap.js +1 -2
  29. package/lib/cjs/components/editgrid/EditGrid.js +6 -6
  30. package/lib/cjs/components/form/Form.d.ts +1 -3
  31. package/lib/cjs/components/form/Form.js +15 -24
  32. package/lib/cjs/components/selectboxes/SelectBoxes.js +0 -1
  33. package/lib/cjs/utils/conditionOperators/DateGreaterThan.js +2 -2
  34. package/lib/cjs/utils/conditionOperators/IsEmptyValue.d.ts +2 -2
  35. package/lib/cjs/utils/conditionOperators/IsEmptyValue.js +2 -2
  36. package/lib/cjs/utils/conditionOperators/IsEqualTo.d.ts +2 -2
  37. package/lib/cjs/utils/conditionOperators/IsEqualTo.js +2 -2
  38. package/lib/cjs/utils/formUtils.d.ts +25 -14
  39. package/lib/cjs/utils/formUtils.js +11 -16
  40. package/lib/cjs/utils/utils.d.ts +1 -2
  41. package/lib/cjs/utils/utils.js +15 -31
  42. package/lib/mjs/Webform.d.ts +1 -1
  43. package/lib/mjs/Webform.js +24 -27
  44. package/lib/mjs/WebformBuilder.js +4 -12
  45. package/lib/mjs/Wizard.d.ts +2 -1
  46. package/lib/mjs/Wizard.js +28 -27
  47. package/lib/mjs/components/Components.d.ts +0 -7
  48. package/lib/mjs/components/Components.js +1 -32
  49. package/lib/mjs/components/_classes/component/Component.d.ts +24 -7
  50. package/lib/mjs/components/_classes/component/Component.js +49 -14
  51. package/lib/mjs/components/_classes/nested/NestedComponent.d.ts +4 -19
  52. package/lib/mjs/components/_classes/nested/NestedComponent.js +40 -55
  53. package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.d.ts +2 -1
  54. package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js +8 -43
  55. package/lib/mjs/components/datagrid/DataGrid.d.ts +0 -1
  56. package/lib/mjs/components/datagrid/DataGrid.js +1 -45
  57. package/lib/mjs/components/datamap/DataMap.js +1 -2
  58. package/lib/mjs/components/editgrid/EditGrid.js +9 -6
  59. package/lib/mjs/components/form/Form.d.ts +1 -3
  60. package/lib/mjs/components/form/Form.js +16 -24
  61. package/lib/mjs/components/selectboxes/SelectBoxes.js +0 -1
  62. package/lib/mjs/utils/conditionOperators/DateGreaterThan.js +2 -2
  63. package/lib/mjs/utils/conditionOperators/IsEmptyValue.d.ts +2 -2
  64. package/lib/mjs/utils/conditionOperators/IsEmptyValue.js +2 -2
  65. package/lib/mjs/utils/conditionOperators/IsEqualTo.d.ts +2 -2
  66. package/lib/mjs/utils/conditionOperators/IsEqualTo.js +2 -2
  67. package/lib/mjs/utils/formUtils.d.ts +25 -14
  68. package/lib/mjs/utils/formUtils.js +2 -12
  69. package/lib/mjs/utils/utils.d.ts +1 -2
  70. package/lib/mjs/utils/utils.js +14 -29
  71. package/package.json +3 -3
@@ -18,8 +18,6 @@
18
18
  * MIT licensed
19
19
  */
20
20
 
21
- /*! @license DOMPurify 3.1.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.6/LICENSE */
22
-
23
21
  /*! @license DOMPurify 3.2.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.0/LICENSE */
24
22
 
25
23
  /*! formiojs v5.0.0-rc.59 | https://unpkg.com/formiojs@5.0.0-rc.59/LICENSE.txt */
@@ -45,4 +43,4 @@
45
43
 
46
44
  //! moment.js
47
45
 
48
- //! version : 0.5.45
46
+ //! version : 0.5.46
@@ -426,7 +426,7 @@ declare class Webform extends NestedDataComponent {
426
426
  */
427
427
  cancel(noconfirm: boolean): boolean;
428
428
  setMetadata(submission: any): void;
429
- submitForm(options?: {}): Promise<any>;
429
+ submitForm(options?: {}, local?: boolean): Promise<any>;
430
430
  setServerErrors(error: any): void;
431
431
  serverErrors: any;
432
432
  executeSubmit(options: any): Promise<object>;
@@ -585,11 +585,12 @@ class Webform extends NestedDataComponent_1.default {
585
585
  * @returns {Promise} - The promise that is triggered when the form is set.
586
586
  */
587
587
  setForm(form, flags = {}) {
588
- var _a, _b, _c;
588
+ var _a;
589
589
  const isFormAlreadySet = this._form && ((_a = this._form.components) === null || _a === void 0 ? void 0 : _a.length);
590
590
  try {
591
591
  // Do not set the form again if it has been already set
592
592
  if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {
593
+ this.formReadyResolve();
593
594
  return Promise.resolve();
594
595
  }
595
596
  // Create the form.
@@ -597,13 +598,11 @@ class Webform extends NestedDataComponent_1.default {
597
598
  if (this.onSetForm) {
598
599
  this.onSetForm(lodash_1.default.cloneDeep(this._form), form);
599
600
  }
600
- if ((_c = (_b = this.parent) === null || _b === void 0 ? void 0 : _b.component) === null || _c === void 0 ? void 0 : _c.modalEdit) {
601
- return Promise.resolve();
602
- }
603
601
  }
604
602
  catch (err) {
605
603
  console.warn(err);
606
604
  // If provided form is not a valid JSON object, do not set it too
605
+ this.formReadyReject(err);
607
606
  return Promise.resolve();
608
607
  }
609
608
  // Allow the form to provide component overrides.
@@ -847,6 +846,9 @@ class Webform extends NestedDataComponent_1.default {
847
846
  return changed;
848
847
  }
849
848
  getValue() {
849
+ if (!this._submission) {
850
+ this._submission = {};
851
+ }
850
852
  if (!this._submission.data) {
851
853
  this._submission.data = {};
852
854
  }
@@ -1108,29 +1110,24 @@ class Webform extends NestedDataComponent_1.default {
1108
1110
  return;
1109
1111
  }
1110
1112
  // Mark any components as invalid if in a custom message.
1113
+ const componentErrors = {};
1111
1114
  errors.forEach((err) => {
1112
- const { components = [] } = err;
1113
- if (err.component) {
1114
- components.push(err.component);
1115
- }
1116
- if (err.path) {
1117
- components.push(err.path);
1115
+ var _a, _b;
1116
+ const path = err.path || ((_a = err.context) === null || _a === void 0 ? void 0 : _a.path) || ((_b = err.component) === null || _b === void 0 ? void 0 : _b.key);
1117
+ if (!componentErrors[path]) {
1118
+ componentErrors[path] = [];
1118
1119
  }
1119
- components.forEach((path) => {
1120
- const originalPath = (0, utils_1.getStringFromComponentPath)(path);
1121
- const component = this.getComponent(path, lodash_1.default.identity, originalPath);
1122
- if (err.fromServer) {
1123
- if (component.serverErrors) {
1124
- component.serverErrors.push(err);
1125
- }
1126
- else {
1127
- component.serverErrors = [err];
1128
- }
1129
- }
1130
- const components = lodash_1.default.compact(Array.isArray(component) ? component : [component]);
1131
- components.forEach((component) => component.setCustomValidity(err.message, true));
1132
- });
1120
+ componentErrors[path].push(err);
1133
1121
  });
1122
+ // Iterate through all of our component errors and apply them to the components.
1123
+ for (let path in componentErrors) {
1124
+ const component = this.getComponent(path);
1125
+ const errors = componentErrors[path];
1126
+ if (component) {
1127
+ component.serverErrors = errors.filter((err) => err.fromServer);
1128
+ component.setCustomValidity(errors, true);
1129
+ }
1130
+ }
1134
1131
  const displayedErrors = [];
1135
1132
  if (errors.length) {
1136
1133
  errors = lodash_1.default.uniqBy(errors, (error) => { var _a, _b; return [error.message, (_a = error.component) === null || _a === void 0 ? void 0 : _a.id, (_b = error.context) === null || _b === void 0 ? void 0 : _b.path].join(); });
@@ -1322,7 +1319,7 @@ class Webform extends NestedDataComponent_1.default {
1322
1319
  onLine: navigator.onLine,
1323
1320
  });
1324
1321
  }
1325
- submitForm(options = {}) {
1322
+ submitForm(options = {}, local = false) {
1326
1323
  this.clearServerErrors();
1327
1324
  return new Promise((resolve, reject) => {
1328
1325
  // Read-only forms should never submit.
@@ -1348,6 +1345,7 @@ class Webform extends NestedDataComponent_1.default {
1348
1345
  return reject("Invalid Submission");
1349
1346
  }
1350
1347
  const errors = this.validate(submission.data, {
1348
+ local,
1351
1349
  dirty: true,
1352
1350
  silentCheck: false,
1353
1351
  process: "submit",
@@ -1362,12 +1360,13 @@ class Webform extends NestedDataComponent_1.default {
1362
1360
  console.error(err);
1363
1361
  }
1364
1362
  this.everyComponent((comp) => {
1363
+ var _a, _b;
1365
1364
  if (submission._vnote && comp.type === "form" && comp.component.reference) {
1366
- lodash_1.default.get(submission.data, comp.path, {})._vnote = submission._vnote;
1365
+ lodash_1.default.get(submission.data, local ? (_a = comp.paths) === null || _a === void 0 ? void 0 : _a.localDataPath : comp.path, {})._vnote = submission._vnote;
1367
1366
  }
1368
1367
  const { persistent } = comp.component;
1369
1368
  if (persistent === "client-only") {
1370
- lodash_1.default.unset(submission.data, comp.path);
1369
+ lodash_1.default.unset(submission.data, local ? (_b = comp.paths) === null || _b === void 0 ? void 0 : _b.localDataPath : comp.path);
1371
1370
  }
1372
1371
  });
1373
1372
  this.hook("customValidation", Object.assign(Object.assign({}, submission), { component: options.component }), (err) => {
@@ -1534,7 +1533,7 @@ class Webform extends NestedDataComponent_1.default {
1534
1533
  return;
1535
1534
  }
1536
1535
  const captchaComponent = [];
1537
- (0, formUtils_1.eachComponent)(this.components, (component) => {
1536
+ this.eachComponent((component) => {
1538
1537
  if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
1539
1538
  captchaComponent.push(component);
1540
1539
  }
@@ -1101,20 +1101,12 @@ class WebformBuilder extends Component_1.default {
1101
1101
  findRepeatablePaths() {
1102
1102
  const repeatablePaths = [];
1103
1103
  const keys = new Map();
1104
- (0, formUtils_1.eachComponent)(this.form.components, (comp, path) => {
1105
- if (!comp.key) {
1106
- return;
1107
- }
1108
- if (keys.has(comp.key)) {
1109
- if (keys.get(comp.key).includes(path)) {
1110
- repeatablePaths.push(path);
1111
- }
1112
- else {
1113
- keys.set(comp.key, [...keys.get(comp.key), path]);
1114
- }
1104
+ (0, formUtils_1.eachComponent)(this.form.components, (comp, path, components, parent, paths) => {
1105
+ if (keys.has(paths.dataPath)) {
1106
+ repeatablePaths.push(paths.dataPath);
1115
1107
  }
1116
1108
  else {
1117
- keys.set(comp.key, [path]);
1109
+ keys.set(paths.dataPath, true);
1118
1110
  }
1119
1111
  }, true);
1120
1112
  return repeatablePaths;
@@ -6,6 +6,7 @@ declare class Wizard extends Webform {
6
6
  originalComponents: any[];
7
7
  page: number;
8
8
  currentPanel: any;
9
+ currentPanels: any[] | null;
9
10
  currentNextPage: number;
10
11
  _seenPages: number[];
11
12
  subWizards: any[];
@@ -16,7 +17,7 @@ declare class Wizard extends Webform {
16
17
  originalOptions: any;
17
18
  isLastPage(): any;
18
19
  getPages(args?: {}): any[];
19
- get hasSubWizards(): boolean;
20
+ get hasExtraPages(): boolean;
20
21
  get localData(): any;
21
22
  get wizardKey(): string;
22
23
  set wizard(form: object);
package/lib/cjs/Wizard.js CHANGED
@@ -34,6 +34,7 @@ class Wizard extends Webform_1.default {
34
34
  this.originalComponents = [];
35
35
  this.page = 0;
36
36
  this.currentPanel = null;
37
+ this.currentPanels = null;
37
38
  this.currentNextPage = 0;
38
39
  this._seenPages = [0];
39
40
  this.subWizards = [];
@@ -52,12 +53,12 @@ class Wizard extends Webform_1.default {
52
53
  }
53
54
  getPages(args = {}) {
54
55
  const { all = false } = args;
55
- const pages = this.hasSubWizards ? this.components : this.pages;
56
+ const pages = this.hasExtraPages ? this.components : this.pages;
56
57
  const filteredPages = pages
57
58
  .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));
58
59
  return filteredPages;
59
60
  }
60
- get hasSubWizards() {
61
+ get hasExtraPages() {
61
62
  return !lodash_1.default.isEmpty(this.subWizards);
62
63
  }
63
64
  get data() {
@@ -186,9 +187,9 @@ class Wizard extends Webform_1.default {
186
187
  }
187
188
  render() {
188
189
  const ctx = this.renderContext;
189
- if (this.component.id) {
190
- ctx.panels.forEach(panel => {
191
- if (panel.id === this.component.id) {
190
+ if (this.component.key) {
191
+ ctx.panels.map(panel => {
192
+ if (panel.key === this.component.key) {
192
193
  this.currentPanel = panel;
193
194
  ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);
194
195
  }
@@ -374,11 +375,11 @@ class Wizard extends Webform_1.default {
374
375
  this.emit('wizardPageSelected', this.pages[index], index);
375
376
  }
376
377
  attachHeader() {
377
- var _a;
378
+ var _a, _b;
378
379
  const isAllowPrevious = this.isAllowPrevious();
379
- this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], this.currentPanel.tooltip);
380
+ this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);
380
381
  if (this.isBreadcrumbClickable() || isAllowPrevious) {
381
- (_a = this.refs[`${this.wizardKey}-link`]) === null || _a === void 0 ? void 0 : _a.forEach((link, index) => {
382
+ (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {
382
383
  if (!isAllowPrevious || index <= this.enabledIndex) {
383
384
  this.addEventListener(link, 'click', (event) => {
384
385
  this.emit('wizardNavigationClicked', this.pages[index]);
@@ -586,7 +587,7 @@ class Wizard extends Webform_1.default {
586
587
  this.pageFieldLogic(num);
587
588
  this.getNextPage();
588
589
  let parentNum = num;
589
- if (this.hasSubWizards) {
590
+ if (this.hasExtraPages) {
590
591
  const pageFromPages = this.pages[num];
591
592
  const pageFromComponents = this.components[num];
592
593
  if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {
@@ -601,7 +602,9 @@ class Wizard extends Webform_1.default {
601
602
  }
602
603
  this.redraw().then(() => {
603
604
  this.checkData(this.submission.data);
604
- this.validateCurrentPage();
605
+ this.validateCurrentPage({
606
+ dirty: this.submitted
607
+ });
605
608
  });
606
609
  return Promise.resolve();
607
610
  }
@@ -721,7 +724,7 @@ class Wizard extends Webform_1.default {
721
724
  validateCurrentPage(flags = {}) {
722
725
  var _a;
723
726
  // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
724
- return (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.parent.validateComponents(this.currentPage.component.components, this.currentPage.parent.data, flags);
727
+ return (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.parent.validateComponents(this.currentPage.component.components, this.root.data, flags);
725
728
  }
726
729
  emitPrevPage() {
727
730
  this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -861,25 +864,30 @@ class Wizard extends Webform_1.default {
861
864
  }
862
865
  }
863
866
  onChange(flags, changed, modified, changes) {
864
- var _a;
867
+ var _a, _b;
865
868
  super.onChange(flags, changed, modified, changes);
866
869
  const errors = this.validate(this.localData, { dirty: false });
867
870
  if (this.alert) {
868
871
  this.showErrors(errors, true, true);
869
872
  }
870
873
  // If the pages change, need to redraw the header.
871
- const currentPanels = this.pages;
872
- // calling this.establishPages() updates/mutates this.pages to be the current pages
873
- this.establishPages();
874
- const newPanels = this.pages;
874
+ let currentPanels;
875
+ let panels;
875
876
  const currentNextPage = this.currentNextPage;
876
- const panelsUpdated = !lodash_1.default.isEqual(newPanels, currentPanels);
877
- if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.id) && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
878
- const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);
879
- if (newIndex !== -1)
880
- this.setPage(newIndex);
877
+ if (this.hasExtraPages) {
878
+ currentPanels = this.pages.map(page => page.component.key);
879
+ this.establishPages();
880
+ panels = this.pages.map(page => page.component.key);
881
881
  }
882
- if (panelsUpdated || (flags && flags.fromSubmission)) {
882
+ else {
883
+ currentPanels = this.currentPanels || this.pages.map(page => page.component.key);
884
+ panels = this.establishPages().map(panel => panel.key);
885
+ this.currentPanels = panels;
886
+ if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.key) && ((_b = this.currentPanels) === null || _b === void 0 ? void 0 : _b.length)) {
887
+ this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));
888
+ }
889
+ }
890
+ if (!lodash_1.default.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {
883
891
  this.redrawHeader();
884
892
  }
885
893
  // If the next page changes, then make sure to redraw navigation.
@@ -890,13 +898,6 @@ class Wizard extends Webform_1.default {
890
898
  this.redraw();
891
899
  }
892
900
  }
893
- redraw() {
894
- var _a, _b;
895
- if ((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.modalEdit) {
896
- return this.parent.redraw();
897
- }
898
- return super.redraw();
899
- }
900
901
  rebuild() {
901
902
  const currentPage = this.page;
902
903
  const setCurrentPage = () => this.setPage(currentPage);
@@ -919,14 +920,13 @@ class Wizard extends Webform_1.default {
919
920
  return super.errors;
920
921
  }
921
922
  showErrors(errors, triggerEvent) {
922
- if (this.hasSubWizards) {
923
+ if (this.hasExtraPages) {
923
924
  this.subWizards.forEach((subWizard) => {
924
925
  if (Array.isArray(subWizard.errors)) {
925
926
  errors = [...errors, ...subWizard.errors];
926
927
  }
927
928
  });
928
929
  }
929
- ;
930
930
  return super.showErrors(errors, triggerEvent);
931
931
  }
932
932
  focusOnComponent(key) {
@@ -256,13 +256,6 @@ export default class Components {
256
256
  static setComponents(comps: any): void;
257
257
  static addComponent(name: any, comp: any): void;
258
258
  static setComponent(name: any, comp: any): void;
259
- /**
260
- * Return a path of component's value.
261
- * @param {Component} component - The component instance.
262
- * @returns {string} - The component's value path.
263
- */
264
- static getComponentPath(component: Component): string;
265
259
  static create(component: any, options: any, data: any): any;
266
260
  }
267
261
  import BaseEditForm from './_classes/component/Component.form';
268
- import Component from './_classes/component/Component';
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const Component_1 = __importDefault(require("./_classes/component/Component"));
7
7
  const utils_1 = __importDefault(require("./_classes/component/editForm/utils"));
8
8
  const Component_form_1 = __importDefault(require("./_classes/component/Component.form"));
9
- const utils_2 = require("../utils/utils");
10
9
  const lodash_1 = __importDefault(require("lodash"));
11
10
  class Components {
12
11
  static set EditFormUtils(value) {
@@ -49,35 +48,6 @@ class Components {
49
48
  static setComponent(name, comp) {
50
49
  Components.components[name] = comp;
51
50
  }
52
- /**
53
- * Return a path of component's value.
54
- * @param {Component} component - The component instance.
55
- * @returns {string} - The component's value path.
56
- */
57
- static getComponentPath(component) {
58
- var _a;
59
- let path = '';
60
- const componentKey = (0, utils_2.getComponentKey)(component.component);
61
- if (componentKey) {
62
- let thisPath = ((_a = component.options) === null || _a === void 0 ? void 0 : _a.parent) || component;
63
- while (thisPath && !thisPath.allowData && thisPath.parent) {
64
- thisPath = thisPath.parent;
65
- }
66
- // TODO: any component that is nested in e.g. a Data Grid or an Edit Grid is going to receive a row prop; the problem
67
- // is that options.row is passed to each further nested component, which results in erroneous paths like
68
- // `editGrid[0].container[0].textField` rather than `editGrid[0].container.textField`. This should be adapted for other
69
- // components with a tree-like data model
70
- const rowIndex = component.row;
71
- const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
72
- path = `${thisPath.path}${rowIndexPath}.`;
73
- if (rowIndexPath && (0, utils_2.getModelType)(thisPath) === 'nestedDataArray') {
74
- path = `${path}data.`;
75
- }
76
- path += componentKey;
77
- return lodash_1.default.trim(path, '.');
78
- }
79
- return path;
80
- }
81
51
  static create(component, options, data) {
82
52
  let comp = null;
83
53
  if (component.type && Components.components.hasOwnProperty(component.type)) {
@@ -102,9 +72,7 @@ class Components {
102
72
  else {
103
73
  comp = new Component_1.default(component, options, data);
104
74
  }
105
- const path = Components.getComponentPath(comp);
106
- if (path) {
107
- comp.path = path;
75
+ if (comp.path) {
108
76
  comp.componentsMap[comp.path] = comp;
109
77
  }
110
78
  return comp;
@@ -42,14 +42,13 @@ declare class Component extends Element {
42
42
  */
43
43
  private _hasCondition;
44
44
  /**
45
- * References to dom elements
45
+ * The row index for this component.
46
46
  */
47
- refs: {};
47
+ _rowIndex: number | undefined;
48
48
  /**
49
- * The data path to this specific component instance.
50
- * @type {string}
49
+ * References to dom elements
51
50
  */
52
- path: string;
51
+ refs: {};
53
52
  /**
54
53
  * An array of all the children components errors.
55
54
  */
@@ -114,6 +113,11 @@ declare class Component extends Element {
114
113
  * @type {Component}
115
114
  */
116
115
  parent: Component;
116
+ /**
117
+ * The component paths for this component.
118
+ * @type {import('@formio/core').ComponentPaths} - The component paths.
119
+ */
120
+ paths: import('@formio/core').ComponentPaths;
117
121
  _path: string;
118
122
  /**
119
123
  * Determines if this component is visible, or not.
@@ -158,7 +162,7 @@ declare class Component extends Element {
158
162
  * @type {*}
159
163
  */
160
164
  info: any;
161
- get componentsMap(): any;
165
+ get componentsMap(): object;
162
166
  set data(value: any);
163
167
  get data(): any;
164
168
  mergeSchema(component?: {}): any;
@@ -182,6 +186,17 @@ declare class Component extends Element {
182
186
  * @returns {boolean} - TRUE if the component is disabled.
183
187
  */
184
188
  get disabled(): boolean;
189
+ /**
190
+ * Set Row Index to row and update each component.
191
+ * @param {number} value - The row index.
192
+ * @returns {void}
193
+ */
194
+ set rowIndex(value: number);
195
+ /**
196
+ * Get Row Index.
197
+ * @returns {number} - The row index.
198
+ */
199
+ get rowIndex(): number;
185
200
  afterComponentAssign(): void;
186
201
  createAddon(addonConfiguration: any): any;
187
202
  get shouldDisabled(): any;
@@ -190,6 +205,8 @@ declare class Component extends Element {
190
205
  get hasInput(): any;
191
206
  get defaultSchema(): any;
192
207
  get key(): any;
208
+ set path(path: string | undefined);
209
+ get path(): string | undefined;
193
210
  set parentVisible(value: any);
194
211
  get parentVisible(): any;
195
212
  set parentDisabled(value: boolean);
@@ -212,7 +229,7 @@ declare class Component extends Element {
212
229
  _currentForm: any;
213
230
  get fullMode(): boolean;
214
231
  get builderMode(): boolean;
215
- get calculatedPath(): string;
232
+ get calculatedPath(): string | undefined;
216
233
  get labelPosition(): any;
217
234
  get labelWidth(): any;
218
235
  get labelMargin(): any;
@@ -243,6 +243,7 @@ class Component extends Element_1.default {
243
243
  */
244
244
  /* eslint-disable max-statements */
245
245
  constructor(component, options, data) {
246
+ var _a, _b, _c, _d;
246
247
  super(Object.assign({
247
248
  renderMode: 'form',
248
249
  attachMode: 'full',
@@ -258,6 +259,10 @@ class Component extends Element_1.default {
258
259
  * @private
259
260
  */
260
261
  this._hasCondition = null;
262
+ /**
263
+ * The row index for this component.
264
+ */
265
+ this._rowIndex = undefined;
261
266
  /**
262
267
  * References to dom elements
263
268
  */
@@ -268,11 +273,6 @@ class Component extends Element_1.default {
268
273
  this.options.components[component.type]) {
269
274
  lodash_1.default.merge(component, this.options.components[component.type]);
270
275
  }
271
- /**
272
- * The data path to this specific component instance.
273
- * @type {string}
274
- */
275
- this.path = (component === null || component === void 0 ? void 0 : component.key) || '';
276
276
  /**
277
277
  * An array of all the children components errors.
278
278
  */
@@ -341,6 +341,11 @@ class Component extends Element_1.default {
341
341
  * @type {Component}
342
342
  */
343
343
  this.parent = this.options.parent;
344
+ /**
345
+ * The component paths for this component.
346
+ * @type {import('@formio/core').ComponentPaths} - The component paths.
347
+ */
348
+ 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 }));
344
349
  this.options.name = this.options.name || 'data';
345
350
  this._path = '';
346
351
  // Needs for Nextgen Rules Engine
@@ -447,12 +452,7 @@ class Component extends Element_1.default {
447
452
  /* eslint-enable max-statements */
448
453
  get componentsMap() {
449
454
  var _a;
450
- if ((_a = this.localRoot) === null || _a === void 0 ? void 0 : _a.childComponentsMap) {
451
- return this.localRoot.childComponentsMap;
452
- }
453
- const localMap = {};
454
- localMap[this.path] = this;
455
- return localMap;
455
+ return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};
456
456
  }
457
457
  get data() {
458
458
  return this._data;
@@ -499,6 +499,23 @@ class Component extends Element_1.default {
499
499
  this.component.addons.forEach((addon) => this.createAddon(addon));
500
500
  }
501
501
  }
502
+ /**
503
+ * Get Row Index.
504
+ * @returns {number} - The row index.
505
+ */
506
+ get rowIndex() {
507
+ return this._rowIndex;
508
+ }
509
+ /**
510
+ * Set Row Index to row and update each component.
511
+ * @param {number} value - The row index.
512
+ * @returns {void}
513
+ */
514
+ set rowIndex(value) {
515
+ var _a, _b;
516
+ 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 }));
517
+ this._rowIndex = value;
518
+ }
502
519
  afterComponentAssign() {
503
520
  //implement in extended classes
504
521
  }
@@ -568,6 +585,12 @@ class Component extends Element_1.default {
568
585
  get key() {
569
586
  return lodash_1.default.get(this.component, 'key', '');
570
587
  }
588
+ get path() {
589
+ return this.paths.dataPath;
590
+ }
591
+ set path(path) {
592
+ throw new Error('Should not be setting the path of a component.');
593
+ }
571
594
  set parentVisible(value) {
572
595
  this._parentVisible = value;
573
596
  }
@@ -1274,6 +1297,7 @@ class Component extends Element_1.default {
1274
1297
  * @returns {void}
1275
1298
  */
1276
1299
  checkRefresh(refreshData, changed, flags) {
1300
+ var _a, _b;
1277
1301
  const changePath = lodash_1.default.get(changed, 'instance.path', false);
1278
1302
  // Don't let components change themselves.
1279
1303
  if (changePath && this.path === changePath) {
@@ -1282,7 +1306,7 @@ class Component extends Element_1.default {
1282
1306
  if (refreshData === 'data') {
1283
1307
  this.refresh(this.data, changed, flags);
1284
1308
  }
1285
- else if ((changePath && (0, utils_1.getComponentPath)(changed.instance) === refreshData) && changed && changed.instance &&
1309
+ 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 &&
1286
1310
  // Make sure the changed component is not in a different "context". Solves issues where refreshOn being set
1287
1311
  // in fields inside EditGrids could alter their state from other rows (which is bad).
1288
1312
  this.inContext(changed.instance)) {
@@ -2892,6 +2916,10 @@ class Component extends Element_1.default {
2892
2916
  * @returns {string} - The message to show when the component is invalid.
2893
2917
  */
2894
2918
  invalidMessage(data, dirty, ignoreCondition, row) {
2919
+ var _a;
2920
+ if (!row) {
2921
+ row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);
2922
+ }
2895
2923
  if (!ignoreCondition && !this.checkCondition(row, data)) {
2896
2924
  return '';
2897
2925
  }
@@ -2909,6 +2937,8 @@ class Component extends Element_1.default {
2909
2937
  data,
2910
2938
  row,
2911
2939
  path: this.path || this.component.key,
2940
+ parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,
2941
+ paths: this.paths,
2912
2942
  scope: validationScope,
2913
2943
  instance: this,
2914
2944
  processors: [
@@ -2962,7 +2992,7 @@ class Component extends Element_1.default {
2962
2992
  if (flags.silentCheck) {
2963
2993
  return [];
2964
2994
  }
2965
- let isDirty = this.dirty || flags.dirty;
2995
+ let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);
2966
2996
  if (this.options.alwaysDirty) {
2967
2997
  isDirty = true;
2968
2998
  }
@@ -2977,6 +3007,7 @@ class Component extends Element_1.default {
2977
3007
  * @returns {Array<any>} - An array of errors if the component is invalid.
2978
3008
  */
2979
3009
  validateComponent(data = null, row = null, flags = {}) {
3010
+ var _a;
2980
3011
  data = data || this.rootValue;
2981
3012
  row = row || this.data;
2982
3013
  const { async = false } = flags;
@@ -2987,7 +3018,10 @@ class Component extends Element_1.default {
2987
3018
  component: this.component,
2988
3019
  data,
2989
3020
  row,
3021
+ local: !!flags.local,
2990
3022
  value: this.validationValue,
3023
+ parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,
3024
+ paths: this.paths,
2991
3025
  path: this.path || this.component.key,
2992
3026
  instance: this,
2993
3027
  form: this.root ? this.root._form : {},