oasys-lib 2.30.1 → 2.32.0-rc.0

package/fesm2022/oasys-lib.mjs

@@ -928,6 +928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                 }]
         }] });
 
+const UNMEASURED_LAYOUT_WIDTH_PX = 300;
 /**
  * ImageComponent is a reusable component. Necessary accessibility attributes are set by default for a decorative image.
  * alt text and airia described by text can be set to make the image non-decorative.
@@ -951,6 +952,8 @@ class ImageComponent {
     breakpoints = inject(IMAGE_BREAKPOINTS);
     fallbackBreakpoint = 768;
     imageSizes = this.breakpoints.map((size) => `(max-width: ${size}px) ${size}px`).join(', ');
+    measuredWidthPx = signal(null, ...(ngDevMode ? [{ debugName: "measuredWidthPx" }] : []));
+    resizeObserver = null;
     intersectionObserver = null;
     get class() {
         return this.image_fill ? 'imageFill' : '';
@@ -962,11 +965,22 @@ class ImageComponent {
         this.createImage();
         void this.setupLazyLoading();
     }
+    ngAfterViewInit() {
+        this.setupResizeObserver();
+    }
     /**
      * On changes, handle any changes in input properties.
      */
     ngOnChanges(changes) {
         if ('image_src' in changes || 'image_width' in changes || 'preload_aspect_ratio' in changes) {
+            if ('image_width' in changes) {
+                if (this.image_width) {
+                    this.cleanupResizeObserver();
+                }
+                else {
+                    this.setupResizeObserver();
+                }
+            }
             this.createImage();
             this.cleanupObserver();
             void this.setupLazyLoading();
@@ -977,6 +991,7 @@ class ImageComponent {
      */
     ngOnDestroy() {
         this.cleanupObserver();
+        this.cleanupResizeObserver();
     }
     /**
      * Creates the image object with the provided properties.
@@ -992,12 +1007,41 @@ class ImageComponent {
             fill: this.image_fill,
             fetchpriority: this.fetchpriority,
             preloadAspectRatio: this.preload_aspect_ratio,
-            width: this.image_width ? `${this.image_width}px` : null,
+            width: this.getSizesAttribute(),
             altText: this.image_alt_text,
             ariaDescribedby: this.image_aria_describedby ?? null,
         };
         this.image.set(newImage);
     }
+    getSizesAttribute() {
+        if (this.image_width) {
+            return `${this.image_width}px`;
+        }
+        const measured = this.measuredWidthPx();
+        if (measured && measured > 0) {
+            return `${Math.ceil(measured)}px`;
+        }
+        return `${UNMEASURED_LAYOUT_WIDTH_PX}px`;
+    }
+    setupResizeObserver() {
+        if (this.image_width || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width ?? 0;
+            const rounded = Math.ceil(width);
+            if (rounded === this.measuredWidthPx()) {
+                return;
+            }
+            this.measuredWidthPx.set(rounded > 0 ? rounded : null);
+            this.createImage();
+        });
+        this.resizeObserver.observe(this.el.nativeElement);
+    }
+    cleanupResizeObserver() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
     /**
      * Sets up lazy loading for the image using IntersectionObserver.
      * This method observes the image element and loads the image when it comes into view.