@bpmn-io/form-js-editor 0.14.0 → 0.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -448,10 +448,10 @@ function invokeFunction(fn, args) {
448
448
  return fn.apply(null, args);
449
449
  }
450
450
 
451
- /**
452
- * A factory to create a configurable debouncer.
453
- *
454
- * @param {number|boolean} [config=true]
451
+ /**
452
+ * A factory to create a configurable debouncer.
453
+ *
454
+ * @param {number|boolean} [config=true]
455
455
  */
456
456
  function DebounceFactory(config = true) {
457
457
  const timeout = typeof config === 'number' ? config : config ? 300 : 0;
@@ -464,11 +464,11 @@ function DebounceFactory(config = true) {
464
464
  DebounceFactory.$inject = ['config.debounce'];
465
465
 
466
466
  class FieldFactory {
467
- /**
468
- * @constructor
469
- *
470
- * @param { import('./FormFieldRegistry').default } formFieldRegistry
471
- * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
467
+ /**
468
+ * @constructor
469
+ *
470
+ * @param { import('./FormFieldRegistry').default } formFieldRegistry
471
+ * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
472
472
  */
473
473
  constructor(formFieldRegistry, formFields) {
474
474
  this._formFieldRegistry = formFieldRegistry;
@@ -528,11 +528,11 @@ class FieldFactory {
528
528
  FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
529
529
 
530
530
  class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
531
- /**
532
- * Updates a form fields id.
533
- *
534
- * @param {Object} formField
535
- * @param {string} newId
531
+ /**
532
+ * Updates a form fields id.
533
+ *
534
+ * @param {Object} formField
535
+ * @param {string} newId
536
536
  */
537
537
  updateId(formField, newId) {
538
538
  this._validateId(newId);
@@ -553,13 +553,13 @@ class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
553
553
  }
554
554
  }
555
555
 
556
- /**
557
- * Validate the suitability of the given id and signals a problem
558
- * with an exception.
559
- *
560
- * @param {string} id
561
- *
562
- * @throws {Error} if id is empty or already assigned
556
+ /**
557
+ * Validate the suitability of the given id and signals a problem
558
+ * with an exception.
559
+ *
560
+ * @param {string} id
561
+ *
562
+ * @throws {Error} if id is empty or already assigned
563
563
  */
564
564
  _validateId(id) {
565
565
  if (!id) {
@@ -572,11 +572,11 @@ class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
572
572
  }
573
573
 
574
574
  class FormLayoutValidator {
575
- /**
576
- * @constructor
577
- *
578
- * @param { import('./FormLayouter').default } formLayouter
579
- * @param { import('./FormFieldRegistry').default } formFieldRegistry
575
+ /**
576
+ * @constructor
577
+ *
578
+ * @param { import('./FormLayouter').default } formLayouter
579
+ * @param { import('./FormFieldRegistry').default } formFieldRegistry
580
580
  */
581
581
  constructor(formLayouter, formFieldRegistry) {
582
582
  this._formLayouter = formLayouter;
@@ -629,11 +629,11 @@ class FormLayoutValidator {
629
629
  FormLayoutValidator.$inject = ['formLayouter', 'formFieldRegistry'];
630
630
 
631
631
  class Importer {
632
- /**
633
- * @constructor
634
- * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
635
- * @param { import('../core/FieldFactory').default } fieldFactory
636
- * @param { import('../core/FormLayouter').default } formLayouter
632
+ /**
633
+ * @constructor
634
+ * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
635
+ * @param { import('../core/FieldFactory').default } fieldFactory
636
+ * @param { import('../core/FormLayouter').default } formLayouter
637
637
  */
638
638
  constructor(formFieldRegistry, fieldFactory, formLayouter) {
639
639
  this._formFieldRegistry = formFieldRegistry;
@@ -641,21 +641,21 @@ class Importer {
641
641
  this._formLayouter = formLayouter;
642
642
  }
643
643
 
644
- /**
645
- * Import schema creating rows, fields, attaching additional
646
- * information to each field and adding fields to the
647
- * field registry.
648
- *
649
- * Additional information attached:
650
- *
651
- * * `id` (unless present)
652
- * * `_parent`
653
- * * `_path`
654
- *
655
- * @param {any} schema
656
- *
657
- * @typedef {{ warnings: Error[], schema: any }} ImportResult
658
- * @returns {ImportResult}
644
+ /**
645
+ * Import schema creating rows, fields, attaching additional
646
+ * information to each field and adding fields to the
647
+ * field registry.
648
+ *
649
+ * Additional information attached:
650
+ *
651
+ * * `id` (unless present)
652
+ * * `_parent`
653
+ * * `_path`
654
+ *
655
+ * @param {any} schema
656
+ *
657
+ * @typedef {{ warnings: Error[], schema: any }} ImportResult
658
+ * @returns {ImportResult}
659
659
  */
660
660
  importSchema(schema) {
661
661
  // TODO: Add warnings
@@ -673,12 +673,12 @@ class Importer {
673
673
  }
674
674
  }
675
675
 
676
- /**
677
- * @param {{[x: string]: any}} fieldAttrs
678
- * @param {String} [parentId]
679
- * @param {number} [index]
680
- *
681
- * @return {any} field
676
+ /**
677
+ * @param {{[x: string]: any}} fieldAttrs
678
+ * @param {String} [parentId]
679
+ * @param {number} [index]
680
+ *
681
+ * @return {any} field
682
682
  */
683
683
  importFormField(fieldAttrs, parentId, index) {
684
684
  const {
@@ -715,11 +715,11 @@ class Importer {
715
715
  return field;
716
716
  }
717
717
 
718
- /**
719
- * @param {Array<any>} components
720
- * @param {string} parentId
721
- *
722
- * @return {Array<any>} imported components
718
+ /**
719
+ * @param {Array<any>} components
720
+ * @param {string} parentId
721
+ *
722
+ * @return {Array<any>} imported components
723
723
  */
724
724
  importFormFields(components, parentId) {
725
725
  return components.map((component, index) => {
@@ -749,11 +749,11 @@ const DragAndDropContext = preact.createContext({
749
749
  });
750
750
  var DragAndDropContext$1 = DragAndDropContext;
751
751
 
752
- /**
753
- * @param {string} type
754
- * @param {boolean} [strict]
755
- *
756
- * @returns {any}
752
+ /**
753
+ * @param {string} type
754
+ * @param {boolean} [strict]
755
+ *
756
+ * @returns {any}
757
757
  */
758
758
  function getService$1(type, strict) {}
759
759
  const FormEditorContext = preact.createContext({
@@ -1046,19 +1046,19 @@ const DRAG_NO_DROP_CLS = 'fjs-no-drop';
1046
1046
  const DRAG_NO_MOVE_CLS = 'fjs-no-move';
1047
1047
  const ERROR_DROP_CLS = 'fjs-error-drop';
1048
1048
 
1049
- /**
1050
- * @typedef { { id: String, components: Array<any> } } FormRow
1049
+ /**
1050
+ * @typedef { { id: String, components: Array<any> } } FormRow
1051
1051
  */
1052
1052
 
1053
1053
  class Dragging {
1054
- /**
1055
- * @constructor
1056
- *
1057
- * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
1058
- * @param { import('../../core/FormLayouter').default } formLayouter
1059
- * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
1060
- * @param { import('../../core/EventBus').default } eventBus
1061
- * @param { import('../modeling/Modeling').default } modeling
1054
+ /**
1055
+ * @constructor
1056
+ *
1057
+ * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
1058
+ * @param { import('../../core/FormLayouter').default } formLayouter
1059
+ * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
1060
+ * @param { import('../../core/EventBus').default } eventBus
1061
+ * @param { import('../modeling/Modeling').default } modeling
1062
1062
  */
1063
1063
  constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling) {
1064
1064
  this._formFieldRegistry = formFieldRegistry;
@@ -1068,13 +1068,13 @@ class Dragging {
1068
1068
  this._modeling = modeling;
1069
1069
  }
1070
1070
 
1071
- /**
1072
- * Calculcates position in form schema given the dropped place.
1073
- *
1074
- * @param { FormRow } targetRow
1075
- * @param { any } targetFormField
1076
- * @param { HTMLElement } sibling
1077
- * @returns { number }
1071
+ /**
1072
+ * Calculcates position in form schema given the dropped place.
1073
+ *
1074
+ * @param { FormRow } targetRow
1075
+ * @param { any } targetFormField
1076
+ * @param { HTMLElement } sibling
1077
+ * @returns { number }
1078
1078
  */
1079
1079
  getTargetIndex(targetRow, targetFormField, sibling) {
1080
1080
  /** @type HTMLElement */
@@ -1176,8 +1176,8 @@ class Dragging {
1176
1176
  }
1177
1177
  }
1178
1178
 
1179
- /**
1180
- * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
1179
+ /**
1180
+ * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
1181
1181
  */
1182
1182
  createDragulaInstance(options) {
1183
1183
  const {
@@ -1422,7 +1422,7 @@ function DebugColumns(props) {
1422
1422
  return null;
1423
1423
  }
1424
1424
  return jsxRuntime.jsx("div", {
1425
- style: "width: fit-content;\r padding: 2px 6px;\r height: 16px;\r background: var(--color-blue-205-100-95);\r display: flex;\r justify-content: center;\r align-items: center;\r position: absolute;\r bottom: -2px;\r z-index: 2;\r font-size: 10px;\r right: 3px;",
1425
+ style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
1426
1426
  class: "fjs-debug-columns",
1427
1427
  children: (field.layout || {}).columns || 'auto'
1428
1428
  });
@@ -2469,10 +2469,10 @@ function updateRow(formField, rowId) {
2469
2469
  }
2470
2470
 
2471
2471
  class AddFormFieldHandler {
2472
- /**
2473
- * @constructor
2474
- * @param { import('../../../FormEditor').default } formEditor
2475
- * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2472
+ /**
2473
+ * @constructor
2474
+ * @param { import('../../../FormEditor').default } formEditor
2475
+ * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2476
2476
  */
2477
2477
  constructor(formEditor, formFieldRegistry) {
2478
2478
  this._formEditor = formEditor;
@@ -2533,10 +2533,10 @@ class AddFormFieldHandler {
2533
2533
  AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
2534
2534
 
2535
2535
  class EditFormFieldHandler {
2536
- /**
2537
- * @constructor
2538
- * @param { import('../../../FormEditor').default } formEditor
2539
- * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2536
+ /**
2537
+ * @constructor
2538
+ * @param { import('../../../FormEditor').default } formEditor
2539
+ * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2540
2540
  */
2541
2541
  constructor(formEditor, formFieldRegistry) {
2542
2542
  this._formEditor = formEditor;
@@ -2599,10 +2599,10 @@ class EditFormFieldHandler {
2599
2599
  EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
2600
2600
 
2601
2601
  class MoveFormFieldHandler {
2602
- /**
2603
- * @constructor
2604
- * @param { import('../../../FormEditor').default } formEditor
2605
- * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2602
+ /**
2603
+ * @constructor
2604
+ * @param { import('../../../FormEditor').default } formEditor
2605
+ * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2606
2606
  */
2607
2607
  constructor(formEditor, formFieldRegistry) {
2608
2608
  this._formEditor = formEditor;
@@ -2691,10 +2691,10 @@ class MoveFormFieldHandler {
2691
2691
  MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
2692
2692
 
2693
2693
  class RemoveFormFieldHandler {
2694
- /**
2695
- * @constructor
2696
- * @param { import('../../../FormEditor').default } formEditor
2697
- * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2694
+ /**
2695
+ * @constructor
2696
+ * @param { import('../../../FormEditor').default } formEditor
2697
+ * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2698
2698
  */
2699
2699
  constructor(formEditor, formFieldRegistry) {
2700
2700
  this._formEditor = formEditor;
@@ -2754,9 +2754,9 @@ class RemoveFormFieldHandler {
2754
2754
  RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
2755
2755
 
2756
2756
  class UpdateIdClaimHandler {
2757
- /**
2758
- * @constructor
2759
- * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2757
+ /**
2758
+ * @constructor
2759
+ * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2760
2760
  */
2761
2761
  constructor(formFieldRegistry) {
2762
2762
  this._formFieldRegistry = formFieldRegistry;
@@ -2789,9 +2789,9 @@ class UpdateIdClaimHandler {
2789
2789
  UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
2790
2790
 
2791
2791
  class UpdateKeyClaimHandler {
2792
- /**
2793
- * @constructor
2794
- * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2792
+ /**
2793
+ * @constructor
2794
+ * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
2795
2795
  */
2796
2796
  constructor(formFieldRegistry) {
2797
2797
  this._formFieldRegistry = formFieldRegistry;
@@ -3141,8 +3141,8 @@ class ValidateBehavior extends CommandInterceptor {
3141
3141
  constructor(eventBus) {
3142
3142
  super(eventBus);
3143
3143
 
3144
- /**
3145
- * Remove custom validation if <validationType> is about to be added.
3144
+ /**
3145
+ * Remove custom validation if <validationType> is about to be added.
3146
3146
  */
3147
3147
  // @ts-ignore-next-line
3148
3148
  this.preExecute('formField.edit', function (context) {
@@ -3687,10 +3687,10 @@ class PaletteRenderer {
3687
3687
  });
3688
3688
  }
3689
3689
 
3690
- /**
3691
- * Attach the palette to a parent node.
3692
- *
3693
- * @param {HTMLElement} container
3690
+ /**
3691
+ * Attach the palette to a parent node.
3692
+ *
3693
+ * @param {HTMLElement} container
3694
3694
  */
3695
3695
  attachTo(container) {
3696
3696
  if (!container) {
@@ -3710,8 +3710,8 @@ class PaletteRenderer {
3710
3710
  this._eventBus.fire('palette.attach');
3711
3711
  }
3712
3712
 
3713
- /**
3714
- * Detach the palette from its parent node.
3713
+ /**
3714
+ * Detach the palette from its parent node.
3715
3715
  */
3716
3716
  detach() {
3717
3717
  const parentNode = this._container.parentNode;
@@ -6068,11 +6068,11 @@ function prefixId$1(id) {
6068
6068
  return `bio-properties-panel-${id}`;
6069
6069
  }
6070
6070
 
6071
- /**
6072
- * @param {string} type
6073
- * @param {boolean} [strict]
6074
- *
6075
- * @returns {any}
6071
+ /**
6072
+ * @param {string} type
6073
+ * @param {boolean} [strict]
6074
+ *
6075
+ * @returns {any}
6076
6076
  */
6077
6077
  function getService(type, strict) {}
6078
6078
  const PropertiesPanelContext = preact.createContext({
@@ -6161,8 +6161,8 @@ const PropertiesPanelHeaderProvider = {
6161
6161
  }
6162
6162
  };
6163
6163
 
6164
- /**
6165
- * Provide placeholders for empty and multiple state.
6164
+ /**
6165
+ * Provide placeholders for empty and multiple state.
6166
6166
  */
6167
6167
  const PropertiesPanelPlaceholderProvider = {
6168
6168
  getEmpty: () => {
@@ -6234,10 +6234,10 @@ function useService (type, strict) {
6234
6234
  return getService(type, strict);
6235
6235
  }
6236
6236
 
6237
- /**
6238
- * Retrieve list of variables from the form schema.
6239
- *
6240
- * @returns { string[] } list of variables used in form schema
6237
+ /**
6238
+ * Retrieve list of variables from the form schema.
6239
+ *
6240
+ * @returns { string[] } list of variables used in form schema
6241
6241
  */
6242
6242
  function useVariables() {
6243
6243
  const form = useService('formEditor');
@@ -7514,7 +7514,7 @@ function Label(props) {
7514
7514
  id,
7515
7515
  label: 'Label',
7516
7516
  setValue,
7517
- validate: validateFactory(getValue())
7517
+ validate: validateFactory(getValue(), entry => entry.label)
7518
7518
  });
7519
7519
  }
7520
7520
  function Value$1(props) {
@@ -7540,7 +7540,7 @@ function Value$1(props) {
7540
7540
  id,
7541
7541
  label: 'Value',
7542
7542
  setValue,
7543
- validate: validateFactory(getValue())
7543
+ validate: validateFactory(getValue(), entry => entry.value)
7544
7544
  });
7545
7545
  }
7546
7546
 
@@ -7630,14 +7630,14 @@ function Value(props) {
7630
7630
 
7631
7631
  // helpers //////////
7632
7632
 
7633
- /**
7634
- * Returns copy of object with updated value.
7635
- *
7636
- * @param {Object} properties
7637
- * @param {string} key
7638
- * @param {string} value
7639
- *
7640
- * @returns {Object}
7633
+ /**
7634
+ * Returns copy of object with updated value.
7635
+ *
7636
+ * @param {Object} properties
7637
+ * @param {string} key
7638
+ * @param {string} value
7639
+ *
7640
+ * @returns {Object}
7641
7641
  */
7642
7642
  function updateValue(properties, key, value) {
7643
7643
  return {
@@ -7646,14 +7646,14 @@ function updateValue(properties, key, value) {
7646
7646
  };
7647
7647
  }
7648
7648
 
7649
- /**
7650
- * Returns copy of object with updated key.
7651
- *
7652
- * @param {Object} properties
7653
- * @param {string} oldKey
7654
- * @param {string} newKey
7655
- *
7656
- * @returns {Object}
7649
+ /**
7650
+ * Returns copy of object with updated key.
7651
+ *
7652
+ * @param {Object} properties
7653
+ * @param {string} oldKey
7654
+ * @param {string} newKey
7655
+ *
7656
+ * @returns {Object}
7657
7657
  */
7658
7658
  function updateKey(properties, oldKey, newKey) {
7659
7659
  return Object.entries(properties).reduce((newProperties, entry) => {
@@ -7782,13 +7782,13 @@ function StaticValuesSourceEntry(props) {
7782
7782
  const addEntry = e => {
7783
7783
  e.stopPropagation();
7784
7784
  const index = values.length + 1;
7785
- const entry = getIndexedEntry(index);
7785
+ const entry = getIndexedEntry(index, values);
7786
7786
  editField(field, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.STATIC], arrayAdd(values, values.length, entry));
7787
7787
  };
7788
7788
  const removeEntry = entry => {
7789
7789
  editField(field, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.STATIC], minDash.without(values, entry));
7790
7790
  };
7791
- const validateFactory = key => {
7791
+ const validateFactory = (key, getValue) => {
7792
7792
  return value => {
7793
7793
  if (value === key) {
7794
7794
  return;
@@ -7796,7 +7796,7 @@ function StaticValuesSourceEntry(props) {
7796
7796
  if (minDash.isUndefined(value) || !value.length) {
7797
7797
  return 'Must not be empty.';
7798
7798
  }
7799
- const isValueAssigned = values.find(entry => entry.value === value);
7799
+ const isValueAssigned = values.find(entry => getValue(entry) === value);
7800
7800
  if (isValueAssigned) {
7801
7801
  return 'Must be unique.';
7802
7802
  }
@@ -7827,17 +7827,23 @@ function StaticValuesSourceEntry(props) {
7827
7827
 
7828
7828
  // helper
7829
7829
 
7830
- function getIndexedEntry(index) {
7830
+ function getIndexedEntry(index, values) {
7831
7831
  const entry = {
7832
7832
  label: 'Value',
7833
7833
  value: 'value'
7834
7834
  };
7835
+ while (labelOrValueIsAlreadyAssignedForIndex(index, values)) {
7836
+ index++;
7837
+ }
7835
7838
  if (index > 1) {
7836
7839
  entry.label += ` ${index}`;
7837
7840
  entry.value += `${index}`;
7838
7841
  }
7839
7842
  return entry;
7840
7843
  }
7844
+ function labelOrValueIsAlreadyAssignedForIndex(index, values) {
7845
+ return values.some(existingEntry => existingEntry.label === `Value ${index}` || existingEntry.value === `value${index}`);
7846
+ }
7841
7847
 
7842
7848
  function AdornerEntry(props) {
7843
7849
  const {
@@ -8289,8 +8295,8 @@ function ValuesGroups(field, editField) {
8289
8295
  };
8290
8296
  const valuesSourceId = `${fieldId}-valuesSource`;
8291
8297
 
8292
- /**
8293
- * @type {Array<Group|ListGroup>}
8298
+ /**
8299
+ * @type {Array<Group|ListGroup>}
8294
8300
  */
8295
8301
  const groups = [{
8296
8302
  id: valuesSourceId,
@@ -8338,12 +8344,13 @@ function CustomValuesGroup(field, editField) {
8338
8344
  }
8339
8345
  const addEntry = event => {
8340
8346
  event.stopPropagation();
8341
- const index = Object.keys(properties).length + 1;
8342
- const key = `key${index}`,
8343
- value = 'value';
8347
+ let index = Object.keys(properties).length + 1;
8348
+ while (`key${index}` in properties) {
8349
+ index++;
8350
+ }
8344
8351
  editField(field, ['properties'], {
8345
8352
  ...properties,
8346
- [key]: value
8353
+ [`key${index}`]: 'value'
8347
8354
  });
8348
8355
  };
8349
8356
  const validateFactory = key => {
@@ -8391,13 +8398,13 @@ function CustomValuesGroup(field, editField) {
8391
8398
 
8392
8399
  // helpers //////////
8393
8400
 
8394
- /**
8395
- * Returns copy of object without key.
8396
- *
8397
- * @param {Object} properties
8398
- * @param {string} oldKey
8399
- *
8400
- * @returns {Object}
8401
+ /**
8402
+ * Returns copy of object without key.
8403
+ *
8404
+ * @param {Object} properties
8405
+ * @param {string} oldKey
8406
+ *
8407
+ * @returns {Object}
8401
8408
  */
8402
8409
  function removeKey(properties, oldKey) {
8403
8410
  return Object.entries(properties).reduce((newProperties, entry) => {
@@ -8511,9 +8518,9 @@ function FormPropertiesPanel(props) {
8511
8518
  }, []);
8512
8519
  hooks$1.useLayoutEffect(() => {
8513
8520
  const onFieldChanged = () => {
8514
- /**
8515
- * TODO(pinussilvestrus): update with actual updated element,
8516
- * once we have a proper updater/change support
8521
+ /**
8522
+ * TODO(pinussilvestrus): update with actual updated element,
8523
+ * once we have a proper updater/change support
8517
8524
  */
8518
8525
  _update(selection.get() || schema);
8519
8526
  };
@@ -8564,10 +8571,10 @@ class PropertiesPanelRenderer {
8564
8571
  });
8565
8572
  }
8566
8573
 
8567
- /**
8568
- * Attach the properties panel to a parent node.
8569
- *
8570
- * @param {HTMLElement} container
8574
+ /**
8575
+ * Attach the properties panel to a parent node.
8576
+ *
8577
+ * @param {HTMLElement} container
8571
8578
  */
8572
8579
  attachTo(container) {
8573
8580
  if (!container) {
@@ -8587,8 +8594,8 @@ class PropertiesPanelRenderer {
8587
8594
  this._eventBus.fire('propertiesPanel.attach');
8588
8595
  }
8589
8596
 
8590
- /**
8591
- * Detach the properties panel from its parent node.
8597
+ /**
8598
+ * Detach the properties panel from its parent node.
8592
8599
  */
8593
8600
  detach() {
8594
8601
  const parentNode = this._container.parentNode;
@@ -8626,48 +8633,48 @@ var ExpressionLanguageModule = {
8626
8633
 
8627
8634
  const ids = new Ids([32, 36, 1]);
8628
8635
 
8629
- /**
8630
- * @typedef { import('./types').Injector } Injector
8631
- * @typedef { import('./types').Module } Module
8632
- * @typedef { import('./types').Schema } Schema
8633
- *
8634
- * @typedef { import('./types').FormEditorOptions } FormEditorOptions
8635
- * @typedef { import('./types').FormEditorProperties } FormEditorProperties
8636
- *
8637
- * @typedef { {
8638
- * properties: FormEditorProperties,
8639
- * schema: Schema
8640
- * } } State
8641
- *
8642
- * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
8643
- * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
8644
- * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
8636
+ /**
8637
+ * @typedef { import('./types').Injector } Injector
8638
+ * @typedef { import('./types').Module } Module
8639
+ * @typedef { import('./types').Schema } Schema
8640
+ *
8641
+ * @typedef { import('./types').FormEditorOptions } FormEditorOptions
8642
+ * @typedef { import('./types').FormEditorProperties } FormEditorProperties
8643
+ *
8644
+ * @typedef { {
8645
+ * properties: FormEditorProperties,
8646
+ * schema: Schema
8647
+ * } } State
8648
+ *
8649
+ * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
8650
+ * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
8651
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
8645
8652
  */
8646
8653
 
8647
- /**
8648
- * The form editor.
8654
+ /**
8655
+ * The form editor.
8649
8656
  */
8650
8657
  class FormEditor {
8651
- /**
8652
- * @constructor
8653
- * @param {FormEditorOptions} options
8658
+ /**
8659
+ * @constructor
8660
+ * @param {FormEditorOptions} options
8654
8661
  */
8655
8662
  constructor(options = {}) {
8656
- /**
8657
- * @public
8658
- * @type {OnEventType}
8663
+ /**
8664
+ * @public
8665
+ * @type {OnEventType}
8659
8666
  */
8660
8667
  this.on = this._onEvent;
8661
8668
 
8662
- /**
8663
- * @public
8664
- * @type {String}
8669
+ /**
8670
+ * @public
8671
+ * @type {String}
8665
8672
  */
8666
8673
  this._id = ids.next();
8667
8674
 
8668
- /**
8669
- * @private
8670
- * @type {Element}
8675
+ /**
8676
+ * @private
8677
+ * @type {Element}
8671
8678
  */
8672
8679
  this._container = formJsViewer.createFormContainer();
8673
8680
  this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -8678,15 +8685,15 @@ class FormEditor {
8678
8685
  properties = {}
8679
8686
  } = options;
8680
8687
 
8681
- /**
8682
- * @private
8683
- * @type {any}
8688
+ /**
8689
+ * @private
8690
+ * @type {any}
8684
8691
  */
8685
8692
  this.exporter = exporter;
8686
8693
 
8687
- /**
8688
- * @private
8689
- * @type {State}
8694
+ /**
8695
+ * @private
8696
+ * @type {State}
8690
8697
  */
8691
8698
  this._state = {
8692
8699
  properties,
@@ -8715,10 +8722,10 @@ class FormEditor {
8715
8722
  this._detach(false);
8716
8723
  }
8717
8724
 
8718
- /**
8719
- * @param {Schema} schema
8720
- *
8721
- * @return {Promise<{ warnings: Array<any> }>}
8725
+ /**
8726
+ * @param {Schema} schema
8727
+ *
8728
+ * @return {Promise<{ warnings: Array<any> }>}
8722
8729
  */
8723
8730
  importSchema(schema) {
8724
8731
  return new Promise((resolve, reject) => {
@@ -8747,15 +8754,15 @@ class FormEditor {
8747
8754
  });
8748
8755
  }
8749
8756
 
8750
- /**
8751
- * @returns {Schema}
8757
+ /**
8758
+ * @returns {Schema}
8752
8759
  */
8753
8760
  saveSchema() {
8754
8761
  return this.getSchema();
8755
8762
  }
8756
8763
 
8757
- /**
8758
- * @returns {Schema}
8764
+ /**
8765
+ * @returns {Schema}
8759
8766
  */
8760
8767
  getSchema() {
8761
8768
  const {
@@ -8764,8 +8771,8 @@ class FormEditor {
8764
8771
  return exportSchema(schema, this.exporter, formJsViewer.schemaVersion);
8765
8772
  }
8766
8773
 
8767
- /**
8768
- * @param {Element|string} parentNode
8774
+ /**
8775
+ * @param {Element|string} parentNode
8769
8776
  */
8770
8777
  attachTo(parentNode) {
8771
8778
  if (!parentNode) {
@@ -8783,10 +8790,10 @@ class FormEditor {
8783
8790
  this._detach();
8784
8791
  }
8785
8792
 
8786
- /**
8787
- * @internal
8788
- *
8789
- * @param {boolean} [emit]
8793
+ /**
8794
+ * @internal
8795
+ *
8796
+ * @param {boolean} [emit]
8790
8797
  */
8791
8798
  _detach(emit = true) {
8792
8799
  const container = this._container,
@@ -8800,9 +8807,9 @@ class FormEditor {
8800
8807
  parentNode.removeChild(container);
8801
8808
  }
8802
8809
 
8803
- /**
8804
- * @param {any} property
8805
- * @param {any} value
8810
+ /**
8811
+ * @param {any} property
8812
+ * @param {any} value
8806
8813
  */
8807
8814
  setProperty(property, value) {
8808
8815
  const properties = minDash.set(this._getState().properties, [property], value);
@@ -8811,21 +8818,21 @@ class FormEditor {
8811
8818
  });
8812
8819
  }
8813
8820
 
8814
- /**
8815
- * @param {string} type
8816
- * @param {Function} handler
8821
+ /**
8822
+ * @param {string} type
8823
+ * @param {Function} handler
8817
8824
  */
8818
8825
  off(type, handler) {
8819
8826
  this.get('eventBus').off(type, handler);
8820
8827
  }
8821
8828
 
8822
- /**
8823
- * @internal
8824
- *
8825
- * @param {FormEditorOptions} options
8826
- * @param {Element} container
8827
- *
8828
- * @returns {Injector}
8829
+ /**
8830
+ * @internal
8831
+ *
8832
+ * @param {FormEditorOptions} options
8833
+ * @param {Element} container
8834
+ *
8835
+ * @returns {Injector}
8829
8836
  */
8830
8837
  _createInjector(options, container) {
8831
8838
  const {
@@ -8847,22 +8854,22 @@ class FormEditor {
8847
8854
  }, core, ...modules, ...additionalModules]);
8848
8855
  }
8849
8856
 
8850
- /**
8851
- * @internal
8857
+ /**
8858
+ * @internal
8852
8859
  */
8853
8860
  _emit(type, data) {
8854
8861
  this.get('eventBus').fire(type, data);
8855
8862
  }
8856
8863
 
8857
- /**
8858
- * @internal
8864
+ /**
8865
+ * @internal
8859
8866
  */
8860
8867
  _getState() {
8861
8868
  return this._state;
8862
8869
  }
8863
8870
 
8864
- /**
8865
- * @internal
8871
+ /**
8872
+ * @internal
8866
8873
  */
8867
8874
  _setState(state) {
8868
8875
  this._state = {
@@ -8872,15 +8879,15 @@ class FormEditor {
8872
8879
  this._emit('changed', this._getState());
8873
8880
  }
8874
8881
 
8875
- /**
8876
- * @internal
8882
+ /**
8883
+ * @internal
8877
8884
  */
8878
8885
  _getModules() {
8879
8886
  return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, formJsViewer.MarkdownModule, PropertiesPanelModule];
8880
8887
  }
8881
8888
 
8882
- /**
8883
- * @internal
8889
+ /**
8890
+ * @internal
8884
8891
  */
8885
8892
  _onEvent(type, priority, handler) {
8886
8893
  this.get('eventBus').on(type, priority, handler);