@umbraco-cms/backoffice 14.0.0--preview007-b64c7cb9 → 14.0.0--preview007-02546fcd

package/dist-cms/custom-elements.json

@@ -6263,11 +6263,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "config",
-          "type": "UmbSorterConfig<PropertyTypeContainerModelBaseModel>",
-          "default": "{}"
-        },
         {
           "name": "ownerTabId",
           "attribute": "ownerTabId",
@@ -6287,9 +6282,6 @@
           "name": "styles",
           "type": "array",
           "default": "[\"UmbTextStyles\",null]"
-        },
-        {
-          "name": "sorter"
         }
       ]
     },
@@ -6297,18 +6289,10 @@
       "name": "umb-document-type-workspace-view-edit",
       "path": "./../src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts",
       "properties": [
-        {
-          "name": "config",
-          "type": "UmbSorterConfig<PropertyTypeContainerModelBaseModel>",
-          "default": "{}"
-        },
         {
           "name": "styles",
           "type": "array",
           "default": "[\"UmbTextStyles\",null]"
-        },
-        {
-          "name": "sorter"
         }
       ]
     },

package/dist-cms/mocks/data/document-type/document-type.data.js

@@ -1004,6 +1004,46 @@ export const data = [
                     labelOnTop: false,
                 },
             },
+            {
+                id: 'a92de6ac-1a22-4a45-a481-b6cae1cccbba',
+                container: { id: '2e845ca8-1e3e-4b03-be1d-0b4149ce2120' },
+                alias: 'alchemyElement',
+                name: 'Alchemy Element',
+                description: null,
+                dataType: { id: '0cc0eba1-9960-42c9-bf9b-60e150b429ae' },
+                variesByCulture: false,
+                variesBySegment: false,
+                sortOrder: 0,
+                validation: {
+                    mandatory: false,
+                    mandatoryMessage: null,
+                    regEx: null,
+                    regExMessage: null,
+                },
+                appearance: {
+                    labelOnTop: false,
+                },
+            },
+            {
+                id: 'c92de6ac-1a22-4a45-a481-b6cae1cccbba',
+                container: { id: '2e845ca8-1e3e-4b03-be1d-0b4149ce2120' },
+                alias: 'acidScale',
+                name: 'Acid Scale',
+                description: null,
+                dataType: { id: '0cc0eba1-9960-42c9-bf9b-60e150b429ae' },
+                variesByCulture: false,
+                variesBySegment: false,
+                sortOrder: 0,
+                validation: {
+                    mandatory: false,
+                    mandatoryMessage: null,
+                    regEx: null,
+                    regExMessage: null,
+                },
+                appearance: {
+                    labelOnTop: false,
+                },
+            },
         ],
         containers: [
             {
@@ -1013,6 +1053,13 @@ export const data = [
                 type: 'Group',
                 sortOrder: 0,
             },
+            {
+                id: '2e845ca8-1e3e-4b03-be1d-0b4149ce2120',
+                parent: null,
+                name: 'Alchemy',
+                type: 'Group',
+                sortOrder: 0,
+            },
         ],
         allowedDocumentTypes: [],
         compositions: [],

package/dist-cms/packages/documents/document-types/components/input-document-type/input-document-type.element.d.ts

@@ -42,6 +42,7 @@ export declare class UmbInputDocumentTypeElement extends UmbInputDocumentTypeEle
     get selectedIds(): Array<string>;
     set selectedIds(ids: Array<string> | undefined);
     set value(idsString: string);
+    get value(): string;
     private _items?;
     private _editDocumentTypePath;
     constructor();

package/dist-cms/packages/documents/document-types/components/input-document-type/input-document-type.element.js

@@ -51,6 +51,9 @@ let UmbInputDocumentTypeElement = class UmbInputDocumentTypeElement extends Form
         // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
         this.selectedIds = splitStringToArray(idsString);
     }
