oasys-lib 2.35.2 → 2.35.3

package/fesm2022/oasys-lib.mjs

@@ -942,7 +942,7 @@ class ImageComponent {
     image_fill = false;
     fetchpriority = 'auto';
     loading = 'lazy';
-    preload_aspect_ratio = '1:1';
+    preload_aspect_ratio = null;
     image_width = null; // explicit rendered width in px, when known by the consumer
     image_sizes = null; // fallback `sizes` value for non-lazy / no-auto-support cases
     image_loaded = new EventEmitter();
@@ -972,19 +972,19 @@ class ImageComponent {
      * Creates the image object with the provided properties.
      */
     createImage() {
-        const ratios = this.preload_aspect_ratio.split(':');
+        const ratios = this.preload_aspect_ratio?.split(':');
         const imageUrlResponse = this.imageUrlProvider.generateImageUrl(this.image_src, this.breakpoints, this.fallbackBreakpoint);
         const loading = this.resolveLoading();
         const newImage = {
             ...imageUrlResponse,
-            ratioWidth: parseInt(ratios[0], 10),
-            ratioHeight: parseInt(ratios[1], 10),
+            ratioWidth: ratios ? parseInt(ratios[0], 10) : undefined,
+            ratioHeight: ratios ? parseInt(ratios[1], 10) : undefined,
             loading,
             fill: this.image_fill,
             fetchpriority: this.fetchpriority,
             preloadAspectRatio: this.preload_aspect_ratio,
             width: this.image_width ? `${this.image_width}px` : null,
-            sizes: this.resolveSizes(loading),
+            sizes: this.resolveSizes(),
             altText: this.image_alt_text,
             ariaDescribedby: this.image_aria_describedby ?? null,
         };
@@ -993,19 +993,18 @@ class ImageComponent {
     resolveLoading() {
         return this.fetchpriority === 'high' ? 'eager' : this.loading;
     }
-    resolveSizes(loading) {
+    resolveSizes() {
         if (this.image_width) {
             return `${this.image_width}px`;
         }
-        const fallback = this.image_sizes ?? '100vw';
-        return loading === 'lazy' ? `auto, ${fallback}` : fallback;
+        return this.image_sizes ?? '100vw';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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", image_sizes: "image_sizes" }, outputs: { image_loaded: "image_loaded" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "@if (image()) {\n  <picture>\n    <source\n      [attr.srcset]=\"image().srcSetUrls\"\n      [attr.sizes]=\"image().sizes\"\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]=\"image().fallbackUrl\"\n      [attr.sizes]=\"image().sizes\"\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{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}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.25", 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", image_sizes: "image_sizes" }, outputs: { image_loaded: "image_loaded" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "@if (image()) {\n  <picture>\n    <source\n      [attr.srcset]=\"image().srcSetUrls\"\n      [attr.sizes]=\"image().sizes\"\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]=\"image().fallbackUrl\"\n      [attr.sizes]=\"image().sizes\"\n      [attr.loading]=\"image().loading\"\n      [attr.fetchpriority]=\"image().fetchpriority\"\n      [attr.alt]=\"image().altText\"\n      [attr.aria-describedby]=\"image().ariaDescribedby\"\n      [ngStyle]=\"image().preloadAspectRatio ? { '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{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}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.25", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgStyle], selector: 'ui-image', template: "@if (image()) {\n  <picture>\n    <source\n      [attr.srcset]=\"image().srcSetUrls\"\n      [attr.sizes]=\"image().sizes\"\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]=\"image().fallbackUrl\"\n      [attr.sizes]=\"image().sizes\"\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{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}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.srcset]=\"image().srcSetUrls\"\n      [attr.sizes]=\"image().sizes\"\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]=\"image().fallbackUrl\"\n      [attr.sizes]=\"image().sizes\"\n      [attr.loading]=\"image().loading\"\n      [attr.fetchpriority]=\"image().fetchpriority\"\n      [attr.alt]=\"image().altText\"\n      [attr.aria-describedby]=\"image().ariaDescribedby\"\n      [ngStyle]=\"image().preloadAspectRatio ? { '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{display:block;width:100%;height:100%}:host.imageFill picture,:host.imageFill img{display:block;width:100%;height:100%}:host.imageFill img{object-fit:cover}:host{display:block}img{display:block;width:100%;height:auto}\n"] }]
         }], propDecorators: { image_src: [{
                 type: Input,
                 args: [{ required: true }]