@umbraco-cms/backoffice 17.3.5 → 17.4.0-rc2

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

@@ -6,7 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbMediaDetailRepository } from '../../repository/index.js';
 import { UmbMediaUrlRepository } from '../../url/index.js';
-import { css, html, customElement } from '../../../../../external/lit/index.js';
+import { css, html, customElement, state } from '../../../../../external/lit/index.js';
+import { imageSize } from '../../../../core/utils/index.js';
 import { UmbModalBaseElement } from '../../../../core/modal/index.js';
 let UmbMediaCaptionAltTextModalElement = class UmbMediaCaptionAltTextModalElement extends UmbModalBaseElement {
     #mediaUnique;
@@ -24,15 +25,48 @@ let UmbMediaCaptionAltTextModalElement = class UmbMediaCaptionAltTextModalElemen
         if (!mediaData)
             return;
         const { data: mediaUrlData } = await this.#mediaUrlRepository.requestItems([this.#mediaUnique]);
+        const url = mediaUrlData?.[0].url ?? '';
         this.value = {
             ...this.value,
             altText: this.value?.altText ?? mediaData.variants[0].name,
-            url: mediaUrlData?.[0].url ?? '',
+            url,
         };
+        if (url) {
+            try {
+                const dims = await imageSize(url);
+                let naturalWidth = dims.naturalWidth;
+                let naturalHeight = dims.naturalHeight;
+                // Cap natural dimensions to maxImageSize proportionally
+                const maxSize = this.data?.maxImageSize;
+                if (maxSize && (naturalWidth > maxSize || naturalHeight > maxSize)) {
+                    const ratio = Math.min(maxSize / naturalWidth, maxSize / naturalHeight);
+                    naturalWidth = Math.round(naturalWidth * ratio);
+                    naturalHeight = Math.round(naturalHeight * ratio);
+                }
+                this._naturalWidth = naturalWidth;
+                this._naturalHeight = naturalHeight;
+                // Auto-populate dimensions from natural size if not already set
+                if (!this.value.width) {
+                    this.value = {
+                        ...this.value,
+                        width: naturalWidth,
+                        height: naturalHeight,
+                    };
+                }
+            }
+            catch {
+                // If image dimensions cannot be resolved, leave width/height unset.
+            }
+        }
+    }
+    #onDimensionsChange(e) {
+        const target = e.target;
+        this.value = { ...this.value, width: target.width, height: target.height };
     }
     render() {
         return html `
 			<umb-body-layout .headline=${this.localize.term('defaultdialogs_editSelectedMedia')}>
+				<uui-box>
 				<div id="wrapper">
 					<uui-label for="alt-text">${this.localize.term('content_altTextOptional')}</uui-label>
 					<uui-input
@@ -48,11 +82,27 @@ let UmbMediaCaptionAltTextModalElement = class UmbMediaCaptionAltTextModalElemen
 						.value=${this.value?.caption ?? ''}
 						@input=${(e) => (this.value = { ...this.value, caption: e.target.value })}></uui-input>
 
+					<umb-input-dimensions
+						.width=${this.value?.width}
+						.height=${this.value?.height}
+						.naturalWidth=${this._naturalWidth}
+						.naturalHeight=${this._naturalHeight}
+						@change=${this.#onDimensionsChange}></umb-input-dimensions>
+
 					<figure id="mainobject">
-						<img src=${this.value?.url ?? ''} alt=${this.value?.altText ?? ''} />
+						${this.value?.url
+            ? html `<img
+									src=${this.value.url}
+									alt=${this.value?.altText ?? ''}
+									decoding="async"
+									style=${this.value?.width && this.value?.height
+                ? `width: ${this.value.width}px; aspect-ratio: ${this.value.width} / ${this.value.height}`
+                : ''} />`
+            : ''}
 						<figcaption>${this.value?.caption ?? ''}</figcaption>
 					</figure>
 				</div>
+				</uui-box>
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 					<uui-button
@@ -75,19 +125,31 @@ let UmbMediaCaptionAltTextModalElement = class UmbMediaCaptionAltTextModalElemen
 				flex-direction: column;
 			}
 
+			umb-input-dimensions {
+				margin-bottom: var(--uui-size-layout-1);
+			}
+
 			#mainobject {
 				display: flex;
 				flex-direction: column;
+				align-items: center;
 				max-width: 100%;
 
 				img {
 					max-width: 100%;
 					height: auto;
+					transition: aspect-ratio 0.3s ease;
 				}
 			}
 		`,
     ]; }
 };
