@umbraco-cms/backoffice 14.0.0-8a5fc0ad → 14.0.0-8d2a75e2

package/dist-cms/packages/documents/document-types/entity-actions/manifests.js

@@ -13,8 +13,6 @@ const entityActions = [
             label: 'Delete (TBD)',
             repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS,
             api: UmbDeleteEntityAction,
-        },
-        conditions: {
             entityTypes: [entityType],
         },
     },
@@ -28,8 +26,6 @@ const entityActions = [
             label: 'Move',
             repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS,
             api: UmbMoveEntityAction,
-        },
-        conditions: {
             entityTypes: [entityType],
         },
     },
@@ -43,8 +39,6 @@ const entityActions = [
             label: 'Copy',
             repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS,
             api: UmbCopyEntityAction,
-        },
-        conditions: {
             entityTypes: [entityType],
         },
     },
@@ -58,8 +52,6 @@ const entityActions = [
             label: 'Sort',
             repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS,
             api: UmbSortChildrenOfEntityAction,
-        },
-        conditions: {
             entityTypes: [entityType],
         },
     },

package/dist-cms/packages/documents/document-types/menu-item/manifests.js

@@ -8,8 +8,6 @@ const menuItem = {
         treeAlias: 'Umb.Tree.DocumentTypes',
         label: 'Document Types',
         icon: 'umb:folder',
-    },
-    conditions: {
         menus: ['Umb.Menu.Settings'],
     },
 };

package/dist-cms/packages/documents/document-types/tree/manifests.js

@@ -13,7 +13,7 @@ const treeItem = {
     kind: 'entity',
     alias: 'Umb.TreeItem.DocumentType',
     name: 'Document Type Tree Item',
-    conditions: {
+    meta: {
         entityTypes: ['document-type-root', 'document-type'],
     },
 };

package/dist-cms/packages/documents/document-types/workspace/document-type-workspace-editor.element.js

@@ -5,10 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UUIInputEvent, UUITextStyles } from '../../../../external/uui/index.js';
-import { css, html, customElement, state } from '../../../../external/lit/index.js';
+import { css, html, customElement, state, ifDefined } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_ICON_PICKER_MODAL, } from '../../../core/modal/index.js';
-import { UMB_ENTITY_WORKSPACE_CONTEXT } from '../../../core/workspace/index.js';
+import { UMB_WORKSPACE_CONTEXT } from '../../../core/workspace/index.js';
 import { generateAlias } from '../../../../shared/utils/index.js';
 export let UmbDocumentTypeWorkspaceEditorElement = class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
     // TODO: Color should be using an alias, and look up in some dictionary/key/value) of project-colors.
