@umbraco-cms/backoffice 17.5.3 → 17.6.0-rc

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

@@ -6,11 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbMediaPickerFolderFilter, UmbMediaPickerInputContext } from './input-media.context.js';
 import { css, customElement, html, ifDefined, nothing, property, repeat, state, } from '../../../../../external/lit/index.js';
-import { jsonStringComparison } from '../../../../../libs/observable-api/index.js';
 import { splitStringToArray } from '../../../../core/utils/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbFormControlMixin } from '../../../../core/validation/index.js';
-import { UmbInteractionMemoriesChangeEvent } from '../../../../core/interaction-memory/index.js';
+import { UmbEntityInputInteractionMemoryManager } from '../../../../core/entity/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
 import { UmbSorterController, UmbSorterResolvePlacementAsGrid } from '../../../../core/sorter/index.js';
@@ -86,14 +85,13 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
     }
     #readonly;
     get interactionMemories() {
-        return this.#pickerInputContext.interactionMemory.getAllMemories();
+        return this.#interactionMemoryManager.getMemories();
     }
     set interactionMemories(value) {
-        this.#interactionMemories = value;
-        value?.forEach((memory) => this.#pickerInputContext.interactionMemory.setMemory(memory));
+        this.#interactionMemoryManager.setMemories(value);
     }
-    #interactionMemories;
     #pickerInputContext;
+    #interactionMemoryManager;
     constructor() {
         super();
         this.#sorter = new UmbSorterController(this, {
@@ -115,14 +113,14 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
         });
         /**
          * Min validation message.
-         * @type {boolean}
+         * @type {string}
          * @attr
          * @default
          */
-        this.minMessage = 'This field need more items';
+        this.minMessage = 'This field needs more items';
         /**
          * Max validation message.
-         * @type {boolean}
+         * @type {string}
          * @attr
          * @default
          */
@@ -130,10 +128,10 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
         this.includeTrashed = false;
         this.folderFilter = UmbMediaPickerFolderFilter.FILES_AND_FOLDERS;
         this.#readonly = false;
-        this.#interactionMemories = [];
         this._editMediaPath = '';
         this._cards = [];
         this.#pickerInputContext = new UmbMediaPickerInputContext(this);
+        this.#interactionMemoryManager = new UmbEntityInputInteractionMemoryManager(this, this.#pickerInputContext.interactionMemory);
         new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
             .addAdditionalPath('media')
             .onSetup(() => {
@@ -149,14 +147,6 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
                 return;
             this._cards = selectedItems ?? [];
         });
-        this.observe(this.#pickerInputContext.interactionMemory.memories, (memories) => {
-            // only dispatch the event if the interaction memories have actually changed
-            const isIdentical = jsonStringComparison(memories, this.#interactionMemories);
-            if (!isIdentical) {
-                this.#interactionMemories = memories;
-                this.dispatchEvent(new UmbInteractionMemoriesChangeEvent());
-            }
-        }, '_observeMemories');
         this.addValidator('rangeUnderflow', () => this.minMessage, () => !this.readonly && !!this.min && this.selection.length < this.min);
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !this.readonly && !!this.max && this.selection.length > this.max);
     }
@@ -209,18 +199,24 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
         }
     }
     #renderItem(item) {
