@umbraco-cms/backoffice 14.0.0-rc3 → 14.0.0-rc4

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

@@ -4,11 +4,13 @@ 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_COLLECTION_CONTEXT } from '../media-collection.context-token.js';
+import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../workspace/index.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 { UmbMediaTypeStructureRepository } from '../../../media-types/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UMB_COLLECTION_CONTEXT } from '../../../../core/collection/index.js';
-import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../index.js';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
 let UmbCreateMediaCollectionActionElement = class UmbCreateMediaCollectionActionElement extends UmbLitElement {
     #mediaTypeStructureRepository;
@@ -17,7 +19,6 @@ let UmbCreateMediaCollectionActionElement = class UmbCreateMediaCollectionAction
         this._allowedMediaTypes = [];
         this._createMediaPath = '';
         this._popoverOpen = false;
-        this._useInfiniteEditor = false;
         this.#mediaTypeStructureRepository = new UmbMediaTypeStructureRepository(this);
         new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
             .addAdditionalPath('media')
@@ -35,9 +36,12 @@ let UmbCreateMediaCollectionActionElement = class UmbCreateMediaCollectionAction
                 this._mediaTypeUnique = mediaTypeUnique;
             });
         });
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (collectionContext) => {
-            this.observe(collectionContext.filter, (filter) => {
-                this._useInfiniteEditor = filter.useInfiniteEditor == true;
+        this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (collectionContext) => {
+            this.observe(collectionContext.view.currentView, (currentView) => {
+                this._currentView = currentView?.meta.pathName;
+            });
+            this.observe(collectionContext.view.rootPathName, (rootPathName) => {
+                this._rootPathName = rootPathName;
             });
         });
     }
@@ -56,12 +60,13 @@ let UmbCreateMediaCollectionActionElement = class UmbCreateMediaCollectionAction
     #onPopoverToggle(event) {
         this._popoverOpen = event.newState === 'open';
     }
