@umbraco-cms/backoffice 17.3.5 → 17.4.0-rc2

package/dist-cms/packages/media/imaging/imaging-request-batcher.js

@@ -0,0 +1,159 @@
+import { generateImagingCacheKey } from './types.js';
+import { batchArray } from '../../core/utils/index.js';
+const BATCH_SIZE = 40;
+const pendingBatches = new Map();
+/** Module-level URL cache: model key → (unique → url). */
+const urlCache = new Map();
+/**
+ * Flushes a pending batch, executing the API call and resolving all waiting promises.
+ * @param {string} key - The batch key identifying the batch
+ */
+async function flush(key) {
+    const batch = pendingBatches.get(key);
+    if (!batch)
+        return;
+    try {
+        pendingBatches.delete(key);
+        const uniqueArray = Array.from(batch.requests.keys());
+        let allItems = [];
+        const failedUniques = new Set();
+        let firstError;
+        if (uniqueArray.length > BATCH_SIZE) {
+            const chunks = batchArray(uniqueArray, BATCH_SIZE);
+            const results = await Promise.allSettled(chunks.map((chunk) => batch.fetchFn(chunk, batch.imagingModel)));
+            // A chunk can fail in two ways: the promise rejects (thrown error),
+            // or it resolves with { error } (tryExecute convention). Both must
+            // be treated as failures so callers get rejected rather than silently
+            // receiving undefined and caching an empty string.
+            for (let i = 0; i < results.length; i++) {
+                const result = results[i];
+                if (result.status === 'rejected') {
+                    firstError ??= result.reason;
+                    for (const unique of chunks[i]) {
+                        failedUniques.add(unique);
+                    }
+                }
+                else if (result.value.error) {
+                    firstError ??= result.value.error;
+                    for (const unique of chunks[i]) {
+                        failedUniques.add(unique);
+                    }
+                }
+                else if (result.value.data) {
+                    allItems = allItems.concat(result.value.data);
+                }
+            }
+            // If every chunk failed, reject all callers with the first error.
+            if (failedUniques.size === uniqueArray.length) {
+                rejectAll(batch, firstError);
+                return;
+            }
+        }
+        else {
+            const { data, error } = await batch.fetchFn(uniqueArray, batch.imagingModel);
+            if (error) {
+                rejectAll(batch, error);
+                return;
+            }
+            allItems = data ?? [];
+        }
+        // Build a lookup from unique -> url and populate the cache.
+        const urlMap = new Map();
+        let cacheForKey = urlCache.get(key);
+        if (!cacheForKey) {
+            cacheForKey = new Map();
+            urlCache.set(key, cacheForKey);
+        }
+        for (const item of allItems) {
+            // Cache both present and absent URLs. A missing URL (e.g. non-image
+            // media like PDFs) is a valid result that should not trigger re-fetching.
+            const url = item.url ?? '';
+            urlMap.set(item.unique, url);
+            cacheForKey.set(item.unique, url);
+        }
+        // Resolve successful callers; reject those whose chunk failed.
+        for (const [unique, requests] of batch.requests) {
+            if (failedUniques.has(unique)) {
+                for (const request of requests) {
+                    request.reject(firstError);
+                }
+            }
+            else {
+                const url = urlMap.get(unique);
+                for (const request of requests) {
+                    request.resolve(url);
+                }
+            }
+        }
+    }
+    catch (error) {
+        rejectAll(batch, error);
+    }
+}
+/**
+ * Rejects all pending requests in a batch with the given error.
+ * @param {PendingBatch} batch - The batch whose requests should be rejected
+ * @param {unknown} error - The error to reject with
+ */
+function rejectAll(batch, error) {
+    for (const requests of batch.requests.values()) {
+        for (const request of requests) {
+            request.reject(error);
+        }
+    }
+}
+/**
+ * Batches individual imaging resize requests together.
+ * Multiple calls within the same event loop turn are collected and sent as a single API request,
+ * grouped by resize model configuration (width/height/mode/format).
+ * @param {string} unique - The media item unique identifier
+ * @param {UmbImagingResizeModel | undefined} imagingModel - The resize configuration
+ * @param {FetchFn} fetchFn - The function to call with batched uniques
+ * @returns {Promise<string | undefined>} A promise resolving to the URL for this specific unique, or undefined if not found
+ */
+export function batchImagingRequest(unique, imagingModel, fetchFn) {
+    const key = generateImagingCacheKey(imagingModel);
+    // Return cached URL immediately if available.
+    const cached = urlCache.get(key)?.get(unique);
+    if (cached !== undefined) {
+        return Promise.resolve(cached);
+    }
+    let batch = pendingBatches.get(key);
+    if (!batch) {
+        batch = {
+            requests: new Map(),
+            fetchFn,
+            imagingModel,
+        };
+        pendingBatches.set(key, batch);
+        // Macrotask flush: Lit renders via microtasks, so setTimeout(0) waits for
+        // a full render pass to complete before flushing. Multiple passes produce
+        // separate batches, which is fine — pipelining paints results sooner.
+        setTimeout(() => flush(key), 0);
+    }
+    return new Promise((resolve, reject) => {
+        let requests = batch.requests.get(unique);
+        if (!requests) {
+            requests = [];
+            batch.requests.set(unique, requests);
+        }
+        requests.push({ resolve, reject });
+    });
+}
+/**
+ * Clears all cached imaging URLs for the given unique identifier.
+ * Call this when a media item is saved or deleted to ensure fresh URLs are fetched.
+ * @param {string} unique - The media item unique identifier to clear from cache
+ */
+export function clearImagingCache(unique) {
+    for (const cacheForKey of urlCache.values()) {
+        cacheForKey.delete(unique);
+    }
+}
+/**
+ * Clears the entire imaging URL cache.
+ * @internal
+ */
+export function clearAllImagingCache() {
+    urlCache.clear();
+}

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

