From 0cad204a2380c91df1afcae1d10baa708badebaf Mon Sep 17 00:00:00 2001
From: ralf <rb@egroupware.org>
Date: Thu, 15 Aug 2024 10:32:48 +0200
Subject: [PATCH] fix JS TypeError caused by style property by allowing CSS
 functions like calc() in width and height property of et2-image maybe we want
 that for all widgets ..

---
 api/js/etemplate/Et2Image/Et2Image.ts | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/api/js/etemplate/Et2Image/Et2Image.ts b/api/js/etemplate/Et2Image/Et2Image.ts
index 80795d674d..be6ebd1eb0 100644
--- a/api/js/etemplate/Et2Image/Et2Image.ts
+++ b/api/js/etemplate/Et2Image/Et2Image.ts
@@ -81,20 +81,23 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
 	extraLinkPopup = "";
 
 	/**
-	 * Width of image
+	 * Width of image:
+	 * - either number of px (e.g. 32) or
+	 * - string incl. CSS unit (e.g. "32px") or
+	 * - even CSS functions like e.g. "calc(1rem + 2px)"
 	 */
 	@property({type: String})
 	width;
 
 	/**
-	 * Height of image
+	 * Height of image:
+	 * - either number of px (e.g. 32) or
+	 * - string incl. CSS unit (e.g. "32px") or
+	 * - even CSS functions like e.g. "calc(1rem + 2px)"
 	 */
 	@property({type: String})
 	height;
 
-	@property({type: String})
-	style;
-
 	constructor()
 	{
 		super();
@@ -125,9 +128,7 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
             <img ${this.id ? html`id="${this.id}"` : ''}
                  src="${src}"
                  alt="${this.label}"
-				 width="${this.width || (this.height ? nothing : '100%')}"
-                 height="${this.height || nothing}"
-                 style="${this.style || nothing}"
+				 style="${this.height ? 'height: '+this.height+(isNaN(this.height)?'':'px')+'; ' : ''}width: ${this.width ? this.width+(isNaN(this.width)?'':'px') : (this.height ? 'auto' : '100%')};"
                  part="image"
                  loading="lazy"
                  title="${this.statustext || this.label}"