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

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

@@ -0,0 +1,278 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { UmbMediaItemRepository, UmbMediaUrlRepository } from '../../repository/index.js';
+import { UmbMediaTreeRepository } from '../../tree/media-tree.repository.js';
+import { UMB_MEDIA_ROOT_ENTITY_TYPE } from '../../entity.js';
+import { css, html, customElement, state, repeat, ifDefined, query } from '../../../../../external/lit/index.js';
+import { debounce } from '../../../../core/utils/index.js';
+import { ImageCropModeModel } from '../../../../../external/backend-api/index.js';
+import { UmbImagingRepository } from '../../../../core/imaging/index.js';
+import { UmbModalBaseElement } from '../../../../core/modal/index.js';
+import { UMB_CONTENT_PROPERTY_CONTEXT } from '../../../../core/content/index.js';
+const root = { name: 'Media', unique: null, entityType: UMB_MEDIA_ROOT_ENTITY_TYPE };
+let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbModalBaseElement {
+    #mediaTreeRepository; // used to get file structure
+    #mediaUrlRepository; // used to get urls
+    #mediaItemRepository; // used to search
+    #imagingRepository; // used to get image renditions
+    #dataType;
+    #mediaItemsCurrentFolder;
+    constructor() {
+        super();
+        this.#mediaTreeRepository = new UmbMediaTreeRepository(this); // used to get file structure
+        this.#mediaUrlRepository = new UmbMediaUrlRepository(this); // used to get urls
+        this.#mediaItemRepository = new UmbMediaItemRepository(this); // used to search
+        this.#imagingRepository = new UmbImagingRepository(this); // used to get image renditions
+        this._filter = () => true;
+        this._selectableFilter = () => true;
+        this.#mediaItemsCurrentFolder = [];
+        this._mediaFilteredList = [];
+        this._searchOnlyThisFolder = false;
+        this._searchQuery = '';
+        this._currentMediaEntity = root;
+        this.#debouncedSearch = debounce(() => {
+            this.#filterMediaItems();
+        }, 500);
+        this.consumeContext(UMB_CONTENT_PROPERTY_CONTEXT, (context) => {
+            this.observe(context.dataType, (dataType) => {
+                this.#dataType = dataType;
+            });
+        });
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        if (this.data?.filter)
+            this._filter = this.data?.filter;
+        if (this.data?.pickableFilter)
+            this._selectableFilter = this.data?.pickableFilter;
+        if (this.data?.startNode) {
+            const { data } = await this.#mediaItemRepository.requestItems([this.data.startNode]);
+            if (data?.length) {
+                this._currentMediaEntity = { name: data[0].name, unique: data[0].unique, entityType: data[0].entityType };
+            }
+        }
+        this.#loadMediaFolder();
+    }
+    async #loadMediaFolder() {
+        const { data } = await this.#mediaTreeRepository.requestTreeItemsOf({
+            parent: {
+                unique: this._currentMediaEntity.unique,
+                entityType: this._currentMediaEntity.entityType,
+            },
+            dataType: this.#dataType,
+            skip: 0,
+            take: 100,
+        });
+        this.#mediaItemsCurrentFolder = await this.#mapMediaUrls(data?.items ?? []);
+        this.#filterMediaItems();
+    }
+    async #mapMediaUrls(items) {
+        if (!items.length)
+            return [];
+        const { data } = await this.#imagingRepository.requestResizedItems(items.map((item) => item.unique), { height: 400, width: 400, mode: ImageCropModeModel.MIN });
+        return items
+            .map((item) => {
+            const url = data?.find((media) => media.unique === item.unique)?.url;
+            return { ...item, url };
+        })
+            .filter((item) => this._filter(item));
+    }
+    #onOpen(item) {
+        this._currentMediaEntity = {
+            name: item.name,
+            unique: item.unique,
+            entityType: UMB_MEDIA_ROOT_ENTITY_TYPE,
+        };
+        this.#loadMediaFolder();
+    }
+    #onSelected(item) {
+        const selection = this.data?.multiple ? [...this.value.selection, item.unique] : [item.unique];
+        this.modalContext?.setValue({ selection });
+    }
+    #onDeselected(item) {
+        const selection = this.value.selection.filter((value) => value !== item.unique);
+        this.modalContext?.setValue({ selection });
+    }
+    async #filterMediaItems() {
+        if (!this._searchQuery) {
+            // No search query, show all media items in current folder.
+            this._mediaFilteredList = this.#mediaItemsCurrentFolder;
+            return;
+        }
+        const query = this._searchQuery;
+        const { data } = await this.#mediaItemRepository.search({ query, skip: 0, take: 100 });
+        if (!data) {
+            // No search results.
+            this._mediaFilteredList = [];
+            return;
+        }
+        if (this._searchOnlyThisFolder) {
+            // Don't have to map urls here, because we already have everything loaded within this folder.
+            this._mediaFilteredList = this.#mediaItemsCurrentFolder.filter((media) => data.find((item) => item.unique === media.unique));
+            return;
+        }
+        // Map urls for search results as we are going to show for all folders (as long they aren't trashed).
+        this._mediaFilteredList = await this.#mapMediaUrls(data.filter((found) => found.isTrashed === false));
+    }
+    #debouncedSearch;
+    #onSearch(e) {
+        this._searchQuery = e.target.value.toLocaleLowerCase();
+        this.#debouncedSearch();
+    }
+    #onPathChange(e) {
+        this._currentMediaEntity = e.target.currentMedia || {
+            unique: null,
+            entityType: UMB_MEDIA_ROOT_ENTITY_TYPE,
+        };
+        this.#loadMediaFolder();
+    }
+    render() {
+        return html `
+			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectMedia')}>
+				${this.#renderBody()} ${this.#renderPath()}
+				<div slot="actions">
+					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
+					<uui-button
+						label=${this.localize.term('general_submit')}
+						look="primary"
+						color="positive"
+						@click=${this._submitModal}></uui-button>
+				</div>
+			</umb-body-layout>
+		`;
+    }
+    #renderBody() {
+        return html `${this.#renderToolbar()}
+		<umb-dropzone id="dropzone" @change=${() => this.#loadMediaFolder()} .parentUnique=${this._currentMediaEntity.unique}></umb-dropzone>
+				${!this._mediaFilteredList.length
+            ? html `<div class="container"><p>${this.localize.term('content_listViewNoItems')}</p></div>`
+            : html `<div id="media-grid">
+								${repeat(this._mediaFilteredList, (item) => item.unique, (item) => this.#renderCard(item))}
+							</div>`}
+			</div>`;
+    }
+    #renderToolbar() {
+        /**<umb-media-picker-create-item .node=${this._currentMediaEntity.unique}></umb-media-picker-create-item>
+         * We cannot route to a workspace without the media picker modal is a routeable. Using regular upload button for now... */
+        return html `
+			<div id="toolbar">
+				<div id="search">
+					<uui-input
+						label=${this.localize.term('general_search')}
+						placeholder=${this.localize.term('placeholders_search')}
+						@input=${this.#onSearch}>
+						<uui-icon slot="prepend" name="icon-search"></uui-icon>
+					</uui-input>
+					<uui-checkbox
+						@change=${() => (this._searchOnlyThisFolder = !this._searchOnlyThisFolder)}
+						label=${this.localize.term('general_excludeFromSubFolders')}></uui-checkbox>
+				</div>
+				<uui-button
+					@click=${() => this._dropzone.browse()}
+					label=${this.localize.term('general_upload')}
+					look="primary"></uui-button>
+			</div>
+		`;
+    }
+    #renderCard(item) {
+        const disabled = !this._selectableFilter(item);
+        return html `
+			<uui-card-media
+				class=${ifDefined(disabled ? 'not-allowed' : undefined)}
+				.name=${item.name}
+				@open=${() => this.#onOpen(item)}
+				@selected=${() => this.#onSelected(item)}
+				@deselected=${() => this.#onDeselected(item)}
+				?selected=${this.value?.selection?.find((value) => value === item.unique)}
+				?selectable=${!disabled}>
+				${item.url
+            ? html `<img src=${item.url} alt=${ifDefined(item.name)} />`
+            : html `<umb-icon .name=${item.mediaType.icon}></umb-icon>`}
+			</uui-card-media>
+		`;
+    }
+    #renderPath() {
+        return html `<umb-media-picker-folder-path
+			slot="footer-info"
+			.currentMedia=${this._currentMediaEntity}
+			@change=${this.#onPathChange}></umb-media-picker-folder-path>`;
+    }
+    static { this.styles = [
+        css `
+			#toolbar {
+				display: flex;
+				gap: var(--uui-size-6);
+				align-items: flex-start;
+				margin-bottom: var(--uui-size-3);
+			}
+			#search {
+				flex: 1;
+			}
+			#search uui-input {
+				width: 100%;
+				margin-bottom: var(--uui-size-3);
+			}
+			#search uui-icon {
+				height: 100%;
+				display: flex;
+				align-items: stretch;
+				padding-left: var(--uui-size-3);
+			}
+			#media-grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+				grid-auto-rows: 150px;
+				gap: var(--uui-size-space-5);
+				padding-bottom: 5px; /** The modal is a bit jumpy due to the img card focus/hover border. This fixes the issue. */
+			}
+			umb-icon {
+				font-size: var(--uui-size-8);
+			}
+
+			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;
+			}
+
+			#actions {
+				max-width: 100%;
+			}
+
+			.not-allowed {
+				cursor: not-allowed;
+				opacity: 0.5;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbMediaPickerModalElement.prototype, "_filter", void 0);
+__decorate([
+    state()
+], UmbMediaPickerModalElement.prototype, "_selectableFilter", void 0);
+__decorate([
+    state()
+], UmbMediaPickerModalElement.prototype, "_mediaFilteredList", void 0);
+__decorate([
+    state()
+], UmbMediaPickerModalElement.prototype, "_searchOnlyThisFolder", void 0);
+__decorate([
+    state()
+], UmbMediaPickerModalElement.prototype, "_searchQuery", void 0);
+__decorate([
+    state()
+], UmbMediaPickerModalElement.prototype, "_currentMediaEntity", void 0);
+__decorate([
+    query('#dropzone')
+], UmbMediaPickerModalElement.prototype, "_dropzone", void 0);
+UmbMediaPickerModalElement = __decorate([
+    customElement('umb-media-picker-modal')
+], UmbMediaPickerModalElement);
+export { UmbMediaPickerModalElement };
+export default UmbMediaPickerModalElement;

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

@@ -0,0 +1,11 @@
+import { UmbModalToken } from '../../../../core/modal/index.js';
+export interface UmbMediaPickerModalData<ItemType> {
+    startNode?: string | null;
+    multiple?: boolean;
+    pickableFilter?: (item: ItemType) => boolean;
+    filter?: (item: ItemType) => boolean;
+}
+export type UmbMediaPickerModalValue = {
+    selection: string[];
+};
+export declare const UMB_MEDIA_PICKER_MODAL: UmbModalToken<UmbMediaPickerModalData<unknown>, UmbMediaPickerModalValue>;

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

@@ -0,0 +1,7 @@
+import { UmbModalToken } from '../../../../core/modal/index.js';
+export const UMB_MEDIA_PICKER_MODAL = new UmbModalToken('Umb.Modal.MediaPicker', {
+    modal: {
+        type: 'sidebar',
+        size: 'medium',
+    },
+});

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

@@ -0,0 +1,8 @@
+import type { UmbMediaItemModel } from '../../repository/index.js';
+import type { UmbEntityModel } from '../../../../core/entity/index.js';
+export interface UmbMediaCardItemModel extends UmbMediaItemModel {
+    url?: string;
+}
+export interface UmbMediaPathModel extends UmbEntityModel {
+    name: string;
+}

package/dist-cms/packages/media/media/modals/media-picker/types.js

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

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

@@ -1,4 +1,15 @@
+import { type UmbMediaEntityTypeUnion } from './entity.js';
 import { UmbPathPattern } from '../../core/router/index.js';
+export declare const UMB_MEDIA_WORKSPACE_PATH: string;
+export declare const UMB_CREATE_MEDIA_WORKSPACE_PATH_PATTERN: UmbPathPattern<{
+    parentEntityType: UmbMediaEntityTypeUnion;
+    parentUnique?: string | null | undefined;
+    documentTypeUnique: string;
+}, {
+    parentEntityType: UmbMediaEntityTypeUnion;
+    parentUnique?: string | null | undefined;
+    documentTypeUnique: string;
+}>;
 export declare const UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN: UmbPathPattern<{
     unique: string;
 }, {

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

@@ -1,2 +1,10 @@
+import { UMB_MEDIA_SECTION_PATHNAME } from '../paths.js';
+import { UMB_MEDIA_ENTITY_TYPE } from './entity.js';
+import { UMB_WORKSPACE_PATH_PATTERN } from '../../core/workspace/index.js';
 import { UmbPathPattern } from '../../core/router/index.js';
+export const UMB_MEDIA_WORKSPACE_PATH = UMB_WORKSPACE_PATH_PATTERN.generateAbsolute({
+    sectionName: UMB_MEDIA_SECTION_PATHNAME,
+    entityType: UMB_MEDIA_ENTITY_TYPE,
+});
+export const UMB_CREATE_MEDIA_WORKSPACE_PATH_PATTERN = new UmbPathPattern('create/parent/:parentEntityType/:parentUnique/:documentTypeUnique', UMB_MEDIA_WORKSPACE_PATH);
 export const UMB_EDIT_MEDIA_WORKSPACE_PATH_PATTERN = new UmbPathPattern('edit/:unique');

package/dist-cms/packages/media/media/property-dataset-context/media-property-dataset-context.d.ts

@@ -27,7 +27,7 @@ export declare class UmbMediaPropertyDataContext extends UmbContextBase<UmbPrope
      * Ideally do not use these methods, its better to communicate directly with the workspace, but if you do not know the property variant id, then this will figure it out for you. So good for externals to set or get values of a property.
      */
     propertyValueByAlias<ReturnType = unknown>(propertyAlias: string): Promise<import("rxjs/internal/Observable").Observable<ReturnType | undefined>>;
-    propertyValueByAliasAndCulture<ReturnType = unknown>(propertyAlias: string, propertyVariantId: UmbVariantId): Promise<import("rxjs/internal/Observable").Observable<ReturnType>>;
+    propertyValueByAliasAndVariantId<ReturnType = unknown>(propertyAlias: string, propertyVariantId: UmbVariantId): Promise<import("rxjs/internal/Observable").Observable<ReturnType>>;
     /**
      * TODO: Write proper JSDocs here.
      * Ideally do not use these methods, its better to communicate directly with the workspace, but if you do not know the property variant id, then this will figure it out for you. So good for externals to set or get values of a property.

package/dist-cms/packages/media/media/property-dataset-context/media-property-dataset-context.js

@@ -70,7 +70,7 @@ export class UmbMediaPropertyDataContext extends UmbContextBase {
             : undefined));
     }
     // TODO: Refactor: Not used currently, but should investigate if we can implement this, to spare some energy.
-    async propertyValueByAliasAndCulture(propertyAlias, propertyVariantId) {
+    async propertyValueByAliasAndVariantId(propertyAlias, propertyVariantId) {
         return this.#workspace.propertyValueByAlias(propertyAlias, propertyVariantId);
     }
     /**

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

@@ -15,6 +15,7 @@ let UmbPropertyEditorUIImageCropperElement = class UmbPropertyEditorUIImageCropp
     constructor() {
         super(...arguments);
         this.value = {
+            temporaryFileId: null,
             src: '',
             crops: [],
             focalPoint: { left: 0.5, top: 0.5 },
@@ -26,6 +27,7 @@ let UmbPropertyEditorUIImageCropperElement = class UmbPropertyEditorUIImageCropp
         if (changedProperties.has('value')) {
             if (!this.value) {
                 this.value = {
+                    temporaryFileId: null,
                     src: '',
                     crops: [],
                     focalPoint: { left: 0.5, top: 0.5 },

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

@@ -11,6 +11,7 @@ export type UmbCrop = {
  */
 export declare class UmbPropertyEditorUIImageCropsConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement {
     #private;
+    private _labelInput;
     value: UmbCrop[];
     editCropAlias: string;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -4,10 +4,11 @@ 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 { html, customElement, property, css, repeat, state } from '../../../../../external/lit/index.js';
+import { html, customElement, property, css, repeat, state, query } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbPropertyValueChangeEvent } from '../../../../core/property-editor/index.js';
+import { generateAlias } from '../../../../core/utils/index.js';
 /**
  * @element umb-property-editor-ui-image-crops-configuration
  */
@@ -17,7 +18,9 @@ let UmbPropertyEditorUIImageCropsConfigurationElement = class UmbPropertyEditorU
         //TODO MAKE TYPE
         this.value = [];
         this.editCropAlias = '';
+        this.#oldInputValue = '';
     }
+    #oldInputValue;
     #onRemove(alias) {
         this.value = [...this.value.filter((item) => item.alias !== alias)];
         this.dispatchEvent(new UmbPropertyValueChangeEvent());
@@ -77,6 +80,7 @@ let UmbPropertyEditorUIImageCropsConfigurationElement = class UmbPropertyEditorU
         }
         this.dispatchEvent(new UmbPropertyValueChangeEvent());
         form.reset();
+        this._labelInput.focus();
     }
     #renderActions() {
         return this.editCropAlias
@@ -84,6 +88,18 @@ let UmbPropertyEditorUIImageCropsConfigurationElement = class UmbPropertyEditorU
 					<uui-button look="secondary" type="submit" label="Save"></uui-button>`
             : html `<uui-button look="secondary" type="submit" label="Add"></uui-button>`;
     }
+    #onLabelInput() {
+        const value = this._labelInput.value ?? '';
+        const aliasValue = generateAlias(value);
+        const alias = this.shadowRoot?.querySelector('#alias');
+        if (!alias)
+            return;
+        const oldAliasValue = generateAlias(this.#oldInputValue);
+        if (alias.value === oldAliasValue || !alias.value) {
+            alias.value = aliasValue;
+        }
+        this.#oldInputValue = value;
+    }
     render() {
         if (!this.value)
             this.value = [];
@@ -92,7 +108,14 @@ let UmbPropertyEditorUIImageCropsConfigurationElement = class UmbPropertyEditorU
 				<form @submit=${this.#onSubmit}>
 					<div class="input">
 						<uui-label for="label">Label</uui-label>
-						<uui-input label="Label" id="label" name="label" type="text" autocomplete="false" value=""></uui-input>
+						<uui-input
+							@input=${this.#onLabelInput}
+							label="Label"
+							id="label"
+							name="label"
+							type="text"
+							autocomplete="false"
+							value=""></uui-input>
 					</div>
 					<div class="input">
 						<uui-label for="alias">Alias</uui-label>
@@ -189,6 +212,9 @@ let UmbPropertyEditorUIImageCropsConfigurationElement = class UmbPropertyEditorU
 		`,
     ]; }
 };
+__decorate([
+    query('#label')
+], UmbPropertyEditorUIImageCropsConfigurationElement.prototype, "_labelInput", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbPropertyEditorUIImageCropsConfigurationElement.prototype, "value", void 0);

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

@@ -0,0 +1 @@
+export * from './input-rich-media/index.js';

package/dist-cms/packages/media/media/property-editors/media-picker/components/index.js

@@ -0,0 +1 @@
+export * from './input-rich-media/index.js';

package/dist-cms/packages/media/media/property-editors/media-picker/components/input-rich-media/index.d.ts

@@ -0,0 +1 @@
+export * from './input-rich-media.element.js';

package/dist-cms/packages/media/media/property-editors/media-picker/components/input-rich-media/index.js

@@ -0,0 +1 @@
+export * from './input-rich-media.element.js';

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

@@ -0,0 +1,17 @@
+import type { UmbCropModel } from '../../index.js';
+import type { UmbMediaCardItemModel } from '../../../../modals/index.js';
+import { UmbInputMediaElement } from '../../../../index.js';
+declare const elementName = "umb-input-rich-media";
+export declare class UmbInputRichMediaElement extends UmbInputMediaElement {
+    #private;
+    focalPointEnabled: boolean;
+    crops?: Array<UmbCropModel>;
+    render(): import("lit-html").TemplateResult<1>;
+    protected renderItem(item: UmbMediaCardItemModel): import("lit-html").TemplateResult<1>;
+}
+export { UmbInputRichMediaElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UmbInputRichMediaElement;
+    }
+}

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

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UmbChangeEvent } from '../../../../../../core/event/index.js';
+import { customElement, html, ifDefined, property } from '../../../../../../../external/lit/index.js';
+import { UmbInputMediaElement } from '../../../../index.js';
+const elementName = 'umb-input-rich-media';
+let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbInputMediaElement {
+    constructor() {
+        super(...arguments);
+        this.focalPointEnabled = false;
+    }
+    async #onUploadCompleted(e) {
+        const completed = e.detail?.completed;
+        const uploaded = completed.map((file) => file.unique);
+        this.selection = [...this.selection, ...uploaded];
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    render() {
+        return html `${this.#renderDropzone()} ${super.render()}`;
+    }
+    #renderDropzone() {
+        if (this.items && this.items.length >= this.max)
+            return;
+        return html `<umb-dropzone @change=${this.#onUploadCompleted}></umb-dropzone>`;
+    }
+    renderItem(item) {
+        return html `
+			<uui-card-media
+				name=${ifDefined(item.name === null ? undefined : item.name)}
+				detail=${ifDefined(item.unique)}
+				href="${this.editMediaPath}edit/${item.unique}">
+				${item.url
+            ? html `<img src=${item.url} alt=${item.name} />`
+            : html `<umb-icon name=${ifDefined(item.mediaType.icon)}></umb-icon>`}
+				${this.renderIsTrashed(item)}
+				<uui-action-bar slot="actions">
+					<uui-button label="Copy media" look="secondary">
+						<uui-icon name="icon-documents"></uui-icon>
+					</uui-button>
+					<uui-button
+						label=${this.localize.term('general_remove')}
+						look="secondary"
+						@click=${() => this.onRemove(item)}>
+						<uui-icon name="icon-trash"></uui-icon>
+					</uui-button>
+				</uui-action-bar>
+			</uui-card-media>
+		`;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UmbInputRichMediaElement.prototype, "focalPointEnabled", void 0);
+__decorate([
+    property({ type: Array })
+], UmbInputRichMediaElement.prototype, "crops", void 0);
+UmbInputRichMediaElement = __decorate([
+    customElement(elementName)
+], UmbInputRichMediaElement);
+export { UmbInputRichMediaElement };
+export { UmbInputRichMediaElement as element };

package/dist-cms/packages/media/media/property-editors/media-picker/index.d.ts

@@ -7,9 +7,11 @@ export type UmbMediaPickerPropertyValue = {
         left: number;
         top: number;
     } | null;
-    crops: Array<{
-        alias: string;
-        width: number;
-        height: number;
-    }>;
+    crops: Array<UmbCropModel>;
 };
+export interface UmbCropModel {
+    label: string;
+    alias: string;
+    width: number;
+    height: number;
+}

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

@@ -1,8 +1,8 @@
-import '../../components/input-media/input-media.element.js';
 import type { UmbMediaPickerPropertyValue } from './index.js';
-import { type UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
-import type { UmbPropertyEditorUiElement } from '../../../../core/extension-registry/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import type { UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
+import type { UmbPropertyEditorUiElement } from '../../../../core/extension-registry/index.js';
+import './components/input-rich-media/input-rich-media.element.js';
 /**
  * @element umb-property-editor-ui-media-picker
  */
@@ -10,8 +10,13 @@ export declare class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement
     #private;
     set value(value: Array<UmbMediaPickerPropertyValue>);
     get value(): Array<UmbMediaPickerPropertyValue>;
+    private _startNode;
+    private _focalPointEnabled;
+    private _crops;
+    private _allowedMediaTypes;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     get config(): UmbPropertyEditorConfigCollection | undefined;
+    private _multiple;
     _items: Array<string>;
     private _limitMin;
     private _limitMax;