@umbraco-cms/backoffice 15.3.0 → 15.4.0-rc

package/dist-cms/packages/core/tree/expansion-manager/tree-expansion-manager.js

@@ -0,0 +1,74 @@
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import { UmbArrayState } from '../../../../libs/observable-api/index.js';
+/**
+ * Manages the expansion state of a tree
+ * @exports
+ * @class UmbTreeExpansionManager
+ * @augments {UmbControllerBase}
+ */
+export class UmbTreeExpansionManager extends UmbControllerBase {
+    constructor() {
+        super(...arguments);
+        this.#expansion = new UmbArrayState([], (x) => x.unique);
+        this.expansion = this.#expansion.asObservable();
+    }
+    #expansion;
+    /**
+     * Checks if an entity is expanded
+     * @param {UmbEntityModel} entity The entity to check
+     * @param {string} entity.entityType The entity type
+     * @param {string} entity.unique The unique key
+     * @returns {Observable<boolean>} True if the entity is expanded
+     * @memberof UmbTreeExpansionManager
+     */
+    isExpanded(entity) {
+        return this.#expansion.asObservablePart((entries) => entries?.some((entry) => entry.entityType === entity.entityType && entry.unique === entity.unique));
+    }
+    /**
+     * Sets the expansion state
+     * @param {UmbTreeExpansionModel | undefined} expansion The expansion state
+     * @memberof UmbTreeExpansionManager
+     * @returns {void}
+     */
+    setExpansion(expansion) {
+        this.#expansion.setValue(expansion);
+    }
+    /**
+     * Gets the expansion state
+     * @memberof UmbTreeExpansionManager
+     * @returns {UmbTreeExpansionModel} The expansion state
+     */
+    getExpansion() {
+        return this.#expansion.getValue();
+    }
+    /**
+     * Opens a child tree item
+     * @param {UmbEntityModel} entity The entity to open
+     * @param {string} entity.entityType The entity type
+     * @param {string} entity.unique The unique key
+     * @memberof UmbTreeExpansionManager
+     * @returns {Promise<void>}
+     */
+    async expandItem(entity) {
+        this.#expansion.appendOne(entity);
+    }
+    /**
+     * Closes a child tree item
+     * @param {UmbEntityModel} entity The entity to close
+     * @param {string} entity.entityType The entity type
+     * @param {string} entity.unique The unique key
+     * @memberof UmbTreeExpansionManager
+     * @returns {Promise<void>}
+     */
+    async collapseItem(entity) {
+        this.#expansion.filter((x) => x.entityType !== entity.entityType || x.unique !== entity.unique);
+    }
+    /**
+     * Closes all child tree items
+     * @memberof UmbTreeExpansionManager
+     * @returns {Promise<void>}
+     */
+    async collapseAll() {
+        this.#expansion.setValue([]);
+    }
+}

package/dist-cms/packages/core/tree/expansion-manager/types.d.ts

@@ -0,0 +1,2 @@
+import type { UmbEntityModel } from '../../entity/index.js';
+export type UmbTreeExpansionModel = Array<UmbEntityModel>;

package/dist-cms/packages/core/tree/expansion-manager/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/tree/folder/entity-action/delete-folder/delete-folder.action.js

