Sets the context's validation

and `mandatory` attribute on the `umb-property-layout`.

Author: leekelleher

src/packages/core/property/property/property.element.ts

@@ -1,21 +1,24 @@
 import { UmbPropertyContext } from './property.context.js';
-import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
-import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api';
-import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type {
-	UmbPropertyEditorConfigCollection,
-	UmbPropertyEditorConfig,
-} from '@umbraco-cms/backoffice/property-editor';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import {
 	UmbBindValidationMessageToFormControl,
 	UmbFormControlValidator,
 	UmbObserveValidationStateController,
 } from '@umbraco-cms/backoffice/validation';
-import type { UmbPropertyTypeAppearanceModel } from '@umbraco-cms/backoffice/content-type';
+import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
+import type {
+	UmbPropertyEditorConfigCollection,
+	UmbPropertyEditorConfig,
+} from '@umbraco-cms/backoffice/property-editor';
+import type {
+	UmbPropertyTypeAppearanceModel,
+	UmbPropertyTypeValidationModel,
+} from '@umbraco-cms/backoffice/content-type';
+import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
 /**
  *  @element umb-property
@@ -112,6 +115,17 @@ export class UmbPropertyElement extends UmbLitElement {
 		return this.#propertyContext.getConfig();
 	}
 
+	/**
+	 * Validation: Validation settings for the property.
+	 */
+	@property({ type: Object, attribute: false })
+	public set validation(validation: UmbPropertyTypeValidationModel | undefined) {
+		this.#propertyContext.setValidation(validation);
+	}
+	public get validation() {
+		return this.#propertyContext.getValidation();
+	}
+
 	/**
 	 * DataPath, declare the path to the value of the data that this property represents.
 	 * @public
@@ -152,6 +166,9 @@ export class UmbPropertyElement extends UmbLitElement {
 	@state()
 	private _orientation: 'horizontal' | 'vertical' = 'horizontal';
 
+	@state()
+	private _mandatory?: boolean;
+
 	#propertyContext = new UmbPropertyContext(this);
 
 	#controlValidator?: UmbFormControlValidator;
@@ -169,34 +186,46 @@ export class UmbPropertyElement extends UmbLitElement {
 			},
 			null,
 		);
+
 		this.observe(
 			this.#propertyContext.label,
 			(label) => {
 				this._label = label;
 			},
 			null,
 		);
+
 		this.observe(
 			this.#propertyContext.description,
 			(description) => {
 				this._description = description;
 			},
 			null,
 		);
+
 		this.observe(
 			this.#propertyContext.variantDifference,
 			(variantDifference) => {
 				this._variantDifference = variantDifference;
 			},
 			null,
 		);
+
 		this.observe(
 			this.#propertyContext.appearance,
 			(appearance) => {
 				this._orientation = appearance?.labelOnTop ? 'vertical' : 'horizontal';
 			},
 			null,
 		);
+
+		this.observe(
+			this.#propertyContext.validation,
+			(validation) => {
+				this._mandatory = validation?.mandatory;
+			},
+			null,
+		);
 	}
 
 	private _onPropertyEditorChange = (e: CustomEvent): void => {
@@ -297,10 +326,11 @@ export class UmbPropertyElement extends UmbLitElement {
 		return html`
 			<umb-property-layout
 				id="layout"
-				.alias=${this._alias}
-				.label=${this._label}
-				.description=${this._description}
+				.alias=${this._alias ?? ''}
+				.label=${this._label ?? ''}
+				.description=${this._description ?? ''}
 				.orientation=${this._orientation ?? 'horizontal'}
+				?mandatory=${this._mandatory}
 				?invalid=${this._invalid}>
 				${this.#renderPropertyActionMenu()}
 				${this._variantDifference