-        const href = this.readonly ? undefined : `${this._editMediaPath}edit/${item.unique}`;
+        // No `_editMediaPath` means the modal route registration couldn't reach a parent route context
+        // (e.g. this input is rendered inside a non-routable modal). Skip the href and mark the card
+        // disabled so its open-part isn't styled as clickable. `uui-card-media` doesn't honour `readonly`,
+        // so `disabled` is the only way to suppress the hover/cursor/underline.
+        //
+        // TODO: If `uui-card-media` supports `readonly`, switch this to `?readonly=${this.readonly || !this._editMediaPath}`
+        // for cleaner semantics and styling (no greyed-out display, no "disabled" screen-reader announcement) and visual
+        // consistency with document refs.
+        const href = this.readonly || !this._editMediaPath ? undefined : `${this._editMediaPath}edit/${item.unique}`;
         return html `
 			<uui-card-media
 				title=${ifDefined(item.name === null ? undefined : item.name)}
 				name=${ifDefined(item.name === null ? undefined : item.name)}
 				data-mark="${item.entityType}:${item.unique}"
 				href="${ifDefined(href)}"
-				?readonly=${this.readonly}>
-				<umb-imaging-thumbnail
-					unique=${item.unique}
-					alt=${item.name}
-					icon=${item.mediaType.icon}></umb-imaging-thumbnail>
+				?readonly=${this.readonly}
+				?disabled=${!this._editMediaPath}>
+				<umb-media-thumbnail unique=${item.unique} alt=${item.name} icon=${item.mediaType.icon}></umb-media-thumbnail>
 				${this.#renderIsTrashed(item)}
 				<uui-action-bar slot="actions"> ${this.#renderRemoveAction(item)}</uui-action-bar>
 			</uui-card-media>

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

@@ -2,7 +2,7 @@ import type { UmbCropModel, UmbMediaPickerPropertyValueEntry } from '../../types
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbTreeStartNode } from '../../../../core/tree/index.js';
 import '../../../imaging/index.js';
-import { type UmbInteractionMemoryModel } from '../../../../core/interaction-memory/index.js';
+import type { UmbInteractionMemoryModel } from '../../../../core/interaction-memory/index.js';
 declare const UmbInputRichMediaElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<UmbMediaPickerPropertyValueEntry[] | undefined>> & typeof UmbLitElement;
 export declare class UmbInputRichMediaElement extends UmbInputRichMediaElement_base {
     #private;
@@ -21,7 +21,7 @@ export declare class UmbInputRichMediaElement extends UmbInputRichMediaElement_b
     min: number;
     /**
      * Min validation message.
-     * @type {boolean}
+     * @type {string}
      * @attr
      * @default
      */
@@ -35,7 +35,7 @@ export declare class UmbInputRichMediaElement extends UmbInputRichMediaElement_b
     max: number;
     /**
      * Max validation message.
-     * @type {boolean}
+     * @type {string}
      * @attr
      * @default
      */

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

@@ -18,8 +18,7 @@ import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../.
 import { UmbRepositoryItemsManager } from '../../../../core/repository/index.js';
 import { UMB_MEDIA_TYPE_ENTITY_TYPE } from '../../../media-types/index.js';
 import '../../../imaging/index.js';
-import { UmbInteractionMemoriesChangeEvent, } from '../../../../core/interaction-memory/index.js';
-import { jsonStringComparison } from '../../../../../libs/observable-api/index.js';
+import { UmbEntityInputInteractionMemoryManager } from '../../../../core/entity/index.js';
 let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     #sorter;
     set value(value) {
@@ -60,15 +59,14 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
     }
     #readonly;
     get interactionMemories() {
-        return this.#pickerInputContext.interactionMemory.getAllMemories();
+        return this.#interactionMemoryManager.getMemories();
     }
     set interactionMemories(value) {
-        this.#interactionMemories = value;
-        value?.forEach((memory) => this.#pickerInputContext.interactionMemory.setMemory(memory));
+        this.#interactionMemoryManager.setMemories(value);
     }
-    #interactionMemories;
     #itemManager;
     #pickerInputContext;
+    #interactionMemoryManager;
     constructor() {
         super();
         this.#sorter = new UmbSorterController(this, {
@@ -96,11 +94,11 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         this.min = 0;
         /**
          * Min validation message.
-         * @type {boolean}
+         * @type {string}
          * @attr
          * @default
          */
-        this.minMessage = 'This field need more items';
+        this.minMessage = 'This field needs more items';
         /**
          * This is a maximum amount of selected items in this input.
          * @type {number}
@@ -110,7 +108,7 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         this.max = Infinity;
         /**
          * Max validation message.
-         * @type {boolean}
+         * @type {string}
          * @attr
          * @default
          */
@@ -118,10 +116,10 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         this.multiple = false;
         this.#focalPointEnabled = false;
         this.#readonly = false;
-        this.#interactionMemories = [];
         this._cards = [];
         this.#itemManager = new UmbRepositoryItemsManager(this, UMB_MEDIA_ITEM_REPOSITORY_ALIAS);
         this.#pickerInputContext = new UmbMediaPickerInputContext(this);
+        this.#interactionMemoryManager = new UmbEntityInputInteractionMemoryManager(this, this.#pickerInputContext.interactionMemory);
         this.#pickableFilter = (item) => {
             if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
                 return this.allowedContentTypeIds.includes(item.mediaType.unique);
@@ -176,14 +174,6 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         this.observe(this.#pickerInputContext.selection, (selection) => {
             this.#addItems(selection);
         });
-        this.observe(this.#pickerInputContext.interactionMemory.memories, (memories) => {
-            // only dispatch the event if the interaction memories have actually changed
-            const isIdentical = jsonStringComparison(memories, this.#interactionMemories);
-            if (!isIdentical) {
-                this.#interactionMemories = memories;
-                this.dispatchEvent(new UmbInteractionMemoriesChangeEvent());
-            }
-        }, '_observeMemories');
         this.addValidator('valueMissing', () => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => {
             return !this.readonly && !!this.required && (!this.value || this.value.length === 0);
         });
@@ -312,11 +302,11 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         const href = this.readonly ? undefined : this._routeBuilder?.({ key: item.unique });
         return html `
 			<uui-card-media id=${item.unique} title=${item.name} name=${item.name} .href=${href} ?readonly=${this.readonly}>
