ngx-picture/fesm2022/ngx-picture.mjs.map

An Angular library to properly size, lazy load images, and use next generation formats

{"version":3,"file":"ngx-picture.mjs","sources":["../../../projects/ngx-picture/src/lib/default-breakpoints.ts","../../../projects/ngx-picture/src/lib/cloudinary-config.ts","../../../projects/ngx-picture/src/lib/graph-cms-config.ts","../../../projects/ngx-picture/src/lib/imagekit-config.ts","../../../projects/ngx-picture/src/lib/ngx-picture-config.token.ts","../../../projects/ngx-picture/src/lib/picture/picture.component.ts","../../../projects/ngx-picture/src/lib/picture/picture.component.html","../../../projects/ngx-picture/src/lib/ngx-picture.module.ts","../../../projects/ngx-picture/src/public-api.ts","../../../projects/ngx-picture/src/ngx-picture.ts"],"sourcesContent":["export const DEFAULT_BREAKPOINTS = {\r\n  '(min-width: 1280px) and (max-width: 1919.99px)': 1280,\r\n  '(max-width: 599.99px)': 300,\r\n  '(min-width: 600px) and (max-width: 959.99px)': 600,\r\n  '(min-width: 960px) and (max-width: 1279.99px)': 960,\r\n  '(min-width: 1920px)': 1920\r\n};\r\n","import { DEFAULT_BREAKPOINTS } from './default-breakpoints';\r\nimport { NgxPictureConfig } from './ngx-picture-config';\r\nimport { ImageFormat } from './picture/picture.component';\r\n\r\nexport function cloudinarySrcInterpolator(\r\n  url: string | undefined,\r\n  imageFormat: ImageFormat,\r\n  breakpoint: string,\r\n  breakpointValue: number\r\n): string | undefined {\r\n  return url\r\n    ? `${url.replace(\r\n        'upload/',\r\n        'upload/w_' + breakpointValue + '/f_' + imageFormat + '/'\r\n      )}`\r\n    : undefined;\r\n}\r\n\r\nexport const CLOUDINARY_CONFIG: NgxPictureConfig<number> = {\r\n  breakpoints: DEFAULT_BREAKPOINTS,\r\n  imageFormats: ['webp', 'jpg'],\r\n  srcInterpolator: cloudinarySrcInterpolator,\r\n};\r\n","import { DEFAULT_BREAKPOINTS } from './default-breakpoints';\r\nimport { NgxPictureConfig } from './ngx-picture-config';\r\nimport { ImageFormat } from './picture/picture.component';\r\n\r\nexport function graphCmsSrcInterpolator(\r\n  url: string | undefined,\r\n  imageFormat: ImageFormat,\r\n  breakpoint: string,\r\n  breakpointValue: number\r\n): string | undefined {\r\n  return url\r\n    ? `https://media.graphcms.com/resize=w:${breakpointValue},fit:scale/output=format:${\r\n        imageFormat === 'jpeg' ? 'jpg' : 'webp'\r\n      }/${url.replace('https://media.graphcms.com/', '')}`\r\n    : undefined;\r\n}\r\n\r\nexport const GRAPH_CMS_CONFIG: NgxPictureConfig<number> = {\r\n  breakpoints: DEFAULT_BREAKPOINTS,\r\n  imageFormats: ['webp', 'jpg'],\r\n  srcInterpolator: graphCmsSrcInterpolator,\r\n};\r\n","import { DEFAULT_BREAKPOINTS } from './default-breakpoints';\r\nimport { NgxPictureConfig } from './ngx-picture-config';\r\nimport { ImageFormat } from './picture/picture.component';\r\n\r\nexport function imagekitSrcInterpolator(\r\n  url: string | undefined,\r\n  imageFormat: ImageFormat,\r\n  breakpoint: string,\r\n  breakpointValue: number\r\n): string | undefined {\r\n  const fileName = url?.substring(url.lastIndexOf('/'));\r\n  return url && fileName\r\n    ? `${url.replace(\r\n        fileName,\r\n        '/tr:w-' + breakpointValue + ',f-' + imageFormat + fileName\r\n      )}`\r\n    : undefined;\r\n}\r\n\r\nexport const IMAGEKIT_CONFIG: NgxPictureConfig<number> = {\r\n  breakpoints: DEFAULT_BREAKPOINTS,\r\n  imageFormats: ['webp', 'jpg'],\r\n  srcInterpolator: imagekitSrcInterpolator,\r\n};\r\n","import { InjectionToken } from '@angular/core';\r\nimport { NgxPictureConfig } from './ngx-picture-config';\r\n\r\nexport const NGX_PICTURE_CONFIG = new InjectionToken<NgxPictureConfig>(\r\n  'NGX_PICTURE_CONFIG'\r\n);\r\n","import { isPlatformServer } from '@angular/common';\r\nimport {\r\n  AfterViewInit,\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ContentChild,\r\n  ElementRef,\r\n  EventEmitter,\r\n  Inject,\r\n  Input,\r\n  OnInit,\r\n  Optional,\r\n  Output,\r\n  PLATFORM_ID,\r\n  TemplateRef,\r\n} from '@angular/core';\r\nimport { WINDOW } from 'ngx-window-token';\r\nimport { NgxPictureConfig } from '../ngx-picture-config';\r\nimport { NGX_PICTURE_CONFIG } from '../ngx-picture-config.token';\r\n\r\nexport type ImageFormat =\r\n  | 'apng'\r\n  | 'bmp'\r\n  | 'gif'\r\n  | 'jpeg'\r\n  | 'png'\r\n  | 'svg'\r\n  | 'tiff'\r\n  | 'webp'\r\n  | 'jp2'\r\n  | 'jxr';\r\n\r\n@Component({\r\n  selector: 'ngx-picture',\r\n  templateUrl: './picture.component.html',\r\n  styleUrls: ['./picture.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class PictureComponent implements OnInit, AfterViewInit {\r\n  @ContentChild('imgTemplate') imgTemplate:\r\n    | TemplateRef<HTMLImageElement>\r\n    | undefined;\r\n  @Input() src: string | undefined;\r\n  @Input() imageFormats = this.ngxPictureConfig.imageFormats;\r\n  @Input() breakpoints = this.ngxPictureConfig.breakpoints;\r\n  @Input() alt: string | undefined;\r\n  @Input() lazyLoad = false;\r\n\r\n  @Input() srcInterpolator = this.ngxPictureConfig.srcInterpolator;\r\n  @Output() loaded = new EventEmitter<Event>();\r\n\r\n  show = false;\r\n\r\n  private intersectionObserver: IntersectionObserver | undefined;\r\n\r\n  constructor(\r\n    @Inject(PLATFORM_ID) private platformId: any,\r\n    @Inject(NGX_PICTURE_CONFIG) private ngxPictureConfig: NgxPictureConfig,\r\n    @Optional() @Inject(WINDOW) private window: Window,\r\n    private elementRef: ElementRef,\r\n    private changeDetectorRef: ChangeDetectorRef\r\n  ) {}\r\n\r\n  ngOnInit() {\r\n    if (isPlatformServer(this.platformId)) {\r\n      this.show = true;\r\n    }\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    if (this.lazyLoad && this.window && 'IntersectionObserver' in this.window) {\r\n      this.intersectionObserver = new IntersectionObserver(\r\n        (entries: Array<IntersectionObserverEntry>) => {\r\n          if (\r\n            entries.find((entry: IntersectionObserverEntry) => {\r\n              return (\r\n                entry.isIntersecting &&\r\n                entry.target === this.elementRef.nativeElement\r\n              );\r\n            })\r\n          ) {\r\n            this.showLazyPicture();\r\n          }\r\n        },\r\n        {}\r\n      );\r\n\r\n      this.intersectionObserver.observe(this.elementRef.nativeElement);\r\n    } else {\r\n      this.show = true;\r\n      this.changeDetectorRef.detectChanges();\r\n    }\r\n  }\r\n\r\n  private showLazyPicture() {\r\n    this.intersectionObserver?.unobserve(this.elementRef.nativeElement);\r\n    this.show = true;\r\n    this.changeDetectorRef.detectChanges();\r\n  }\r\n}\r\n","<picture class=\"ngx-picture__picture\" *ngIf=\"show\">\r\n  <ng-container *ngFor=\"let imageFormat of imageFormats\">\r\n    <source\r\n      *ngFor=\"let breakpoint of breakpoints | keyvalue\"\r\n      [srcset]=\"\r\n        srcInterpolator(src, imageFormat, breakpoint.key, breakpoint.value)\r\n      \"\r\n      [media]=\"breakpoint.key\"\r\n      type=\"image/{{ imageFormat }}\"\r\n    />\r\n  </ng-container>\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"imgTemplate || defaultImageTemplate\"\r\n    [ngTemplateOutletContext]=\"{ $implicit: { src: src, alt: alt } }\"\r\n  >\r\n  </ng-container>\r\n  <ng-template #defaultImageTemplate>\r\n    <img\r\n      [src]=\"src\"\r\n      [alt]=\"alt\"\r\n      (load)=\"loaded.emit($event)\"\r\n      class=\"ngx-picture__picture__img\"\r\n      loading=\"lazy\"\r\n      #img\r\n    />\r\n  </ng-template>\r\n</picture>\r\n","import { CommonModule } from '@angular/common';\r\nimport { ModuleWithProviders, NgModule } from '@angular/core';\r\nimport { NgxPictureConfig } from './ngx-picture-config';\r\nimport { NGX_PICTURE_CONFIG } from './ngx-picture-config.token';\r\nimport { PictureComponent } from './picture/picture.component';\r\n\r\n@NgModule({\r\n  declarations: [PictureComponent],\r\n  imports: [CommonModule],\r\n  exports: [PictureComponent],\r\n})\r\nexport class NgxPictureModule {\r\n  static forRoot<T>(\r\n    config: NgxPictureConfig<T>\r\n  ): ModuleWithProviders<NgxPictureModule> {\r\n    return {\r\n      ngModule: NgxPictureModule,\r\n      providers: [\r\n        {\r\n          provide: NGX_PICTURE_CONFIG,\r\n          useValue: config,\r\n        },\r\n      ],\r\n    };\r\n  }\r\n}\r\n","/*\n * Public API Surface of ngx-picture\n */\nexport * from './lib/cloudinary-config';\nexport * from './lib/default-breakpoints';\nexport * from './lib/graph-cms-config';\nexport * from './lib/imagekit-config';\nexport * from './lib/ngx-picture-config';\nexport * from './lib/ngx-picture-config.token';\nexport * from './lib/ngx-picture.module';\nexport * from './lib/picture/picture.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}