From fc1de1e9cdfd68b698003e975f65cc9426fe981f Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 26 Jul 2024 10:49:16 +0200
Subject: [PATCH] fix: if a crop has a label itself, use that and run it
 through the `localize` controller

---
 .../input-image-cropper/image-cropper-preview.element.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts
index 35f20b490d..a092f0868c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts
@@ -1,9 +1,10 @@
 import type { UmbImageCropperCrop, UmbImageCropperFocalPoint } from './index.js';
 import { calculateExtrapolatedValue, clamp } from '@umbraco-cms/backoffice/utils';
-import { LitElement, css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-image-cropper-preview')
-export class UmbImageCropperPreviewElement extends LitElement {
+export class UmbImageCropperPreviewElement extends UmbLitElement {
 	@query('#image') imageElement!: HTMLImageElement;
 	@query('#container') imageContainerElement!: HTMLImageElement;
 
@@ -150,7 +151,9 @@ export class UmbImageCropperPreviewElement extends LitElement {
 			<div id="container">
 				<img id="image" src=${this.src} alt="" />
 			</div>
-			<span id="alias">${this.label ?? this.crop.alias}</span>
+			<span id="alias">
+				${this.crop.label !== undefined ? this.localize.string(this.crop.label) : (this.label ?? this.crop.alias)}
+			</span>
 			<span id="dimensions">${this.crop.width} x ${this.crop.height}</span>
 			${this.crop.coordinates
 				? html`<span id="user-defined"><umb-localize key="imagecropper_customCrop">User defined</umb-localize></span>`