+__decorate([
+    state()
+], UmbMediaCaptionAltTextModalElement.prototype, "_naturalWidth", void 0);
+__decorate([
+    state()
+], UmbMediaCaptionAltTextModalElement.prototype, "_naturalHeight", void 0);
 UmbMediaCaptionAltTextModalElement = __decorate([
     customElement('umb-media-caption-alt-text-modal')
 ], UmbMediaCaptionAltTextModalElement);

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

@@ -1,10 +1,13 @@
 import { UmbModalToken } from '../../../../core/modal/index.js';
 export interface UmbMediaCaptionAltTextModalData {
     mediaUnique: string;
+    maxImageSize?: number;
 }
 export type UmbMediaCaptionAltTextModalValue = {
     altText?: string;
     caption?: string;
     url: string;
+    width?: number;
+    height?: number;
 };
 export declare const UMB_MEDIA_CAPTION_ALT_TEXT_MODAL: UmbModalToken<UmbMediaCaptionAltTextModalData, UmbMediaCaptionAltTextModalValue>;

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.js

@@ -165,12 +165,14 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
     }
     render() {
         return html `<div id="path">
-			${repeat(this._paths, (path) => path.unique, (path) => html `<uui-button
-							compact
-							.label=${path.name}
-							?disabled=${this.currentMedia.unique === path.unique}
-							@click=${() => this.#goToFolder(path)}></uui-button
-						>/`)}${this.#renderFolderCreation()}
+			<uui-breadcrumbs>
+				${repeat(this._paths, (path) => path.unique, (path) => html `<uui-breadcrumb-item
+							@click=${this.currentMedia.unique !== path.unique ? () => this.#goToFolder(path) : undefined}
+							?last-item=${this.currentMedia.unique === path.unique}>
+							${path.name}
+						</uui-breadcrumb-item>`)}
+			</uui-breadcrumbs>
+			${this.#renderFolderCreation()}
 		</div>`;
     }
     #renderFolderCreation() {
@@ -180,8 +182,7 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
 				label=${this.localize.term('create_enterFolderName')}
 				placeholder=${this.localize.term('create_enterFolderName')}
 				@blur=${this.#addFolder}
-				@keypress=${this.#onKeypress}
-				auto-width></uui-input>`;
+				@keypress=${this.#onKeypress}></uui-input>`;
         }
         if (this._selectingFolderType) {
             return html `<div id="folder-type-selection">
@@ -209,20 +210,15 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
 				display: flex;
 				align-items: center;
 				margin: 0 var(--uui-size-3);
-			}
-			#path uui-button {
-				font-weight: bold;
-			}
-			#path uui-input {
-				height: 100%;
+				overflow: hidden;
+				min-width: 0;
 			}
 
 			#new-folder {
 				margin-left: var(--uui-size-2);
-			}
-
-			#path uui-button uui-icon {
-				--uui-icon-color: inherit;
+				width: 150px;
+				height: 100%;
+				flex-shrink: 0;
 			}
 
 			#folder-type-selection {
@@ -239,6 +235,16 @@ let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement exte
 			#folder-type-selection umb-icon {
 				margin-right: var(--uui-size-1);
 			}
+
+			uui-breadcrumbs {
+				overflow: hidden;
+				min-width: 0;
+				flex: 0 1 auto;
+			}
+
+			uui-breadcrumbs uui-breadcrumb-item:not([last-item]) {
+				cursor: pointer;
+			}
 		`,
     ]; }
 };

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

@@ -20,6 +20,8 @@ export declare class UmbMediaPickerModalElement extends UmbPickerModalBaseElemen
     private _startNode;
     private _searching;
     private _dropzone;
+    private _viewPopover?;
+    private _currentView;
     constructor();
     connectedCallback(): Promise<void>;
     protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;

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

@@ -30,6 +30,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
     #pagingMap;
     #contextCulture;
     #locationInteractionMemoryUnique;
+    #viewInteractionMemoryUnique;
     constructor() {
         super();
         this.#mediaTreeRepository = new UmbMediaTreeRepository(this);
@@ -49,8 +50,10 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
         this._currentMediaEntity = root;
         this._isSelectionMode = false;
         this._searching = false;
+        this._currentView = 'cards';
         this.#pagingMap = new Map();
         this.#locationInteractionMemoryUnique = 'UmbMediaItemPickerLocation';
+        this.#viewInteractionMemoryUnique = 'UmbMediaItemPickerView';
         // TODO: move to search manager in context
         this.#debouncedSearch = debounce(() => {
             this.#searchMedia();
@@ -96,6 +99,10 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
                 this._searchFrom = { unique: source.unique, entityType: source.entityType };
             }
         }
