@umbraco-cms/backoffice 17.1.0 → 17.2.0-rc

package/dist-cms/packages/content/content/conditions/has-properties/content-has-properties.condition.manifest.js

@@ -1,6 +1,7 @@
+import { UmbContentHasPropertiesWorkspaceCondition } from './content-has-properties.condition.js';
 export const manifest = {
     type: 'condition',
     name: 'Content has properties Workspace Condition',
     alias: 'Umb.Condition.Workspace.ContentHasProperties',
-    api: () => import('./content-has-properties.condition.js'),
+    api: UmbContentHasPropertiesWorkspaceCondition,
 };

package/dist-cms/packages/content/content/global-components/content-workspace-property.element.js

@@ -7,8 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../constants.js';
 import { html, customElement, property, state, nothing } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
-import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../core/property/index.js';
-import { UmbVariantId } from '../../../core/variant/index.js';
+import { UMB_VARIANT_CONTEXT, UmbVariantId } from '../../../core/variant/index.js';
 import { UmbDataPathPropertyValueQuery } from '../../../core/validation/index.js';
 import { UMB_CURRENT_USER_CONTEXT } from '../../../user/current-user/index.js';
 let UmbContentWorkspacePropertyElement = class UmbContentWorkspacePropertyElement extends UmbLitElement {
@@ -23,8 +22,10 @@ let UmbContentWorkspacePropertyElement = class UmbContentWorkspacePropertyElemen
         super();
         this._hasAccessToSensitiveData = false;
         // The Property Dataset is local to the active variant, we use this to retrieve the variant we like to gather the value from.
-        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (datasetContext) => {
-            this._datasetVariantId = datasetContext?.getVariantId();
+        this.consumeContext(UMB_VARIANT_CONTEXT, async (variantContext) => {
+            this.observe(variantContext?.variantId, (variantId) => {
+                this._datasetVariantId = variantId;
+            }, 'observeDatasetVariantId');
         });
         // The Content Workspace Context is used to retrieve the property type we like to observe.
         // This gives us the configuration from the property type as part of the data type.
@@ -43,16 +44,7 @@ let UmbContentWorkspacePropertyElement = class UmbContentWorkspacePropertyElemen
             return;
         this.observe(await this._workspaceContext?.structure.propertyStructureByAlias(this._alias), (propertyType) => {
             this._propertyType = propertyType;
-            this.#checkViewGuard();
-        });
-    }
-    #checkViewGuard() {
-        if (!this._workspaceContext || !this._propertyType || !this._datasetVariantId)
-            return;
-        const propertyVariantId = new UmbVariantId(this._propertyType.variesByCulture ? this._datasetVariantId.culture : null, this._propertyType.variesBySegment ? this._datasetVariantId.segment : null);
-        this.observe(this._workspaceContext.propertyViewGuard.isPermittedForVariantAndProperty(propertyVariantId, this._propertyType, this._datasetVariantId), (permitted) => {
-            this._viewable = permitted;
-        }, `umbObservePropertyViewGuard`);
+        }, 'observePropertyType');
     }
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties);
@@ -68,7 +60,10 @@ let UmbContentWorkspacePropertyElement = class UmbContentWorkspacePropertyElemen
                 })}].value`;
                 this.observe(this._workspaceContext.propertyWriteGuard.isPermittedForVariantAndProperty(propertyVariantId, this._propertyType, this._datasetVariantId), (write) => {
                     this._writeable = write;
-                }, 'observeView');
+                }, 'umbObservePropertyWriteGuard');
+                this.observe(this._workspaceContext.propertyViewGuard.isPermittedForVariantAndProperty(propertyVariantId, this._propertyType, this._datasetVariantId), (permitted) => {
+                    this._viewable = permitted;
+                }, `umbObservePropertyViewGuard`);
             }
         }
     }

package/dist-cms/packages/content/content/workspace/content-detail-workspace-base.d.ts

@@ -91,7 +91,7 @@ export declare abstract class UmbContentDetailWorkspaceContextBase<DetailModelTy
     protected _processIncomingData(data: DetailModelType): Promise<DetailModelType>;
     /**
      * Get the name of a variant
-     * @param {UmbVariantId } [variantId] - The variant id
+     * @param {UmbVariantId } [variantId] - The variant id. If not provided, returns the name of the first active variant.
      * @returns { string | undefined} - The name of the variant
      * @memberof UmbContentDetailWorkspaceContextBase
      */
@@ -105,7 +105,7 @@ export declare abstract class UmbContentDetailWorkspaceContextBase<DetailModelTy
     setName(name: string, variantId?: UmbVariantId): void;
     /**
      * Get an observable for the name of a variant
-     * @param {UmbVariantId} [variantId] - The variant id
+     * @param {UmbVariantId} [variantId] - The variant id. If not provided, observes the name of the first active variant.
      * @returns {Observable<string>} - The name of the variant
      * @memberof UmbContentDetailWorkspaceContextBase
      */

package/dist-cms/packages/content/content/workspace/content-detail-workspace-base.js

@@ -269,12 +269,6 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
         else {
             this._segments.setValue([]);
         }
-        // Set culture and segment for all values:
-        const cultures = this.#languages.getValue().map((x) => x.unique);
-        let segments;
-        if (this.#variesBySegment) {
-            segments = this._segments.getValue().map((s) => s.alias);
-        }
         const repo = new UmbDataTypeDetailRepository(this);
         const propertyTypes = await this.structure.getContentTypeProperties();
         const contentTypeVariesByCulture = this.structure.getVariesByCulture();
@@ -301,10 +295,11 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
             };
         }));
         const controller = new UmbPropertyValuePresetVariantBuilderController(this);
-        controller.setCultures(cultures);
-        if (segments) {
-            controller.setSegments(segments);
+        const variantOptions = (await firstValueFrom(this.variantOptions)).map((o) => new UmbVariantId(o.culture, o.segment));
+        if (contentTypeVariesByCulture) {
+            variantOptions.push(UmbVariantId.CreateInvariant()); // Ensure invariant is included, when the contentType varies by culture, because we do not have a invariant-variant in our variant-options. [NL]
         }
+        controller.setVariantOptions(variantOptions);
         controller.setValues(data.values);
         const processedValues = await controller.create(valueDefinitions, {
             entityType: this.getEntityType(),
@@ -334,7 +329,7 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
     }
     /**
      * Get the name of a variant
-     * @param {UmbVariantId } [variantId] - The variant id
+     * @param {UmbVariantId } [variantId] - The variant id. If not provided, returns the name of the first active variant.
      * @returns { string | undefined} - The name of the variant
      * @memberof UmbContentDetailWorkspaceContextBase
      */
@@ -345,9 +340,14 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
         if (variantId) {
             return variants.find((x) => variantId.compare(x))?.name;
         }
-        else {
-            return variants[0]?.name;
+        // Get the first active variant's name
+        const activeVariant = this.splitView.getActiveVariants()[0];
+        if (activeVariant) {
+            const activeVariantId = UmbVariantId.Create(activeVariant);
+            return variants.find((x) => activeVariantId.compare(x))?.name;
         }
+        // Fallback to first variant if no active variant is set
+        return variants[0]?.name;
     }
     /**
      * Set the name of a variant
@@ -360,12 +360,22 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
     }
     /**
      * Get an observable for the name of a variant
-     * @param {UmbVariantId} [variantId] - The variant id
+     * @param {UmbVariantId} [variantId] - The variant id. If not provided, observes the name of the first active variant.
      * @returns {Observable<string>} - The name of the variant
      * @memberof UmbContentDetailWorkspaceContextBase
      */
     name(variantId) {
-        return this._data.createObservablePartOfCurrent((data) => data?.variants?.find((x) => variantId?.compare(x))?.name ?? '');
+        if (variantId) {
+            // Explicit variant requested
+            return this._data.createObservablePartOfCurrent((data) => data?.variants?.find((x) => variantId.compare(x))?.name ?? '');
+        }
+        // No variant specified - observe first active variant's name
+        return mergeObservables([this.splitView.activeVariantByIndex(0), this.variants], ([activeVariant, variants]) => {
+            if (!activeVariant || !variants)
+                return '';
+            const activeVariantId = UmbVariantId.Create(activeVariant);
+            return variants.find((x) => activeVariantId.compare(x))?.name ?? '';
+        });
     }
     /* Variants */
     /**

package/dist-cms/packages/content/content/workspace/content-detail-workspace-type-transform.controller.js

@@ -27,17 +27,9 @@ export class UmbContentDetailWorkspaceTypeTransformController extends UmbControl
             return;
         }
         const defaultLanguage = this.#getDefaultLanguage();
-        // To spare a bit of energy we keep awareness of whether this brings any changes:
-        let hasChanges = false;
-        const values = currentData.values.map((v) => {
-            const transformation = this.#transformValueForVariationChange(v, oldPropertyTypes, newPropertyTypes, defaultLanguage);
-            if (transformation.changed) {
-                hasChanges = true;
-            }
-            return transformation.value;
-        });
-        if (hasChanges) {
-            this.#workspace.setData({ ...currentData, values });
+        const result = this.#transformValuesForVariationChanges(currentData.values, oldPropertyTypes, newPropertyTypes, defaultLanguage);
+        if (result.hasChanges) {
+            this.#workspace.setData({ ...currentData, values: result.values });
         }
     }
     #getDefaultLanguage() {
@@ -48,25 +40,77 @@ export class UmbContentDetailWorkspaceTypeTransformController extends UmbControl
         }
         return defaultLanguage;
     }
-    #transformValueForVariationChange(value, oldPropertyTypes, newPropertyTypes, defaultLanguage) {
-        const oldType = oldPropertyTypes.find((p) => p.alias === value.alias);
-        const newType = newPropertyTypes.find((p) => p.alias === value.alias);
-        // If we cant find both, we do not dare changing anything. Notice a composition may not have been loaded yet.
-        if (!oldType || !newType) {
-            return { value, changed: false };
-        }
-        // If variation hasn't changed, return unchanged
-        if (oldType.variesByCulture === newType.variesByCulture) {
-            return { value, changed: false };
+    /**
+     * Transforms all values based on property variation changes.
+     * Handles both invariant→variant and variant→invariant transitions, including cleanup of duplicate values.
+     * When transitioning to invariant, keeps all segment values for the chosen culture (default language preferred).
+     * @param {Array<UmbContentValueModel>} values - All content values
+     * @param {Array<UmbPropertyTypeModel>} oldPropertyTypes - Previous property type definitions
+     * @param {Array<UmbPropertyTypeModel>} newPropertyTypes - New property type definitions
+     * @param {string} defaultLanguage - The default language code
+     * @returns {{ values: Array<UmbContentValueModel>; hasChanges: boolean }} Transformed values and change flag
+     */
+    #transformValuesForVariationChanges(values, oldPropertyTypes, newPropertyTypes, defaultLanguage) {
+        // Group values by property alias for efficient processing
+        const valuesByAlias = new Map();
+        for (const value of values) {
+            const existing = valuesByAlias.get(value.alias) ?? [];
+            existing.push(value);
+            valuesByAlias.set(value.alias, existing);
         }
-        // Variation has changed, migrate the value
-        if (newType.variesByCulture) {
-            // If it now varies by culture, set to default language
-            return { value: { ...value, culture: defaultLanguage }, changed: true };
-        }
-        else {
-            // If it no longer varies by culture, set to invariant
-            return { value: { ...value, culture: null }, changed: true };
+        const result = [];
+        let hasChanges = false;
+        for (const [alias, valuesOfAlias] of valuesByAlias) {
+            const oldType = oldPropertyTypes.find((p) => p.alias === alias);
+            const newType = newPropertyTypes.find((p) => p.alias === alias);
+            // If we can't find both types, keep values unchanged (composition may not have been loaded yet)
+            if (!oldType || !newType) {
+                result.push(...valuesOfAlias);
+                continue;
+            }
+            // No variation change - keep all values as-is
+            if (oldType.variesByCulture === newType.variesByCulture) {
+                result.push(...valuesOfAlias);
+                continue;
+            }
+            hasChanges = true;
+            if (newType.variesByCulture) {
+                // Invariant → Variant: keep existing culture values, only migrate invariant values if no value exists for that culture+segment
+                for (const value of valuesOfAlias) {
+                    if (value.culture !== null) {
+                        // Keep existing culture values as-is
+                        result.push(value);
+                    }
+                    else {
+                        // Invariant value: only migrate if no value exists for default language + same segment
+                        const existingCultureValue = valuesOfAlias.find((v) => v.culture === defaultLanguage && v.segment === value.segment);
+                        if (!existingCultureValue) {
+                            result.push({ ...value, culture: defaultLanguage });
+                        }
+                    }
+                }
+            }
+            else {
+                // Variant → Invariant: keep existing invariant values, only migrate culture values if no invariant value exists for that segment
+                const cultureToKeep = valuesOfAlias.some((v) => v.culture === defaultLanguage)
+                    ? defaultLanguage
+                    : valuesOfAlias[0]?.culture;
+                for (const value of valuesOfAlias) {
+                    if (value.culture === null) {
+                        // Keep existing invariant values as-is
+                        result.push(value);
+                    }
+                    else if (value.culture === cultureToKeep) {
+                        // Culture value: only migrate if no invariant value exists for the same segment
+                        const existingInvariantValue = valuesOfAlias.find((v) => v.culture === null && v.segment === value.segment);
+                        if (!existingInvariantValue) {
+                            result.push({ ...value, culture: null });
+                        }
+                    }
+                    // Discard values from other cultures
+                }
+            }
         }
+        return { values: result, hasChanges };
     }
 }

package/dist-cms/packages/content/content/workspace/views/edit/content-editor.element.d.ts

@@ -3,6 +3,7 @@ import type { UmbWorkspaceViewElement } from '../../../../../core/workspace/inde
 import './content-editor-tab.element.js';
 export declare class UmbContentWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceViewElement {
     #private;
+    private _hasRootProperties;
     private _loaded;
     private _hasRootGroups;
     private _routes;

package/dist-cms/packages/content/content/workspace/views/edit/content-editor.element.js

@@ -12,16 +12,12 @@ import { UmbTextStyles } from '../../../../../core/style/index.js';
 import { UMB_VIEW_CONTEXT, UmbViewController } from '../../../../../core/view/index.js';
 import './content-editor-tab.element.js';
 let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElement extends UmbLitElement {
-    /*
-    // root properties is a possible feature with Bellissima, but as it is new its not fully implemented yet [NL]
-    @state()
-    private _hasRootProperties = false;
-  */
     #viewContext;
     #tabViewContexts;
     #structureManager;
     constructor() {
         super();
+        this._hasRootProperties = false;
         this._loaded = false;
         this._hasRootGroups = false;
         this._routes = [];
@@ -41,7 +37,10 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
             this._tabs = tabs;
             this.#createRoutes();
         }, null);
-        // _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
+        this.observe(this._tabsStructureHelper.hasProperties, (hasRootProperties) => {
+            this._hasRootProperties = hasRootProperties;
+            this.#createRoutes();
+        }, 'observeRootProperties');
         this.consumeContext(UMB_PROPERTY_STRUCTURE_WORKSPACE_CONTEXT, (workspaceContext) => {
             this.#structureManager = workspaceContext?.structure;
             this._tabsStructureHelper.setStructureManager(workspaceContext?.structure);
@@ -63,7 +62,7 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
         if (!this._tabs || !this.#structureManager)
             return;
         const routes = [];
-        if (this._hasRootGroups) {
+        if (this._hasRootGroups || this._hasRootProperties) {
             routes.push({
                 path: 'root',
                 component: () => import('./content-editor-tab.element.js'),
@@ -147,9 +146,12 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
         }
         return html `
 			<umb-body-layout header-fit-height>