-				<umb-imaging-thumbnail
+				<umb-media-thumbnail
 					.unique=${item.media}
 					.alt=${item.name}
 					.icon=${item.icon ?? 'icon-picture'}
-					.externalLoading=${item.isLoading ?? false}></umb-imaging-thumbnail>
+					.externalLoading=${item.isLoading ?? false}></umb-media-thumbnail>
 
 				${this.#renderIsTrashed(item)} ${this.#renderActions(item)}
 			</uui-card-media>
@@ -357,10 +347,6 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
 				grid-auto-rows: var(--umb-card-medium-min-width);
 			}
 
-			#dropzone {
-				margin-bottom: var(--uui-size-space-5);
-			}
-
 			#btn-add {
 				text-align: center;
 				height: 100%;
@@ -402,7 +388,7 @@ __decorate([
     property({ type: Number })
 ], UmbInputRichMediaElement.prototype, "max", void 0);
 __decorate([
-    property({ type: String, attribute: 'min-message' })
+    property({ type: String, attribute: 'max-message' })
 ], UmbInputRichMediaElement.prototype, "maxMessage", void 0);
 __decorate([
     property({ type: Array })

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

@@ -4,7 +4,7 @@ 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_MEDIA_ENTITY_TYPE } from '../../entity.js';
+import { ensureMediaNameFromFile } from '../../utils/ensure-media-name-from-file.function.js';
 import { getMimeTypeFromExtension } from './utils.js';
 import { css, customElement, html, ifDefined, nothing, property, state } from '../../../../../external/lit/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
@@ -13,7 +13,6 @@ import { UmbExtensionsManifestInitializer } from '../../../../../libs/extension-
 import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
 import { UmbFileDropzoneItemStatus } from '../../../dropzone/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UMB_NAMEABLE_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
 import { UMB_SERVER_CONTEXT } from '../../../../core/server/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbFormControlMixin } from '../../../../core/validation/index.js';
@@ -125,18 +124,9 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbFor
         this.#clearObjectUrl();
         const blobUrl = URL.createObjectURL(this.temporaryFile.file);
         this.value = { src: blobUrl };
-        void this.#ensureMediaNameFromFile(this.temporaryFile.file);
+        void ensureMediaNameFromFile(this, this.temporaryFile.file);
         this.dispatchEvent(new UmbChangeEvent());
     }
