@ethlete/contentful 0.1.0-next.8 → 1.0.0

package/fesm2020/ethlete-contentful.mjs

@@ -1,9 +1,11 @@
-import { DOCUMENT, NgIf, NgClass, NgOptimizedImage } from '@angular/common';
+import { NgIf, NgClass, NgOptimizedImage, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Renderer2, ElementRef, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import { InjectionToken, inject, ChangeDetectorRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Renderer2, ElementRef, ComponentFactoryResolver, ApplicationRef, Injector } from '@angular/core';
 import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i1 from '@ethlete/components';
+import { PictureDataDirective, PictureComponent } from '@ethlete/components';
 import { BLOCKS, INLINES } from '@contentful/rich-text-types';
+import { gql } from '@ethlete/query';
 
 const CONTENTFUL_CONFIG = new InjectionToken('ContentfulConfig');
 
@@ -18,20 +20,248 @@ const createContentfulConfig = (config = {}) => ({
             video: ContentfulVideoComponent,
         },
         customComponents: {},
+        imageOptions: {
+            srcsetSizes: ['375w', '1280w', '1920w', '2560w'],
+            sizes: [],
+            backgroundColor: null,
+        },
     },
     ...(config || {}),
 });
 
 const RICH_TEXT_RENDERER_COMPONENT_DATA = new InjectionToken('RICH_TEXT_RENDERER_COMPONENT_DATA');
 
