@umbraco-cms/backoffice 17.5.2 → 17.6.0-rc

package/dist-cms/packages/media/imaging/components/imaging-thumbnail.element.js

@@ -4,185 +4,15 @@ 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 { UmbImagingCropMode } from '../types.js';
-import { UmbImagingRepository } from '../imaging.repository.js';
-import { css, customElement, html, property, state, when } from '../../../../external/lit/index.js';
-import { UmbLitElement } from '../../../core/lit-element/index.js';
-import { UmbTextStyles } from '../../../core/style/index.js';
-import { UMB_ACTION_EVENT_CONTEXT } from '../../../core/action/index.js';
-import { UmbEntityUpdatedEvent } from '../../../core/entity-action/index.js';
-let UmbImagingThumbnailElement = class UmbImagingThumbnailElement extends UmbLitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The width of the thumbnail in pixels.
-         * @default 300
-         */
-        this.width = 300;
-        /**
-         * The height of the thumbnail in pixels.
-         * @default 300
-         */
-        this.height = 300;
-        /**
-         * The mode of the thumbnail.
-         * @description The mode determines how the image is cropped.
-         * @enum {UmbImagingCropMode}
-         */
-        this.mode = UmbImagingCropMode.MIN;
-        /**
-         * The alt text for the thumbnail.
-         */
-        this.alt = '';
-        /**
-         * The fallback icon for the thumbnail.
-         */
-        this.icon = 'icon-picture';
-        /**
-         * The `loading` state of the thumbnail.
-         * @enum {'lazy' | 'eager'}
-         * @default 'lazy'
-         */
-        this.loading = 'lazy';
-        /**
-         * External loading state (e.g., when parent is waiting for metadata)
-         */
-        this.externalLoading = false;
-        this._isLoading = false;
-        this._thumbnailUrl = '';
-        this.#imagingRepository = new UmbImagingRepository(this);
-    }
-    #imagingRepository;
-    #intersectionObserver;
-    render() {
-        return when(this.externalLoading || this._isLoading, () => this.#renderLoading(), () => this.#renderThumbnail());
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.loading === 'lazy') {
-            this.#intersectionObserver = new IntersectionObserver((entries) => {
-                if (entries[0].isIntersecting) {
-                    this.#generateThumbnailUrl();
-                    this.#intersectionObserver?.disconnect();
-                    this.#observeActionEvent();
-                }
-            });
-            this.#intersectionObserver.observe(this);
-        }
-        else {
-            this.#generateThumbnailUrl();
-            this.#observeActionEvent();
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#intersectionObserver?.disconnect();
-    }
-    /**
-     * Observes the action events for the current media item.
-     * Reloads the thumbnail when the media item is updated.
-     * Note: Call this only when the media item is in view or otherwise is supposed to be loaded already.
-     */
-    #observeActionEvent() {
-        this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (actionEventContext) => {
-            actionEventContext?.addEventListener(UmbEntityUpdatedEvent.TYPE, (event) => {
-                if (event instanceof UmbEntityUpdatedEvent && event.getUnique() === this.unique) {
-                    this.#generateThumbnailUrl();
-                }
-            });
-        });
-    }
-    #renderLoading() {
-        return html `<uui-loader-circle id="loader"></uui-loader-circle>`;
-    }
-    #renderThumbnail() {
-        return when(this._thumbnailUrl, (url) => html `<img id="figure" src=${url} alt=${this.alt} loading=${this.loading} decoding="async" draggable="false" />`, () => html `<umb-icon id="icon" name=${this.icon}></umb-icon>`);
-    }
-    async #generateThumbnailUrl() {
-        if (!this.unique)
-            return;
-        this._isLoading = true;
-        const { data } = await this.#imagingRepository.requestResizedItems([this.unique], {
-            height: this.height,
-            width: this.width,
-            mode: this.mode,
-            format: this.format,
-        });
-        this._thumbnailUrl = data?.[0]?.url ?? '';
-        this._isLoading = false;
-    }
-    static { this.styles = [
-        UmbTextStyles,
-        css `
-			:host {
-				display: block;
-				position: relative;
-				overflow: hidden;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				width: 100%;
-				height: 100%;
-			}
-
-			#loader {
-				font-size: 2em;
-				margin-bottom: 1em;
-			}
-
-			#figure {
-				display: block;
-				width: 100%;
-				height: 100%;
-				object-fit: contain;
-				object-position: center;
-
-				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;
-			}
-
-			#icon {
-				width: 100%;
-				height: 100%;
-				font-size: var(--uui-size-8);
-			}
-		`,
-    ]; }
+import { UmbMediaThumbnailElement } from './media-thumbnail.element.js';
+import { customElement } from '../../../../external/lit/index.js';
+/**
+ * Alias of `umb-media-thumbnail`, kept for backwards compatibility.
+ * @deprecated Use `umb-media-thumbnail` (`UmbMediaThumbnailElement`) instead.
+ * @element umb-imaging-thumbnail
+ */
+let UmbImagingThumbnailElement = class UmbImagingThumbnailElement extends UmbMediaThumbnailElement {
 };
