@lion/form-core - npm Package Compare versions

Comparing version 0.18.0 to 0.18.1

docs/overview.md

@@ -23,5 +23,5 @@ # Systems >> Form >> Overview ||10
 
-- [formatting/parsing/serializing](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
-- Advanced [validation](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/validate.md) possibilities.
-- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/interaction-states.md).
+- [formatting/parsing/serializing](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
+- Advanced [validation](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/validate.md) possibilities.
+- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/interaction-states.md).
 - Provision of labels and help texts in an easy, declarative manner.
@@ -35,20 +35,20 @@ - Accessibility out of the box.
 
-- [LionInput](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input/overview.md), a wrapper for `<input>`.
-- [LionTextarea](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
-- [LionSelect](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/select/overview.md), a wrapper for `<select>`.
+- [LionInput](https://github.com/ing-bank/lion/blob/master/docs/components/input/overview.md), a wrapper for `<input>`.
+- [LionTextarea](https://github.com/ing-bank/lion/blob/master/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
+- [LionSelect](https://github.com/ing-bank/lion/blob/master/docs/components/select/overview.md), a wrapper for `<select>`.
 
 ### Custom fields (wrappers)
 
-Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like:
+Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/master/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like:
 
-- [LionCombobox](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/combobox/overview.md), a custom implementation of a combobox.
-- [LionDate](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
-- [LionDatepicker](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
-- [LionListbox](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/listbox/overview.md), a custom implementation of a listbox.
-- [LionInputAmount](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
-- [LionInputEmail](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
-- [LionInputIban](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
-- [LionInputRange](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
-- [LionInputStepper](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
-- [LionSelectRich](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/select-rich/overview.md), an alternative for `<select>` with multiline options.
+- [LionCombobox](https://github.com/ing-bank/lion/blob/master/docs/components/combobox/overview.md), a custom implementation of a combobox.
+- [LionDate](https://github.com/ing-bank/lion/blob/master/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
+- [LionDatepicker](https://github.com/ing-bank/lion/blob/master/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
+- [LionListbox](https://github.com/ing-bank/lion/blob/master/docs/components/listbox/overview.md), a custom implementation of a listbox.
+- [LionInputAmount](https://github.com/ing-bank/lion/blob/master/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
+- [LionInputEmail](https://github.com/ing-bank/lion/blob/master/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
+- [LionInputIban](https://github.com/ing-bank/lion/blob/master/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
+- [LionInputRange](https://github.com/ing-bank/lion/blob/master/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
+- [LionInputStepper](https://github.com/ing-bank/lion/blob/master/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
+- [LionSelectRich](https://github.com/ing-bank/lion/blob/master/docs/components/select-rich/overview.md), an alternative for `<select>` with multiline options.
 
@@ -59,6 +59,6 @@ ### Choice Input Fields
 
-- [LionCheckbox](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`.
+- [LionCheckbox](https://github.com/ing-bank/lion/blob/master/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`.
 - LionOption, an alternative for `<option>`.
-- [LionRadio](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
-- [LionSwitch](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/switch/overview.md), a custom implementation of a switch.
+- [LionRadio](https://github.com/ing-bank/lion/blob/master/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
+- [LionSwitch](https://github.com/ing-bank/lion/blob/master/docs/components/switch/overview.md), a custom implementation of a switch.
 
@@ -75,12 +75,12 @@ Which contains the following features:
 
-- [LionFieldset](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
-- [LionForm](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
-- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
-- [LionRadioGroup](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.
+- [LionFieldset](https://github.com/ing-bank/lion/blob/master/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
+- [LionForm](https://github.com/ing-bank/lion/blob/master/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
+- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/master/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
+- [LionRadioGroup](https://github.com/ing-bank/lion/blob/master/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.
 
 ## Other Resources
 
-- [Model Value](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/model-value.md)
-- [Formatting and parsing](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/formatting-and-parsing.md)
-- [Interaction states](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/interaction-states.md)
-- [Validation System](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/validate.md)
+- [Model Value](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/model-value.md)
+- [Formatting and parsing](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/formatting-and-parsing.md)
+- [Interaction states](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/interaction-states.md)
+- [Validation System](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/validate.md)

package.json

 {
   "name": "@lion/form-core",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "Form-core contains all essential building blocks for creating form fields and fieldsets",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -23,5 +23,5 @@ # Systems >> Form >> Overview ||10
 
-- [formatting/parsing/serializing](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
-- Advanced [validation](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/validate.md) possibilities.
-- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/interaction-states.md).
+- [formatting/parsing/serializing](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
+- Advanced [validation](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/validate.md) possibilities.
+- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/interaction-states.md).
 - Provision of labels and help texts in an easy, declarative manner.
@@ -35,20 +35,20 @@ - Accessibility out of the box.
 
-- [LionInput](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input/overview.md), a wrapper for `<input>`.
-- [LionTextarea](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
-- [LionSelect](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/select/overview.md), a wrapper for `<select>`.
+- [LionInput](https://github.com/ing-bank/lion/blob/master/docs/components/input/overview.md), a wrapper for `<input>`.
+- [LionTextarea](https://github.com/ing-bank/lion/blob/master/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
+- [LionSelect](https://github.com/ing-bank/lion/blob/master/docs/components/select/overview.md), a wrapper for `<select>`.
 
 ### Custom fields (wrappers)
 
-Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like:
+Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/master/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like:
 
-- [LionCombobox](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/combobox/overview.md), a custom implementation of a combobox.
-- [LionDate](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
-- [LionDatepicker](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
-- [LionListbox](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/listbox/overview.md), a custom implementation of a listbox.
-- [LionInputAmount](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
-- [LionInputEmail](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
-- [LionInputIban](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
-- [LionInputRange](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
-- [LionInputStepper](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
-- [LionSelectRich](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/select-rich/overview.md), an alternative for `<select>` with multiline options.
+- [LionCombobox](https://github.com/ing-bank/lion/blob/master/docs/components/combobox/overview.md), a custom implementation of a combobox.
+- [LionDate](https://github.com/ing-bank/lion/blob/master/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
+- [LionDatepicker](https://github.com/ing-bank/lion/blob/master/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
+- [LionListbox](https://github.com/ing-bank/lion/blob/master/docs/components/listbox/overview.md), a custom implementation of a listbox.
+- [LionInputAmount](https://github.com/ing-bank/lion/blob/master/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
+- [LionInputEmail](https://github.com/ing-bank/lion/blob/master/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
+- [LionInputIban](https://github.com/ing-bank/lion/blob/master/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
+- [LionInputRange](https://github.com/ing-bank/lion/blob/master/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
+- [LionInputStepper](https://github.com/ing-bank/lion/blob/master/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
+- [LionSelectRich](https://github.com/ing-bank/lion/blob/master/docs/components/select-rich/overview.md), an alternative for `<select>` with multiline options.
 
@@ -59,6 +59,6 @@ ### Choice Input Fields
 
-- [LionCheckbox](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`.
+- [LionCheckbox](https://github.com/ing-bank/lion/blob/master/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`.
 - LionOption, an alternative for `<option>`.
-- [LionRadio](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
-- [LionSwitch](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/switch/overview.md), a custom implementation of a switch.
+- [LionRadio](https://github.com/ing-bank/lion/blob/master/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
+- [LionSwitch](https://github.com/ing-bank/lion/blob/master/docs/components/switch/overview.md), a custom implementation of a switch.
 
@@ -75,12 +75,12 @@ Which contains the following features:
 
-- [LionFieldset](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
-- [LionForm](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
-- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
-- [LionRadioGroup](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.
+- [LionFieldset](https://github.com/ing-bank/lion/blob/master/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
+- [LionForm](https://github.com/ing-bank/lion/blob/master/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
+- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/master/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
+- [LionRadioGroup](https://github.com/ing-bank/lion/blob/master/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.
 
 ## Other Resources
 
-- [Model Value](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/model-value.md)
-- [Formatting and parsing](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/formatting-and-parsing.md)
-- [Interaction states](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/interaction-states.md)
-- [Validation System](https://github.com/ing-bank/lion/blob/9ebc79431bfdcacfd0d9c9b6457c1a99686a6a47/docs/fundamentals/systems/form/validate.md)
+- [Model Value](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/model-value.md)
+- [Formatting and parsing](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/formatting-and-parsing.md)
+- [Interaction states](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/interaction-states.md)
+- [Validation System](https://github.com/ing-bank/lion/blob/master/docs/fundamentals/systems/form/validate.md)

src/registration/FormRegistrarMixin.js

@@ -225,7 +225,18 @@ // eslint-disable-next-line max-classes-per-file
 
-      // Check for siblings to determine the right order to insert into formElements
-      // If there is no next sibling, index is -1
+      // Check for DOM order to determine the right order to insert into formElements
+      // If there is no other element, index is -1 (e.g. add it to the end)
       let indexToInsertAt = -1;
       if (this.formElements && Array.isArray(this.formElements)) {
-        indexToInsertAt = this.formElements.indexOf(child.nextElementSibling);
+        // we start comparing from the end of the array as it's the most likely position where the element will be added
+        for (const [i, formElement] of this.formElements.entries()) {
+          // compareDocumentPosition returns a bitmask
+          // eslint-disable-next-line no-bitwise
+          if (formElement.compareDocumentPosition(child) & Node.DOCUMENT_POSITION_FOLLOWING) {
+            // nothing as child is after formElement in DOM
+          } else {
+            // first time child is NOT after formElement in DOM we insert it
+            indexToInsertAt = i;
+            break;
+          }
+        }
       }
@@ -232,0 +243,0 @@ this.addFormElement(child, indexToInsertAt);

src/validate/Validator.d.ts

 /**
- * @typedef {import('../../types/validate/validate').FeedbackMessageData} FeedbackMessageData
- * @typedef {import('../../types/validate/validate').ValidatorParam} ValidatorParam
- * @typedef {import('../../types/validate/validate').ValidatorConfig} ValidatorConfig
- * @typedef {import('../../types/validate/validate').ValidatorOutcome} ValidatorOutcome
- * @typedef {import('../../types/validate/validate').ValidatorName} ValidatorName
- * @typedef {import('../../types/validate/validate').ValidationType} ValidationType
+ * @typedef {import('../../types/validate').FeedbackMessageData} FeedbackMessageData
+ * @typedef {import('../../types/validate').ValidatorParam} ValidatorParam
+ * @typedef {import('../../types/validate').ValidatorConfig} ValidatorConfig
+ * @typedef {import('../../types/validate').ValidatorOutcome} ValidatorOutcome
+ * @typedef {import('../../types/validate').ValidatorName} ValidatorName
+ * @typedef {import('../../types/validate').ValidationType} ValidationType
  * @typedef {import('../FormControlMixin').FormControlHost} FormControlHost
@@ -43,3 +43,3 @@ */
      */
-    static getMessage(data?: Partial<import("../../types/validate/validate").FeedbackMessageData> | undefined): Promise<string | Element>;
+    static getMessage(data?: Partial<import("../../types/validate").FeedbackMessageData> | undefined): Promise<string | Element>;
     /**
@@ -49,3 +49,3 @@ * @param {ValidatorParam} [param]
      */
-    constructor(param?: ValidatorParam, config?: import("../../types/validate/validate").ValidatorConfig | undefined);
+    constructor(param?: ValidatorParam, config?: import("../../types/validate").ValidatorConfig | undefined);
     /** @type {ValidatorParam} */
@@ -56,3 +56,3 @@ __param: ValidatorParam;
     /** @type {ValidationType} */
-    type: any;
+    type: ValidationType;
     /**
@@ -70,3 +70,3 @@ * The function that returns a validity outcome. When we need to show feedback,
      */
-    execute(modelValue: any, param?: ValidatorParam, config?: import("../../types/validate/validate").ValidatorConfig | undefined): ValidatorOutcome | Promise<ValidatorOutcome>;
+    execute(modelValue: any, param?: ValidatorParam, config?: import("../../types/validate").ValidatorConfig | undefined): ValidatorOutcome | Promise<ValidatorOutcome>;
     /**
@@ -103,4 +103,4 @@ * The first argument of the constructor, for instance 3 in `new MinLength(3)`. Will
      */
-    set config(arg: import("../../types/validate/validate").ValidatorConfig);
-    get config(): import("../../types/validate/validate").ValidatorConfig;
+    set config(arg: import("../../types/validate").ValidatorConfig);
+    get config(): import("../../types/validate").ValidatorConfig;
     /**
@@ -132,3 +132,3 @@ * This is a protected method that usually should not be overridden. It is called by ValidateMixin
      */
-    protected _getMessage(data?: Partial<import("../../types/validate/validate").FeedbackMessageData> | undefined): Promise<string | Element>;
+    protected _getMessage(data?: Partial<import("../../types/validate").FeedbackMessageData> | undefined): Promise<string | Element>;
     /**
@@ -179,8 +179,8 @@ * Validators are allowed to have knowledge about FormControls.
 }
-export type FeedbackMessageData = import('../../types/validate/validate').FeedbackMessageData;
-export type ValidatorParam = import('../../types/validate/validate').ValidatorParam;
-export type ValidatorConfig = import('../../types/validate/validate').ValidatorConfig;
-export type ValidatorOutcome = import('../../types/validate/validate').ValidatorOutcome;
-export type ValidatorName = import('../../types/validate/validate').ValidatorName;
-export type ValidationType = any;
+export type FeedbackMessageData = import('../../types/validate').FeedbackMessageData;
+export type ValidatorParam = import('../../types/validate').ValidatorParam;
+export type ValidatorConfig = import('../../types/validate').ValidatorConfig;
+export type ValidatorOutcome = import('../../types/validate').ValidatorOutcome;
+export type ValidatorName = import('../../types/validate').ValidatorName;
+export type ValidationType = import('../../types/validate').ValidationType;
 export type FormControlHost = import('../FormControlMixin').FormControlHost;

src/validate/Validator.js

 /**
- * @typedef {import('../../types/validate/validate').FeedbackMessageData} FeedbackMessageData
- * @typedef {import('../../types/validate/validate').ValidatorParam} ValidatorParam
- * @typedef {import('../../types/validate/validate').ValidatorConfig} ValidatorConfig
- * @typedef {import('../../types/validate/validate').ValidatorOutcome} ValidatorOutcome
- * @typedef {import('../../types/validate/validate').ValidatorName} ValidatorName
- * @typedef {import('../../types/validate/validate').ValidationType} ValidationType
+ * @typedef {import('../../types/validate').FeedbackMessageData} FeedbackMessageData
+ * @typedef {import('../../types/validate').ValidatorParam} ValidatorParam
+ * @typedef {import('../../types/validate').ValidatorConfig} ValidatorConfig
+ * @typedef {import('../../types/validate').ValidatorOutcome} ValidatorOutcome
+ * @typedef {import('../../types/validate').ValidatorName} ValidatorName
+ * @typedef {import('../../types/validate').ValidationType} ValidationType
  * @typedef {import('../FormControlMixin').FormControlHost} FormControlHost
@@ -9,0 +9,0 @@ */

test-suites/FormRegistrationMixins.suite.js

@@ -1,2 +0,2 @@
-import { LitElement } from '@lion/core';
+import { LitElement, uuid } from '@lion/core';
 import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
@@ -74,2 +74,70 @@ import { FormRegisteringMixin } from '../src/registration/FormRegisteringMixin.js';
 
+    it('maintains dom order if there are arbitrary none-form elements between registering elements', async () => {
+      const el = /** @type {RegistrarClass} */ (
+        await fixture(html`
+          <${parentTag}>
+            <${childTag} pos="1"></${childTag}>
+            <something-other></something-other>
+            <${childTag} pos="2"></${childTag}>
+          </${parentTag}>
+        `)
+      );
+
+      const newField = await fixture(html`
+        <${childTag} pos="insert-between-1-and-2"></${childTag}>
+      `);
+      el.insertBefore(newField, el.children[1]);
+
+      expect(el.formElements.length).to.equal(3);
+      expect(el.formElements.map(fel => fel.getAttribute('pos'))).to.deep.equal([
+        '1',
+        'insert-between-1-and-2',
+        '2',
+      ]);
+    });
+
+    it('maintains dom order if there are arbitrary none-form group elements between registering elements', async () => {
+      /**
+       * @param {string} tagString
+       */
+      function lazyDefine(tagString) {
+        class Extension extends RegisteringClass {}
+        customElements.define(tagString, Extension);
+      }
+
+      const [tagName1, tagName2, tagName3] = [uuid('lazy-1'), uuid('lazy-2'), uuid('lazy-3')];
+      const [tag1, tag2, tag3] = [tagName1, tagName2, tagName3].map(name => unsafeStatic(name));
+
+      const el = /** @type {RegistrarClass} */ (
+        await fixture(html`
+          <${parentTag} .name=${'test-group'}>
+            <div role="group">
+              <${tag1} .name=${'one'}></${tag1}>
+            </div>
+            <div role="group">
+              <${tag2} .name=${'two'}></${tag2}>
+              <${tag3} .name=${'three'}></${tag3}>
+            </div>
+          </${parentTag}>
+        `)
+      );
+      expect(el.formElements.length).to.equal(0);
+
+      lazyDefine(tagName3);
+      await el.updateComplete;
+      expect(el.formElements.map(fel => fel.localName)).to.deep.equal([tagName3]);
+
+      lazyDefine(tagName1);
+      await el.updateComplete;
+      expect(el.formElements.map(fel => fel.localName)).to.deep.equal([tagName1, tagName3]);
+
+      lazyDefine(tagName2);
+      await el.updateComplete;
+      expect(el.formElements.map(fel => fel.localName)).to.deep.equal([
+        tagName1,
+        tagName2,
+        tagName3,
+      ]);
+    });
+
     it('supports nested registration parents', async () => {
@@ -151,12 +219,15 @@ const el = /** @type {RegistrarClass} */ (
         await fixture(html`
-        <${childTag}></${childTag}>
-      `)
+          <${childTag} pos="inserted-before-1"></${childTag}>
+        `)
       );
-      newField.setAttribute('pos', 'inserted-before-1');
+      // newField.setAttribute('pos', 'inserted-before-1');
       el.insertBefore(newField, el.children[1]);
 
       expect(el.formElements.length).to.equal(4);
-      const secondChild = /** @type {RegisteringClass & prop} */ (el.children[1]);
-      expect(secondChild.getAttribute('pos')).to.equal('inserted-before-1');
-      expect(el.formElements[1].getAttribute('pos')).to.equal('inserted-before-1');
+      expect(el.formElements.map(fel => fel.getAttribute('pos'))).to.deep.equal([
+        '0',
+        'inserted-before-1',
+        '1',
+        '2',
+      ]);
 
@@ -166,6 +237,5 @@ /** INSERT field before the pos=0 (e.g. at the top) */
         await fixture(html`
-        <${childTag}></${childTag}>
-      `)
+           <${childTag} pos="inserted-before-0"></${childTag}>
+        `)
       );
-      topField.setAttribute('pos', 'inserted-before-0');
       el.insertBefore(topField, el.children[0]);
@@ -176,3 +246,9 @@
       expect(firstChild.getAttribute('pos')).to.equal('inserted-before-0');
-      expect(el.formElements[0].getAttribute('pos')).to.equal('inserted-before-0');
+      expect(el.formElements.map(fel => fel.getAttribute('pos'))).to.deep.equal([
+        'inserted-before-0',
+        '0',
+        'inserted-before-1',
+        '1',
+        '2',
+      ]);
     });
@@ -179,0 +255,0 @@

types/validate/validate.d.ts

 import { FormControlHost } from '../../src/FormControlMixin';
-export { ValidationType } from '../../types/ValidateMixinTypes';
+import { ValidationType } from './ValidateMixinTypes';
 
@@ -4,0 +4,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1838700

increased by0.03%

Lines of code

49039

increased by0.14%

No dependency changes