@umbraco-cms/backoffice 14.0.0-rc2 → 14.0.0-rc3

package/dist-cms/packages/core/content-type/workspace/views/design/content-type-design-editor.context.js

@@ -1,29 +1,23 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _UmbContentTypeDesignEditorContext_isSorting;
 import { UmbContextToken } from '../../../../../../libs/context-api/index.js';
 import { UmbContextBase } from '../../../../../../libs/class-api/index.js';
 import { UmbBooleanState } from '../../../../../../libs/observable-api/index.js';
 export const UMB_CONTENT_TYPE_DESIGN_EDITOR_CONTEXT = new UmbContextToken('UmbContentTypeDesignEditorContext');
 export class UmbContentTypeDesignEditorContext extends UmbContextBase {
+    #isSorting;
     constructor(host) {
         super(host, UMB_CONTENT_TYPE_DESIGN_EDITOR_CONTEXT);
-        _UmbContentTypeDesignEditorContext_isSorting.set(this, new UmbBooleanState(false));
-        this.isSorting = __classPrivateFieldGet(this, _UmbContentTypeDesignEditorContext_isSorting, "f").asObservable();
+        this.#isSorting = new UmbBooleanState(false);
+        this.isSorting = this.#isSorting.asObservable();
     }
     getIsSorting() {
-        return __classPrivateFieldGet(this, _UmbContentTypeDesignEditorContext_isSorting, "f").getValue();
+        return this.#isSorting.getValue();
     }
     setIsSorting(isSorting) {
-        __classPrivateFieldGet(this, _UmbContentTypeDesignEditorContext_isSorting, "f").setValue(isSorting);
+        this.#isSorting.setValue(isSorting);
     }
     destroy() {
-        __classPrivateFieldGet(this, _UmbContentTypeDesignEditorContext_isSorting, "f").destroy();
+        this.#isSorting.destroy();
         super.destroy();
     }
 }
-_UmbContentTypeDesignEditorContext_isSorting = new WeakMap();
 export { UmbContentTypeDesignEditorContext as api };

package/dist-cms/packages/core/content-type/workspace/views/design/content-type-design-editor.element.js

@@ -4,18 +4,6 @@ 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;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _UmbContentTypeDesignEditorElement_instances, _UmbContentTypeDesignEditorElement_sorter, _UmbContentTypeDesignEditorElement_workspaceContext, _UmbContentTypeDesignEditorElement_designContext, _UmbContentTypeDesignEditorElement_tabsStructureHelper, _UmbContentTypeDesignEditorElement_toggleSortMode, _UmbContentTypeDesignEditorElement_requestDeleteTab, _UmbContentTypeDesignEditorElement_deleteTab, _UmbContentTypeDesignEditorElement_addTab, _UmbContentTypeDesignEditorElement_focusInput, _UmbContentTypeDesignEditorElement_tabNameChanged, _UmbContentTypeDesignEditorElement_tabNameBlur, _UmbContentTypeDesignEditorElement_openCompositionModal, _UmbContentTypeDesignEditorElement_changeOrderNumber;
 import { UMB_CONTENT_TYPE_WORKSPACE_CONTEXT } from '../../content-type-workspace.context-token.js';
 import { UmbContentTypeDesignEditorContext } from './content-type-design-editor.context.js';
 import { css, html, customElement, state, repeat, ifDefined, nothing } from '../../../../../../external/lit/index.js';