-__decorate([
-    property({ type: String })
-], UmbImagingThumbnailElement.prototype, "unique", void 0);
-__decorate([
-    property({ type: Number })
-], UmbImagingThumbnailElement.prototype, "width", void 0);
-__decorate([
-    property({ type: Number })
-], UmbImagingThumbnailElement.prototype, "height", void 0);
-__decorate([
-    property({ type: String })
-], UmbImagingThumbnailElement.prototype, "mode", void 0);
-__decorate([
-    property({ type: String })
-], UmbImagingThumbnailElement.prototype, "format", void 0);
-__decorate([
-    property({ type: String })
-], UmbImagingThumbnailElement.prototype, "alt", void 0);
-__decorate([
-    property({ type: String })
-], UmbImagingThumbnailElement.prototype, "icon", void 0);
-__decorate([
-    property({ type: String })
-], UmbImagingThumbnailElement.prototype, "loading", void 0);
-__decorate([
-    property({ type: Boolean, reflect: false, attribute: 'external-loading' })
-], UmbImagingThumbnailElement.prototype, "externalLoading", void 0);
-__decorate([
-    state()
-], UmbImagingThumbnailElement.prototype, "_isLoading", void 0);
-__decorate([
-    state()
-], UmbImagingThumbnailElement.prototype, "_thumbnailUrl", void 0);
 UmbImagingThumbnailElement = __decorate([
     customElement('umb-imaging-thumbnail')
 ], UmbImagingThumbnailElement);

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

@@ -1,2 +1,3 @@
+export * from './media-thumbnail.element.js';
 export * from './imaging-thumbnail.element.js';
 export * from './media-image.element.js';

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

@@ -1,2 +1,3 @@
+export * from './media-thumbnail.element.js';
 export * from './imaging-thumbnail.element.js';
 export * from './media-image.element.js';

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

@@ -0,0 +1,68 @@
+import { UmbImagingCropMode } from '../types.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
+/**
+ * Displays a thumbnail for a media item, with optional server-side cropping and transparency support.
+ * This is the recommended component for rendering media images in the backoffice.
+ * @element umb-media-thumbnail
+ * @cssprop [--umb-media-thumbnail-background] - Background shown behind the image. Defaults to a checkerboard
+ * pattern that reveals transparency; set to `none` for a transparent background.
+ * @csspart img - The underlying `<img>` element.
+ */
+export declare class UmbMediaThumbnailElement extends UmbLitElement {
+    #private;
+    /**
+     * The unique identifier for the media item.
+     * @description This is also known as the media key and is used to fetch the resource.
+     */
+    unique?: string;
+    /**
+     * The width of the thumbnail in pixels.
+     * @default 300
+     */
+    width: number;
+    /**
+     * The height of the thumbnail in pixels.
+     * @default 300
+     */
+    height: number;
+    /**
+     * The mode of the thumbnail.
+     * @description The mode determines how the image is cropped.
+     * @enum {UmbImagingCropMode}
+     */
+    mode: UmbImagingCropMode;
+    /**
+     * The output format of the thumbnail.
+     * @description The format to convert the image to. If not specified, the backend automatically determines the best format based on the source file type.
+     */
+    format?: string;
+    /**
+     * The alt text for the thumbnail.
+     */
+    alt: string;
+    /**
+     * The fallback icon for the thumbnail.
+     */
+    icon: string;
+    /**
+     * The `loading` state of the thumbnail.
+     * @enum {'lazy' | 'eager'}
+     * @default 'lazy'
+     */
+    loading: (typeof HTMLImageElement)['prototype']['loading'];
+    /**
+     * External loading state (e.g., when parent is waiting for metadata)
+     */
+    externalLoading: boolean;
+    private _isLoading;
+    private _thumbnailUrl;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-media-thumbnail': UmbMediaThumbnailElement;
+    }
+}

