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

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

@@ -1,3 +1,2 @@
 import type { ManifestTypes } from '../core/extension-registry/index.js';
-import './media/components/index.js';
 export declare const manifests: Array<ManifestTypes>;

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

@@ -1,5 +1,10 @@
-import { manifests as mediaSectionManifests } from './section.manifests.js';
 import { manifests as mediaManifests } from './media/manifests.js';
+import { manifests as mediaSectionManifests } from './section.manifests.js';
 import { manifests as mediaTypesManifests } from './media-types/manifests.js';
-import './media/components/index.js';
-export const manifests = [...mediaSectionManifests, ...mediaManifests, ...mediaTypesManifests];
+import { manifests as imagingManifests } from './imaging/manifests.js';
+export const manifests = [
+    ...mediaSectionManifests,
+    ...mediaManifests,
+    ...mediaTypesManifests,
+    ...imagingManifests,
+];

package/dist-cms/packages/media/media/audit-log/repository/media-audit-log.repository.d.ts

@@ -1,5 +1,5 @@
-import type { UmbAuditLogRepository, UmbAuditLogRequestArgs } from '../../../../core/audit-log/index.js';
 import type { UmbMediaAuditLogModel } from '../types.js';
+import type { UmbAuditLogRepository, UmbAuditLogRequestArgs } from '../../../../core/audit-log/index.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
 import { UmbRepositoryBase } from '../../../../core/repository/index.js';
 /**

package/dist-cms/packages/media/media/audit-log/repository/media-audit-log.server.data-source.d.ts

@@ -1,5 +1,5 @@
-import type { UmbAuditLogDataSource, UmbAuditLogRequestArgs } from '../../../../core/audit-log/index.js';
 import type { UmbMediaAuditLogModel } from '../types.js';
+import type { UmbAuditLogDataSource, UmbAuditLogRequestArgs } from '../../../../core/audit-log/index.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
 /**
  * Server data source for the Media audit log

package/dist-cms/packages/media/media/audit-log/types.d.ts

@@ -1,4 +1,4 @@
-import type { UmbAuditLogModel } from '../../../core/audit-log/index.js';
 import type { UmbMediaAuditLogType } from './utils/index.js';
+import type { UmbAuditLogModel } from '../../../core/audit-log/index.js';
 export interface UmbMediaAuditLogModel extends UmbAuditLogModel<UmbMediaAuditLogType> {
 }

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

@@ -11,7 +11,8 @@ import { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE } from '../../entity.
 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_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
+import { UMB_WORKSPACE_MODAL } from '../../../../core/modal/index.js';
+import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
 let UmbCreateMediaCollectionActionElement = class UmbCreateMediaCollectionActionElement extends UmbLitElement {
     #mediaTypeStructureRepository;
     constructor() {

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

@@ -1,5 +1,5 @@
 import { UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS } from './views/index.js';
-import { UmbImagingRepository } from '../../../core/imaging/index.js';
+import { UmbImagingRepository } from '../../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';

package/dist-cms/packages/media/media/collection/views/grid/media-grid-collection-view.element.js

@@ -9,7 +9,8 @@ import { UMB_MEDIA_COLLECTION_CONTEXT } from '../../media-collection.context-tok
 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_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../../core/modal/index.js';
+import { UMB_WORKSPACE_MODAL } from '../../../../../core/modal/index.js';
+import { UmbModalRouteRegistrationController } from '../../../../../core/router/index.js';
 let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement extends UmbLitElement {
     #collectionContext;
     constructor() {
@@ -88,7 +89,7 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
     #renderItem(item) {
         return html `
 			<uui-card-media
-				.name=${item.name ?? 'Unnamed Media'}
+				.name=${item.name}
 				selectable
 				?select-only=${this._selection && this._selection.length > 0}
 				?selected=${this.#isSelected(item)}
@@ -96,7 +97,7 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
 				@selected=${() => this.#onSelect(item)}
 				@deselected=${() => this.#onDeselect(item)}
 				class="media-item">
-				${item.url ? html `<img src=${item.url} alt=${item.name} />` : html `<umb-icon name=${item.icon}></umb-icon>`}
+				${when(item.url, () => html `<img src=${item.url} alt=${item.name} draggable="false" />`, () => 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>

package/dist-cms/packages/media/media/collection/views/table/media-table-collection-view.element.js

@@ -9,7 +9,8 @@ import { UMB_MEDIA_COLLECTION_CONTEXT } from '../../media-collection.context-tok
 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_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../../core/modal/index.js';
+import { UMB_WORKSPACE_MODAL } from '../../../../../core/modal/index.js';
+import { UmbModalRouteRegistrationController } from '../../../../../core/router/index.js';
 import './column-layouts/media-table-column-name.element.js';
 let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionViewElement extends UmbLitElement {
     #systemColumns;

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

@@ -1,3 +1,5 @@
 import './input-media/index.js';
+export * from './input-rich-media/index.js';
 export * from './input-media/index.js';
 export * from './input-image-cropper/index.js';
+export * from './input-upload-field/index.js';

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

@@ -1,3 +1,5 @@
 import './input-media/index.js';
+export * from './input-rich-media/index.js';
 export * from './input-media/index.js';
 export * from './input-image-cropper/index.js';
+export * from './input-upload-field/index.js';

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

@@ -7,11 +7,12 @@ export declare class UmbInputImageCropperFieldElement extends UmbLitElement {
     #private;
     get value(): UmbImageCropperPropertyEditorValue | undefined;
     set value(value: UmbImageCropperPropertyEditorValue | undefined);
+    crops: UmbImageCropperCrops;
+    currentCrop?: UmbImageCropperCrop;
     file?: File;
     fileDataUrl?: string;
-    currentCrop?: UmbImageCropperCrop;
-    crops: UmbImageCropperCrops;
     focalPoint: UmbImageCropperFocalPoint;
+    hideFocalPoint: boolean;
     src: string;
     get source(): string;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;

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

@@ -15,6 +15,7 @@ let UmbInputImageCropperFieldElement = class UmbInputImageCropperFieldElement ex
         super(...arguments);
         this.crops = [];
         this.focalPoint = { left: 0.5, top: 0.5 };
+        this.hideFocalPoint = false;
         this.src = '';
         this.#onCropChange = (event) => {
             const target = event.target;
@@ -103,22 +104,31 @@ let UmbInputImageCropperFieldElement = class UmbInputImageCropperFieldElement ex
 		`;
     }
     #renderMain() {
-        return this.currentCrop
-            ? html `<umb-image-cropper
-					@change=${this.#onCropChange}
-					.src=${this.source}
+        if (this.currentCrop) {
+            return html `
+				<umb-image-cropper
 					.focalPoint=${this.focalPoint}
-					.value=${this.currentCrop}></umb-image-cropper>`
-            : html `<umb-image-cropper-focus-setter
-						@change=${this.#onFocalPointChange}
-						.focalPoint=${this.focalPoint}
-						.src=${this.source}></umb-image-cropper-focus-setter>
-					<div id="actions">
-						<slot name="actions"></slot>
-						<uui-button
-							label=${this.localize.term('content_resetFocalPoint')}
-							@click=${this.#onResetFocalPoint}></uui-button>
-					</div> `;
+					.src=${this.source}
+					.value=${this.currentCrop}
+					?hideFocalPoint=${this.hideFocalPoint}
+					@change=${this.#onCropChange}>
+				</umb-image-cropper>
+			`;
+        }
+        return html `
+			<umb-image-cropper-focus-setter
+				.focalPoint=${this.focalPoint}
+				.src=${this.source}
+				?hideFocalPoint=${this.hideFocalPoint}
+				@change=${this.#onFocalPointChange}>
+			</umb-image-cropper-focus-setter>
+			<div id="actions">
+				<slot name="actions"></slot>
+				<uui-button
+					label=${this.localize.term('content_resetFocalPoint')}
+					@click=${this.#onResetFocalPoint}></uui-button>
+			</div>
+		`;
     }
     #renderSide() {
         if (!this.value || !this.crops)
@@ -167,21 +177,24 @@ let UmbInputImageCropperFieldElement = class UmbInputImageCropperFieldElement ex
 __decorate([
     property({ attribute: false })
 ], UmbInputImageCropperFieldElement.prototype, "value", null);
+__decorate([
+    state()
+], UmbInputImageCropperFieldElement.prototype, "crops", void 0);
+__decorate([
+    state()
+], UmbInputImageCropperFieldElement.prototype, "currentCrop", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbInputImageCropperFieldElement.prototype, "file", void 0);
 __decorate([
     property()
 ], UmbInputImageCropperFieldElement.prototype, "fileDataUrl", void 0);
-__decorate([
-    state()
-], UmbInputImageCropperFieldElement.prototype, "currentCrop", void 0);
-__decorate([
-    state()
-], UmbInputImageCropperFieldElement.prototype, "crops", void 0);
 __decorate([
     state()
 ], UmbInputImageCropperFieldElement.prototype, "focalPoint", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbInputImageCropperFieldElement.prototype, "hideFocalPoint", void 0);
 __decorate([
     state()
 ], UmbInputImageCropperFieldElement.prototype, "src", void 0);

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

@@ -1,13 +1,14 @@
 import type { UmbImageCropperFocalPoint } from './index.js';
+import { nothing, LitElement } from '../../../../../external/lit/index.js';
 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;
     wrapperElement?: HTMLImageElement;
     focalPointElement: HTMLImageElement;
-    src?: string;
     focalPoint: UmbImageCropperFocalPoint;
+    hideFocalPoint: boolean;
+    src?: string;
     disconnectedCallback(): void;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;

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

@@ -5,11 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { clamp } from '../../../../core/utils/index.js';
-import { LitElement, css, html, nothing, customElement, property, query } from '../../../../../external/lit/index.js';
+import { css, customElement, html, nothing, property, query, LitElement } from '../../../../../external/lit/index.js';
 let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement extends LitElement {
     constructor() {
         super(...arguments);
         this.focalPoint = { left: 0.5, top: 0.5 };
+        // TODO: [LK] Temporary fix; to be reviewed.
+        this.hideFocalPoint = false;
         this.#DOT_RADIUS = 6;
         this.#onStartDrag = (event) => {
             event.preventDefault();
@@ -104,7 +106,7 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
         return html `
 			<div id="wrapper">
 				<img id="image" @click=${this.#onSetFocalPoint} @keydown=${() => nothing} src=${this.src} alt="" />
-				<div id="focal-point"></div>
+				<div id="focal-point" class=${this.hideFocalPoint ? 'hidden' : ''}></div>
 			</div>
 		`;
     }
@@ -143,6 +145,9 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
 			pointer-events: none;
 			background-color: white;
 		}
+		#focal-point.hidden {
+			display: none;
+		}
 	`; }
 };
 __decorate([
@@ -154,12 +159,15 @@ __decorate([
 __decorate([
     query('#focal-point')
 ], UmbImageCropperFocusSetterElement.prototype, "focalPointElement", void 0);
-__decorate([
-    property({ type: String })
-], UmbImageCropperFocusSetterElement.prototype, "src", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbImageCropperFocusSetterElement.prototype, "focalPoint", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbImageCropperFocusSetterElement.prototype, "hideFocalPoint", void 0);
+__decorate([
+    property({ type: String })
+], UmbImageCropperFocusSetterElement.prototype, "src", void 0);
 UmbImageCropperFocusSetterElement = __decorate([
     customElement('umb-image-cropper-focus-setter')
 ], UmbImageCropperFocusSetterElement);

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

@@ -1,9 +1,7 @@
-import { type UmbMediaPickerModalData, type UmbMediaPickerModalValue, type UmbMediaCardItemModel } from '../../modals/index.js';
 import type { UmbMediaItemModel } from '../../repository/item/types.js';
+import type { UmbMediaPickerModalData, UmbMediaPickerModalValue } from '../../modals/index.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, 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,27 +1,8 @@
-import { UMB_MEDIA_PICKER_MODAL, } from '../../modals/index.js';
 import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
+import { UMB_MEDIA_PICKER_MODAL } from '../../modals/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) {
         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,6 +1,6 @@
-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;
+declare const elementName = "umb-input-media";
+declare const UmbInputMediaElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
     #private;
     /**
@@ -38,22 +38,18 @@ export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
     allowedContentTypeIds?: string[] | undefined;
     showOpenButton?: boolean;
     startNode: string;
-    multiple: boolean;
     set value(idsString: string);
     get value(): string;
-    protected editMediaPath: string;
-    protected items?: Array<UmbMediaCardItemModel>;
+    private _editMediaPath;
+    private _cards;
     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;
+export { UmbInputMediaElement as element };
 declare global {
     interface HTMLElementTagNameMap {
-        'umb-input-media': UmbInputMediaElement;
+        [elementName]: UmbInputMediaElement;
     }
 }

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

@@ -5,15 +5,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbMediaPickerContext } from './input-media.context.js';
-import { css, html, customElement, property, state, ifDefined, repeat } from '../../../../../external/lit/index.js';
+import { UmbImagingRepository } from '../../../imaging/index.js';
+import { css, customElement, html, ifDefined, property, repeat, state } from '../../../../../external/lit/index.js';
 import { splitStringToArray } from '../../../../core/utils/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UmbModalRouteRegistrationController, UMB_WORKSPACE_MODAL } from '../../../../core/modal/index.js';
+import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { UMB_WORKSPACE_MODAL } from '../../../../core/modal/index.js';
 import { UUIFormControlMixin } from '../../../../../external/uui/index.js';
+const elementName = 'umb-input-media';
 let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '') {
     #sorter;
+    #sortCards(model) {
+        const idToIndexMap = {};
+        model.forEach((item, index) => {
+            idToIndexMap[item] = index;
+        });
+        const cards = [...this._cards];
+        this._cards = cards.sort((a, b) => idToIndexMap[a.unique] - idToIndexMap[b.unique]);
+    }
     /**
      * This is a minimum amount of selected items in this input.
      * @type {number}
@@ -46,13 +57,13 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
         return this.#pickerContext.getSelection();
     }
     set value(idsString) {
-        // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
         this.selection = splitStringToArray(idsString);
     }
     get value() {
         return this.selection.join(',');
     }
     #pickerContext;
+    #imagingRepository;
     constructor() {
         super();
         this.#sorter = new UmbSorterController(this, {
@@ -69,6 +80,7 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
             resolvePlacement: () => false,
             onChange: ({ model }) => {
                 this.selection = model;
+                this.#sortCards(model);
                 this.dispatchEvent(new UmbChangeEvent());
             },
         });
@@ -87,9 +99,10 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
         this.startNode = '';
-        this.multiple = false;
-        this.editMediaPath = '';
+        this._editMediaPath = '';
+        this._cards = [];
         this.#pickerContext = new UmbMediaPickerContext(this);
+        this.#imagingRepository = new UmbImagingRepository(this);
         this.#pickableFilter = (item) => {
             if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
                 return this.allowedContentTypeIds.includes(item.mediaType.unique);
@@ -102,11 +115,26 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
             return { data: { entityType: 'media', preset: {} } };
         })
             .observeRouteBuilder((routeBuilder) => {
-            this.editMediaPath = routeBuilder({});
+            this._editMediaPath = routeBuilder({});
         });
         this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')));
-        this.observe(this.#pickerContext.cardItems, (cardItems) => {
-            this.items = cardItems;
+        this.observe(this.#pickerContext.selectedItems, async (selectedItems) => {
+            const missingCards = selectedItems.filter((item) => !this._cards.find((card) => card.unique === item.unique));
+            if (!missingCards.length)
+                return;
+            if (!selectedItems?.length) {
+                this._cards = [];
+                return;
+            }
+            const uniques = selectedItems.map((x) => x.unique);
+            const { data: thumbnails } = await this.#imagingRepository.requestThumbnailUrls(uniques, 400, 400);
+            this._cards = selectedItems.map((item) => {
+                const thumbnail = thumbnails?.find((x) => x.unique === item.unique);
+                return {
+                    ...item,
+                    src: thumbnail?.url,
+                };
+            });
         });
         this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && this.#pickerContext.getSelection().length < this.min);
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this.#pickerContext.getSelection().length > this.max);
@@ -117,24 +145,26 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
     #pickableFilter;
     #openPicker() {
         this.#pickerContext.openPicker({
-            multiple: this.multiple,
+            multiple: this.max > 1,
             startNode: this.startNode,
             pickableFilter: this.#pickableFilter,
         });
     }
-    onRemove(item) {
+    #onRemove(item) {
         this.#pickerContext.requestRemoveItem(item.unique);
     }
     render() {
         return html `<div class="container">${this.#renderItems()} ${this.#renderAddButton()}</div>`;
     }
     #renderItems() {
-        if (!this.items?.length)
+        if (!this._cards?.length)
             return;
-        return html `${repeat(this.items, (item) => item.unique, (item) => this.renderItem(item))}`;
+        return html `
+			${repeat(this._cards, (item) => item.unique, (item) => this.#renderItem(item))}
+		`;
     }
     #renderAddButton() {
-        if ((this.items && this.max && this.items.length >= this.max) || (this.items?.length && !this.multiple))
+        if (this._cards && this.max && this._cards.length >= this.max)
             return;
         return html `
 			<uui-button
@@ -147,28 +177,28 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
 			</uui-button>
 		`;
     }
-    renderItem(item) {
+    #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} />`
+				href="${this._editMediaPath}edit/${item.unique}">
+				${item.src
+            ? html `<img src=${item.src} alt=${item.name} />`
             : html `<umb-icon name=${ifDefined(item.mediaType.icon)}></umb-icon>`}
-				${this.renderIsTrashed(item)}
+				${this.#renderIsTrashed(item)}
 				<uui-action-bar slot="actions">
 					<uui-button
 						label=${this.localize.term('general_remove')}
 						look="secondary"
-						@click=${() => this.onRemove(item)}>
+						@click=${() => this.#onRemove(item)}>
 						<uui-icon name="icon-trash"></uui-icon>
 					</uui-button>
 				</uui-action-bar>
 			</uui-card-media>
 		`;
     }
-    renderIsTrashed(item) {
+    #renderIsTrashed(item) {
         if (!item.isTrashed)
             return;
         return html `
@@ -184,9 +214,9 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
 			}
 			.container {
 				display: grid;
-				gap: var(--uui-size-space-3);
 				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 				grid-auto-rows: 150px;
+				gap: var(--uui-size-space-5);
 			}
 
 			#btn-add {
@@ -206,6 +236,11 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
 			uui-card-media[drag-placeholder] {
 				opacity: 0.2;
 			}
+			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;
+			}
 		`,
     ]; }
 };
@@ -230,20 +265,17 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UmbInputMediaElement.prototype, "startNode", void 0);
-__decorate([
-    property({ type: Boolean })
-], UmbInputMediaElement.prototype, "multiple", void 0);
 __decorate([
     property()
 ], UmbInputMediaElement.prototype, "value", null);
 __decorate([
     state()
-], UmbInputMediaElement.prototype, "editMediaPath", void 0);
+], UmbInputMediaElement.prototype, "_editMediaPath", void 0);
 __decorate([
     state()
-], UmbInputMediaElement.prototype, "items", void 0);
+], UmbInputMediaElement.prototype, "_cards", void 0);
 UmbInputMediaElement = __decorate([
-    customElement('umb-input-media')
+    customElement(elementName)
 ], UmbInputMediaElement);
 export { UmbInputMediaElement };
-export default UmbInputMediaElement;
+export { UmbInputMediaElement as element };

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

@@ -0,0 +1,5 @@
+import type { UmbMediaCardItemModel } from '../../modals/index.js';
+export * from './input-rich-media.element.js';
+export interface UmbRichMediaItemModel extends UmbMediaCardItemModel {
+    src: string;
+}

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

@@ -0,0 +1,62 @@
+import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../../property-editors/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import type { UmbVariantId } from '../../../../core/variant/index.js';
+declare const elementName = "umb-input-rich-media";
+declare const UmbInputRichMediaElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
+export declare class UmbInputRichMediaElement extends UmbInputRichMediaElement_base {
+    #private;
+    /**
+     * This is a minimum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default 0
+     */
+    min: number;
+    /**
+     * Min validation message.
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    minMessage: string;
+    /**
+     * This is a maximum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default Infinity
+     */
+    max: number;
+    /**
+     * Max validation message.
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    maxMessage: string;
+    set items(value: Array<UmbMediaPickerPropertyValue>);
+    get items(): Array<UmbMediaPickerPropertyValue>;
+    allowedContentTypeIds?: string[] | undefined;
+    startNode: string;
+    multiple: boolean;
+    get value(): string;
+    set preselectedCrops(value: Array<UmbCropModel>);
+    get preselectedCrops(): Array<UmbCropModel>;
+    set focalPointEnabled(value: boolean);
+    get focalPointEnabled(): boolean;
+    set alias(value: string | undefined);
+    get alias(): string | undefined;
+    set variantId(value: string | UmbVariantId | undefined);
+    get variantId(): string | undefined;
+    private _cards;
+    private _routeBuilder?;
+    constructor();
+    protected getFormElement(): undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbInputRichMediaElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UmbInputRichMediaElement;
+    }
+}