@umbraco-cms/backoffice 14.2.0 → 14.3.0-rc

package/dist-cms/packages/core/validation/controllers/{bind-validation-message-to-form-control.controller.js → bind-server-validation-to-form-control.controller.js}

@@ -1,9 +1,13 @@
 import { UMB_VALIDATION_CONTEXT } from '../context/validation.context-token.js';
-import { jsonStringComparison } from '../../../../libs/observable-api/index.js';
+import { defaultMemoization } from '../../../../libs/observable-api/index.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 const ctrlSymbol = Symbol();
 const observeSymbol = Symbol();
-export class UmbBindValidationMessageToFormControl extends UmbControllerBase {
+/**
+ * Binds server validation to a form control.
+ * This controller will add a custom error to the form control if the validation context has any messages for the specified data path.
+ */
+export class UmbBindServerValidationToFormControl extends UmbControllerBase {
     #context;
     #control;
     #controlValidator;
@@ -17,7 +21,7 @@ export class UmbBindValidationMessageToFormControl extends UmbControllerBase {
         }
         else {
             // If not valid lets see if we should remove server validation [NL]
-            if (!jsonStringComparison(this.#value, value)) {
+            if (!defaultMemoization(this.#value, value)) {
                 this.#value = value;
                 // Only remove server validations from validation context [NL]
                 this.#messages.forEach((message) => {
@@ -47,7 +51,7 @@ export class UmbBindValidationMessageToFormControl extends UmbControllerBase {
     }
     #setup() {
         if (!this.#controlValidator) {
-            this.#controlValidator = this.#control.addValidator('customError', () => this.#messages.map((x) => x.message).join(', '), () => !this.#isValid);
+            this.#controlValidator = this.#control.addValidator('customError', () => this.#messages.map((x) => x.body).join(', '), () => !this.#isValid);
             //this.#control.addEventListener('change', this.#onControlChange);
             // Legacy event, used by some controls:
             //this.#control.addEventListener('property-value-change', this.#onControlChange);

package/dist-cms/packages/core/validation/controllers/form-control-validator.controller.d.ts

@@ -2,6 +2,10 @@ import type { UmbValidator } from '../interfaces/index.js';
 import type { UmbFormControlMixinInterface } from '../mixins/form-control.mixin.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+/**
+ * Bind a Form Controls validation state to the validation context.
+ * This validator will validate the form control and add messages to the validation context if the form control is invalid.
+ */
 export declare class UmbFormControlValidator extends UmbControllerBase implements UmbValidator {
     #private;
     constructor(host: UmbControllerHost, formControl: UmbFormControlMixinInterface<unknown>, dataPath?: string);

package/dist-cms/packages/core/validation/controllers/form-control-validator.controller.js

@@ -2,6 +2,10 @@ import { UMB_VALIDATION_CONTEXT } from '../context/validation.context-token.js';
 import { UmbValidationInvalidEvent } from '../events/validation-invalid.event.js';
 import { UmbValidationValidEvent } from '../events/validation-valid.event.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+/**
+ * Bind a Form Controls validation state to the validation context.
+ * This validator will validate the form control and add messages to the validation context if the form control is invalid.
+ */
 export class UmbFormControlValidator extends UmbControllerBase {
     // The path to the data that this validator is validating.
     #dataPath;

package/dist-cms/packages/core/validation/controllers/index.d.ts

@@ -1,3 +1,5 @@
-export * from './bind-validation-message-to-form-control.controller.js';
-export * from './observe-validation-state.controller.js';
+export * from './bind-server-validation-to-form-control.controller.js';
 export * from './form-control-validator.controller.js';
+export * from './observe-validation-state.controller.js';
+export * from './server-model-validator.context-token.js';
+export * from './server-model-validator.context.js';

package/dist-cms/packages/core/validation/controllers/index.js

@@ -1,3 +1,5 @@
-export * from './bind-validation-message-to-form-control.controller.js';
-export * from './observe-validation-state.controller.js';
+export * from './bind-server-validation-to-form-control.controller.js';
 export * from './form-control-validator.controller.js';
+export * from './observe-validation-state.controller.js';
+export * from './server-model-validator.context-token.js';
+export * from './server-model-validator.context.js';

package/dist-cms/packages/core/validation/controllers/observe-validation-state.controller.d.ts

@@ -1,5 +1,5 @@
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 export declare class UmbObserveValidationStateController extends UmbControllerBase {
-    constructor(host: UmbControllerHost, dataPath: string | undefined, callback: (messages: boolean) => void);
+    constructor(host: UmbControllerHost, dataPath: string | undefined, callback: (messages: boolean) => void, controllerAlias?: string);
 }

package/dist-cms/packages/core/validation/controllers/observe-validation-state.controller.js

@@ -1,10 +1,9 @@
 import { UMB_VALIDATION_CONTEXT } from '../context/validation.context-token.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
-const CtrlSymbol = Symbol();
 const ObserveSymbol = Symbol();
 export class UmbObserveValidationStateController extends UmbControllerBase {
-    constructor(host, dataPath, callback) {
-        super(host, CtrlSymbol);
+    constructor(host, dataPath, callback, controllerAlias) {
+        super(host, controllerAlias ?? 'observeValidationState_' + dataPath);
         if (dataPath) {
             this.consumeContext(UMB_VALIDATION_CONTEXT, (context) => {
                 this.observe(context.messages.hasMessagesOfPathAndDescendant(dataPath), callback, ObserveSymbol);

package/dist-cms/packages/core/validation/controllers/server-model-validator.context-token.d.ts

@@ -0,0 +1,3 @@
+import type { UmbServerModelValidatorContext } from './server-model-validator.context.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+export declare const UMB_SERVER_MODEL_VALIDATOR_CONTEXT: UmbContextToken<UmbServerModelValidatorContext, UmbServerModelValidatorContext>;

package/dist-cms/packages/core/validation/controllers/server-model-validator.context-token.js

@@ -0,0 +1,2 @@
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+export const UMB_SERVER_MODEL_VALIDATOR_CONTEXT = new UmbContextToken('UmbServerModelValidationContext');

package/dist-cms/packages/core/validation/{context/server-model-validation.context.d.ts → controllers/server-model-validator.context.d.ts}

@@ -1,15 +1,12 @@
-import type { UmbValidationMessageTranslator } from '../translators/validation-message-translator.interface.js';
 import type { UmbValidator } from '../interfaces/validator.interface.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 import type { UmbDataSourceResponse } from '../../repository/index.js';
-export declare class UmbServerModelValidationContext extends UmbContextBase<UmbServerModelValidationContext> implements UmbValidator {
+export declare class UmbServerModelValidatorContext extends UmbContextBase<UmbServerModelValidatorContext> implements UmbValidator {
     #private;
     getData(): any;
     constructor(host: UmbControllerHost);
     askServerForValidation(data: unknown, requestPromise: Promise<UmbDataSourceResponse<string>>): Promise<void>;
-    addTranslator(translator: UmbValidationMessageTranslator): void;
-    removeTranslator(translator: UmbValidationMessageTranslator): void;
     get isValid(): boolean;
     validate(): Promise<void>;
     reset(): void;

package/dist-cms/packages/core/validation/controllers/server-model-validator.context.js

@@ -0,0 +1,105 @@
+import { UmbDataPathPropertyValueQuery } from '../utils/index.js';
+import { UMB_VALIDATION_CONTEXT } from '../context/validation.context-token.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY } from '../const.js';
+import { UMB_SERVER_MODEL_VALIDATOR_CONTEXT } from './server-model-validator.context-token.js';
+import { UmbContextBase } from '../../../../libs/class-api/index.js';
+export class UmbServerModelValidatorContext extends UmbContextBase {
+    #validatePromise;
+    #validatePromiseResolve;
+    #context;
+    #isValid = true;
+    #data;
+    getData() {
+        return this.#data;
+    }
+    constructor(host) {
+        super(host, UMB_SERVER_MODEL_VALIDATOR_CONTEXT);
+        this.consumeContext(UMB_VALIDATION_CONTEXT, (context) => {
+            if (this.#context) {
+                this.#context.removeValidator(this);
+            }
+            this.#context = context;
+            context.addValidator(this);
+            // Run translators?
+        }).asPromise();
+    }
+    async askServerForValidation(data, requestPromise) {
+        this.#context?.messages.removeMessagesByType('server');
+        this.#isValid = false;
+        //this.#validatePromiseReject?.();
+        this.#validatePromise = new Promise((resolve) => {
+            this.#validatePromiseResolve = resolve;
+        });
+        // Store this state of the data for translator look ups:
+        this.#data = data;
+        // Ask the server for validation...
+        const { error } = await requestPromise;
+        this.#isValid = error ? false : true;
+        if (this.#isValid) {
+            // Send data to context for translation:
+            this.#context?.setTranslationData(undefined);
+        }
+        else {
+            if (!this.#context) {
+                throw new Error('No context available for translation.');
+            }
+            // Send data to context for translation:
+            this.#context.setTranslationData(data);
+            // We are missing some typing here, but we will just go wild with 'as any': [NL]
+            const errorBody = error.body;
+            // Check if there are validation errors, since the error might be a generic ApiError
+            if (errorBody?.errors) {
+                Object.keys(errorBody.errors).forEach((path) => {
+                    //serverFeedback.push({ path, messages: errorBody.errors[path] });
+                    this.#context.messages.addMessages('server', path, errorBody.errors[path]);
+                });
+            }
+            // Check if there are missing properties:
+            if (errorBody?.missingProperties) {
+                // Retrieve the variants of he send data, as those are the once we will declare as missing properties:
+                // Temporary fix for missing properties, as we currently get one for each variant, but we do not know which variant it is for: [NL]
+                const uniqueMissingProperties = [...new Set(errorBody.missingProperties)];
+                uniqueMissingProperties.forEach((alias) => {
+                    this.#data.variants.forEach((variant) => {
+                        const path = `$.values[${UmbDataPathPropertyValueQuery({
+                            alias: alias,
+                            culture: variant.culture,
+                            segment: variant.segment,
+                        })}].value`;
+                        this.#context.messages.addMessages('server', path, [UMB_VALIDATION_EMPTY_LOCALIZATION_KEY]);
+                    });
+                });
+            }
+        }
+        this.#validatePromiseResolve?.();
+        this.#validatePromiseResolve = undefined;
+    }
+    get isValid() {
+        return this.#isValid;
+    }
+    async validate() {
+        if (this.#validatePromise) {
+            await this.#validatePromise;
+        }
+        return this.#isValid ? Promise.resolve() : Promise.reject();
+    }
+    reset() { }
+    focusFirstInvalidElement() { }
+    hostConnected() {
+        super.hostConnected();
+        if (this.#context) {
+            this.#context.addValidator(this);
+        }
+    }
+    hostDisconnected() {
+        super.hostDisconnected();
+        if (this.#context) {
+            this.#context.removeValidator(this);
+            this.#context = undefined;
+        }
+    }
+    destroy() {
+        // TODO: make sure we destroy things properly:
+        super.destroy();
+    }
+}

package/dist-cms/packages/core/validation/directives/bind-to-validation.lit-directive.d.ts

@@ -0,0 +1,34 @@
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import { AsyncDirective, type ElementPart } from '../../../../external/lit/index.js';
+/**
+ * The `bind to validation` directive connects the Form Control Element to closets Validation Context.
+ */
+declare class UmbBindToValidationDirective extends AsyncDirective {
+    #private;
+    render(host: UmbControllerHost, dataPath?: string, value?: unknown): symbol;
+    update(part: ElementPart, args: Parameters<typeof this.render>): symbol;
+    disconnected(): void;
+}
+/**
+ * @description
+ * A Lit directive, which binds the validation state of the element to the Validation Context.
+ *
+ * The minimal binding can be established by just providing a host element:
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this)}>`;
+ * ```
+ * But can be extended with a dataPath, which is the path to the data holding the value. (if no server validation in this context, then this can be fictive and is then just used internal for remembering the validation state despite the element begin removed from the DOM.)
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this, '$.headline')}>`;
+ * ```
+ *
+ * Additional the value can be provided, which is then used to remove a server validation state, if the value is changed.
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this, '$.headline', this.headlineValue)}>`;
+ * ```
+ */
+export declare const umbBindToValidation: (host: UmbControllerHost, dataPath?: string | undefined, value?: unknown) => import("lit-html/directive.js").DirectiveResult<typeof UmbBindToValidationDirective>;
+export {};

package/dist-cms/packages/core/validation/directives/bind-to-validation.lit-directive.js

@@ -0,0 +1,69 @@
+import { AsyncDirective, directive, nothing } from '../../../../external/lit/index.js';
+import { UmbBindServerValidationToFormControl, UmbFormControlValidator } from '../index.js';
+/**
+ * The `bind to validation` directive connects the Form Control Element to closets Validation Context.
+ */
+class UmbBindToValidationDirective extends AsyncDirective {
+    #host;
+    #dataPath;
+    #el;
+    #validator;
+    #msgBinder;
+    // For Directives their arguments have to be defined on the Render method, despite them, not being used by the render method. In this case they are used by the update method.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(host, dataPath, value) {
+        return nothing;
+    }
+    update(part, args) {
+        if (!part.element)
+            return nothing;
+        if (this.#el !== part.element || this.#host !== args[0] || this.#dataPath !== args[1]) {
+            this.#host = args[0];
+            this.#dataPath = args[1];
+            this.#el = part.element;
+            if (!this.#msgBinder && this.#dataPath) {
+                this.#msgBinder = new UmbBindServerValidationToFormControl(this.#host, this.#el, this.#dataPath);
+            }
+            this.#validator = new UmbFormControlValidator(this.#host, this.#el, this.#dataPath);
+        }
+        // If we have a msgBinder, then lets update the value no matter the other conditions.
+        if (this.#msgBinder) {
+            this.#msgBinder.value = args[2];
+        }
+        return nothing;
+    }
+    disconnected() {
+        if (this.#validator) {
+            this.#validator?.destroy();
+            this.#validator = undefined;
+        }
+        if (this.#msgBinder) {
+            this.#msgBinder.destroy();
+            this.#msgBinder = undefined;
+        }
+        this.#el = undefined;
+    }
+}
+/**
+ * @description
+ * A Lit directive, which binds the validation state of the element to the Validation Context.
+ *
+ * The minimal binding can be established by just providing a host element:
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this)}>`;
+ * ```
+ * But can be extended with a dataPath, which is the path to the data holding the value. (if no server validation in this context, then this can be fictive and is then just used internal for remembering the validation state despite the element begin removed from the DOM.)
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this, '$.headline')}>`;
+ * ```
+ *
+ * Additional the value can be provided, which is then used to remove a server validation state, if the value is changed.
+ * @example:
+ * ```js
+ * html`<input ${umbBindToValidation(this, '$.headline', this.headlineValue)}>`;
+ * ```
+ */
+export const umbBindToValidation = directive(UmbBindToValidationDirective);
+//export type { UmbFocusDirective };

package/dist-cms/packages/core/validation/index.d.ts

@@ -1,5 +1,8 @@
+export * from './components/form-validation-message.element.js';
+export * from './const.js';
 export * from './context/index.js';
 export * from './controllers/index.js';
+export * from './directives/bind-to-validation.lit-directive.js';
 export * from './events/index.js';
 export * from './interfaces/index.js';
 export * from './mixins/index.js';

package/dist-cms/packages/core/validation/index.js

@@ -1,5 +1,8 @@
+export * from './components/form-validation-message.element.js';
+export * from './const.js';
 export * from './context/index.js';
 export * from './controllers/index.js';
+export * from './directives/bind-to-validation.lit-directive.js';
 export * from './events/index.js';
 export * from './interfaces/index.js';
 export * from './mixins/index.js';

package/dist-cms/packages/core/validation/mixins/form-control.mixin.d.ts

@@ -1,11 +1,12 @@
 import { type LitElement } from '../../../../external/lit/index.js';
 import type { HTMLElementConstructor } from '../../../../libs/extension-api/index.js';
 type UmbNativeFormControlElement = Pick<HTMLObjectElement, 'validity' | 'checkValidity' | 'validationMessage' | 'setCustomValidity'> & HTMLElement;
-type FlagTypes = 'badInput' | 'customError' | 'patternMismatch' | 'rangeOverflow' | 'rangeUnderflow' | 'stepMismatch' | 'tooLong' | 'tooShort' | 'typeMismatch' | 'valueMissing' | 'badInput' | 'valid';
+type FlagTypes = 'customError' | 'badInput' | 'patternMismatch' | 'rangeOverflow' | 'rangeUnderflow' | 'stepMismatch' | 'tooLong' | 'tooShort' | 'typeMismatch' | 'valueMissing' | 'valid';
 export interface UmbFormControlValidatorConfig {
     flagKey: FlagTypes;
     getMessageMethod: () => string;
     checkMethod: () => boolean;
+    weight: number;
 }
 export interface UmbFormControlMixinInterface<ValueType> extends HTMLElement {
     addValidator: (flagKey: FlagTypes, getMessageMethod: () => string, checkMethod: () => boolean) => UmbFormControlValidatorConfig;
@@ -27,6 +28,7 @@ export declare abstract class UmbFormControlMixinElement<ValueType> extends LitE
     addValidator: (flagKey: FlagTypes, getMessageMethod: () => string, checkMethod: () => boolean) => UmbFormControlValidatorConfig;
     removeValidator: (obj: UmbFormControlValidatorConfig) => void;
     protected addFormControlElement(element: UmbNativeFormControlElement): void;
+    protected removeFormControlElement(element: UmbNativeFormControlElement): void;
     protected getFormElement(): HTMLElement | undefined | null;
     focusFirstInvalidElement(): void;
     get value(): ValueType;
@@ -40,10 +42,11 @@ export declare abstract class UmbFormControlMixinElement<ValueType> extends LitE
     pristine: boolean;
 }
 /**
+ * @mixin
  * The mixin allows a custom element to participate in HTML forms.
  * @param {object} superClass - superclass to be extended.
- * @param defaultValue
- * @mixin
+ * @param {object} defaultValue - Default value for the form control.
+ * @returns {Function} - The mixin class.
  */
 export declare function UmbFormControlMixin<ValueType = FormData | FormDataEntryValue, T extends HTMLElementConstructor<LitElement> = HTMLElementConstructor<LitElement>, DefaultValueType = undefined>(superClass: T, defaultValue?: DefaultValueType): HTMLElementConstructor<UmbFormControlMixinElement<ValueType | DefaultValueType>> & T;
 export {};

package/dist-cms/packages/core/validation/mixins/form-control.mixin.js

@@ -7,11 +7,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbValidationInvalidEvent } from '../events/validation-invalid.event.js';
 import { UmbValidationValidEvent } from '../events/validation-valid.event.js';
 import { property } from '../../../../external/lit/index.js';
+const WeightedErrorFlagTypes = [
+    'customError',
+    'valueMissing',
+    'badInput',
+    'typeMismatch',
+    'patternMismatch',
+    'rangeOverflow',
+    'rangeUnderflow',
+    'stepMismatch',
+    'tooLong',
+    'tooShort',
+];
 /**
+ * @mixin
  * The mixin allows a custom element to participate in HTML forms.
  * @param {object} superClass - superclass to be extended.
- * @param defaultValue
- * @mixin
+ * @param {object} defaultValue - Default value for the form control.
+ * @returns {Function} - The mixin class.
  */
 export function UmbFormControlMixin(superClass, defaultValue) {
     class UmbFormControlMixinClass extends superClass {
@@ -67,11 +80,15 @@ export function UmbFormControlMixin(superClass, defaultValue) {
             this.#form = null;
             this.#validators = [];
             this.#formCtrlElements = [];
+            this.#runValidatorsCallback = () => this._runValidators;
             this.#onFormSubmit = () => {
                 this.pristine = false;
             };
             this._internals = this.attachInternals();
             this.addEventListener('blur', () => {
+                /*if (e.composedPath().some((x) => x === this)) {
+                    return;
+                }*/
                 this.pristine = false;
                 this.checkValidity();
             });
@@ -80,7 +97,7 @@ export function UmbFormControlMixin(superClass, defaultValue) {
          * Get internal form element.
          * This has to be implemented to provide a FormControl Element of choice for the given context. The element is used as anchor for validation-messages.
          * @function getFormElement
-         * @returns {HTMLElement | undefined | null}
+         * @returns {HTMLElement | undefined | null} - Returns the form element or undefined if not found.
          */
         getFormElement() {
             return this.#formCtrlElements.find((el) => el.validity.valid === false);
@@ -88,7 +105,7 @@ export function UmbFormControlMixin(superClass, defaultValue) {
         /**
          * Focus first element that is invalid.
          * @function focusFirstInvalidElement
-         * @returns {HTMLElement | undefined}
+         * @returns {HTMLElement | undefined} - Returns the first invalid element or undefined if no invalid elements are found.
          */
         focusFirstInvalidElement() {
             const firstInvalid = this.#formCtrlElements.find((el) => el.validity.valid === false);
@@ -126,14 +143,18 @@ export function UmbFormControlMixin(superClass, defaultValue) {
          * @param {FlagTypes} flagKey the type of validation.
          * @param {method} getMessageMethod method to retrieve relevant message. Is executed every time the validator is re-executed.
          * @param {method} checkMethod method to determine if this validator should invalidate this form control. Return true if this should prevent submission.
+         * @returns {UmbFormControlValidatorConfig} - The added validator configuration.
          */
         addValidator(flagKey, getMessageMethod, checkMethod) {
             const validator = {
                 flagKey: flagKey,
                 getMessageMethod: getMessageMethod,
                 checkMethod: checkMethod,
+                weight: WeightedErrorFlagTypes.indexOf(flagKey),
             };
             this.#validators.push(validator);
+            // Sort validators based on the WeightedErrorFlagTypes order. [NL]
+            this.#validators.sort((a, b) => (a.weight > b.weight ? 1 : b.weight > a.weight ? -1 : 0));
             return validator;
         }
         /**
@@ -147,19 +168,17 @@ export function UmbFormControlMixin(superClass, defaultValue) {
                 this.#validators.splice(index, 1);
             }
         }
+        #runValidatorsCallback;
         /**
          * @function addFormControlElement
          * @description Important notice if adding a native form control then ensure that its value and thereby validity is updated when value is changed from the outside.
-         * @param element {UmbNativeFormControlElement} - element to validate and include as part of this form association.
+         * @param {UmbNativeFormControlElement} element - element to validate and include as part of this form control association.
+         * @returns {void}
          */
         addFormControlElement(element) {
             this.#formCtrlElements.push(element);
-            element.addEventListener(UmbValidationInvalidEvent.TYPE, () => {
-                this._runValidators();
-            });
-            element.addEventListener(UmbValidationValidEvent.TYPE, () => {
-                this._runValidators();
-            });
+            element.addEventListener(UmbValidationInvalidEvent.TYPE, this.#runValidatorsCallback);
+            element.addEventListener(UmbValidationValidEvent.TYPE, this.#runValidatorsCallback);
             // If we are in validationMode/'touched'/not-pristine then we need to validate this newly added control. [NL]
             if (this._pristine === false) {
                 element.checkValidity();
@@ -167,10 +186,26 @@ export function UmbFormControlMixin(superClass, defaultValue) {
                 this._runValidators();
             }
         }
+        /**
+         * @function removeFormControlElement
+         * @param {UmbNativeFormControlElement} element - element to remove as part of this form controls associated controls.
+         * @returns {void}
+         */
+        removeFormControlElement(element) {
+            const index = this.#formCtrlElements.indexOf(element);
+            if (index !== -1) {
+                this.#formCtrlElements.splice(index, 1);
+                element.removeEventListener(UmbValidationInvalidEvent.TYPE, this.#runValidatorsCallback);
+                element.removeEventListener(UmbValidationValidEvent.TYPE, this.#runValidatorsCallback);
+                if (this._pristine === false) {
+                    this._runValidators();
+                }
+            }
+        }
         /**
          * @function setCustomValidity
          * @description Set custom validity state, set to empty string to remove the custom message.
-         * @param message {string} - The message to be shown
+         * @param {string} message - The message to be shown
          * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity|HTMLObjectElement:setCustomValidity}
          */
         setCustomValidity(message) {
@@ -191,33 +226,43 @@ export function UmbFormControlMixin(superClass, defaultValue) {
          */
         _runValidators() {
             this.#validity = {};
-            const messages = new Set();
+            //const messages: Set<string> = new Set();
+            let message = undefined;
             let innerFormControlEl = undefined;
-            // Loop through inner native form controls to adapt their validityState. [NL]
-            this.#formCtrlElements.forEach((formCtrlEl) => {
-                let key;
-                for (key in formCtrlEl.validity) {
-                    if (key !== 'valid' && formCtrlEl.validity[key]) {
-                        this.#validity[key] = true;
-                        messages.add(formCtrlEl.validationMessage);
-                        innerFormControlEl ??= formCtrlEl;
-                    }
-                }
-            });
             // Loop through custom validators, currently its intentional to have them overwritten native validity. but might need to be reconsidered (This current way enables to overwrite with custom messages) [NL]
-            this.#validators.forEach((validator) => {
+            this.#validators.some((validator) => {
                 if (validator.checkMethod()) {
                     this.#validity[validator.flagKey] = true;
-                    messages.add(validator.getMessageMethod());
+                    //messages.add(validator.getMessageMethod());
+                    message = validator.getMessageMethod();
+                    return true;
                 }
+                return false;
             });
+            if (!message) {
+                // Loop through inner native form controls to adapt their validityState. [NL]
+                this.#formCtrlElements.some((formCtrlEl) => {
+                    let key;
+                    for (key in formCtrlEl.validity) {
+                        if (key !== 'valid' && formCtrlEl.validity[key]) {
+                            this.#validity[key] = true;
+                            //messages.add(formCtrlEl.validationMessage);
+                            message = formCtrlEl.validationMessage;
+                            innerFormControlEl ??= formCtrlEl;
+                            return true;
+                        }
+                    }
+                    return false;
+                });
+            }
             const hasError = Object.values(this.#validity).includes(true);
             // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState#valid
             this.#validity.valid = !hasError;
             // Transfer the new validityState to the ElementInternals. [NL]
             this._internals.setValidity(this.#validity, 
             // Turn messages into an array and join them with a comma. [NL]:
-            [...messages].join(', '), innerFormControlEl ?? this.getFormElement() ?? undefined);
+            //[...messages].join(', '),
+            message, innerFormControlEl ?? this.getFormElement() ?? undefined);
             this.#dispatchValidationState();
         }
         #dispatchValidationState() {

package/dist-cms/packages/core/validation/translators/abstract-array-path-translator.controller.d.ts

@@ -0,0 +1,8 @@
+import { UmbValidationPathTranslatorBase } from './validation-path-translator-base.controller.js';
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+export declare abstract class UmbAbstractArrayValidationPathTranslator extends UmbValidationPathTranslatorBase {
+    #private;
+    constructor(host: UmbControllerHost, initialPathToMatch: string, queryMethod: (data: any) => string);
+    translate(path: string): string | false | undefined;
+    abstract getDataFromIndex(index: number): unknown | undefined;
+}

package/dist-cms/packages/core/validation/translators/abstract-array-path-translator.controller.js

@@ -0,0 +1,35 @@
+import { UmbValidationPathTranslatorBase } from './validation-path-translator-base.controller.js';
+export class UmbAbstractArrayValidationPathTranslator extends UmbValidationPathTranslatorBase {
+    #initialPathToMatch;
+    #queryMethod;
+    constructor(host, initialPathToMatch, queryMethod) {
+        super(host);
+        this.#initialPathToMatch = initialPathToMatch;
+        this.#queryMethod = queryMethod;
+    }
+    translate(path) {
+        if (!this._context)
+            return;
+        if (path.indexOf(this.#initialPathToMatch) !== 0) {
+            // We do not handle this path.
+            return false;
+        }
+        const pathEnd = path.indexOf(']');
+        if (pathEnd === -1) {
+            // We do not handle this path.
+            return false;
+        }
+        // retrieve the number from the message values index: [NL]
+        const index = parseInt(path.substring(this.#initialPathToMatch.length, pathEnd));
+        if (isNaN(index)) {
+            // index is not a number, this means its not a path we want to translate. [NL]
+            return false;
+        }
+        // Get the data from the validation request, the context holds that for us: [NL]
+        const data = this.getDataFromIndex(index);
+        if (!data)
+            return false;
+        // replace the values[ number ] with JSON-Path filter values[@.(...)], continues by the rest of the path:
+        return this.#initialPathToMatch + this.#queryMethod(data) + path.substring(path.indexOf(']'));
+    }
+}

package/dist-cms/packages/core/validation/translators/index.d.ts

@@ -1,2 +1,5 @@
-export type * from './validation-message-translator.interface.js';
-export * from './variant-values-validation-message-translator.controller.js';
+export * from './validation-path-translator-base.controller.js';
+export * from './abstract-array-path-translator.controller.js';
+export * from './variant-values-validation-path-translator.controller.js';
+export * from './variants-validation-path-translator.controller.js';
+export type * from './validation-message-path-translator.interface.js';

package/dist-cms/packages/core/validation/translators/index.js

@@ -1 +1,4 @@
-export * from './variant-values-validation-message-translator.controller.js';
+export * from './validation-path-translator-base.controller.js';
+export * from './abstract-array-path-translator.controller.js';
+export * from './variant-values-validation-path-translator.controller.js';
+export * from './variants-validation-path-translator.controller.js';