@ethlete/contentful 0.1.0-next.6 → 0.1.0-next.8

package/fesm2015/ethlete-contentful.mjs

@@ -1,215 +1,30 @@
-import { NgIf, NgClass, DOCUMENT } from '@angular/common';
+import { DOCUMENT, NgIf, NgClass, NgOptimizedImage } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Renderer2, ElementRef, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, NgModule } from '@angular/core';
+import { InjectionToken, inject, Renderer2, ElementRef, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
 import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { BLOCKS, INLINES } from '@contentful/rich-text-types';
 
-const CONTENTFUL_CONFIG = new InjectionToken('TooltipConfig');
+const CONTENTFUL_CONFIG = new InjectionToken('ContentfulConfig');
 
-class ContentfulConfig {
-    constructor() {
-        /**
-         * Default components for rendering contentful assets
-         */
-        this.components = {
-            file: ContentfulFileComponent,
-            image: ContentfulImageComponent,
-            video: ContentfulVideoComponent,
-            audio: ContentfulAudioComponent,
-        };
-        /**
-         * Determines if the contentful rich text renderer should render the contentful rich text with tailwind css classes
-         */
-        this.useTailwindClasses = false;
-    }
-}
-
-const provideContentfulConfig = (contentfulConfig) => {
-    return { provide: CONTENTFUL_CONFIG, useValue: contentfulConfig };
-};
+const createContentfulConfig = (config = {}) => (Object.assign({
+    useTailwindClasses: false,
+    components: {
+        audio: ContentfulAudioComponent,
+        file: ContentfulFileComponent,
+        image: ContentfulImageComponent,
+        video: ContentfulVideoComponent,
+    },
+    customComponents: {},
+}, (config || {})));
 
 const RICH_TEXT_RENDERER_COMPONENT_DATA = new InjectionToken('RICH_TEXT_RENDERER_COMPONENT_DATA');
 
-class ContentfulFileComponent {
-    constructor() {
-        this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, { optional: true });
-        this._data = null;
-        this.fileClass = null;
-    }
-    get data() {
-        return this._data;
-    }
-    set data(v) {
-        if (v && !v.contentType) {
-            this._data = null;
-            console.warn('The provided asset is invalid', v);
-            return;
-        }
-        this._data = v !== null && v !== void 0 ? v : null;
-    }
-    ngOnInit() {
-        if (this._richTextData && !this.data) {
-            this.data = this._richTextData;
-        }
-    }
-}
-ContentfulFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", 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: "14.2.9", ngImport: i0, type: ContentfulFileComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'et-contentful-file',
-                    template: `
-    <a *ngIf="data" [href]="data.url" [ngClass]="fileClass" class="underline" target="_blank">
-      {{ data.title }} ({{ data.size }} Bytes)
-    </a>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: true,
-                    imports: [NgIf, NgClass],
-                }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], fileClass: [{
-                type: Input
-            }] } });
-
-class ContentfulImageComponent {
-    constructor() {
-        this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, { optional: true });
-        this._data = null;
-        this.imgClass = null;
-        this.pictureClass = null;
-    }
-    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 && v !== void 0 ? v : null;
-    }
-    ngOnInit() {
-        if (this._richTextData && !this.data) {
-            this.data = this._richTextData;
-        }
-    }
-}
-ContentfulImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { data: "data", imgClass: "imgClass", pictureClass: "pictureClass" }, 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"
-        [attr.width]="data.width ?? undefined"
-        [attr.height]="data.height ?? undefined"
-        [ngClass]="imgClass"
-        src="{{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", 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"
-        [attr.width]="data.width ?? undefined"
-        [attr.height]="data.height ?? undefined"
-        [ngClass]="imgClass"
-        src="{{ data.url }}"
-      />
-    </picture>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: true,
-                    imports: [NgIf, NgClass],
-                }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], imgClass: [{
-                type: Input
-            }], pictureClass: [{
-                type: Input
-            }] } });
-
-class ContentfulVideoComponent {
-    constructor() {
-        this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, { optional: true });
-        this._data = null;
-        this.videoClass = null;
-    }
-    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('video/')) {
-            throw new Error('The provided asset is not an video');
-        }
-        this._data = v !== null && v !== void 0 ? v : null;
-    }
-    ngOnInit() {
-        if (this._richTextData && !this.data) {
-            this.data = this._richTextData;
-        }
-    }
-}
-ContentfulVideoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulVideoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", 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: "14.2.9", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'et-contentful-video',
-                    template: `
-    <video *ngIf="data" [ngClass]="videoClass" controls>
-      <source src="{{ data.url }}" type="{{ data.contentType }}" />
-    </video>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: true,
-                    imports: [NgIf, NgClass],
-                }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], videoClass: [{
-                type: Input
-            }] } });
-
 const createRenderCommandsFromContentfulRichText = (options) => {
     const { data, config } = options;
     const commands = [];
-    const assetComponents = getAssetComponentsFromConfig(config);
     const resourceMap = createContentfulResourceMap(data.links);
-    createContentfulRenderCommand(data.json, { children: commands, payload: data.json.nodeType }, resourceMap, config.useTailwindClasses, assetComponents, config.customComponents);
+    createContentfulRenderCommand(data.json, { children: commands, payload: data.json.nodeType }, resourceMap, config.useTailwindClasses, config.components, config.customComponents);
     return commands;
 };
 const createContentfulRenderCommand = (node, parent, resourceMap, useTailwindClasses, assetComponents, customComponents) => {
@@ -295,15 +110,6 @@ const getContentfulNodeProps = (node) => {
         value,
     };
 };
