@umbraco-cms/backoffice 14.0.0--preview006-2c37be92 → 14.0.0--preview006-e9aeae87

package/dist-cms/custom-elements.json

@@ -6070,6 +6070,17 @@
         }
       ]
     },
+    {
+      "name": "umb-composition-picker-modal",
+      "path": "./../src/packages/documents/document-types/modals/composition-picker/composition-picker-modal.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        }
+      ]
+    },
     {
       "name": "umb-property-editor-ui-document-type-picker",
       "path": "./../src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts",

package/dist-cms/packages/documents/document-types/index.d.ts

@@ -4,3 +4,4 @@ export * from './workspace/index.js';
 export * from './repository/index.js';
 export * from './tree/types.js';
 export * from './types.js';
+export * from './modals/index.js';

package/dist-cms/packages/documents/document-types/index.js

@@ -4,3 +4,4 @@ export * from './workspace/index.js';
 export * from './repository/index.js';
 export * from './tree/types.js';
 export * from './types.js';
+export * from './modals/index.js';

package/dist-cms/packages/documents/document-types/manifests.js

@@ -4,6 +4,7 @@ import { manifests as propertyEditorManifests } from './property-editors/manifes
 import { manifests as repositoryManifests } from './repository/manifests.js';
 import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
+import { manifests as modalManifests } from './modals/manifests.js';
 export const manifests = [
     ...entityActionsManifests,
     ...menuItemManifests,
@@ -11,4 +12,5 @@ export const manifests = [
     ...repositoryManifests,
     ...treeManifests,
     ...workspaceManifests,
+    ...modalManifests,
 ];

package/dist-cms/packages/documents/document-types/modals/composition-picker/composition-picker-modal.element.d.ts

@@ -0,0 +1,17 @@
+import type { UmbCompositionPickerModalData, UmbCompositionPickerModalValue } from './composition-picker-modal.token.js';
+import { UmbModalBaseElement } from '../../../../core/modal/index.js';
+export declare class UmbCompositionPickerModalElement extends UmbModalBaseElement<UmbCompositionPickerModalData, UmbCompositionPickerModalValue> {
+    #private;
+    private _references;
+    private _compatibleCompositions?;
+    private _selection;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbCompositionPickerModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-composition-picker-modal': UmbCompositionPickerModalElement;
+    }
+}

package/dist-cms/packages/documents/document-types/modals/composition-picker/composition-picker-modal.element.js

@@ -0,0 +1,184 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _UmbCompositionPickerModalElement_instances, _UmbCompositionPickerModalElement_compositionRepository, _UmbCompositionPickerModalElement_unique, _UmbCompositionPickerModalElement_requestReference, _UmbCompositionPickerModalElement_requestAvailableCompositions, _UmbCompositionPickerModalElement_renderHasReference, _UmbCompositionPickerModalElement_renderAvailableCompositions, _UmbCompositionPickerModalElement_onSelectionAdd, _UmbCompositionPickerModalElement_onSelectionRemove, _UmbCompositionPickerModalElement_renderCompositionsItems;
+import { UmbDocumentTypeCompositionRepository } from '../../repository/index.js';
+import { css, html, customElement, state, repeat, nothing } from '../../../../../external/lit/index.js';
+import { UmbModalBaseElement } from '../../../../core/modal/index.js';
+let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement extends UmbModalBaseElement {
+    constructor() {
+        super(...arguments);
+        _UmbCompositionPickerModalElement_instances.add(this);
+        _UmbCompositionPickerModalElement_compositionRepository.set(this, new UmbDocumentTypeCompositionRepository(this));
+        _UmbCompositionPickerModalElement_unique.set(this, void 0);
+        this._references = [];
+        this._selection = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._selection = this.data?.selection ?? [];
+        this.modalContext?.setValue({ selection: this._selection });
+        __classPrivateFieldGet(this, _UmbCompositionPickerModalElement_instances, "m", _UmbCompositionPickerModalElement_requestReference).call(this);
+    }
+    render() {
+        return html `
+			<umb-body-layout headline="${this.localize.term('contentTypeEditor_compositions')}">
+				${this._references.length ? __classPrivateFieldGet(this, _UmbCompositionPickerModalElement_instances, "m", _UmbCompositionPickerModalElement_renderHasReference).call(this) : __classPrivateFieldGet(this, _UmbCompositionPickerModalElement_instances, "m", _UmbCompositionPickerModalElement_renderAvailableCompositions).call(this)}
+				<div slot="actions">
+					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
+					${!this._references.length
+            ? html `<uui-button
+								label=${this.localize.term('general_submit')}
+								look="primary"
+								color="positive"
+								@click=${this._submitModal}></uui-button>`
+            : nothing}
+				</div>
+			</umb-body-layout>
+		`;
+    }
+};
+_UmbCompositionPickerModalElement_compositionRepository = new WeakMap();
+_UmbCompositionPickerModalElement_unique = new WeakMap();
+_UmbCompositionPickerModalElement_instances = new WeakSet();
+_UmbCompositionPickerModalElement_requestReference = async function _UmbCompositionPickerModalElement_requestReference() {
+    __classPrivateFieldSet(this, _UmbCompositionPickerModalElement_unique, this.data?.unique, "f");
+    if (!__classPrivateFieldGet(this, _UmbCompositionPickerModalElement_unique, "f"))
+        return;
+    const { data } = await __classPrivateFieldGet(this, _UmbCompositionPickerModalElement_compositionRepository, "f").getReferences(__classPrivateFieldGet(this, _UmbCompositionPickerModalElement_unique, "f"));
+    this._references = data ?? [];
+    if (!this._references.length) {
+        __classPrivateFieldGet(this, _UmbCompositionPickerModalElement_instances, "m", _UmbCompositionPickerModalElement_requestAvailableCompositions).call(this);
+    }
+};
+_UmbCompositionPickerModalElement_requestAvailableCompositions = async function _UmbCompositionPickerModalElement_requestAvailableCompositions() {
+    if (!__classPrivateFieldGet(this, _UmbCompositionPickerModalElement_unique, "f"))
+        return;
+    const isElement = this.data?.isElement;
+    const currentPropertyAliases = this.data?.currentPropertyAliases;
+    const { data } = await __classPrivateFieldGet(this, _UmbCompositionPickerModalElement_compositionRepository, "f").availableCompositions({
+        unique: __classPrivateFieldGet(this, _UmbCompositionPickerModalElement_unique, "f"),
+        isElement: isElement ?? false,
+        currentCompositeUniques: this._selection,
+        currentPropertyAliases: currentPropertyAliases ?? [],
+    });
+    if (!data)
+        return;
+    const folders = Array.from(new Set(data.map((c) => '/' + c.folderPath.join('/'))));
+    this._compatibleCompositions = folders.map((path) => ({
+        path,
+        compositions: data.filter((c) => '/' + c.folderPath.join('/') === path),
+    }));
+};
+_UmbCompositionPickerModalElement_renderHasReference = function _UmbCompositionPickerModalElement_renderHasReference() {
+    return html ` <umb-localize key="contentTypeEditor_compositionInUse">
+				This Content Type is used in a composition, and therefore cannot be composed itself.
+			</umb-localize>
+			<h4>
+				<umb-localize key="contentTypeEditor_compositionUsageHeading">Where is this composition used?</umb-localize>
+			</h4>
+			<umb-localize key="contentTypeEditor_compositionUsageSpecification">
+				This composition is currently used in the composition of the following Content Types:
+			</umb-localize>
+			<div class="reference-list">
+				${repeat(this._references, (item) => item.unique, (item) => html `<uui-ref-node-document-type
+							href=${'/section/settings/workspace/document-type/edit/' + item.unique}
+							name=${item.name}>
+							<uui-icon slot="icon" name=${item.icon}></uui-icon>
+						</uui-ref-node-document-type>`)}
+			</div>`;
+};
+_UmbCompositionPickerModalElement_renderAvailableCompositions = function _UmbCompositionPickerModalElement_renderAvailableCompositions() {
+    if (this._compatibleCompositions) {
+        return html `<umb-localize key="contentTypeEditor_compositionsDescription">
+					Inherit tabs and properties from an existing Document Type. New tabs will be<br />added to the current
+					Document Type or merged if a tab with an identical name exists.<br />
+				</umb-localize>
+				<!--- TODO: Implement search functionality
+				<uui-input id="search" placeholder=this.localize.term('placeholders_filter')>
+					<uui-icon name="icon-search" slot="prepend"></uui-icon>
+				</uui-input> -->
+				<div class="compositions-list">
+					${repeat(this._compatibleCompositions, (folder) => folder.path, (folder) => html `${this._compatibleCompositions.length > 1
+            ? html `<strong><uui-icon name="icon-folder"></uui-icon>${folder.path}</strong>`
+            : nothing}
+							${__classPrivateFieldGet(this, _UmbCompositionPickerModalElement_instances, "m", _UmbCompositionPickerModalElement_renderCompositionsItems).call(this, folder.compositions)}`)}
+				</div>`;
+    }
+    else {
+        return html `<umb-localize key="contentTypeEditor_noAvailableCompositions">
+				There are no Content Types available to use as a composition
+			</umb-localize>`;
+    }
+};
+_UmbCompositionPickerModalElement_onSelectionAdd = function _UmbCompositionPickerModalElement_onSelectionAdd(unique) {
+    this._selection = [...this._selection, unique];
+    this.modalContext?.setValue({ selection: this._selection });
+};
+_UmbCompositionPickerModalElement_onSelectionRemove = function _UmbCompositionPickerModalElement_onSelectionRemove(unique) {
+    this._selection = this._selection.filter((s) => s !== unique);
+    this.modalContext?.setValue({ selection: this._selection });
+};
+_UmbCompositionPickerModalElement_renderCompositionsItems = function _UmbCompositionPickerModalElement_renderCompositionsItems(compositionsList) {
+    return repeat(compositionsList, (compositions) => compositions.unique, (compositions) => html `<uui-menu-item
+					label=${compositions.name}
+					selectable
+					@selected=${() => __classPrivateFieldGet(this, _UmbCompositionPickerModalElement_instances, "m", _UmbCompositionPickerModalElement_onSelectionAdd).call(this, compositions.unique)}
+					@deselected=${() => __classPrivateFieldGet(this, _UmbCompositionPickerModalElement_instances, "m", _UmbCompositionPickerModalElement_onSelectionRemove).call(this, compositions.unique)}
+					?selected=${this._selection.find((unique) => unique === compositions.unique)}>
+					<uui-icon name=${compositions.icon} slot="icon"></uui-icon>
+				</uui-menu-item>`);
+};
+UmbCompositionPickerModalElement.styles = [
+    css `
+			uui-input {
+				margin: var(--uui-size-6) 0;
+				display: flex;
+				align-items: center;
+			}
+
+			#search uui-icon {
+				padding-left: var(--uui-size-3);
+			}
+
+			.reference-list {
+				margin-block: var(--uui-size-3);
+				display: grid;
+				gap: var(--uui-size-1);
+			}
+
+			.compositions-list strong {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-3);
+			}
+		`,
+];
+__decorate([
+    state()
+], UmbCompositionPickerModalElement.prototype, "_references", void 0);
+__decorate([
+    state()
+], UmbCompositionPickerModalElement.prototype, "_compatibleCompositions", void 0);
+__decorate([
+    state()
+], UmbCompositionPickerModalElement.prototype, "_selection", void 0);
+UmbCompositionPickerModalElement = __decorate([
+    customElement('umb-composition-picker-modal')
+], UmbCompositionPickerModalElement);
+export { UmbCompositionPickerModalElement };
+export default UmbCompositionPickerModalElement;

package/dist-cms/packages/documents/document-types/modals/composition-picker/composition-picker-modal.token.d.ts

@@ -0,0 +1,11 @@
+import { UmbModalToken } from '../../../../core/modal/index.js';
+export interface UmbCompositionPickerModalData {
+    selection: Array<string>;
+    unique: string;
+    isElement: boolean;
+    currentPropertyAliases: Array<string>;
+}
+export interface UmbCompositionPickerModalValue {
+    selection: Array<string>;
+}
+export declare const UMB_COMPOSITION_PICKER_MODAL: UmbModalToken<UmbCompositionPickerModalData, UmbCompositionPickerModalValue>;

package/dist-cms/packages/documents/document-types/modals/composition-picker/composition-picker-modal.token.js

@@ -0,0 +1,7 @@
+import { UmbModalToken } from '../../../../core/modal/index.js';
+export const UMB_COMPOSITION_PICKER_MODAL = new UmbModalToken('Umb.Modal.CompositionPicker', {
+    modal: {
+        type: 'sidebar',
+        size: 'small',
+    },
+});

package/dist-cms/packages/documents/document-types/modals/composition-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './composition-picker-modal.element.js';
+export * from './composition-picker-modal.token.js';

package/dist-cms/packages/documents/document-types/modals/composition-picker/index.js

@@ -0,0 +1,2 @@
+export * from './composition-picker-modal.element.js';
+export * from './composition-picker-modal.token.js';

package/dist-cms/packages/documents/document-types/modals/index.d.ts

@@ -0,0 +1 @@
+export * from './composition-picker/index.js';

package/dist-cms/packages/documents/document-types/modals/index.js

@@ -0,0 +1 @@
+export * from './composition-picker/index.js';

package/dist-cms/packages/documents/document-types/modals/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestModal } from '../../../core/extension-registry/index.js';
+export declare const manifests: ManifestModal[];

