@limetech/lime-crm-building-blocks 2.4.1 → 2.4.3

package/dist/collection/components/inline-image/inline-image.js

@@ -30,7 +30,7 @@ export class InlineImage {
         }
         return (h("img", { src: getFileContentsUrl(this.appName, this.imageId), alt: this.alt, style: {
                 width: this.toCssSize(this.width),
-                height: this.toCssSize(this.height),
+                aspectRatio: this.getAspectRatio(),
                 maxWidth: '100%',
             } }));
     }
@@ -39,6 +39,19 @@ export class InlineImage {
             !!element.platform &&
             typeof element.platform === 'object');
     }
+    getAspectRatio() {
+        const width = this.toPixels(this.width);
+        const height = this.toPixels(this.height);
+        if (!width || !height) {
+            return undefined;
+        }
+        // `auto` lets the image's natural ratio win once it has loaded.
+        return `auto ${width} / ${height}`;
+    }
+    toPixels(value) {
+        const match = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(value !== null && value !== void 0 ? value : '');
+        return match ? Number(match[1]) : undefined;
+    }
     toCssSize(value) {
         if (!value) {
             return undefined;
@@ -129,7 +142,7 @@ export class InlineImage {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Rendered height (e.g. `300` or `300px`)."
+                    "text": "Height the image had when it was saved (e.g. `300` or `300px`). Never\napplied as a fixed height, as that would squeeze the image when its\nwidth shrinks. Together with `width`, it only yields the aspect ratio\nreserved before the image has loaded."
                 },
                 "getter": false,
                 "setter": false,