@umbraco-cms/backoffice 16.0.0 → 16.1.0-rc

package/dist-cms/packages/media/media/components/input-upload-field/preview/input-upload-field-file.element.js

@@ -11,33 +11,16 @@ let UmbInputUploadFieldFileElement = class UmbInputUploadFieldFileElement extend
         super(...arguments);
         this.path = '';
     }
-    get #label() {
-        if (this.file) {
-            return this.file.name;
-        }
-        return this.path.split('/').pop() ?? `(${this.localize.term('general_loading')}...)`;
-    }
-    get #fileExtension() {
-        return this.#label.split('.').pop() ?? '';
-    }
     render() {
-        if (!this.path && !this.file)
+        if (!this.path)
             return html `<uui-loader></uui-loader>`;
-        return html `
-			<uui-card-media
-				.name=${this.#label}
-				.fileExt=${this.#fileExtension}
-				href=${this.path}
-				target="_blank"></uui-card-media>
-		`;
+        const fileExt = this.path.split('.').pop() ?? '';
+        return html `<uui-symbol-file .type=${fileExt}></uui-symbol-file>`;
     }
 };
 __decorate([
     property()
 ], UmbInputUploadFieldFileElement.prototype, "path", void 0);
-__decorate([
-    property({ attribute: false })
-], UmbInputUploadFieldFileElement.prototype, "file", void 0);
 UmbInputUploadFieldFileElement = __decorate([
     customElement('umb-input-upload-field-file')
 ], UmbInputUploadFieldFileElement);

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

@@ -1,6 +1,6 @@
+import type { UmbFileUploadPreviewElement } from '../file-upload-preview.interface.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-export default class UmbInputUploadFieldImageElement extends UmbLitElement {
-    #private;
+export default class UmbInputUploadFieldImageElement extends UmbLitElement implements UmbFileUploadPreviewElement {
     path: string;
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];

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

@@ -11,16 +11,11 @@ let UmbInputUploadFieldImageElement = class UmbInputUploadFieldImageElement exte
         super(...arguments);
         this.path = '';
     }