+        const viewFromMemory = this.#getViewFromInteractionMemory();
+        if (viewFromMemory) {
+            this._currentView = viewFromMemory;
+        }
         await this.#loadFolderTypes();
         this.#loadChildrenOfCurrentMediaItem();
     }
@@ -166,6 +173,14 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
             }
         }
     }
+    #onViewSelect(view) {
+        this._currentView = view;
+        this.#setViewInInteractionMemory(view);
+        // TODO: This ignore is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS yet.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this._viewPopover?.hidePopover();
+    }
     // TODO: move to location manager in context
     #onOpen(item) {
         this.#clearSearch();
@@ -182,13 +197,13 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
         this.#loadChildrenOfCurrentMediaItem();
         this.#setLocationInInteractionMemory();
     }
-    #onSelected(item) {
-        const selection = this.data?.multiple ? [...this.value.selection, item.unique] : [item.unique];
+    #onSelected(unique) {
+        const selection = this.data?.multiple ? [...this.value.selection, unique] : [unique];
         this._isSelectionMode = selection.length > 0;
         this.modalContext?.setValue({ selection });
     }
-    #onDeselected(item) {
-        const selection = this.value.selection.filter((value) => value !== item.unique);
+    #onDeselected(unique) {
+        const selection = this.value.selection.filter((value) => value !== unique);
         this._isSelectionMode = selection.length > 0;
         this.modalContext?.setValue({ selection });
     }
@@ -300,6 +315,17 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
         const memory = this._pickerContext.interactionMemory.getMemory(this.#locationInteractionMemoryUnique);
         return memory?.value?.location;
     }
