@umbraco-cms/backoffice 16.0.0-rc → 16.0.0-rc2

package/dist-cms/assets/lang/pt-br.d.ts

@@ -3,8 +3,8 @@
  * Creator Link: https://docs.umbraco.com/umbraco-cms/extending/language-files
  *
  * Language Alias: pt
- * Language Int Name: Portuguese (BR)
- * Language Local Name: português (BR)
+ * Language Int Name: Portuguese (Brazil)
+ * Language Local Name: Português ()
  * Language LCID:
  * Language Culture: pt-BR
  */

package/dist-cms/assets/lang/pt-br.ts

@@ -3,8 +3,8 @@
  * Creator Link: https://docs.umbraco.com/umbraco-cms/extending/language-files
  *
  * Language Alias: pt
- * Language Int Name: Portuguese (BR)
- * Language Local Name: português (BR)
+ * Language Int Name: Portuguese (Brazil)
+ * Language Local Name: Português ()
  * Language LCID:
  * Language Culture: pt-BR
  */

package/dist-cms/assets/lang/pt.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Creator Name: The Umbraco community
+ * Creator Link: https://docs.umbraco.com/umbraco-cms/extending/language-files
+ *
+ * Language Alias: pt
+ * Language Int Name: Portuguese
+ * Language Local Name: Português
+ * Language LCID:
+ * Language Culture: pt-PT
+ */
+import type { UmbLocalizationDictionary } from '@umbraco-cms/backoffice/localization-api';
+declare const _default: UmbLocalizationDictionary;
+export default _default;

package/dist-cms/assets/lang/pt.js

@@ -0,0 +1 @@
+export default {};

package/dist-cms/assets/lang/pt.ts

@@ -0,0 +1,12 @@
+/**
+ * Creator Name: The Umbraco community
+ * Creator Link: https://docs.umbraco.com/umbraco-cms/extending/language-files
+ *
+ * Language Alias: pt
+ * Language Int Name: Portuguese
+ * Language Local Name: Português
+ * Language LCID:
+ * Language Culture: pt-PT
+ */
+import type { UmbLocalizationDictionary } from '@umbraco-cms/backoffice/localization-api';
+export default {} as UmbLocalizationDictionary;

package/dist-cms/custom-elements.json

@@ -531,6 +531,17 @@
         }
       ]
     },
+    {
+      "name": "umb-preview-segment",
+      "path": "./../src/apps/preview/apps/preview-segment.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        }
+      ]
+    },
     {
       "name": "umb-preview",
       "path": "./../src/apps/preview/preview.element.ts",
@@ -2632,8 +2643,7 @@
         },
         {
           "name": "label",
-          "type": "string",
-          "default": "\"\""
+          "type": "string | undefined"
         },
         {
           "name": "look",
@@ -2662,9 +2672,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "popoverContainerElement"
-        },
         {
           "name": "open",
           "attribute": "open",
@@ -2674,8 +2681,7 @@
         {
           "name": "label",
           "attribute": "label",
-          "type": "string",
-          "default": "\"\""
+          "type": "string | undefined"
         },
         {
           "name": "look",
@@ -2707,6 +2713,9 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "popoverContainerElement"
+        },
         {
           "name": "styles",
           "type": "array",
@@ -4536,19 +4545,14 @@
       "attributes": [
         {
           "name": "value",
-          "type": "FormDataEntryValue | FormData"
+          "type": "string | undefined"
         }
       ],
       "properties": [
         {
           "name": "value",
           "attribute": "value",
-          "type": "FormDataEntryValue | FormData"
-        },
-        {
-          "name": "styles",
-          "type": "array",
-          "default": "[null]"
+          "type": "string | undefined"
         }
       ]
     },
@@ -5097,7 +5101,14 @@
     },
     {
       "name": "umb-picker-search-result",
-      "path": "./../src/packages/core/picker/search/picker-search-result.element.ts"
+      "path": "./../src/packages/core/picker/search/picker-search-result.element.ts",
+      "properties": [
+        {
+          "name": "pickableFilter",
+          "type": "PickableFilterMethodType<UmbEntityModel>",
+          "default": "\"() => true\""
+        }
+      ]
     },
     {
       "name": "umb-default-picker-search-result-item",
@@ -5106,6 +5117,10 @@
         {
           "name": "item",
           "type": "ItemType | undefined"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean | undefined"
         }
       ],
       "properties": [
@@ -5113,6 +5128,11 @@
           "name": "item",
           "attribute": "item",
           "type": "ItemType | undefined"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "type": "boolean | undefined"
         }
       ]
     },