package/dist-cms/packages/documents/document-types/modals/manifests.js

@@ -0,0 +1,9 @@
+const modals = [
+    {
+        type: 'modal',
+        alias: 'Umb.Modal.CompositionPicker',
+        name: 'Block Catalogue Modal',
+        js: () => import('./composition-picker/composition-picker-modal.element.js'),
+    },
+];
+export const manifests = [...modals];

package/dist-cms/packages/documents/document-types/repository/composition/document-type-composition.repository.d.ts

@@ -0,0 +1,15 @@
+import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+import type { UmbDocumentTypeCompositionRequestModel } from '../../index.js';
+import { UmbRepositoryBase } from '../../../../core/repository/index.js';
+export declare class UmbDocumentTypeCompositionRepository extends UmbRepositoryBase {
+    #private;
+    constructor(host: UmbControllerHost);
+    getReferences(unique: string): Promise<{
+        data: import("../../index.js").UmbDocumentTypeCompositionReferenceModel[] | undefined;
+        error: import("../../../../../external/backend-api/index.js").ApiError | import("../../../../../external/backend-api/index.js").CancelError | undefined;
+    }>;
+    availableCompositions(args: UmbDocumentTypeCompositionRequestModel): Promise<{
+        data: import("../../index.js").UmbDocumentTypeCompositionCompatibleModel[] | undefined;
+        error: import("../../../../../external/backend-api/index.js").ApiError | import("../../../../../external/backend-api/index.js").CancelError | undefined;
+    }>;
+}