+const provideContentfulConfig = (contentfulConfig = {}) => {
+    return { provide: CONTENTFUL_CONFIG, useValue: createContentfulConfig(contentfulConfig) };
+};
+const isContentfulImage = (v) => {
+    return !!v && 'asset' in v && 'alt' in v && 'resizeBehavior' in v && 'focusArea' in v;
+};
+const isContentfulAsset = (v) => {
+    return !!v && 'contentType' in v && 'description' in v && 'height' in v && 'url' in v && 'width' in v;
+};
+
+const generateDefaultContentfulImageSource = (data) => {
+    const { url, contentType } = data;
+    return {
+        type: contentType,
+        srcset: url,
+    };
+};
+/**
+ * Parses source set sizes into an object containing with and height. Eg.
+ * - `"400"` - 400px width
+ * - `"400x300"` - 400px width and 300px height
+ * - `"400w"` - 400px width
+ * - `"400h"` - 400px height
+ * - `"400wx300h"` - 400px width and 300px height
+ **/
+const parseContentfulImageSize = (size) => {
+    let width = null;
+    let height = null;
+    if (size.includes('x')) {
+        const [w, h] = size.split('x');
+        width = w;
+        height = h;
+    }
+    else if (size.includes('h')) {
+        height = size;
+    }
+    else {
+        width = size;
+    }
+    return {
+        width: width ? parseInt(width, 10) : null,
+        height: height ? parseInt(height, 10) : null,
+    };
+};
+const generateContentfulImageSources = (data, srcsetSizes, backgroundColor) => {
+    const assetData = isContentfulImage(data) ? data.asset : data;
+    const imageData = isContentfulImage(data) ? data : null;
+    if (!assetData) {
+        return [];
+    }
+    const sources = [];
+    const SOURCE_TYPES = ['image/avif', 'image/webp', 'image/png', 'image/jpg'];
+    for (const type of SOURCE_TYPES) {
+        const baseUrl = assetData.url;
+        const sourceSets = [];
+        const queryParams = [];
+        // Set the format (e.g. 'fm=webp')
+        queryParams.push(`fm=${type.split('/')[1]}`);
+        if (backgroundColor) {
+            queryParams.push(`bg=rgb:${backgroundColor}`);
+        }
+        if (imageData) {
+            if (imageData.quality) {
+                queryParams.push(`q=${imageData.quality}`);
+            }
+            if (imageData.focusArea) {
+                queryParams.push(`f=${imageData.focusArea}`);
+            }
+            if (imageData.resizeBehavior) {
+                queryParams.push(`fit=${imageData.resizeBehavior}`);
+            }
+        }
+        if (srcsetSizes?.length) {
+            const urlWithParams = `${baseUrl}?${queryParams.join('&')}`;
+            for (const size of srcsetSizes) {
+                const { width, height } = parseContentfulImageSize(size);
+                if (width && height) {
+                    sourceSets.push(`${urlWithParams}&w=${width}&h=${height} ${width}w`);
+                }
+                else if (width) {
+                    sourceSets.push(`${urlWithParams}&w=${width} ${width}w`);
+                }
+                else if (height) {
+                    sourceSets.push(`${urlWithParams}&h=${height} ${height}h`);
+                }
+            }
+        }
+        sources.push({
+            type,
+            srcset: sourceSets.length ? sourceSets.join(', ') : `${baseUrl}?${queryParams.join('&')}`,
+        });
+    }
+    return sources;
+};
+
+class ContentfulImageComponent {
+    constructor() {
+        this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, {
+            optional: true,
+        });
+        this.pictureData = inject(PictureDataDirective);
+        this._cdr = inject(ChangeDetectorRef);
+        this._data = null;
+        this._sizes = [];
+        this._srcsetSizes = [];
+        this._backgroundColor = null;
+        this.sources = [];
+    }
+    get data() {
+        return this._data;
+    }
+    set data(v) {
+        const assetData = isContentfulImage(v) ? v.asset : v;
+        const imageData = isContentfulImage(v) ? v : null;
+        if (assetData && !assetData.contentType) {
+            this._data = null;
+            console.warn('The provided asset is invalid', v);
+            return;
+        }
+        if (assetData && !assetData.contentType.startsWith('image/')) {
+            throw new Error('The provided asset is not an image');
+        }
+        this._data = v ?? null;
+        this.pictureData.defaultSrc = assetData ? generateDefaultContentfulImageSource(assetData) : null;
+        this.pictureData.alt = imageData?.alt ?? assetData?.description ?? null;
+        this.pictureData.width = assetData?.width ?? null;
+        this.pictureData.height = assetData?.height ?? null;
+        this.pictureData.figcaption = imageData?.caption ?? null;
+        this.updateSizes();
+    }
+    get sizes() {
+        return this._sizes;
+    }
+    set sizes(v) {
+        this._sizes = v;
+        this.pictureData.sizes = this.sizes?.join(', ') ?? null;
+    }
+    get srcsetSizes() {
+        return this._srcsetSizes;
+    }
+    set srcsetSizes(v) {
+        this._srcsetSizes = v;
+        this.updateSizes();
+    }
+    get backgroundColor() {
+        return this._backgroundColor;
+    }
+    set backgroundColor(v) {
+        this._backgroundColor = v;
+        this.updateSizes();
+    }
+    ngOnInit() {
+        if (this._richTextData && !this.data) {
+            this.data = this._richTextData;
+        }
+    }
+    updateSizes() {
+        this.sources = this._data ? generateContentfulImageSources(this._data, this.srcsetSizes, this.backgroundColor) : [];
+        this._cdr.markForCheck();
+    }
+}
+ContentfulImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ContentfulImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { data: "data", sizes: "sizes", srcsetSizes: "srcsetSizes", backgroundColor: "backgroundColor" }, host: { classAttribute: "et-contentful-image" }, hostDirectives: [{ directive: i1.PictureDataDirective, inputs: ["imgClass", "imgClass", "hasPriority", "hasPriority", "figureClass", "figureClass", "pictureClass", "pictureClass", "figcaptionClass", "figcaptionClass"] }], ngImport: i0, template: `
+    <et-picture
+      [imgClass]="pictureData.imgClass"
+      [hasPriority]="pictureData.hasPriority"
+      [figureClass]="pictureData.figureClass"
+      [pictureClass]="pictureData.pictureClass"
+      [figcaptionClass]="pictureData.figcaptionClass"
+      [defaultSrc]="pictureData.defaultSrc"
+      [alt]="pictureData.alt"
+      [figcaption]="pictureData.figcaption"
+      [width]="pictureData.width"
+      [height]="pictureData.height"
+      [sizes]="pictureData.sizes"
+      [sources]="sources"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: ContentfulImageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-contentful-image',
+                    template: `
+    <et-picture
+      [imgClass]="pictureData.imgClass"
+      [hasPriority]="pictureData.hasPriority"
+      [figureClass]="pictureData.figureClass"
+      [pictureClass]="pictureData.pictureClass"
+      [figcaptionClass]="pictureData.figcaptionClass"
+      [defaultSrc]="pictureData.defaultSrc"
+      [alt]="pictureData.alt"
+      [figcaption]="pictureData.figcaption"
+      [width]="pictureData.width"
+      [height]="pictureData.height"
+      [sizes]="pictureData.sizes"
+      [sources]="sources"
+    />
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: true,
+                    imports: [NgIf, NgClass, NgOptimizedImage, PictureComponent],
+                    hostDirectives: [
+                        {
+                            directive: PictureDataDirective,
+                            // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                            inputs: ['imgClass', 'hasPriority', 'figureClass', 'pictureClass', 'figcaptionClass'],
+                        },
+                    ],
+                    host: {
+                        class: 'et-contentful-image',
+                    },
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], sizes: [{
+                type: Input
+            }], srcsetSizes: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }] } });
+
 const createRenderCommandsFromContentfulRichText = (options) => {
     const { data, config } = options;
     const commands = [];
     const resourceMap = createContentfulResourceMap(data.links);
-    createContentfulRenderCommand(data.json, { children: commands, payload: data.json.nodeType }, resourceMap, config.useTailwindClasses, config.components, config.customComponents);
+    createContentfulRenderCommand(data.json, { children: commands, payload: data.json.nodeType }, resourceMap, config);
     return commands;
 };