-const getAssetComponentsFromConfig = (config) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    return {
-        file: (_b = (_a = config.components) === null || _a === void 0 ? void 0 : _a.file) !== null && _b !== void 0 ? _b : ContentfulFileComponent,
-        image: (_d = (_c = config.components) === null || _c === void 0 ? void 0 : _c.image) !== null && _d !== void 0 ? _d : ContentfulImageComponent,
-        video: (_f = (_e = config.components) === null || _e === void 0 ? void 0 : _e.video) !== null && _f !== void 0 ? _f : ContentfulVideoComponent,
-        audio: (_h = (_g = config.components) === null || _g === void 0 ? void 0 : _g.audio) !== null && _h !== void 0 ? _h : ContentfulAudioComponent,
-    };
-};
 const transformContentfulMarks = (marks, useTailwindClasses) => {
     return marks
         .map((mark) => {
@@ -369,7 +175,6 @@ const translateContentfulNodeTypeToHtmlTag = (nodeType) => {
         // Will be ignored by the renderer
         case 'document':
             return 'document';
-        // TODO(TRB): These should render components
         case BLOCKS.EMBEDDED_ENTRY:
             return 'div';
         case INLINES.EMBEDDED_ENTRY:
@@ -413,15 +218,18 @@ class ContentfulRichTextRendererComponent {
         this._document = inject(DOCUMENT);
         this._appRef = inject(ApplicationRef);
         this._injector = inject(Injector);
-        this._config = (_a = inject(CONTENTFUL_CONFIG, { optional: true })) !== null && _a !== void 0 ? _a : new ContentfulConfig();
+        this._config = (_a = inject(CONTENTFUL_CONFIG, { optional: true })) !== null && _a !== void 0 ? _a : createContentfulConfig();
     }
     get richText() {
         return this._richText;
     }
     set richText(v) {
         this._richText = v !== null && v !== void 0 ? v : null;
-        // clear the element
-        this._viewContainerRef.clear();
+        // 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) {
             return;
         }
@@ -478,9 +286,9 @@ class ContentfulRichTextRendererComponent {
         }
     }
 }
-ContentfulRichTextRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulRichTextRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", 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: "14.2.9", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
+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: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-rich-text-renderer',
@@ -524,14 +332,14 @@ class ContentfulAudioComponent {
         }
     }
 }
-ContentfulAudioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulAudioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", 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.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: `
     <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: "14.2.9", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-audio',
@@ -556,10 +364,195 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
                 type: Input
             }] } });
 
+class ContentfulFileComponent {
+    constructor() {
+        this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, { optional: true });
+        this._data = null;
+        this.fileClass = null;
+    }
+    get data() {
+        return this._data;
+    }
+    set data(v) {
+        if (v && !v.contentType) {
+            this._data = null;
+            console.warn('The provided asset is invalid', v);
+            return;
+        }
+        this._data = v !== null && v !== void 0 ? v : null;
+    }
+    ngOnInit() {
+        if (this._richTextData && !this.data) {
+            this.data = this._richTextData;
+        }
+    }
+}
+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: `
+    <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: [{
+            type: Component,
+            args: [{
+                    selector: 'et-contentful-file',
+                    template: `
+    <a *ngIf="data" [href]="data.url" [ngClass]="fileClass" class="underline" target="_blank">
+      {{ data.title }} ({{ data.size }} Bytes)
+    </a>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: true,
+                    imports: [NgIf, NgClass],
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], fileClass: [{
+                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 && v !== void 0 ? 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 });
+        this._data = null;
+        this.videoClass = null;
+    }
+    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('video/')) {
+            throw new Error('The provided asset is not an video');
+        }
+        this._data = v !== null && v !== void 0 ? v : null;
+    }
+    ngOnInit() {
+        if (this._richTextData && !this.data) {
+            this.data = this._richTextData;
+        }
+    }
+}
+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: `
+    <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: [{
+            type: Component,
+            args: [{
+                    selector: 'et-contentful-video',
+                    template: `
+    <video *ngIf="data" [ngClass]="videoClass" controls>
+      <source src="{{ data.url }}" type="{{ data.contentType }}" />
+    </video>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: true,
+                    imports: [NgIf, NgClass],
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], videoClass: [{
+                type: Input
+            }] } });
+
 class ContentfulModule {
 }
-ContentfulModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ContentfulModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ContentfulModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.9", ngImport: i0, type: ContentfulModule, imports: [ContentfulAudioComponent,
+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,
@@ -568,12 +561,12 @@ ContentfulModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         ContentfulImageComponent,
         ContentfulVideoComponent,
         ContentfulRichTextRendererComponent] });
-ContentfulModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ContentfulModule, imports: [ContentfulAudioComponent,
+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: "14.2.9", ngImport: i0, type: ContentfulModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: ContentfulModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -593,9 +586,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
                 }]
         }] });
 
+const provideContentfulConfig = (contentfulConfig = {}) => {
+    return { provide: CONTENTFUL_CONFIG, useValue: createContentfulConfig(contentfulConfig) };
+};
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulConfig, ContentfulFileComponent, ContentfulImageComponent, ContentfulModule, ContentfulRichTextRendererComponent, ContentfulVideoComponent, RICH_TEXT_RENDERER_COMPONENT_DATA, createContentfulMap, createContentfulRenderCommand, createContentfulResourceMap, createRenderCommandsFromContentfulRichText, getAssetComponentsFromConfig, getContentfulNodeProps, provideContentfulConfig, transformContentfulMarks, translateContentfulNodeTypeToHtmlTag };
+export { CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulModule, ContentfulRichTextRendererComponent, ContentfulVideoComponent, RICH_TEXT_RENDERER_COMPONENT_DATA, createContentfulConfig, createContentfulMap, createContentfulRenderCommand, createContentfulResourceMap, createRenderCommandsFromContentfulRichText, getContentfulNodeProps, provideContentfulConfig, transformContentfulMarks, translateContentfulNodeTypeToHtmlTag };
 //# sourceMappingURL=ethlete-contentful.mjs.map