-				${this._routerPath && (this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups))
+				${this._routerPath &&
+            (this._tabs.length > 1 || (this._tabs.length === 1 && (this._hasRootGroups || this._hasRootProperties)))
             ? html ` <uui-tab-group slot="header">
-							${this._hasRootGroups && this._tabs.length > 0 ? this.#renderTab(null, '#general_generic') : nothing}
+							${(this._hasRootGroups || this._hasRootProperties) && this._tabs.length > 0
+                ? this.#renderTab(null, '#general_generic')
+                : nothing}
 							${repeat(this._tabs, (tab) => tab.name, (tab, index) => {
                 const path = 'tab/' + encodeFolderName(tab.name || '');
                 return this.#renderTab(path, tab.name, index);
@@ -196,9 +198,15 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
 				height: 100%;
 				--uui-tab-background: var(--uui-color-surface);
 			}
+			umb-badge {
+				--uui-badge-inset: 0 0 auto auto;
+			}
 		`,
     ]; }
 };
+__decorate([
+    state()
+], UmbContentWorkspaceViewEditElement.prototype, "_hasRootProperties", void 0);
 __decorate([
     state()
 ], UmbContentWorkspaceViewEditElement.prototype, "_loaded", void 0);

package/dist-cms/packages/content/content-type/modals/composition-picker/composition-picker-modal.element.d.ts

