@umbraco-cms/backoffice 14.0.0--preview004-fb4b6c24 → 14.0.0--preview004-07058ebe

package/dist-cms/custom-elements.json

@@ -1205,15 +1205,15 @@
       "properties": [
         {
           "name": "imageElement",
-          "type": "HTMLImageElement"
+          "type": "HTMLImageElement | undefined"
         },
         {
           "name": "wrapperElement",
-          "type": "HTMLImageElement"
+          "type": "HTMLImageElement | undefined"
         },
         {
           "name": "focalPointElement",
-          "type": "HTMLImageElement"
+          "type": "HTMLImageElement | undefined"
         },
         {
           "name": "src",

package/dist-cms/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.d.ts

@@ -2,9 +2,9 @@ import { UmbImageCropperFocalPoint } from './index.js';
 import { LitElement, PropertyValueMap, nothing } from '../../../../external/lit/index.js';
 export declare class UmbImageCropperFocusSetterElement extends LitElement {
     #private;
-    imageElement: HTMLImageElement;
-    wrapperElement: HTMLImageElement;
-    focalPointElement: HTMLImageElement;
+    imageElement?: HTMLImageElement;
+    wrapperElement?: HTMLImageElement;
+    focalPointElement?: HTMLImageElement;
     src?: string;
     focalPoint: UmbImageCropperFocalPoint;
     connectedCallback(): void;

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

@@ -35,7 +35,7 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
     }
     updated(_changedProperties) {
         super.updated(_changedProperties);
-        if (_changedProperties.has('focalPoint')) {
+        if (_changedProperties.has('focalPoint') && 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)`;
         }
@@ -43,21 +43,27 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
         this.style.setProperty('--dot-radius', `${this.#DOT_RADIUS}px`);
-        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 = () => {
-            const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
-            if (imageAspectRatio > 1) {
-                this.imageElement.style.width = '100%';
-                this.wrapperElement.style.width = '100%';
-            }
-            else {
-                this.imageElement.style.height = '100%';
-                this.wrapperElement.style.height = '100%';
-            }
-            this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
-            this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
-        };
+        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;
+                if (imageAspectRatio > 1) {
+                    this.imageElement.style.width = '100%';
+                    this.wrapperElement.style.width = '100%';
+                }
+                else {
+                    this.imageElement.style.height = '100%';
+                    this.wrapperElement.style.height = '100%';
+                }
+                this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
+                this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
+            };
+        }
     }
     async #addEventListeners() {
         await this.updateComplete; // Wait for the @query to be resolved
@@ -73,6 +79,8 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
     #onDrag;
     #onSetFocalPoint(event) {
         event.preventDefault();
+        if (!this.focalPointElement || !this.imageElement)
+            return;
         const image = this.imageElement.getBoundingClientRect();
         const x = clamp(event.clientX - image.left, 0, image.width);
         const y = clamp(event.clientY - image.top, 0, image.height);

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

@@ -87,8 +87,8 @@ let UmbInputImageCropperElement = class UmbInputImageCropperElement extends LitE
 						.focalPoint=${this.focalPoint}
 						.src=${this.src}></umb-image-cropper-focus-setter>
 					<div id="actions">
-						<uui-button>Remove files (NOT IMPLEMENTED YET)</uui-button>
-						<uui-button @click=${this.#onResetFocalPoint}>Reset focal point</uui-button>
+						<uui-button label="Remove files">Remove files (NOT IMPLEMENTED YET)</uui-button>
+						<uui-button label="Reset focal point" @click=${this.#onResetFocalPoint}>Reset focal point</uui-button>
 					</div> `;
     }
     #renderSide() {

package/dist-cms/packages/core/property-editor/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.js

@@ -87,17 +87,17 @@ let UmbPropertyEditorUIImageCropsConfigurationElement = class UmbPropertyEditorU
 				<form @submit=${this.#onSubmit}>
 					<div class="input">
 						<uui-label for="alias">Alias</uui-label>
-						<uui-input id="alias" name="alias" type="text" autocomplete="false" value=""></uui-input>
+						<uui-input label="Alias" id="alias" name="alias" type="text" autocomplete="false" value=""></uui-input>
 					</div>
 					<div class="input">
 						<uui-label for="width">Width</uui-label>
-						<uui-input id="width" name="width" type="number" autocomplete="false" value="">
+						<uui-input label="Width" id="width" name="width" type="number" autocomplete="false" value="">
 							<span class="append" slot="append">px</span>
 						</uui-input>
 					</div>
 					<div class="input">
 						<uui-label for="height">Height</uui-label>
-						<uui-input id="height" name="height" type="number" autocomplete="false" value="">
+						<uui-input label="Height" id="height" name="height" type="number" autocomplete="false" value="">
 							<span class="append" slot="append">px</span>
 						</uui-input>
 					</div>
@@ -111,8 +111,8 @@ let UmbPropertyEditorUIImageCropsConfigurationElement = class UmbPropertyEditorU
 							<span class="crop-alias">${item.alias}</span>
 							<span class="crop-size">(${item.width} x ${item.height}px)</span>
 							<div class="crop-actions">
-								<uui-button @click=${() => this.#onEdit(item)}>Edit</uui-button>
-								<uui-button color="danger" @click=${() => this.#onRemove(item.alias)}>Remove</uui-button>
+								<uui-button label="Edit" @click=${() => this.#onEdit(item)}>Edit</uui-button>
+								<uui-button label="Remove" color="danger" @click=${() => this.#onRemove(item.alias)}>Remove</uui-button>
 							</div>
 						</div>
 					`)}

package/dist-cms/packages/core/property-editor/uis/tiny-mce/config/max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.js

@@ -16,7 +16,7 @@ let UmbPropertyEditorUITinyMceMaxImageSizeConfigurationElement = class UmbProper
         this.value = 0;
     }
     render() {
-        return html `<uui-input type="number" placeholder="Max size" .value=${this.value}></uui-input>`;
+        return html `<uui-input label="Max size" type="number" placeholder="Max size" .value=${this.value}></uui-input>`;
     }
     static { this.styles = [UmbTextStyles]; }
 };