@umbraco-cms/backoffice 15.3.0 → 15.4.0-rc

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

@@ -4,167 +4,25 @@ 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 { UmbDropzoneManager } from './dropzone-manager.class.js';
-import { UmbDropzoneSubmittedEvent } from './dropzone-submitted.event.js';
-import { UmbFileDropzoneItemStatus } from './types.js';
-import { css, customElement, html, ifDefined, property, state } from '../../../../external/lit/index.js';
-import { UmbLitElement } from '../../../core/lit-element/index.js';
-let UmbDropzoneElement = class UmbDropzoneElement extends UmbLitElement {
-    get disableFolderUpload() {
-        return this._disableFolderUpload;
+import { UmbDropzoneMediaElement } from './dropzone-media.element.js';
+import { UmbDeprecation } from '../../../core/utils/index.js';
+import { customElement } from '../../../../external/lit/index.js';
+const DEPRECATION_MESSAGE = new UmbDeprecation({
+    deprecated: '<umb-dropzone />',
+    removeInVersion: '18',
+    solution: 'Use <umb-dropzone-media /> for media items and <umb-input-dropzone /> for all other files and folders.',
+});
+/**
+ * @inheritdoc
+ * @deprecated Use {@link UmbDropzoneMediaElement} for media items instead, and {@link UmbInputDropzoneElement} for all other files and folders. This will be removed in Umbraco 18.
+ */
+let UmbDropzoneElement = class UmbDropzoneElement extends UmbDropzoneMediaElement {
+    connectedCallback() {
+        super.connectedCallback();
+        DEPRECATION_MESSAGE.warn();
     }
-    set disableFolderUpload(isAllowed) {
-        this.#dropzoneManager.setIsFoldersAllowed(!isAllowed);
-    }
-    #dropzoneManager;
-    /**
-     * @deprecated Please use `getItems()` instead; this method will be removed in Umbraco 17.
-     * @returns {Array<UmbUploadableItem>} An array of uploadable items.
-     */
-    getFiles() {
-        return this.getItems();
-    }
-    getItems() {
-        return this._progressItems;
-    }
-    browse() {
-        if (this.disabled)
-            return;
-        const element = this.shadowRoot?.querySelector('#dropzone');
-        return element.browse();
-    }
-    constructor() {
-        super();
-        this.parentUnique = null;
-        this.createAsTemporary = false;
-        this.multiple = false;
-        this.disabled = false;
-        this._disableFolderUpload = false;
-        this._progressItems = [];
-        this.progressItems = () => this.#dropzoneManager.progressItems;
-        this.progress = () => this.#dropzoneManager.progress;
-        this.#dropzoneManager = new UmbDropzoneManager(this);
-        document.addEventListener('dragenter', this.#handleDragEnter.bind(this));
-        document.addEventListener('dragleave', this.#handleDragLeave.bind(this));
-        document.addEventListener('drop', this.#handleDrop.bind(this));
-        this.observe(this.#dropzoneManager.progress, (progress) => this.dispatchEvent(new ProgressEvent('progress', { loaded: progress.completed, total: progress.total })), '_observeProgress');
-        this.observe(this.#dropzoneManager.progressItems, (progressItems) => {
-            this._progressItems = progressItems;
-            const waiting = progressItems.find((item) => item.status === UmbFileDropzoneItemStatus.WAITING);
-            if (progressItems.length && !waiting) {
-                this.dispatchEvent(new CustomEvent('complete', { detail: progressItems }));
-            }
-        }, '_observeProgressItems');
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#dropzoneManager.destroy();
-        document.removeEventListener('dragenter', this.#handleDragEnter.bind(this));
-        document.removeEventListener('dragleave', this.#handleDragLeave.bind(this));
-        document.removeEventListener('drop', this.#handleDrop.bind(this));
-    }
-    #handleDragEnter(e) {
-        if (this.disabled)
-            return;
-        // Avoid collision with UmbSorterController
-        const types = e.dataTransfer?.types;
-        if (!types?.length || !types?.includes('Files'))
-            return;
-        this.toggleAttribute('dragging', true);
-    }
-    #handleDragLeave() {
-        if (this.disabled)
-            return;
-        this.toggleAttribute('dragging', false);
-    }
-    #handleDrop(event) {
-        event.preventDefault();
-        if (this.disabled)
-            return;
-        this.toggleAttribute('dragging', false);
-    }
-    async #onDropFiles(event) {
-        if (this.disabled)
-            return;
-        if (!event.detail.files.length && !event.detail.folders.length)
-            return;
-        if (this.createAsTemporary) {
-            const uploadable = this.#dropzoneManager.createTemporaryFiles(event.detail.files);
-            this.dispatchEvent(new UmbDropzoneSubmittedEvent(await uploadable));
-        }
-        else {
-            const uploadable = this.#dropzoneManager.createMediaItems(event.detail, this.parentUnique);
-            this.dispatchEvent(new UmbDropzoneSubmittedEvent(uploadable));
-        }
-    }
-    render() {
-        return html `<uui-file-dropzone
-			id="dropzone"
-			accept=${ifDefined(this.accept)}
-			?multiple=${this.multiple}
-			@change=${this.#onDropFiles}
-			label=${this.localize.term('media_dragAndDropYourFilesIntoTheArea')}></uui-file-dropzone>`;
-    }
-    static { this.styles = [
-        css `
-			:host(:not([disabled])[dragging]) #dropzone {
-				opacity: 1;
-				pointer-events: all;
-			}
-
-			[dropzone] {
-				opacity: 0;
-			}
-
-			#dropzone {
-				opacity: 0;
-				pointer-events: none;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				position: absolute;
-				inset: 0px;
-				z-index: 100;
-				backdrop-filter: opacity(1); /* Removes the built in blur effect */
-				border-radius: var(--uui-border-radius);
-				overflow: clip;
-				border: 1px solid var(--uui-color-focus);
-			}
-			#dropzone:after {
-				content: '';
-				display: block;
-				position: absolute;
-				inset: 0;
-				border-radius: var(--uui-border-radius);
-				background-color: var(--uui-color-focus);
-				opacity: 0.2;
-			}
-		`,
-    ]; }
 };
-__decorate([
-    property({ attribute: false })
-], UmbDropzoneElement.prototype, "parentUnique", void 0);
-__decorate([
-    property({ type: Boolean })
-], UmbDropzoneElement.prototype, "createAsTemporary", void 0);
-__decorate([
-    property({ type: String })
-], UmbDropzoneElement.prototype, "accept", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], UmbDropzoneElement.prototype, "multiple", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], UmbDropzoneElement.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'disable-folder-upload', reflect: true })
-], UmbDropzoneElement.prototype, "disableFolderUpload", null);
-__decorate([
-    state()
-], UmbDropzoneElement.prototype, "_progressItems", void 0);
 UmbDropzoneElement = __decorate([
     customElement('umb-dropzone')
 ], UmbDropzoneElement);