@@ -7,6 +7,12 @@ export declare class UmbCompositionPickerModalElement extends UmbModalBaseElemen
     private _selection;
     private _usedForInheritance;
     private _usedForComposition;
+    /**
+     * Loading state for the composition data fetch.
+     * Initialized to true to show loader immediately when modal opens.
+     * Set to false when data is successfully loaded or an error occurs.
+     */
+    private _loading;
     connectedCallback(): void;
     protected _submitModal(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/content/content-type/modals/composition-picker/composition-picker-modal.element.js

@@ -16,6 +16,12 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
         this._selection = [];
         this._usedForInheritance = [];
         this._usedForComposition = [];
+        /**
+         * Loading state for the composition data fetch.
+         * Initialized to true to show loader immediately when modal opens.
+         * Set to false when data is successfully loaded or an error occurs.
+         */
+        this._loading = true;
     }
     // TODO: Loosen this from begin specific to Document Types, so we can have a general interface for composition repositories. [NL]
     #compositionRepository;
@@ -81,14 +87,17 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
             currentCompositeUniques: this._selection,
             currentPropertyAliases: currentPropertyAliases,
         });
-        if (!data)
+        if (!data) {
+            this._loading = false;
             return;
+        }
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
         const grouped = Object.groupBy(data, (item) => '/' + item.folderPath.join('/'));
         this._compatibleCompositions = Object.keys(grouped)
             .sort((a, b) => a.localeCompare(b))
             .map((key) => ({ path: key, compositions: grouped[key] }));
