further refactoring

src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts

@@ -4,6 +4,8 @@ import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 
+type UmbPropertyTypeId = UmbPropertyTypeModel['id'];
+
 /**
  * This class is a helper class for managing the structure of containers in a content type.
  * This requires a structure manager {@link UmbContentTypePropertyStructureManager} to manage the structure.
@@ -101,7 +103,7 @@ export class UmbContentTypePropertyStructureHelper<T extends UmbContentTypeModel
 		this.observe(
 			this.#structure.propertyStructuresOf(groupId),
 			(properties) => {
-				// If this need to be able to remove properties, we need to clean out the ones of this group.id before inserting them:
+				// If property was removed, we want to make sure that we clean out the ones of this group.id before inserting them again:
 				const _propertyStructure = this.#propertyStructure.getValue().filter((x) => x.container?.id !== groupId);
 
 				properties?.forEach((property) => {
@@ -117,6 +119,13 @@ export class UmbContentTypePropertyStructureHelper<T extends UmbContentTypeModel
 		);
 	}
 
+	async isOwnerProperty(propertyId: UmbPropertyTypeId) {
+		await this.#init;
+		if (!this.#structure) return;
+
+		return this.#structure.ownerContentTypePart((x) => x?.properties.some((y) => y.id === propertyId));
+	}
+
 	// TODO: consider moving this to another class, to separate 'viewer' from 'manipulator':
 	/** Manipulate methods: */
 
@@ -151,7 +160,7 @@ export class UmbContentTypePropertyStructureHelper<T extends UmbContentTypeModel
 		return true;
 	}
 