-    #getCreateUrl(mediaType) {
-        // TODO: [LK] I need help with this. I don't know what the infinity editor URL should be.
-        const mediaEntityType = 'media-root'; // TODO: this should be dynamic
-        return this._useInfiniteEditor
-            ? `${this._createMediaPath}create/${this._mediaUnique ?? 'null'}/${mediaType.unique}`
-            : `section/media/workspace/media/create/parent/${mediaEntityType}/${this._mediaUnique ?? 'null'}/${mediaType.unique}`;
+    #getCreateUrl(item) {
+        return (this._createMediaPath.replace(`${this._rootPathName}`, `${this._rootPathName}/${this._currentView}`) +
+            UMB_CREATE_MEDIA_WORKSPACE_PATH_PATTERN.generateLocal({
+                parentEntityType: this._mediaUnique ? UMB_MEDIA_ENTITY_TYPE : UMB_MEDIA_ROOT_ENTITY_TYPE,
+                parentUnique: this._mediaUnique ?? 'null',
+                documentTypeUnique: item.unique,
+            }));
     }
     render() {
         return this._allowedMediaTypes.length !== 1 ? this.#renderDropdown() : this.#renderCreateButton();
@@ -80,7 +85,9 @@ let UmbCreateMediaCollectionActionElement = class UmbCreateMediaCollectionAction
     #renderDropdown() {
         if (!this._allowedMediaTypes.length)
             return;
-        const label = this.manifest?.meta.label ?? this.localize.term('general_create');
+        const label = this.manifest?.meta.label
+            ? this.localize.string(this.manifest.meta.label)
+            : this.manifest?.name ?? '';
         return html `
 			<uui-button popovertarget="collection-action-menu-popover" label=${label} color="default" look="outline">
 				${label}
@@ -109,6 +116,9 @@ __decorate([
 __decorate([
     state()
 ], UmbCreateMediaCollectionActionElement.prototype, "_createMediaPath", void 0);
+__decorate([
+    state()
+], UmbCreateMediaCollectionActionElement.prototype, "_currentView", void 0);
 __decorate([
     state()
 ], UmbCreateMediaCollectionActionElement.prototype, "_mediaUnique", void 0);
@@ -120,7 +130,7 @@ __decorate([
 ], UmbCreateMediaCollectionActionElement.prototype, "_popoverOpen", void 0);
 __decorate([
     state()
-], UmbCreateMediaCollectionActionElement.prototype, "_useInfiniteEditor", void 0);
+], UmbCreateMediaCollectionActionElement.prototype, "_rootPathName", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbCreateMediaCollectionActionElement.prototype, "manifest", void 0);

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

@@ -7,7 +7,7 @@ export const createManifest = {
     element: () => import('./create-media-collection-action.element.js'),
     weight: 100,
     meta: {
-        label: 'Create',
+        label: '#general_create',
     },
     conditions: [
         {

package/dist-cms/packages/media/media/collection/media-collection-toolbar.element.js

@@ -4,16 +4,16 @@ 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_COLLECTION_CONTEXT } from './media-collection.context-token.js';
 import { css, html, customElement } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
-import { UMB_COLLECTION_CONTEXT } from '../../../core/collection/index.js';
 let UmbMediaCollectionToolbarElement = class UmbMediaCollectionToolbarElement extends UmbLitElement {
     #collectionContext;
     #inputTimer;
     #inputTimerAmount = 500;
     constructor() {
         super();
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+        this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (instance) => {
             this.#collectionContext = instance;
         });
     }

package/dist-cms/packages/media/media/collection/media-collection.context-token.d.ts

@@ -0,0 +1,3 @@
+import type { UmbMediaCollectionContext } from './media-collection.context.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+export declare const UMB_MEDIA_COLLECTION_CONTEXT: UmbContextToken<UmbMediaCollectionContext, UmbMediaCollectionContext>;

package/dist-cms/packages/media/media/collection/media-collection.context-token.js

@@ -0,0 +1,2 @@
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+export const UMB_MEDIA_COLLECTION_CONTEXT = new UmbContextToken('UmbCollectionContext');

package/dist-cms/packages/media/media/collection/media-collection.context.d.ts

@@ -2,5 +2,7 @@ import type { UmbMediaCollectionFilterModel, UmbMediaCollectionItemModel } from
 import { UmbDefaultCollectionContext } from '../../../core/collection/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 export declare class UmbMediaCollectionContext extends UmbDefaultCollectionContext<UmbMediaCollectionItemModel, UmbMediaCollectionFilterModel> {
+    #private;
+    readonly thumbnailItems: import("rxjs/internal/Observable").Observable<UmbMediaCollectionItemModel[]>;
     constructor(host: UmbControllerHost);
 }

package/dist-cms/packages/media/media/collection/media-collection.context.js

@@ -1,7 +1,24 @@
 import { UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS } from './views/index.js';
+import { UmbImagingRepository } from '../../../core/imaging/index.js';
+import { UmbArrayState } from '../../../../libs/observable-api/index.js';
 import { UmbDefaultCollectionContext } from '../../../core/collection/index.js';
+import { ImageCropModeModel } from '../../../../external/backend-api/index.js';
 export class UmbMediaCollectionContext extends UmbDefaultCollectionContext {
+    #imagingRepository;
+    #thumbnailItems;
     constructor(host) {
         super(host, UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS);
+        this.#thumbnailItems = new UmbArrayState([], (x) => x);
+        this.thumbnailItems = this.#thumbnailItems.asObservable();
+        this.#imagingRepository = new UmbImagingRepository(host);
+        this.observe(this.items, async (items) => {
+            if (!items?.length)
+                return;
+            const { data } = await this.#imagingRepository.requestResizedItems(items.map((m) => m.unique), { height: 400, width: 400, mode: ImageCropModeModel.MIN });
+            this.#thumbnailItems.setValue(items.map((item) => {
+                const thumbnail = data?.find((m) => m.unique === item.unique)?.url;
+                return { ...item, url: thumbnail };
+            }));
+        });
     }
 }

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

@@ -4,15 +4,16 @@ 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_COLLECTION_CONTEXT } from './media-collection.context-token.js';
 import { customElement, html, state, when } from '../../../../external/lit/index.js';
-import { UMB_COLLECTION_CONTEXT, UmbCollectionDefaultElement } from '../../../core/collection/index.js';
+import { UmbCollectionDefaultElement } from '../../../core/collection/index.js';
 import './media-collection-toolbar.element.js';
 let UmbMediaCollectionElement = class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
     #mediaCollection;
     constructor() {
         super();
         this._progress = -1;
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+        this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (instance) => {
             this.#mediaCollection = instance;
         });
     }
@@ -27,7 +28,7 @@ let UmbMediaCollectionElement = class UmbMediaCollectionElement extends UmbColle
         return html `
 			<umb-media-collection-toolbar slot="header"></umb-media-collection-toolbar>
 			${when(this._progress >= 0, () => html `<uui-loader-bar progress=${this._progress}></uui-loader-bar>`)}
-			<umb-dropzone-media @change=${this.#onChange} @progress=${this.#onProgress}></umb-dropzone-media>
+			<umb-dropzone @change=${this.#onChange} @progress=${this.#onProgress}></umb-dropzone>
 		`;
     }
 };

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

@@ -25,6 +25,7 @@ export interface UmbMediaCollectionItemModel {
         alias: string;
         value: string;
     }>;
+    url?: string;
 }
 export interface UmbEditableMediaCollectionItemModel {
     item: UmbMediaCollectionItemModel;

package/dist-cms/packages/media/media/collection/views/grid/media-grid-collection-view.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 { UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN } from '../../../paths.js';
+import { UMB_MEDIA_COLLECTION_CONTEXT } from '../../media-collection.context-token.js';
 import { css, customElement, html, nothing, repeat, state, when } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
-import { UMB_COLLECTION_CONTEXT } from '../../../../../core/collection/index.js';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../../core/modal/index.js';
 let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement extends UmbLitElement {
     #collectionContext;
@@ -18,7 +18,7 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
         this._items = [];
         this._loading = false;
         this._selection = [];
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (collectionContext) => {
+        this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (collectionContext) => {
             this.#collectionContext = collectionContext;
             this.#observeCollectionContext();
         });
@@ -41,7 +41,7 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
         if (!this.#collectionContext)
             return;
         this.observe(this.#collectionContext.loading, (loading) => (this._loading = loading), '_observeLoading');
-        this.observe(this.#collectionContext.items, (items) => (this._items = items), '_observeItems');
+        this.observe(this.#collectionContext.thumbnailItems, (items) => (this._items = items), '_observeItems');
         this.observe(this.#collectionContext.selection.selection, (selection) => (this._selection = selection), '_observeSelection');
     }
     #onOpen(event, unique) {
@@ -86,7 +86,6 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
 		`;
     }
     #renderItem(item) {
-        // TODO: Fix the file extension when media items have a file extension. [?]
         return html `
 			<uui-card-media
 				.name=${item.name ?? 'Unnamed Media'}
@@ -96,8 +95,8 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
 				@open=${(event) => this.#onOpen(event, item.unique)}
 				@selected=${() => this.#onSelect(item)}
 				@deselected=${() => this.#onDeselect(item)}
-				class="media-item"
-				file-ext="${item.icon}">
+				class="media-item">
+				${item.url ? html `<img src=${item.url} alt=${item.name} />` : html `<umb-icon name=${item.icon}></umb-icon>`}
 				<!-- TODO: [LK] I'd like to indicate a busy state when bulk actions are triggered. -->
 				<!-- <div class="container"><uui-loader></uui-loader></div> -->
 			</uui-card-media>
@@ -120,9 +119,19 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
 			#media-grid {
 				display: grid;
 				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-				grid-template-rows: repeat(auto-fill, 200px);
+				grid-auto-rows: 200px;
 				gap: var(--uui-size-space-5);
 			}
+
+			img {
+				background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".1"><path d="M50 0h50v50H50zM0 50h50v50H0z"/></svg>');
+				background-size: 10px 10px;
+				background-repeat: repeat;
+			}
+
+			umb-icon {
+				font-size: var(--uui-size-8);
+			}
 		`,
     ]; }
 };