+        this._loading = false;
     }
     #onSelectionAdd(unique) {
         this._selection = [...this._selection, unique];
@@ -142,6 +151,11 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
 		`;
     }
     #renderAvailableCompositions() {
+        if (this._loading) {
+            return html `<div id="loader" role="status" aria-live="polite" aria-label="Loading compositions">
+				<uui-loader></uui-loader>
+			</div>`;
+        }
         if (this._compatibleCompositions) {
             return html `
 				<umb-localize key="contentTypeEditor_compositionsDescription">
@@ -191,6 +205,14 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
     }
     static { this.styles = [
         css `
+			#loader {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				padding: var(--uui-size-layout-1);
+				min-height: 200px;
+			}
+
 			uui-input {
 				margin: var(--uui-size-6) 0;
 				display: flex;
@@ -234,6 +256,9 @@ __decorate([
 __decorate([
     state()
 ], UmbCompositionPickerModalElement.prototype, "_usedForComposition", void 0);
+__decorate([
+    state()
+], UmbCompositionPickerModalElement.prototype, "_loading", void 0);
 UmbCompositionPickerModalElement = __decorate([
     customElement('umb-composition-picker-modal')
 ], UmbCompositionPickerModalElement);

package/dist-cms/packages/content/content-type/structure/content-type-property-structure-helper.class.js

@@ -52,7 +52,27 @@ export class UmbContentTypePropertyStructureHelper extends UmbControllerBase {
         return this.#containerId;
     }
     #observeContainer() {
-        this.observe(this.#containerId ? this.#structure?.mergedContainersOfId(this.#containerId) : undefined, (container) => {
+        // Handle three cases:
+        // 1. containerId === undefined → Not set yet, clear properties
+        // 2. containerId === null → Root properties (no container)
+        // 3. containerId === string → Container-based properties
+        if (this.#containerId === undefined) {
+            // Not set yet, clear properties
+            this.#propertyStructure.setValue([]);
+            this.removeUmbControllerByAlias('observeProperties');
+            this.removeUmbControllerByAlias('observeContainer');
+            return;
+        }
+        if (this.#containerId === null) {
+            // Root properties (no container)
+            this.removeUmbControllerByAlias('observeContainer');
+            this.observe(this.#structure?.rootPropertyStructures(), (properties) => {
+                this.#propertyStructure.setValue(properties ?? []);
+            }, 'observeProperties');
+            return;
+        }
+        // Container-based properties
+        this.observe(this.#structure?.mergedContainersOfId(this.#containerId), (container) => {
             this.observe(container ? this.#structure?.propertyStructuresOfGroupIds(container.ids ?? []) : undefined, (properties) => {
                 this.#propertyStructure.setValue(properties ?? []);
             }, 'observeProperties');

package/dist-cms/packages/content/content-type/structure/content-type-structure-manager.class.js

@@ -628,7 +628,7 @@ export class UmbContentTypeStructureManager extends UmbControllerBase {
             const props = [];
             docTypes.forEach((docType) => {
                 docType.properties?.forEach((property) => {
-                    if (property.container?.id === containerId) {
+                    if ((containerId === null && !property.container) || property.container?.id === containerId) {
                         props.push(property);
                     }
                 });

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

@@ -57,12 +57,23 @@ let UmbContentTypeDesignEditorPropertiesElement = class UmbContentTypeDesignEdit
             onChange: ({ model }) => {
                 this._properties = model;
             },
-            onContainerChange: ({ item }) => {
+            onContainerChange: async ({ item }) => {
                 if (this._containerId === undefined) {
                     throw new Error('ContainerId is not set');
                 }
+                if (this._ownerContentTypeUnique === undefined) {
+                    throw new Error('OwnerContentTypeUnique is not set');
+                }
+                let containerId = this._containerId;
+                // ensure container is local:
+                if (this._containerId !== null) {
+                    const container = await this.#propertyStructureHelper
+                        .getStructureManager()
+                        ?.ensureContainerOf(this._containerId, this._ownerContentTypeUnique);
+                    containerId = container?.id || this._containerId;
+                }
                 this.#propertyStructureHelper.partialUpdateProperty(item.unique, {
-                    container: this._containerId ? { id: this._containerId } : null,
+                    container: containerId ? { id: containerId } : null,
                 });
             },
             onEnd: ({ item }) => {

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

@@ -125,8 +125,7 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
         else {
             return html `
 				<div id="header">
-					<p><b>${this.property.name}</b></p>
-					<p><i>${this.property.alias}</i></p>
+					<p>${this.localize.string(this.property.name)}<i>${this.property.alias}</i></p>
 					<p>${this.property.description}</p>
 				</div>
 				<div id="editor">
@@ -282,12 +281,15 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
     static { this.styles = [
         UmbTextStyles,
         css `
-			:host(:not([sort-mode-active])) {
-				display: grid;
-				grid-template-columns: 300px auto;
-				column-gap: var(--uui-size-layout-2);
+			:host {
+				display: block;
 				border-bottom: 1px solid var(--uui-color-divider);
 				padding: var(--uui-size-layout-1) 0;
+			}
+			:host(:not([sort-mode-active])) {
+				display: grid;
+				grid-template-columns: 320px auto;
+				column-gap: var(--uui-size-space-5);
 				container-type: inline-size;
 			}
 
@@ -312,16 +314,14 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 				position: relative;
 				display: flex;
 				padding: 0;
-				margin-bottom: var(--uui-size-3);
-			}
-
-			:host([sort-mode-active]:last-of-type) {
-				margin-bottom: 0;
 			}
 
 			:host([sort-mode-active]:not([_inherited])) {
 				cursor: grab;
 			}
+			:host([sort-mode-active][_inherited]) {
+				cursor: not-allowed;
+			}
 
 			:host([sort-mode-active]) .sortable {
 				flex: 1;
@@ -333,9 +333,6 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 			:host([sort-mode-active][_inherited]) .sortable {
 				color: var(--uui-color-disabled-contrast);
 			}
-			:host([sort-mode-active]:not([_inherited])) .sortable {
-				background-color: var(--uui-color-divider);
-			}
 
 			:host([sort-mode-active]) uui-input {
 				max-width: 75px;
@@ -373,6 +370,7 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 
 			#header i {
 				opacity: 0.55;
+				float: right;
 			}
 
 			#header umb-input-with-alias {
@@ -403,7 +401,7 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 			}
 			#editor-name {
 				position: absolute;
-				top: var(--uui-size-space-4);
+				top: var(--uui-size-space-3);
 				left: var(--uui-size-space-4);
 				font-size: var(--uui-type-small-size);
 				font-weight: 400;

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

@@ -48,7 +48,7 @@ let UmbContentTypeDesignEditorTabElement = class UmbContentTypeDesignEditorTabEl
             onChange: ({ model }) => {
                 this._groups = model;
             },
-            onContainerChange: ({ item }) => {
+            onContainerChange: async ({ item }) => {
                 if (this.#containerId === undefined) {
                     throw new Error('ContainerId is not set');
                 }
@@ -56,8 +56,18 @@ let UmbContentTypeDesignEditorTabElement = class UmbContentTypeDesignEditorTabEl
                     // This may be possible later, but for now this is not possible. [NL]
                     throw new Error('OwnerId is not set for the given container, we cannot move containers that are not owned by the current Document.');
                 }
+                let containerId = this.#containerId;
+                // ensure container is local:
+                if (containerId !== null) {
+                    const structureManager = this.#groupStructureHelper.getStructureManager();
+                    if (!structureManager) {
+                        throw new Error('Could not get Structure Manager from Structure Helper');
+                    }
+                    const container = await structureManager.ensureContainerOf(containerId, structureManager.getOwnerContentType().unique);
+                    containerId = container?.id || null;
+                }
                 this.#groupStructureHelper.partialUpdateContainer(item.ownerId, {
-                    parent: this.#containerId ? { id: this.#containerId } : null,
+                    parent: containerId ? { id: containerId } : null,
                 });
             },
             onEnd: ({ item }) => {
@@ -180,7 +190,7 @@ let UmbContentTypeDesignEditorTabElement = class UmbContentTypeDesignEditorTabEl
     #onAddGroup;
     render() {
         return html `
-			${this.#containerId
+			${this.#containerId !== undefined
             ? html `
 							<uui-box class="${this._hasProperties ? '' : 'opaque'}">
 								<umb-content-type-design-editor-properties

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor.element.d.ts

@@ -6,6 +6,7 @@ export declare class UmbContentTypeDesignEditorElement extends UmbLitElement imp
     #private;
     set manifest(value: ManifestWorkspaceViewContentTypeDesignEditorKind);
     private _compositionRepositoryAlias?;
+    private _hasRootProperties;
     private _hasRootGroups;
     private _routes?;
     private _tabs?;