-const createContentfulRenderCommand = (node, parent, resourceMap, useTailwindClasses, assetComponents, customComponents) => {
+const createContentfulRenderCommand = (node, parent, resourceMap, config) => {
     const { nodeType, data: nodeData } = node;
     const { children, marks, value } = getContentfulNodeProps(node);
     const command = {
@@ -40,7 +270,7 @@ const createContentfulRenderCommand = (node, parent, resourceMap, useTailwindCla
         attributes: {
             ...(marks
                 ? {
-                    class: transformContentfulMarks(marks, useTailwindClasses),
+                    class: transformContentfulMarks(marks, config.useTailwindClasses),
                 }
                 : {}),
             ...(nodeData['uri'] ? { href: nodeData['uri'], target: '_blank' } : {}),
@@ -56,16 +286,16 @@ const createContentfulRenderCommand = (node, parent, resourceMap, useTailwindCla
             const isAudio = asset.contentType.startsWith('audio/');
             command.data = asset;
             if (isImage) {
-                command.payload = assetComponents.image;
+                command.payload = config.components.image;
             }
             else if (isVideo) {
-                command.payload = assetComponents.video;
+                command.payload = config.components.video;
             }
             else if (isAudio) {
-                command.payload = assetComponents.audio;
+                command.payload = config.components.audio;
             }
             else {
-                command.payload = assetComponents.file;
+                command.payload = config.components.file;
             }
         }
         else {
@@ -76,7 +306,9 @@ const createContentfulRenderCommand = (node, parent, resourceMap, useTailwindCla
         const entry = resourceMap.entriesBlock.get(entryId) ?? resourceMap.entriesInline.get(entryId);
         if (entry) {
             const type = entry?.__typename ?? 'ET_UNKNOWN';
-            const component = customComponents?.[type];
+            // "Image" is a special wrapper content model for contentful assets.
+            // It must be created by the user.
+            const component = type === 'Image' ? ContentfulImageComponent : config.customComponents?.[type];
             if (component) {
                 command.payload = component;
                 command.data = entry;
@@ -91,7 +323,7 @@ const createContentfulRenderCommand = (node, parent, resourceMap, useTailwindCla
     }
     if (children && (children.length !== 1 || children[0].nodeType !== 'text')) {
         children.forEach((child) => {
-            createContentfulRenderCommand(child, command, resourceMap, useTailwindClasses, assetComponents, customComponents);
+            createContentfulRenderCommand(child, command, resourceMap, config);
         });
     }
     parent.children.push(command);
@@ -215,7 +447,6 @@ class ContentfulRichTextRendererComponent {
         this._richText = null;
         this._renderer = inject(Renderer2);
         this._elementRef = inject(ElementRef);
-        this._viewContainerRef = inject(ViewContainerRef);
         this._componentFactoryResolver = inject(ComponentFactoryResolver);
         this._document = inject(DOCUMENT);
         this._appRef = inject(ApplicationRef);
@@ -227,15 +458,18 @@ class ContentfulRichTextRendererComponent {
     }
     set richText(v) {
         this._richText = v ?? null;
+        this.resetAndRender();
+    }
+    resetAndRender() {
         // clear childNodes to prevent appending new richtext elements to existing one
         const childElements = this._elementRef.nativeElement.childNodes;
         for (const child of childElements) {
             this._renderer.removeChild(this._elementRef.nativeElement, child);
         }
-        if (!v) {
+        if (!this._richText) {
             return;
         }
-        const commands = createRenderCommandsFromContentfulRichText({ data: v, config: this._config });
+        const commands = createRenderCommandsFromContentfulRichText({ data: this._richText, config: this._config });
         this._render(commands);
     }
     _render(commands) {
@@ -279,6 +513,11 @@ class ContentfulRichTextRendererComponent {
                 const portal = new DomPortalOutlet(parent, this._componentFactoryResolver, this._appRef, injector, this._document);
                 const comp = new ComponentPortal(command.payload);
                 const ref = comp.attach(portal);
+                if (ref.instance instanceof ContentfulImageComponent) {
+                    ref.instance.sizes = this._config.imageOptions.sizes;
+                    ref.instance.srcsetSizes = this._config.imageOptions.srcsetSizes;
+                    ref.instance.backgroundColor = this._config.imageOptions.backgroundColor;
+                }
                 element = ref.location.nativeElement;
             }
         }
@@ -288,9 +527,9 @@ class ContentfulRichTextRendererComponent {
         }
     }
 }
-ContentfulRichTextRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulRichTextRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { richText: "richText" }, host: { classAttribute: "et-contentful-rich-text-renderer" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
+ContentfulRichTextRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ContentfulRichTextRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { richText: "richText" }, host: { classAttribute: "et-contentful-rich-text-renderer" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-rich-text-renderer',
@@ -334,14 +573,14 @@ class ContentfulAudioComponent {
         }
     }
 }
-ContentfulAudioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulAudioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { data: "data", audioClass: "audioClass", figureClass: "figureClass", figcaptionClass: "figcaptionClass" }, ngImport: i0, template: `
+ContentfulAudioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ContentfulAudioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { data: "data", audioClass: "audioClass", figureClass: "figureClass", figcaptionClass: "figcaptionClass" }, ngImport: i0, template: `
     <figure *ngIf="data" [ngClass]="figureClass">
       <figcaption [ngClass]="figcaptionClass">{{ data.title }}</figcaption>
       <audio [ngClass]="audioClass" controls src="{{ data.url }}"></audio>
     </figure>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-audio',
@@ -389,13 +628,13 @@ class ContentfulFileComponent {
         }
     }
 }
-ContentfulFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { data: "data", fileClass: "fileClass" }, ngImport: i0, template: `
+ContentfulFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ContentfulFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { data: "data", fileClass: "fileClass" }, ngImport: i0, template: `
     <a *ngIf="data" [href]="data.url" [ngClass]="fileClass" class="underline" target="_blank">
       {{ data.title }} ({{ data.size }} Bytes)
     </a>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: ContentfulFileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-file',
@@ -415,90 +654,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                 type: Input
             }] } });
 
-class ContentfulImageComponent {
-    constructor() {
-        this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, { optional: true });
-        this._data = null;
-        this.imgClass = null;
-        this.pictureClass = null;
-        this._priority = false;
-    }
-    get data() {
-        return this._data;
-    }
-    set data(v) {
-        if (v && !v.contentType) {
-            this._data = null;
-            console.warn('The provided asset is invalid', v);
-            return;
-        }
-        if (v && !v.contentType.startsWith('image/')) {
-            throw new Error('The provided asset is not an image');
-        }
-        this._data = v ?? null;
-    }
-    get priority() {
-        return this._priority;
-    }
-    set priority(value) {
-        this._priority = coerceBooleanProperty(value);
-    }
-    ngOnInit() {
-        if (this._richTextData && !this.data) {
-            this.data = this._richTextData;
-        }
-    }
-}
-ContentfulImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { data: "data", imgClass: "imgClass", pictureClass: "pictureClass", priority: "priority" }, ngImport: i0, template: `
-    <picture *ngIf="data" [ngClass]="pictureClass">
-      <source srcset="{{ data.url }}?fm=avif" type="image/avif" />
-      <source srcset="{{ data.url }}?fm=webp" type="image/webp" />
-      <source srcset="{{ data.url }}?fm=jpg" type="image/jpeg" />
-      <img
-        [attr.alt]="data.description ?? undefined"
-        [width]="data.width ?? undefined"
-        [height]="data.height ?? undefined"
-        [priority]="data.priority ?? priority"
-        [ngClass]="imgClass"
-        ngSrc="{{ data.url }}"
-      />
-    </picture>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "disableOptimizedSrcset", "fill", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulImageComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'et-contentful-image',
-                    template: `
-    <picture *ngIf="data" [ngClass]="pictureClass">
-      <source srcset="{{ data.url }}?fm=avif" type="image/avif" />
-      <source srcset="{{ data.url }}?fm=webp" type="image/webp" />
-      <source srcset="{{ data.url }}?fm=jpg" type="image/jpeg" />
-      <img
-        [attr.alt]="data.description ?? undefined"
-        [width]="data.width ?? undefined"
-        [height]="data.height ?? undefined"
-        [priority]="data.priority ?? priority"
-        [ngClass]="imgClass"
-        ngSrc="{{ data.url }}"
-      />
-    </picture>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: true,
-                    imports: [NgIf, NgClass, NgOptimizedImage],
-                }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], imgClass: [{
-                type: Input
-            }], pictureClass: [{
-                type: Input
-            }], priority: [{
-                type: Input
-            }] } });
-
 class ContentfulVideoComponent {
     constructor() {
         this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, { optional: true });
@@ -525,13 +680,13 @@ class ContentfulVideoComponent {
         }
     }
 }
-ContentfulVideoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulVideoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { data: "data", videoClass: "videoClass" }, ngImport: i0, template: `
+ContentfulVideoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ContentfulVideoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { data: "data", videoClass: "videoClass" }, ngImport: i0, template: `
     <video *ngIf="data" [ngClass]="videoClass" controls>
       <source src="{{ data.url }}" type="{{ data.contentType }}" />
     </video>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-video',
@@ -551,50 +706,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                 type: Input
             }] } });
 
-class ContentfulModule {
-}
-ContentfulModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ContentfulModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.2", ngImport: i0, type: ContentfulModule, imports: [ContentfulAudioComponent,
-        ContentfulFileComponent,
-        ContentfulImageComponent,
-        ContentfulVideoComponent,
-        ContentfulRichTextRendererComponent], exports: [ContentfulAudioComponent,
-        ContentfulFileComponent,
-        ContentfulImageComponent,
-        ContentfulVideoComponent,
-        ContentfulRichTextRendererComponent] });
-ContentfulModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulModule, imports: [ContentfulAudioComponent,
-        ContentfulFileComponent,
-        ContentfulImageComponent,
-        ContentfulVideoComponent,
-        ContentfulRichTextRendererComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        ContentfulAudioComponent,
-                        ContentfulFileComponent,
-                        ContentfulImageComponent,
-                        ContentfulVideoComponent,
-                        ContentfulRichTextRendererComponent,
-                    ],
-                    exports: [
-                        ContentfulAudioComponent,
-                        ContentfulFileComponent,
-                        ContentfulImageComponent,
-                        ContentfulVideoComponent,
-                        ContentfulRichTextRendererComponent,
-                    ],
-                }]
-        }] });
+const ContentfulImports = [
+    ContentfulAudioComponent,
+    ContentfulFileComponent,
+    ContentfulImageComponent,
+    ContentfulVideoComponent,
+    ContentfulRichTextRendererComponent,
+];
 