@@ -16,7 +16,7 @@ export let UmbDocumentTypeWorkspaceEditorElement = class UmbDocumentTypeWorkspac
     constructor() {
         super();
         this._aliasLocked = true;
-        this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (instance) => {
+        this.consumeContext(UMB_WORKSPACE_CONTEXT, (instance) => {
             this.#workspaceContext = instance;
             this.#observeDocumentType();
         });
@@ -85,15 +85,16 @@ export let UmbDocumentTypeWorkspaceEditorElement = class UmbDocumentTypeWorkspac
         return html `
 			<umb-workspace-editor alias="Umb.Workspace.DocumentType">
 				<div id="header" slot="header">
-					<uui-button id="icon" @click=${this._handleIconClick} compact>
-						<uui-icon name="${this._icon}" style="color: ${this._iconColorAlias}"></uui-icon>
+					<uui-button id="icon" @click=${this._handleIconClick} label="icon" compact>
+						<uui-icon name="${ifDefined(this._icon)}" style="color: ${this._iconColorAlias}"></uui-icon>
 					</uui-button>
 
-					<uui-input id="name" .value=${this._name} @input="${this.#onNameChange}">
+					<uui-input id="name" .value=${this._name} @input="${this.#onNameChange}" label="name">
 						<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
 						<uui-input
 							name="alias"
 							slot="append"
+							label="alias"
 							@input=${this.#onAliasChange}
 							.value=${this._alias}
 							placeholder="Enter alias..."

package/dist-cms/packages/documents/document-types/workspace/document-type-workspace.context.js

@@ -3,7 +3,7 @@ import { UmbContentTypePropertyStructureManager } from '../../../core/content-ty
 import { UmbWorkspaceContext } from '../../../core/workspace/index.js';
 export class UmbDocumentTypeWorkspaceContext extends UmbWorkspaceContext {
     constructor(host) {
-        super(host, new UmbDocumentTypeRepository(host));
+        super(host, 'Umb.Workspace.DocumentType', new UmbDocumentTypeRepository(host));
         this.structure = new UmbContentTypePropertyStructureManager(this.host, this.repository);
         // General for content types:
         this.data = this.structure.ownerDocumentType;

package/dist-cms/packages/documents/document-types/workspace/manifests.js

@@ -20,9 +20,12 @@ const workspaceEditorViews = [
             pathname: 'design',
             icon: 'umb:document-dashed-line',
         },
-        conditions: {
-            workspaces: ['Umb.Workspace.DocumentType'],
-        },
+        conditions: [
+            {
+                alias: 'Umb.Condition.WorkspaceAlias',
+                match: workspace.alias,
+            },
+        ],
     },
     {
         type: 'workspaceEditorView',
@@ -35,9 +38,12 @@ const workspaceEditorViews = [
             pathname: 'structure',
             icon: 'umb:mindmap',
         },
-        conditions: {
-            workspaces: ['Umb.Workspace.DocumentType'],
-        },
+        conditions: [
+            {
+                alias: 'Umb.Condition.WorkspaceAlias',
+                match: workspace.alias,
+            },
+        ],
     },
     {
         type: 'workspaceEditorView',
@@ -50,9 +56,12 @@ const workspaceEditorViews = [
             pathname: 'settings',
             icon: 'umb:settings',
         },
-        conditions: {
-            workspaces: ['Umb.Workspace.DocumentType'],
-        },
+        conditions: [
+            {
+                alias: 'Umb.Condition.WorkspaceAlias',
+                match: workspace.alias,
+            },
+        ],
     },
     {
         type: 'workspaceEditorView',
@@ -65,9 +74,12 @@ const workspaceEditorViews = [
             pathname: 'templates',
             icon: 'umb:layout',
         },
-        conditions: {
-            workspaces: ['Umb.Workspace.DocumentType'],
-        },
+        conditions: [
+            {
+                alias: 'Umb.Condition.WorkspaceAlias',
+                match: workspace.alias,
+            },
+        ],
     },
 ];
 const workspaceActions = [
@@ -81,9 +93,12 @@ const workspaceActions = [
             color: 'positive',
             api: UmbSaveWorkspaceAction,
         },
-        conditions: {
-            workspaces: ['Umb.Workspace.DocumentType'],
-        },
+        conditions: [
+            {
+                alias: 'Umb.Condition.WorkspaceAlias',
+                match: workspace.alias,
+            },
+        ],
     },
 ];
 export const manifests = [workspace, ...workspaceEditorViews, ...workspaceActions];

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.d.ts

@@ -1,7 +1,7 @@
+import './document-type-workspace-view-edit-property.element.js';
 import { UmbContentTypePropertyStructureHelper, PropertyContainerTypes } from '../../../../../core/content-type/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
-import { PropertyTypeModelBaseModel } from '../../../../../../external/backend-api/index.js';
-import './document-type-workspace-view-edit-property.element.js';
+import { DocumentTypeResponseModel, PropertyTypeModelBaseModel } from '../../../../../../external/backend-api/index.js';
 export declare class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitElement {
     #private;
     private _containerId;
@@ -13,7 +13,10 @@ export declare class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends U
     set containerType(value: PropertyContainerTypes | undefined);
     _propertyStructureHelper: UmbContentTypePropertyStructureHelper;
     _propertyStructure: Array<PropertyTypeModelBaseModel>;
+    _ownerDocumentTypes?: DocumentTypeResponseModel[];
+    protected _modalRouteNewProperty?: string;
     constructor();
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.js

@@ -4,13 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import './document-type-workspace-view-edit-property.element.js';
 import { css, html, customElement, property, state, repeat, ifDefined } from '../../../../../../external/lit/index.js';
 import { UUITextStyles } from '../../../../../../external/uui/index.js';
 import { UmbContentTypePropertyStructureHelper } from '../../../../../core/content-type/index.js';
 import { UmbSorterController } from '../../../../../core/sorter/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
-import './document-type-workspace-view-edit-property.element.js';
-import { UMB_ENTITY_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
+import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
+import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '../../../../../core/modal/index.js';
 const SORTER_CONFIG = {
     compareElementToModel: (element, model) => {
         return element.getAttribute('data-umb-property-id') === model.id;
@@ -72,35 +73,69 @@ export let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocument
         });
         this._propertyStructureHelper = new UmbContentTypePropertyStructureHelper(this);
         this._propertyStructure = [];
-        this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (workspaceContext) => {
+        this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
             this._propertyStructureHelper.setStructureManager(workspaceContext.structure);
         });
         this.observe(this._propertyStructureHelper.propertyStructure, (propertyStructure) => {
             this._propertyStructure = propertyStructure;
             this.#propertySorter.setModel(this._propertyStructure);
         });
+        // Note: Route for adding a new property
+        new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL)
+            .addAdditionalPath('new-property')
+            .onSetup(async () => {
+            return (await this._propertyStructureHelper.createPropertyScaffold(this._containerId)) ?? false;
+        })
+            .onSubmit((result) => {
+            this.#addProperty(result);
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            this._modalRouteNewProperty = routeBuilder(null);
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const doctypes = this._propertyStructureHelper.getOwnerDocumentTypes();
+        if (!doctypes)
+            return;
+        this.observe(doctypes, (documents) => {
+            this._ownerDocumentTypes = documents;
+        }, 'observeOwnerDocumentTypes');
     }
-    async #onAddProperty() {
-        const property = await this._propertyStructureHelper.addProperty(this._containerId);
-        if (!property)
+    async #addProperty(propertyData) {
+        const propertyPlaceholder = await this._propertyStructureHelper.addProperty(this._containerId);
+        if (!propertyPlaceholder)
             return;
-        // TODO: Figure out how we from this location can get into the route modal, via URL.
-        // The modal is registered by the document-type-workspace-view-edit-property element, therefor a bit hard to get the URL from here.
+        this._propertyStructureHelper.partialUpdateProperty(propertyPlaceholder.id, propertyData);
     }
     render() {
         return html `<div id="property-list">
-				${repeat(this._propertyStructure, (property) => property.id ?? '' + property.containerId ?? '' + property.sortOrder ?? '', (property) => html `<document-type-workspace-view-edit-property
+				${repeat(this._propertyStructure, (property) => property.id ?? '' + property.containerId ?? '' + property.sortOrder ?? '', (property) => {
+            // Note: This piece might be moved into the property component
+            const inheritedFromDocument = this._ownerDocumentTypes?.find((types) => types.containers?.find((containers) => containers.id === property.containerId));
+            return html `<document-type-workspace-view-edit-property
 							class="property"
-							data-umb-property-id=${property.id}
-							data-property-container-is=${property.containerId}
-							data-container-id=${this.containerId}
-							?inherited=${ifDefined(property.containerId !== this.containerId)}
+							data-umb-property-id=${ifDefined(property.id)}
+							owner-document-type-id=${ifDefined(inheritedFromDocument?.id)}
+							owner-document-type-name=${ifDefined(inheritedFromDocument?.name)}
+							?inherited=${property.containerId !== this.containerId}
 							.property=${property}
 							@partial-property-update=${(event) => {
-            this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail);
-        }}></document-type-workspace-view-edit-property>`)}
+                this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail);
+            }}
+							@property-delete=${() => {
+                this._propertyStructureHelper.removeProperty(property.id);
+            }}>
+						</document-type-workspace-view-edit-property>`;
+        })}
 			</div>