@@ -25,7 +25,7 @@ export class UmbDeleteFolderEntityAction extends UmbEntityActionBase {
         if (folder) {
             // TODO: maybe we can show something about how many items are part of the folder?
             await umbConfirmModal(this._host, {
-                headline: `Delete folder ${folder.name}`,
+                headline: `Delete ${folder.name}`,
                 content: 'Are you sure you want to delete this folder?',
                 color: 'danger',
                 confirmLabel: 'Delete',

package/dist-cms/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.d.ts

@@ -7,9 +7,10 @@ import type { UmbControllerHost } from '../../../../../libs/controller-api/index
 import { UmbContextBase } from '../../../../../libs/class-api/index.js';
 import { UmbContextToken } from '../../../../../libs/context-api/index.js';
 import { UmbPaginationManager } from '../../../utils/index.js';
+import type { UmbEntityUnique } from '../../../entity/index.js';
 export declare abstract class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemModel, TreeRootType extends UmbTreeRootModel, ManifestType extends ManifestTreeItem = ManifestTreeItem> extends UmbContextBase<UmbTreeItemContext<TreeItemType>> implements UmbTreeItemContext<TreeItemType> {
     #private;
-    unique?: string | null;
+    unique?: UmbEntityUnique;
     entityType?: string;
     readonly pagination: UmbPaginationManager;
     protected readonly _treeItem: UmbObjectState<TreeItemType | undefined>;
@@ -23,6 +24,7 @@ export declare abstract class UmbTreeItemContextBase<TreeItemType extends UmbTre
     readonly isActive: import("rxjs").Observable<boolean>;
     readonly hasActions: import("rxjs").Observable<boolean>;
     readonly path: import("rxjs").Observable<string>;
+    isOpen: import("rxjs").Observable<boolean>;
     readonly foldersOnly: import("rxjs").Observable<boolean>;
     treeContext?: UmbDefaultTreeContext<TreeItemType, TreeRootType>;
     parentTreeItemContext?: UmbTreeItemContext<TreeItemType>;
@@ -52,8 +54,20 @@ export declare abstract class UmbTreeItemContextBase<TreeItemType extends UmbTre
      */
     loadMore: () => Promise<void>;
     toggleContextMenu(): void;
+    /**
+     * Selects the tree item
+     * @memberof UmbTreeItemContextBase
+     * @returns {void}
+     */
     select(): void;
+    /**
+     * Deselects the tree item
+     * @memberof UmbTreeItemContextBase
+     * @returns {void}
+     */
     deselect(): void;
+    showChildren(): void;
+    hideChildren(): void;
     getTreeItem(): TreeItemType | undefined;
     constructPath(pathname: string, entityType: string, unique: string | null): string;
     destroy(): void;

package/dist-cms/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.js

@@ -7,7 +7,7 @@ import { UmbContextToken } from '../../../../../libs/context-api/index.js';
 import { UMB_SECTION_CONTEXT, UMB_SECTION_SIDEBAR_CONTEXT } from '../../../section/index.js';
 import { umbExtensionsRegistry } from '../../../extension-registry/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../../action/index.js';
-import { UmbRequestReloadChildrenOfEntityEvent, UmbRequestReloadStructureForEntityEvent, } from '../../../entity-action/index.js';
+import { UmbHasChildrenEntityContext, UmbRequestReloadChildrenOfEntityEvent, UmbRequestReloadStructureForEntityEvent, } from '../../../entity-action/index.js';
 import { UmbPaginationManager, debounce } from '../../../utils/index.js';
 import { UmbChangeEvent } from '../../../event/index.js';
 export class UmbTreeItemContextBase extends UmbContextBase {
@@ -23,10 +23,12 @@ export class UmbTreeItemContextBase extends UmbContextBase {
     #isActive;
     #hasActions;
     #path;
+    #isOpen;
     #foldersOnly;
     #sectionContext;
     #sectionSidebarContext;
     #actionEventContext;
+    #hasChildrenContext;
     // TODO: get this from the tree context
     #paging;
     constructor(host) {
@@ -54,8 +56,11 @@ export class UmbTreeItemContextBase extends UmbContextBase {
         this.hasActions = this.#hasActions.asObservable();
         this.#path = new UmbStringState('');
         this.path = this.#path.asObservable();
+        this.#isOpen = new UmbBooleanState(false);
+        this.isOpen = this.#isOpen.asObservable();
         this.#foldersOnly = new UmbBooleanState(false);
         this.foldersOnly = this.#foldersOnly.asObservable();
+        this.#hasChildrenContext = new UmbHasChildrenEntityContext(this);
         // TODO: get this from the tree context
         this.#paging = {
             skip: 0,
@@ -143,7 +148,9 @@ export class UmbTreeItemContextBase extends UmbContextBase {
         if (!treeItem.entityType)
             throw new Error('Could not create tree item context, tree item type is missing');
         this.entityType = treeItem.entityType;
-        this.#hasChildren.setValue(treeItem.hasChildren || false);
+        const hasChildren = treeItem.hasChildren || false;
+        this.#hasChildren.setValue(hasChildren);
+        this.#hasChildrenContext.setHasChildren(hasChildren);
         this._treeItem.setValue(treeItem);
         // Update observers:
         this.#observeActions();
@@ -183,7 +190,9 @@ export class UmbTreeItemContextBase extends UmbContextBase {
             else {
                 this.#childItems.setValue(data.items);
             }
-            this.#hasChildren.setValue(data.total > 0);
+            const hasChildren = data.total > 0;
+            this.#hasChildren.setValue(hasChildren);
+            this.#hasChildrenContext.setHasChildren(hasChildren);
             this.pagination.setTotalItems(data.total);
         }
         this.#isLoading.setValue(false);
@@ -198,16 +207,49 @@ export class UmbTreeItemContextBase extends UmbContextBase {
             headline: this.getTreeItem()?.name || '',
         });
     }
+    /**
+     * Selects the tree item
+     * @memberof UmbTreeItemContextBase
+     * @returns {void}
+     */
     select() {
         if (this.unique === undefined)
             throw new Error('Could not select. Unique is missing');
         this.treeContext?.selection.select(this.unique);
     }
+    /**
+     * Deselects the tree item
+     * @memberof UmbTreeItemContextBase
+     * @returns {void}
+     */
     deselect() {
         if (this.unique === undefined)
             throw new Error('Could not deselect. Unique is missing');
         this.treeContext?.selection.deselect(this.unique);
     }
+    showChildren() {
+        const entityType = this.entityType;
+        const unique = this.unique;
+        if (!entityType) {
+            throw new Error('Could not show children, entity type is missing');
+        }
+        if (unique === undefined) {
+            throw new Error('Could not show children, unique is missing');
+        }
+        // It is the tree that keeps track of the open children. We tell the tree to open this child
+        this.treeContext?.expansion.expandItem({ entityType, unique });
+    }
+    hideChildren() {
+        const entityType = this.entityType;
+        const unique = this.unique;
+        if (!entityType) {
+            throw new Error('Could not show children, entity type is missing');
+        }
+        if (unique === undefined) {
+            throw new Error('Could not show children, unique is missing');
+        }
+        this.treeContext?.expansion.collapseItem({ entityType, unique });
+    }
     async #consumeContexts() {
         this.consumeContext(UMB_SECTION_CONTEXT, (instance) => {
             this.#sectionContext = instance;
@@ -223,6 +265,7 @@ export class UmbTreeItemContextBase extends UmbContextBase {
             this.#observeIsSelectable();
             this.#observeIsSelected();
             this.#observeFoldersOnly();
+            this.#observeExpansion();
         });
         this.consumeContext(UMB_TREE_ITEM_CONTEXT, (instance) => {
             this.parentTreeItemContext = instance;
@@ -283,6 +326,21 @@ export class UmbTreeItemContextBase extends UmbContextBase {
             this.#hasActions.setValue(actions.length > 0);
         }, 'observeActions');
     }
+    #observeExpansion() {
+        if (this.unique === undefined)
+            return;
+        if (!this.entityType)
+            return;
+        if (!this.treeContext)
+            return;
+        this.observe(this.treeContext.expansion.isExpanded({ entityType: this.entityType, unique: this.unique }), (isExpanded) => {
+            // If this item has children, load them
+            if (isExpanded && this.#hasChildren.getValue() && this.#isOpen.getValue() === false) {
+                this.loadChildren();
+            }
+            this.#isOpen.setValue(isExpanded);
+        }, 'observeExpansion');
+    }
     #onReloadRequest;
     #onReloadStructureRequest;
     #onPageChange;

package/dist-cms/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.d.ts

@@ -17,12 +17,14 @@ export declare abstract class UmbTreeItemElementBase<TreeItemModelType extends U
     private _isSelectable;
     private _isSelected;
     private _hasChildren;
+    private _isOpen;
     private _iconSlotHasChildren;
     private _totalPages;
     private _currentPage;
     private _handleSelectedItem;
     private _handleDeselectedItem;
     private _onShowChildren;
+    private _onHideChildren;
     render(): import("lit-html").TemplateResult<1>;
     renderIconContainer(): import("lit-html").TemplateResult<1>;
     renderLabel(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.js

@@ -16,6 +16,7 @@ export class UmbTreeItemElementBase extends UmbLitElement {
         this._isSelectable = false;
         this._isSelected = false;
         this._hasChildren = false;
+        this._isOpen = false;
         this._iconSlotHasChildren = false;
         this._totalPages = 1;
         this._currentPage = 1;
@@ -47,6 +48,7 @@ export class UmbTreeItemElementBase extends UmbLitElement {
             this.observe(this.#api.childItems, (value) => (this._childItems = value));
             this.observe(this.#api.hasChildren, (value) => (this._hasChildren = value));
             this.observe(this.#api.isActive, (value) => (this._isActive = value));
+            this.observe(this.#api.isOpen, (value) => (this._isOpen = value));
             this.observe(this.#api.isLoading, (value) => (this._isLoading = value));
             this.observe(this.#api.isSelectableContext, (value) => (this._isSelectableContext = value));
             this.observe(this.#api.isSelectable, (value) => (this._isSelectable = value));
@@ -72,9 +74,13 @@ export class UmbTreeItemElementBase extends UmbLitElement {
         event.stopPropagation();
         this.#api?.deselect();
     }
-    // TODO: do we want to catch and emit a backoffice event here?
-    _onShowChildren() {
-        this.#api?.loadChildren();
+    _onShowChildren(event) {
+        event.stopPropagation();
+        this.#api?.showChildren();
+    }
+    _onHideChildren(event) {
+        event.stopPropagation();
+        this.#api?.hideChildren();
     }
     #onLoadMoreClick;
     // Note: Currently we want to prevent opening when the item is in a selectable context, but this might change in the future.
@@ -84,6 +90,7 @@ export class UmbTreeItemElementBase extends UmbLitElement {
         return html `
 			<uui-menu-item
 				@show-children=${this._onShowChildren}
+				@hide-children=${this._onHideChildren}
 				@selected=${this._handleSelectedItem}
 				@deselected=${this._handleDeselectedItem}
 				?active=${this._isActive}
@@ -92,6 +99,7 @@ export class UmbTreeItemElementBase extends UmbLitElement {
 				?selected=${this._isSelected}
 				.loading=${this._isLoading}
 				.hasChildren=${this._hasChildren}
+				.showChildren=${this._isOpen}
 				.caretLabel=${this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + label}
 				label=${label}
 				href="${ifDefined(this._isSelectableContext ? undefined : this._href)}">
@@ -189,6 +197,9 @@ __decorate([
 __decorate([
     state()
 ], UmbTreeItemElementBase.prototype, "_hasChildren", void 0);
+__decorate([
+    state()
+], UmbTreeItemElementBase.prototype, "_isOpen", void 0);
 __decorate([
     state()
 ], UmbTreeItemElementBase.prototype, "_iconSlotHasChildren", void 0);

package/dist-cms/packages/core/tree/tree-item/tree-item-context.interface.d.ts

@@ -13,6 +13,7 @@ export interface UmbTreeItemContext<TreeItemType extends UmbTreeItemModel> exten
     isSelectable: Observable<boolean>;
     isSelected: Observable<boolean>;
     isActive: Observable<boolean>;
+    isOpen: Observable<boolean>;
     hasActions: Observable<boolean>;
     path: Observable<string>;
     pagination: UmbPaginationManager;
@@ -23,4 +24,7 @@ export interface UmbTreeItemContext<TreeItemType extends UmbTreeItemModel> exten
     select(): void;
     deselect(): void;
     constructPath(pathname: string, entityType: string, unique: string): string;
+    loadChildren(): void;
+    showChildren(): void;
+    hideChildren(): void;
 }

package/dist-cms/packages/core/tree/tree-picker-modal/tree-picker-modal.element.js

@@ -141,6 +141,7 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbModal
 				.props=${{
             hideTreeItemActions: true,
             hideTreeRoot: this.data?.hideTreeRoot,
+            expandTreeRoot: this.data?.expandTreeRoot,
             selectionConfiguration: this._selectionConfiguration,
             filter: this.data?.filter,
             selectableFilter: this.data?.pickableFilter,

package/dist-cms/packages/core/tree/tree-picker-modal/tree-picker-modal.token.d.ts

@@ -1,4 +1,4 @@
-import type { UmbTreeStartNode } from '../types.js';
+import type { UmbTreeItemModel, UmbTreeStartNode } from '../types.js';
 import type { UmbPickerModalData, UmbPickerModalValue } from '../../modal/index.js';
 import type { UmbWorkspaceModalData } from '../../workspace/index.js';
 import { UmbModalToken } from '../../modal/index.js';
@@ -10,8 +10,9 @@ export interface UmbTreePickerModalCreateActionData<PathPatternParamsType extend
     extendWithPathPattern: UmbPathPattern;
     extendWithPathParams: PathPatternParamsType;
 }
-export interface UmbTreePickerModalData<TreeItemType, PathPatternParamsType extends UmbPathPatternParamsType = UmbPathPatternParamsType> extends UmbPickerModalData<TreeItemType> {
+export interface UmbTreePickerModalData<TreeItemType = UmbTreeItemModel, PathPatternParamsType extends UmbPathPatternParamsType = UmbPathPatternParamsType> extends UmbPickerModalData<TreeItemType> {
     hideTreeRoot?: boolean;
+    expandTreeRoot?: boolean;
     treeAlias?: string;
     createAction?: UmbTreePickerModalCreateActionData<PathPatternParamsType>;
     startNode?: UmbTreeStartNode;
@@ -19,4 +20,4 @@ export interface UmbTreePickerModalData<TreeItemType, PathPatternParamsType exte
 }
 export interface UmbTreePickerModalValue extends UmbPickerModalValue {
 }
-export declare const UMB_TREE_PICKER_MODAL: UmbModalToken<UmbTreePickerModalData<unknown, UmbPathPatternParamsType>, UmbTreePickerModalValue>;
+export declare const UMB_TREE_PICKER_MODAL: UmbModalToken<UmbTreePickerModalData<UmbTreeItemModel, UmbPathPatternParamsType>, UmbTreePickerModalValue>;

package/dist-cms/packages/core/utils/sanitize/escape-html.function.d.ts

@@ -1,6 +1,6 @@
 /**
  * Escapes HTML entities in a string.
- * @example escapeHTML('<script>alert("XSS")</script>'), // "&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;"
+ * @example escapeHTML('<script>alert("XSS")</script>'), // "&lt;script&gt;alert(&#34;XSS&#34;)&lt;/script&gt;"
  * @param html The HTML string to escape.
  * @returns The sanitized HTML string.
  */

package/dist-cms/packages/core/utils/sanitize/escape-html.function.js

@@ -3,7 +3,7 @@ const SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
 const NON_ALPHANUMERIC_REGEXP = /([^#-~| |!])/g;
 /**
  * Escapes HTML entities in a string.
- * @example escapeHTML('<script>alert("XSS")</script>'), // "&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;"
+ * @example escapeHTML('<script>alert("XSS")</script>'), // "&lt;script&gt;alert(&#34;XSS&#34;)&lt;/script&gt;"
  * @param html The HTML string to escape.
  * @returns The sanitized HTML string.
  */

package/dist-cms/packages/core/validation/components/form-validation-message.element.js

@@ -84,7 +84,7 @@ let UmbFormValidationMessageElement = class UmbFormValidationMessageElement exte
     static { this.styles = [
         css `
 			#messages {
-				color: var(--uui-color-danger-standalone);
+				color: var(--uui-color-invalid-standalone);
 			}
 		`,
     ]; }

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

@@ -1,4 +1,5 @@
 export * from './validation.context.js';
 export * from './validation.context-token.js';
+export * from './validation-messages.manager.js';
 export * from './server-model-validator.context-token.js';
 export * from './server-model-validator.context.js';

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

@@ -1,4 +1,5 @@
 export * from './validation.context.js';
 export * from './validation.context-token.js';
+export * from './validation-messages.manager.js';
 export * from './server-model-validator.context-token.js';
 export * from './server-model-validator.context.js';

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

@@ -1,11 +1,14 @@
 import type { UmbValidator } from '../interfaces/validator.interface.js';
+import type { UmbValidationPathTranslator } from '../types.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';
+import type { ClassConstructor } from '../../../../libs/extension-api/index.js';
 export declare class UmbServerModelValidatorContext extends UmbContextBase<UmbServerModelValidatorContext> implements UmbValidator {
     #private;
     getData(): any;
     constructor(host: UmbControllerHost);
+    addPathTranslator(translator: ClassConstructor<UmbValidationPathTranslator<any>>): void;
     askServerForValidation(data: unknown, requestPromise: Promise<UmbDataSourceResponse<string>>): Promise<void>;
     get isValid(): boolean;
     validate(): Promise<void>;

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

@@ -1,9 +1,10 @@
-import { UmbDataPathPropertyValueQuery } from '../utils/index.js';
-import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY } from '../const.js';
+import { UmbValidationPathTranslationController } from '../controllers/validation-path-translation/index.js';
 import { UMB_VALIDATION_CONTEXT } from './validation.context-token.js';
 import { UMB_SERVER_MODEL_VALIDATOR_CONTEXT } from './server-model-validator.context-token.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
+import { UmbId } from '../../id/index.js';
 export class UmbServerModelValidatorContext extends UmbContextBase {
+    #pathTranslators = [];
     #validatePromise;
     #validatePromiseResolve;
     #validatePromiseReject;
@@ -24,6 +25,9 @@ export class UmbServerModelValidatorContext extends UmbContextBase {
             // Run translators?
         }).asPromise();
     }
+    addPathTranslator(translator) {
+        this.#pathTranslators.push(translator);
+    }
     async askServerForValidation(data, requestPromise) {
         this.#context?.messages.removeMessagesByType('server');
         this.#isValid = false;
@@ -36,6 +40,10 @@ export class UmbServerModelValidatorContext extends UmbContextBase {
         this.#data = data;
         // Ask the server for validation...
         const { error } = await requestPromise;
+        if (this.#data !== data) {
+            console.warn('Data has changed since validation request was sent to server. This validation request will be rejected.');
+            return Promise.reject();
+        }
         this.#isValid = error ? false : true;
         if (this.#isValid) {
             // Send data to context for translation:
@@ -47,30 +55,56 @@ export class UmbServerModelValidatorContext extends UmbContextBase {
             }
             // Send data to context for translation:
             this.#context.setTranslationData(data);
+            let messages = [];
             // 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]);
+                    const newBodies = errorBody.errors[path];
+                    // Correct path to ensure it starts with `$.` (notice it mainly starts with `$.`, but the server sometimes does not include it)
+                    if (path.startsWith('$.')) {
+                        // Everything is good.
+                    }
+                    else {
+                        if (path.startsWith('.')) {
+                            path = '$' + path;
+                        }
+                        else {
+                            path = '$.' + path;
+                        }
+                    }
+                    newBodies.forEach((body) => messages.push({ type: 'server', key: UmbId.new(), path, body }));
+                    //this.#context!.messages.addMessages('server', path, errorBody.errors[path]);
                 });
             }
             // Check if there are missing properties:
             if (errorBody?.missingProperties) {
+                // TODO: Remove missingProperties, as we do not use it any longer: [NL]
+                throw new Error('Missing properties are not supported.');
+                /*
                 // 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) => {
+                    this.#data.variants.forEach((variant: any) => {
                         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.#context!.messages.addMessages('server', path, [UMB_VALIDATION_EMPTY_LOCALIZATION_KEY]);
                     });
                 });
+                */
+            }
+            if (messages.length > 0) {
+                const ctrl = new UmbValidationPathTranslationController(this, {
+                    translationData: this.#data,
+                    pathTranslators: this.#pathTranslators,
+                });
+                messages = await ctrl.translate(messages);
+                this.#context.messages.addMessageObjects(messages);
             }
         }
         this.#validatePromiseResolve?.();

package/dist-cms/packages/core/validation/context/validation-messages.manager.d.ts

@@ -1,6 +1,6 @@
 import type { UmbValidationMessageTranslator } from '../translators/validation-message-path-translator.interface.js';
 import type { Observable } from '../../../../external/rxjs/index.js';
-export type UmbValidationMessageType = 'client' | 'server';
+export type UmbValidationMessageType = 'client' | 'server' | 'config' | string;
 export interface UmbValidationMessage {
     type: UmbValidationMessageType;
     key: string;
@@ -10,18 +10,24 @@ export interface UmbValidationMessage {
 export declare class UmbValidationMessagesManager {
     #private;
     messages: Observable<UmbValidationMessage[]>;
-    debug(logName: string): void;
+    filteredMessages: Observable<UmbValidationMessage[]>;
+    getNotFilteredMessages(): Array<UmbValidationMessage>;
     getMessages(): Array<UmbValidationMessage>;
+    debug(logName: string): void;
+    debugFiltered(logName: string): void;
+    filter(method: (msg: UmbValidationMessage) => boolean): void;
     initiateChange(): void;
     finishChange(): void;
     getHasAnyMessages(): boolean;
     getMessagesOfPathAndDescendant(path: string): Array<UmbValidationMessage>;
     messagesOfPathAndDescendant(path: string): Observable<Array<UmbValidationMessage>>;
     messagesOfTypeAndPath(type: UmbValidationMessageType, path: string): Observable<Array<UmbValidationMessage>>;
+    messagesOfNotTypeAndPath(type: UmbValidationMessageType, path: string): Observable<Array<UmbValidationMessage>>;
     hasMessagesOfPathAndDescendant(path: string): Observable<boolean>;
     getHasMessagesOfPathAndDescendant(path: string): boolean;
     addMessage(type: UmbValidationMessageType, path: string, body: string, key?: string): void;
     addMessages(type: UmbValidationMessageType, path: string, bodies: Array<string>): void;
+    addMessageObjects(messages: Array<UmbValidationMessage>): void;
     removeMessageByKey(key: string): void;
     removeMessageByKeys(keys: Array<string>): void;
     removeMessagesByType(type: UmbValidationMessageType): void;