-const provideContentfulConfig = (contentfulConfig = {}) => {
-    return { provide: CONTENTFUL_CONFIG, useValue: createContentfulConfig(contentfulConfig) };
-};
+const GQL_FRAGMENT_CONTENTFUL_ASSET = gql `
+  fragment AssetData on Asset {
+    sys {
+      id
+    }
+    url
+    title
+    width
+    height
+    description
+    contentType
+    size
+  }
+`;
+const GQL_FRAGMENT_CONTENTFUL_IMAGE = gql `
+  fragment ImageData on Image {
+    sys {
+      id
+    }
+    asset {
+      ...AssetData
+    }
+    alt
+    caption
+    resizeBehavior
+    focusArea
+    quality
+    __typename
+  }
+`;
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulModule, ContentfulRichTextRendererComponent, ContentfulVideoComponent, RICH_TEXT_RENDERER_COMPONENT_DATA, createContentfulConfig, createContentfulMap, createContentfulRenderCommand, createContentfulResourceMap, createRenderCommandsFromContentfulRichText, getContentfulNodeProps, provideContentfulConfig, transformContentfulMarks, translateContentfulNodeTypeToHtmlTag };
+export { CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulRichTextRendererComponent, ContentfulVideoComponent, GQL_FRAGMENT_CONTENTFUL_ASSET, GQL_FRAGMENT_CONTENTFUL_IMAGE, RICH_TEXT_RENDERER_COMPONENT_DATA, createContentfulConfig, createContentfulMap, createContentfulRenderCommand, createContentfulResourceMap, createRenderCommandsFromContentfulRichText, generateContentfulImageSources, generateDefaultContentfulImageSource, getContentfulNodeProps, isContentfulAsset, isContentfulImage, parseContentfulImageSize, provideContentfulConfig, transformContentfulMarks, translateContentfulNodeTypeToHtmlTag };
 //# sourceMappingURL=ethlete-contentful.mjs.map