@umbraco-cms/backoffice 14.0.0-c5787966 → 14.0.0-d1fdb88f

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

@@ -4,11 +4,13 @@ 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 { 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 { UUIInputEvent } from '../../../../../../external/uui/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';
+import { UmbTextStyles } from '../../../../../../shared/style/index.js';
 /**
  *  @element document-type-workspace-view-edit-property
  *  @description - Element for displaying a property in an workspace.
@@ -28,11 +30,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 +58,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 +78,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 +133,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,16 +152,87 @@ 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 class="uui-text">
+								${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();
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				display: grid;
@@ -171,7 +268,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 +293,7 @@ export let UmbDocumentTypeWorkspacePropertyElement = class UmbDocumentTypeWorksp
 			}
 
 			#editor {
+				position: relative;
 				background-color: var(--uui-color-background);
 			}
 			#alias-input,
@@ -231,6 +330,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 +376,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);

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

@@ -4,8 +4,8 @@ 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 { css, html, customElement, property, state, repeat } from '../../../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../../../external/uui/index.js';
+import { css, html, customElement, property, state, repeat, ifDefined } from '../../../../../../external/lit/index.js';
+import { UmbTextStyles } from "../../../../../../shared/style/index.js";
 import { UmbContentTypeContainerStructureHelper } from '../../../../../core/content-type/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
@@ -18,7 +18,6 @@ export let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWor
     set ownerTabId(value) {
         if (value === this._ownerTabId)
             return;
-        console.log('ownerTabId', value);
         const oldValue = this._ownerTabId;
         this._ownerTabId = value;
         this._groupStructureHelper.setOwnerId(value);
@@ -70,7 +69,7 @@ export let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWor
             ? html `
 						<uui-box>
 							<umb-document-type-workspace-view-edit-properties
-								container-id=${this.ownerTabId}
+								container-id=${ifDefined(this.ownerTabId === null ? undefined : this.ownerTabId)}
 								container-type="Tab"
 								container-name=${this.tabName || ''}></umb-document-type-workspace-view-edit-properties>
 						</uui-box>
@@ -95,15 +94,21 @@ export let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWor
             : html `<div slot="header"><b>${group.name ?? ''}</b> (Inherited)</div>`}
 					</div>
 					<umb-document-type-workspace-view-edit-properties
-						container-id=${group.id}
+						container-id=${ifDefined(group.id)}
 						container-type="Group"
 						container-name=${group.name || ''}></umb-document-type-workspace-view-edit-properties>
 				</uui-box>`)}
-			<uui-button id="add" look="placeholder" @click=${this.#onAddGroup}> Add Group </uui-button>
+			<uui-button
+				label=${this.localize.term('contentTypeEditor_addGroup')}
+				id="add"
+				look="placeholder"
+				@click=${this.#onAddGroup}>
+				${this.localize.term('contentTypeEditor_addGroup')}
+			</uui-button>
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			#add {
 				width: 100%;

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

@@ -8,8 +8,11 @@ export declare class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitEleme
     _tabs?: Array<PropertyTypeContainerModelBaseModel>;
     private _routerPath?;
     private _activePath;
+    private _buttonDisabled;
     private _workspaceContext?;
     private _tabsStructureHelper;
+    private _modalManagerContext?;
+    private _tabElements;
     constructor();
     private _observeRootGroups;
     private _createRoutes;

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

@@ -4,12 +4,13 @@ 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 { css, html, customElement, state, repeat } from '../../../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../../../external/uui/index.js';
+import { css, html, customElement, state, repeat, nothing, query } from '../../../../../../external/lit/index.js';
 import { UmbContentTypeContainerStructureHelper } from '../../../../../core/content-type/index.js';
 import { encodeFolderName } from '../../../../../../shared/router/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
+import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN } from '../../../../../core/modal/index.js';
+import { UmbTextStyles } from '../../../../../../shared/style/index.js';
 export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement {
     constructor() {
         super();
@@ -17,7 +18,9 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
         this._hasRootGroups = false;
         this._routes = [];
         this._activePath = '';
+        this._buttonDisabled = false;
         this._tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
+        //TODO: We need to differentiate between local and composition tabs (and hybrids)
         this._tabsStructureHelper.setIsRoot(true);
         this._tabsStructureHelper.setContainerChildType('Tab');
         this.observe(this._tabsStructureHelper.containers, (tabs) => {
@@ -30,6 +33,9 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
             this._tabsStructureHelper.setStructureManager(workspaceContext.structure);
             this._observeRootGroups();
         });
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (context) => {
+            this._modalManagerContext = context;
+        });
     }
     _observeRootGroups() {
         if (!this._workspaceContext)
@@ -79,32 +85,57 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
         }
         this._routes = routes;
     }
-    #requestRemoveTab(tabId) {
+    #requestRemoveTab(tab) {
+        const Message = {
+            headline: 'Delete tab',
+            content: html `<umb-localize key="contentTypeEditor_confirmDeleteTabMessage" .args=${[tab?.name ?? tab?.id]}>Are you sure you want to delete the tab <strong>${tab?.name ?? tab?.id}</strong></umb-localize>
+				<div style="color:var(--uui-color-danger-emphasis)">
+					<umb-localize key="contentTypeEditor_confirmDeleteTabNotice">This will delete all items that doesn't belong to a composition.</umb-localize>
+				</div>`,
+            confirmLabel: this.localize.term('actions_delete'),
+            color: 'danger',
+        };
         // TODO: If this tab is composed of other tabs, then notify that it will only delete the local tab.
-        // TODO: Update URL when removing tab.
-        this.#remove(tabId);
+        const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, Message);
+        modalHandler?.onSubmit().then(() => {
+            this.#remove(tab?.id);
+        });
     }
     #remove(tabId) {
         if (!tabId)
             return;
         this._workspaceContext?.structure.removeContainer(null, tabId);
+        this._tabsStructureHelper?.isOwnerContainer(tabId)
+            ? window.history.replaceState(null, '', this._routerPath + this._routes[0]?.path ?? '/root')
+            : '';
     }
     async #addTab() {
+        if (this.shadowRoot?.querySelector('uui-tab[active] uui-input') &&
+            (this.shadowRoot?.querySelector('uui-tab[active] uui-input')).value === '') {
+            this.#focusInput();
+            return;
+        }
         const tab = await this._workspaceContext?.structure.createContainer(null, null, 'Tab');
         if (tab) {
             const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || '');
             window.history.replaceState(null, '', path);
-            setTimeout(() => {
-                this.shadowRoot?.querySelector('uui-tab[active] uui-input')?.focus();
-            }, 100);
+            this.#focusInput();
         }
     }
-    #tabNameChanged(event, tab) {
+    async #focusInput() {
+        setTimeout(() => {
+            this.shadowRoot?.querySelector('uui-tab[active] uui-input')?.focus();
+        }, 100);
+    }
+    async #tabNameChanged(event, tab) {
+        if (this._buttonDisabled)
+            this._buttonDisabled = !this._buttonDisabled;
         let newName = event.target.value;
         if (newName === '') {
             newName = 'Unnamed';
+            event.target.value = 'Unnamed';
         }
-        const changedName = this._workspaceContext?.structure.makeContainerNameUniqueForOwnerDocument(newName, 'Tab');
+        const changedName = this._workspaceContext?.structure.makeContainerNameUniqueForOwnerDocument(newName, 'Tab', tab.id);
         // Check if it collides with another tab name of this same document-type, if so adjust name:
         if (changedName) {
             newName = changedName;
@@ -122,42 +153,64 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
         const rootTabPath = this._routerPath + '/root';
         const rootTabActive = rootTabPath === this._activePath;
         return html `<uui-tab-group>
-			<uui-tab
-				class=${this._hasRootGroups || rootTabActive ? '' : 'content-tab-is-empty'}
-				label="Content"
-				.active=${rootTabActive}
-				href=${rootTabPath}
-				>Content</uui-tab
-			>
-			${repeat(this._tabs, (tab) => tab.id + tab.name, (tab) => {
+				<uui-tab
+					class=${this._hasRootGroups || rootTabActive ? '' : 'content-tab-is-empty'}
+					label="Content"
+					.active=${rootTabActive}
+					href=${rootTabPath}>
+					<umb-localize key="general_content">Content</umb-localize>
+				</uui-tab>
+				${repeat(this._tabs, (tab) => tab.id + tab.name, (tab) => {
             const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || '');
             const tabActive = path === this._activePath;
-            return html `<uui-tab label=${tab.name} .active=${tabActive} href=${path}>
-						${tabActive && this._tabsStructureHelper.isOwnerContainer(tab.id)
-                ? html ` <uui-input
-									label="Tab name"
-									look="placeholder"
-									value=${tab.name}
-									placeholder="Enter a name"
-									@change=${(e) => this.#tabNameChanged(e, tab)}
-									@blur=${(e) => this.#tabNameChanged(e, tab)}>
-									<uui-button
-										label="Remove tab"
-										class="trash"
-										slot="append"
-										@click=${() => this.#requestRemoveTab(tab.id)}
-										compact>
-										<uui-icon name="umb:trash"></uui-icon>
-									</uui-button>
-							  </uui-input>`
-                : tab.name}
-					</uui-tab>`;
+            return html `<uui-tab label=${tab.name ?? 'unnamed'} .active=${tabActive} href=${path}>
+							<div class="tab">
+								${!this._tabsStructureHelper.isOwnerContainer(tab.id)
+                ? html `<uui-icon class="external" name="umb:merge"></uui-icon> `
+                : nothing}
+								${tabActive && this._tabsStructureHelper.isOwnerContainer(tab.id)
+                ? html `<uui-input
+											id="input"
+											label="Tab name"
+											look="placeholder"
+											value="${tab.name}"
+											placeholder="Unnamed"
+											@change=${(e) => this.#tabNameChanged(e, tab)}
+											@blur=${(e) => this.#tabNameChanged(e, tab)}
+											@input=${() => (this._buttonDisabled = true)}
+											@focus=${(e) => (e.target.value ? nothing : (this._buttonDisabled = true))}
+											auto-width>
+											<uui-button
+												label="Remove tab"
+												class="trash"
+												slot="append"
+												?disabled=${this._buttonDisabled}
+												@click=${() => this.#requestRemoveTab(tab)}
+												compact>
+												<uui-icon name="umb:trash"></uui-icon>
+											</uui-button>
+									  </uui-input>`
+                : html `<div class="no-edit">
+											${tab.name}
+											${this._tabsStructureHelper.isOwnerContainer(tab.id)
+                    ? html `<uui-button
+														label="Remove tab"
+														class="trash"
+														slot="append"
+														@click=${() => this.#requestRemoveTab(tab)}
+														compact>
+														<uui-icon name="umb:trash"></uui-icon>
+												  </uui-button> `
+                    : nothing}
+									  </div>`}
+							</div>
+						</uui-tab>`;
         })}
+			</uui-tab-group>
 			<uui-button id="add-tab" @click="${this.#addTab}" label="Add tab" compact>
 				<uui-icon name="umb:add"></uui-icon>
 				Add tab
-			</uui-button>
-		</uui-tab-group>`;
+			</uui-button>`;
     }
     renderActions() {
         return html `<div class="tab-actions">
@@ -165,9 +218,9 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
 				<uui-icon name="umb:merge"></uui-icon>
 				Compositions
 			</uui-button>
-			<uui-button label="Recorder" compact>
+			<uui-button label=${this.localize.term('general_reorder')} compact>
 				<uui-icon name="umb:navigation"></uui-icon>
-				Recorder
+			<umb-localize key="general_reorder">Reorder</umb-localize>
 			</uui-button>
 		</div>`;
     }
@@ -175,7 +228,8 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
         return html `
 			<umb-body-layout header-fit-height>
 				<div id="header" slot="header">
-					${this._routerPath ? this.renderTabsNavigation() : ''}${this.renderActions()}
+					<div id="tabs-wrapper">${this._routerPath ? this.renderTabsNavigation() : ''}</div>
+					${this.renderActions()}
 				</div>
 				<umb-router-slot
 					.routes=${this._routes}
@@ -190,7 +244,7 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				position: relative;
@@ -209,13 +263,51 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
 				flex-wrap: nowrap;
 			}
 
+			#tabs-wrapper {
+				display: flex;
+			}
+
 			.content-tab-is-empty {
-				height: 31px;
 				align-self: center;
 				border-radius: 3px;
 				--uui-tab-text: var(--uui-color-text-alt);
 				border: dashed 1px var(--uui-color-border-emphasis);
 			}
+
+			uui-tab {
+				border-left: 1px solid transparent;
+				border-right: 1px solid var(--uui-color-border);
+			}
+
+			uui-tab:not(:hover, :focus) .trash {
+				opacity: 0;
+				transition: opacity 120ms;
+			}
+
+			.tab {
+				position: relative;
+			}
+
+			.external {
+				vertical-align: sub;
+			}
+
+			uui-input:not(:focus, :hover) {
+				border: 1px solid transparent;
+			}
+
+			.no-edit {
+				display: inline-flex;
+				padding-left: var(--uui-size-space-3);
+				border: 1px solid transparent;
+				align-items: center;
+				gap: var(--uui-size-space-3);
+			}
+
+			.trash {
+				opacity: 1;
+				transition: opacity 120ms;
+			}
 		`,
     ]; }
 };
@@ -231,6 +323,12 @@ __decorate([
 __decorate([
     state()
 ], UmbDocumentTypeWorkspaceViewEditElement.prototype, "_activePath", void 0);
+__decorate([
+    state()
+], UmbDocumentTypeWorkspaceViewEditElement.prototype, "_buttonDisabled", void 0);
+__decorate([
+    query('uui-tab')
+], UmbDocumentTypeWorkspaceViewEditElement.prototype, "_tabElements", void 0);
 UmbDocumentTypeWorkspaceViewEditElement = __decorate([
     customElement('umb-document-type-workspace-view-edit')
 ], UmbDocumentTypeWorkspaceViewEditElement);