package/dist-cms/packages/documents/document-types/repository/composition/document-type-composition.repository.js

@@ -0,0 +1,28 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UmbDocumentTypeCompositionRepository_compositionSource;
+import { UmbDocumentTypeCompositionServerDataSource } from './document-type-composition.server.data-source.js';
+import { UmbRepositoryBase } from '../../../../core/repository/index.js';
+export class UmbDocumentTypeCompositionRepository extends UmbRepositoryBase {
+    constructor(host) {
+        super(host);
+        _UmbDocumentTypeCompositionRepository_compositionSource.set(this, void 0);
+        __classPrivateFieldSet(this, _UmbDocumentTypeCompositionRepository_compositionSource, new UmbDocumentTypeCompositionServerDataSource(this), "f");
+    }
+    async getReferences(unique) {
+        return __classPrivateFieldGet(this, _UmbDocumentTypeCompositionRepository_compositionSource, "f").getReferences(unique);
+    }
+    async availableCompositions(args) {
+        return __classPrivateFieldGet(this, _UmbDocumentTypeCompositionRepository_compositionSource, "f").availableCompositions(args);
+    }
+}
+_UmbDocumentTypeCompositionRepository_compositionSource = new WeakMap();

package/dist-cms/packages/documents/document-types/repository/composition/document-type-composition.server.data-source.d.ts