@@ -27,19 +15,22 @@ import { UMB_MODAL_MANAGER_CONTEXT, umbConfirmModal } from '../../../../modal/in
 import { UmbTextStyles } from '../../../../style/index.js';
 import { UmbSorterController } from '../../../../sorter/index.js';
 let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement extends UmbLitElement {
+    #sorter;
+    #workspaceContext;
+    #designContext;
+    #tabsStructureHelper;
     set manifest(value) {
         this._compositionRepositoryAlias = value.meta.compositionRepositoryAlias;
     }
     constructor() {
         super();
-        _UmbContentTypeDesignEditorElement_instances.add(this);
-        _UmbContentTypeDesignEditorElement_sorter.set(this, new UmbSorterController(this, {
+        this.#sorter = new UmbSorterController(this, {
             getUniqueOfElement: (element) => element.getAttribute('data-umb-tab-id'),
             getUniqueOfModel: (tab) => tab.id,
             identifier: 'content-type-tabs-sorter',
             itemSelector: 'uui-tab',
             containerSelector: 'uui-tab-group',
-            disabledItemSelector: '#root-tab',
+            disabledItemSelector: ':not([sortable])',
             resolvePlacement: (args) => args.relatedRect.left + args.relatedRect.width * 0.5 > args.pointerX,
             onChange: ({ model }) => {
                 this._tabs = model;
@@ -54,75 +45,75 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
                 // Doesn't exist in model
                 if (newIndex === -1)
                     return;
-                // First in list
-                if (newIndex === 0 && model.length > 1) {
-                    __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f").partialUpdateContainer(item.id, { sortOrder: model[1].sortOrder - 1 });
-                    return;
+                // As origin we set prev sort order to -1, so if no other then our item will become 0
+                let prevSortOrder = -1;
+                // If not first in list, then get the sortOrder of the item before.  [NL]
+                if (newIndex > 0 && model.length > 0) {
+                    prevSortOrder = model[newIndex - 1].sortOrder;
                 }
-                // Not first in list
-                if (newIndex > 0 && model.length > 1) {
-                    const prevItemSortOrder = model[newIndex - 1].sortOrder;
-                    let weight = 1;
-                    __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f").partialUpdateContainer(item.id, { sortOrder: prevItemSortOrder + weight });
-                    // Check for overlaps
-                    // TODO: Make sure this take inheritance into considerations.
-                    model.some((entry, index) => {
-                        if (index <= newIndex)
-                            return;
-                        if (entry.sortOrder === prevItemSortOrder + weight) {
-                            weight++;
-                            __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f").partialUpdateContainer(entry.id, { sortOrder: prevItemSortOrder + weight });
-                        }
-                        // Break the loop
-                        return true;
+                // increase the prevSortOrder and use it for the moved item,
+                this.#tabsStructureHelper.partialUpdateContainer(item.id, {
+                    sortOrder: ++prevSortOrder,
+                });
+                // Adjust everyone right after, until there is a gap between the sortOrders: [NL]
+                let i = newIndex + 1;
+                let entry;
+                // As long as there is an item with the index & the sortOrder is less or equal to the prevSortOrder, we will update the sortOrder:
+                while ((entry = model[i]) !== undefined && entry.sortOrder <= prevSortOrder) {
+                    // Increase the prevSortOrder and use it for the item:
+                    this.#tabsStructureHelper.partialUpdateContainer(entry.id, {
+                        sortOrder: ++prevSortOrder,
                     });
+                    i++;
                 }
             },
-        }));
-        _UmbContentTypeDesignEditorElement_workspaceContext.set(this, void 0);
-        _UmbContentTypeDesignEditorElement_designContext.set(this, new UmbContentTypeDesignEditorContext(this));
-        _UmbContentTypeDesignEditorElement_tabsStructureHelper.set(this, new UmbContentTypeContainerStructureHelper(this));
+        });
+        this.#designContext = new UmbContentTypeDesignEditorContext(this);
+        this.#tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
         //private _hasRootProperties = false;
         this._hasRootGroups = false;
         this._routes = [];
         this._activePath = '';
-        __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_sorter, "f").disable();
-        this.observe(__classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_designContext, "f").isSorting, (isSorting) => {
+        this.#sorter.disable();
+        this.observe(this.#designContext.isSorting, (isSorting) => {
             this._sortModeActive = isSorting;
             if (isSorting) {
-                __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_sorter, "f").enable();
+                this.#sorter.enable();
             }
             else {
-                __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_sorter, "f").disable();
+                this.#sorter.disable();
             }
         }, '_observeIsSorting');
         //TODO: We need to differentiate between local and composition tabs (and hybrids)