@@ -1,6 +1,6 @@
-import { UmbImagingCropMode, type UmbImagingResizeModel } from './types.js';
+import { UmbImagingCropMode } from './types.js';
+import type { UmbImagingResizeModel } from './types.js';
 import { UmbRepositoryBase } from '../../core/repository/index.js';
-import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
 import type { UmbApi } from '../../../libs/extension-api/index.js';
 import type { UmbMediaUrlModel } from '../media/index.js';
 /**
@@ -9,7 +9,6 @@ import type { UmbMediaUrlModel } from '../media/index.js';
  */
 export declare class UmbImagingRepository extends UmbRepositoryBase implements UmbApi {
     #private;
-    constructor(host: UmbControllerHost);
     /**
      * Requests the items for the given uniques
      * @param {Array<string>} uniques - The uniques
@@ -20,12 +19,6 @@ export declare class UmbImagingRepository extends UmbRepositoryBase implements U
     requestResizedItems(uniques: Array<string>, imagingModel?: UmbImagingResizeModel): Promise<{
         data: UmbMediaUrlModel[];
     }>;
-    /**
-     * Internal method to clear the cache for a specific image.
-     * @param {string} unique The unique identifier for the media item
-     * @internal
-     */
-    _internal_clearCropByUnique(unique: string): Promise<void>;
     /**
      * Requests the thumbnail URLs for the given uniques
      * @param {Array<string>} uniques - The unique identifiers for the media items

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

@@ -1,23 +1,13 @@
 import { UmbImagingCropMode } from './types.js';
+import { batchImagingRequest } from './imaging-request-batcher.js';
 import { UmbImagingServerDataSource } from './imaging.server.data.js';
-import { UMB_IMAGING_STORE_CONTEXT } from './imaging.store.token.js';
 import { UmbRepositoryBase } from '../../core/repository/index.js';
 /**
  * Repository for managing imaging-related data.
  * You can use it to request (cached) thumbnail URLs or new resized images.
  */
 export class UmbImagingRepository extends UmbRepositoryBase {
-    #init;
     #itemSource = new UmbImagingServerDataSource(this);
-    #dataStore;
-    constructor(host) {
-        super(host);
-        this.#init = this.consumeContext(UMB_IMAGING_STORE_CONTEXT, (instance) => {
-            if (instance) {
-                this.#dataStore = instance;
-            }
-        }).asPromise({ preventTimeout: true });
-    }
     /**
      * Requests the items for the given uniques
      * @param {Array<string>} uniques - The uniques
@@ -28,39 +18,18 @@ export class UmbImagingRepository extends UmbRepositoryBase {
     async requestResizedItems(uniques, imagingModel) {
         if (!uniques.length)
             throw new Error('Uniques are missing');
-        await this.#init;
-        if (!this.#dataStore) {
-            console.warn('[UmbImagingRepository] No data store available. All thumbnails are uncached.');
-        }
-        const urls = new Map();
-        for (const unique of uniques) {
-            const existingCrop = this.#dataStore?.getCrop(unique, imagingModel);
-            if (existingCrop !== undefined) {
-                urls.set(unique, existingCrop);
-                continue;
-            }
-            const { data: urlModels, error } = await this.#itemSource.getItems([unique], imagingModel);
-            if (error) {
-                console.error('[UmbImagingRepository] Error fetching items', error);
-                continue;
+        const results = await Promise.allSettled(uniques.map((unique) => batchImagingRequest(unique, imagingModel, (batchUniques, model) => this.#itemSource.getItems(batchUniques, model))));
+        const urls = [];
+        for (let i = 0; i < uniques.length; i++) {
+            const result = results[i];
+            if (result.status === 'fulfilled' && result.value) {
+                urls.push({ unique: uniques[i], url: result.value });
             }
-            const url = urlModels?.[0]?.url;
-            this.#dataStore?.addCrop(unique, url ?? '', imagingModel);
-            if (url) {
-                urls.set(unique, url);
+            else if (result.status === 'rejected') {
+                console.error('[UmbImagingRepository] Error fetching item', result.reason);
             }
         }
-        return { data: Array.from(urls).map(([unique, url]) => ({ unique, url })) };
-    }
-    /**
-     * Internal method to clear the cache for a specific image.
-     * @param {string} unique The unique identifier for the media item
-     * @internal
-     */
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    async _internal_clearCropByUnique(unique) {
-        await this.#init;
-        this.#dataStore?.clearCropByUnique(unique);
+        return { data: urls };
     }
     /**
      * Requests the thumbnail URLs for the given uniques

package/dist-cms/packages/media/imaging/imaging.store.d.ts

@@ -1,7 +1,12 @@
-import type { UmbImagingResizeModel } from './types.js';
+import { type UmbImagingResizeModel } from './types.js';
 import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
 import type { UmbApi } from '../../../libs/extension-api/index.js';
 import { UmbContextBase } from '../../../libs/class-api/index.js';
+/**
+ * @deprecated Imaging URL caching is now handled by the request batcher module.
+ * Use `batchImagingRequest` for cached URL lookups and `clearImagingCache` for
+ * cache invalidation. This class will be removed in Umbraco 19.
+ */
 export declare class UmbImagingStore extends UmbContextBase implements UmbApi {
     #private;
     constructor(host: UmbControllerHost);

package/dist-cms/packages/media/imaging/imaging.store.js

@@ -1,9 +1,27 @@
 import { UMB_IMAGING_STORE_CONTEXT } from './imaging.store.token.js';
+import { generateImagingCacheKey } from './types.js';
 import { UmbContextBase } from '../../../libs/class-api/index.js';
+import { UmbDeprecation } from '../../core/utils/index.js';
+/**
+ * @deprecated Imaging URL caching is now handled by the request batcher module.
+ * Use `batchImagingRequest` for cached URL lookups and `clearImagingCache` for
+ * cache invalidation. This class will be removed in Umbraco 19.
+ */
 export class UmbImagingStore extends UmbContextBase {
     #data = new Map();
+    #hasWarned = false;
     constructor(host) {
-        super(host, UMB_IMAGING_STORE_CONTEXT.toString());
+        super(host, UMB_IMAGING_STORE_CONTEXT);
+    }
+    #warnDeprecation() {
+        if (this.#hasWarned)
+            return;
+        this.#hasWarned = true;
+        new UmbDeprecation({
+            removeInVersion: '19.0.0',
+            deprecated: 'UmbImagingStore',
+            solution: 'Imaging URL caching is now handled by the request batcher. Use batchImagingRequest() for cached lookups and clearImagingCache() for invalidation, both from @umbraco-cms/backoffice/imaging',
+        }).warn();
     }
     /**
      * Gets the data from the store.
@@ -11,6 +29,7 @@ export class UmbImagingStore extends UmbContextBase {
      * @returns {Map<string, string> | undefined} - The data if it exists
      */
     getData(unique) {
+        this.#warnDeprecation();
         return this.#data.get(unique);
     }
     /**
@@ -20,7 +39,8 @@ export class UmbImagingStore extends UmbContextBase {
      * @returns {string | undefined} - The crop if it exists
      */
     getCrop(unique, data) {
-        return this.#data.get(unique)?.get(this.#generateCropKey(data));
+        this.#warnDeprecation();
+        return this.#data.get(unique)?.get(generateImagingCacheKey(data));
     }
     /**
      * Adds a new crop to the store.
@@ -29,15 +49,17 @@ export class UmbImagingStore extends UmbContextBase {
      * @param {UmbImagingResizeModel | undefined} data - The resize configuration
      */
     addCrop(unique, urlInfo, data) {
+        this.#warnDeprecation();
         if (!this.#data.has(unique)) {
             this.#data.set(unique, new Map());
         }
-        this.#data.get(unique)?.set(this.#generateCropKey(data), urlInfo);
+        this.#data.get(unique)?.set(generateImagingCacheKey(data), urlInfo);
     }
     /**
      * Clears all crops from the store.
      */
     clear() {
+        this.#warnDeprecation();
         this.#data.clear();
     }
     /**
@@ -45,6 +67,7 @@ export class UmbImagingStore extends UmbContextBase {
      * @param {string} unique - The unique identifier for the media item
      */
     clearCropByUnique(unique) {
+        this.#warnDeprecation();
         this.#data.delete(unique);
     }
     /**
@@ -53,15 +76,8 @@ export class UmbImagingStore extends UmbContextBase {
      * @param {UmbImagingResizeModel | undefined} data - The resize configuration
      */
     clearCropByConfiguration(unique, data) {
-        this.#data.get(unique)?.delete(this.#generateCropKey(data));
-    }
-    /**
-     * Generates a unique key for the crop based on the width, height, mode and format.
-     * @param {UmbImagingResizeModel} data - The resize configuration
-     * @returns {string} - The crop key
-     */
-    #generateCropKey(data) {
-        return data ? `${data.width}x${data.height};${data.mode};${data.format}` : 'generic';
+        this.#warnDeprecation();
+        this.#data.get(unique)?.delete(generateImagingCacheKey(data));
     }
 }
 export default UmbImagingStore;

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