@@ -0,0 +1,36 @@
+import type { UmbDocumentTypeCompositionCompatibleModel, UmbDocumentTypeCompositionReferenceModel, UmbDocumentTypeCompositionRequestModel } from '../../types.js';
+import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+/**
+ * A data source for the Document Type Composition that fetches data from the server
+ * @export
+ * @class UmbDocumentTypeCompositionServerDataSource
+ */
+export declare class UmbDocumentTypeCompositionServerDataSource {
+    #private;
+    /**
+     * Creates an instance of UmbDocumentTypeCompositionServerDataSource.
+     * @param {UmbControllerHost} host
+     * @memberof UmbDocumentTypeCompositionServerDataSource
+     */
+    constructor(host: UmbControllerHost);
+    /**
+     * Fetches the compatible compositions for a document type from the server
+     * @param {string} unique
+     * @return {*}
+     * @memberof UmbDocumentTypeCompositionServerDataSource
+     */
+    getReferences(unique: string): Promise<{
+        data: UmbDocumentTypeCompositionReferenceModel[] | undefined;
+        error: import("../../../../../external/backend-api/index.js").ApiError | import("../../../../../external/backend-api/index.js").CancelError | undefined;
+    }>;
+    /**
+     * Updates the compositions for a document type on the server
+     * @param {DocumentTypeCompositionRequestModel} requestBody
+     * @return {*}
+     * @memberof UmbDocumentTypeCompositionServerDataSource
+     */
+    availableCompositions(args: UmbDocumentTypeCompositionRequestModel): Promise<{
+        data: UmbDocumentTypeCompositionCompatibleModel[] | undefined;
+        error: import("../../../../../external/backend-api/index.js").ApiError | import("../../../../../external/backend-api/index.js").CancelError | undefined;
+    }>;
+}