package/dist-cms/packages/media/imaging/components/media-thumbnail.element.js

@@ -0,0 +1,216 @@
+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 { UmbImagingCropMode } from '../types.js';
+import { UmbImagingRepository } from '../imaging.repository.js';
+import { css, customElement, html, property, state, when } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
+import { UmbTextStyles } from '../../../core/style/index.js';
+import { UMB_ACTION_EVENT_CONTEXT } from '../../../core/action/index.js';
+import { UmbEntityUpdatedEvent } from '../../../core/entity-action/index.js';
+/**
+ * Displays a thumbnail for a media item, with optional server-side cropping and transparency support.
+ * This is the recommended component for rendering media images in the backoffice.
+ * @element umb-media-thumbnail
+ * @cssprop [--umb-media-thumbnail-background] - Background shown behind the image. Defaults to a checkerboard
+ * pattern that reveals transparency; set to `none` for a transparent background.
+ * @csspart img - The underlying `<img>` element.
+ */
+let UmbMediaThumbnailElement = class UmbMediaThumbnailElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The width of the thumbnail in pixels.
+         * @default 300
+         */
+        this.width = 300;
+        /**
+         * The height of the thumbnail in pixels.
+         * @default 300
+         */
+        this.height = 300;
+        /**
+         * The mode of the thumbnail.
+         * @description The mode determines how the image is cropped.
+         * @enum {UmbImagingCropMode}
+         */
+        this.mode = UmbImagingCropMode.MIN;
+        /**
+         * The alt text for the thumbnail.
+         */
+        this.alt = '';
+        /**
+         * The fallback icon for the thumbnail.
+         */
+        this.icon = 'icon-picture';
+        /**
+         * The `loading` state of the thumbnail.
+         * @enum {'lazy' | 'eager'}
+         * @default 'lazy'
+         */
+        this.loading = 'lazy';
+        /**
+         * External loading state (e.g., when parent is waiting for metadata)
+         */
+        this.externalLoading = false;
+        this._isLoading = false;
+        this._thumbnailUrl = '';
+        this.#imagingRepository = new UmbImagingRepository(this);
+        this.#onEntityUpdated = (event) => {
+            if (event.getUnique() === this.unique) {
+                this.#generateThumbnailUrl();
+            }
+        };
+    }
+    #imagingRepository;
+    #intersectionObserver;
+    #actionEventContext;
+    render() {
+        return when(this.externalLoading || this._isLoading, () => this.#renderLoading(), () => this.#renderThumbnail());
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.loading === 'lazy') {
+            this.#intersectionObserver = new IntersectionObserver((entries) => {
+                if (entries[0].isIntersecting) {
+                    this.#generateThumbnailUrl();
+                    this.#intersectionObserver?.disconnect();
+                    this.#observeActionEvent();
+                }
+            });
+            this.#intersectionObserver.observe(this);
+        }
+        else {
+            this.#generateThumbnailUrl();
+            this.#observeActionEvent();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#intersectionObserver?.disconnect();
+        this.#removeActionEventListener();
+    }
+    /**
+     * Observes the action events for the current media item.
+     * Reloads the thumbnail when the media item is updated.
+     * Note: Call this only when the media item is in view or otherwise is supposed to be loaded already.
+     */
+    #observeActionEvent() {
+        this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (actionEventContext) => {
+            this.#removeActionEventListener();
+            this.#actionEventContext = actionEventContext;
+            this.#actionEventContext?.addEventListener(UmbEntityUpdatedEvent.TYPE, this.#onEntityUpdated);
+        });
+    }
+    #removeActionEventListener() {
+        this.#actionEventContext?.removeEventListener(UmbEntityUpdatedEvent.TYPE, this.#onEntityUpdated);
+    }
+    #onEntityUpdated;
+    #renderLoading() {
+        return html `<uui-loader-circle id="loader"></uui-loader-circle>`;
+    }
+    #renderThumbnail() {
+        return when(this._thumbnailUrl, (url) => html `<img
+					id="figure"
+					part="img"
+					src=${url}
+					alt=${this.alt}
+					loading=${this.loading}
+					decoding="async"
+					draggable="false" />`, () => html `<umb-icon id="icon" name=${this.icon}></umb-icon>`);
+    }
+    async #generateThumbnailUrl() {
+        if (!this.unique)
+            return;
+        this._isLoading = true;
+        const { data } = await this.#imagingRepository.requestResizedItems([this.unique], {
+            height: this.height,
+            width: this.width,
+            mode: this.mode,
+            format: this.format,
+        });
+        this._thumbnailUrl = data?.[0]?.url ?? '';
+        this._isLoading = false;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: block;
+				position: relative;
+				overflow: hidden;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 100%;
+				height: 100%;
+			}
+
+			#loader {
+				font-size: 2em;
+				margin-bottom: 1em;
+			}
+
+			#figure {
+				display: block;
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+				object-position: center;
+
+				background-image: var(
+					--umb-media-thumbnail-background,
+					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;
+			}
+
+			#icon {
+				width: 100%;
+				height: 100%;
+				font-size: var(--uui-size-8);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: String })
+], UmbMediaThumbnailElement.prototype, "unique", void 0);
+__decorate([
+    property({ type: Number })
+], UmbMediaThumbnailElement.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], UmbMediaThumbnailElement.prototype, "height", void 0);
+__decorate([
+    property({ type: String })
+], UmbMediaThumbnailElement.prototype, "mode", void 0);
+__decorate([
+    property({ type: String })
+], UmbMediaThumbnailElement.prototype, "format", void 0);
+__decorate([
+    property({ type: String })
+], UmbMediaThumbnailElement.prototype, "alt", void 0);
+__decorate([
+    property({ type: String })
+], UmbMediaThumbnailElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], UmbMediaThumbnailElement.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: false, attribute: 'external-loading' })
+], UmbMediaThumbnailElement.prototype, "externalLoading", void 0);
+__decorate([
+    state()
+], UmbMediaThumbnailElement.prototype, "_isLoading", void 0);
+__decorate([
+    state()
+], UmbMediaThumbnailElement.prototype, "_thumbnailUrl", void 0);
+UmbMediaThumbnailElement = __decorate([
+    customElement('umb-media-thumbnail')
+], UmbMediaThumbnailElement);
+export { UmbMediaThumbnailElement };

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

