@umbraco-cms/backoffice 14.0.0-rc4 → 14.0.0

package/dist-cms/packages/media/media/components/input-rich-media/input-rich-media.element.js

@@ -0,0 +1,368 @@
+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;
+};
+import { UmbInputMediaElement } from '../input-media/index.js';
+import { UmbMediaItemRepository } from '../../repository/index.js';
+import { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from '../../modals/index.js';
+import { customElement, html, ifDefined, nothing, property, repeat, state } from '../../../../../external/lit/index.js';
+import { umbConfirmModal, UMB_MODAL_MANAGER_CONTEXT } from '../../../../core/modal/index.js';
+import { UmbChangeEvent } from '../../../../core/event/index.js';
+import { UmbId } from '../../../../core/id/index.js';
+import { UmbImagingRepository } from '../../../imaging/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
+import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { UUIFormControlMixin } from '../../../../../external/uui/index.js';
+const elementName = 'umb-input-rich-media';
+let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement, '') {
+    #sorter;
+    #sortCards(model) {
+        const idToIndexMap = {};
+        model.forEach((item, index) => {
+            idToIndexMap[item.key] = index;
+        });
+        const cards = [...this._cards];
+        this._cards = cards.sort((a, b) => idToIndexMap[a.unique] - idToIndexMap[b.unique]);
+    }
+    set items(value) {
+        this.#sorter.setModel(value);
+        this.#items = value;
+        this.#populateCards();
+    }
+    get items() {
+        return this.#items;
+    }
+    #items;
+    get value() {
+        return this.items?.map((item) => item.mediaKey).join(',');
+    }
+    set preselectedCrops(value) {
+        this.#preselectedCrops = value;
+    }
+    get preselectedCrops() {
+        return this.#preselectedCrops;
+    }
+    #preselectedCrops;
+    set focalPointEnabled(value) {
+        this.#focalPointEnabled = value;
+    }
+    get focalPointEnabled() {
+        return this.#focalPointEnabled;
+    }
+    #focalPointEnabled;
+    set alias(value) {
+        this.#modalRouter.setUniquePathValue('propertyAlias', value);
+    }
+    get alias() {
+        return this.#modalRouter.getUniquePathValue('propertyAlias');
+    }
+    set variantId(value) {
+        this.#modalRouter.setUniquePathValue('variantId', value?.toString());
+    }
+    get variantId() {
+        return this.#modalRouter.getUniquePathValue('variantId');
+    }
+    #itemRepository;
+    #imagingRepository;
+    #modalRouter;
+    #modalManager;
+    constructor() {
+        super();
+        this.#sorter = new UmbSorterController(this, {
+            getUniqueOfElement: (element) => {
+                return element.id;
+            },
+            getUniqueOfModel: (modelEntry) => {
+                return modelEntry.key;
+            },
+            identifier: 'Umb.SorterIdentifier.InputRichMedia',
+            itemSelector: 'uui-card-media',
+            containerSelector: '.container',
+            /** TODO: This component probably needs some grid-like logic for resolve placement... [LI] */
+            resolvePlacement: () => false,
+            onChange: ({ model }) => {
+                this.#items = model;
+                this.#sortCards(model);
+                this.dispatchEvent(new UmbChangeEvent());
+            },
+        });
+        /**
+         * This is a minimum amount of selected items in this input.
+         * @type {number}
+         * @attr
+         * @default 0
+         */
+        this.min = 0;
+        /**
+         * Min validation message.
+         * @type {boolean}
+         * @attr
+         * @default
+         */
+        this.minMessage = 'This field need more items';
+        /**
+         * This is a maximum amount of selected items in this input.
+         * @type {number}
+         * @attr
+         * @default Infinity
+         */
+        this.max = Infinity;
+        /**
+         * Max validation message.
+         * @type {boolean}
+         * @attr
+         * @default
+         */
+        this.maxMessage = 'This field exceeds the allowed amount of items';
+        this.#items = [];
+        this.startNode = '';
+        this.multiple = false;
+        this.#preselectedCrops = [];
+        this.#focalPointEnabled = false;
+        this._cards = [];
+        this.#itemRepository = new UmbMediaItemRepository(this);
+        this.#imagingRepository = new UmbImagingRepository(this);
+        this.#pickableFilter = (item) => {
+            if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
+                return this.allowedContentTypeIds.includes(item.mediaType.unique);
+            }
+            return true;
+        };
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
+            this.#modalManager = instance;
+        });
+        this.#modalRouter = new UmbModalRouteRegistrationController(this, UMB_IMAGE_CROPPER_EDITOR_MODAL)
+            .addAdditionalPath(':key')
+            .addUniquePaths(['propertyAlias', 'variantId'])
+            .onSetup((params) => {
+            const key = params.key;
+            if (!key)
+                return false;
+            const item = this.items.find((item) => item.key === key);
+            if (!item)
+                return false;
+            return {
+                data: {
+                    cropOptions: this.preselectedCrops,
+                    hideFocalPoint: !this.focalPointEnabled,
+                    key,
+                    unique: item.mediaKey,
+                    pickableFilter: this.#pickableFilter,
+                },
+                value: {
+                    crops: item.crops ?? [],
+                    focalPoint: item.focalPoint ?? { left: 0.5, top: 0.5 },
+                    src: '',
+                    key,
+                    unique: item.mediaKey,
+                },
+            };
+        })
+            .onSubmit((value) => {
+            this.items = this.items.map((item) => {
+                if (item.key !== value.key)
+                    return item;
+                const focalPoint = this.focalPointEnabled ? value.focalPoint : null;
+                const crops = value.crops;
+                const mediaKey = value.unique;
+                // Note: If the mediaKey changes we will change the key which causes cards to update
+                const key = mediaKey === item.mediaKey ? item.key : UmbId.new();
+                return { ...item, crops, mediaKey, focalPoint, key };
+            });
+            this.dispatchEvent(new UmbChangeEvent());
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            this._routeBuilder = routeBuilder;
+        });
+        this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && this.items?.length < this.min);
+        this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this.items?.length > this.max);
+    }
+    getFormElement() {
+        return undefined;
+    }
+    async #populateCards() {
+        const missingCards = this.items.filter((item) => !this._cards.find((card) => card.unique === item.key));
+        if (!missingCards.length)
+            return;
+        if (!this.items?.length) {
+            this._cards = [];
+            return;
+        }
+        const uniques = this.items.map((item) => item.mediaKey);
+        const { data: items } = await this.#itemRepository.requestItems(uniques);
+        const { data: thumbnails } = await this.#imagingRepository.requestThumbnailUrls(uniques, 400, 400);
+        this._cards = this.items.map((item) => {
+            const media = items?.find((x) => x.unique === item.mediaKey);
+            const thumbnail = thumbnails?.find((x) => x.unique === item.mediaKey);
+            return {
+                unique: item.key,
+                media: item.mediaKey,
+                name: media?.name ?? '',
+                src: thumbnail?.url,
+                icon: media?.mediaType?.icon,
+                isTrashed: media?.isTrashed ?? false,
+            };
+        });
+    }
+    #pickableFilter;
+    #addItems(uniques) {
+        if (!uniques.length)
+            return;
+        const additions = uniques.map((unique) => ({
+            key: UmbId.new(),
+            mediaKey: unique,
+            mediaTypeAlias: '',
+            crops: [],
+            focalPoint: null,
+        }));
+        this.#items = [...this.#items, ...additions];
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    async #openPicker() {
+        const modalHandler = this.#modalManager?.open(this, UMB_MEDIA_PICKER_MODAL, {
+            data: {
+                multiple: this.multiple,
+                startNode: this.startNode,
+                pickableFilter: this.#pickableFilter,
+            },
+            value: { selection: [] },
+        });
+        const data = await modalHandler?.onSubmit().catch(() => null);
+        if (!data)
+            return;
+        const selection = data.selection;
+        this.#addItems(selection);
+    }
+    async #onRemove(item) {
+        await umbConfirmModal(this, {
+            color: 'danger',
+            headline: `${this.localize.term('actions_remove')} ${item.name}?`,
+            content: `${this.localize.term('defaultdialogs_confirmremove')} ${item.name}?`,
+            confirmLabel: this.localize.term('actions_remove'),
+        });
+        this.#items = this.#items.filter((x) => x.key !== item.unique);
+        this._cards = this._cards.filter((x) => x.unique !== item.unique);
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    async #onUploadCompleted(e) {
+        const completed = e.detail?.completed;
+        const uploaded = completed.map((file) => file.unique);
+        this.#addItems(uploaded);
+    }
+    render() {
+        return html `
+			${this.#renderDropzone()}
+			<div class="container">${this.#renderItems()} ${this.#renderAddButton()}</div>
+		`;
+    }
+    #renderDropzone() {
+        if (this._cards && this._cards.length >= this.max)
+            return;
+        return html `<umb-dropzone @change=${this.#onUploadCompleted}></umb-dropzone>`;
+    }
+    #renderItems() {
+        if (!this._cards.length)
+            return;
+        return html `
+			${repeat(this._cards, (item) => item.unique, (item) => this.#renderItem(item))}
+		`;
+    }
+    #renderAddButton() {
+        if ((this._cards && this.max && this._cards.length >= this.max) || (this._cards.length && !this.multiple))
+            return;
+        return html `
+			<uui-button
+				id="btn-add"
+				look="placeholder"
+				@click=${this.#openPicker}
+				label=${this.localize.term('general_choose')}>
+				<uui-icon name="icon-add"></uui-icon>
+				${this.localize.term('general_choose')}
+			</uui-button>
+		`;
+    }
+    #renderItem(item) {
+        if (!item.unique)
+            return nothing;
+        const href = this._routeBuilder?.({ key: item.unique });
+        return html `
+			<uui-card-media id=${item.unique} name=${item.name} .href=${href}>
+				${item.src
+            ? html `<img src=${item.src} alt=${item.name} />`
+            : html `<umb-icon name=${ifDefined(item.icon)}></umb-icon>`}
+				${this.#renderIsTrashed(item)}
+				<uui-action-bar slot="actions">
+					<uui-button
+						label=${this.localize.term('general_remove')}
+						look="secondary"
+						@click=${() => this.#onRemove(item)}>
+						<uui-icon name="icon-trash"></uui-icon>
+					</uui-button>
+				</uui-action-bar>
+			</uui-card-media>
+		`;
+    }
+    #renderIsTrashed(item) {
+        if (!item.isTrashed)
+            return;
+        return html `
+			<uui-tag size="s" slot="tag" color="danger">
+				<umb-localize key="mediaPicker_trashed">Trashed</umb-localize>
+			</uui-tag>
+		`;
+    }
+    static { this.styles = UmbInputMediaElement.styles; }
+};
+__decorate([
+    property({ type: Number })
+], UmbInputRichMediaElement.prototype, "min", void 0);
+__decorate([
+    property({ type: String, attribute: 'min-message' })
+], UmbInputRichMediaElement.prototype, "minMessage", void 0);
+__decorate([
+    property({ type: Number })
+], UmbInputRichMediaElement.prototype, "max", void 0);
+__decorate([
+    property({ type: String, attribute: 'min-message' })
+], UmbInputRichMediaElement.prototype, "maxMessage", void 0);
+__decorate([
+    property({ type: Array })
+], UmbInputRichMediaElement.prototype, "items", null);
+__decorate([
+    property({ type: Array })
+], UmbInputRichMediaElement.prototype, "allowedContentTypeIds", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputRichMediaElement.prototype, "startNode", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbInputRichMediaElement.prototype, "multiple", void 0);
+__decorate([
+    property()
+], UmbInputRichMediaElement.prototype, "value", null);
+__decorate([
+    property({ type: Array })
+], UmbInputRichMediaElement.prototype, "preselectedCrops", null);
+__decorate([
+    property({ type: Boolean })
+], UmbInputRichMediaElement.prototype, "focalPointEnabled", null);
+__decorate([
+    property()
+], UmbInputRichMediaElement.prototype, "alias", null);
+__decorate([
+    property()
+], UmbInputRichMediaElement.prototype, "variantId", null);
+__decorate([
+    state()
+], UmbInputRichMediaElement.prototype, "_cards", void 0);
+__decorate([
+    state()
+], UmbInputRichMediaElement.prototype, "_routeBuilder", void 0);
+UmbInputRichMediaElement = __decorate([
+    customElement(elementName)
+], UmbInputRichMediaElement);
+export { UmbInputRichMediaElement };
+export default UmbInputRichMediaElement;

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field-audio.element.d.ts