-export { UmbDropzoneElement };
 export default UmbDropzoneElement;

package/dist-cms/packages/media/media/dropzone/index.d.ts

@@ -1,3 +1,2 @@
+export * from './dropzone-media.element.js';
 export * from './dropzone.element.js';
-export * from './dropzone-manager.class.js';
-export * from './dropzone-submitted.event.js';

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

@@ -1,3 +1,2 @@
+export * from './dropzone-media.element.js';
 export * from './dropzone.element.js';
-export * from './dropzone-manager.class.js';
-export * from './dropzone-submitted.event.js';

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

@@ -22,13 +22,13 @@ let UmbMediaCreateOptionsModalElement = class UmbMediaCreateOptionsModalElement
     async firstUpdated() {
         const mediaUnique = this.data?.parent.unique;
         const mediaTypeUnique = this.data?.mediaType?.unique || null;
-        this.#retrieveAllowedMediaTypesOf(mediaTypeUnique);
+        this.#retrieveAllowedMediaTypesOf(mediaTypeUnique, mediaUnique || null);
         if (mediaUnique) {
             this.#retrieveHeadline(mediaUnique);
         }
     }
-    async #retrieveAllowedMediaTypesOf(unique) {
-        const { data } = await this.#mediaTypeStructureRepository.requestAllowedChildrenOf(unique);
+    async #retrieveAllowedMediaTypesOf(unique, parentContentUnique) {
+        const { data } = await this.#mediaTypeStructureRepository.requestAllowedChildrenOf(unique, parentContentUnique);
         if (data) {
             // TODO: implement pagination, or get 1000?
             this._allowedMediaTypes = data.items;

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

@@ -9,7 +9,7 @@ export const manifests = [
     {
         type: 'entityAction',
         alias: 'Umb.EntityAction.Media.Delete',
-        name: 'Delete Media Entity Action ',
+        name: 'Delete Media Entity Action',
         kind: 'deleteWithRelation',
         forEntityTypes: [UMB_MEDIA_ENTITY_TYPE],
         meta: {

package/dist-cms/packages/media/media/index.d.ts

@@ -8,3 +8,7 @@ export * from './url/index.js';
 export * from './utils/index.js';
 export { UmbMediaAuditLogRepository } from './audit-log/index.js';
 export type * from './types.js';
+/**
+ * @deprecated Please import directly from the `@umbraco-cms/backoffice/dropzone` package instead. This package will be removed in Umbraco 18.
+ */
+export * from '../dropzone/index.js';

package/dist-cms/packages/media/media/index.js

@@ -7,3 +7,7 @@ export * from './search/index.js';
 export * from './url/index.js';
 export * from './utils/index.js';
 export { UmbMediaAuditLogRepository } from './audit-log/index.js';
+/**
+ * @deprecated Please import directly from the `@umbraco-cms/backoffice/dropzone` package instead. This package will be removed in Umbraco 18.
+ */
+export * from '../dropzone/index.js';

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

@@ -1,6 +1,5 @@
 import { manifests as auditLogManifests } from './audit-log/manifests.js';
 import { manifests as collectionManifests } from './collection/manifests.js';
-import { manifests as dropzoneManifests } from './dropzone/manifests.js';
 import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
 import { manifests as entityBulkActionsManifests } from './entity-bulk-actions/manifests.js';
 import { manifests as fileUploadPreviewManifests } from './components/input-upload-field/manifests.js';
@@ -19,7 +18,6 @@ import { manifests as workspaceManifests } from './workspace/manifests.js';
 export const manifests = [
     ...auditLogManifests,
     ...collectionManifests,
-    ...dropzoneManifests,
     ...entityActionsManifests,
     ...entityBulkActionsManifests,
     ...fileUploadPreviewManifests,

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-create-item.element.js

@@ -34,7 +34,7 @@ let UmbMediaPickerCreateItemElement = class UmbMediaPickerCreateItemElement exte
     }
     async #getAllowedMediaTypes() {
         const mediaType = await this.#getNodeMediaType();
-        const { data: allowedMediaTypes } = await this.#mediaTypeStructure.requestAllowedChildrenOf(mediaType);
+        const { data: allowedMediaTypes } = await this.#mediaTypeStructure.requestAllowedChildrenOf(mediaType, this._node);
         this._allowedMediaTypes = allowedMediaTypes?.items ?? [];
     }
     #onPopoverToggle(event) {

package/dist-cms/packages/media/media/modals/media-picker/media-picker-modal.element.js

@@ -69,7 +69,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbMod
         }
         this.#loadChildrenOfCurrentMediaItem();
     }
-    async #loadChildrenOfCurrentMediaItem() {
+    async #loadChildrenOfCurrentMediaItem(selectedItems) {
         const key = this._currentMediaEntity.entityType + this._currentMediaEntity.unique;
         let paginationManager = this.#pagingMap.get(key);
         if (!paginationManager) {
@@ -92,6 +92,16 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbMod
         paginationManager.setTotalItems(data?.total ?? 0);
         this._currentPage = paginationManager.getCurrentPageNumber();
         this._currentTotalPages = paginationManager.getTotalPages();
+        if (selectedItems?.length) {
+            const selectedItem = this._currentChildren.find((x) => x.unique == selectedItems[0].unique);
+            if (selectedItem) {
+                this.#onSelected(selectedItem);
+            }
+        }
+    }
+    #onDropzoneChange(evt) {
+        const target = evt.target;
+        this.#loadChildrenOfCurrentMediaItem(target.value);
     }
     #onOpen(item) {
         this.#clearSearch();