@@ -15144,7 +15164,7 @@
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"UmbTextStyles\",null]"
+          "default": "[null]"
         }
       ]
     },

package/dist-cms/libs/observable-api/states/array-state.d.ts

@@ -53,7 +53,7 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
     getHasOne(unique: U): boolean;
     /**
      * @function remove
-     * @param {unknown[]} uniques - The unique values to remove.
+     * @param {U[]} uniques - The unique values to remove.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Remove some new data of this Subject.
      * @example <caption>Example remove entry with id '1' and '2'</caption>
@@ -64,10 +64,10 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
      * const myState = new UmbArrayState(data, (x) => x.id);
      * myState.remove([1, 2]);
      */
-    remove(uniques: unknown[]): this;
+    remove(uniques: U[]): this;
     /**
      * @function removeOne
-     * @param {unknown} unique - The unique value to remove.
+     * @param {U} unique - The unique value to remove.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Remove some new data of this Subject.
      * @example <caption>Example remove entry with id '1'</caption>
@@ -78,7 +78,7 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
      * const myState = new UmbArrayState(data, (x) => x.id);
      * myState.removeOne(1);
      */
-    removeOne(unique: unknown): this;
+    removeOne(unique: U): this;
     /**
      * @function filter
      * @param predicate
@@ -149,7 +149,7 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
     append(entries: T[]): this;
     /**
      * @function updateOne
-     * @param {unknown} unique - Unique value to find entry to update.
+     * @param {U} unique - Unique value to find entry to update.
      * @param {Partial<T>} entry - new data to be added in this Subject.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Update a item with some new data, requires the ArrayState to be constructed with a getUnique method.
@@ -161,6 +161,6 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
      * const myState = new UmbArrayState(data, (x) => x.key);
      * myState.updateOne(2, {value: 'updated-bar'});
      */
-    updateOne(unique: unknown, entry: Partial<T>): this;
+    updateOne(unique: U, entry: Partial<T>): this;
     destroy(): void;
 }

package/dist-cms/libs/observable-api/states/array-state.js