-        __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f").setContainerChildType('Tab');
-        __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f").setIsRoot(true);
-        this.observe(__classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f").mergedContainers, (tabs) => {
+        this.#tabsStructureHelper.setContainerChildType('Tab');
+        this.#tabsStructureHelper.setIsRoot(true);
+        this.observe(this.#tabsStructureHelper.mergedContainers, (tabs) => {
             this._tabs = tabs;
-            __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_sorter, "f").setModel(tabs);
+            this.#sorter.setModel(tabs);
             this._createRoutes();
         });
         // _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
         this.consumeContext(UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => {
-            __classPrivateFieldSet(this, _UmbContentTypeDesignEditorElement_workspaceContext, workspaceContext, "f");
-            __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f").setStructureManager(workspaceContext.structure);
+            this.#workspaceContext = workspaceContext;
+            this.#tabsStructureHelper.setStructureManager(workspaceContext.structure);
             new UmbContentTypeMoveRootGroupsIntoFirstTabHelper(this, workspaceContext.structure);
             this._observeRootGroups();
         });
     }
+    #toggleSortMode() {
+        this.#designContext?.setIsSorting(!this._sortModeActive);
+    }
     _observeRootGroups() {
-        if (!__classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f"))
+        if (!this.#workspaceContext)
             return;
-        this.observe(__classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f").structure.hasRootContainers('Group'), (hasRootGroups) => {
+        this.observe(this.#workspaceContext.structure.hasRootContainers('Group'), (hasRootGroups) => {
             this._hasRootGroups = hasRootGroups;
             this._createRoutes();
         }, '_observeGroups');
     }
     _createRoutes() {
         // TODO: How about storing a set of elements based on tab ids? to prevent re-initializing the element when renaming..[NL]
-        if (!__classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f") || !this._tabs || this._hasRootGroups === undefined)
+        if (!this.#workspaceContext || !this._tabs || this._hasRootGroups === undefined)
             return;
         const routes = [];
         // We gather the activeTab name to check for rename, this is a bit hacky way to redirect the user without noticing the url changes to the new name [NL]
@@ -181,6 +172,120 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
         }
         this._routes = routes;
     }
+    async #requestDeleteTab(tab) {
+        if (!tab)
+            return;
+        // TODO: Localize this:
+        const tabName = tab.name === '' ? 'Unnamed' : tab.name;
+        // TODO: Localize this:
+        const modalData = {
+            headline: 'Delete tab',
+            content: html `<umb-localize key="contentTypeEditor_confirmDeleteTabMessage" .args=${[tabName]}>
+					Are you sure you want to delete the tab <strong>${tabName}</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. [NL]
+        await umbConfirmModal(this, modalData);
+        this.#deleteTab(tab?.id);
+    }
+    #deleteTab(tabId) {
+        if (!tabId)
+            return;
+        this.#workspaceContext?.structure.removeContainer(null, tabId);
+        // TODO: We should only navigate away if it was the last tab and if it was the active one... [NL]
+        this.#tabsStructureHelper?.isOwnerChildContainer(tabId)
+            ? window.history.replaceState(null, '', this._routerPath + (this._routes[0]?.path ?? '/root'))
+            : '';
+    }
+    async #addTab() {
+        // If there is already a Tab with no name, then focus it instead of adding a new one: [NL]
+        // TODO: Optimize this so it looks at the data instead of the DOM [NL]
+        const inputEl = this.shadowRoot?.querySelector('uui-tab[active] uui-input');
+        if (inputEl?.value === '') {
+            this.#focusInput();
+            return;
+        }
+        if (!this._tabs)
+            return;
+        const len = this._tabs.length;
+        const sortOrder = len === 0 ? 0 : this._tabs[len - 1].sortOrder + 1;
+        const tab = await this.#workspaceContext?.structure.createContainer(null, null, 'Tab', sortOrder);
+        if (tab) {
+            const path = this._routerPath + '/tab/' + encodeFolderName(tab.name && tab.name !== '' ? tab.name : '-');
+            window.history.replaceState(null, '', path);
+            this.#focusInput();
+        }
+    }
+    async #focusInput() {
+        setTimeout(() => {
+            this.shadowRoot?.querySelector('uui-tab[active] uui-input')?.focus();
+        }, 100);
+    }
+    async #tabNameChanged(event, tab) {
+        this._activeTabId = tab.id;
+        let newName = event.target.value;
+        const changedName = this.#workspaceContext?.structure.makeContainerNameUniqueForOwnerContentType(tab.id, newName, 'Tab');
+        // Check if it collides with another tab name of this same content-type, if so adjust name:
+        // Notice changed name might be an empty string... [NL]
+        if (changedName !== null && changedName !== undefined) {
+            newName = changedName;
+            event.target.value = newName;
+        }
+        this.#tabsStructureHelper.partialUpdateContainer(tab.id, {
+            name: newName,
+        });
+    }
+    async #tabNameBlur(event, tab) {
+        if (!this._activeTabId)
+            return;
+        const newName = event.target?.value;
+        if (newName === '') {
+            const changedName = this.#workspaceContext.structure.makeEmptyContainerName(this._activeTabId, 'Tab');
+            event.target.value = changedName;
+            this.#tabsStructureHelper.partialUpdateContainer(tab.id, {
+                name: changedName,
+            });
+        }
+        this._activeTabId = undefined;
+    }
+    async #openCompositionModal() {
+        if (!this.#workspaceContext || !this._compositionRepositoryAlias)
+            return;
+        const unique = this.#workspaceContext.getUnique();
+        if (!unique) {
+            throw new Error('Content Type unique is undefined');
+        }
+        const contentTypes = this.#workspaceContext.structure.getContentTypes();
+        const ownerContentType = this.#workspaceContext.structure.getOwnerContentType();
+        if (!ownerContentType) {
+            throw new Error('Owner Content Type not found');
+        }
+        const compositionConfiguration = {
+            compositionRepositoryAlias: this._compositionRepositoryAlias,
+            unique: unique,
+            // Here we use the loaded content types to declare what we already inherit. That puts a pressure on cleaning up, but thats a good thing. [NL]
+            selection: contentTypes.map((contentType) => contentType.unique).filter((id) => id !== unique),
+            isElement: ownerContentType.isElement,
+            currentPropertyAliases: [],
+            isNew: this.#workspaceContext.getIsNew(),
+        };
+        const modalManagerContext = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+        const modalContext = modalManagerContext.open(this, UMB_COMPOSITION_PICKER_MODAL, {
+            data: compositionConfiguration,
+        });
+        await modalContext?.onSubmit();
+        if (!modalContext?.value)
+            return;
+        const compositionIds = modalContext.getValue().selection;
+        this.#workspaceContext?.setCompositions(compositionIds.map((unique) => ({ contentType: { unique }, compositionType: CompositionTypeModel.COMPOSITION })));
+    }
     render() {
         return html `
 			<umb-body-layout header-fit-height>
@@ -204,7 +309,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
         // TODO: Localize this:
         if (this._sortModeActive)
             return;
-        return html `<uui-button id="add-tab" @click="${__classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_instances, "m", _UmbContentTypeDesignEditorElement_addTab)}" label="Add tab">
+        return html `<uui-button id="add-tab" @click="${this.#addTab}" label="Add tab">
 			<uui-icon name="icon-add"></uui-icon>
 			Add tab
 		</uui-button>`;
@@ -213,18 +318,18 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
         const sortButtonText = this._sortModeActive
             ? this.localize.term('general_reorderDone')
             : this.localize.term('general_reorder');
-        return html `<div class="tab-actions">
+        return html `<div>
 			${this._compositionRepositoryAlias
             ? html `<uui-button
 						look="outline"
 						label=${this.localize.term('contentTypeEditor_compositions')}
 						compact
-						@click=${__classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_instances, "m", _UmbContentTypeDesignEditorElement_openCompositionModal)}>
+						@click=${this.#openCompositionModal}>
 						<uui-icon name="icon-merge"></uui-icon>
 						${this.localize.term('contentTypeEditor_compositions')}
 					</uui-button>`
             : ''}
-			<uui-button look="outline" label=${sortButtonText} compact @click=${__classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_instances, "m", _UmbContentTypeDesignEditorElement_toggleSortMode)}>
+			<uui-button look="outline" label=${sortButtonText} compact @click=${this.#toggleSortMode}>
 				<uui-icon name="icon-navigation"></uui-icon>
 				${sortButtonText}
 			</uui-button>
@@ -259,12 +364,13 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
     renderTab(tab) {
         const path = this._routerPath + '/tab/' + encodeFolderName(tab.name && tab.name !== '' ? tab.name : '-');
         const tabActive = path === this._activePath;
-        const ownedTab = __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f").isOwnerChildContainer(tab.id) ?? false;
+        const ownedTab = this.#tabsStructureHelper.isOwnerChildContainer(tab.id) ?? false;
         return html `<uui-tab
 			label=${tab.name && tab.name !== '' ? tab.name : 'unnamed'}
 			.active=${tabActive}
 			href=${path}
-			data-umb-tab-id=${ifDefined(tab.id)}>
+			data-umb-tab-id=${ifDefined(tab.id)}
+			?sortable=${ownedTab}>
 			${this.renderTabInner(tab, tabActive, ownedTab)}
 		</uui-tab>`;
     }
@@ -279,7 +385,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 								type="number"
 								value=${ifDefined(tab.sortOrder)}
 								style="width:50px"
-								@change=${(e) => __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_instances, "m", _UmbContentTypeDesignEditorElement_changeOrderNumber).call(this, tab, e)}></uui-input>`
+								@change=${(e) => this.#changeOrderNumber(tab, e)}></uui-input>`
                 : html `<uui-icon name="icon-merge"></uui-icon>${tab.name}`}
 			</div>`;
         }
@@ -292,9 +398,9 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 					label=${tab.name}
 					value="${tab.name}"
 					auto-width
-					@change=${(e) => __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_instances, "m", _UmbContentTypeDesignEditorElement_tabNameChanged).call(this, e, tab)}
-					@input=${(e) => __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_instances, "m", _UmbContentTypeDesignEditorElement_tabNameChanged).call(this, e, tab)}
-					@blur=${(e) => __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_instances, "m", _UmbContentTypeDesignEditorElement_tabNameBlur).call(this, e, tab)}>
+					@change=${(e) => this.#tabNameChanged(e, tab)}
+					@input=${(e) => this.#tabNameChanged(e, tab)}
+					@blur=${(e) => this.#tabNameBlur(e, tab)}>
 					${this.renderDeleteFor(tab)}
 				</uui-input>
 			</div>`;
@@ -306,6 +412,12 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
             return html `<div class="not-active"><uui-icon name="icon-merge"></uui-icon>${tab.name}</div>`;
         }
     }
+    #changeOrderNumber(tab, e) {
+        if (!e.target.value || !tab.id)
+            return;
+        const sortOrder = Number(e.target.value);
+        this.#tabsStructureHelper.partialUpdateContainer(tab.id, { sortOrder });
+    }
     renderDeleteFor(tab) {
         return html `<uui-button
 			label=${this.localize.term('actions_remove')}
@@ -314,149 +426,15 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 			@click=${(e) => {
             e.stopPropagation();
             e.preventDefault();
-            __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_instances, "m", _UmbContentTypeDesignEditorElement_requestDeleteTab).call(this, tab);
+            this.#requestDeleteTab(tab);
         }}
 			compact>
 			<uui-icon name="icon-trash"></uui-icon>
 		</uui-button>`;
     }
-};
-_UmbContentTypeDesignEditorElement_sorter = new WeakMap();
-_UmbContentTypeDesignEditorElement_workspaceContext = new WeakMap();
-_UmbContentTypeDesignEditorElement_designContext = new WeakMap();
-_UmbContentTypeDesignEditorElement_tabsStructureHelper = new WeakMap();
-_UmbContentTypeDesignEditorElement_instances = new WeakSet();
-_UmbContentTypeDesignEditorElement_toggleSortMode = function _UmbContentTypeDesignEditorElement_toggleSortMode() {
-    __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_designContext, "f")?.setIsSorting(!this._sortModeActive);
-};
-_UmbContentTypeDesignEditorElement_requestDeleteTab = async function _UmbContentTypeDesignEditorElement_requestDeleteTab(tab) {
-    // TODO: Localize this:
-    const modalData = {
-        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. [NL]
-    await umbConfirmModal(this, modalData);
-    __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_instances, "m", _UmbContentTypeDesignEditorElement_deleteTab).call(this, tab?.id);
-};
-_UmbContentTypeDesignEditorElement_deleteTab = function _UmbContentTypeDesignEditorElement_deleteTab(tabId) {
-    if (!tabId)
-        return;
-    __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f")?.structure.removeContainer(null, tabId);
-    // TODO: We should only navigate away if it was the last tab and if it was the active one... [NL]
-    __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f")?.isOwnerChildContainer(tabId)
-        ? window.history.replaceState(null, '', this._routerPath + (this._routes[0]?.path ?? '/root'))
-        : '';
-};
-_UmbContentTypeDesignEditorElement_addTab = async function _UmbContentTypeDesignEditorElement_addTab() {
-    // If there is already a Tab with no name, then focus it instead of adding a new one: [NL]
-    // TODO: Optimize this so it looks at the data instead of the DOM [NL]
-    const inputEl = this.shadowRoot?.querySelector('uui-tab[active] uui-input');
-    if (inputEl?.value === '') {
-        __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_instances, "m", _UmbContentTypeDesignEditorElement_focusInput).call(this);
-        return;
-    }
-    if (!this._tabs)
-        return;
-    const len = this._tabs.length;
-    const sortOrder = len === 0 ? 0 : this._tabs[len - 1].sortOrder + 1;
-    const tab = await __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f")?.structure.createContainer(null, null, 'Tab', sortOrder);
-    if (tab) {
-        const path = this._routerPath + '/tab/' + encodeFolderName(tab.name && tab.name !== '' ? tab.name : '-');
-        window.history.replaceState(null, '', path);
-        console.log('new tab', path);
-        __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_instances, "m", _UmbContentTypeDesignEditorElement_focusInput).call(this);
-    }
-};
-_UmbContentTypeDesignEditorElement_focusInput = async function _UmbContentTypeDesignEditorElement_focusInput() {
-    setTimeout(() => {
-        this.shadowRoot?.querySelector('uui-tab[active] uui-input')?.focus();
-    }, 100);
-};
-_UmbContentTypeDesignEditorElement_tabNameChanged = async function _UmbContentTypeDesignEditorElement_tabNameChanged(event, tab) {
-    this._activeTabId = tab.id;
-    let newName = event.target.value;
-    const changedName = __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f")?.structure.makeContainerNameUniqueForOwnerContentType(tab.id, newName, 'Tab');
-    // Check if it collides with another tab name of this same content-type, if so adjust name:
-    // Notice changed name might be an empty string... [NL]
-    if (changedName !== null && changedName !== undefined) {
-        newName = changedName;
-        event.target.value = newName;
-    }
-    __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f").partialUpdateContainer(tab.id, {
-        name: newName,
-    });
-};
-_UmbContentTypeDesignEditorElement_tabNameBlur = async function _UmbContentTypeDesignEditorElement_tabNameBlur(event, tab) {
-    if (!this._activeTabId)
-        return;
-    const newName = event.target?.value;
-    if (newName === '') {
-        const changedName = __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f").structure.makeEmptyContainerName(this._activeTabId, 'Tab');
-        event.target.value = changedName;
-        __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f").partialUpdateContainer(tab.id, {
-            name: changedName,
-        });
-    }
-    this._activeTabId = undefined;
-};
-_UmbContentTypeDesignEditorElement_openCompositionModal = async function _UmbContentTypeDesignEditorElement_openCompositionModal() {
-    if (!__classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f") || !this._compositionRepositoryAlias)
-        return;
-    const unique = __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f").getUnique();
-    if (!unique) {
-        throw new Error('Content Type unique is undefined');
-    }
-    const contentTypes = __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f").structure.getContentTypes();
-    const ownerContentType = __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f").structure.getOwnerContentType();
-    if (!ownerContentType) {
-        throw new Error('Owner Content Type not found');
-    }
-    const compositionConfiguration = {
-        compositionRepositoryAlias: this._compositionRepositoryAlias,
-        unique: unique,
-        // Here we use the loaded content types to declare what we already inherit. That puts a pressure on cleaning up, but thats a good thing. [NL]
-        selection: contentTypes.map((contentType) => contentType.unique).filter((id) => id !== unique),
-        isElement: ownerContentType.isElement,
-        currentPropertyAliases: [],
-        isNew: __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f").getIsNew(),
-    };
-    const modalManagerContext = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-    const modalContext = modalManagerContext.open(this, UMB_COMPOSITION_PICKER_MODAL, {
-        data: compositionConfiguration,
-    });
-    await modalContext?.onSubmit();
-    if (!modalContext?.value)
-        return;
-    const compositionIds = modalContext.getValue().selection;
-    __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_workspaceContext, "f")?.setCompositions(compositionIds.map((unique) => ({ contentType: { unique }, compositionType: CompositionTypeModel.COMPOSITION })));
-};
-_UmbContentTypeDesignEditorElement_changeOrderNumber = function _UmbContentTypeDesignEditorElement_changeOrderNumber(tab, e) {
-    if (!e.target.value || !tab.id)
-        return;
-    const sortOrder = Number(e.target.value);
-    __classPrivateFieldGet(this, _UmbContentTypeDesignEditorElement_tabsStructureHelper, "f").partialUpdateContainer(tab.id, { sortOrder });
-};
-UmbContentTypeDesignEditorElement.styles = [
-    UmbTextStyles,
-    css `
-			#buttons-wrapper {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				align-items: stretch;
-			}
-
+    static { this.styles = [
+        UmbTextStyles,
+        css `
 			:host {
 				position: relative;
 				display: flex;
@@ -465,6 +443,14 @@ UmbContentTypeDesignEditorElement.styles = [
 				--uui-tab-background: var(--uui-color-surface);
 			}
 
+			#buttons-wrapper {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				align-items: stretch;
+			}
+
 			[drag-placeholder] {
 				opacity: 0.5;
 			}
@@ -477,6 +463,7 @@ UmbContentTypeDesignEditorElement.styles = [
 
 			#header {
 				width: 100%;
+				min-height: var(--uui-size-15);
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
@@ -502,6 +489,7 @@ UmbContentTypeDesignEditorElement.styles = [
 				position: relative;
 				border-left: 1px hidden transparent;
 				border-right: 1px solid var(--uui-color-border);
+				background-color: var(--uui-color-surface);
 			}
 
 			.not-active uui-button {
@@ -539,7 +527,8 @@ UmbContentTypeDesignEditorElement.styles = [
 				opacity: 0.2;
 			}
 		`,
-];
+    ]; }
+};
 __decorate([
     state()
 ], UmbContentTypeDesignEditorElement.prototype, "_compositionRepositoryAlias", void 0);