@@ -1,4 +1,5 @@
 export * from './components/index.js';
 export { UmbImagingRepository } from './imaging.repository.js';
+export { clearImagingCache } from './imaging-request-batcher.js';
 export * from './constants.js';
 export type * from './types.js';

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

@@ -1,3 +1,4 @@
 export * from './components/index.js';
 export { UmbImagingRepository } from './imaging.repository.js';
+export { clearImagingCache } from './imaging-request-batcher.js';
 export * from './constants.js';

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

@@ -6,6 +6,13 @@ export interface UmbImagingResizeModel {
     mode?: UmbImagingCropMode;
     format?: string;
 }
+/**
+ * Generates a cache key from an imaging resize configuration.
+ * Used by both the imaging store and the request batcher to ensure consistent keying.
+ * @param {UmbImagingResizeModel} model - The resize configuration
+ * @returns {string} The cache key
+ */
+export declare function generateImagingCacheKey(model?: UmbImagingResizeModel): string;
 /**
  * @deprecated use `UmbImagingResizeModel` instead
  */

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

@@ -1,2 +1,11 @@
 import { ImageCropModeModel as UmbImagingCropMode } from '../../core/backend-api/index.js';
 export { UmbImagingCropMode };
+/**
+ * Generates a cache key from an imaging resize configuration.
+ * Used by both the imaging store and the request batcher to ensure consistent keying.
+ * @param {UmbImagingResizeModel} model - The resize configuration
+ * @returns {string} The cache key
+ */
+export function generateImagingCacheKey(model) {
+    return model ? `${model.width}x${model.height};${model.mode};${model.format}` : 'generic';
+}