@@ -79,7 +79,7 @@ export class UmbArrayState extends UmbDeepState {
     }
     /**
      * @function remove
-     * @param {unknown[]} uniques - The unique values to remove.
+     * @param {U[]} uniques - The unique values to remove.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Remove some new data of this Subject.
      * @example <caption>Example remove entry with id '1' and '2'</caption>
@@ -108,7 +108,7 @@ export class UmbArrayState extends UmbDeepState {
     }
     /**
      * @function removeOne
-     * @param {unknown} unique - The unique value to remove.
+     * @param {U} unique - The unique value to remove.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Remove some new data of this Subject.
      * @example <caption>Example remove entry with id '1'</caption>
@@ -244,7 +244,7 @@ export class UmbArrayState extends UmbDeepState {
     }
     /**
      * @function updateOne
-     * @param {unknown} unique - Unique value to find entry to update.
+     * @param {U} unique - Unique value to find entry to update.
      * @param {Partial<T>} entry - new data to be added in this Subject.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Update a item with some new data, requires the ArrayState to be constructed with a getUnique method.

package/dist-cms/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.js

@@ -107,6 +107,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
         this.#extensionSlotRenderMethod = (ext) => {
             if (ext.component) {
                 ext.component.classList.add('umb-block-grid__block--view');
+                ext.component.setAttribute('part', 'component');
             }
             if (this._exposed) {
                 return ext.component;
@@ -441,6 +442,11 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				border-color: var(--uui-color-invalid);
 			}
 
+			umb-extension-slot::part(component) {
+				position: relative;
+				z-index: 0;
+			}
+
 			#invalidLocation {
 				position: absolute;
 				top: -1em;

package/dist-cms/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.d.ts

@@ -2,17 +2,16 @@ import type { UmbBlockGridTypeAreaTypePermission } from '../../index.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { nothing } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
-import type { UmbBlockTypeWithGroupKey } from '@umbraco-cms/backoffice/block-type';
 export declare class UmbPropertyEditorUIBlockGridAreaTypePermissionElement extends UmbLitElement implements UmbPropertyEditorUiElement {
     #private;
     set value(value: Array<UmbBlockGridTypeAreaTypePermission>);
     get value(): Array<UmbBlockGridTypeAreaTypePermission>;
     private _value;
-    _blockTypes: Array<UmbBlockTypeWithGroupKey>;
+    private _blockTypes?;
     private _blockTypesWithElementName;
     private _blockGroups;
     constructor();
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1> | "There must be one Block Type created before permissions can be configured.";
     static styles: import("lit").CSSResult[];
 }
 export default UmbPropertyEditorUIBlockGridAreaTypePermissionElement;

package/dist-cms/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.js

@@ -22,14 +22,13 @@ let UmbPropertyEditorUIBlockGridAreaTypePermissionElement = class UmbPropertyEdi
     constructor() {
         super();
         this._value = [];
-        this._blockTypes = [];
         this._blockTypesWithElementName = [];
         this._blockGroups = [];
         this.#itemsManager = new UmbRepositoryItemsManager(this, UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS);
         this.observe(this.#itemsManager.items, (items) => {
             this._blockTypesWithElementName = items
                 .map((item) => {
-                const blockType = this._blockTypes.find((block) => block.contentElementTypeKey === item.unique);
+                const blockType = this._blockTypes?.find((block) => block.contentElementTypeKey === item.unique);
                 if (blockType) {
                     return { type: blockType, name: item.name };
                 }
@@ -82,9 +81,12 @@ let UmbPropertyEditorUIBlockGridAreaTypePermissionElement = class UmbPropertyEdi
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
-        if (this._blockTypesWithElementName.length === 0) {
+        if (this._blockTypes === undefined) {
             return nothing;
         }
+        if (this._blockTypesWithElementName.length === 0) {
+            return 'There must be one Block Type created before permissions can be configured.';
+        }
         return html `<div id="permissions">
 				${repeat(this._value, (permission) => permission, (permission, index) => {
             const showCategoryHeader = this._blockGroups.length > 0 && this._blockTypesWithElementName.length > 0;
@@ -191,6 +193,9 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUIBlockGridAreaTypePermissionElement.prototype, "_value", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridAreaTypePermissionElement.prototype, "_blockTypes", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUIBlockGridAreaTypePermissionElement.prototype, "_blockTypesWithElementName", void 0);

package/dist-cms/packages/block/block-list/components/block-list-entry/block-list-entry.element.js

@@ -75,6 +75,7 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
             return true;
         };
         this.#extensionSlotRenderMethod = (ext) => {
+            ext.component?.setAttribute('part', 'component');
             if (this._exposed) {
                 return ext.component;
             }
@@ -354,6 +355,11 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
 				border-color: var(--uui-color-invalid);
 			}
 
+			umb-extension-slot::part(component) {
+				position: relative;
+				z-index: 0;
+			}
+
 			uui-action-bar {
 				position: absolute;
 				top: var(--uui-size-2);

package/dist-cms/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.js

@@ -55,6 +55,7 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
             this.#context.expose();
         };
         this.#extensionSlotRenderMethod = (ext) => {
+            ext.component?.setAttribute('part', 'component');
             if (this._exposed) {
                 return ext.component;
             }
@@ -223,6 +224,12 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
 					outline: 3px solid var(--uui-color-focus);
 				}
 			}
+
+			umb-extension-slot::part(component) {
+				position: relative;
+				z-index: 0;
+			}
+
 			uui-action-bar {
 				position: absolute;
 				top: var(--uui-size-2);

package/dist-cms/packages/block/block-type/components/input-block-type/input-block-type.element.js

@@ -93,6 +93,12 @@ let UmbInputBlockTypeElement = class UmbInputBlockTypeElement extends UmbLitElem
                             presetAlias: 'element',
                         },
                     },
+                    // TODO: hide the queryParams and filter config under a "elementTypesOnly" field. [MR]
+                    search: {
+                        queryParams: {
+                            isElementType: true,
+                        },
+                    },
                     pickableFilter: (docType) => 
                     // Only pick elements:
                     docType.isElement &&

package/dist-cms/packages/clipboard/clipboard-entry/picker/clipboard-entry-picker.element.js

@@ -110,7 +110,7 @@ let UmbClipboardEntryPickerElement = class UmbClipboardEntryPickerElement extend
 				slot="actions"
 				.entityType=${item.entityType}
 				.unique=${item.unique}
-				.label=${item.name}>
+				.label=${this.localize.term('actions_viewActionsFor', [item.name])}>
 			</umb-entity-actions-bundle>
 		`;
     }

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

@@ -6,7 +6,7 @@ import type { UmbContentValidationRepository } from '../repository/content-valid
 import type { UmbContentWorkspaceContext } from './content-workspace-context.interface.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbDetailRepository, UmbDetailRepositoryConstructor } from '@umbraco-cms/backoffice/repository';
-import { UmbEntityDetailWorkspaceContextBase, UmbWorkspaceSplitViewManager, type UmbEntityDetailWorkspaceContextArgs, type UmbEntityDetailWorkspaceContextCreateArgs } from '@umbraco-cms/backoffice/workspace';
+import { UmbEntityDetailWorkspaceContextBase, UmbWorkspaceSplitViewManager, type UmbEntityDetailWorkspaceContextArgs, type UmbEntityDetailWorkspaceContextCreateArgs, type UmbSaveableWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
 import { UmbContentTypeStructureManager, type UmbContentTypeModel, type UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbVariantId, type UmbEntityVariantModel, type UmbEntityVariantOptionModel } from '@umbraco-cms/backoffice/variant';
 import { UmbReadOnlyVariantGuardManager } from '@umbraco-cms/backoffice/utils';
@@ -44,7 +44,7 @@ export interface UmbContentDetailWorkspaceContextArgs<DetailModelType extends Um
  */
 export declare abstract class UmbContentDetailWorkspaceContextBase<DetailModelType extends UmbContentDetailModel<VariantModelType>, DetailRepositoryType extends UmbDetailRepository<DetailModelType> = UmbDetailRepository<DetailModelType>, ContentTypeDetailModelType extends UmbContentTypeModel = UmbContentTypeModel, VariantModelType extends UmbEntityVariantModel = DetailModelType extends {
     variants: UmbEntityVariantModel[];
-} ? DetailModelType['variants'][0] : never, VariantOptionModelType extends UmbEntityVariantOptionModel = UmbEntityVariantOptionModel<VariantModelType>, CreateArgsType extends UmbEntityDetailWorkspaceContextCreateArgs<DetailModelType> = UmbEntityDetailWorkspaceContextCreateArgs<DetailModelType>> extends UmbEntityDetailWorkspaceContextBase<DetailModelType, DetailRepositoryType, CreateArgsType> implements UmbContentWorkspaceContext<DetailModelType, ContentTypeDetailModelType, VariantModelType> {
+} ? DetailModelType['variants'][0] : never, VariantOptionModelType extends UmbEntityVariantOptionModel = UmbEntityVariantOptionModel<VariantModelType>, CreateArgsType extends UmbEntityDetailWorkspaceContextCreateArgs<DetailModelType> = UmbEntityDetailWorkspaceContextCreateArgs<DetailModelType>> extends UmbEntityDetailWorkspaceContextBase<DetailModelType, DetailRepositoryType, CreateArgsType> implements UmbContentWorkspaceContext<DetailModelType, ContentTypeDetailModelType, VariantModelType>, UmbSaveableWorkspaceContext {
     #private;
     readonly IS_CONTENT_WORKSPACE_CONTEXT: true;
     readonly readOnlyGuard: UmbReadOnlyVariantGuardManager;
@@ -205,6 +205,11 @@ export declare abstract class UmbContentDetailWorkspaceContextBase<DetailModelTy
      */
     requestSubmit(): Promise<void>;
     submit(): Promise<void>;
+    /**
+     * Request a save of the workspace, in the case of Document Workspaces the validation does not need to be valid for this to be saved.
+     * @returns {Promise<void>} a promise which resolves once it has been completed.
+     */
+    requestSave(): Promise<void>;
     /**
      * Get the data to save
      * @param {Array<UmbVariantId>} variantIds - The variant ids to save
@@ -213,6 +218,7 @@ export declare abstract class UmbContentDetailWorkspaceContextBase<DetailModelTy
      */
     constructSaveData(variantIds: Array<UmbVariantId>): Promise<DetailModelType>;
     protected _handleSubmit(): Promise<void>;
+    protected _handleSave(): Promise<void>;
     /**
      * Perform the create or update of the content
      * @deprecated Use the public performCreateOrUpdate instead. Will be removed in v. 17.

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

@@ -544,7 +544,7 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
             this.#validationRepository ??= new this.#validationRepositoryClass(this);
             // We ask the server first to get a concatenated set of validation messages. So we see both front-end and back-end validation messages [NL]
             if (this.getIsNew()) {
-                const parent = this.getParent();
+                const parent = this._internal_getCreateUnderParent();
                 if (!parent)
                     throw new Error('Parent is not set');
                 await this.#serverValidation.askServerForValidation(saveData, this.#validationRepository.validateCreate(saveData, parent.unique));
@@ -564,6 +564,13 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
     submit() {
         return this._handleSubmit();
     }
+    /**
+     * Request a save of the workspace, in the case of Document Workspaces the validation does not need to be valid for this to be saved.
+     * @returns {Promise<void>} a promise which resolves once it has been completed.
+     */
+    requestSave() {
+        return this._handleSave();
+    }
     /**
      * Get the data to save
      * @param {Array<UmbVariantId>} variantIds - The variant ids to save
@@ -574,6 +581,10 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
         return this._data.constructData(variantIds);
     }
     async _handleSubmit() {
+        await this._handleSave();
+        this._closeModal();
+    }
+    async _handleSave() {
         const data = this.getData();
         if (!data) {
             throw new Error('Data is missing');
@@ -611,16 +622,10 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
         await this.runMandatoryValidationForSaveData(saveData, variantIds);
         if (this.#validateOnSubmit) {
             await this.askServerToValidate(saveData, variantIds);
-            return this.validateAndSubmit(async () => {
+            const valid = await this._validateAndLog().then(() => true, () => false);
+            if (valid || this.#ignoreValidationResultOnSubmit) {
                 return this.performCreateOrUpdate(variantIds, saveData);
-            }, async (reason) => {
-                if (this.#ignoreValidationResultOnSubmit) {
-                    return this.performCreateOrUpdate(variantIds, saveData);
-                }
-                else {
-                    return this.invalidSubmit(reason);
-                }
-            });
+            }
         }
         else {
             await this.performCreateOrUpdate(variantIds, saveData);
@@ -654,7 +659,7 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
     async #create(variantIds, saveData) {
         if (!this._detailRepository)
             throw new Error('Detail repository is not set');
-        const parent = this.getParent();
+        const parent = this._internal_getCreateUnderParent();
         if (!parent)
             throw new Error('Parent is not set');
         const { data, error } = await this._detailRepository.create(saveData, parent.unique);
@@ -680,7 +685,6 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
         });
         eventContext.dispatchEvent(event);
         this.setIsNew(false);
-        this._closeModal();
     }
     async #update(variantIds, saveData) {
         if (!this._detailRepository)
@@ -712,7 +716,6 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
             eventUnique: this._workspaceEventUnique,
         });
         eventContext.dispatchEvent(updatedEvent);
-        this._closeModal();
     }
     resetState() {
         super.resetState();

package/dist-cms/packages/content/content-type/global-components/content-type-workspace-editor-header.element.js

@@ -102,15 +102,16 @@ let UmbContentTypeWorkspaceEditorHeaderElement = class UmbContentTypeWorkspaceEd
 				display: flex;
 				flex: 1 1 auto;
 				flex-direction: column;
-				gap: var(--uui-size-space-1);
 			}
 
 			#name {
 				width: 100%;
+				z-index: 1;
 			}
 
 			#description {
 				width: 100%;
+				margin-top: 1px;
 				--uui-input-height: var(--uui-size-8);
 				--uui-input-border-color: transparent;
 			}
@@ -123,6 +124,8 @@ let UmbContentTypeWorkspaceEditorHeaderElement = class UmbContentTypeWorkspaceEd
 				font-size: var(--uui-size-8);
 				height: 60px;
 				width: 60px;
+				--uui-button-border-color: transparent;
+				--uui-button-border-color-hover: var(--uui-color-border);
 			}
 		`,
     ]; }

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

@@ -6,6 +6,7 @@ export declare class UmbCompositionPickerModalElement extends UmbModalBaseElemen
     private _compatibleCompositions?;
     private _selection;
     private _usedForInheritance;
+    private _usedForComposition;
     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

@@ -15,6 +15,7 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
         this._references = [];
         this._selection = [];
         this._usedForInheritance = [];
+        this._usedForComposition = [];
     }
     // TODO: Loosen this from begin specific to Document Types, so we can have a general interface for composition repositories. [NL]
     #compositionRepository;
@@ -33,6 +34,7 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
         }
         this._selection = this.data?.selection ?? [];
         this._usedForInheritance = this.data?.usedForInheritance ?? [];
+        this._usedForComposition = this.data?.usedForComposition ?? [];
         this.modalContext?.setValue({ selection: this._selection });
         const isNew = this.data.isNew;
         this.#unique = !isNew ? this.data.unique : null;
@@ -98,7 +100,9 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
     render() {
         return html `
 			<umb-body-layout headline="${this.localize.term('contentTypeEditor_compositions')}">
-				${this._references.length ? this.#renderHasReference() : this.#renderAvailableCompositions()}
+				<uui-box>
+					${this._references.length ? this.#renderHasReference() : this.#renderAvailableCompositions()}
+				</uui-box>
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 					${!this._references.length
@@ -166,11 +170,16 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
     #renderCompositionsItems(compositionsList) {
         return repeat(compositionsList, (compositions) => compositions.unique, (compositions) => {
             const usedForInheritance = this._usedForInheritance.includes(compositions.unique);
+            const usedForComposition = this._usedForComposition.includes(compositions.unique);
+            /* The server will return isCompatible as false if the Doc Type is currently being used in a composition.
+            Therefore, we need to account for this in the "isDisabled" check to ensure it remains enabled.
+            Otherwise, it would become disabled and couldn't be deselected by the user. */
+            const isDisabled = usedForInheritance || (compositions.isCompatible === false && !usedForComposition);
             return html `
 					<uui-menu-item
 						label=${this.localize.string(compositions.name)}
 						?selectable=${!usedForInheritance}
-						?disabled=${usedForInheritance}
+						?disabled=${isDisabled}
 						@selected=${() => this.#onSelectionAdd(compositions.unique)}
 						@deselected=${() => this.#onSelectionRemove(compositions.unique)}
 						?selected=${this._selection.find((unique) => unique === compositions.unique)}>
@@ -202,6 +211,10 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
 				align-items: center;
 				gap: var(--uui-size-3);
 			}
+
+			.compositions-list {
+				margin-block: var(--uui-size-3);
+			}
 		`,
     ]; }
 };
@@ -217,6 +230,9 @@ __decorate([
 __decorate([
     state()
 ], UmbCompositionPickerModalElement.prototype, "_usedForInheritance", void 0);
+__decorate([
+    state()
+], UmbCompositionPickerModalElement.prototype, "_usedForComposition", void 0);
 UmbCompositionPickerModalElement = __decorate([
     customElement('umb-composition-picker-modal')
 ], UmbCompositionPickerModalElement);

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

@@ -3,6 +3,7 @@ export interface UmbCompositionPickerModalData {
     compositionRepositoryAlias: string;
     selection: Array<string>;
     usedForInheritance: Array<string>;
+    usedForComposition: Array<string>;
     unique: string | null;
     isElement: boolean;
     currentPropertyAliases: Array<string>;