+    get value() {
+        return this.selectedIds.join(',');
+    }
     constructor() {
         super();
         _UmbInputDocumentTypeElement_instances.add(this);

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

@@ -1,8 +1,8 @@
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import './document-type-workspace-view-edit-property.element.js';
 import type { UmbDocumentTypeDetailModel } from '../../../types.js';
 import type { UmbPropertyContainerTypes, UmbPropertyTypeModel } from '../../../../../core/content-type/index.js';
 import { UmbContentTypePropertyStructureHelper } from '../../../../../core/content-type/index.js';
-import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 export declare class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitElement {
     #private;
     private _containerId;

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

@@ -9,27 +9,15 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _UmbDocumentTypeWorkspaceViewEditPropertiesElement_instances, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_propertySorter, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_setModel, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_addProperty;
+var _UmbDocumentTypeWorkspaceViewEditPropertiesElement_instances, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_model, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_addProperty;
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import './document-type-workspace-view-edit-property.element.js';
 import { css, html, customElement, property, state, repeat, ifDefined } from '../../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../../shared/style/index.js';
 import { UmbContentTypePropertyStructureHelper } from '../../../../../core/content-type/index.js';
 import { UmbSorterController } from '../../../../../core/sorter/index.js';
-import { UmbLitElement } from '../../../../../core/lit-element/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 = {
-    getUniqueOfElement: (element) => {
-        return element.getAttribute('data-umb-property-id');
-    },
-    getUniqueOfModel: (modelEntry) => {
-        return modelEntry.id;
-    },
-    identifier: 'content-type-property-sorter',
-    itemSelector: '[data-umb-property-id]',
-    disabledItemSelector: '[inherited]',
-    containerSelector: '#property-list',
-};
 let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitElement {
     get containerId() {
         return this._containerId;
@@ -56,37 +44,39 @@ let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWor
     constructor() {
         super();
         _UmbDocumentTypeWorkspaceViewEditPropertiesElement_instances.add(this);
-        _UmbDocumentTypeWorkspaceViewEditPropertiesElement_propertySorter.set(this, new UmbSorterController(this, {
-            ...SORTER_CONFIG,
-            performItemInsert: (args) => {
-                let sortOrder = 0;
-                if (this._propertyStructure.length > 0) {
-                    if (args.newIndex === 0) {
-                        sortOrder = (this._propertyStructure[0].sortOrder ?? 0) - 1;
-                    }
-                    else {
-                        sortOrder =
-                            (this._propertyStructure[Math.min(args.newIndex, this._propertyStructure.length - 1)].sortOrder ?? 0) + 1;
-                    }
-                }
-                return this._propertyStructureHelper.insertProperty(args.item, sortOrder);
+        _UmbDocumentTypeWorkspaceViewEditPropertiesElement_model.set(this, []);
+        _UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter.set(this, new UmbSorterController(this, {
+            getUniqueOfElement: (element) => {
+                return element.getAttribute('data-umb-property-id');
             },
-            performItemRemove: (args) => {
-                return this._propertyStructureHelper.removeProperty(args.item.id);
+            getUniqueOfModel: (modelEntry) => {
+                return modelEntry.id;
             },
-            performItemMove: (args) => {
-                this._propertyStructureHelper.removeProperty(args.item.id);
-                let sortOrder = 0;
-                if (this._propertyStructure.length > 0) {
-                    if (args.newIndex === 0) {
-                        sortOrder = (this._propertyStructure[0].sortOrder ?? 0) - 1;
-                    }
-                    else {
-                        sortOrder =
-                            (this._propertyStructure[Math.min(args.newIndex, this._propertyStructure.length - 1)].sortOrder ?? 0) + 1;
-                    }
+            identifier: 'document-type-property-sorter',
+            itemSelector: 'umb-document-type-workspace-view-edit-property',
+            disabledItemSelector: '[inherited]',
+            //TODO: Set the property list (sorter wrapper) to inherited, if its inherited
+            // This is because we don't want to move local properties into an inherited group container.
+            // Or maybe we do, but we still need to check if the group exists locally, if not, then it needs to be created before we move a property into it.
+            // TODO: Fix bug where a local property turn into an inherited when moved to a new group container.
+            containerSelector: '#property-list',
+            onChange: ({ item, model }) => {
+                const isInNewContainer = model.find((entry) => entry?.container?.id !== this._containerId && this._containerId);
+                if (isInNewContainer) {
+                    model.forEach((entry, index) => {
+                        entry.id === item.id
+                            ? this._propertyStructureHelper.partialUpdateProperty(entry.id, {
+                                sortOrder: index,
+                                container: { id: this._containerId },
+                            })
+                            : this._propertyStructureHelper.partialUpdateProperty(entry.id, { sortOrder: index });
+                    });
+                }
+                else {
+                    model.forEach((entry, index) => {
+                        this._propertyStructureHelper.partialUpdateProperty(entry.id, { sortOrder: index });
+                    });
                 }
-                return this._propertyStructureHelper.insertProperty(args.item, sortOrder);
             },
         }));
         this._propertyStructureHelper = new UmbContentTypePropertyStructureHelper(this);
@@ -95,7 +85,12 @@ let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWor
             this._propertyStructureHelper.setStructureManager(workspaceContext.structure);
             this.observe(workspaceContext.isSorting, (isSorting) => {
                 this._sortModeActive = isSorting;
-                __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditPropertiesElement_setModel).call(this, isSorting);
+                if (isSorting) {
+                    __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter, "f").setModel(this._propertyStructure);
+                }
+                else {
+                    __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter, "f").setModel([]);
+                }
             }, '_observeIsSorting');
             const docTypesObservable = await this._propertyStructureHelper.ownerDocumentTypes();
             if (!docTypesObservable)
@@ -130,26 +125,30 @@ let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWor
         });
     }
     render() {
-        return html `<div id="property-list">
-				${repeat(this._propertyStructure, (property) => property.id ?? '' + property.container?.id ?? '' + property.sortOrder ?? '', (property) => {
+        return html `
+			<div id="property-list" ?sort-mode-active=${this._sortModeActive}>
+				${repeat(this._propertyStructure, (property) => '' + property.container?.id + property.id + '' + 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.container?.id));
-            return html `<umb-document-type-workspace-view-edit-property
-							data-umb-property-id=${property.id}
-							owner-document-type-id=${ifDefined(inheritedFromDocument?.unique)}
-							owner-document-type-name=${ifDefined(inheritedFromDocument?.name)}
-							?inherited=${property.container?.id !== this.containerId}
-							?sort-mode-active=${this._sortModeActive}
-							.property=${property}
-							@partial-property-update=${(event) => {
+            return html `
+							<umb-document-type-workspace-view-edit-property
+								data-umb-property-id=${property.id}
+								owner-document-type-id=${ifDefined(inheritedFromDocument?.unique)}
+								owner-document-type-name=${ifDefined(inheritedFromDocument?.name)}
+								?inherited=${property.container?.id !== this.containerId}
+								?sort-mode-active=${this._sortModeActive}
+								.property=${property}
+								@partial-property-update=${(event) => {
                 this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail);
             }}
-							@property-delete=${() => {
+								@property-delete=${() => {
                 this._propertyStructureHelper.removeProperty(property.id);
             }}>
-						</umb-document-type-workspace-view-edit-property>`;
+							</umb-document-type-workspace-view-edit-property>
+						`;
         })}
 			</div>
+
 			${!this._sortModeActive
             ? html `<uui-button
 						label=${this.localize.term('contentTypeEditor_addProperty')}
@@ -158,20 +157,13 @@ let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWor
 						href=${ifDefined(this._modalRouteNewProperty)}>
 						<umb-localize key="contentTypeEditor_addProperty">Add property</umb-localize>
 				  </uui-button> `
-            : ''} `;
+            : ''}
+		`;
     }
 };
-_UmbDocumentTypeWorkspaceViewEditPropertiesElement_propertySorter = new WeakMap();
+_UmbDocumentTypeWorkspaceViewEditPropertiesElement_model = new WeakMap();
+_UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter = new WeakMap();
 _UmbDocumentTypeWorkspaceViewEditPropertiesElement_instances = new WeakSet();
-_UmbDocumentTypeWorkspaceViewEditPropertiesElement_setModel = function _UmbDocumentTypeWorkspaceViewEditPropertiesElement_setModel(isSorting) {
-    if (isSorting) {
-        __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_propertySorter, "f").setModel(this._propertyStructure);
-    }
-    else {
-        // TODO: Make a more proper way to disable sorting:
-        __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_propertySorter, "f").setModel([]);
-    }
-};
 _UmbDocumentTypeWorkspaceViewEditPropertiesElement_addProperty = async function _UmbDocumentTypeWorkspaceViewEditPropertiesElement_addProperty(propertyData) {
     const propertyPlaceholder = await this._propertyStructureHelper.addProperty(this._containerId);
     if (!propertyPlaceholder)
@@ -184,6 +176,11 @@ UmbDocumentTypeWorkspaceViewEditPropertiesElement.styles = [
 			#add {
 				width: 100%;
 			}
+
+			#property-list[sort-mode-active]:not(:has(umb-document-type-workspace-view-edit-property)) {
+				/* Some height so that the sorter can target the area if the group is empty*/
+				min-height: var(--uui-size-layout-1);
+			}
 		`,
 ];
 __decorate([

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

@@ -112,6 +112,7 @@ let UmbDocumentTypeWorkspacePropertyElement = class UmbDocumentTypeWorkspaceProp
 				type="number"
 				?readonly=${this.inherited}
 				label="sort order"
+				@change=${(e) => this._partialUpdate({ sortOrder: parseInt(e.target.value) || 0 })}
 				.value=${this.property.sortOrder ?? 0}></uui-input>
 		`;
     }