package/dist-cms/packages/media/media/audit-log/info-app/media-history-workspace-info-app.element.js

@@ -6,11 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../workspace/constants.js';
 import { UmbMediaAuditLogRepository } from '../repository/index.js';
-import { getMediaHistoryTagStyleAndText, TimeOptions } from './utils.js';
+import { getMediaHistoryTagStyleAndText } from './utils.js';
 import { css, html, customElement, state, nothing, repeat, when } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
-import { UmbPaginationManager } from '../../../../core/utils/index.js';
+import { UmbPaginationManager, UMB_DATE_TIME_FORMAT_OPTIONS } from '../../../../core/utils/index.js';
 import { UmbUserItemRepository } from '../../../../user/user/index.js';
 /**
  * @deprecated Scheduled for removal in Umbraco 19. Replaced by the shared 'auditLog' kind element (UmbContentAuditLogWorkspaceInfoAppElement).
@@ -94,7 +94,7 @@ let UmbMediaHistoryWorkspaceInfoAppElement = class UmbMediaHistoryWorkspaceInfoA
                 const user = this.#userMap.get(item.user.unique);
                 return html `<umb-history-item
 								.name=${user?.name ?? 'Unknown'}
-								.detail=${this.localize.date(item.timestamp, TimeOptions)}>
+								.detail=${this.localize.date(item.timestamp, UMB_DATE_TIME_FORMAT_OPTIONS)}>
 								<umb-user-avatar
 									slot="avatar"
 									.name=${user?.name}

package/dist-cms/packages/media/media/audit-log/info-app/utils.d.ts

@@ -17,5 +17,4 @@ interface HistoryData {
  * @deprecated Scheduled for removal in Umbraco 19. Use the audit log repository's getTagStyleAndText() method instead.
  */
 export declare function getMediaHistoryTagStyleAndText(type: UmbMediaAuditLogType): HistoryData;
