@ethlete/contentful 0.1.0-next.1 → 0.1.0-next.3

package/fesm2020/ethlete-contentful.mjs

@@ -1,97 +1,114 @@
-import { NgIf, DOCUMENT } from '@angular/common';
+import { NgIf, NgClass, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, InjectionToken, inject, Renderer2, ElementRef, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, NgModule } from '@angular/core';
+import { InjectionToken, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Renderer2, ElementRef, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, NgModule } from '@angular/core';
 import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 import { BLOCKS, INLINES } from '@contentful/rich-text-types';
 
-class ContentfulAudioComponent {
+const CONTENTFUL_CONFIG = new InjectionToken('TooltipConfig');
+
+class ContentfulConfig {
     constructor() {
-        this._data = null;
-    }
-    get data() {
-        return this._data;
-    }
-    set data(v) {
-        if (v && !v.contentType.startsWith('audio/')) {
-            throw new Error('The provided asset is not an audio');
-        }
-        this._data = v;
+        /**
+         * 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;
     }
 }
-ContentfulAudioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulAudioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { data: "data" }, ngImport: i0, template: `
-    <figure *ngIf="data">
-      <figcaption>{{ data.title }}</figcaption>
-      <audio controls src="{{ data.url }}"></audio>
-    </figure>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'et-contentful-audio',
-                    template: `
-    <figure *ngIf="data">
-      <figcaption>{{ data.title }}</figcaption>
-      <audio controls src="{{ data.url }}"></audio>
-    </figure>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: true,
-                    imports: [NgIf],
-                }]
-        }], propDecorators: { data: [{
-                type: Input
-            }] } });
+
+const provideContentfulConfig = (contentfulConfig) => {
+    return { provide: CONTENTFUL_CONFIG, useValue: contentfulConfig };
+};
+
+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) {
-        this._data = v;
+        if (v && !v.contentType) {
+            this._data = null;
+            console.warn('The provided asset is invalid', v);
+            return;
+        }
+        this._data = v ?? null;
+    }
+    ngOnInit() {
+        if (this._richTextData) {
+            this.data = this._richTextData;
+        }
     }
 }
-ContentfulFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { data: "data" }, ngImport: i0, template: `
-    <a *ngIf="data" [href]="data.url" class="underline" target="_blank"> {{ data.title }} ({{ data.size }} Bytes) </a>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulFileComponent, decorators: [{
+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" class="underline" target="_blank"> {{ data.title }} ({{ data.size }} Bytes) </a>
+    <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],
+                    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;
+        this._data = v ?? null;
+    }
+    ngOnInit() {
+        if (this._richTextData) {
+            this.data = this._richTextData;
+        }
     }
 }
-ContentfulImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { data: "data" }, ngImport: i0, template: `
-    <picture *ngIf="data">
+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" />
       <source srcset="{{ data.url }}?fm=webp" />
       <source srcset="{{ data.url }}?fm=jpg" />
@@ -99,16 +116,17 @@ ContentfulImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
         [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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulImageComponent, decorators: [{
+  `, 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">
+    <picture *ngIf="data" [ngClass]="pictureClass">
       <source srcset="{{ data.url }}?fm=avif" />
       <source srcset="{{ data.url }}?fm=webp" />
       <source srcset="{{ data.url }}?fm=jpg" />
@@ -116,6 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
         [attr.alt]="data.description ?? undefined"
         [attr.width]="data.width ?? undefined"
         [attr.height]="data.height ?? undefined"
+        [ngClass]="imgClass"
         src="{{ data.url }}"
       />
     </picture>
@@ -123,86 +142,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     standalone: true,
-                    imports: [NgIf],
+                    imports: [NgIf, NgClass],
                 }]
         }], propDecorators: { data: [{
                 type: Input
+            }], imgClass: [{
+                type: Input
+            }], pictureClass: [{
+                type: Input
             }] } });
 
-const CONTENTFUL_CONFIG = new InjectionToken('TooltipConfig');
-
-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 };
-};
-
 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;
+        this._data = v ?? null;
+    }
+    ngOnInit() {
+        if (this._richTextData) {
+            this.data = this._richTextData;
+        }
     }
 }
-ContentfulVideoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulVideoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { data: "data" }, ngImport: i0, template: `
-    <video *ngIf="data" controls>
-      <source src=" {{ data.url }} " type=" {{ data.contentType }}" />
+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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
+  `, 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" controls>
-      <source src=" {{ data.url }} " type=" {{ data.contentType }}" />
+    <video *ngIf="data" [ngClass]="videoClass" controls>
+      <source src="{{ data.url }}" type="{{ data.contentType }}" />
     </video>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     standalone: true,
-                    imports: [NgIf],
+                    imports: [NgIf, NgClass],
                 }]
         }], propDecorators: { data: [{
                 type: Input
+            }], videoClass: [{
+                type: Input
             }] } });
 
 const createRenderCommandsFromContentfulRichText = (options) => {
     const { data, config } = options;
     const commands = [];
-    const assetMap = new Map();
     const assetComponents = getAssetComponentsFromConfig(config);
-    for (const asset of data.links.assets.block) {
-        assetMap.set(asset.sys.id, asset);
-    }
-    createContentfulRenderCommand(data.json, { children: commands, payload: data.json.nodeType }, assetMap, config.useTailwindClasses, assetComponents, config.customComponents);
+    const resourceMap = createContentfulResourceMap(data.links);
+    createContentfulRenderCommand(data.json, { children: commands, payload: data.json.nodeType }, resourceMap, config.useTailwindClasses, assetComponents, config.customComponents);
     return commands;
 };
-const createContentfulRenderCommand = (node, parent, assetMap, useTailwindClasses, assetComponents, customComponents) => {
+const createContentfulRenderCommand = (node, parent, resourceMap, useTailwindClasses, assetComponents, customComponents) => {
     const { nodeType, data: nodeData } = node;
     const { children, marks, value } = getContentfulNodeProps(node);
     const command = {
@@ -218,8 +228,9 @@ const createContentfulRenderCommand = (node, parent, assetMap, useTailwindClasse
         },
         children: [],
     };
+    const entryId = nodeData['target']?.sys?.id;
     if (nodeType === BLOCKS.EMBEDDED_ASSET) {
-        const asset = assetMap.get(nodeData['target']?.sys?.id);
+        const asset = resourceMap.assetsBlock.get(entryId);
         if (asset) {
             const isImage = asset.contentType.startsWith('image/');
             const isVideo = asset.contentType.startsWith('video/');
@@ -238,21 +249,30 @@ const createContentfulRenderCommand = (node, parent, assetMap, useTailwindClasse
                 command.payload = assetComponents.file;
             }
         }
+        else {
+            console.warn(`No asset found for entry id "${entryId}"!`, nodeData);
+        }
     }
     else if (nodeType === BLOCKS.EMBEDDED_ENTRY || nodeType === INLINES.EMBEDDED_ENTRY) {
-        const componentId = nodeData['target']?.sys?.contentType?.sys?.id;
-        const component = customComponents?.[componentId];
-        if (component) {
-            command.payload = component;
-            command.data = nodeData['target']?.fields;
+        const entry = resourceMap.entriesBlock.get(entryId) ?? resourceMap.entriesInline.get(entryId);
+        if (entry) {
+            const type = entry?.__typename ?? 'ET_UNKNOWN';
+            const component = customComponents?.[type];
+            if (component) {
+                command.payload = component;
+                command.data = entry;
+            }
+            else {
+                command.data = `ERROR: No component found for embedded entry "${type}" as "${nodeType}"!`;
+            }
         }
         else {
-            command.data = `No component found for embedded entry ${componentId} as ${nodeType}!`;
+            console.warn(`No entry found for entry id "${entryId}"!`, nodeData);
         }
     }
     if (children && (children.length !== 1 || children[0].nodeType !== 'text')) {
         children.forEach((child) => {
-            createContentfulRenderCommand(child, command, assetMap, useTailwindClasses, assetComponents, customComponents);
+            createContentfulRenderCommand(child, command, resourceMap, useTailwindClasses, assetComponents, customComponents);
         });
     }
     parent.children.push(command);
@@ -358,6 +378,27 @@ const translateContentfulNodeTypeToHtmlTag = (nodeType) => {
             return 'div';
     }
 };
+const createContentfulResourceMap = (links) => {
+    const resourceMap = {
+        assetsBlock: createContentfulMap(links?.assets?.block),
+        entriesInline: createContentfulMap(links?.entries?.inline),
+        entriesBlock: createContentfulMap(links?.entries?.block),
+    };
+    return resourceMap;
+};
+const createContentfulMap = (links) => {
+    const assetMap = new Map();
+    if (links) {
+        for (const link of links) {
+            if (!link?.sys?.id) {
+                console.warn('Link has no sys.id property. Please include it inside your query.', link);
+                continue;
+            }
+            assetMap.set(link.sys.id, link);
+        }
+    }
+    return assetMap;
+};
 
 class ContentfulRichTextRendererComponent {
     constructor() {
@@ -375,7 +416,7 @@ class ContentfulRichTextRendererComponent {
         return this._richText;
     }
     set richText(v) {
-        this._richText = v;
+        this._richText = v ?? null;
         // clear the element
         this._viewContainerRef.clear();
         if (!v) {
@@ -413,13 +454,18 @@ class ContentfulRichTextRendererComponent {
                 this._renderer.appendChild(parent, element);
             }
             else {
-                const portal = new DomPortalOutlet(parent, this._componentFactoryResolver, this._appRef, this._injector, this._document);
+                const injector = Injector.create({
+                    providers: [
+                        {
+                            provide: RICH_TEXT_RENDERER_COMPONENT_DATA,
+                            useValue: data,
+                        },
+                    ],
+                    parent: this._injector,
+                });
+                const portal = new DomPortalOutlet(parent, this._componentFactoryResolver, this._appRef, injector, this._document);
                 const comp = new ComponentPortal(command.payload);
                 const ref = comp.attach(portal);
-                if (command.data) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    ref.instance.data = command.data;
-                }
                 element = ref.location.nativeElement;
             }
         }
@@ -429,9 +475,9 @@ class ContentfulRichTextRendererComponent {
         }
     }
 }
-ContentfulRichTextRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentfulRichTextRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", 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.3", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
+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: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-rich-text-renderer',
@@ -447,10 +493,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 type: Input
             }] } });
 
+class ContentfulAudioComponent {
+    constructor() {
+        this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, { optional: true });
+        this._data = null;
+        this.audioClass = null;
+        this.figureClass = null;
+        this.figcaptionClass = 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('audio/')) {
+            throw new Error('The provided asset is not an audio');
+        }
+        this._data = v ?? null;
+    }
+    ngOnInit() {
+        if (this._richTextData) {
+            this.data = this._richTextData;
+        }
+    }
+}
+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: `
+    <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: [{
+            type: Component,
+            args: [{
+                    selector: 'et-contentful-audio',
+                    template: `
+    <figure *ngIf="data" [ngClass]="figureClass">
+      <figcaption [ngClass]="figcaptionClass">{{ data.title }}</figcaption>
+      <audio [ngClass]="audioClass" controls src="{{ data.url }}"></audio>
+    </figure>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: true,
+                    imports: [NgIf, NgClass],
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], audioClass: [{
+                type: Input
+            }], figureClass: [{
+                type: Input
+            }], figcaptionClass: [{
+                type: Input
+            }] } });
+
 class ContentfulModule {
 }
-ContentfulModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ContentfulModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.3", ngImport: i0, type: ContentfulModule, imports: [ContentfulAudioComponent,
+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,
         ContentfulFileComponent,
         ContentfulImageComponent,
         ContentfulVideoComponent,
@@ -459,12 +565,12 @@ ContentfulModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         ContentfulImageComponent,
         ContentfulVideoComponent,
         ContentfulRichTextRendererComponent] });
-ContentfulModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulModule, imports: [ContentfulAudioComponent,
+ContentfulModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ContentfulModule, imports: [ContentfulAudioComponent,
         ContentfulFileComponent,
         ContentfulImageComponent,
         ContentfulVideoComponent,
         ContentfulRichTextRendererComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: ContentfulModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ContentfulModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -488,5 +594,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulConfig, ContentfulFileComponent, ContentfulImageComponent, ContentfulModule, ContentfulRichTextRendererComponent, ContentfulVideoComponent, createContentfulRenderCommand, createRenderCommandsFromContentfulRichText, getAssetComponentsFromConfig, getContentfulNodeProps, provideContentfulConfig, transformContentfulMarks, translateContentfulNodeTypeToHtmlTag };
+export { CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulConfig, ContentfulFileComponent, ContentfulImageComponent, ContentfulModule, ContentfulRichTextRendererComponent, ContentfulVideoComponent, RICH_TEXT_RENDERER_COMPONENT_DATA, createContentfulMap, createContentfulRenderCommand, createContentfulResourceMap, createRenderCommandsFromContentfulRichText, getAssetComponentsFromConfig, getContentfulNodeProps, provideContentfulConfig, transformContentfulMarks, translateContentfulNodeTypeToHtmlTag };
 //# sourceMappingURL=ethlete-contentful.mjs.map