@@ -211,11 +221,11 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbMod
     }
     #renderBody() {
         return html `${this.#renderToolbar()}
-			<umb-dropzone
+			<umb-dropzone-media
 				id="dropzone"
 				multiple
-				@complete=${() => this.#loadChildrenOfCurrentMediaItem()}
-				.parentUnique=${this._currentMediaEntity.unique}></umb-dropzone>
+				@change=${this.#onDropzoneChange}
+				.parentUnique=${this._currentMediaEntity.unique}></umb-dropzone-media>
 			${this._searchQuery ? this.#renderSearchResult() : this.#renderCurrentChildren()} `;
     }
     #renderSearchResult() {
@@ -332,6 +342,10 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbMod
 				width: 100%;
 				margin-bottom: var(--uui-size-3);
 			}
+			#search uui-input [slot='prepend'] {
+				display: flex;
+				align-items: center;
+			}
 
 			#searching-indicator {
 				margin-left: 7px;
@@ -340,9 +354,9 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbMod
 
 			#media-grid {
 				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-				grid-auto-rows: 150px;
 				gap: var(--uui-size-space-5);
+				grid-template-columns: repeat(auto-fill, minmax(var(--umb-card-medium-min-width), 1fr));
+				grid-auto-rows: var(--umb-card-medium-min-width);
 				padding-bottom: 5px; /** The modal is a bit jumpy due to the img card focus/hover border. This fixes the issue. */
 			}
 