+    #setViewInInteractionMemory(view) {
+        const memory = {
+            unique: this.#viewInteractionMemoryUnique,
+            value: { view },
+        };
+        this._pickerContext?.interactionMemory.setMemory(memory);
+    }
+    #getViewFromInteractionMemory() {
+        const memory = this._pickerContext.interactionMemory.getMemory(this.#viewInteractionMemoryUnique);
+        return memory?.value?.view;
+    }
     render() {
         return html `
 			<umb-body-layout headline=${this.localize.term('defaultdialogs_chooseMedia')}>
@@ -328,27 +354,31 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
         return html `
 			${!this._searchResult.length && !this._searching
             ? html `<div class="container"><p>${this.localize.term('content_listViewNoItems')}</p></div>`
-            : html `<div id="media-grid">
-						${repeat(this._searchResult, (item) => item.unique, (item) => this.#renderCard(item))}
-					</div>`}
+            : this._currentView === 'table'
+                ? this.#renderTable(this._searchResult)
+                : html `<div id="media-grid">
+							${repeat(this._searchResult, (item) => item.unique, (item) => this.#renderCard(item))}
+						</div>`}
 		`;
     }
     #renderCurrentChildren() {
         return html `
 			${!this._currentChildren.length
             ? html `<div class="container"><p>${this.localize.term('content_listViewNoItems')}</p></div>`
-            : html `<div id="media-grid">
-							${repeat(this._currentChildren, (item) => item.unique, (item) => this.#renderCard(item))}
-						</div>
-						${this._currentTotalPages > 1
+            : html `${this._currentView === 'table'
+                ? this.#renderTable(this._currentChildren)
+                : html `<div id="media-grid">
+								${repeat(this._currentChildren, (item) => item.unique, (item) => this.#renderCard(item))}
+							</div>`}
+					${this._currentTotalPages > 1
                 ? html `<uui-pagination
-									.current=${this._currentPage}
-									.total=${this._currentTotalPages}
-									firstlabel=${this.localize.term('general_first')}
-									previouslabel=${this.localize.term('general_previous')}
-									nextlabel=${this.localize.term('general_next')}
-									lastlabel=${this.localize.term('general_last')}
-									@change=${this.#onPageChange}></uui-pagination>`
+								.current=${this._currentPage}
+								.total=${this._currentTotalPages}
+								firstlabel=${this.localize.term('general_first')}
+								previouslabel=${this.localize.term('general_previous')}
+								nextlabel=${this.localize.term('general_next')}
+								lastlabel=${this.localize.term('general_last')}
+								@change=${this.#onPageChange}></uui-pagination>`
                 : nothing}`}
 		`;
     }
@@ -380,6 +410,27 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 					label=${this.localize.term('general_upload')}
 					look="outline"
 					color="default"></uui-button>
+				<uui-button compact popovertarget="media-picker-view-popover" label="View">
+					<umb-icon name=${this._currentView === 'cards' ? 'icon-grid' : 'icon-table'}></umb-icon>
+				</uui-button>
+				<uui-popover-container id="media-picker-view-popover" placement="bottom-end">
+					<umb-popover-layout>
+						<div id="view-dropdown">
+							<uui-menu-item
+								label=${this.localize.term('collection_cardViewLabel')}
+								@click-label=${() => this.#onViewSelect('cards')}
+								?active=${this._currentView === 'cards'}>
+								<umb-icon slot="icon" name="icon-grid"></umb-icon>
+							</uui-menu-item>
+							<uui-menu-item
+								label=${this.localize.term('collection_tableViewLabel')}
+								@click-label=${() => this.#onViewSelect('table')}
+								?active=${this._currentView === 'table'}>
+								<umb-icon slot="icon" name="icon-table"></umb-icon>
+							</uui-menu-item>
+						</div>
+					</umb-popover-layout>
+				</uui-popover-container>
 			</div>
 		`;
     }
@@ -394,8 +445,8 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 				.name=${item.name}
 				data-mark="${item.entityType}:${item.unique}"
 				@open=${() => this.#onOpen(item)}
-				@selected=${() => this.#onSelected(item)}
-				@deselected=${() => this.#onDeselected(item)}
+				@selected=${() => this.#onSelected(item.unique)}
+				@deselected=${() => this.#onDeselected(item.unique)}
 				?selected=${this.value?.selection?.find((value) => value === item.unique)}
 				?selectable=${selectable}
 				?select-only=${this._isSelectionMode || canNavigate === false}>
@@ -406,6 +457,77 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 			</uui-card-media>
 		`;
     }
+    #buildTableItems(items) {
+        return items.map((item) => {
+            const canNavigate = this.#allowNavigateToMedia(item);
+            const selectable = this._selectableFilter(item);
+            // When not in selection mode, navigable items open on click (matching card behaviour).
+            // Mark them as non-selectable so the row doesn't intercept the click for selection.
+            const selectableInTable = this._isSelectionMode ? selectable : !canNavigate && selectable;
+            return {
+                id: item.unique,
+                icon: item.mediaType.icon,
+                selectable: selectableInTable,
+                data: [
+                    {
+                        columnAlias: 'name',
+                        value: canNavigate && !this._isSelectionMode
+                            ? html `<uui-button
+										look="default"
+										compact
+										label=${item.name}
+										@click=${(e) => {
+                                e.stopPropagation();
+                                this.#onOpen(item);
+                            }}
+										>${item.name}</uui-button
+									>`
+                            : html `<span class="table-name">${item.name}</span>`,
+                    },
+                    {
+                        columnAlias: 'createDate',
+                        value: 'createDate' in item ? this.localize.dateTime(item.createDate) : '',
+                    },
+                ],
+            };
+        });
+    }
+    #onTableSelected(event) {
+        const itemId = event.getItemId();
+        if (!itemId)
+            return;
+        this.#onSelected(itemId);
+    }
+    #onTableDeselected(event) {
+        const itemId = event.getItemId();
+        if (!itemId)
+            return;
+        this.#onDeselected(itemId);
+    }
+    #renderTable(items) {
+        const tableColumns = [
+            {
+                name: this.localize.term('general_name'),
+                alias: 'name',
+            },
+            {
+                name: this.localize.term('content_createDate'),
+                alias: 'createDate',
+            },
+        ];
+        const tableConfig = {
+            allowSelection: true,
+        };
+        return html `
+			<umb-table
+				.config=${tableConfig}
+				.columns=${tableColumns}
+				.items=${this.#buildTableItems(items)}
+				.selection=${this.value?.selection ?? []}
+				@selected=${this.#onTableSelected}
+				@deselected=${this.#onTableDeselected}></umb-table>
+		`;
+    }
     #renderBreadcrumb() {
         // hide the breadcrumb when doing a global search within another item
         // We do this to avoid confusion that the current search result is within the item shown in the breadcrumb.
