diff --git a/src/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.ts b/src/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.ts
index 7093fe2200..d0dafc2fdc 100644
--- a/src/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.ts
+++ b/src/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.ts
@@ -1,19 +1,17 @@
import type { UmbPropertyEditorConfig } from '../../../property-editor/index.js';
import type { UmbPropertyTypeModel } from '../../types.js';
+import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbContentPropertyContext } from '@umbraco-cms/backoffice/content';
-import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type';
import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type';
import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
-import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+
@customElement('umb-property-type-based-property')
export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
@property({ type: Object, attribute: false })
- public get property(): UmbPropertyTypeModel | undefined {
- return this._property;
- }
public set property(value: UmbPropertyTypeModel | undefined) {
const oldProperty = this._property;
this._property = value;
@@ -21,6 +19,9 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
this._observeDataType(this._property?.dataType.unique);
}
}
+ public get property(): UmbPropertyTypeModel | undefined {
+ return this._property;
+ }
private _property?: UmbPropertyTypeModel;
@property({ type: String, attribute: 'data-path' })
@@ -73,16 +74,19 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
}
override render() {
- return this._propertyEditorUiAlias && this._property?.alias
- ? html``
- : '';
+ if (!this._propertyEditorUiAlias || !this._property?.alias) return;
+ return html`
+
+
+ `;
}
static override styles = [
diff --git a/src/packages/core/property/property-layout/property-layout.element.ts b/src/packages/core/property/property-layout/property-layout.element.ts
index ba194a6e06..1724d318a1 100644
--- a/src/packages/core/property/property-layout/property-layout.element.ts
+++ b/src/packages/core/property/property-layout/property-layout.element.ts
@@ -51,7 +51,7 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
public description = '';
/**
- * @description Make the property appear invalid
+ * @description Make the property appear invalid.
* @type {boolean}
* @attr
* @default undefined
@@ -59,11 +59,20 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
@property({ type: Boolean, reflect: true })
public invalid?: boolean;
+ /**
+ * @description Display a mandatory indicator.
+ * @type {boolean}
+ * @attr
+ * @default false
+ */
+ @property({ type: Boolean, reflect: true })
+ public mandatory?: boolean;
+
override render() {
// TODO: Only show alias on label if user has access to DocumentType within settings:
return html`
-
+
${this.localize.string(this.label)}
${when(this.invalid, () => html`!`)}
diff --git a/src/packages/core/property/property/property.context.ts b/src/packages/core/property/property/property.context.ts
index 9d1ea7be5d..76a0dbaa15 100644
--- a/src/packages/core/property/property/property.context.ts
+++ b/src/packages/core/property/property/property.context.ts
@@ -14,27 +14,39 @@ import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
import type { UmbPropertyEditorConfigProperty } from '@umbraco-cms/backoffice/property-editor';
import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import type { UmbPropertyTypeAppearanceModel } from '@umbraco-cms/backoffice/content-type';
+import type {
+ UmbPropertyTypeAppearanceModel,
+ UmbPropertyTypeValidationModel,
+} from '@umbraco-cms/backoffice/content-type';
export class UmbPropertyContext extends UmbContextBase> {
#alias = new UmbStringState(undefined);
public readonly alias = this.#alias.asObservable();
+
#label = new UmbStringState(undefined);
public readonly label = this.#label.asObservable();
+
#description = new UmbStringState(undefined);
public readonly description = this.#description.asObservable();
+
#appearance = new UmbObjectState(undefined);
public readonly appearance = this.#appearance.asObservable();
+
#value = new UmbDeepState(undefined);
public readonly value = this.#value.asObservable();
+
#configValues = new UmbArrayState([], (x) => x.alias);
public readonly configValues = this.#configValues.asObservable();
#config = new UmbClassState(undefined);
public readonly config = this.#config.asObservable();
+ #validation = new UmbObjectState(undefined);
+ public readonly validation = this.#validation.asObservable();
+
private _editor = new UmbBasicState(undefined);
public readonly editor = this._editor.asObservable();
+
setEditor(editor: UmbPropertyEditorUiElement | undefined) {
this._editor.setValue(editor ?? undefined);
}
@@ -108,24 +120,28 @@ export class UmbPropertyContext extends UmbContextBase extends UmbContextBase | undefined): void {
this.#configValues.setValue(config ?? []);
}
public getConfig(): Array | undefined {
return this.#configValues.getValue();
}
+
public setVariantId(variantId: UmbVariantId | undefined): void {
this.#variantId.setValue(variantId);
}
@@ -156,6 +174,13 @@ export class UmbPropertyContext extends UmbContextBase {
@@ -176,6 +194,7 @@ export class UmbPropertyElement extends UmbLitElement {
},
null,
);
+
this.observe(
this.#propertyContext.description,
(description) => {
@@ -183,6 +202,7 @@ export class UmbPropertyElement extends UmbLitElement {
},
null,
);
+
this.observe(
this.#propertyContext.variantDifference,
(variantDifference) => {
@@ -190,6 +210,7 @@ export class UmbPropertyElement extends UmbLitElement {
},
null,
);
+
this.observe(
this.#propertyContext.appearance,
(appearance) => {
@@ -197,6 +218,14 @@ export class UmbPropertyElement extends UmbLitElement {
},
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`
${this.#renderPropertyActionMenu()}
${this._variantDifference