-    async #ensureMediaNameFromFile(file) {
-        const datasetContext = await this.getContext(UMB_NAMEABLE_PROPERTY_DATASET_CONTEXT);
-        if (!datasetContext || datasetContext.getEntityType() !== UMB_MEDIA_ENTITY_TYPE)
-            return;
-        const currentName = datasetContext.getName();
-        if (currentName && currentName.trim() !== '')
-            return;
-        datasetContext.setName(file.name);
-    }
     render() {
         if (!this.temporaryFile && !this.value?.src) {
             return this.#renderDropzone();

package/dist-cms/packages/media/media/configuration/configuration.repository.d.ts

@@ -0,0 +1,23 @@
+import type { UmbMediaConfigurationModel } from './types.js';
+import { UmbRepositoryBase, type UmbRepositoryResponse } from '../../../core/repository/index.js';
+/**
+ * @description - Repository for Media configuration.
+ * @exports
+ * @class UmbMediaConfigurationRepository
+ * @augments UmbRepositoryBase
+ */
+export declare class UmbMediaConfigurationRepository extends UmbRepositoryBase {
+    #private;
+    /**
+     * Requests the Media configuration from the server, or returns the cached configuration if it has already been fetched. Error responses are not cached.
+     * @returns {Promise<UmbRepositoryResponse<UmbMediaConfigurationModel>>} - The media configuration.
+     * @memberof UmbMediaConfigurationRepository
+     */
+    requestConfiguration(): Promise<UmbRepositoryResponse<UmbMediaConfigurationModel>>;
+}
+export { UmbMediaConfigurationRepository as api };
+/**
+ * Test-only.
+ * @internal
+ */
+export declare function resetUmbMediaConfigurationCache(): void;

package/dist-cms/packages/media/media/configuration/configuration.repository.js

@@ -0,0 +1,36 @@
+import { UmbMediaConfigurationServerDataSource } from './configuration.server.data-source.js';
+import { UmbRepositoryBase } from '../../../core/repository/index.js';
+/**
+ * The cached media configuration, shared across all repository instances.
+ */
+let configurationPromise;
+/**
+ * @description - Repository for Media configuration.
+ * @exports
+ * @class UmbMediaConfigurationRepository
+ * @augments UmbRepositoryBase
+ */
+export class UmbMediaConfigurationRepository extends UmbRepositoryBase {
+    #serverDataSource = new UmbMediaConfigurationServerDataSource(this);
+    /**
+     * Requests the Media configuration from the server, or returns the cached configuration if it has already been fetched. Error responses are not cached.
+     * @returns {Promise<UmbRepositoryResponse<UmbMediaConfigurationModel>>} - The media configuration.
+     * @memberof UmbMediaConfigurationRepository
+     */
+    async requestConfiguration() {
+        configurationPromise ??= this.#serverDataSource.getConfiguration();
+        const response = await configurationPromise;
+        if (response.error) {
+            configurationPromise = undefined;
+        }
+        return response;
+    }
+}
+export { UmbMediaConfigurationRepository as api };
+/**
+ * Test-only.
+ * @internal
+ */
+export function resetUmbMediaConfigurationCache() {
+    configurationPromise = undefined;
+}

package/dist-cms/packages/media/media/configuration/configuration.server.data-source.d.ts

@@ -0,0 +1,11 @@
+import type { UmbMediaConfigurationModel } from './types.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbDataSourceResponse } from '../../../core/repository/index.js';
+export declare class UmbMediaConfigurationServerDataSource extends UmbControllerBase {
+    /**
+     * Gets the media configuration from the server.
+     * @returns {Promise<UmbDataSourceResponse<UmbMediaConfigurationModel>>} - The media configuration.
+     * @memberof UmbMediaConfigurationServerDataSource
+     */
+    getConfiguration(): Promise<UmbDataSourceResponse<UmbMediaConfigurationModel>>;
+}

package/dist-cms/packages/media/media/configuration/configuration.server.data-source.js

@@ -0,0 +1,22 @@
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import { MediaService } from '../../../core/backend-api/index.js';
+import { tryExecute } from '../../../core/resources/index.js';
+export class UmbMediaConfigurationServerDataSource extends UmbControllerBase {
+    /**
+     * Gets the media configuration from the server.
+     * @returns {Promise<UmbDataSourceResponse<UmbMediaConfigurationModel>>} - The media configuration.
+     * @memberof UmbMediaConfigurationServerDataSource
+     */
+    async getConfiguration() {
+        const { data, error } = await tryExecute(this, MediaService.getMediaConfiguration());
+        if (data) {
+            const mappedData = {
+                disableDeleteWhenReferenced: data.disableDeleteWhenReferenced,
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                disableUnpublishWhenReferenced: data.disableUnpublishWhenReferenced,
+            };
+            return { data: mappedData };
+        }
+        return { error };
+    }
+}

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

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

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

@@ -0,0 +1 @@
+export const UMB_MEDIA_CONFIGURATION_REPOSITORY_ALIAS = 'Umb.Repository.Media.Configuration';

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

@@ -0,0 +1,3 @@
+export { UmbMediaConfigurationRepository } from './configuration.repository.js';
+export * from './constants.js';
+export type * from './types.js';

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

@@ -0,0 +1,2 @@
+export { UmbMediaConfigurationRepository } from './configuration.repository.js';
+export * from './constants.js';

package/dist-cms/packages/media/media/configuration/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

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

@@ -0,0 +1,9 @@
+import { UMB_MEDIA_CONFIGURATION_REPOSITORY_ALIAS } from './constants.js';
+export const manifests = [
+    {
+        type: 'repository',
+        alias: UMB_MEDIA_CONFIGURATION_REPOSITORY_ALIAS,
+        name: 'Media Configuration Repository',
+        api: () => import('./configuration.repository.js'),
+    },
+];

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

@@ -0,0 +1,7 @@
+export interface UmbMediaConfigurationModel {
+    disableDeleteWhenReferenced: boolean;
+    /**
+     * @deprecated Media does not support unpublishing, so this field is not used. [NL]
+     */
+    disableUnpublishWhenReferenced: boolean;
+}

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

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

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

@@ -1,4 +1,5 @@
 export * from './collection/constants.js';
+export * from './configuration/constants.js';
 export * from './entity-actions/constants.js';
 export * from './entity-bulk-actions/constants.js';
 export * from './menu/constants.js';
@@ -11,5 +12,8 @@ export * from './search/constants.js';
 export * from './tree/constants.js';
 export * from './url/constants.js';
 export * from './workspace/constants.js';
+export * from './property-editors/image-cropper/value-type/constants.js';
+export * from './property-editors/media-picker/value-type/constants.js';
+export * from './property-editors/upload-field/value-type/constants.js';
 export { UMB_MEDIA_VARIANT_CONTEXT } from './property-dataset-context/media-property-dataset-context.token.js';
 export { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE, UMB_MEDIA_PLACEHOLDER_ENTITY_TYPE, UMB_MEDIA_PROPERTY_VALUE_ENTITY_TYPE, } from './entity.js';

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

@@ -1,4 +1,5 @@
 export * from './collection/constants.js';
+export * from './configuration/constants.js';
 export * from './entity-actions/constants.js';
 export * from './entity-bulk-actions/constants.js';
 export * from './menu/constants.js';
@@ -11,5 +12,8 @@ export * from './search/constants.js';
 export * from './tree/constants.js';
 export * from './url/constants.js';
 export * from './workspace/constants.js';
+export * from './property-editors/image-cropper/value-type/constants.js';
+export * from './property-editors/media-picker/value-type/constants.js';
+export * from './property-editors/upload-field/value-type/constants.js';
 export { UMB_MEDIA_VARIANT_CONTEXT } from './property-dataset-context/media-property-dataset-context.token.js';
 export { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE, UMB_MEDIA_PLACEHOLDER_ENTITY_TYPE, UMB_MEDIA_PROPERTY_VALUE_ENTITY_TYPE, } from './entity.js';

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

@@ -1,5 +1,6 @@
 import { UmbMediaDropzoneManager } from './media-dropzone.manager.js';
-import { UmbInputDropzoneElement, type UmbUploadableItem } from '../../dropzone/index.js';
+import { UmbInputDropzoneElement } from '../../dropzone/index.js';
+import type { UmbUploadableItem } from '../../dropzone/index.js';
 import type { UUIFileDropzoneEvent } from '../../../../external/uui/index.js';
 /**
  * A dropzone for uploading files and folders as media items. It is hidden by default and will be shown when dragging files over the window.
@@ -24,7 +25,7 @@ export declare class UmbDropzoneMediaElement extends UmbInputDropzoneElement {
     constructor();
     protected _observeProgressItems(): void;
     disconnectedCallback(): void;
-    onUpload(event: UUIFileDropzoneEvent): Promise<void>;
+    protected _handleUpload(event: UUIFileDropzoneEvent): Promise<UmbUploadableItem[]>;
     static styles: import("lit").CSSResult[];
 }
 export default UmbDropzoneMediaElement;

package/dist-cms/packages/media/media/dropzone/dropzone-media.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 { UmbMediaDropzoneManager } from './media-dropzone.manager.js';
-import { UmbInputDropzoneElement, UmbFileDropzoneItemStatus, UmbDropzoneSubmittedEvent, } from '../../dropzone/index.js';
 import { css, customElement, property } from '../../../../external/lit/index.js';
+import { UmbInputDropzoneElement, UmbFileDropzoneItemStatus } from '../../dropzone/index.js';
 /**
  * A dropzone for uploading files and folders as media items. It is hidden by default and will be shown when dragging files over the window.
  * @element umb-dropzone-media
@@ -93,13 +93,8 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
         document.removeEventListener('dragover', this.#handleDragOver);
         document.removeEventListener('drop', this.#handleDrop);
     }
-    async onUpload(event) {
-        if (this.disabled)
-            return;
-        if (!event.detail.files.length && !event.detail.folders.length)
-            return;
-        const uploadable = this._manager.createMediaItems(event.detail, this.parentUnique);
-        this.dispatchEvent(new UmbDropzoneSubmittedEvent(uploadable));
+    async _handleUpload(event) {
+        return this._manager.createMediaItems(event.detail, this.parentUnique);
     }
     static { this.styles = [
         ...UmbInputDropzoneElement.styles,

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

@@ -1,5 +1,6 @@
 import { UmbMediaDetailRepository } from '../repository/detail/index.js';
 import { UMB_MEDIA_PROPERTY_VALUE_ENTITY_TYPE } from '../entity.js';
+import { toFriendlyName } from '../utils/to-friendly-name.function.js';
 import { UMB_DROPZONE_MEDIA_TYPE_PICKER_MODAL } from './modals/index.js';
 import { UmbDropzoneManager, UmbFileDropzoneItemStatus, } from '../../dropzone/index.js';
 import { getFileExtension } from '../../../core/utils/index.js';
@@ -196,7 +197,7 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
     // Scaffold
     async #getItemScaffold(item, mediaTypeUnique) {
         // TODO: Use a scaffolding feature to ensure consistency. [NL]
-        const name = item.temporaryFile ? item.temporaryFile.file.name : (item.folder?.name ?? '');
+        const name = item.temporaryFile ? toFriendlyName(item.temporaryFile.file.name) : (item.folder?.name ?? '');
         const umbracoFile = {
             editorAlias: '',
             alias: 'umbracoFile',

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

@@ -5,6 +5,8 @@ export declare class UmbMediaCreateOptionsModalElement extends UmbModalBaseEleme
     private _allowedMediaTypes;
     private _headline;
     private _loading;
+    private _hasSettingsAccess;
+    constructor();
     firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

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

@@ -9,17 +9,31 @@ import { html, nothing, customElement, state, repeat, css, when } from '../../..
 import { UmbModalBaseElement } from '../../../../core/modal/index.js';
 import { UmbMediaTypeStructureRepository } from '../../../media-types/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
+import { createExtensionApiByAlias } from '../../../../core/extension-registry/index.js';
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '../../../../core/section/index.js';
+import { UMB_SETTINGS_SECTION_ALIAS } from '../../../../settings/index.js';
 let UmbMediaCreateOptionsModalElement = class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement {
+    #mediaTypeStructureRepository;
+    #mediaItemRepository;
     constructor() {
-        super(...arguments);
+        super();
         this.#mediaTypeStructureRepository = new UmbMediaTypeStructureRepository(this);
         this.#mediaItemRepository = new UmbMediaItemRepository(this);
         this._allowedMediaTypes = [];
         this._headline = this.localize.term('general_create');
         this._loading = true;
+        this._hasSettingsAccess = false;
+        createExtensionApiByAlias(this, UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS, [
+            {
+                config: {
+                    match: UMB_SETTINGS_SECTION_ALIAS,
+                },
+                onChange: (permitted) => {
+                    this._hasSettingsAccess = permitted;
+                },
+            },
+        ]);
     }
-    #mediaTypeStructureRepository;
-    #mediaItemRepository;
     async firstUpdated() {
         const mediaUnique = this.data?.parent.unique;
         const mediaTypeUnique = this.data?.mediaType?.unique || null;
@@ -71,14 +85,17 @@ let UmbMediaCreateOptionsModalElement = class UmbMediaCreateOptionsModalElement
 			<umb-localize key="create_noMediaTypes">
 				There are no allowed Media Types available for creating media here. You must enable these in
 				<strong>Media Types</strong> within the <strong>Settings</strong> section, by editing the
-				<strong>Allowed child node types</strong> under <strong>Permissions</strong>. </umb-localize
-			><br />
-			<uui-button
-				id="edit-permissions"
-				look="secondary"
-				@click=${() => this._rejectModal()}
-				href=${`/section/settings/workspace/media-type/edit/${this.data?.mediaType?.unique}/view/structure`}
-				label=${this.localize.term('create_noMediaTypesEditPermissions')}></uui-button>
+				<strong>Allowed child node types</strong> under <strong>Structure</strong>.
+			</umb-localize>
+			${when(this._hasSettingsAccess && this.data?.mediaType?.unique, () => html `
+					<br />
+					<uui-button
+						id="edit-permissions"
+						look="secondary"
+						@click=${() => this._rejectModal()}
+						href=${`/section/settings/workspace/media-type/edit/${this.data?.mediaType?.unique}/view/structure`}
+						label=${this.localize.term('create_noMediaTypesEditPermissions')}></uui-button>
+				`)}
 		`;
     }
     #renderAllowedMediaTypes() {
@@ -117,6 +134,9 @@ __decorate([
 __decorate([
     state()
 ], UmbMediaCreateOptionsModalElement.prototype, "_loading", void 0);
+__decorate([
+    state()
+], UmbMediaCreateOptionsModalElement.prototype, "_hasSettingsAccess", void 0);
 UmbMediaCreateOptionsModalElement = __decorate([
     customElement('umb-media-create-options-modal')
 ], UmbMediaCreateOptionsModalElement);

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

@@ -2,6 +2,7 @@ import { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
 import { UMB_MEDIA_TREE_REPOSITORY_ALIAS, UMB_MEDIA_TREE_ALIAS } from '../../constants.js';
 import { UMB_MOVE_MEDIA_REPOSITORY_ALIAS } from './constants.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
+import { UMB_MEDIA_SEARCH_PROVIDER_ALIAS } from '../../search/constants.js';
 import { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS } from '../../../../core/recycle-bin/index.js';
 export const manifests = [
     {
@@ -15,6 +16,7 @@ export const manifests = [
             treeRepositoryAlias: UMB_MEDIA_TREE_REPOSITORY_ALIAS,
             moveRepositoryAlias: UMB_MOVE_MEDIA_REPOSITORY_ALIAS,
             treeAlias: UMB_MEDIA_TREE_ALIAS,
+            searchProviderAlias: UMB_MEDIA_SEARCH_PROVIDER_ALIAS,
         },
         conditions: [
             {

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

@@ -1,5 +1,6 @@
 import { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS, UMB_MEDIA_TREE_REPOSITORY_ALIAS } from '../../constants.js';
+import { UmbMediaItemDataResolver } from '../../item/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';
@@ -13,6 +14,7 @@ export const manifests = [
         forEntityTypes: [UMB_MEDIA_ROOT_ENTITY_TYPE, UMB_MEDIA_ENTITY_TYPE],
         meta: {
             itemRepositoryAlias: UMB_MEDIA_ITEM_REPOSITORY_ALIAS,
+            itemDataResolver: UmbMediaItemDataResolver,
             sortChildrenOfRepositoryAlias: UMB_SORT_CHILDREN_OF_MEDIA_REPOSITORY_ALIAS,
             treeRepositoryAlias: UMB_MEDIA_TREE_REPOSITORY_ALIAS,
         },