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

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();
@@ -25,10 +27,6 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
         };
     }
     #DOT_RADIUS;
-    connectedCallback() {
-        super.connectedCallback();
-        this.#addEventListeners();
-    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.#removeEventListeners();
@@ -40,30 +38,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
@@ -100,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>
 		`;
     }
@@ -116,6 +122,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;
@@ -138,6 +145,9 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
 			pointer-events: none;
 			background-color: white;
 		}
+		#focal-point.hidden {
+			display: none;
+		}
 	`; }
 };
 __decorate([
@@ -149,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-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,7 @@
 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> {
+export declare class UmbMediaPickerContext extends UmbPickerInputContext<UmbMediaItemModel, UmbMediaItemModel, UmbMediaPickerModalData<UmbMediaItemModel>, UmbMediaPickerModalValue> {
     constructor(host: UmbControllerHost);
 }

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

@@ -1,10 +1,8 @@
 import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
-import { UMB_MEDIA_TREE_PICKER_MODAL } from '../../tree/index.js';
+import { UMB_MEDIA_PICKER_MODAL } from '../../modals/index.js';
 import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
 export class UmbMediaPickerContext extends UmbPickerInputContext {
     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);
     }
 }

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

@@ -1,5 +1,6 @@
 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;
     /**
@@ -36,19 +37,19 @@ export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
     get selection(): Array<string>;
     allowedContentTypeIds?: string[] | undefined;
     showOpenButton?: boolean;
-    ignoreUserStartNodes?: boolean;
+    startNode: string;
     set value(idsString: string);
     get value(): string;
     private _editMediaPath;
-    private _items?;
+    private _cards;
     constructor();
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;
     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, {
@@ -65,8 +76,11 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
             identifier: 'Umb.SorterIdentifier.InputMedia',
             itemSelector: 'uui-card-media',
             containerSelector: '.container',
+            /** TODO: This component probably needs some grid-like logic for resolve placement... [LI] */
+            resolvePlacement: () => false,
             onChange: ({ model }) => {
                 this.selection = model;
+                this.#sortCards(model);
                 this.dispatchEvent(new UmbChangeEvent());
             },
         });
@@ -84,8 +98,11 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
          * @default
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
+        this.startNode = '';
         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);
@@ -101,7 +118,24 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
             this._editMediaPath = routeBuilder({});
         });
         this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')));
-        this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+        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);
     }
@@ -110,22 +144,27 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
     }
     #pickableFilter;
     #openPicker() {
-        // TODO: Configure the media picker, with `ignoreUserStartNodes` [LK]
         this.#pickerContext.openPicker({
-            hideTreeRoot: true,
+            multiple: this.max > 1,
+            startNode: this.startNode,
             pickableFilter: this.#pickableFilter,
         });
     }
+    #onRemove(item) {
+        this.#pickerContext.requestRemoveItem(item.unique);
+    }
     render() {
         return html `<div class="container">${this.#renderItems()} ${this.#renderAddButton()}</div>`;
     }
     #renderItems() {
-        if (!this._items)
+        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)
+        if (this._cards && this.max && this._cards.length >= this.max)
             return;
         return html `
 			<uui-button
@@ -139,21 +178,20 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
 		`;
     }
     #renderItem(item) {
-        // TODO: `file-ext` value has been hardcoded here. Find out if API model has value for it. [LK]
         return html `
 			<uui-card-media
 				name=${ifDefined(item.name === null ? undefined : item.name)}
 				detail=${ifDefined(item.unique)}
-				file-ext="jpg">
+				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)}
 				<uui-action-bar slot="actions">
-					${this.#renderOpenButton(item)}
-					<uui-button label="Copy media">
-						<uui-icon name="icon-documents"></uui-icon>
-					</uui-button>
 					<uui-button
-						@click=${() => this.#pickerContext.requestRemoveItem(item.unique)}
-						label="Remove media ${item.name}">
+						label=${this.localize.term('general_remove')}
+						look="secondary"
+						@click=${() => this.#onRemove(item)}>
 						<uui-icon name="icon-trash"></uui-icon>
 					</uui-button>
 				</uui-action-bar>
@@ -169,25 +207,16 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
 			</uui-tag>
 		`;
     }
-    #renderOpenButton(item) {
-        if (!this.showOpenButton)
-            return;
-        return html `
-			<uui-button
-				compact
-				href="${this._editMediaPath}edit/${item.unique}"
-				label=${this.localize.term('general_edit') + ` ${item.name}`}>
-				<uui-icon name="icon-edit"></uui-icon>
-			</uui-button>
-		`;
-    }
     static { this.styles = [
         css `
+			:host {
+				position: relative;
+			}
 			.container {
 				display: grid;
-				gap: var(--uui-size-space-3);
-				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-				grid-template-rows: repeat(auto-fill, minmax(160px, 1fr));
+				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+				grid-auto-rows: 150px;
+				gap: var(--uui-size-space-5);
 			}
 
 			#btn-add {
@@ -200,9 +229,18 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UUIFormControlMixi
 				margin: 0 auto;
 			}
 
+			uui-card-media umb-icon {
+				font-size: var(--uui-size-8);
+			}
+
 			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;
+			}
 		`,
     ]; }
 };
@@ -225,8 +263,8 @@ __decorate([
     property({ type: Boolean })
 ], UmbInputMediaElement.prototype, "showOpenButton", void 0);
 __decorate([
-    property({ type: Boolean })
-], UmbInputMediaElement.prototype, "ignoreUserStartNodes", void 0);
+    property({ type: String })
+], UmbInputMediaElement.prototype, "startNode", void 0);
 __decorate([
     property()
 ], UmbInputMediaElement.prototype, "value", null);
@@ -235,9 +273,9 @@ __decorate([
 ], 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/index.js

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

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;
+    }
+}