package/dist-cms/packages/documents/document-types/repository/composition/document-type-composition.server.data-source.js

@@ -0,0 +1,75 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UmbDocumentTypeCompositionServerDataSource_host;
+import { DocumentTypeResource, } from '../../../../../external/backend-api/index.js';
+import { tryExecuteAndNotify } from '../../../../../shared/resources/index.js';
+/**
+ * A data source for the Document Type Composition that fetches data from the server
+ * @export
+ * @class UmbDocumentTypeCompositionServerDataSource
+ */
+export class UmbDocumentTypeCompositionServerDataSource {
+    /**
+     * Creates an instance of UmbDocumentTypeCompositionServerDataSource.
+     * @param {UmbControllerHost} host
+     * @memberof UmbDocumentTypeCompositionServerDataSource
+     */
+    constructor(host) {
+        _UmbDocumentTypeCompositionServerDataSource_host.set(this, void 0);
+        __classPrivateFieldSet(this, _UmbDocumentTypeCompositionServerDataSource_host, host, "f");
+    }
+    /**
+     * Fetches the compatible compositions for a document type from the server
+     * @param {string} unique
+     * @return {*}
+     * @memberof UmbDocumentTypeCompositionServerDataSource
+     */
+    async getReferences(unique) {
+        const response = await tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbDocumentTypeCompositionServerDataSource_host, "f"), DocumentTypeResource.getDocumentTypeByIdCompositionReferences({ id: unique }));
+        const error = response.error;
+        const data = response.data?.map((reference) => {
+            return {
+                unique: reference.id,
+                icon: reference.icon,
+                name: reference.name,
+            };
+        });
+        return { data, error };
+    }
+    /**
+     * Updates the compositions for a document type on the server
+     * @param {DocumentTypeCompositionRequestModel} requestBody
+     * @return {*}
+     * @memberof UmbDocumentTypeCompositionServerDataSource
+     */
+    async availableCompositions(args) {
+        const requestBody = {
+            id: args.unique,
+            isElement: args.isElement,
+            currentCompositeIds: args.currentCompositeUniques,
+            currentPropertyAliases: args.currentPropertyAliases,
+        };
+        const response = await tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbDocumentTypeCompositionServerDataSource_host, "f"), DocumentTypeResource.postDocumentTypeAvailableCompositions({ requestBody }));
+        const error = response.error;
+        const data = response.data?.map((composition) => {
+            return {
+                unique: composition.id,
+                name: composition.name,
+                icon: composition.icon,
+                folderPath: composition.folderPath,
+                isCompatible: composition.isCompatible,
+            };
+        });
+        return { data, error };
+    }
+}
+_UmbDocumentTypeCompositionServerDataSource_host = new WeakMap();

package/dist-cms/packages/documents/document-types/repository/composition/index.d.ts

@@ -0,0 +1,2 @@
+export { UmbDocumentTypeCompositionRepository } from './document-type-composition.repository.js';
+export { UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS } from './manifests.js';

package/dist-cms/packages/documents/document-types/repository/composition/index.js

@@ -0,0 +1,2 @@
+export { UmbDocumentTypeCompositionRepository } from './document-type-composition.repository.js';
+export { UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS } from './manifests.js';

package/dist-cms/packages/documents/document-types/repository/composition/manifests.d.ts

@@ -0,0 +1,3 @@
+import type { ManifestRepository } from '../../../../core/extension-registry/index.js';
+export declare const UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS = "Umb.Repository.DocumentType.Composition";
+export declare const manifests: ManifestRepository<import("../../../../../libs/extension-api/index.js").UmbApi>[];

package/dist-cms/packages/documents/document-types/repository/composition/manifests.js