-	async removeProperty(propertyId: string) {
+	async removeProperty(propertyId: UmbPropertyTypeId) {
 		await this.#init;
 		if (!this.#structure) return false;
 

src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-structure-manager.class.ts

@@ -433,7 +433,8 @@ export class UmbContentTypePropertyStructureManager<T extends UmbContentTypeMode
 			if (!container) {
 				throw new Error('Container for inserting property could not be found or created');
 			}
-			property.container.id = container.id;
+			// Unfreeze object, while settings container.id
+			property = { ...property, container: { id: container.id } };
 		}
 
 		const frozenProperties =

src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-workspace-view-edit-group.element.ts

@@ -11,7 +11,7 @@ import './content-type-workspace-view-edit-properties.element.js';
 
 @customElement('umb-content-type-workspace-view-edit-group')
 export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
-	private _ownerGroupId?: string | null;
+	//private _ownerGroupId?: string | null;
 
 	/*
 	@property({ type: String })

src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-workspace-view-edit-properties.element.ts

@@ -209,13 +209,8 @@ export class UmbContentTypeWorkspaceViewEditPropertiesElement extends UmbLitElem
 										owner-document-type-name=${ifDefined(this._ownerDocumentType!.name)}
 										?inherited=${property.container?.id !== this.containerId}
 										?sort-mode-active=${this._sortModeActive}
-										.property=${property}
-										@umb:partial-property-update=${(event: CustomEvent) => {
-											this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail);
-										}}
-										@property-delete=${() => {
-											this._propertyStructureHelper.removeProperty(property.id);
-										}}>
+										.propertyStructureHelper=${this._propertyStructureHelper}
+										.property=${property}>
 									</umb-content-type-workspace-view-edit-property>
 								`;
 							},

src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-workspace-view-edit-property.element.ts

@@ -12,6 +12,8 @@ import { generateAlias } from '@umbraco-cms/backoffice/utils';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import {
 	UMB_PROPERTY_SETTINGS_MODAL,
+	type UmbContentTypeModel,
+	type UmbContentTypePropertyStructureHelper,
 	type UmbPropertyTypeModel,
 	type UmbPropertyTypeScaffoldModel,
 } from '@umbraco-cms/backoffice/content-type';
@@ -29,6 +31,17 @@ export class UmbContentTypeWorkspacePropertyElement extends UmbLitElement {
 	#settingsModal;
 	#workspaceModal;
 
+	@property({ attribute: false })
+	public set propertyStructureHelper(value: UmbContentTypePropertyStructureHelper<UmbContentTypeModel> | undefined) {
+		if (value === this._propertyStructureHelper) return;
+		this._propertyStructureHelper = value;
+		this.#checkInherited();
+	}
+	public get propertyStructureHelper(): UmbContentTypePropertyStructureHelper<UmbContentTypeModel> | undefined {
+		return this._propertyStructureHelper;
+	}
+	private _propertyStructureHelper?: UmbContentTypePropertyStructureHelper<UmbContentTypeModel> | undefined;
+
 	/**
 	 * Property, the data object for the property.
 	 * @type {UmbPropertyTypeModel | UmbPropertyTypeScaffoldModel | undefined}
@@ -42,8 +55,9 @@ export class UmbContentTypeWorkspacePropertyElement extends UmbLitElement {
 	public set property(value: UmbPropertyTypeModel | UmbPropertyTypeScaffoldModel | undefined) {
 		const oldValue = this._property;
 		this._property = value;
+		this.#checkInherited();
 		this.#settingsModal.setUniquePathValue('propertyId', value?.id?.toString());
-		this.#workspaceModal.setUniquePathValue('propertyId', value?.id?.toString());
+		//this.#workspaceModal.setUniquePathValue('propertyId', value?.id?.toString());
 		this.setDataType(this._property?.dataType?.unique);
 		this.requestUpdate('property', oldValue);
 	}
@@ -99,7 +113,7 @@ export class UmbContentTypeWorkspacePropertyElement extends UmbLitElement {
 			});
 
 		this.#workspaceModal = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
-			.addUniquePaths(['propertyId'])
+			//.addUniquePaths(['propertyId'])
 			.addAdditionalPath('document-type')
 			.onSetup(() => {
 				return { data: { entityType: 'document-type', preset: {} } };
@@ -109,15 +123,34 @@ export class UmbContentTypeWorkspacePropertyElement extends UmbLitElement {
 			});
 	}
 
-	_partialUpdate(partialObject: UmbPropertyTypeModel) {
-		this.dispatchEvent(new CustomEvent('umb:partial-property-update', { detail: partialObject }));
+	async #checkInherited() {
+		if (this._propertyStructureHelper && this._property) {
+			console.log('checkInherited');
+			// We can first match with something if we have a name [NL]
+			this.observe(
+				await this._propertyStructureHelper!.isOwnerProperty(this._property.id),
+				(isOwned) => {
+					console.log('inherited', isOwned);
+					this.inherited = !isOwned;
+				},
+				'observeIsOwnerProperty',
+			);
+		}
 	}
 
-	_singleValueUpdate(propertyName: string, value: string | number | boolean | null | undefined) {
-		const partialObject = {} as any;
-		partialObject[propertyName] = value;
+	_partialUpdate(partialObject: UmbPropertyTypeModel) {
+		if (!this._property || !this._propertyStructureHelper) return;
+		this._propertyStructureHelper.partialUpdateProperty(this._property.id, partialObject);
+	}
 
-		this.dispatchEvent(new CustomEvent('umb:partial-property-update', { detail: partialObject }));
+	_singleValueUpdate<PropertyNameType extends keyof UmbPropertyTypeModel>(
+		propertyName: PropertyNameType,
+		value: UmbPropertyTypeModel[PropertyNameType],
+	) {
+		if (!this._property || !this._propertyStructureHelper) return;
+		const partialObject: Partial<UmbPropertyTypeModel> = {};
+		partialObject[propertyName] = value === null ? undefined : value;
+		this._propertyStructureHelper.partialUpdateProperty(this._property.id, partialObject);
 	}
 
 	#onToggleAliasLock() {
@@ -132,21 +165,22 @@ export class UmbContentTypeWorkspacePropertyElement extends UmbLitElement {
 	async #requestRemove(e: Event) {
 		e.preventDefault();
 		e.stopImmediatePropagation();
-		if (!this.property || !this.property.id) return;
+		if (!this._property || !this._property.id) return;
 
+		// TODO: Do proper localization here: [NL]
 		await umbConfirmModal(this, {
 			headline: `${this.localize.term('actions_delete')} property`,
 			content: html`<umb-localize key="contentTypeEditor_confirmDeletePropertyMessage" .args=${[
-				this.property.name ?? this.property.id,
+				this._property.name ?? this._property.id,
 			]}>
-					Are you sure you want to delete the property <strong>${this.property.name ?? this.property.id}</strong>
+					Are you sure you want to delete the property <strong>${this._property.name ?? this._property.id}</strong>
 				</umb-localize>
 				</div>`,
 			confirmLabel: this.localize.term('actions_delete'),
 			color: 'danger',
 		});
 
-		this.dispatchEvent(new CustomEvent('property-delete'));
+		this._propertyStructureHelper?.removeProperty(this._property.id);
 	}
 
 	#onNameChange(event: UUIInputEvent) {