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