@@ -458,7 +580,7 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 				padding-bottom: 5px; /** The modal is a bit jumpy due to the img card focus/hover border. This fixes the issue. */
 			}
 
-			umb-icon {
+			#media-grid umb-icon {
 				font-size: var(--uui-size-8);
 			}
 
@@ -481,6 +603,28 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbPic
 				display: block;
 				margin-top: var(--uui-size-layout-1);
 			}
+
+			.table-name {
+				flex: 1;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			#view-dropdown {
+				padding: var(--uui-size-space-3);
+				--uui-button-content-align: left;
+				--uui-menu-item-flat-structure: 1;
+			}
+
+			umb-media-picker-folder-path {
+				overflow: hidden;
+				min-width: 0;
+				flex: 1 1 0%;
+			}
+			div[slot='actions'] {
+				flex-shrink: 0;
+			}
 		`,
     ]; }
 };
@@ -520,6 +664,12 @@ __decorate([
 __decorate([
     query('#dropzone')
 ], UmbMediaPickerModalElement.prototype, "_dropzone", void 0);
+__decorate([
+    query('#media-picker-view-popover')
+], UmbMediaPickerModalElement.prototype, "_viewPopover", void 0);
+__decorate([
+    state()
+], UmbMediaPickerModalElement.prototype, "_currentView", void 0);
 UmbMediaPickerModalElement = __decorate([
     customElement('umb-media-picker-modal')
 ], UmbMediaPickerModalElement);

package/dist-cms/packages/media/media/recycle-bin/tree/media-recycle-bin-tree.store.js

@@ -13,7 +13,7 @@ export class UmbMediaRecycleBinTreeStore extends UmbUniqueTreeStore {
      * @memberof UmbMediaRecycleBinTreeStore
      */
     constructor(host) {
-        super(host, UMB_MEDIA_RECYCLE_BIN_TREE_STORE_CONTEXT.toString());
+        super(host, UMB_MEDIA_RECYCLE_BIN_TREE_STORE_CONTEXT);
     }
 }
 export { UmbMediaRecycleBinTreeStore as api };

package/dist-cms/packages/media/media/recycle-bin/tree/tree-item-children/collection/repository/media-recycle-bin-tree-item-children-collection.repository.d.ts

@@ -1,11 +1,6 @@
-import type { UmbCollectionFilterModel, UmbCollectionRepository } from '../../../../../../../core/collection/index.js';
-import { UmbRepositoryBase } from '../../../../../../../core/repository/index.js';
-export declare class UmbMediaRecycleBinTreeItemChildrenCollectionRepository extends UmbRepositoryBase implements UmbCollectionRepository {
-    #private;
-    requestCollection(filter: UmbCollectionFilterModel): Promise<{
-        data: import("../../../../../../../core/repository/index.js").UmbTargetPagedModel<import("../../../types.js").UmbMediaRecycleBinTreeItemModel> | undefined;
-        error: Error | import("../../../../../../../core/resources/index.js").UmbApiError | import("../../../../../../../core/resources/index.js").UmbCancelError | import("../../../../../../../core/resources/index.js").UmbError | undefined;
-        asObservable: () => import("rxjs").Observable<import("../../../types.js").UmbMediaRecycleBinTreeItemModel[]> | undefined;
-    }>;
+import { UmbTreeItemChildrenCollectionRepositoryBase } from '../../../../../../../core/tree/index.js';
+import type { UmbControllerHost } from '../../../../../../../../libs/controller-api/index.js';
+export declare class UmbMediaRecycleBinTreeItemChildrenCollectionRepository extends UmbTreeItemChildrenCollectionRepositoryBase {
+    constructor(host: UmbControllerHost);
 }
 export { UmbMediaRecycleBinTreeItemChildrenCollectionRepository as api };

package/dist-cms/packages/media/media/recycle-bin/tree/tree-item-children/collection/repository/media-recycle-bin-tree-item-children-collection.repository.js

@@ -1,26 +1,9 @@
-import { UmbMediaRecycleBinTreeRepository } from '../../../index.js';
-import { UmbRepositoryBase } from '../../../../../../../core/repository/index.js';
-import { UMB_ENTITY_CONTEXT } from '../../../../../../../core/entity/index.js';
-export class UmbMediaRecycleBinTreeItemChildrenCollectionRepository extends UmbRepositoryBase {
-    #treeRepository = new UmbMediaRecycleBinTreeRepository(this);
-    async requestCollection(filter) {
-        // TODO: get parent from args
-        const entityContext = await this.getContext(UMB_ENTITY_CONTEXT);
-        if (!entityContext)
-            throw new Error('Entity context not found');
-        const entityType = entityContext.getEntityType();
-        const unique = entityContext.getUnique();
-        if (!entityType)
-            throw new Error('Entity type not found');
-        if (unique === undefined)
-            throw new Error('Unique not found');
-        const parent = { entityType, unique };
-        if (parent.unique === null) {
-            return this.#treeRepository.requestTreeRootItems({ skip: filter.skip, take: filter.take });
-        }
-        else {
-            return this.#treeRepository.requestTreeItemsOf({ parent, skip: filter.skip, take: filter.take });
-        }
+import { UMB_MEDIA_RECYCLE_BIN_TREE_REPOSITORY_ALIAS } from '../../../constants.js';
+import { UmbTreeItemChildrenCollectionRepositoryBase } from '../../../../../../../core/tree/index.js';
+export class UmbMediaRecycleBinTreeItemChildrenCollectionRepository extends UmbTreeItemChildrenCollectionRepositoryBase {
+    constructor(host) {
+        super(host);
+        this._setTreeRepositoryAlias(UMB_MEDIA_RECYCLE_BIN_TREE_REPOSITORY_ALIAS);
     }
 }
 export { UmbMediaRecycleBinTreeItemChildrenCollectionRepository as api };

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

@@ -1,4 +1,5 @@
 import { UMB_MEDIA_REFERENCE_REPOSITORY_ALIAS } from './constants.js';
+import { UmbMediaReferenceResponseManagementApiDataMapping } from './media-reference-response.management-api.mapping.js';
 import { UMB_MANAGEMENT_API_DATA_SOURCE_ALIAS } from '../../../../core/repository/index.js';
 export const manifests = [
     {
@@ -11,7 +12,7 @@ export const manifests = [
         type: 'dataSourceDataMapping',
         alias: 'Umb.DataSourceDataMapping.ManagementApi.MediaReferenceResponse',
         name: 'Media Reference Response Management Api Data Mapping',
-        api: () => import('./media-reference-response.management-api.mapping.js'),
+        api: UmbMediaReferenceResponseManagementApiDataMapping,
         forDataSource: UMB_MANAGEMENT_API_DATA_SOURCE_ALIAS,
         forDataModel: 'MediaReferenceResponseModel',
     },

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

@@ -2,7 +2,6 @@ import type { UmbMediaDetailModel } from '../../types.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
 import { UmbDetailRepositoryBase } from '../../../../core/repository/index.js';
 export declare class UmbMediaDetailRepository extends UmbDetailRepositoryBase<UmbMediaDetailModel> {
-    #private;
     constructor(host: UmbControllerHost);
     /**
      * Creates a media item without showing automatic error notifications.

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

@@ -1,9 +1,8 @@
 import { UmbMediaServerDataSource } from './media-detail.server.data-source.js';
 import { UMB_MEDIA_DETAIL_STORE_CONTEXT } from './media-detail.store.context-token.js';
-import { UmbImagingRepository } from '../../../imaging/index.js';
+import { clearImagingCache } from '../../../imaging/index.js';
 import { UmbDetailRepositoryBase } from '../../../../core/repository/index.js';
 export class UmbMediaDetailRepository extends UmbDetailRepositoryBase {
-    #imagingRepository = new UmbImagingRepository(this);
     constructor(host) {
         super(host, UmbMediaServerDataSource, UMB_MEDIA_DETAIL_STORE_CONTEXT);
     }
@@ -22,8 +21,7 @@ export class UmbMediaDetailRepository extends UmbDetailRepositoryBase {
     async save(model) {
         const result = await super.save(model);
         if (!result.error) {
-            // Attempt to clear image cache
-            await this.#imagingRepository._internal_clearCropByUnique(model.unique);
+            clearImagingCache(model.unique);
         }
         return result;
     }
@@ -33,8 +31,7 @@ export class UmbMediaDetailRepository extends UmbDetailRepositoryBase {
     async delete(unique) {
         const result = await super.delete(unique);
         if (!result.error) {
-            // Attempt to clear image cache
-            await this.#imagingRepository._internal_clearCropByUnique(unique);
+            clearImagingCache(unique);
         }
         return result;
     }

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

@@ -18,15 +18,13 @@ export class UmbMediaServerDataSource extends UmbControllerBase {
      * @memberof UmbMediaServerDataSource
      */
     async createScaffold(preset = {}) {
-        let mediaTypeIcon = null;
-        let mediaTypeCollection = null;
         const mediaTypeUnique = preset.mediaType?.unique;
         if (!mediaTypeUnique) {
             throw new Error('Media type unique is missing');
         }
         const { data } = await new UmbMediaTypeDetailServerDataSource(this).read(mediaTypeUnique);
-        mediaTypeIcon = data?.icon ?? null;
-        mediaTypeCollection = data?.collection ?? null;
+        const mediaTypeIcon = data?.icon ?? null;
+        const mediaTypeCollection = data?.collection ?? null;
         const defaultData = {
             entityType: UMB_MEDIA_ENTITY_TYPE,
             unique: UmbId.new(),

package/dist-cms/packages/media/media/repository/detail/media-detail.store.js

@@ -12,7 +12,7 @@ export class UmbMediaDetailStore extends UmbDetailStoreBase {
      * @memberof UmbMediaDetailStore
      */
     constructor(host) {
-        super(host, UMB_MEDIA_DETAIL_STORE_CONTEXT.toString());
+        super(host, UMB_MEDIA_DETAIL_STORE_CONTEXT);
     }
 }
 export default UmbMediaDetailStore;

package/dist-cms/packages/media/media/repository/item/media-item.store.js

@@ -12,7 +12,7 @@ export class UmbMediaItemStore extends UmbItemStoreBase {
      * @memberof UmbMediaItemStore
      */
     constructor(host) {
-        super(host, UMB_MEDIA_ITEM_STORE_CONTEXT.toString());
+        super(host, UMB_MEDIA_ITEM_STORE_CONTEXT);
     }
 }
 export default UmbMediaItemStore;