-    get #label() {
-        return this.path.split('/').pop() ?? '';
-    }
     render() {
         if (!this.path)
             return html `<uui-loader></uui-loader>`;
-        const label = this.#label;
-        return html `<uui-card-media id="card" .name=${label} href="${this.path}" target="_blank">
-			<img id="image" src=${this.path} alt="${label}" loading="lazy" />
-		</uui-card-media>`;
+        const label = this.path.split('/').pop() ?? '';
+        return html `<img src=${this.path} alt=${label} loading="lazy" />`;
     }
     static { this.styles = [
         css `
@@ -32,12 +27,7 @@ let UmbInputUploadFieldImageElement = class UmbInputUploadFieldImageElement exte
 				max-width: 100%;
 			}
 
-			#card {
-				width: 100%;
-				height: 100%;
-			}
-
-			#image {
+			img {
 				object-fit: contain;
 				width: auto;
 				height: 100%;

package/dist-cms/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.d.ts

@@ -1,6 +1,6 @@
+import type { UmbFileUploadPreviewElement } from '../file-upload-preview.interface.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-export default class UmbInputUploadFieldSvgElement extends UmbLitElement {
-    #private;
+export default class UmbInputUploadFieldSvgElement extends UmbLitElement implements UmbFileUploadPreviewElement {
     path: string;
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];

package/dist-cms/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.js

@@ -11,33 +11,22 @@ let UmbInputUploadFieldSvgElement = class UmbInputUploadFieldSvgElement extends
         super(...arguments);
         this.path = '';
     }
-    get #label() {
-        return this.path.split('/').pop() ?? '';
-    }
     render() {
         if (!this.path)
             return html `<uui-loader></uui-loader>`;
-        const label = this.#label;
-        return html `<uui-card-media id="card" .name=${label} href="${this.path}" target="_blank">
-			<img id="image" src=${this.path} alt="${label}" loading="lazy" />
-		</uui-card-media>`;
+        const label = this.path.split('/').pop() ?? '';
+        return html `<img src=${this.path} alt=${label} loading="lazy" />`;
     }
     static { this.styles = [
         css `
 			:host {
-				position: relative;
 				min-height: 240px;
 				max-height: 400px;
 				width: fit-content;
 				max-width: 100%;
 			}
 
-			#card {
-				width: 100%;
-				height: 100%;
-			}
-
-			#image {
+			img {
 				object-fit: contain;
 				width: auto;
 				height: 100%;

package/dist-cms/packages/media/media/components/input-upload-field/preview/input-upload-field-video.element.d.ts

@@ -1,6 +1,6 @@
+import type { UmbFileUploadPreviewElement } from '../file-upload-preview.interface.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-export default class UmbInputUploadFieldVideoElement extends UmbLitElement {
-    #private;
+export default class UmbInputUploadFieldVideoElement extends UmbLitElement implements UmbFileUploadPreviewElement {
     path: string;
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];

package/dist-cms/packages/media/media/components/input-upload-field/preview/input-upload-field-video.element.js

@@ -11,14 +11,12 @@ let UmbInputUploadFieldVideoElement = class UmbInputUploadFieldVideoElement exte
         super(...arguments);
         this.path = '';
     }
-    get #label() {
-        return this.path.split('/').pop() ?? '';
-    }
     render() {
         if (!this.path)
             return html `<uui-loader></uui-loader>`;
+        const label = this.path.split('/').pop() ?? '';
         return html `
-			<video controls title=${this.#label}>
+			<video controls title=${label}>
 				<source src=${this.path} />
 				Video format not supported
 			</video>
@@ -26,10 +24,9 @@ let UmbInputUploadFieldVideoElement = class UmbInputUploadFieldVideoElement exte
     }
     static { this.styles = [
         css `
-			:host {
-				display: flex;
-			}
 			video {
+				height: 100%;
+				max-height: 500px;
 				width: 100%;
 				max-width: 800px;
 			}

package/dist-cms/packages/media/media/components/input-upload-field/preview/manifest.js

@@ -10,7 +10,7 @@ export const manifests = [
     {
         type: 'fileUploadPreview',
         alias: 'Umb.FileUploadPreview.File',
-        name: 'File File Upload Preview',
+        name: 'General File Upload Preview',
         weight: 100,
         element: () => import('./input-upload-field-file.element.js'),
         forMimeTypes: ['*/*'],
@@ -26,7 +26,7 @@ export const manifests = [
     {
         type: 'fileUploadPreview',
         alias: 'Umb.FileUploadPreview.Svg',
-        name: 'Svg File Upload Preview',
+        name: 'SVG File Upload Preview',
         weight: 100,
         element: () => import('./input-upload-field-svg.element.js'),
         forMimeTypes: ['image/svg+xml'],

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

@@ -1,3 +1,4 @@
+import { UMB_SECTION_ALIAS_CONDITION_ALIAS } from '@umbraco-cms/backoffice/section';
 export const manifests = [
     {
         type: 'dashboard',
@@ -11,7 +12,7 @@ export const manifests = [
         },
         conditions: [
             {
-                alias: 'Umb.Condition.SectionAlias',
+                alias: UMB_SECTION_ALIAS_CONDITION_ALIAS,
                 match: 'Umb.Section.Media',
             },
         ],

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

@@ -103,6 +103,7 @@ let UmbDropzoneMediaElement = class UmbDropzoneMediaElement extends UmbInputDrop
 				z-index: 100;
 				border-radius: var(--uui-border-radius);
 				border: 1px solid var(--uui-color-focus);
+				box-sizing:border-box;
 			}
 		`,
     ]; }

package/dist-cms/packages/media/media/entity-actions/move-to/repository/media-move.repository.d.ts

@@ -3,7 +3,7 @@ import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository';
 export declare class UmbMoveMediaRepository extends UmbRepositoryBase implements UmbMoveRepository {
     #private;
     requestMoveTo(args: UmbMoveToRequestArgs): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
     }>;
 }
 export { UmbMoveMediaRepository as api };

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

@@ -1,9 +1,12 @@
+export * from './audit-log/index.js';
 export * from './components/index.js';
 export * from './constants.js';
 export * from './dropzone/index.js';
+export { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from './modals/index.js';
+export * from './recycle-bin/index.js';
 export * from './reference/index.js';
 export * from './repository/index.js';
 export * from './search/index.js';
+export * from './tree/index.js';
 export * from './url/index.js';
-export { UmbMediaAuditLogRepository } from './audit-log/index.js';
 export type * from './types.js';

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

@@ -1,8 +1,11 @@
+export * from './audit-log/index.js';
 export * from './components/index.js';
 export * from './constants.js';
 export * from './dropzone/index.js';
+export { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from './modals/index.js';
+export * from './recycle-bin/index.js';
 export * from './reference/index.js';
 export * from './repository/index.js';
 export * from './search/index.js';
+export * from './tree/index.js';
 export * from './url/index.js';
-export { UmbMediaAuditLogRepository } from './audit-log/index.js';

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

@@ -1,9 +1,8 @@
 import { UmbInputImageCropperFieldElement } from '../../../components/input-image-cropper/image-cropper-field.element.js';
 export declare class UmbImageCropperEditorFieldElement extends UmbInputImageCropperFieldElement {
     #private;
-    renderActions(): import("lit-html").TemplateResult<1>;
     renderSide(): import("lit-html").TemplateResult<1> | undefined;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -5,94 +5,36 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbInputImageCropperFieldElement } from '../../../components/input-image-cropper/image-cropper-field.element.js';
-import { css, customElement, html, repeat, when } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
 let UmbImageCropperEditorFieldElement = class UmbImageCropperEditorFieldElement extends UmbInputImageCropperFieldElement {
     #resetCurrentCrop() {
         this.currentCrop = undefined;
     }
-    renderActions() {
-        return html `
-			<slot name="actions"></slot>
-			${when(!this.hideFocalPoint, () => html `
-					<uui-button
-						compact
-						id="reset-focal-point"
-						label=${this.localize.term('content_resetFocalPoint')}
-						@click=${this.onResetFocalPoint}>
-						<uui-icon name="icon-axis-rotation"></uui-icon>
-						${this.localize.term('content_resetFocalPoint')}
-					</uui-button>
-				`)}
-		`;
-    }
     renderSide() {
         if (!this.value || !this.crops)
             return;
-        return html ` <umb-image-cropper-preview
-				@click=${this.#resetCurrentCrop}
+        return html `
+			<umb-image-cropper-preview
+				.label=${this.localize.term('general_media')}
 				?active=${!this.currentCrop}
-				.label=${this.localize.term('general_media')}></umb-image-cropper-preview>
-
-			${repeat(this.crops, (crop) => crop.alias + JSON.stringify(crop.coordinates), (crop) => html `
-					<umb-image-cropper-preview
-						?active=${this.currentCrop?.alias === crop.alias}
-						@click=${() => this.onCropClick(crop)}
-						.crop=${crop}
-						.focalPoint=${this.focalPoint}
-						.src=${this.source}></umb-image-cropper-preview>
-				`)}`;
+				@click=${this.#resetCurrentCrop}>
+			</umb-image-cropper-preview>
+			${super.renderSide()}
+		`;
     }
-    static { this.styles = css `
-		:host {
-			display: flex;
-			width: 100%;
-			box-sizing: border-box;
-			gap: var(--uui-size-space-3);
-			height: 400px;
-		}
-
-		#main {
-			width: 100%;
-			height: 100%;
-			display: flex;
-			gap: var(--uui-size-space-1);
-			flex-direction: column;
-		}
-
-		#actions {
-			display: flex;
-			justify-content: space-between;
-		}
-
-		#reset-focal-point uui-icon {
-			padding-right: var(--uui-size-3);
-		}
-
-		slot[name='actions'] {
-			display: block;
-			flex: 1;
-		}
-
-		#reset-current-crop[active],
-		[active] {
-			background-color: var(--uui-color-current);
-		}
-
-		umb-image-cropper-focus-setter {
-			height: calc(100% - 33px - var(--uui-size-space-1)); /* Temp solution to make room for actions */
-		}
-
-		#side {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-			flex: none;
-			gap: var(--uui-size-space-3);
-			flex-grow: 1;
-			overflow-y: auto;
-			height: fit-content;
-			max-height: 100%;
-		}
-	`; }
+    static { this.styles = [
+        ...super.styles,
+        css `
+			#main {
+				max-width: unset;
+				min-width: unset;
+			}
+
+			#side {
+				flex: none;
+			}
+		`,
+    ]; }
 };
 UmbImageCropperEditorFieldElement = __decorate([
     customElement('umb-image-cropper-editor-field')

package/dist-cms/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.d.ts

@@ -1,7 +1,5 @@
 import type { UmbImageCropperEditorModalData, UmbImageCropperEditorModalValue } from './image-cropper-editor-modal.token.js';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import './components/image-cropper-editor-field.element.js';
-/** TODO Make some of the components from property editor image cropper reuseable for this modal... */
 export declare class UmbImageCropperEditorModalElement extends UmbModalBaseElement<UmbImageCropperEditorModalData<any>, UmbImageCropperEditorModalValue> {
     #private;
     private _imageCropperValue?;
@@ -11,12 +9,15 @@ export declare class UmbImageCropperEditorModalElement extends UmbModalBaseEleme
     private _crops;
     private _editMediaPath;
     private _pickableFilter?;
+    private _isCroppable;
     constructor();
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
+/** @deprecated Should be exported as `element` only; to be removed in Umbraco 18. */
 export default UmbImageCropperEditorModalElement;
+export { UmbImageCropperEditorModalElement as element };
 declare global {
     interface HTMLElementTagNameMap {
         'umb-image-cropper-editor-modal': UmbImageCropperEditorModalElement;

package/dist-cms/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.js

@@ -6,14 +6,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_MEDIA_PICKER_MODAL } from '../media-picker/media-picker-modal.token.js';
 import { UmbMediaUrlRepository } from '../../url/index.js';
-import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
+import { UmbTemporaryFileConfigRepository } from '@umbraco-cms/backoffice/temporary-file';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UMB_MODAL_MANAGER_CONTEXT, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
-import './components/image-cropper-editor-field.element.js';
-/** TODO Make some of the components from property editor image cropper reuseable for this modal... */
 let UmbImageCropperEditorModalElement = class UmbImageCropperEditorModalElement extends UmbModalBaseElement {
     #urlRepository;
+    #config;
+    #imageFileTypes;
     #modalManager;
     constructor() {
         super();
@@ -23,6 +25,8 @@ let UmbImageCropperEditorModalElement = class UmbImageCropperEditorModalElement
         this._hideFocalPoint = false;
         this._crops = [];
         this._editMediaPath = '';
+        this._isCroppable = false;
+        this.#config = new UmbTemporaryFileConfigRepository(this);
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (context) => {
             this.#modalManager = context;
         });
@@ -42,13 +46,24 @@ let UmbImageCropperEditorModalElement = class UmbImageCropperEditorModalElement
         this._hideFocalPoint = this.data?.hideFocalPoint ?? false;
         this._crops = this.data?.cropOptions ?? [];
         this._pickableFilter = this.data?.pickableFilter;
+        this.#observeAcceptedFileTypes();
         this.#getSrc();
     }
+    async #observeAcceptedFileTypes() {
+        await this.#config.initialized;
+        this.observe(this.#config.part('imageFileTypes'), (imageFileTypes) => (this.#imageFileTypes = imageFileTypes), '_observeFileTypes');
+    }
     async #getSrc() {
         const { data } = await this.#urlRepository.requestItems([this._unique]);
         const item = data?.[0];
-        if (!item?.url)
+        if (!item?.url) {
+            this._isCroppable = false;
+            this._imageCropperValue = undefined;
             return;
+        }
+        if (item.extension && this.#imageFileTypes?.includes(item.extension)) {
+            this._isCroppable = true;
+        }
         /**
          * Combine the crops from the property editor with the stored crops and ignore any invalid crops
          * (e.g. crops that have been removed from the property editor)
@@ -80,6 +95,7 @@ let UmbImageCropperEditorModalElement = class UmbImageCropperEditorModalElement
         }
         this._unique = selected;
         this.value = { ...this.value, unique: this._unique };
+        this._isCroppable = false;
         this.#getSrc();
     }
     #onChange(e) {
@@ -95,7 +111,9 @@ let UmbImageCropperEditorModalElement = class UmbImageCropperEditorModalElement
     render() {
         return html `
 			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectMedia')}>
-				${this.#renderBody()}
+				<div id="layout">
+					${when(this._isCroppable, () => this.#renderImageCropper(), () => this.#renderFilePreview())}
+				</div>
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 					<uui-button
@@ -107,29 +125,54 @@ let UmbImageCropperEditorModalElement = class UmbImageCropperEditorModalElement
 			</umb-body-layout>
 		`;
     }
-    #renderBody() {
+    #renderActions() {
+        return html `
+			<uui-button compact label=${this.localize.term('mediaPicker_changeMedia')} @click=${this.#openMediaPicker}>
+				<uui-icon name="icon-search"></uui-icon>
+				<umb-localize key="mediaPicker_changeMedia">Change Media Item</umb-localize>
+			</uui-button>
+			<uui-button
+				compact
+				label=${this.localize.term('mediaPicker_openMedia')}
+				href=${this._editMediaPath + 'edit/' + this._unique}>
+				<uui-icon name="icon-out"></uui-icon>
+				<umb-localize key="mediaPicker_openMedia">Open in Media Library</umb-localize>
+			</uui-button>
+		`;
+    }
+    #renderImageCropper() {
+        if (!this._imageCropperValue)
+            return nothing;
+        return html `
+			<umb-image-cropper-editor-field
+				.value=${this._imageCropperValue}
+				?hideFocalPoint=${this._hideFocalPoint}
+				@change=${this.#onChange}>
+				<div slot="actions">${this.#renderActions()}</div>
+			</umb-image-cropper-editor-field>
+		`;
+    }
+    #renderFilePreview() {
+        return html `
+			<div id="main">
+				${when(this._imageCropperValue?.src, (path) => html `<umb-file-upload-preview .path=${path}></umb-file-upload-preview>`, () => this.#renderFileNotFound())}
+			</div>
+			<div id="actions">${this.#renderActions()}</div>
+		`;
+    }
+    #renderFileNotFound() {
+        const args = [this.localize.term('general_media')];
         return html `
-			<div id="layout">
-				<umb-image-cropper-editor-field
-					.value=${this._imageCropperValue}
-					?hideFocalPoint=${this._hideFocalPoint}
-					@change=${this.#onChange}>
-					<div id="actions" slot="actions">
-						<uui-button compact @click=${this.#openMediaPicker} label=${this.localize.term('mediaPicker_changeMedia')}>
-							<uui-icon name="icon-search"></uui-icon>${this.localize.term('mediaPicker_changeMedia')}
-						</uui-button>
-						<uui-button
-							compact
-							href=${this._editMediaPath + 'edit/' + this._unique}
-							label=${this.localize.term('mediaPicker_openMedia')}>
-							<uui-icon name="icon-out"></uui-icon>${this.localize.term('mediaPicker_openMedia')}
-						</uui-button>
-					</div>
-				</umb-image-cropper-editor-field>
+			<div class="uui-text">
+				<h4>
+					<umb-localize key="entityDetail_notFoundTitle" .args=${args}>Item not found</umb-localize>
+				</h4>
+				<umb-localize key="entityDetail_notFoundDescription">The requested item could not be found.</umb-localize>
 			</div>
 		`;
     }
     static { this.styles = [
+        UmbTextStyles,
         css `
 			#layout {
 				height: 100%;
@@ -137,28 +180,32 @@ let UmbImageCropperEditorModalElement = class UmbImageCropperEditorModalElement
 				flex-direction: column;
 				justify-content: space-between;
 			}
+
 			umb-image-cropper-editor-field {
-				flex-grow: 1;
+				flex: 1;
 			}
 
-			#actions {
-				display: inline-flex;
-				gap: var(--uui-size-space-3);
-			}
-			uui-icon {
-				padding-right: var(--uui-size-3);
+			#main {
+				flex: 1;
+				background-color: var(--uui-color-surface);
+				outline: 1px solid var(--uui-color-border);
 			}
 
-			#options {
+			#actions {
 				display: flex;
-				justify-content: center;
+				margin-top: 0.5rem;
+
+				uui-icon {
+					padding-right: var(--uui-size-1);
+				}
 			}
 
-			img {
-				max-width: 80%;
-				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;
+			.uui-text {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				height: 100%;
 			}
 		`,
     ]; }
@@ -184,8 +231,13 @@ __decorate([
 __decorate([
     state()
 ], UmbImageCropperEditorModalElement.prototype, "_pickableFilter", void 0);
+__decorate([
+    state()
+], UmbImageCropperEditorModalElement.prototype, "_isCroppable", void 0);
 UmbImageCropperEditorModalElement = __decorate([
     customElement('umb-image-cropper-editor-modal')
 ], UmbImageCropperEditorModalElement);
 export { UmbImageCropperEditorModalElement };
+/** @deprecated Should be exported as `element` only; to be removed in Umbraco 18. */
 export default UmbImageCropperEditorModalElement;
+export { UmbImageCropperEditorModalElement as element };

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

@@ -256,6 +256,10 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbMod
                 ? html `<uui-pagination
 									.current=${this._currentPage}
 									.total=${this._currentTotalPages}
+									firstlabel=${this.localize.term('general_first')}
+                                    previouslabel=${this.localize.term('general_previous')}
+                                    nextlabel=${this.localize.term('general_next')}
+                                    lastlabel=${this.localize.term('general_last')}
 									@change=${this.#onPageChange}></uui-pagination>`
                 : nothing}`}
 		`;
@@ -368,11 +372,6 @@ let UmbMediaPickerModalElement = class UmbMediaPickerModalElement extends UmbMod
 				padding-bottom: 5px; /** The modal is a bit jumpy due to the img card focus/hover border. This fixes the issue. */
 			}
 
-			/** TODO: Remove this fix when UUI gets upgrade to 1.3 */
-			umb-imaging-thumbnail {
-				pointer-events: none;
-			}
-
 			umb-icon {
 				font-size: var(--uui-size-8);
 			}

package/dist-cms/packages/media/media/property-editors/image-cropper/Umbraco.ImageCropper.js

@@ -8,7 +8,7 @@ export const manifest = {
             properties: [
                 {
                     alias: 'crops',
-                    label: 'Define Crops',
+                    label: 'Crop options',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.ImageCropsConfiguration',
                 },
             ],

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

@@ -6,13 +6,11 @@ export type UmbCrop = {
     width: number;
     height: number;
 };
-/**
- * @element umb-property-editor-ui-image-crops
- */
 export declare class UmbPropertyEditorUIImageCropsElement extends UmbLitElement implements UmbPropertyEditorUiElement {
     #private;
     private _labelInput;
     private _value;
+    private _isCreating;
     set value(value: Array<UmbCrop>);
     get value(): Array<UmbCrop>;
     editCropAlias: string;