package/dist-cms/packages/media/media/collection/views/table/media-table-collection-view.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 { UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN } from '../../../paths.js';
+import { UMB_MEDIA_COLLECTION_CONTEXT } from '../../media-collection.context-token.js';
 import { css, customElement, html, nothing, state, when } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
-import { UMB_COLLECTION_CONTEXT } from '../../../../../core/collection/index.js';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../../core/modal/index.js';
 import './column-layouts/media-table-column-name.element.js';
 let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionViewElement extends UmbLitElement {
@@ -32,7 +32,7 @@ let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionViewElemen
         ];
         this._tableItems = [];
         this._selection = [];
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (collectionContext) => {
+        this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (collectionContext) => {
             this.#collectionContext = collectionContext;
         });
         this.#registerModalRoute();
@@ -190,7 +190,6 @@ let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionViewElemen
 				box-sizing: border-box;
 				height: auto;
 				width: 100%;
-				padding: var(--uui-size-space-3) var(--uui-size-space-6);
 			}
 
 			.container {

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

@@ -1,4 +1,3 @@
 import './input-media/index.js';
-export * from './dropzone-media/index.js';
 export * from './input-media/index.js';
 export * from './input-image-cropper/index.js';

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

@@ -1,4 +1,3 @@
 import './input-media/index.js';
-export * from './dropzone-media/index.js';
 export * from './input-media/index.js';
 export * from './input-image-cropper/index.js';

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.d.ts

@@ -3,14 +3,14 @@ import type { PropertyValueMap } from '../../../../../external/lit/index.js';
 import { LitElement, nothing } from '../../../../../external/lit/index.js';
 export declare class UmbImageCropperFocusSetterElement extends LitElement {
     #private;
-    imageElement?: HTMLImageElement;
+    imageElement: HTMLImageElement;
     wrapperElement?: HTMLImageElement;
-    focalPointElement?: HTMLImageElement;
+    focalPointElement: HTMLImageElement;
     src?: string;
     focalPoint: UmbImageCropperFocalPoint;
-    connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult;

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

@@ -25,10 +25,6 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
         };
     }
     #DOT_RADIUS;