@@ -440,6 +441,10 @@ UmbDocumentTypeWorkspacePropertyElement.styles = [
 			a {
 				color: inherit;
 			}
+
+			:host([drag-placeholder]) {
+				opacity: 0.2;
+			}
 		`,
 ];
 __decorate([

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

@@ -1,14 +1,9 @@
 import type { UmbDocumentTypeDetailModel } from '../../../types.js';
-import { UmbContentTypeContainerStructureHelper } from '../../../../../core/content-type/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
-import type { PropertyTypeContainerModelBaseModel } from '../../../../../../external/backend-api/index.js';
-import type { UmbSorterConfig } from '../../../../../core/sorter/index.js';
-import { UmbSorterController } from '../../../../../core/sorter/index.js';
+import { UmbContentTypeContainerStructureHelper, type UmbPropertyTypeContainerModel } from '../../../../../core/content-type/index.js';
 import './document-type-workspace-view-edit-properties.element.js';
 export declare class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
     #private;
-    sorter?: UmbSorterController<PropertyTypeContainerModelBaseModel>;
-    config: UmbSorterConfig<PropertyTypeContainerModelBaseModel>;
     private _ownerTabId?;
     get ownerTabId(): string | null | undefined;
     set ownerTabId(value: string | null | undefined);
@@ -19,7 +14,7 @@ export declare class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitEl
     get noTabName(): boolean;
     set noTabName(value: boolean);
     _groupStructureHelper: UmbContentTypeContainerStructureHelper<UmbDocumentTypeDetailModel>;
-    _groups: Array<PropertyTypeContainerModelBaseModel>;
+    _groups: Array<UmbPropertyTypeContainerModel>;
     _hasProperties: boolean;
     _sortModeActive?: boolean;
     constructor();

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

@@ -9,26 +9,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup;
+var _UmbDocumentTypeWorkspaceViewEditTabElement_instances, _UmbDocumentTypeWorkspaceViewEditTabElement_sorter, _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup, _UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader, _UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName, _UmbDocumentTypeWorkspaceViewEditTabElement_renderAddGroupButton;
+import { UmbLitElement } from '../../../../../core/lit-element/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 '../../../../../core/lit-element/index.js';
+import { UmbContentTypeContainerStructureHelper, } from '../../../../../core/content-type/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
-import { UmbSorterController } from '../../../../../core/sorter/index.js';
 import './document-type-workspace-view-edit-properties.element.js';
-const SORTER_CONFIG = {
-    getUniqueOfElement: (element) => {
-        return element.getAttribute('data-umb-group-id');
-    },
-    getUniqueOfModel: (modelEntry) => {
-        return modelEntry.id;
-    },
-    identifier: 'content-type-group-sorter',
-    itemSelector: '[data-umb-group-id]',
-    disabledItemSelector: '[inherited]',
-    containerSelector: '#group-list',
-};
+import { UmbSorterController } from '../../../../../core/sorter/index.js';
 let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
     // TODO: get rid of this:
     get ownerTabId() {
@@ -62,31 +50,19 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
     }
     constructor() {
         super();
-        this.config = {
-            ...SORTER_CONFIG,
-            // TODO: Missing handlers to work properly: performItemMove and performItemRemove
-            performItemInsert: async (args) => {
-                if (!this._groups)
-                    return false;
-                const oldIndex = this._groups.findIndex((group) => group.id === args.item.id);
-                if (args.newIndex === oldIndex)
-                    return true;
-                let sortOrder = 0;
-                //TODO the sortOrder set is not correct
-                if (this._groups.length > 0) {
-                    if (args.newIndex === 0) {
-                        sortOrder = (this._groups[0].sortOrder ?? 0) - 1;
-                    }
-                    else {
-                        sortOrder = (this._groups[Math.min(args.newIndex, this._groups.length - 1)].sortOrder ?? 0) + 1;
-                    }
-                    if (sortOrder !== args.item.sortOrder) {
-                        await this._groupStructureHelper.partialUpdateContainer(args.item.id, { sortOrder });
-                    }
-                }
-                return true;
+        _UmbDocumentTypeWorkspaceViewEditTabElement_instances.add(this);
+        _UmbDocumentTypeWorkspaceViewEditTabElement_sorter.set(this, new UmbSorterController(this, {
+            getUniqueOfElement: (element) => element.querySelector('umb-document-type-workspace-view-edit-properties').getAttribute('container-id'),
+            getUniqueOfModel: (modelEntry) => modelEntry.id,
+            identifier: 'document-type-container-sorter',
+            itemSelector: '.container-handle',
+            containerSelector: '.container-list',
+            onChange: ({ model }) => {
+                model.forEach((modelItem, index) => {
+                    this._groupStructureHelper.partialUpdateContainer(modelItem.id, { sortOrder: index });
+                });
             },
-        };
+        }));
         this._groupStructureHelper = new UmbContentTypeContainerStructureHelper(this);
         this._groups = [];
         this._hasProperties = false;
@@ -94,16 +70,15 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
             // Idea, maybe we can gather the sortOrder from the last group rendered and add 1 to it?
             this._groupStructureHelper.addContainer(this._ownerTabId);
         });
-        this.sorter = new UmbSorterController(this, this.config);
         this.consumeContext(UMB_WORKSPACE_CONTEXT, (context) => {
             this._groupStructureHelper.setStructureManager(context.structure);
             this.observe(context.isSorting, (isSorting) => {
                 this._sortModeActive = isSorting;
                 if (isSorting) {
-                    this.sorter?.setModel(this._groups);
+                    __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_sorter, "f").setModel(this._groups);
                 }
                 else {
-                    this.sorter?.setModel([]);
+                    __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_sorter, "f").setModel([]);
                 }
             }, '_observeIsSorting');
         });
@@ -118,7 +93,14 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
     }
     render() {
         return html `
-			${!this._noTabName
+		${this._sortModeActive
+            ? html `<uui-button
+						id="convert-to-tab"
+						label=${this.localize.term('contentTypeEditor_convertToTab') + '(Not implemented)'}
+						look="placeholder"></uui-button>`
+            : ''}
+
+		${!this._noTabName
             ? html `
 						<uui-box>
 							<umb-document-type-workspace-view-edit-properties
@@ -128,63 +110,77 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
 						</uui-box>
 				  `
             : ''}
-			<div id="group-list">
-				${repeat(this._groups, (group) => group.id ?? '' + group.name, (group) => html `<span data-umb-group-id=${ifDefined(group.id)}>
-					<uui-box>
-						${this._groupStructureHelper.isOwnerChildContainer(group.id)
-            ? html `
-										<div slot="header">
-											<div>
-												${this._sortModeActive ? html `<uui-icon name="icon-navigation"></uui-icon>` : ''}
-
-												<uui-input
-													label="Group name"
-													placeholder="Enter a group name"
-													value=${group.name ?? ''}
-													@change=${(e) => {
-                const newName = e.target.value;
-                this._groupStructureHelper.updateContainerName(group.id, group.parent?.id ?? null, newName);
-            }}>
-												</uui-input>
-											</div>
-											${this._sortModeActive
-                ? html `<uui-input type="number" label="sort order" .value=${group.sortOrder ?? 0}></uui-input>`
-                : ''}
-										</div>
-								  `
-            : html `<div slot="header">
-										<div><uui-icon name="icon-merge"></uui-icon><b>${group.name ?? ''}</b> (Inherited)</div>
-										${!this._sortModeActive
-                ? html `<uui-input
-													readonly
-													type="number"
-													label="sort order"
-													.value=${group.sortOrder ?? 0}></uui-input>`
-                : ''}
-								  </div>`}
-					</div>
-					<umb-document-type-workspace-view-edit-properties
-						container-id=${ifDefined(group.id)}
-						container-type="Group"
-						container-name=${group.name || ''}></umb-document-type-workspace-view-edit-properties>
-				</uui-box></span>`)}
+				<div class="container-list" ?sort-mode-active=${this._sortModeActive}>
+					${repeat(this._groups, (group) => group.id ?? '' + group.name, (group) => html `<uui-box class="container-handle">
+								${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader).call(this, group)}
+								<umb-document-type-workspace-view-edit-properties
+									container-id=${ifDefined(group.id)}
+									container-type="Group"
+									container-name=${group.name || ''}></umb-document-type-workspace-view-edit-properties>
+							</uui-box> `)}
+				</div>
+				${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditTabElement_renderAddGroupButton).call(this)}
 			</div>
-			${!this._sortModeActive
-            ? html `<uui-button
-						label=${this.localize.term('contentTypeEditor_addGroup')}
-						id="add"
-						look="placeholder"
-						@click=${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup, "f")}>
-						${this.localize.term('contentTypeEditor_addGroup')}
-				  </uui-button>`
-            : ''}
 		`;
     }
 };
+_UmbDocumentTypeWorkspaceViewEditTabElement_sorter = new WeakMap();
 _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup = new WeakMap();
+_UmbDocumentTypeWorkspaceViewEditTabElement_instances = new WeakSet();
+_UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader = function _UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader(group) {
+    const inherited = !this._groupStructureHelper.isOwnerChildContainer(group.id);
+    if (this._sortModeActive) {
+        return html `<div slot="header">
+				<div>
+					<uui-icon name=${inherited ? 'icon-merge' : 'icon-navigation'}></uui-icon>
+					${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName).call(this, group)}
+				</div>
+				<uui-input
+					type="number"
+					label=${this.localize.term('sort_sortOrder')}
+					@change=${(e) => {
+            this._groupStructureHelper.partialUpdateContainer(group.id, {
+                sortOrder: parseInt(e.target.value) || 0,
+            });
+        }}
+					.value=${group.sortOrder || 0}
+					?disabled=${inherited}></uui-input>
+			</div> `;
+    }
+    else {
+        return html `<div slot="header">
+				${inherited ? html `<uui-icon name="icon-merge"></uui-icon>` : __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName).call(this, group)}
+			</div> `;
+    }
+};
+_UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName = function _UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName(group) {
+    return html `<uui-input
+			label=${this.localize.term('contentTypeEditor_group')}
+			placeholder=${this.localize.term('placeholders_entername')}
+			.value=${group.name}
+			@change=${(e) => {
+        const newName = e.target.value;
+        this._groupStructureHelper.updateContainerName(group.id, group.parent?.id ?? null, newName);
+    }}></uui-input>`;
+};
+_UmbDocumentTypeWorkspaceViewEditTabElement_renderAddGroupButton = function _UmbDocumentTypeWorkspaceViewEditTabElement_renderAddGroupButton() {
+    if (this._sortModeActive)
+        return;
+    return html `<uui-button
+			label=${this.localize.term('contentTypeEditor_addGroup')}
+			id="add"
+			look="placeholder"
+			@click=${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup, "f")}>
+			${this.localize.term('contentTypeEditor_addGroup')}
+		</uui-button>`;
+};
 UmbDocumentTypeWorkspaceViewEditTabElement.styles = [
     UmbTextStyles,
     css `