-export declare const TimeOptions: Intl.DateTimeFormatOptions;
 export {};

package/dist-cms/packages/media/media/audit-log/info-app/utils.js

@@ -44,11 +44,3 @@ export function getMediaHistoryTagStyleAndText(type) {
             };
     }
 }
-export const TimeOptions = {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
-};

package/dist-cms/packages/media/media/collection/action/create-media-collection-action.element.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../constants.js';
 import { UMB_CREATE_MEDIA_WORKSPACE_PATH_PATTERN } from '../../paths.js';
 import { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE } from '../../entity.js';
-import { html, customElement, property, state, map } from '../../../../../external/lit/index.js';
+import { html, customElement, property, state, repeat } from '../../../../../external/lit/index.js';
 import { UmbMediaTypeStructureRepository } from '../../../media-types/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 let UmbCreateMediaCollectionActionElement = class UmbCreateMediaCollectionActionElement extends UmbLitElement {
@@ -86,7 +86,7 @@ let UmbCreateMediaCollectionActionElement = class UmbCreateMediaCollectionAction
 				@toggle=${this.#onPopoverToggle}>
 				<umb-popover-layout>
 					<uui-scroll-container>
-						${map(this._allowedMediaTypes, (item) => html `
+						${repeat(this._allowedMediaTypes, (item) => item.unique, (item) => html `
 								<uui-menu-item label=${item.name} href=${this.#getCreateUrl(item)}>
 									<umb-icon slot="icon" name=${item.icon ?? 'icon-picture'}></umb-icon>
 								</uui-menu-item>

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

@@ -33,7 +33,7 @@ let UmbImageCropperPreviewElement = class UmbImageCropperPreviewElement extends
         const container = this.imageContainerElement.getBoundingClientRect();
         const cropAspectRatio = this.crop.width / this.crop.height;
         const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
-        let imageContainerWidth = 0, imageContainerHeight = 0, imageWidth = 0, imageHeight = 0, imageLeft = 0, imageTop = 0;
+        let imageContainerWidth, imageContainerHeight, imageWidth, imageHeight, imageLeft, imageTop;
         if (cropAspectRatio > 1) {
             imageContainerWidth = container.width;
             imageContainerHeight = container.width / cropAspectRatio;

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

@@ -111,7 +111,7 @@ let UmbImageCropperElement = class UmbImageCropperElement extends UmbLitElement
         const viewportAspectRatio = viewportWidth / viewportHeight;
         const cropAspectRatio = this.value.width / this.value.height;
         // Init variables
-        let maskWidth = 0, maskHeight = 0, imageWidth = 0, imageHeight = 0, imageLeft = 0, imageTop = 0;
+        let maskWidth, maskHeight, imageWidth, imageHeight, imageLeft, imageTop;
         // NOTE {} are used to keep some variables in scope, preventing them from being used outside.
         {
             // Calculate mask size
@@ -191,7 +191,7 @@ let UmbImageCropperElement = class UmbImageCropperElement extends UmbLitElement
         const newImageScale = this.#getImageScale;
         const mask = this.maskElement.getBoundingClientRect();
         const image = this.imageElement.getBoundingClientRect();
-        let fixedLocation = { left: 0, top: 0 };
+        let fixedLocation;
         // If mouse position is provided, use that as the fixed location
         // Else use the center of the mask
         if (mouseX && mouseY) {

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

@@ -346,8 +346,9 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         css `
 			:host {
 				position: relative;
-				display: block;
 				width: 100%;
+				display: flex;
+				flex-direction: column-reverse;
 			}
 			.container {
 				display: grid;

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

@@ -216,7 +216,10 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
     }
     async #showDialogMediaTypePicker(options) {
         const value = await umbOpenModal(this, UMB_DROPZONE_MEDIA_TYPE_PICKER_MODAL, { data: { options } }).catch(() => undefined);
-        return value?.mediaTypeUnique;
+        if (!value)
+            return undefined; // cancelled
+        // Auto-pick: mediaTypeUnique is undefined → use the server's preferred type (first in the list)
+        return value.mediaTypeUnique ?? options[0]?.unique;
     }
     async #createOneMediaItem(item) {
         const { options, availableMediaTypes } = await this.#getMediaTypeOptions(item);

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

@@ -4,6 +4,7 @@ export declare class UmbMediaCreateOptionsModalElement extends UmbModalBaseEleme
     #private;
     private _allowedMediaTypes;
     private _headline;
+    private _loading;
     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

@@ -16,6 +16,7 @@ let UmbMediaCreateOptionsModalElement = class UmbMediaCreateOptionsModalElement
         this.#mediaItemRepository = new UmbMediaItemRepository(this);
         this._allowedMediaTypes = [];
         this._headline = this.localize.term('general_create');
+        this._loading = true;
     }
     #mediaTypeStructureRepository;
     #mediaItemRepository;
@@ -33,6 +34,7 @@ let UmbMediaCreateOptionsModalElement = class UmbMediaCreateOptionsModalElement
             // TODO: implement pagination, or get 1000?
             this._allowedMediaTypes = data.items;
         }
+        this._loading = false;
     }
     async #retrieveHeadline(unique) {
         if (!unique)
@@ -53,7 +55,9 @@ let UmbMediaCreateOptionsModalElement = class UmbMediaCreateOptionsModalElement
     render() {
         return html `
 			<uui-dialog-layout headline=${this._headline ?? ''}>
-				${when(this._allowedMediaTypes.length === 0, () => this.#renderNotAllowed(), () => this.#renderAllowedMediaTypes())}
+				${this._loading
+            ? html `<div id="loader"><uui-loader></uui-loader></div>`
+            : when(this._allowedMediaTypes.length === 0, () => this.#renderNotAllowed(), () => this.#renderAllowedMediaTypes())}
 				<uui-button
 					slot="actions"
 					id="cancel"
@@ -80,7 +84,7 @@ let UmbMediaCreateOptionsModalElement = class UmbMediaCreateOptionsModalElement
     #renderAllowedMediaTypes() {
         return repeat(this._allowedMediaTypes, (mediaType) => mediaType.unique, (mediaType) => html `
 				<uui-ref-node-document-type
-					.name=${this.localize.string(mediaType.name)}
+					.name=${this.localize.string(mediaType.name) + '...'}
 					.alias=${this.localize.string(mediaType.description ?? '')}
 					select-only
 					selectable
@@ -95,6 +99,12 @@ let UmbMediaCreateOptionsModalElement = class UmbMediaCreateOptionsModalElement
 			#edit-permissions {
 				margin-top: var(--uui-size-6);
 			}
+
+			#loader {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
 		`,
     ]; }
 };
@@ -104,6 +114,9 @@ __decorate([
 __decorate([
     state()
 ], UmbMediaCreateOptionsModalElement.prototype, "_headline", void 0);
+__decorate([
+    state()
+], UmbMediaCreateOptionsModalElement.prototype, "_loading", void 0);
 UmbMediaCreateOptionsModalElement = __decorate([
     customElement('umb-media-create-options-modal')
 ], UmbMediaCreateOptionsModalElement);

package/dist-cms/packages/media/media/modals/media-caption-alt-text/media-caption-alt-text-modal.element.d.ts

@@ -2,6 +2,8 @@ import type { UmbMediaCaptionAltTextModalData, UmbMediaCaptionAltTextModalValue
 import { UmbModalBaseElement } from '../../../../core/modal/index.js';
 export declare class UmbMediaCaptionAltTextModalElement extends UmbModalBaseElement<UmbMediaCaptionAltTextModalData, UmbMediaCaptionAltTextModalValue> {
     #private;
+    private _naturalWidth?;
+    private _naturalHeight?;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];