oasys-lib 2.30.1 → 2.31.0

package/fesm2022/oasys-lib.mjs

@@ -951,7 +951,11 @@ 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;
+    lazySourcesApplied = false;
+    viewInitialized = false;
     get class() {
         return this.image_fill ? 'imageFill' : '';
     }
@@ -960,6 +964,10 @@ class ImageComponent {
      */
     ngOnInit() {
         this.createImage();
+    }
+    ngAfterViewInit() {
+        this.viewInitialized = true;
+        this.setupResizeObserver();
         void this.setupLazyLoading();
     }
     /**
@@ -967,9 +975,19 @@ class ImageComponent {
      */
     ngOnChanges(changes) {
         if ('image_src' in changes || 'image_width' in changes || 'preload_aspect_ratio' in changes) {
-            this.createImage();
+            if ('image_width' in changes) {
+                this.measuredWidthPx.set(null);
+                if (this.image_width) {
+                    this.cleanupResizeObserver();
+                }
+            }
+            this.lazySourcesApplied = false;
             this.cleanupObserver();
-            void this.setupLazyLoading();
+            this.createImage();
+            if (this.viewInitialized) {
+                this.setupResizeObserver();
+                void this.setupLazyLoading();
+            }
         }
     }
     /**
@@ -977,6 +995,7 @@ class ImageComponent {
      */
     ngOnDestroy() {
         this.cleanupObserver();
+        this.cleanupResizeObserver();
     }
     /**
      * Creates the image object with the provided properties.
@@ -998,6 +1017,41 @@ class ImageComponent {
         };
         this.image.set(newImage);
     }
+    resolvedSizes() {
+        if (this.image_width) {
+            return `${this.image_width}px`;
+        }
+        const measured = this.measuredWidthPx();
+        if (measured && measured > 0) {
+            return `${measured}px`;
+        }
+        return this.imageSizes;
+    }
+    setupResizeObserver() {
+        if (this.image_width || typeof ResizeObserver === 'undefined' || this.resizeObserver) {
+            return;
+        }
+        const host = this.el.nativeElement;
+        const syncWidth = Math.round(host.getBoundingClientRect().width || host.offsetWidth || 0);
+        if (syncWidth > 0) {
+            this.measuredWidthPx.set(syncWidth);
+            return;
+        }
+        this.resizeObserver = new ResizeObserver((entries) => {
+            const width = entries[0].borderBoxSize[0].inlineSize;
+            const rounded = Math.round(width);
+            if (rounded <= 0 || rounded === this.measuredWidthPx()) {
+                return;
+            }
+            this.measuredWidthPx.set(rounded);
+            this.cleanupResizeObserver();
+        });
+        this.resizeObserver.observe(host);
+    }
+    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.
@@ -1007,29 +1061,23 @@ class ImageComponent {
     setupLazyLoading() {
         return Promise.resolve().then(() => {
             // Defer setup until after the view is initialized to ensure the <img> element exists.
+            if (this.intersectionObserver) {
+                return;
+            }
             const imageElement = this.el.nativeElement.querySelector('img');
             if (!imageElement) {
                 return;
             }
+            if (this.loading === 'eager' || this.fetchpriority === 'high') {
+                this.loadImageSources(imageElement);
+                return;
+            }
             this.intersectionObserver = new IntersectionObserver((entries) => {
                 entries.forEach((entry) => {
                     if (entry.isIntersecting) {
-                        const img = entry.target;
-                        const source = img.parentElement?.querySelector('source');
-                        // Move the URL from data-src to src
-                        const dataSrc = img.getAttribute('data-src');
-                        if (dataSrc) {
-                            img.setAttribute('src', dataSrc);
-                        }
-                        // Move the URLs from data-srcset to srcset
-                        if (source) {
-                            const dataSrcset = source.getAttribute('data-srcset');
-                            if (dataSrcset) {
-                                source.setAttribute('srcset', dataSrcset);
-                            }
-                        }
+                        this.loadImageSources(entry.target);
                         // Stop observing this image once it's loaded.
-                        this.intersectionObserver?.unobserve(img);
+                        this.intersectionObserver?.unobserve(entry.target);
                     }
                 });
             }, {
@@ -1040,6 +1088,64 @@ class ImageComponent {
             this.intersectionObserver.observe(imageElement);
         });
     }
+    loadImageSources(img) {
+        if (this.lazySourcesApplied) {
+            return;
+        }
+        if (!this.image_width) {
+            const host = this.el.nativeElement;
+            const width = Math.round(host.getBoundingClientRect().width || host.offsetWidth || 0);
+            if (width > 0) {
+                this.measuredWidthPx.set(width);
+            }
+        }
+        const source = img.parentElement?.querySelector('source');
+        const dataSrcset = source?.getAttribute('data-srcset');
+        if (source) {
+            source.setAttribute('sizes', this.resolvedSizes());
+            if (dataSrcset) {
+                // Move the URLs from data-srcset to srcset
+                source.setAttribute('srcset', dataSrcset);
+            }
+        }
+        const dataSrc = img.getAttribute('data-src');
+        const slotWidthPx = this.image_width ?? this.measuredWidthPx() ?? 0;
+        let imgSrc = dataSrc;
+        if (dataSrcset && slotWidthPx > 0) {
+            imgSrc = this.pickSrcsetUrlForSlot(dataSrcset, slotWidthPx) ?? dataSrc;
+        }
+        if (imgSrc) {
+            // Move the URL from data-src to src
+            img.setAttribute('src', imgSrc);
+        }
+        this.lazySourcesApplied = true;
+    }
+    pickSrcsetUrlForSlot(srcset, slotWidthPx) {
+        const targetWidth = Math.ceil(slotWidthPx * (window.devicePixelRatio || 1));
+        const candidates = srcset
+            .split(',')
+            .map((candidate) => candidate.trim())
+            .map((candidate) => {
+            const descriptorIndex = candidate.lastIndexOf(' ');
+            if (descriptorIndex === -1) {
+                return null;
+            }
+            const url = candidate.slice(0, descriptorIndex).trim();
+            const width = parseInt(candidate.slice(descriptorIndex + 1), 10);
+            return url && !Number.isNaN(width) ? { url, width } : null;
+        })
+            .filter((candidate) => candidate !== null);
+        if (candidates.length === 0) {
+            return null;
+        }
+        const atOrAbove = candidates
+            .filter(({ width }) => width >= targetWidth)
+            .sort((a, b) => a.width - b.width);
+        if (atOrAbove.length > 0) {
+            return atOrAbove[0].url;
+        }
+        return candidates.sort((a, b) => b.width - a.width)[0].url;
+    }
     /**
      * Cleans up the IntersectionObserver to prevent memory leaks.
      * This method disconnects the observer and sets it to null.
@@ -1051,11 +1157,11 @@ class ImageComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ImageComponent, isStandalone: true, selector: "ui-image", inputs: { image_src: "image_src", image_alt_text: "image_alt_text", image_aria_describedby: "image_aria_describedby", image_fill: "image_fill", fetchpriority: "fetchpriority", loading: "loading", preload_aspect_ratio: "preload_aspect_ratio", image_width: "image_width" }, outputs: { image_loaded: "image_loaded" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "@if (image()) {\n  <picture>\n    <source\n      [attr.sizes]=\"image().width ?? imageSizes\"\n      [attr.srcset]=\"null\"\n      [attr.data-srcset]=\"image().srcSetUrls\"\n      type=\"image/webp\"\n    />\n\n    <img\n      [class.imageFill]=\"image().fill\"\n      [attr.width]=\"image().ratioWidth\"\n      [attr.height]=\"image().ratioHeight\"\n      [attr.src]=\"null\"\n      [attr.data-src]=\"image().fallbackUrl\"\n      [attr.loading]=\"image().loading\"\n      [attr.fetchpriority]=\"image().fetchpriority\"\n      [attr.alt]=\"image().altText\"\n      [attr.aria-describedby]=\"image().ariaDescribedby\"\n      [ngStyle]=\"{ 'aspect-ratio': image().preloadAspectRatio }\"\n      (load)=\"image_loaded.emit()\"\n      [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n    />\n  </picture>\n}\n", styles: [":host.imageFill,:host.imageFill picture,:host.imageFill img{display:block;height:100%}:host.imageFill img{object-fit:cover}img{display:block;width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ImageComponent, isStandalone: true, selector: "ui-image", inputs: { image_src: "image_src", image_alt_text: "image_alt_text", image_aria_describedby: "image_aria_describedby", image_fill: "image_fill", fetchpriority: "fetchpriority", loading: "loading", preload_aspect_ratio: "preload_aspect_ratio", image_width: "image_width" }, outputs: { image_loaded: "image_loaded" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "@if (image()) {\n  <picture>\n    <source\n      [attr.sizes]=\"resolvedSizes()\"\n      [attr.srcset]=\"null\"\n      [attr.data-srcset]=\"image().srcSetUrls\"\n      type=\"image/webp\"\n    />\n\n    <img\n      [class.imageFill]=\"image().fill\"\n      [attr.width]=\"image().ratioWidth\"\n      [attr.height]=\"image().ratioHeight\"\n      [attr.data-src]=\"image().fallbackUrl\"\n      [attr.loading]=\"image().loading\"\n      [attr.fetchpriority]=\"image().fetchpriority\"\n      [attr.alt]=\"image().altText\"\n      [attr.aria-describedby]=\"image().ariaDescribedby\"\n      [ngStyle]=\"{ 'aspect-ratio': image().preloadAspectRatio }\"\n      (load)=\"image_loaded.emit()\"\n      [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n    />\n  </picture>\n}\n", styles: [":host.imageFill,:host.imageFill picture,:host.imageFill img{display:block;height:100%}:host.imageFill img{object-fit:cover}img{display:block;width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgStyle], selector: 'ui-image', template: "@if (image()) {\n  <picture>\n    <source\n      [attr.sizes]=\"image().width ?? imageSizes\"\n      [attr.srcset]=\"null\"\n      [attr.data-srcset]=\"image().srcSetUrls\"\n      type=\"image/webp\"\n    />\n\n    <img\n      [class.imageFill]=\"image().fill\"\n      [attr.width]=\"image().ratioWidth\"\n      [attr.height]=\"image().ratioHeight\"\n      [attr.src]=\"null\"\n      [attr.data-src]=\"image().fallbackUrl\"\n      [attr.loading]=\"image().loading\"\n      [attr.fetchpriority]=\"image().fetchpriority\"\n      [attr.alt]=\"image().altText\"\n      [attr.aria-describedby]=\"image().ariaDescribedby\"\n      [ngStyle]=\"{ 'aspect-ratio': image().preloadAspectRatio }\"\n      (load)=\"image_loaded.emit()\"\n      [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n    />\n  </picture>\n}\n", styles: [":host.imageFill,:host.imageFill picture,:host.imageFill img{display:block;height:100%}:host.imageFill img{object-fit:cover}img{display:block;width:100%;height:auto}\n"] }]
+            args: [{ standalone: true, imports: [NgStyle], selector: 'ui-image', template: "@if (image()) {\n  <picture>\n    <source\n      [attr.sizes]=\"resolvedSizes()\"\n      [attr.srcset]=\"null\"\n      [attr.data-srcset]=\"image().srcSetUrls\"\n      type=\"image/webp\"\n    />\n\n    <img\n      [class.imageFill]=\"image().fill\"\n      [attr.width]=\"image().ratioWidth\"\n      [attr.height]=\"image().ratioHeight\"\n      [attr.data-src]=\"image().fallbackUrl\"\n      [attr.loading]=\"image().loading\"\n      [attr.fetchpriority]=\"image().fetchpriority\"\n      [attr.alt]=\"image().altText\"\n      [attr.aria-describedby]=\"image().ariaDescribedby\"\n      [ngStyle]=\"{ 'aspect-ratio': image().preloadAspectRatio }\"\n      (load)=\"image_loaded.emit()\"\n      [attr.role]=\"image().altText?.length > 0 ? 'img' : 'presentation'\"\n    />\n  </picture>\n}\n", styles: [":host.imageFill,:host.imageFill picture,:host.imageFill img{display:block;height:100%}:host.imageFill img{object-fit:cover}img{display:block;width:100%;height:auto}\n"] }]
         }], propDecorators: { image_src: [{
                 type: Input,
                 args: [{ required: true }]