+			[drag-placeholder] {
+				opacity: 0.2;
+			}
+
 			#add {
 				width: 100%;
 			}
@@ -192,6 +188,7 @@ UmbDocumentTypeWorkspaceViewEditTabElement.styles = [
 			#add:first-child {
 				margin-top: var(--uui-size-layout-1);
 			}
+
 			uui-box {
 				margin-bottom: var(--uui-size-layout-1);
 			}
@@ -202,6 +199,7 @@ UmbDocumentTypeWorkspaceViewEditTabElement.styles = [
 			}
 
 			div[slot='header'] {
+				flex: 1;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
@@ -217,20 +215,18 @@ UmbDocumentTypeWorkspaceViewEditTabElement.styles = [
 				max-width: 75px;
 			}
 
-			.sorting {
+			[sort-mode-active] div[slot='header'] {
 				cursor: grab;
 			}
 
-			.--umb-sorter-placeholder > uui-box {
-				visibility: hidden;
+			.container-list {
+				display: grid;
+				gap: 10px;
 			}
 
-			.--umb-sorter-placeholder::after {
-				content: '';
-				inset: 0;
-				position: absolute;
-				border-radius: var(--uui-border-radius);
-				border: 1px dashed var(--uui-color-divider-emphasis);
+			#convert-to-tab {
+				margin-bottom: var(--uui-size-layout-1);
+				display: flex;
 			}
 		`,
 ];