-    connectedCallback() {
-        super.connectedCallback();
-        this.#addEventListeners();
-    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.#removeEventListeners();
@@ -40,30 +36,38 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
             this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
         }
     }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('src')) {
+            if (this.src) {
+                this.#initializeImage();
+            }
+        }
+    }
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
         this.style.setProperty('--dot-radius', `${this.#DOT_RADIUS}px`);
-        if (this.focalPointElement) {
-            this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
-            this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
-        }
-        if (this.imageElement) {
-            this.imageElement.onload = () => {
-                if (!this.imageElement || !this.wrapperElement)
-                    return;
-                const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
-                const hostRect = this.getBoundingClientRect();
-                const image = this.imageElement.getBoundingClientRect();
-                if (image.width > hostRect.width) {
-                    this.imageElement.style.width = '100%';
-                }
-                if (image.height > hostRect.height) {
-                    this.imageElement.style.height = '100%';
-                }
-                this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
-                this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
-            };
-        }
+    }
+    async #initializeImage() {
+        await this.updateComplete; // Wait for the @query to be resolved
+        this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
+        this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
+        this.imageElement.onload = () => {
+            if (!this.imageElement || !this.wrapperElement)
+                return;
+            const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
+            const hostRect = this.getBoundingClientRect();
+            const image = this.imageElement.getBoundingClientRect();
+            if (image.width > hostRect.width) {
+                this.imageElement.style.width = '100%';
+            }
+            if (image.height > hostRect.height) {
+                this.imageElement.style.height = '100%';
+            }
+            this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
+            this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
+        };
+        this.#addEventListeners();
     }
     async #addEventListeners() {
         await this.updateComplete; // Wait for the @query to be resolved