@@ -0,0 +1,9 @@
+import { UmbDocumentTypeCompositionRepository } from './document-type-composition.repository.js';
+export const UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS = 'Umb.Repository.DocumentType.Composition';
+const queryRepository = {
+    type: 'repository',
+    alias: UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS,
+    name: 'Document Type Composition Repository',
+    api: UmbDocumentTypeCompositionRepository,
+};
+export const manifests = [queryRepository];

package/dist-cms/packages/documents/document-types/repository/detail/document-type-detail.server.data-source.js

@@ -136,6 +136,7 @@ export class UmbDocumentTypeDetailServerDataSource {
             throw new Error('Media Type unique is missing');
         // TODO: make data mapper to prevent errors
         const requestBody = {
+            folder: model.parentUnique ? { id: model.parentUnique } : null,
             alias: model.alias,
             name: model.name,
             description: model.description,

package/dist-cms/packages/documents/document-types/repository/index.d.ts

@@ -1,3 +1,4 @@
 export * from './detail/index.js';
 export * from './item/index.js';
 export * from './structure/index.js';
+export * from './composition/index.js';

package/dist-cms/packages/documents/document-types/repository/index.js

@@ -1,3 +1,4 @@
 export * from './detail/index.js';
 export * from './item/index.js';
 export * from './structure/index.js';
+export * from './composition/index.js';

package/dist-cms/packages/documents/document-types/repository/manifests.js

@@ -1,3 +1,4 @@
 import { manifests as detailManifests } from './detail/manifests.js';
 import { manifests as itemManifests } from './item/manifests.js';
-export const manifests = [...detailManifests, ...itemManifests];
+import { manifests as compositionManifests } from './composition/manifests.js';
+export const manifests = [...detailManifests, ...itemManifests, ...compositionManifests];

package/dist-cms/packages/documents/document-types/types.d.ts

@@ -11,3 +11,21 @@ export interface UmbDocumentTypeDetailModel extends UmbContentTypeModel {
     } | null;
     cleanup: ContentTypeCleanupBaseModel;
 }
+export interface UmbDocumentTypeCompositionRequestModel {
+    unique: string;
+    isElement: boolean;
+    currentPropertyAliases: Array<string>;
+    currentCompositeUniques: Array<string>;
+}
+export interface UmbDocumentTypeCompositionCompatibleModel {
+    unique: string;
+    name: string;
+    icon: string;
+    folderPath: Array<string>;
+    isCompatible: boolean;
+}
+export interface UmbDocumentTypeCompositionReferenceModel {
+    unique: string;
+    name: string;
+    icon: string;
+}

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

@@ -1,5 +1,5 @@
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
-import type { PropertyTypeContainerModelBaseModel } from '../../../../../../external/backend-api/index.js';
+import { type PropertyTypeContainerModelBaseModel } from '../../../../../../external/backend-api/index.js';
 import type { UmbWorkspaceViewElement } from '../../../../../core/extension-registry/index.js';
 import type { UmbSorterConfig } from '../../../../../core/sorter/index.js';
 import { UmbSorterController } from '../../../../../core/sorter/index.js';
@@ -17,6 +17,7 @@ export declare class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitEleme
     private _workspaceContext?;
     private _tabsStructureHelper;
     private _modalManagerContext?;
+    private _compositionConfiguration?;
     constructor();
     private _observeRootGroups;
     private _createRoutes;

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

@@ -9,11 +9,13 @@ 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 _UmbDocumentTypeWorkspaceViewEditElement_instances, _UmbDocumentTypeWorkspaceViewEditElement_changeMode, _UmbDocumentTypeWorkspaceViewEditElement_requestRemoveTab, _UmbDocumentTypeWorkspaceViewEditElement_remove, _UmbDocumentTypeWorkspaceViewEditElement_addTab, _UmbDocumentTypeWorkspaceViewEditElement_focusInput, _UmbDocumentTypeWorkspaceViewEditElement_tabNameChanged, _UmbDocumentTypeWorkspaceViewEditElement_changeOrderNumber;
+var _UmbDocumentTypeWorkspaceViewEditElement_instances, _UmbDocumentTypeWorkspaceViewEditElement_changeMode, _UmbDocumentTypeWorkspaceViewEditElement_requestRemoveTab, _UmbDocumentTypeWorkspaceViewEditElement_remove, _UmbDocumentTypeWorkspaceViewEditElement_addTab, _UmbDocumentTypeWorkspaceViewEditElement_focusInput, _UmbDocumentTypeWorkspaceViewEditElement_tabNameChanged, _UmbDocumentTypeWorkspaceViewEditElement_openCompositionModal, _UmbDocumentTypeWorkspaceViewEditElement_changeOrderNumber;
+import { UMB_COMPOSITION_PICKER_MODAL } from '../../../modals/index.js';
 import { css, html, customElement, state, repeat, nothing, ifDefined } from '../../../../../../external/lit/index.js';
 import { UmbContentTypeContainerStructureHelper } from '../../../../../core/content-type/index.js';
 import { encodeFolderName } from '../../../../../../shared/router/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { CompositionTypeModel, } from '../../../../../../external/backend-api/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
 import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '../../../../../core/modal/index.js';
 import { UmbTextStyles } from '../../../../../../shared/style/index.js';
@@ -81,6 +83,16 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
             this._workspaceContext = workspaceContext;
             this._tabsStructureHelper.setStructureManager(workspaceContext.structure);
             this.observe(this._workspaceContext.isSorting, (isSorting) => (this.sortModeActive = isSorting), '_observeIsSorting');
+            const unique = this._workspaceContext.getEntityId();
+            //TODO Figure out the correct data that needs to be sent to the compositions modal. Do we really have to send isElement, currentPropertyAliases - isn't unique enough?
+            this.observe(this._workspaceContext.structure.contentTypes, (contentTypes) => {
+                this._compositionConfiguration = {
+                    unique: unique ?? '',
+                    selection: contentTypes.map((contentType) => contentType.unique).filter((id) => id !== unique),
+                    isElement: contentTypes.find((contentType) => contentType.unique === unique)?.isElement ?? false,
+                    currentPropertyAliases: [],
+                };
+            });
             this._observeRootGroups();
         });
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (context) => {
@@ -169,7 +181,11 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
             ? this.localize.term('general_reorderDone')
             : this.localize.term('general_reorder');
         return html `<div class="tab-actions">
-			<uui-button look="outline" label=${this.localize.term('contentTypeEditor_compositions')} compact>
+			<uui-button
+				look="outline"
+				label=${this.localize.term('contentTypeEditor_compositions')}
+				compact
+				@click=${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditElement_openCompositionModal)}>
 				<uui-icon name="icon-merge"></uui-icon>
 				${this.localize.term('contentTypeEditor_compositions')}
 			</uui-button>
@@ -338,6 +354,16 @@ _UmbDocumentTypeWorkspaceViewEditElement_tabNameChanged = async function _UmbDoc
     // Update the current URL, so we are still on this specific tab:
     window.history.replaceState(null, '', this._routerPath + '/tab/' + encodeFolderName(newName));
 };
+_UmbDocumentTypeWorkspaceViewEditElement_openCompositionModal = async function _UmbDocumentTypeWorkspaceViewEditElement_openCompositionModal() {
+    const modalContext = this._modalManagerContext?.open(UMB_COMPOSITION_PICKER_MODAL, {
+        data: this._compositionConfiguration,
+    });
+    await modalContext?.onSubmit();
+    if (!modalContext?.value)
+        return;
+    const compositionIds = modalContext.getValue().selection;
+    this._workspaceContext?.setCompositions(compositionIds.map((unique) => ({ contentType: { unique }, compositionType: CompositionTypeModel.COMPOSITION })));
+};
 _UmbDocumentTypeWorkspaceViewEditElement_changeOrderNumber = function _UmbDocumentTypeWorkspaceViewEditElement_changeOrderNumber(tab, e) {
     if (!e.target.value || !tab.id)
         return;
@@ -456,6 +482,9 @@ __decorate([
 __decorate([
     state()
 ], UmbDocumentTypeWorkspaceViewEditElement.prototype, "_buttonDisabled", void 0);
+__decorate([
+    state()
+], UmbDocumentTypeWorkspaceViewEditElement.prototype, "_compositionConfiguration", void 0);
 UmbDocumentTypeWorkspaceViewEditElement = __decorate([
     customElement('umb-document-type-workspace-view-edit')
 ], UmbDocumentTypeWorkspaceViewEditElement);

package/dist-cms/packages/user/user/collection/index.d.ts

@@ -0,0 +1 @@
+export * from './repository/index.js';

package/dist-cms/packages/user/user/collection/index.js

@@ -0,0 +1 @@
+export * from './repository/index.js';