oasys-lib 2.24.0 → 2.25.0

package/fesm2022/oasys-lib.mjs

@@ -501,6 +501,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+const IMAGE_URL_PROVIDER = new InjectionToken('IMAGE_URL_PROVIDER');
+const IMAGE_BREAKPOINTS = new InjectionToken('IMAGE_BREAKPOINTS', {
+    providedIn: 'root',
+    factory: () => [
+        320, 360, 375, 414, 640, 750, 768, 1080, 1280, 1366, 1440, 1536, 1600, 1680, 1920, 2560, 3440,
+        3840,
+    ],
+});
+
 const MEDIA_BASE_URL_TOKEN = new InjectionToken('MEDIA_BASE_URL_TOKEN');
 
 const ROUTING_HANDLER = new InjectionToken('ROUTING_HANDLER');
@@ -955,13 +964,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+/**
+ * @deprecated Use IMAGE_URL_PROVIDER token instead. This service will be removed in a future major version.
+ * Consuming applications should provide their own ImageUrlProvider implementation via the token.
+ */
 class ImageService {
     mediaUrl = inject(MEDIA_BASE_URL_TOKEN).mediaBaseUrl;
-    fallbackBreakpoint = 768;
-    breakpoints = [
-        320, 360, 375, 414, 640, 750, 768, 1080, 1280, 1366, 1440, 1536, 1600, 1680, 1920, 2560, 3440,
-        3840,
-    ];
     getQualityForWidth(width) {
         return width > 1440 ? 50 : 75;
     }
@@ -997,18 +1005,18 @@ class ImageService {
     getImageUrlsFromCDN(baseUrl, format, sizes, isFallback) {
         const cdnType = this.detectCdnType(baseUrl);
         if (isFallback) {
-            sizes = [this.fallbackBreakpoint];
+            sizes = [sizes[0]];
         }
         return this.generateUrls(baseUrl, format, sizes, isFallback, cdnType);
     }
-    generateImageUrl(baseUrl) {
+    generateImageUrl(sourceUrl, breakpoints, fallbackBreakpoint) {
         return {
-            srcSetUrls: this.getImageUrlsFromCDN(baseUrl, 'webp', this.breakpoints, false),
-            fallbackUrl: this.getImageUrlsFromCDN(baseUrl, 'jpg', this.breakpoints, true),
+            srcSetUrls: this.getImageUrlsFromCDN(sourceUrl, 'webp', breakpoints, false),
+            fallbackUrl: this.getImageUrlsFromCDN(sourceUrl, 'jpg', [fallbackBreakpoint], true),
         };
     }
-    getImageSizes() {
-        return this.breakpoints.map((size) => `(max-width: ${size}px) ${size}px`).join(', ');
+    getImageSizes(breakpoints) {
+        return breakpoints.map((size) => `(max-width: ${size}px) ${size}px`).join(', ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageService, providedIn: 'root' });
@@ -1037,13 +1045,16 @@ class ImageComponent {
     preload_aspect_ratio = '1:1';
     image_width = null; // source when defining sizes either relates on viewport width or a specificed width in pixels
     image_loaded = new EventEmitter();
-    imageService = inject(ImageService);
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- ImageService is the backwards-compatible fallback until consumers provide IMAGE_URL_PROVIDER
+    imageUrlProvider = inject(IMAGE_URL_PROVIDER, { optional: true }) ?? inject(ImageService);
     el = inject((ElementRef));
     image = signal(null, ...(ngDevMode ? [{ debugName: "image" }] : []));
-    imageSizes = this.imageService.getImageSizes();
+    breakpoints = inject(IMAGE_BREAKPOINTS);
+    fallbackBreakpoint = 768;
+    imageSizes = this.breakpoints.map((size) => `(max-width: ${size}px) ${size}px`).join(', ');
     intersectionObserver = null;
     get class() {
-        return `${this.image_fill ? 'imageFill' : ''}`;
+        return this.image_fill ? 'imageFill' : '';
     }
     /**
      * On init lifecycle hook to create the image.
@@ -1056,10 +1067,10 @@ class ImageComponent {
      * On changes, handle any changes in input properties.
      */
     ngOnChanges(changes) {
-        if (changes['image_src'] || changes['image_width'] || changes['preload_aspect_ratio']) {
+        if ('image_src' in changes || 'image_width' in changes || 'preload_aspect_ratio' in changes) {
             this.createImage();
             this.cleanupObserver();
-            this.setupLazyLoading();
+            void this.setupLazyLoading();
         }
     }
     /**
@@ -1073,7 +1084,7 @@ class ImageComponent {
      */
     createImage() {
         const ratios = this.preload_aspect_ratio.split(':');
-        const imageUrlResponse = this.imageService.generateImageUrl(this.image_src);
+        const imageUrlResponse = this.imageUrlProvider.generateImageUrl(this.image_src, this.breakpoints, this.fallbackBreakpoint);
         const newImage = {
             ...imageUrlResponse,
             ratioWidth: parseInt(ratios[0], 10),
@@ -4238,5 +4249,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BannerComponent, BreadcrumbsComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, ComboboxComponent, DividerComponent, FormErrorsComponent, FormGroupComponent, HeroComponent, IconComponent, ImageComponent, LayoutBoxComponent, LayoutContainerComponent, LayoutGridColumnComponent, LayoutGridComponent, LayoutStackComponent, MEDIA_BASE_URL_TOKEN, OasysAlertCancelDirective, OasysAlertComponent, OasysAlertConfirmDirective, OasysAlertContentDirective, OasysAlertModule, OasysAlertTitleDirective, BannerComponent as OasysBannerComponent, OasysBannerModule, OasysBreadcrumbModule, BreadcrumbsComponent as OasysBreadcrumbsComponent, OasysButtonComponent, OasysButtonGroupComponent, OasysButtonGroupModule, OasysButtonModule, CardComponent as OasysCardComponent, OasysCardModule, CarouselComponent as OasysCarouselComponent, OasysCarouselModule, CheckboxComponent as OasysCheckboxComponent, OasysCheckboxModule, ChipComponent as OasysChipComponent, OasysChipModule, ComboboxComponent as OasysComboboxComponent, OasysComboboxModule, DividerComponent as OasysDividerComponent, OasysDividerModule, FormErrorsComponent as OasysFormErrorsComponent, OasysFormErrorsModule, OasysFormErrorsSummaryComponent, OasysFormErrorsSummaryItemComponent, OasysFormErrorsSummaryTitleComponent, FormGroupComponent as OasysFormGroupComponent, OasysFormGroupModule, OasysHeadingComponent, OasysHeadingModule, HeroComponent as OasysHeroComponent, OasysHeroModule, IconComponent as OasysIconComponent, OasysIconModule, ImageComponent as OasysImageComponent, OasysImageModule, LayoutBoxComponent as OasysLayoutBoxComponent, LayoutContainerComponent as OasysLayoutContainerComponent, LayoutGridColumnComponent as OasysLayoutGridColumnComponent, LayoutGridComponent as OasysLayoutGridComponent, OasysLayoutModule, LayoutStackComponent as OasysLayoutStackComponent, OasysPillComponent, OasysPillGroupComponent, OasysPillGroupModule, OasysPillModule, ProgressBarComponent as OasysProgressBarComponent, PromoCardComponent as OasysPromoCardComponent, OasysPromoCardModule, RadioComponent as OasysRadioComponent, OasysRadioModule, SectionComponent as OasysSectionComponent, SelectCardComponent as OasysSelectCardComponent, OasysSelectCardModule, SeoBlockComponent as OasysSeoBlockComponent, OasysSeoBlockModule, OasysTabComponent, OasysTabGroupComponent, OasysTabsModule, TextComponent as OasysTextComponent, TextInputComponent as OasysTextInputComponent, OasysTextInputModule, OasysTextModule, ProgressBarComponent, PromoCardComponent, ROUTING_HANDLER, RadioComponent, SWIPER_PROVIDER_TOKEN, SectionComponent, SectionModule, SelectCardComponent, SeoBlockComponent, SwiperProvider, TextComponent };
+export { BannerComponent, BreadcrumbsComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, ComboboxComponent, DividerComponent, FormErrorsComponent, FormGroupComponent, HeroComponent, IMAGE_BREAKPOINTS, IMAGE_URL_PROVIDER, IconComponent, ImageComponent, LayoutBoxComponent, LayoutContainerComponent, LayoutGridColumnComponent, LayoutGridComponent, LayoutStackComponent, MEDIA_BASE_URL_TOKEN, OasysAlertCancelDirective, OasysAlertComponent, OasysAlertConfirmDirective, OasysAlertContentDirective, OasysAlertModule, OasysAlertTitleDirective, BannerComponent as OasysBannerComponent, OasysBannerModule, OasysBreadcrumbModule, BreadcrumbsComponent as OasysBreadcrumbsComponent, OasysButtonComponent, OasysButtonGroupComponent, OasysButtonGroupModule, OasysButtonModule, CardComponent as OasysCardComponent, OasysCardModule, CarouselComponent as OasysCarouselComponent, OasysCarouselModule, CheckboxComponent as OasysCheckboxComponent, OasysCheckboxModule, ChipComponent as OasysChipComponent, OasysChipModule, ComboboxComponent as OasysComboboxComponent, OasysComboboxModule, DividerComponent as OasysDividerComponent, OasysDividerModule, FormErrorsComponent as OasysFormErrorsComponent, OasysFormErrorsModule, OasysFormErrorsSummaryComponent, OasysFormErrorsSummaryItemComponent, OasysFormErrorsSummaryTitleComponent, FormGroupComponent as OasysFormGroupComponent, OasysFormGroupModule, OasysHeadingComponent, OasysHeadingModule, HeroComponent as OasysHeroComponent, OasysHeroModule, IconComponent as OasysIconComponent, OasysIconModule, ImageComponent as OasysImageComponent, OasysImageModule, LayoutBoxComponent as OasysLayoutBoxComponent, LayoutContainerComponent as OasysLayoutContainerComponent, LayoutGridColumnComponent as OasysLayoutGridColumnComponent, LayoutGridComponent as OasysLayoutGridComponent, OasysLayoutModule, LayoutStackComponent as OasysLayoutStackComponent, OasysPillComponent, OasysPillGroupComponent, OasysPillGroupModule, OasysPillModule, ProgressBarComponent as OasysProgressBarComponent, PromoCardComponent as OasysPromoCardComponent, OasysPromoCardModule, RadioComponent as OasysRadioComponent, OasysRadioModule, SectionComponent as OasysSectionComponent, SelectCardComponent as OasysSelectCardComponent, OasysSelectCardModule, SeoBlockComponent as OasysSeoBlockComponent, OasysSeoBlockModule, OasysTabComponent, OasysTabGroupComponent, OasysTabsModule, TextComponent as OasysTextComponent, TextInputComponent as OasysTextInputComponent, OasysTextInputModule, OasysTextModule, ProgressBarComponent, PromoCardComponent, ROUTING_HANDLER, RadioComponent, SWIPER_PROVIDER_TOKEN, SectionComponent, SectionModule, SelectCardComponent, SeoBlockComponent, SwiperProvider, TextComponent };
 //# sourceMappingURL=oasys-lib.mjs.map