package/dist-cms/packages/media/media/property-editors/image-cropper/property-editor-ui-image-cropper.element.d.ts

@@ -1,5 +1,5 @@
 import type { UmbImageCropperPropertyEditorValue } from '../../components/index.js';
-import { type UmbPropertyEditorUiElement, type UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
+import type { UmbPropertyEditorUiElement, UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import '../../components/input-image-cropper/input-image-cropper.element.js';
 declare const UmbPropertyEditorUIImageCropperElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<UmbImageCropperPropertyEditorValue | undefined>> & typeof UmbLitElement;

package/dist-cms/packages/media/media/property-editors/image-cropper/property-editor-ui-image-cropper.element.js

@@ -5,10 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, customElement, property, state } from '../../../../../external/lit/index.js';
-import { UmbPropertyValueChangeEvent, } from '../../../../core/property-editor/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
 import '../../components/input-image-cropper/input-image-cropper.element.js';
+import { UmbChangeEvent } from '../../../../core/event/index.js';
 /**
  * @element umb-property-editor-ui-image-cropper
  */
@@ -29,7 +29,7 @@ let UmbPropertyEditorUIImageCropperElement = class UmbPropertyEditorUIImageCropp
     }
     #onChange(e) {
         this.value = e.target.value;
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+        this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
         return html `<umb-input-image-cropper

package/dist-cms/packages/media/media/property-editors/image-crops/property-editor-ui-image-crops.element.js

@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, customElement, property, css, repeat, state, query } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UmbPropertyValueChangeEvent } from '../../../../core/property-editor/index.js';
 import { generateAlias } from '../../../../core/utils/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { UmbChangeEvent } from '../../../../core/event/index.js';
 /**
  * @element umb-property-editor-ui-image-crops
  */
@@ -34,7 +34,7 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
                 const oldValue = this._value;
                 this._value = model;
                 this.requestUpdate('_value', oldValue);
-                this.dispatchEvent(new UmbPropertyValueChangeEvent());
+                this.dispatchEvent(new UmbChangeEvent());
             },
         });
     }
@@ -49,7 +49,7 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
     #sorter;
     #onRemove(alias) {
         this.value = [...this.value.filter((item) => item.alias !== alias)];
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+        this.dispatchEvent(new UmbChangeEvent());
     }
     #onEdit(crop) {
         this.editCropAlias = crop.alias;
@@ -104,7 +104,7 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
         else {
             this.value = [...this.value, newCrop];
         }
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+        this.dispatchEvent(new UmbChangeEvent());
         form.reset();
         this._labelInput.focus();
     }
@@ -165,7 +165,7 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 			<div class="crops">
 				${repeat(this.value, (item) => item.alias, (item) => html `
 						<div class="crop" data-alias="${item.alias}">
-							<span class="crop-drag">+</span>
+							<uui-icon name="icon-grip" class="crop-drag"></uui-icon>
 							<span><strong>${item.label}</strong> <em>(${item.alias})</em></span>
 							<span class="crop-size">(${item.width} x ${item.height}px)</span>
 							<div class="crop-actions">
@@ -206,6 +206,11 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 				color: var(--uui-color-disabled-contrast);
 				font-weight: bold;
 			}