-			<uui-button id="add" look="placeholder" @click=${this.#onAddProperty}> Add property </uui-button> `;
+			<uui-button
+				label=${this.localize.term('contentTypeEditor_addProprety')}
+				id="add"
+				look="placeholder"
+				href=${ifDefined(this._modalRouteNewProperty)}>
+				<umb-localize key="contentTypeEditor_addProprety">Add property</umb-localize>
+			</uui-button> `;
     }
     static { this.styles = [
         UUITextStyles,
@@ -123,6 +158,12 @@ __decorate([
 __decorate([
     state()
 ], UmbDocumentTypeWorkspaceViewEditPropertiesElement.prototype, "_propertyStructure", void 0);
+__decorate([
+    state()
+], UmbDocumentTypeWorkspaceViewEditPropertiesElement.prototype, "_ownerDocumentTypes", void 0);
+__decorate([
+    state()
+], UmbDocumentTypeWorkspaceViewEditPropertiesElement.prototype, "_modalRouteNewProperty", void 0);
 UmbDocumentTypeWorkspaceViewEditPropertiesElement = __decorate([
     customElement('umb-document-type-workspace-view-edit-properties')
 ], UmbDocumentTypeWorkspaceViewEditPropertiesElement);

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.d.ts

@@ -1,3 +1,4 @@
+import { nothing } from '../../../../../../external/lit/index.js';
 import { PropertyTypeModelBaseModel } from '../../../../../../external/backend-api/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 /**
@@ -24,13 +25,22 @@ export declare class UmbDocumentTypeWorkspacePropertyElement extends UmbLitEleme
      * @default undefined
      */
     inherited?: boolean;
+    private _modalManagerContext?;
     protected _modalRoute?: string;
+    protected _editDocumentTypePath?: string;
+    get modalRoute(): string | undefined;
+    ownerDocumentTypeId?: string;
+    ownerDocumentTypeName?: string;
+    private _dataTypeName?;
+    setDataType(dataTypeId: string | undefined): Promise<void>;
     constructor();
     _partialUpdate(partialObject: PropertyTypeModelBaseModel): void;
     _singleValueUpdate(propertyName: string, value: string | number | boolean | null | undefined): void;
-    renderInheritedProperty(): "" | import("lit-html").TemplateResult<1>;
     private _aliasLocked;
     renderEditableProperty(): "" | import("lit-html").TemplateResult<1>;
+    renderInheritedProperty(): "" | import("lit-html").TemplateResult<1>;
+    renderPropertyAlias(): "" | import("lit-html").TemplateResult<1>;
+    renderPropertyTags(): import("lit-html").TemplateResult<1> | typeof nothing;
     render(): "" | import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.js

@@ -5,10 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UUIInputEvent, UUITextStyles } from '../../../../../../external/uui/index.js';
-import { css, html, customElement, property, state } from '../../../../../../external/lit/index.js';
-import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '../../../../../core/modal/index.js';
+import { css, html, customElement, property, state, ifDefined, nothing } from '../../../../../../external/lit/index.js';
+import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_PROPERTY_SETTINGS_MODAL, UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController, } from '../../../../../core/modal/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import { generateAlias } from '../../../../../../shared/utils/index.js';
+import { UmbDataTypeRepository } from '../../../../../settings/data-types/index.js';
 /**
  *  @element document-type-workspace-view-edit-property
  *  @description - Element for displaying a property in an workspace.
@@ -28,11 +29,22 @@ export let UmbDocumentTypeWorkspacePropertyElement = class UmbDocumentTypeWorksp
         const oldValue = this._property;
         this._property = value;
         this.#modalRegistration.setUniquePathValue('propertyId', value?.id?.toString());
+        this.setDataType(this._property?.dataTypeId);
         this.requestUpdate('property', oldValue);
     }
+    #dataTypeRepository;
     #modalRegistration;
+    get modalRoute() {
+        return this._modalRoute;
+    }
+    async setDataType(dataTypeId) {
+        if (!dataTypeId)
+            return;
+        this.#dataTypeRepository.requestById(dataTypeId).then((x) => (this._dataTypeName = x?.data?.name));
+    }
     constructor() {
         super();
+        this.#dataTypeRepository = new UmbDataTypeRepository(this);
         this._aliasLocked = true;
         this.#modalRegistration = new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL)
             .addUniquePaths(['propertyId'])
@@ -45,6 +57,17 @@ export let UmbDocumentTypeWorkspacePropertyElement = class UmbDocumentTypeWorksp
             .observeRouteBuilder((routeBuilder) => {
             this._modalRoute = routeBuilder(null);
         });
+        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath('document-type')
+            .onSetup(() => {
+            return { entityType: 'document-type', preset: {} };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            this._editDocumentTypePath = routeBuilder({});
+        });
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (context) => {
+            this._modalManagerContext = context;
+        });
     }
     _partialUpdate(partialObject) {
         this.dispatchEvent(new CustomEvent('partial-property-update', { detail: partialObject }));
@@ -54,21 +77,36 @@ export let UmbDocumentTypeWorkspacePropertyElement = class UmbDocumentTypeWorksp
         partialObject[propertyName] = value;
         this.dispatchEvent(new CustomEvent('partial-property-update', { detail: partialObject }));
     }
-    renderInheritedProperty() {
-        return this.property
-            ? html `
-					<div id="header">
-						<b>${this.property.name}</b>
-						<i>${this.property.alias}</i>
-						<p>${this.property.description}</p>
-					</div>
-					<div id="editor"></div>
-			  `
-            : '';
-    }
     #onToggleAliasLock() {
         this._aliasLocked = !this._aliasLocked;
     }
+    #requestRemove(e) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        if (!this.property || !this.property.id)
+            return;
+        const Message = {
+            headline: `${this.localize.term('actions_delete')} property`,
+            content: html `<umb-localize key="contentTypeEditor_confirmDeletePropertyMessage" .args=${[
+                this.property.name || this.property.id,
+            ]}>
+					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',
+        };
+        const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, Message);
+        modalHandler
+            ?.onSubmit()
+            .then(() => {
+            this.dispatchEvent(new CustomEvent('property-delete'));
+        })
+            .catch(() => {
+            // We do not need to react to cancel, so we will leave an empty method to prevent Uncaught Promise Rejection error.
+            return;
+        });
+    }
     #onNameChange(event) {
         if (event instanceof UUIInputEvent) {
             const target = event.composedPath()[0];
@@ -94,31 +132,18 @@ export let UmbDocumentTypeWorkspacePropertyElement = class UmbDocumentTypeWorksp
 						<uui-input
 							name="label"
 							id="label-input"
-							placeholder="Label..."
+							placeholder=${this.localize.term('placeholders_label')}
+							label="label"
 							.value=${this.property.name}
 							@input=${this.#onNameChange}></uui-input>
-						<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
-						<uui-input
-							name="alias"
-							id="alias-input"
-							placeholder="Alias..."
-							.value=${this.property.alias}
-							?disabled=${this._aliasLocked}
-							@input=${(e) => {
-                if (e.target)
-                    this._singleValueUpdate('alias', e.target.value);
-            }}>
-							<!-- TODO: validation for bad characters -->
-							<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
-								<uui-icon name=${this._aliasLocked ? 'umb:lock' : 'umb:unlocked'}></uui-icon>
-							</div>
-						</uui-input>
+						${this.renderPropertyAlias()}
 						<slot name="property-action-menu"></slot>
 						<p>
 							<uui-textarea
+								label="description"
 								name="description"
 								id="description-input"
-								placeholder="Enter a description..."
+								placeholder=${this.localize.term('placeholders_enterDescription')}
 								.value=${this.property.description}
 								@input=${(e) => {
                 if (e.target)
@@ -126,10 +151,81 @@ export let UmbDocumentTypeWorkspacePropertyElement = class UmbDocumentTypeWorksp
             }}></uui-textarea>
 						</p>
 					</div>
-					<uui-button id="editor" label="Edit property settings" href=${this._modalRoute}><b></b></uui-button>
+					<uui-button
+						id="editor"
+						label=${this.localize.term('contentTypeEditor_editorSettings')}
+						href=${ifDefined(this._modalRoute)}>
+						${this.renderPropertyTags()}
+						<uui-action-bar>
+							<uui-button label="${this.localize.term('actions_delete')}" @click="${this.#requestRemove}">
+								<uui-icon name="delete"></uui-icon>
+							</uui-button>
+						</uui-action-bar>
+					</uui-button>
+			  `
+            : '';
+    }
+    renderInheritedProperty() {
+        return this.property
+            ? html `
+					<div id="header">
+						<b>${this.property.name}</b>
+						<i>${this.property.alias}</i>
+						<p>${this.property.description}</p>
+					</div>
+					<div id="editor">
+						${this.renderPropertyTags()}
+						<uui-tag look="default" class="inherited">
+							<uui-icon name="umb:merge"></uui-icon>
+							<span>
+								${this.localize.term('contentTypeEditor_inheritedFrom')}
+								<a href=${this._editDocumentTypePath + 'edit/' + this.ownerDocumentTypeId}>
+									${this.ownerDocumentTypeName ?? '??'}
+								</a>
+							</span>
+						</uui-tag>
+					</div>
 			  `
             : '';
     }
+    renderPropertyAlias() {
+        return this.property
+            ? html `<uui-input
+					name="alias"
+					id="alias-input"
+					label="alias"
+					placeholder=${this.localize.term('placeholders_alias')}
+					.value=${this.property.alias}
+					?disabled=${this._aliasLocked}
+					@input=${(e) => {
+                if (e.target)
+                    this._singleValueUpdate('alias', e.target.value);
+            }}>
+					<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
+					<!-- TODO: validation for bad characters -->
+					<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
+						<uui-icon name=${this._aliasLocked ? 'umb:lock' : 'umb:unlocked'}></uui-icon>
+					</div>
+			  </uui-input>`
+            : '';
+    }
+    renderPropertyTags() {
+        return this.property
+            ? html `<div class="types">
+					${this.property.dataTypeId ? html `<uui-tag look="default">${this._dataTypeName}</uui-tag>` : nothing}
+					${this.property.variesByCulture
+                ? html `<uui-tag look="default">
+								<uui-icon name="umb:shuffle"></uui-icon> ${this.localize.term('contentTypeEditor_cultureVariantLabel')}
+						  </uui-tag>`
+                : nothing}
+					${this.property.appearance?.labelOnTop == true
+                ? html `<uui-tag look="default">
+								<span>${this.localize.term('contentTypeEditor_displaySettingsLabelOnTop')}</span>
+						  </uui-tag>`
+                : nothing}
+			  </div>`
+            : nothing;
+    }
     render() {
         // TODO: Only show alias on label if user has access to DocumentType within settings:
         return this.inherited ? this.renderInheritedProperty() : this.renderEditableProperty();
@@ -171,7 +267,8 @@ export let UmbDocumentTypeWorkspacePropertyElement = class UmbDocumentTypeWorksp
 			:host(.--umb-sorter-placeholder) {
 				height: 2px;
 			}
-			:host(.--umb-sorter-placeholder) > div {
+			:host(.--umb-sorter-placeholder) > div,
+			:host(.--umb-sorter-placeholder) > uui-button {
 				display: none;
 			}
 			:host(.--umb-sorter-placeholder)::after {
@@ -195,6 +292,7 @@ export let UmbDocumentTypeWorkspacePropertyElement = class UmbDocumentTypeWorksp
 			}
 
 			#editor {
+				position: relative;
 				background-color: var(--uui-color-background);
 			}
 			#alias-input,
@@ -231,6 +329,40 @@ export let UmbDocumentTypeWorkspacePropertyElement = class UmbDocumentTypeWorksp
 				--uui-textarea-border-color: transparent;
 				font-weight: 0.5rem; /* TODO: Cant change font size of UUI textarea yet */
 			}
+
+			.types > div uui-icon,
+			.inherited uui-icon {
+				vertical-align: sub;
+			}
+
+			.inherited {
+				position: absolute;
+				top: var(--uui-size-space-2);
+				right: var(--uui-size-space-2);
+			}
+
+			.types {
+				position: absolute;
+				top: var(--uui-size-space-2);
+				left: var(--uui-size-space-2);
+				display: flex;
+				gap: var(--uui-size-space-2);
+			}
+
+			#editor uui-action-bar {
+				position: absolute;
+				top: var(--uui-size-space-2);
+				right: var(--uui-size-space-2);
+				display: none;
+			}
+			#editor:hover uui-action-bar,
+			#editor:focus uui-action-bar {
+				display: block;
+			}
+
+			a {
+				color: inherit;
+			}
 		`,
     ]; }
 };
@@ -243,6 +375,21 @@ __decorate([
 __decorate([
     state()
 ], UmbDocumentTypeWorkspacePropertyElement.prototype, "_modalRoute", void 0);
+__decorate([
+    state()
+], UmbDocumentTypeWorkspacePropertyElement.prototype, "_editDocumentTypePath", void 0);
+__decorate([
+    property()
+], UmbDocumentTypeWorkspacePropertyElement.prototype, "modalRoute", null);
+__decorate([
+    property({ type: String, attribute: 'owner-document-type-id' })
+], UmbDocumentTypeWorkspacePropertyElement.prototype, "ownerDocumentTypeId", void 0);
+__decorate([
+    property({ type: String, attribute: 'owner-document-type-name' })
+], UmbDocumentTypeWorkspacePropertyElement.prototype, "ownerDocumentTypeName", void 0);
+__decorate([
+    state()
+], UmbDocumentTypeWorkspacePropertyElement.prototype, "_dataTypeName", void 0);
 __decorate([
     state()
 ], UmbDocumentTypeWorkspacePropertyElement.prototype, "_aliasLocked", void 0);