@@ -116,6 +120,7 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
 		}
 		/* Wrapper is used to make the focal point position responsive to the image size */
 		#wrapper {
+			overflow: hidden;
 			position: relative;
 			display: flex;
 			margin: auto;

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

@@ -28,10 +28,7 @@ let UmbImageCropperPreviewElement = class UmbImageCropperPreviewElement extends
         if (!this.crop)
             return;
         await this.updateComplete; // Wait for the @query to be resolved
-        if (!this.imageElement.complete) {
-            // Wait for the image to load
-            await new Promise((resolve) => (this.imageElement.onload = () => resolve(this.imageElement)));
-        }
+        await new Promise((resolve) => (this.imageElement.onload = () => resolve(this.imageElement)));
         const container = this.imageContainerElement.getBoundingClientRect();
         const cropAspectRatio = this.crop.width / this.crop.height;
         const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { calculateExtrapolatedValue, clamp, inverseLerp, lerp } from '../../../../core/utils/index.js';
-import { customElement, property, query, state, LitElement, css, html, } from '../../../../../external/lit/index.js';
+import { customElement, property, query, state, LitElement, css, html } from '../../../../../external/lit/index.js';
 let UmbImageCropperElement = class UmbImageCropperElement extends LitElement {
     constructor() {
         super(...arguments);
@@ -324,6 +324,7 @@ let UmbImageCropperElement = class UmbImageCropperElement extends LitElement {
 		#image {
 			display: block;
 			position: absolute;
+			user-select: none;
 		}
 
 		#slider {

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

@@ -19,16 +19,17 @@ let UmbInputImageCropperElement = class UmbInputImageCropperElement extends UmbL
     constructor() {
         super();
         this.value = {
+            temporaryFileId: null,
             src: '',
             crops: [],
             focalPoint: { left: 0.5, top: 0.5 },
         };
         this.crops = [];
         this.#onRemove = () => {
-            this.value = assignToFrozenObject(this.value, { src: '' });
-            if (!this.fileUnique)
-                return;
-            this.#manager?.removeOne(this.fileUnique);
+            this.value = assignToFrozenObject(this.value, { src: '', temporaryFileId: null });
+            if (this.fileUnique) {
+                this.#manager?.removeOne(this.fileUnique);
+            }
             this.fileUnique = undefined;
             this.file = undefined;
             this.dispatchEvent(new UmbChangeEvent());
@@ -45,8 +46,8 @@ let UmbInputImageCropperElement = class UmbInputImageCropperElement extends UmbL
         const unique = UmbId.new();
         this.file = file;
         this.fileUnique = unique;
-        this.value = assignToFrozenObject(this.value, { src: unique });
-        this.#manager?.uploadOne({ unique, file });
+        this.value = assignToFrozenObject(this.value, { temporaryFileId: unique });
+        this.#manager?.uploadOne({ temporaryUnique: unique, file });
         this.dispatchEvent(new UmbChangeEvent());
     }
     #onBrowse() {
@@ -86,7 +87,7 @@ let UmbInputImageCropperElement = class UmbInputImageCropperElement extends UmbL
     #onChange(e) {
         const value = e.target.value;
         if (!value) {
-            this.value = { src: '', crops: [], focalPoint: { left: 0.5, top: 0.5 } };
+            this.value = { src: '', crops: [], focalPoint: { left: 0.5, top: 0.5 }, temporaryFileId: null };
             this.dispatchEvent(new UmbChangeEvent());
             return;
         }

package/dist-cms/packages/media/media/components/input-image-cropper/types.d.ts

@@ -1,4 +1,5 @@
 export type UmbImageCropperPropertyEditorValue = {
+    temporaryFileId?: string | null;
     crops: Array<{
         alias: string;
         coordinates?: {

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

@@ -1,6 +1,9 @@
+import { type UmbMediaPickerModalData, type UmbMediaPickerModalValue, type UmbMediaCardItemModel } from '../../modals/index.js';
 import type { UmbMediaItemModel } from '../../repository/item/types.js';
 import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
-export declare class UmbMediaPickerContext extends UmbPickerInputContext<UmbMediaItemModel> {
+export declare class UmbMediaPickerContext extends UmbPickerInputContext<UmbMediaItemModel, UmbMediaItemModel, UmbMediaPickerModalData<UmbMediaItemModel>, UmbMediaPickerModalValue> {
+    #private;
+    readonly cardItems: import("rxjs/internal/Observable").Observable<UmbMediaCardItemModel[]>;
     constructor(host: UmbControllerHost);
 }

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

@@ -1,10 +1,27 @@
+import { UMB_MEDIA_PICKER_MODAL, } from '../../modals/index.js';
 import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
-import { UMB_MEDIA_TREE_PICKER_MODAL } from '../../tree/index.js';
 import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
+import { UmbArrayState } from '../../../../../libs/observable-api/index.js';
+import { UmbImagingRepository } from '../../../../core/imaging/index.js';
+import { ImageCropModeModel } from '../../../../../external/backend-api/index.js';
 export class UmbMediaPickerContext extends UmbPickerInputContext {
+    #imagingRepository;
+    #cardItems;
     constructor(host) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        super(host, UMB_MEDIA_ITEM_REPOSITORY_ALIAS, UMB_MEDIA_TREE_PICKER_MODAL);
+        super(host, UMB_MEDIA_ITEM_REPOSITORY_ALIAS, UMB_MEDIA_PICKER_MODAL);
+        this.#cardItems = new UmbArrayState([], (x) => x.unique);
+        this.cardItems = this.#cardItems.asObservable();
+        this.#imagingRepository = new UmbImagingRepository(host);
+        this.observe(this.selectedItems, async (selectedItems) => {
+            if (!selectedItems?.length) {
+                this.#cardItems.setValue([]);
+                return;
+            }
+            const { data } = await this.#imagingRepository.requestResizedItems(selectedItems.map((x) => x.unique), { height: 400, width: 400, mode: ImageCropModeModel.MIN });
+            this.#cardItems.setValue(selectedItems.map((item) => {
+                const url = data?.find((x) => x.unique === item.unique)?.url;
+                return { ...item, url };
+            }));
+        });
     }
 }

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

@@ -1,3 +1,4 @@
+import type { UmbMediaCardItemModel } from '../../modals/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 declare const UmbInputMediaElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").UUIFormControlMixinInterface<FormDataEntryValue | FormData, string>) & typeof UmbLitElement;
 export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
@@ -36,14 +37,18 @@ export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
     get selection(): Array<string>;
     allowedContentTypeIds?: string[] | undefined;
     showOpenButton?: boolean;
-    ignoreUserStartNodes?: boolean;
+    startNode: string;
+    multiple: boolean;
     set value(idsString: string);
     get value(): string;
-    private _editMediaPath;
-    private _items?;
+    protected editMediaPath: string;
+    protected items?: Array<UmbMediaCardItemModel>;
     constructor();
     protected getFormElement(): undefined;
+    protected onRemove(item: UmbMediaCardItemModel): void;
     render(): import("lit-html").TemplateResult<1>;
+    protected renderItem(item: UmbMediaCardItemModel): import("lit-html").TemplateResult<1>;
+    protected renderIsTrashed(item: UmbMediaCardItemModel): import("lit-html").TemplateResult<1> | undefined;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbInputMediaElement;