@umbraco-cms/backoffice 18.2.1 → 18.3.0-rc

package/dist-cms/packages/core/tree/view/table/table-tree-view.element.js

@@ -11,6 +11,11 @@ import { UmbTextStyles } from '../../../style/index.js';
 import { getItemFallbackIcon } from '../../../entity-item/index.js';
 import './tree-name-table-column-layout.element.js';
 import '../../../entity-action/index.js';
+/**
+ * Renders the items of the tree as rows of a table, with a column for the name, any columns declared by the
+ * `treeView` manifest, and the entity actions.
+ * @augments {UmbTreeViewElementBase<UmbTreeItemModel>}
+ */
 let UmbTableTreeViewElement = class UmbTableTreeViewElement extends UmbTreeViewElementBase {
     constructor() {
         super(...arguments);
@@ -132,12 +137,12 @@ let UmbTableTreeViewElement = class UmbTableTreeViewElement extends UmbTreeViewE
         const nameData = rows[idx].data.find((d) => d.columnAlias === 'name');
         if (nameData?.value?.href === href)
             return null;
-        const childrenIndicator = rows[idx].childrenIndicator;
+        const childrenIndicator = this.#getChildrenIndicator(treeItem, href);
         return [
             ...rows.slice(0, idx),
             {
                 ...rows[idx],
-                childrenIndicator: childrenIndicator ? { ...childrenIndicator, href } : undefined,
+                childrenIndicator,
                 data: rows[idx].data.map((d) => (d.columnAlias === 'name' ? { ...d, value: { ...d.value, href } } : d)),
             },
             ...rows.slice(idx + 1),
@@ -202,6 +207,40 @@ let UmbTableTreeViewElement = class UmbTableTreeViewElement extends UmbTreeViewE
         }, '_observeCurrentPageItems');
         this.observe(this._treeContext?.hideTreeItemActions, (value) => (this._hideTreeItemActions = value ?? false), '_observeHideTreeItemActions');
     }
+    /**
+     * Whether the item shows an expand symbol, which leads further into the tree.
+     * @param {UmbTreeItemModel} item - The tree item the row represents.
+     * @returns {boolean} True when the item shows the expand symbol.
+     */
+    _showExpandSymbol(item) {
+        return item.hasChildren;
+    }
+    /**
+     * Where activating the expand symbol of the item leads. Without a path, it asks the tree to drill into the item.
+     * @param {UmbTreeItemModel} _item - The tree item the row represents.
+     * @param {string | undefined} path - The path of the item, when the row is not selectable.
+     * @returns {string | undefined} The path to navigate to.
+     */
+    _getExpandPath(_item, path) {
+        return path;
+    }
+    /**
+     * Renders the expand symbol of the item, or `undefined` for the default.
+     * @param {UmbTreeItemModel} _item - The tree item the row represents.
+     * @returns {TemplateResult | undefined} The symbol to render.
+     */
+    _renderExpandSymbol(_item) {
+        return undefined;
+    }
+    #getChildrenIndicator(item, path) {
+        if (!this._showExpandSymbol(item))
+            return undefined;
+        return {
+            href: this._getExpandPath(item, path),
+            onOpen: () => this._treeContext?.open?.(item),
+            renderExpandSymbol: () => this._renderExpandSymbol(item) ?? html `<uui-symbol-expand></uui-symbol-expand>`,
+        };
+    }
     #buildTableColumns() {
         const nameColumn = {
             name: this.localize.term('general_name'),
@@ -240,16 +279,17 @@ let UmbTableTreeViewElement = class UmbTableTreeViewElement extends UmbTreeViewE
             }
             return { columnAlias: col.field, value: rawValue };
         });
-        const onOpen = item.hasChildren ? () => this._treeContext?.open?.(item) : undefined;
+        const childrenIndicator = this.#getChildrenIndicator(item, href);
+        const onOpen = childrenIndicator?.onOpen;
         return {
             id,
             icon,
             entityType: item.entityType,
-            childrenIndicator: item.hasChildren ? { href, onOpen } : undefined,
+            childrenIndicator,
             selectable: !noAccess && this._isSelectableItem(item),
             // select-only disables all row interaction, which would leave no way to drill into an item with
             // children while a selection is in progress.
-            selectOnly: item.hasChildren ? false : undefined,
+            selectOnly: childrenIndicator ? false : undefined,
             active: isActive,
             data: [
                 {

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

@@ -11,20 +11,21 @@ export class UmbBindServerValidationToFormControl extends UmbControllerBase {
     #control;
     #controlValidator;
     #messages = [];
-    #isValid = false;
+    #isValid;
+    // Keep track of the value set, so we can determine if we should remove server validation when the value changes. [NL]
+    #gotValue = false;
     #value;
     set value(value) {
-        if (this.#isValid) {
-            // If valid lets just parse it on [NL]
+        if (this.#isValid || !this.#gotValue) {
+            // If valid, or set value set, lets just parse it on [NL]
             this.#value = value;
+            this.#gotValue = true;
         }
         else {
             // If not valid lets see if we should remove server validation [NL]
-            if (!defaultMemoization(this.#value, value)) {
+            if (!defaultMemoization(this.#value, value) && this.#isValid === false) {
                 this.#value = value;
-                // Only remove server validations from validation context [NL]
-                const toRemove = this.#messages.filter((x) => x.type === 'server').map((msg) => msg.key);
-                this.#context?.messages?.removeMessageByKeys(toRemove);
+                this.#clear();
             }
         }
     }
@@ -35,11 +36,11 @@ export class UmbBindServerValidationToFormControl extends UmbControllerBase {
             this.#context = context;
             this.observe(context?.messages?.messagesOfNotTypeAndPath('client', dataPath), (messages) => {
                 this.#messages = messages ?? [];
-                this.#isValid = this.#messages.length === 0;
-                if (!this.#isValid) {
+                this.#isValid = messages === undefined ? undefined : this.#messages.length === 0;
+                if (this.#isValid === false) {
                     this.#setup();
                 }
-                else {
+                else if (this.#isValid === true) {
                     this.#demolish();
                 }
             }, observeSymbol);
@@ -47,23 +48,32 @@ export class UmbBindServerValidationToFormControl extends UmbControllerBase {
     }
     #setup() {
         if (!this.#controlValidator) {
-            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);
+            this.#controlValidator = this.#control.addValidator('customError', () => this.#messages.map((x) => x.body).join(', '), () => this.#isValid === false);
+            this.#value = this.#control.value;
+            this.#control.addEventListener('change', this.#onChange);
         }
         this.#control.checkValidity();
     }
     #demolish() {
         if (!this.#control || !this.#controlValidator)
             return;
+        this.#value = this.#control.value;
         this.#control.removeValidator(this.#controlValidator);
-        //this.#control.removeEventListener('change', this.#onControlChange);
-        // Legacy event, used by some controls:
-        //this.#control.removeEventListener('property-value-change', this.#onControlChange);
+        this.#control.removeEventListener('change', this.#onChange);
         this.#controlValidator = undefined;
         this.#control.checkValidity();
     }
+    #onChange = () => {
+        if (!defaultMemoization(this.#value, this.#control.value) && this.#isValid === false) {
+            this.#value = this.#control.value;
+            this.#clear();
+        }
+    };
+    #clear() {
+        // Only remove server validations from validation context [NL]
+        const toRemove = this.#messages.filter((x) => x.type === 'server').map((msg) => msg.key);
+        this.#context?.messages?.removeMessageByKeys(toRemove);
+    }
     validate() {
         //this.#isValid = this.#control.checkValidity();
         return this.#isValid ? Promise.resolve() : Promise.reject();
@@ -72,7 +82,7 @@ export class UmbBindServerValidationToFormControl extends UmbControllerBase {
      * Resets the validation state of this validator.
      */
     reset() {
-        this.#isValid = false;
+        this.#isValid = undefined;
         this.#control.pristine = true; // Make sure the control goes back into not-validation-mode/'untouched'/pristine state.
     }
     /*getMessages(): string[] {

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

@@ -20,9 +20,19 @@ export class UmbFormControlValidator extends UmbControllerBase {
                 this.#context.removeValidator(this);
             }
             this.#context = context;
+            // If we have a dataPath, we will let that determine the validity of the control, otherwise we will use the form control's validity state. [NL]
+            if (dataPath) {
+                this.#isValid = !context?.messages?.getHasMessagesOfPathAndDescendant(dataPath);
+            }
+            else {
+                this.#isValid = formControl.validity.valid;
+            }
             context?.addValidator(this);
-            // If we have a message already, then un-pristine the control:
-            if (dataPath && context?.messages?.getHasMessagesOfPathAndDescendant(dataPath)) {
+            // If valid by context, then let's make the component pristine, otherwise we will make it dirty, so that the validation message is shown instantly. [NL]
+            if (this.#isValid) {
+                formControl.pristine = true;
+            }
+            else {
                 formControl.pristine = false;
             }
         });

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

@@ -1,6 +1,8 @@
 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 './validation-clean-up-by-path.manager.js';
+export * from './validation-clean-up-by-unique.manager.js';
 export * from './validation-path-translation/index.js';
 export * from './validation.controller.js';
 export * from './value-validator/index.js';

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

@@ -1,6 +1,8 @@
 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 './validation-clean-up-by-path.manager.js';
+export * from './validation-clean-up-by-unique.manager.js';
 export * from './validation-path-translation/index.js';
 export * from './validation.controller.js';
 export * from './value-validator/index.js';

package/dist-cms/packages/core/validation/controllers/validation-clean-up-by-path.manager.d.ts

@@ -0,0 +1,44 @@
+import type { UmbValidationController } from './validation.controller.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbControllerAlias, UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { Observable } from '../../../../libs/observable-api/index.js';
+/**
+ * A method resolving the validation data path of a given item.
+ * The path must be a stable identity for the item — it must not change while the item is still present,
+ * otherwise it would look like the item was removed and a new one added in its place.
+ * Return undefined for items that should be ignored entirely.
+ */
+export type UmbValidationCleanUpByDataPathDataPathResolver<ItemType> = (item: ItemType) => string | undefined;
+/**
+ * Removes the validation messages of items that disappear from an observed array of items.
+ *
+ * Each item is identified by the validation data path returned for it by `dataPathResolver`. When an item
+ * that was previously present stops being present, the messages at its data path — and at any descendant
+ * path — are removed from the given Validation Context. Meaning anything nested inside a removed item's
+ * data (e.g. a Block nested inside a removed Block) goes away with it.
+ *
+ * Notice the first emission of the observed array only establishes the baseline, as it can not be known
+ * what was removed before this manager began observing.
+ * @example
+ * ```ts
+ * new UmbValidationCleanUpByPathManager<PropertyEditorSettingsProperty>(
+ * 	this,
+ * 	this.validationContext,
+ * 	this.properties,
+ * 	(property) => `$.values[${UmbDataPathPropertyValueQuery(property)}]`,
+ * );
+ * ```
+ */
+export declare class UmbValidationCleanUpByPathManager<ItemType = unknown> extends UmbControllerBase {
+    #private;
+    /**
+     * Creates an instance of UmbValidationCleanUpByPathManager.
+     * @param {UmbControllerHost} host - The host of this controller.
+     * @param {UmbValidationController} validationController - The Validation Context to remove messages from.
+     * @param {Observable<Array<ItemType> | undefined>} items - An Observable of the items to observe for removals.
+     * @param {UmbValidationCleanUpByDataPathDataPathResolver<ItemType>} dataPathResolver - Resolves the validation data path of a given item.
+     * @param {UmbControllerAlias} [controllerAlias] - An optional controller alias, enables replacing this manager with a new one.
+     */
+    constructor(host: UmbControllerHost, validationController: UmbValidationController, items: Observable<Array<ItemType> | undefined>, dataPathResolver: UmbValidationCleanUpByDataPathDataPathResolver<ItemType>, controllerAlias?: UmbControllerAlias);
+    destroy(): void;
+}

package/dist-cms/packages/core/validation/controllers/validation-clean-up-by-path.manager.js

@@ -0,0 +1,83 @@
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+/**
+ * Removes the validation messages of items that disappear from an observed array of items.
+ *
+ * Each item is identified by the validation data path returned for it by `dataPathResolver`. When an item
+ * that was previously present stops being present, the messages at its data path — and at any descendant
+ * path — are removed from the given Validation Context. Meaning anything nested inside a removed item's
+ * data (e.g. a Block nested inside a removed Block) goes away with it.
+ *
+ * Notice the first emission of the observed array only establishes the baseline, as it can not be known
+ * what was removed before this manager began observing.
+ * @example
+ * ```ts
+ * new UmbValidationCleanUpByPathManager<PropertyEditorSettingsProperty>(
+ * 	this,
+ * 	this.validationContext,
+ * 	this.properties,
+ * 	(property) => `$.values[${UmbDataPathPropertyValueQuery(property)}]`,
+ * );
+ * ```
+ */
+export class UmbValidationCleanUpByPathManager extends UmbControllerBase {
+    #validation;
+    #dataPathResolver;
+    /**
+     * The data paths of the items of the latest emission.
+     * Undefined until the first emission has been handled. [NL]
+     */
+    #currentDataPaths;
+    /**
+     * Creates an instance of UmbValidationCleanUpByPathManager.
+     * @param {UmbControllerHost} host - The host of this controller.
+     * @param {UmbValidationController} validationController - The Validation Context to remove messages from.
+     * @param {Observable<Array<ItemType> | undefined>} items - An Observable of the items to observe for removals.
+     * @param {UmbValidationCleanUpByDataPathDataPathResolver<ItemType>} dataPathResolver - Resolves the validation data path of a given item.
+     * @param {UmbControllerAlias} [controllerAlias] - An optional controller alias, enables replacing this manager with a new one.
+     */
+    constructor(host, validationController, items, dataPathResolver, controllerAlias) {
+        super(host, controllerAlias);
+        this.#validation = validationController;
+        this.#dataPathResolver = dataPathResolver;
+        this.observe(items, (currentItems) => this.#setItems(currentItems), null);
+    }
+    #setItems(items) {
+        if (items === undefined) {
+            return;
+        }
+        const dataPaths = new Set();
+        for (const item of items) {
+            const dataPath = this.#dataPathResolver(item);
+            if (dataPath !== undefined) {
+                dataPaths.add(dataPath);
+            }
+        }
+        const currentDataPaths = this.#currentDataPaths;
+        this.#currentDataPaths = dataPaths;
+        // The first emission only establishes the baseline — nothing was "removed" before we knew about it: [NL]
+        if (currentDataPaths === undefined)
+            return;
+        const removedDataPaths = [];
+        for (const dataPath of currentDataPaths) {
+            if (!dataPaths.has(dataPath)) {
+                removedDataPaths.push(dataPath);
+            }
+        }
+        if (removedDataPaths.length === 0)
+            return;
+        // The Validation Context may already have been destroyed, then there is nothing to clean up: [NL]
+        const messages = this.#validation.messages;
+        if (!messages)
+            return;
+        messages.initiateChange();
+        for (const dataPath of removedDataPaths) {
+            messages.removeMessagesAndDescendantsByPath(dataPath);
+        }
+        messages.finishChange();
+    }
+    destroy() {
+        super.destroy();
+        this.#currentDataPaths = undefined;
+        this.#validation = undefined;
+    }
+}

package/dist-cms/packages/core/validation/controllers/validation-clean-up-by-unique.manager.d.ts

@@ -0,0 +1,37 @@
+import type { UmbValidationController } from './validation.controller.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbControllerAlias, UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { Observable } from '../../../../libs/observable-api/index.js';
+/**
+ * A method resolving the unique identifier of a message's first-bracket query parameters, e.g. for
+ * `{alias: 'title', culture: 'en-US'}` this might return `'title'`. Return undefined to ignore a message
+ * (it won't be considered for removal, regardless of what disappears from the known uniques).
+ */
+export type UmbValidationCleanUpGetUniqueMethod = (queryParams: Record<string, string>) => string | undefined;
+/**
+ * Removes the validation messages of items based on observation of uniques.
+ * @example
+ * ```ts
+ * new UmbValidationCleanUpByUniqueManager(
+ * 	this,
+ * 	this.validationContext,
+ * 	'$.values',
+ * 	this.structure.contentTypePropertyAliases,
+ * 	(queryParams) => queryParams.alias,
+ * );
+ * ```
+ */
+export declare class UmbValidationCleanUpByUniqueManager extends UmbControllerBase {
+    #private;
+    /**
+     * Creates an instance of UmbValidationCleanUpByUniqueManager.
+     * @param {UmbControllerHost} host - The host of this controller.
+     * @param {UmbValidationController} validationController - The Validation Context to remove messages from.
+     * @param {string} scopePath - The JSON-Path prefix to scan for messages, e.g. `$.values`. Must not contain a bracket itself, as the first bracket found under it is assumed to be the item's own.
+     * @param {Observable<Array<string> | undefined>} uniques - An Observable of the currently known unique identifiers.
+     * @param {UmbValidationCleanUpGetUniqueMethod} getUniqueMethod - Resolves the unique identifier of a message's first-bracket query parameters.
+     * @param {UmbControllerAlias} [controllerAlias] - An optional controller alias, enables replacing this manager with a new one.
+     */
+    constructor(host: UmbControllerHost, validationController: UmbValidationController, scopePath: string, uniques: Observable<Array<string> | undefined>, getUniqueMethod: UmbValidationCleanUpGetUniqueMethod, controllerAlias?: UmbControllerAlias);
+    destroy(): void;
+}

package/dist-cms/packages/core/validation/controllers/validation-clean-up-by-unique.manager.js

@@ -0,0 +1,81 @@
+import { extractJsonQueryProps } from '../utils/extract-json-query-properties.function.js';
+import { umbGetFirstJsonPathBracket } from '../utils/first-json-path-bracket.function.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+/**
+ * Removes the validation messages of items based on observation of uniques.
+ * @example
+ * ```ts
+ * new UmbValidationCleanUpByUniqueManager(
+ * 	this,
+ * 	this.validationContext,
+ * 	'$.values',
+ * 	this.structure.contentTypePropertyAliases,
+ * 	(queryParams) => queryParams.alias,
+ * );
+ * ```
+ */
+export class UmbValidationCleanUpByUniqueManager extends UmbControllerBase {
+    #validation;
+    #scopePath;
+    #getUniqueMethod;
+    /**
+     * The uniques known the last time the observed uniques were handled.
+     * Undefined until the first emission has been handled. [NL]
+     */
+    #knownUniques;
+    /**
+     * Creates an instance of UmbValidationCleanUpByUniqueManager.
+     * @param {UmbControllerHost} host - The host of this controller.
+     * @param {UmbValidationController} validationController - The Validation Context to remove messages from.
+     * @param {string} scopePath - The JSON-Path prefix to scan for messages, e.g. `$.values`. Must not contain a bracket itself, as the first bracket found under it is assumed to be the item's own.
+     * @param {Observable<Array<string> | undefined>} uniques - An Observable of the currently known unique identifiers.
+     * @param {UmbValidationCleanUpGetUniqueMethod} getUniqueMethod - Resolves the unique identifier of a message's first-bracket query parameters.
+     * @param {UmbControllerAlias} [controllerAlias] - An optional controller alias, enables replacing this manager with a new one.
+     */
+    constructor(host, validationController, scopePath, uniques, getUniqueMethod, controllerAlias) {
+        super(host, controllerAlias ?? `validation-clean-up-by-unique-manager[${scopePath}]`);
+        this.#validation = validationController;
+        this.#scopePath = scopePath;
+        this.#getUniqueMethod = getUniqueMethod;
+        this.observe(uniques, this.#gotUniques, null);
+    }
+    #gotUniques = (uniques) => {
+        if (uniques === undefined) {
+            return;
+        }
+        const currentUniques = new Set(uniques ?? []);
+        const knownUniques = this.#knownUniques;
+        this.#knownUniques = currentUniques;
+        // The first emission only establishes the baseline — nothing was "removed" before we knew about it: [NL]
+        if (knownUniques === undefined)
+            return;
+        const removedUniques = new Set();
+        for (const unique of knownUniques) {
+            if (!currentUniques.has(unique)) {
+                removedUniques.add(unique);
+            }
+        }
+        if (removedUniques.size === 0)
+            return;
+        // The Validation Context may already have been destroyed, then there is nothing to clean up: [NL]
+        const messages = this.#validation.messages;
+        if (!messages)
+            return;
+        const keysToRemove = [];
+        for (const message of messages.getMessagesOfPathAndDescendant(this.#scopePath)) {
+            const bracket = umbGetFirstJsonPathBracket(message.path);
+            if (bracket === undefined)
+                continue;
+            const unique = this.#getUniqueMethod(extractJsonQueryProps(bracket));
+            if (unique !== undefined && removedUniques.has(unique)) {
+                keysToRemove.push(message.key);
+            }
+        }
+        messages.removeMessageByKeys(keysToRemove);
+    };
+    destroy() {
+        super.destroy();
+        this.#knownUniques = undefined;
+        this.#validation = undefined;
+    }
+}

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

@@ -202,7 +202,8 @@ export class UmbValidationController extends UmbControllerBase {
         if (this.#parent) {
             this.#parent.removeValidator(this);
         }
-        // If set to 'autoReport'/#sync, the call to `clear()` will trigger the sync observation and clean up its messages from the parent validation context. [NL]
+        // Stop Sync to avoid 'autoReport'/#sync cleaning up its messages from the parent validation context. [NL]
+        this.#stopSync();
         this.messages.clear();
         this.#latestLocalMessages = undefined;
         this.#latestParentMessages = undefined;
@@ -211,22 +212,19 @@ export class UmbValidationController extends UmbControllerBase {
     #readyToSync() {
         if (this.#sync && this.#parent) {
             this.#parent.addValidator(this);
+            this.observe(this.messages.messages, this.#transferMessages, 'observeLocalMessages');
         }
     }
+    #stopSync() {
+        this.removeUmbControllerByAlias('observeLocalMessages');
+    }
     /**
      * Continuously synchronize the messages from this context to the parent context.
      */
     autoReport() {
         this.#sync = true;
         this.#readyToSync();
-        this.observe(this.messages.messages, this.#transferMessages, 'observeLocalMessages');
-    }
-    // no need for this method at this movement. [NL]
-    /*
-    #stopSync() {
-        this.removeUmbControllerByAlias('observeLocalMessages');
     }
-    */
     /**
      * Perform a one time transfer of the messages from this context to the parent context.
      */
@@ -394,6 +392,7 @@ export class UmbValidationController extends UmbControllerBase {
         }
         this.#destroyValidators();
         this.unprovide();
+        this.#stopSync();
         this.messages?.destroy();
         this.messages = undefined;
         if (this.#parent) {

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

@@ -60,6 +60,14 @@ export function UmbFormControlMixin(superClass, defaultValue) {
         set pristine(value) {
             if (this._pristine !== value) {
                 this._pristine = value;
+                if (value === false) {
+                    // Loop over all connected form control elements and set their pristine state to the same value. [NL]
+                    this.#formCtrlElements.forEach((el) => {
+                        if ('pristine' in el && typeof el.pristine === 'boolean' && el.pristine !== value) {
+                            el.pristine = value;
+                        }
+                    });
+                }
             }
         }
         get pristine() {
@@ -85,7 +93,9 @@ export function UmbFormControlMixin(superClass, defaultValue) {
             this.#form = null;
             this.#validators = [];
             this.#formCtrlElements = [];
-            this.#runValidatorsCallback = () => this._runValidators;
+            this.#runValidatorsCallback = () => this._runValidators();
+            this.#lastEventType = undefined;
+            this.#lastMessage = undefined;
             this.#onFormSubmit = () => {
                 this.pristine = false;
             };
@@ -96,8 +106,8 @@ export function UmbFormControlMixin(superClass, defaultValue) {
             });
             this.addEventListener('blur', () => {
                 if (this.pristine) {
-                    this.#hadFocus = true;
                     if (this.#valueOnFocus !== this.value) {
+                        this.#hadFocus = true;
                         this.checkValidity();
                     }
                 }
@@ -264,7 +274,6 @@ export function UmbFormControlMixin(superClass, defaultValue) {
                     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;
@@ -280,14 +289,24 @@ export function UmbFormControlMixin(superClass, defaultValue) {
             this._internals.setValidity(this.#validity, message, innerFormControlEl ?? this.getFormElement() ?? undefined);
             this.#dispatchValidationState();
         }
+        #lastEventType;
+        #lastMessage;
         #dispatchValidationState() {
-            // Do not fire validation events unless we are not pristine/'untouched'/not-in-validation-mode. [NL]
-            if (this._pristine === true)
-                return;
             if (this.#validity.valid) {
+                if (this.#lastEventType === UmbValidationValidEvent.TYPE)
+                    return;
+                this.#lastEventType = UmbValidationValidEvent.TYPE;
+                this.#lastMessage = this.validationMessage;
                 this.dispatchEvent(new UmbValidationValidEvent());
             }
-            else {
+            else if (this._pristine === false) {
+                if (this.#lastEventType === UmbValidationInvalidEvent.TYPE && this.#lastMessage === this.validationMessage) {
+                    return;
+                }
+                // Only fire invalid events when the form control is not pristine, as we do not want to show validation messages for untouched form controls. [NL]
+                // Always fire an Invalid event when the validity is invalid, even if the last event was also Invalid, as the message might have changed. [NL]
+                this.#lastEventType = UmbValidationInvalidEvent.TYPE;
+                this.#lastMessage = this.validationMessage;
                 this.dispatchEvent(new UmbValidationInvalidEvent());
             }
         }
@@ -319,6 +338,8 @@ export function UmbFormControlMixin(superClass, defaultValue) {
             this.#hadFocus = false;
             this.value = this.getInitialValue() ?? this.getDefaultValue();
             this.#valueOnFocus = undefined;
+            this.#lastEventType = undefined;
+            this.#lastMessage = undefined;
         }
         getDefaultValue() {
             return defaultValue;

package/dist-cms/packages/core/validation/utils/extract-first-json-query-containing.function.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Walks the JSON queries of a JSON-Path string, in order, and returns the properties of the first one
+ * matching the given `find` function.
+ * @param {string} path The JSON-Path string to search.
+ * @param {(props: Record<string, string>) => boolean} find A function to test each set of extracted properties.
+ * @returns {Record<string, string> | undefined} The properties of the first JSON query that matches the find function, or an empty object if none match.
+ * @example
+ * ```ts
+ * const path = `$.values[?(@.key == 'y')].value.contentData[?(@.alias == 'x')]`;
+ * const props = extractFirstJsonQueryContaining(path, (props) => props.alias !== undefined);
+ * console.log(props); // { alias: 'x' }
+ * ```
+ */
+export declare function extractFirstJsonQueryContaining(path: string, find: (props: Record<string, string>) => boolean): Record<string, string> | undefined;

package/dist-cms/packages/core/validation/utils/extract-first-json-query-containing.function.js

@@ -0,0 +1,27 @@
+import { extractJsonQueryProps } from './extract-json-query-properties.function.js';
+/**
+ * Walks the JSON queries of a JSON-Path string, in order, and returns the properties of the first one
+ * matching the given `find` function.
+ * @param {string} path The JSON-Path string to search.
+ * @param {(props: Record<string, string>) => boolean} find A function to test each set of extracted properties.
+ * @returns {Record<string, string> | undefined} The properties of the first JSON query that matches the find function, or an empty object if none match.
+ * @example
+ * ```ts
+ * const path = `$.values[?(@.key == 'y')].value.contentData[?(@.alias == 'x')]`;
+ * const props = extractFirstJsonQueryContaining(path, (props) => props.alias !== undefined);
+ * console.log(props); // { alias: 'x' }
+ * ```
+ */
+export function extractFirstJsonQueryContaining(path, find) {
+    const start = path.indexOf('[');
+    if (start === -1)
+        return undefined;
+    const end = path.indexOf(']', start + 1);
+    if (end === -1)
+        return undefined;
+    const query = path.substring(start + 1, end);
+    const props = extractJsonQueryProps(query);
+    if (find(props))
+        return props;
+    return extractFirstJsonQueryContaining(path.slice(end + 1), find);
+}

package/dist-cms/packages/core/validation/utils/first-json-path-bracket.function.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Extracts the contents of the first pair of square brackets in a JSON-Path string — the query of the
+ * outermost/first array-item scope, ignoring anything nested deeper in the path.
+ * @param {string} path - The JSON-Path string.
+ * @returns {string | undefined} The bracket contents, or undefined if the path has no brackets.
+ * @example
+ * ```ts
+ * umbGetFirstJsonPathBracket("$.values[?(@.alias == 'x')].value.contentData[?(@.key == 'y')]");
+ * // => "?(@.alias == 'x')"
+ * ```
+ */
+export declare function umbGetFirstJsonPathBracket(path: string): string | undefined;