@@ -61,10 +61,10 @@ let UmbMediaCollectionItemCardElement = class UmbMediaCollectionItemCardElement
 				?disabled=${this.disabled}
 				@selected=${this.#onSelected}
 				@deselected=${this.#onDeselected}>
-				<umb-imaging-thumbnail
+				<umb-media-thumbnail
 					.unique=${this.item.unique}
 					alt=${ifDefined(this.item.name)}
-					icon=${ifDefined(this.item.icon)}></umb-imaging-thumbnail>
+					icon=${ifDefined(this.item.icon)}></umb-media-thumbnail>
 				<slot name="actions" slot="actions"></slot>
 			</uui-card-media>
 		`;

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

@@ -114,7 +114,7 @@ let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionViewElemen
             case 'contentTypeAlias':
                 return item.contentTypeAlias;
             case 'createDate':
-                return item.createDate.toLocaleString();
+                return item.createDate.toLocaleString(this.localize.lang());
             case 'name':
                 return item.name;
             case 'creator':
@@ -123,7 +123,7 @@ let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionViewElemen
             case 'sortOrder':
                 return item.sortOrder;
             case 'updateDate':
-                return item.updateDate.toLocaleString();
+                return item.updateDate.toLocaleString(this.localize.lang());
             case 'updater':
                 return item.updater;
             default:

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

@@ -200,8 +200,16 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
 			position: relative;
 			user-select: none;
 			background-color: var(--uui-color-surface);
-			outline: 1px solid var(--uui-color-border);
+			border: 1px solid var(--uui-color-border);
+			border-radius: var(--uui-border-radius);
 		}
+		:host(:not([disabled]):hover) {
+			border-color: var(--uui-color-border-standalone);
+		}
+		:host(:not([disabled]):focus-within) {
+			border-color: var(--uui-color-border-emphasis);
+		}
+
 		/* Wrapper is used to make the focal point position responsive to the image size */
 		#wrapper {
 			position: relative;

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

@@ -316,9 +316,15 @@ let UmbImageCropperElement = class UmbImageCropperElement extends UmbLitElement
 			position: relative;
 			width: 100%;
 			height: 100%;
-			outline: 1px solid var(--uui-color-border);
+			border: 1px solid var(--uui-color-border);
 			border-radius: var(--uui-border-radius);
 		}
+		:host(:not([disabled]):hover) #viewport {
+			border-color: var(--uui-color-border-standalone);
+		}
+		:host(:not([disabled]):focus-within) #viewport {
+			border-color: var(--uui-color-border-emphasis);
+		}
 		#actions {
 			display: flex;
 			justify-content: flex-end;

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

@@ -4,13 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
+import { ensureMediaNameFromFile } from '../../utils/ensure-media-name-from-file.function.js';
 import { css, customElement, html, ifDefined, property, state } from '../../../../../external/lit/index.js';
 import { assignToFrozenObject } from '../../../../../libs/observable-api/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbFileDropzoneItemStatus } from '../../../dropzone/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UMB_NAMEABLE_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbTemporaryFileConfigRepository } from '../../../../core/temporary-file/index.js';
 import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
@@ -62,22 +61,13 @@ let UmbInputImageCropperElement = class UmbInputImageCropperElement extends UmbF
         this._file = file;
         const underlyingFile = file.temporaryFile?.file;
         if (underlyingFile) {
-            void this.#ensureMediaNameFromFile(underlyingFile);
+            void ensureMediaNameFromFile(this, underlyingFile);
         }
         this.value = assignToFrozenObject(this.value ?? DefaultValue, {
             temporaryFileId: file.temporaryFile?.temporaryUnique,
         });
         this.dispatchEvent(new UmbChangeEvent());
     }
-    async #ensureMediaNameFromFile(file) {
-        const datasetContext = await this.getContext(UMB_NAMEABLE_PROPERTY_DATASET_CONTEXT);
-        if (!datasetContext || datasetContext.getEntityType() !== UMB_MEDIA_ENTITY_TYPE)
-            return;
-        const currentName = datasetContext.getName();
-        if (currentName && currentName.trim() !== '')
-            return;
-        datasetContext.setName(file.name);
-    }
     #onRemove;
     #mergeCrops() {
         if (this.value) {

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

@@ -17,7 +17,7 @@ export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
     get min(): number;
     /**
      * Min validation message.
-     * @type {boolean}
+     * @type {string}
      * @attr
      * @default
      */
@@ -32,7 +32,7 @@ export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
     get max(): number;
     /**
      * Max validation message.
-     * @type {boolean}
+     * @type {string}
      * @attr
      * @default
      */