@@ -1,4 +1,4 @@
-import { UmbLitElement } from '../../lit-element/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 export declare class UmbInputUploadFieldAudioElement extends UmbLitElement {
     path: string;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field-audio.element.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, customElement, property, css } from '../../../../external/lit/index.js';
-import { UmbLitElement } from '../../lit-element/index.js';
+import { html, customElement, property, css } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 let UmbInputUploadFieldAudioElement = class UmbInputUploadFieldAudioElement extends UmbLitElement {
     constructor() {
         super(...arguments);

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field-file.element.d.ts

@@ -1,5 +1,5 @@
-import type { PropertyValueMap } from '../../../../external/lit/index.js';
-import { UmbLitElement } from '../../lit-element/index.js';
+import type { PropertyValueMap } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 export declare class UmbInputUploadFieldFileElement extends UmbLitElement {
     #private;
     path: string;

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field-file.element.js

@@ -4,9 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UMB_APP_CONTEXT } from '../../../../apps/app/index.js';
-import { html, customElement, property, state, css } from '../../../../external/lit/index.js';
-import { UmbLitElement } from '../../lit-element/index.js';
+import { UMB_APP_CONTEXT } from '../../../../../apps/app/index.js';
+import { html, customElement, property, state, css } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 let UmbInputUploadFieldFileElement = class UmbInputUploadFieldFileElement extends UmbLitElement {
     #serverUrl;
     /**

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field-image.element.d.ts

@@ -1,4 +1,4 @@
-import { UmbLitElement } from '../../lit-element/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 export declare class UmbInputUploadFieldImageElement extends UmbLitElement {
     path: string;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field-image.element.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, customElement, property, css } from '../../../../external/lit/index.js';
-import { UmbLitElement } from '../../lit-element/index.js';
+import { html, customElement, property, css } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 let UmbInputUploadFieldImageElement = class UmbInputUploadFieldImageElement extends UmbLitElement {
     constructor() {
         super(...arguments);

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field-svg.element.d.ts

@@ -1,4 +1,4 @@
-import { UmbLitElement } from '../../lit-element/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 export declare class UmbInputUploadFieldSvgElement extends UmbLitElement {
     path: string;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field-svg.element.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, customElement, property, css } from '../../../../external/lit/index.js';
-import { UmbLitElement } from '../../lit-element/index.js';
+import { html, customElement, property, css } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 let UmbInputUploadFieldSvgElement = class UmbInputUploadFieldSvgElement extends UmbLitElement {
     constructor() {
         super(...arguments);

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field-video.element.d.ts

@@ -1,4 +1,4 @@
-import { UmbLitElement } from '../../lit-element/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 export declare class UmbInputUploadFieldVideoElement extends UmbLitElement {
     path: string;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field-video.element.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, customElement, property, css } from '../../../../external/lit/index.js';
-import { UmbLitElement } from '../../lit-element/index.js';
+import { html, customElement, property, css } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 let UmbInputUploadFieldVideoElement = class UmbInputUploadFieldVideoElement extends UmbLitElement {
     constructor() {
         super(...arguments);

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field.element.d.ts

@@ -1,6 +1,6 @@
-import type { MediaValueType } from '../../../property-editors/upload-field/property-editor-ui-upload-field.element.js';
-import type { UmbTemporaryFileModel } from '../../temporary-file/temporary-file-manager.class.js';
-import { UmbLitElement } from '../../lit-element/index.js';
+import type { MediaValueType } from '../../property-editors/upload-field/types.js';
+import type { UmbTemporaryFileModel } from '../../../../core/temporary-file/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import './input-upload-field-file.element.js';
 export declare class UmbInputUploadFieldElement extends UmbLitElement {
     #private;

package/dist-cms/packages/{core → media/media}/components/input-upload-field/input-upload-field.element.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { TemporaryFileStatus, UmbTemporaryFileManager } from '../../temporary-file/temporary-file-manager.class.js';
-import { UmbId } from '../../id/index.js';
-import { css, html, nothing, ifDefined, customElement, property, query, state, } from '../../../../external/lit/index.js';
-import { UmbLitElement } from '../../lit-element/index.js';
-import { UmbChangeEvent } from '../../event/index.js';
+import { TemporaryFileStatus, UmbTemporaryFileManager } from '../../../../core/temporary-file/index.js';
+import { UmbId } from '../../../../core/id/index.js';
+import { css, html, nothing, ifDefined, customElement, property, query, state, } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UmbChangeEvent } from '../../../../core/event/index.js';
 import './input-upload-field-file.element.js';
 let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbLitElement {
     constructor() {

package/dist-cms/packages/media/media/dropzone/dropzone.element.js

@@ -38,7 +38,8 @@ let UmbDropzoneElement = class UmbDropzoneElement extends UmbLitElement {
     }
     #handleDragEnter(e) {
         // Avoid collision with UmbSorterController
-        if (!e.dataTransfer?.types?.length)
+        const types = e.dataTransfer?.types;
+        if (!types?.length || !types?.includes('Files'))
             return;
         this.toggleAttribute('dragging', true);
     }

package/dist-cms/packages/media/media/entity-actions/create/media-create-options-modal.element.js

@@ -43,7 +43,9 @@ let UmbMediaCreateOptionsModalElement = class UmbMediaCreateOptionsModalElement
         }
     }
     // close the modal when navigating to data type
-    #onNavigate() {
+    #onNavigate(mediaType) {
+        const url = `section/media/workspace/media/create/parent/${this.data?.parent.entityType}/${this.data?.parent.unique ?? 'null'}/${mediaType.unique}`;
+        history.pushState({}, '', url);
         this._submitModal();
     }
     render() {
@@ -54,13 +56,15 @@ let UmbMediaCreateOptionsModalElement = class UmbMediaCreateOptionsModalElement
             ? html `<umb-localize key="create_noMediaTypes"></umb-localize>`
             : nothing}
 					${this._allowedMediaTypes.map((mediaType) => html `
-							<uui-menu-item
+							<uui-ref-node-document-type
 								data-id=${ifDefined(mediaType.unique)}
-								href="${`section/media/workspace/media/create/parent/${this.data?.parent.entityType}/${this.data?.parent.unique ?? 'null'}/${mediaType.unique}`}"
-								label="${mediaType.name}"
-								@click=${this.#onNavigate}>
-								> ${mediaType.icon ? html `<umb-icon slot="icon" name=${mediaType.icon}></umb-icon>` : nothing}
-							</uui-menu-item>
+								.name=${mediaType.name}
+								.alias=${mediaType.description}
+								select-only
+								selectable
+								@selected=${() => this.#onNavigate(mediaType)}>
+								${mediaType.icon ? html `<umb-icon slot="icon" name=${mediaType.icon}></umb-icon>` : nothing}
+							</uui-ref-node-document-type>
 						`)}
 				</uui-box>
 				<uui-button

package/dist-cms/packages/media/media/entity-actions/manifests.js

@@ -2,6 +2,7 @@ import { UMB_MEDIA_DETAIL_REPOSITORY_ALIAS, UMB_MEDIA_ITEM_REPOSITORY_ALIAS } fr
 import { UMB_MEDIA_ENTITY_TYPE } from '../entity.js';
 import { manifests as createManifests } from './create/manifests.js';
 import { manifests as moveManifests } from './move-to/manifests.js';
+import { manifests as sortChildrenOfManifests } from './sort-children-of/manifests.js';
 import { UMB_ENTITY_IS_TRASHED_CONDITION_ALIAS } from '../../../core/recycle-bin/index.js';
 const entityActions = [
     ...createManifests,
@@ -22,4 +23,4 @@ const entityActions = [
         ],
     },
 ];
-export const manifests = [...entityActions, ...moveManifests];
+export const manifests = [...entityActions, ...moveManifests, ...sortChildrenOfManifests];

package/dist-cms/packages/media/media/entity-actions/move-to/repository/media-move.repository.d.ts

@@ -1,4 +1,4 @@
-import type { UmbMoveRepository, UmbMoveToRequestArgs } from '../../../../../core/entity-action/index.js';
+import type { UmbMoveRepository, UmbMoveToRequestArgs } from '../../../../../core/tree/index.js';
 import { UmbRepositoryBase } from '../../../../../core/repository/index.js';
 export declare class UmbMoveMediaRepository extends UmbRepositoryBase implements UmbMoveRepository {
     #private;

package/dist-cms/packages/media/media/entity-actions/move-to/repository/media-move.server.data-source.d.ts

@@ -1,5 +1,5 @@
 import type { UmbControllerHost } from '../../../../../../libs/controller-api/index.js';
-import type { UmbMoveDataSource, UmbMoveToRequestArgs } from '../../../../../core/entity-action/index.js';
+import type { UmbMoveDataSource, UmbMoveToRequestArgs } from '../../../../../core/tree/index.js';
 /**
  * Move Media Server Data Source
  * @export

package/dist-cms/packages/media/media/entity-actions/sort-children-of/index.d.ts

@@ -0,0 +1 @@
+export { UmbSortChildrenOfMediaRepository, UMB_SORT_CHILDREN_OF_MEDIA_REPOSITORY_ALIAS } from './repository/index.js';

package/dist-cms/packages/media/media/entity-actions/sort-children-of/index.js

@@ -0,0 +1 @@
+export { UmbSortChildrenOfMediaRepository, UMB_SORT_CHILDREN_OF_MEDIA_REPOSITORY_ALIAS } from './repository/index.js';

package/dist-cms/packages/media/media/entity-actions/sort-children-of/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestTypes } from '../../../../core/extension-registry/index.js';
+export declare const manifests: Array<ManifestTypes>;

package/dist-cms/packages/media/media/entity-actions/sort-children-of/manifests.js

@@ -0,0 +1,26 @@
+import { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE } from '../../entity.js';
+import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
+import { UMB_MEDIA_TREE_REPOSITORY_ALIAS } from '../../tree/index.js';
+import { UMB_SORT_CHILDREN_OF_MEDIA_REPOSITORY_ALIAS } from './repository/constants.js';
+import { manifests as repositoryManifests } from './repository/manifests.js';
+import { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS } from '../../../../core/recycle-bin/index.js';
+export const manifests = [
+    ...repositoryManifests,
+    {
+        type: 'entityAction',
+        kind: 'sortChildrenOf',
+        alias: 'Umb.EntityAction.Media.SortChildrenOf',
+        name: 'Sort Children Of Media Entity Action',
+        forEntityTypes: [UMB_MEDIA_ROOT_ENTITY_TYPE, UMB_MEDIA_ENTITY_TYPE],
+        meta: {
+            itemRepositoryAlias: UMB_MEDIA_ITEM_REPOSITORY_ALIAS,
+            sortChildrenOfRepositoryAlias: UMB_SORT_CHILDREN_OF_MEDIA_REPOSITORY_ALIAS,
+            treeRepositoryAlias: UMB_MEDIA_TREE_REPOSITORY_ALIAS,
+        },
+        conditions: [
+            {
+                alias: UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS,
+            },
+        ],
+    },
+];

package/dist-cms/packages/media/media/entity-actions/sort-children-of/repository/constants.d.ts

@@ -0,0 +1 @@
+export declare const UMB_SORT_CHILDREN_OF_MEDIA_REPOSITORY_ALIAS = "Umb.Repository.Media.SortChildrenOf";

package/dist-cms/packages/media/media/entity-actions/sort-children-of/repository/constants.js

@@ -0,0 +1 @@
+export const UMB_SORT_CHILDREN_OF_MEDIA_REPOSITORY_ALIAS = 'Umb.Repository.Media.SortChildrenOf';

package/dist-cms/packages/media/media/entity-actions/sort-children-of/repository/index.d.ts

@@ -0,0 +1,2 @@
+export { UmbSortChildrenOfMediaRepository } from './sort-children-of.repository.js';
+export { UMB_SORT_CHILDREN_OF_MEDIA_REPOSITORY_ALIAS } from './constants.js';

package/dist-cms/packages/media/media/entity-actions/sort-children-of/repository/index.js

@@ -0,0 +1,2 @@
+export { UmbSortChildrenOfMediaRepository } from './sort-children-of.repository.js';
+export { UMB_SORT_CHILDREN_OF_MEDIA_REPOSITORY_ALIAS } from './constants.js';

package/dist-cms/packages/media/media/entity-actions/sort-children-of/repository/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestTypes } from '../../../../../core/extension-registry/index.js';
+export declare const manifests: Array<ManifestTypes>;

package/dist-cms/packages/media/media/entity-actions/sort-children-of/repository/manifests.js

@@ -0,0 +1,8 @@
+import { UMB_SORT_CHILDREN_OF_MEDIA_REPOSITORY_ALIAS } from './constants.js';
+const repository = {
+    type: 'repository',
+    alias: UMB_SORT_CHILDREN_OF_MEDIA_REPOSITORY_ALIAS,
+    name: 'Sort Children Of Media Repository',
+    api: () => import('./sort-children-of.repository.js'),
+};
+export const manifests = [repository];