fix: if a crop has a label itself, use that and run it through the localize controller

Author: iOvergaard

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>`