+
+			.crop-drag:active {
+				cursor: grabbing;
+			}
+
 			.crop-size {
 				font-size: 0.9em;
 				padding-inline: var(--uui-size-space-4);
@@ -222,12 +227,15 @@ let UmbPropertyEditorUIImageCropsElement = class UmbPropertyEditorUIImageCropsEl
 				display: flex;
 				flex-direction: column;
 			}
+			uui-input[type='number'] {
+				text-align: right;
+			}
 			.append {
 				padding-inline: var(--uui-size-space-4);
 				background: var(--uui-color-disabled);
 				border-left: 1px solid var(--uui-color-border);
 				color: var(--uui-color-disabled-contrast);
-				font-size: 0.8em;
+				font-size: var(--uui-type-small-size);
 				display: flex;
 				align-items: center;
 			}

package/dist-cms/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.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 { UmbChangeEvent } from '../../../../core/event/index.js';
 import { html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UmbPropertyValueChangeEvent } from '../../../../core/property-editor/index.js';
 let UmbPropertyEditorUIMediaEntityPickerElement = class UmbPropertyEditorUIMediaEntityPickerElement extends UmbLitElement {
     constructor() {
         super(...arguments);
@@ -29,7 +29,7 @@ let UmbPropertyEditorUIMediaEntityPickerElement = class UmbPropertyEditorUIMedia
     }
     #onChange(event) {
         this.value = event.target.value;
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+        this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
         return html `

package/dist-cms/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.js

@@ -7,10 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
 import { customElement, html, property, state } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UmbPropertyValueChangeEvent } from '../../../../core/property-editor/index.js';
 import { UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
 import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
 import '../../components/input-rich-media/input-rich-media.element.js';
+import { UmbChangeEvent } from '../../../../core/event/index.js';
 const elementName = 'umb-property-editor-ui-media-picker';
 /**
  * @element umb-property-editor-ui-media-picker
@@ -59,7 +59,7 @@ let UmbPropertyEditorUIMediaPickerElement = class UmbPropertyEditorUIMediaPicker
     #onChange(event) {
         const isEmpty = event.target.value?.length === 0;
         this.value = isEmpty ? undefined : event.target.value;
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+        this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
         return html `

package/dist-cms/packages/media/media/property-editors/upload-field/property-editor-ui-upload-field.element.d.ts

@@ -1,5 +1,5 @@
 import type { MediaValueType } from './types.js';
-import { type UmbPropertyEditorUiElement, type UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
+import type { UmbPropertyEditorUiElement, UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 /**
  * @element umb-property-editor-ui-upload-field

package/dist-cms/packages/media/media/property-editors/upload-field/property-editor-ui-upload-field.element.js

@@ -5,8 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, customElement, property, state } from '../../../../../external/lit/index.js';
-import { UmbPropertyValueChangeEvent, } from '../../../../core/property-editor/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UmbChangeEvent } from '../../../../core/event/index.js';
 /**
  * @element umb-property-editor-ui-upload-field
  */
@@ -22,7 +22,7 @@ let UmbPropertyEditorUIUploadFieldElement = class UmbPropertyEditorUIUploadField
     }
     #onChange(event) {
         this.value = event.target.value;
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+        this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
         return html `<umb-input-upload-field

package/dist-cms/packages/media/media/recycle-bin/entity-action/manifests.js

@@ -2,6 +2,7 @@ import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS, UMB_MEDIA_TREE_PICKER_MODAL, UMB_MEDIA
 import { UMB_MEDIA_RECYCLE_BIN_ROOT_ENTITY_TYPE, UMB_MEDIA_RECYCLE_BIN_REPOSITORY_ALIAS } from '../constants.js';
 import { UMB_MEDIA_REFERENCE_REPOSITORY_ALIAS } from '../../reference/constants.js';
 import { manifests as bulkTrashManifests } from './bulk-trash/manifests.js';
+import { UMB_ENTITY_HAS_CHILDREN_CONDITION_ALIAS } from '../../../../core/entity-action/index.js';
 import { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS, UMB_ENTITY_IS_TRASHED_CONDITION_ALIAS, } from '../../../../core/recycle-bin/index.js';
 export const manifests = [
     {
@@ -47,6 +48,11 @@ export const manifests = [
         meta: {
             recycleBinRepositoryAlias: UMB_MEDIA_RECYCLE_BIN_REPOSITORY_ALIAS,
         },
+        conditions: [
+            {
+                alias: UMB_ENTITY_HAS_CHILDREN_CONDITION_ALIAS,
+            },
+        ],
     },
     ...bulkTrashManifests,
 ];

package/dist-cms/packages/media/media/reference/info-app/manifests.js

@@ -1,17 +1,20 @@
 import { UMB_MEDIA_WORKSPACE_ALIAS } from '../../workspace/constants.js';
+import { UMB_MEDIA_REFERENCE_REPOSITORY_ALIAS } from '../constants.js';
 import { UMB_WORKSPACE_CONDITION_ALIAS } from '../../../../core/workspace/index.js';
 export const manifests = [
     {
         type: 'workspaceInfoApp',
+        kind: 'entityReferences',
         name: 'Media References Workspace Info App',
         alias: 'Umb.WorkspaceInfoApp.Media.References',
-        element: () => import('./media-references-workspace-info-app.element.js'),
-        weight: 90,
         conditions: [
             {
                 alias: UMB_WORKSPACE_CONDITION_ALIAS,
                 match: UMB_MEDIA_WORKSPACE_ALIAS,
             },
         ],
+        meta: {
+            referenceRepositoryAlias: UMB_MEDIA_REFERENCE_REPOSITORY_ALIAS,
+        },
     },
 ];

package/dist-cms/packages/media/media/reference/repository/media-reference-response.management-api.mapping.js

@@ -9,6 +9,7 @@ export class UmbMediaReferenceResponseManagementApiDataMapping extends UmbContro
                 alias: data.mediaType.alias,
                 icon: data.mediaType.icon,
                 name: data.mediaType.name,
+                unique: data.mediaType.id,
             },
             name: data.name,
             // TODO: this is a hardcoded array until the server can return the correct variants array

package/dist-cms/packages/media/media/reference/repository/types.d.ts

@@ -1,6 +1,5 @@
 import type { UmbMediaItemVariantModel } from '../../repository/item/types.js';
 import type { UmbEntityModel } from '../../../../core/entity/index.js';
-import type { TrackedReferenceMediaTypeModel } from '../../../../../external/backend-api/index.js';
 export interface UmbMediaReferenceModel extends UmbEntityModel {
     /**
      * @deprecated use unique instead
@@ -20,6 +19,11 @@ export interface UmbMediaReferenceModel extends UmbEntityModel {
      * @memberof UmbMediaReferenceModel
      */
     published?: boolean | null;
-    mediaType: TrackedReferenceMediaTypeModel;
+    mediaType: {
+        alias: string;
+        icon: string;
+        name: string;
+        unique: string;
+    };
     variants: Array<UmbMediaItemVariantModel>;
 }

package/dist-cms/packages/media/media/types.d.ts

@@ -4,7 +4,6 @@ import type { UmbReferenceByUnique } from '../../core/models/index.js';
 import type { UmbContentDetailModel, UmbElementValueModel } from '../../core/content/index.js';
 export type * from './audit-log/types.js';
 export type * from './collection/types.js';
-export type * from './dropzone/types.js';
 export type * from './modals/types.js';
 export type * from './recycle-bin/types.js';
 export type * from './repository/types.js';

package/dist-cms/packages/media/media-types/constants.d.ts

@@ -1,6 +1,7 @@
 export * from './entity-actions/constants.js';
 export * from './media-type-root/constants.js';
 export * from './paths.js';
+export * from './property-type/constants.js';
 export * from './repository/constants.js';
 export * from './tree/constants.js';
 export * from './workspace/constants.js';

package/dist-cms/packages/media/media-types/constants.js

@@ -1,6 +1,7 @@
 export * from './entity-actions/constants.js';
 export * from './media-type-root/constants.js';
 export * from './paths.js';
+export * from './property-type/constants.js';
 export * from './repository/constants.js';
 export * from './tree/constants.js';
 export * from './workspace/constants.js';

package/dist-cms/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.element.d.ts

@@ -3,7 +3,6 @@ import { UmbModalBaseElement } from '../../../../../core/modal/index.js';
 export declare class UmbMediaTypeImportModalLayout extends UmbModalBaseElement<UmbMediaTypeImportModalData, UmbMediaTypeImportModalValue> {
     #private;
     private _fileContent;
-    private dropzone?;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];