@ethlete/contentful 3.8.0 → 4.0.0-beta.3

package/fesm2022/ethlete-contentful.mjs

@@ -1,11 +1,12 @@
 import { NgClass, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, computed, Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, inject, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, Renderer2, ElementRef } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, inject, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, ElementRef, reflectComponentType } from '@angular/core';
 import { gql } from '@ethlete/query';
 import { normalizePictureSizes, PictureComponent } from '@ethlete/cdk';
+import { RouterLink } from '@angular/router';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { INLINES, BLOCKS } from '@contentful/rich-text-types';
-import { RuntimeError, isObject, getObjectProperty } from '@ethlete/core';
+import { RuntimeError, isObject, injectRenderer, getObjectProperty } from '@ethlete/core';
 import { startWith, pairwise, tap } from 'rxjs';
 
 const GQL_FRAGMENT_CONTENTFUL_ASSET = gql `
@@ -29,10 +30,10 @@ const isContentfulGqlAsset = (asset) => {
 
 class ContentfulAudioComponent {
     constructor() {
-        this.asset = input.required();
-        this.audioClass = input(null);
-        this.figureClass = input(null);
-        this.figcaptionClass = input(null);
+        this.asset = input.required(...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
+        this.audioClass = input(null, ...(ngDevMode ? [{ debugName: "audioClass" }] : /* istanbul ignore next */ []));
+        this.figureClass = input(null, ...(ngDevMode ? [{ debugName: "figureClass" }] : /* istanbul ignore next */ []));
+        this.figcaptionClass = input(null, ...(ngDevMode ? [{ debugName: "figcaptionClass" }] : /* istanbul ignore next */ []));
         this.data = computed(() => {
             const asset = this.asset();
             if (!asset) {
@@ -48,10 +49,10 @@ class ContentfulAudioComponent {
                 url: asset.fields.file.url,
                 title: asset.fields.title,
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, audioClass: { classPropertyName: "audioClass", publicName: "audioClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, audioClass: { classPropertyName: "audioClass", publicName: "audioClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (data(); as data) {
       <figure [ngClass]="figureClass()">
         <figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
@@ -60,7 +61,7 @@ class ContentfulAudioComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-audio',
@@ -76,12 +77,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgClass],
                 }]
-        }] });
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], audioClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "audioClass", required: false }] }], figureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figureClass", required: false }] }], figcaptionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figcaptionClass", required: false }] }] } });
 
 class ContentfulFileComponent {
     constructor() {
-        this.asset = input.required();
-        this.fileClass = input(null);
+        this.asset = input.required(...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
+        this.fileClass = input(null, ...(ngDevMode ? [{ debugName: "fileClass" }] : /* istanbul ignore next */ []));
         this.data = computed(() => {
             const asset = this.asset();
             if (!asset) {
@@ -101,10 +102,10 @@ class ContentfulFileComponent {
                 size: asset.fields.file.details.size,
                 title: asset.fields.title,
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, fileClass: { classPropertyName: "fileClass", publicName: "fileClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, fileClass: { classPropertyName: "fileClass", publicName: "fileClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (data(); as data) {
       <a [href]="data.url" [ngClass]="fileClass()" class="underline" target="_blank">
         {{ data.title }} ({{ data.size }} Bytes)
@@ -112,7 +113,7 @@ class ContentfulFileComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulFileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-file',
@@ -127,7 +128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgClass],
                 }]
-        }] });
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], fileClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileClass", required: false }] }] } });
 
 const CONTENTFUL_CONFIG = new InjectionToken('ContentfulConfig');
 
@@ -233,20 +234,18 @@ const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, qual
 class ContentfulImageComponent {
     constructor() {
         this._contentfulConfig = inject(CONTENTFUL_CONFIG);
-        this.asset = input.required();
-        this.backgroundColor = input(null);
-        this.srcsetSizes = input(this._contentfulConfig.imageOptions.srcsetSizes);
-        this.quality = input(null, { transform: numberAttribute });
-        this.focusArea = input(null);
-        this.resizeBehavior = input(null);
-        this.hasPriority = input(false, { transform: booleanAttribute });
-        this.imgClass = input(null);
-        this.figureClass = input(null);
-        this.figcaptionClass = input(null);
-        this.pictureClass = input(null);
-        this.sizes = input(normalizePictureSizes(this._contentfulConfig.imageOptions.sizes), {
-            transform: (v) => normalizePictureSizes(v),
-        });
+        this.asset = input.required(...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
+        this.backgroundColor = input(null, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+        this.srcsetSizes = input(this._contentfulConfig.imageOptions.srcsetSizes, ...(ngDevMode ? [{ debugName: "srcsetSizes" }] : /* istanbul ignore next */ []));
+        this.quality = input(null, { ...(ngDevMode ? { debugName: "quality" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.focusArea = input(null, ...(ngDevMode ? [{ debugName: "focusArea" }] : /* istanbul ignore next */ []));
+        this.resizeBehavior = input(null, ...(ngDevMode ? [{ debugName: "resizeBehavior" }] : /* istanbul ignore next */ []));
+        this.hasPriority = input(false, { ...(ngDevMode ? { debugName: "hasPriority" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.imgClass = input(null, ...(ngDevMode ? [{ debugName: "imgClass" }] : /* istanbul ignore next */ []));
+        this.figureClass = input(null, ...(ngDevMode ? [{ debugName: "figureClass" }] : /* istanbul ignore next */ []));
+        this.figcaptionClass = input(null, ...(ngDevMode ? [{ debugName: "figcaptionClass" }] : /* istanbul ignore next */ []));
+        this.pictureClass = input(null, ...(ngDevMode ? [{ debugName: "pictureClass" }] : /* istanbul ignore next */ []));
+        this.sizes = input(normalizePictureSizes(this._contentfulConfig.imageOptions.sizes), { ...(ngDevMode ? { debugName: "sizes" } : /* istanbul ignore next */ {}), transform: (v) => normalizePictureSizes(v) });
         this.normalizedAsset = computed(() => {
             const asset = this.asset();
             if (isContentfulGqlAsset(asset)) {
@@ -265,7 +264,7 @@ class ContentfulImageComponent {
                     height: asset?.fields?.file?.details?.image?.height ?? null,
                 };
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "normalizedAsset" }] : /* istanbul ignore next */ []));
         this._sources = computed(() => {
             const asset = this.asset();
             const backgroundColor = this.backgroundColor();
@@ -277,14 +276,14 @@ class ContentfulImageComponent {
                 return [];
             }
             return generateContentfulImageSources(asset, srcsetSizes, backgroundColor, quality, focusArea, resizeBehavior);
-        });
+        }, ...(ngDevMode ? [{ debugName: "_sources" }] : /* istanbul ignore next */ []));
         this._defaultSrc = computed(() => {
             const asset = this.asset();
             return asset ? generateDefaultContentfulImageSource(asset) : null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "_defaultSrc" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, srcsetSizes: { classPropertyName: "srcsetSizes", publicName: "srcsetSizes", isSignal: true, isRequired: false, transformFunction: null }, quality: { classPropertyName: "quality", publicName: "quality", isSignal: true, isRequired: false, transformFunction: null }, focusArea: { classPropertyName: "focusArea", publicName: "focusArea", isSignal: true, isRequired: false, transformFunction: null }, resizeBehavior: { classPropertyName: "resizeBehavior", publicName: "resizeBehavior", isSignal: true, isRequired: false, transformFunction: null }, hasPriority: { classPropertyName: "hasPriority", publicName: "hasPriority", isSignal: true, isRequired: false, transformFunction: null }, imgClass: { classPropertyName: "imgClass", publicName: "imgClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null }, pictureClass: { classPropertyName: "pictureClass", publicName: "pictureClass", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-image" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, srcsetSizes: { classPropertyName: "srcsetSizes", publicName: "srcsetSizes", isSignal: true, isRequired: false, transformFunction: null }, quality: { classPropertyName: "quality", publicName: "quality", isSignal: true, isRequired: false, transformFunction: null }, focusArea: { classPropertyName: "focusArea", publicName: "focusArea", isSignal: true, isRequired: false, transformFunction: null }, resizeBehavior: { classPropertyName: "resizeBehavior", publicName: "resizeBehavior", isSignal: true, isRequired: false, transformFunction: null }, hasPriority: { classPropertyName: "hasPriority", publicName: "hasPriority", isSignal: true, isRequired: false, transformFunction: null }, imgClass: { classPropertyName: "imgClass", publicName: "imgClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null }, pictureClass: { classPropertyName: "pictureClass", publicName: "pictureClass", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-image" }, ngImport: i0, template: `
     <et-picture
       [imgClass]="imgClass()"
       [hasPriority]="hasPriority()"
@@ -301,7 +300,7 @@ class ContentfulImageComponent {
     />
   `, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources", "hasPriority", "imgClass", "figureClass", "figcaptionClass", "pictureClass", "defaultSrc", "alt", "figcaption", "width", "height", "sizes"], outputs: ["imgLoaded", "imgError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulImageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-image',
@@ -328,12 +327,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         class: 'et-contentful-image',
                     },
                 }]
-        }] });
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], srcsetSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcsetSizes", required: false }] }], quality: [{ type: i0.Input, args: [{ isSignal: true, alias: "quality", required: false }] }], focusArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusArea", required: false }] }], resizeBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeBehavior", required: false }] }], hasPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPriority", required: false }] }], imgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgClass", required: false }] }], figureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figureClass", required: false }] }], figcaptionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figcaptionClass", required: false }] }], pictureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pictureClass", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }] } });
 
 class ContentfulVideoComponent {
     constructor() {
-        this.asset = input.required();
-        this.videoClass = input(null);
+        this.asset = input.required(...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
+        this.videoClass = input(null, ...(ngDevMode ? [{ debugName: "videoClass" }] : /* istanbul ignore next */ []));
         this.data = computed(() => {
             const asset = this.asset();
             if (!asset) {
@@ -349,10 +348,10 @@ class ContentfulVideoComponent {
                 url: asset.fields.file.url,
                 contentType: asset.fields.file.contentType,
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, videoClass: { classPropertyName: "videoClass", publicName: "videoClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, videoClass: { classPropertyName: "videoClass", publicName: "videoClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (data(); as data) {
       <video [ngClass]="videoClass()" controls>
         <source src="{{ data.url }}" type="{{ data.contentType }}" />
@@ -360,7 +359,7 @@ class ContentfulVideoComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-video',
@@ -375,17 +374,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgClass],
                 }]
-        }] });
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], videoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoClass", required: false }] }] } });
 
 const createContentfulConfig = (config = {}) => ({
     // This default config must be inline and not saved inside a const for some weird webpack reason
     ...{
         useTailwindClasses: false,
+        internalHosts: [],
         components: {
             audio: ContentfulAudioComponent,
             file: ContentfulFileComponent,
             image: ContentfulImageComponent,
             video: ContentfulVideoComponent,
+            link: ContentfulLinkComponent,
         },
         customComponents: {},
         imageOptions: {
@@ -397,6 +398,107 @@ const createContentfulConfig = (config = {}) => ({
     ...(config || {}),
 });
 
+const getPrimaryDomain = (host) => {
+    const parts = host.split('.');
+    return parts.length > 2 ? parts.slice(-2).join('.') : host;
+};
+class ContentfulLinkComponent {
+    constructor() {
+        this._document = inject(DOCUMENT);
+        this._config = inject(CONTENTFUL_CONFIG, { optional: true }) ?? createContentfulConfig();
+        this.href = input.required(...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+        this.text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.textClass = input('', ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
+        this.isExternal = computed(() => {
+            const href = this.href();
+            const isAbsolute = href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//');
+            if (!isAbsolute)
+                return false;
+            try {
+                const parsed = new URL(href.startsWith('//') ? `https:${href}` : href);
+                const internalHosts = [this._document.location.host, ...this._config.internalHosts];
+                return !internalHosts.includes(parsed.host);
+            }
+            catch {
+                return true;
+            }
+        }, ...(ngDevMode ? [{ debugName: "isExternal" }] : /* istanbul ignore next */ []));
+        this.openInNewTab = computed(() => {
+            if (!this.isExternal())
+                return false;
+            const href = this.href();
+            try {
+                const parsed = new URL(href.startsWith('//') ? `https:${href}` : href);
+                const internalPrimaryDomains = [
+                    getPrimaryDomain(this._document.location.host),
+                    ...this._config.internalHosts.map(getPrimaryDomain),
+                ];
+                return !internalPrimaryDomains.includes(getPrimaryDomain(parsed.host));
+            }
+            catch {
+                return true;
+            }
+        }, ...(ngDevMode ? [{ debugName: "openInNewTab" }] : /* istanbul ignore next */ []));
+        this.internalPath = computed(() => {
+            const href = this.href();
+            if (!href.startsWith('http://') && !href.startsWith('https://') && !href.startsWith('//')) {
+                return href;
+            }
+            try {
+                const url = new URL(href.startsWith('//') ? `https:${href}` : href);
+                return url.pathname + url.search + url.hash;
+            }
+            catch {
+                return href;
+            }
+        }, ...(ngDevMode ? [{ debugName: "internalPath" }] : /* istanbul ignore next */ []));
+        this.linkClass = computed(() => {
+            const base = 'et-contentful-rich-text-default-element et-contentful-rich-text-default-a';
+            const extra = this.textClass();
+            return extra ? `${base} ${extra}` : base;
+        }, ...(ngDevMode ? [{ debugName: "linkClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ContentfulLinkComponent, isStandalone: true, selector: "et-contentful-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, textClass: { classPropertyName: "textClass", publicName: "textClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    @if (isExternal()) {
+      <a
+        [class]="linkClass()"
+        [href]="href()"
+        [target]="openInNewTab() ? '_blank' : null"
+        [rel]="openInNewTab() ? 'noopener noreferrer' : null"
+        >{{ text() }}</a
+      >
+    } @else {
+      <a [class]="linkClass()" [routerLink]="internalPath()">{{ text() }}</a>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulLinkComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-contentful-link',
+                    template: `
+    @if (isExternal()) {
+      <a
+        [class]="linkClass()"
+        [href]="href()"
+        [target]="openInNewTab() ? '_blank' : null"
+        [rel]="openInNewTab() ? 'noopener noreferrer' : null"
+        >{{ text() }}</a
+      >
+    } @else {
+      <a [class]="linkClass()" [routerLink]="internalPath()">{{ text() }}</a>
+    }
+  `,
+                    host: {
+                        style: 'display: contents',
+                    },
+                    imports: [RouterLink],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], textClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "textClass", required: false }] }] } });
+
 const RICH_TEXT_RENDERER_ERRORS = {
     rich_text_undefined: 'The property value given at richTextPath is undefined. Use the richTextPath input to specify the path to the rich text object.',
     rich_text_wrong_type: 'The rich text object does not satisfy the RichTextResponse interface. It should contain a property named "nodeType" with the value "document".',
@@ -412,9 +514,9 @@ const RICH_TEXT_RENDERER_ERROR_CODES = Object.keys(RICH_TEXT_RENDERER_ERRORS).re
     acc[key] = index;
     return acc;
 }, {});
-const richTextRendererError = (code, devOnly, data) => {
+const richTextRendererError = (code, data) => {
     const message = `<et-contentful-rich-text-renderer>: ${RICH_TEXT_RENDERER_ERRORS[code]}`;
-    throw new RuntimeError(RICH_TEXT_RENDERER_ERROR_CODES[code], message, devOnly, data);
+    throw new RuntimeError(RICH_TEXT_RENDERER_ERROR_CODES[code], message, data);
 };
 
 const isRichTextRootNode = (node) => {
@@ -456,8 +558,6 @@ const translateContentfulNodeTypeToHtmlTag = (nodeType) => {
             return 'th';
         case BLOCKS.EMBEDDED_ASSET:
             return 'div';
-        case INLINES.HYPERLINK:
-            return 'a';
         case INLINES.ENTRY_HYPERLINK:
             return 'a';
         case INLINES.ASSET_HYPERLINK:
@@ -466,7 +566,7 @@ const translateContentfulNodeTypeToHtmlTag = (nodeType) => {
             return 'span';
         // Will be ignored by the renderer
         case 'document':
-            return 'document';
+            return 'div';
         case BLOCKS.EMBEDDED_ENTRY:
             return 'div';
         case INLINES.EMBEDDED_ENTRY:
@@ -568,6 +668,7 @@ const DEFAULT_COMPONENT_TYPES = {
     VIDEO: '$$$_et-video',
     AUDIO: '$$$_et-audio',
     FILE: '$$$_et-file',
+    LINK: '$$$_et-link',
 };
 const isExecutedComponentCommandCacheItem = (cache) => {
     return isComponentRenderCommand(cache.command);
@@ -633,7 +734,7 @@ const createContentfulIncludeMap = (config) => {
 class ContentfulRichTextRendererComponent {
     constructor() {
         this._viewContainerRef = inject(ViewContainerRef);
-        this._renderer = inject(Renderer2);
+        this._renderer = injectRenderer();
         this._elementRef = inject(ElementRef);
         this._document = inject(DOCUMENT);
         this._config = inject(CONTENTFUL_CONFIG, { optional: true }) ?? createContentfulConfig();
@@ -647,12 +748,12 @@ class ContentfulRichTextRendererComponent {
          * The contentful response gotten via their REST api.
          * @see https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/entries/entries-collection
          */
-        this.content = input.required();
+        this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
         /**
          * The path to where the rich text field is inside the contentful response. Dot and array notation is allowed.
          * @example "items[0].fields.html"
          */
-        this.richTextPath = input.required();
+        this.richTextPath = input.required(...(ngDevMode ? [{ debugName: "richTextPath" }] : /* istanbul ignore next */ []));
         /**
          * A map of all includes in the contentful response.
          * This is useful for looking up assets and entries that are referenced in the rich text without having to use loops.
@@ -662,7 +763,7 @@ class ContentfulRichTextRendererComponent {
             const assets = content?.includes.Asset;
             const entries = content?.includes.Entry;
             return createContentfulIncludeMap({ assets: assets ?? [], entries: entries ?? [] });
-        });
+        }, ...(ngDevMode ? [{ debugName: "contentIncludesMap" }] : /* istanbul ignore next */ []));
         /**
          * The rich text data that should be rendered.
          */
@@ -674,20 +775,20 @@ class ContentfulRichTextRendererComponent {
             }
             const richText = getObjectProperty(content, richTextPath);
             if (!isObject(richText)) {
-                throw richTextRendererError('rich_text_undefined', false, { content, richTextPath });
+                throw richTextRendererError('rich_text_undefined', { content, richTextPath });
             }
             if (!isRichTextRootNode(richText)) {
-                throw richTextRendererError('rich_text_wrong_type', false, { content, richTextPath });
+                throw richTextRendererError('rich_text_wrong_type', { content, richTextPath });
             }
             return richText;
-        });
+        }, ...(ngDevMode ? [{ debugName: "richTextData" }] : /* istanbul ignore next */ []));
         this.renderCommands = computed(() => {
             const richTextData = this.richTextData();
             if (!richTextData) {
                 return [];
             }
             return this._createRenderCommands(richTextData);
-        });
+        }, ...(ngDevMode ? [{ debugName: "renderCommands" }] : /* istanbul ignore next */ []));
         this.renderCommandHistory = toSignal(toObservable(this.renderCommands).pipe(startWith([]), pairwise()), { initialValue: [[], []] });
         this.previousRenderCommandMap = computed(() => {
             const [prevCommands] = this.renderCommandHistory();
@@ -696,7 +797,7 @@ class ContentfulRichTextRendererComponent {
                 map.set(getRenderCommandId(command), command);
             }
             return map;
-        });
+        }, ...(ngDevMode ? [{ debugName: "previousRenderCommandMap" }] : /* istanbul ignore next */ []));
         this.renderInstructions = computed(() => {
             const commands = this.renderCommands();
             const previousRenderCommandMap = new Map(this.previousRenderCommandMap());
@@ -762,7 +863,7 @@ class ContentfulRichTextRendererComponent {
                 }
             }
             return instructions;
-        });
+        }, ...(ngDevMode ? [{ debugName: "renderInstructions" }] : /* istanbul ignore next */ []));
         toObservable(this.renderInstructions)
             .pipe(takeUntilDestroyed(), tap((instructions) => {
             this._execInstructions(instructions);
@@ -792,7 +893,9 @@ class ContentfulRichTextRendererComponent {
                     const text = node.value;
                     if (!text)
                         break;
-                    const attributes = {};
+                    const attributes = {
+                        class: 'et-contentful-rich-text-default-element et-contentful-rich-text-default-span',
+                    };
                     if (node.marks.length) {
                         const markClasses = marksToClass(node.marks);
                         if (CLASS_ATTR in attributes) {
@@ -813,11 +916,11 @@ class ContentfulRichTextRendererComponent {
                     const type = RENDER_COMMAND_TYPE.COMPONENT;
                     const assetId = node.data['target']?.sys?.id;
                     if (!assetId) {
-                        throw richTextRendererError('asset_id_not_found', false, { node });
+                        throw richTextRendererError('asset_id_not_found', { node });
                     }
                     const asset = this.contentIncludesMap().getAsset(assetId);
                     if (!asset) {
-                        throw richTextRendererError('asset_not_found', false, { assetId, node });
+                        throw richTextRendererError('asset_not_found', { assetId, node });
                     }
                     const contentType = asset.fields.file.contentType;
                     const assetComponents = this._config.components;
@@ -868,22 +971,51 @@ class ContentfulRichTextRendererComponent {
                     domPosition++;
                     break;
                 }
+                case INLINES.HYPERLINK: {
+                    const uri = node.data['uri'] ?? '';
+                    // Collect all text and marks from children (hyperlink children are text nodes)
+                    let linkText = '';
+                    const linkMarks = [];
+                    for (const child of node.content) {
+                        if (child.nodeType === 'text') {
+                            linkText += child.value;
+                            linkMarks.push(...child.marks);
+                        }
+                    }
+                    const textClass = linkMarks.length ? marksToClass(linkMarks) : '';
+                    let linkComponentId = componentIdMap.get(DEFAULT_COMPONENT_TYPES.LINK) ?? -1;
+                    const linkId = DEFAULT_COMPONENT_TYPES.LINK + ++linkComponentId;
+                    componentIdMap.set(DEFAULT_COMPONENT_TYPES.LINK, linkComponentId);
+                    const linkCommand = [
+                        RENDER_COMMAND_TYPE.COMPONENT,
+                        nestingLevel,
+                        domPosition,
+                        commandIndex++,
+                        {},
+                        this._config.components.link,
+                        { href: uri, text: linkText, textClass },
+                        linkId,
+                    ];
+                    rootCommands.push(linkCommand);
+                    domPosition++;
+                    break;
+                }
                 case BLOCKS.EMBEDDED_ENTRY:
                 case INLINES.EMBEDDED_ENTRY: {
                     // Render component
                     const type = RENDER_COMMAND_TYPE.COMPONENT;
                     const entryId = node.data['target']?.sys?.id;
                     if (!entryId) {
-                        throw richTextRendererError('entry_id_not_found', false, { node });
+                        throw richTextRendererError('entry_id_not_found', { node });
                     }
                     const entry = this.contentIncludesMap().getEntry(entryId, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID);
                     if (!entry) {
-                        throw richTextRendererError('entry_not_found', false, { entryId, node });
+                        throw richTextRendererError('entry_not_found', { entryId, node });
                     }
                     const componentType = entry.sys.contentType.sys.id;
                     const component = this._config.customComponents[componentType];
                     if (!component) {
-                        throw richTextRendererError('custom_component_not_found', false, {
+                        throw richTextRendererError('custom_component_not_found', {
                             componentType,
                             customComponents: this._config.customComponents,
                             entry,
@@ -916,7 +1048,9 @@ class ContentfulRichTextRendererComponent {
                 default: {
                     const type = RENDER_COMMAND_TYPE.HTML_OPEN;
                     const tag = translateContentfulNodeTypeToHtmlTag(node.nodeType);
-                    const attributes = {};
+                    const attributes = {
+                        class: `et-contentful-rich-text-default-element et-contentful-rich-text-default-${tag}`,
+                    };
                     const id = 'e-o' + elementOpenId++;
                     const command = [type, nestingLevel, domPosition, commandIndex++, attributes, tag, id];
                     rootCommands.push(command);
@@ -951,15 +1085,6 @@ class ContentfulRichTextRendererComponent {
                         rootCommands.push(closeCommand);
                         domPosition++;
                     }
-                    if (node.nodeType === INLINES.HYPERLINK) {
-                        const uri = node.data['uri'];
-                        attributes['href'] = uri;
-                        const host = this._document.location.host;
-                        const isExternal = !uri.includes(host);
-                        if (isExternal) {
-                            attributes['target'] = '_blank';
-                        }
-                    }
                     break;
                 }
             }
@@ -1084,7 +1209,9 @@ class ContentfulRichTextRendererComponent {
             }
             const rootNode = cached.element;
             const oldParentElement = cached.element.parentElement;
-            this._renderer.removeChild(oldParentElement, rootNode);
+            if (oldParentElement) {
+                this._renderer.removeChild(oldParentElement, rootNode);
+            }
             const newParentElement = this._findParent(command);
             const nextElement = this._findFollowingElement(command);
             this._renderInsertOrAppend(rootNode, newParentElement, nextElement);
@@ -1111,10 +1238,14 @@ class ContentfulRichTextRendererComponent {
             cached.componentRef?.destroy();
         }
         else if (isTextRenderCommand(command)) {
-            this._renderer.removeChild(cached.element?.parentElement, cached.element);
+            if (cached.element?.parentElement) {
+                this._renderer.removeChild(cached.element.parentElement, cached.element);
+            }
         }
         else if (isHtmlOpenRenderCommand(command)) {
-            this._renderer.removeChild(cached.element?.parentElement, cached.element);
+            if (cached.element?.parentElement) {
+                this._renderer.removeChild(cached.element.parentElement, cached.element);
+            }
         }
         this._executedCommandsCache.delete(id);
     }
@@ -1122,16 +1253,19 @@ class ContentfulRichTextRendererComponent {
         return componentRef.hostView.rootNodes[0];
     }
     _updateComponentInputs(command, componentRef) {
+        const inputMeta = reflectComponentType(command[COMPONENT_RENDER_COMMAND_POSITION.COMPONENT])?.inputs ?? [];
+        const inputsByProp = new Map(inputMeta.map((i) => [i.propName, i.templateName]));
         for (const [key, value] of Object.entries(command[COMPONENT_RENDER_COMMAND_POSITION.INPUTS])) {
-            if (!componentRef.instance[key])
+            const publicName = inputsByProp.get(key);
+            if (publicName === undefined)
                 continue;
-            componentRef.setInput(key, value);
+            componentRef.setInput(publicName, value);
         }
     }
     _findParent(command) {
         const hostElement = this._elementRef.nativeElement;
         const nestingLevel = command[RENDER_COMMAND_POSITION.NESTING_LEVEL];
-        let parentElement = undefined;
+        let parentElement;
         if (nestingLevel === 0) {
             parentElement = hostElement;
         }
@@ -1190,22 +1324,21 @@ class ContentfulRichTextRendererComponent {
             this._renderer.appendChild(parentElement, nodeToRender);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, richTextPath: { classPropertyName: "richTextPath", publicName: "richTextPath", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-contentful-rich-text-renderer" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, richTextPath: { classPropertyName: "richTextPath", publicName: "richTextPath", isSignal: true, isRequired: true, transformFunction: null } }, 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: "20.0.0", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-rich-text-renderer',
                     template: ``,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
                     host: {
                         class: 'et-contentful-rich-text-renderer',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], richTextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "richTextPath", required: true }] }] } });
 
 const ContentfulImports = [
     ContentfulAudioComponent,
@@ -1226,5 +1359,5 @@ const isContentfulEntryType = (entry, type) => entry.sys.contentType.sys.id ===
  * Generated bundle index. Do not edit.
  */
 
-export { COMPONENT_RENDER_COMMAND_POSITION, CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulRichTextRendererComponent, ContentfulVideoComponent, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, HTML_CLOSE_RENDER_COMMAND_POSITION, HTML_OPEN_RENDER_COMMAND_POSITION, RENDER_COMMAND_POSITION, RENDER_COMMAND_TYPE, RENDER_INSTRUCTION_POSITION, RENDER_INSTRUCTION_TYPE, TEXT_RENDER_COMMAND_POSITION, createContentfulConfig, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, getRenderCommandId, isComponentRenderCommand, isContentfulEntryType, isContentfulGqlAsset, isExecutedComponentCommandCacheItem, isExecutedHtmlOrTextCommandCacheItem, isExecutedTextCommandCacheItem, isHtmlCloseRenderCommand, isHtmlOpenRenderCommand, isRichTextRootNode, isTextRenderCommand, marksToClass, parseContentfulImageSize, provideContentfulConfig, translateContentfulNodeTypeToHtmlTag };
+export { COMPONENT_RENDER_COMMAND_POSITION, CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulLinkComponent, ContentfulRichTextRendererComponent, ContentfulVideoComponent, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, HTML_CLOSE_RENDER_COMMAND_POSITION, HTML_OPEN_RENDER_COMMAND_POSITION, RENDER_COMMAND_POSITION, RENDER_COMMAND_TYPE, RENDER_INSTRUCTION_POSITION, RENDER_INSTRUCTION_TYPE, TEXT_RENDER_COMMAND_POSITION, createContentfulConfig, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, getRenderCommandId, isComponentRenderCommand, isContentfulEntryType, isContentfulGqlAsset, isExecutedComponentCommandCacheItem, isExecutedHtmlOrTextCommandCacheItem, isExecutedTextCommandCacheItem, isHtmlCloseRenderCommand, isHtmlOpenRenderCommand, isRichTextRootNode, isTextRenderCommand, marksToClass, parseContentfulImageSize, provideContentfulConfig, translateContentfulNodeTypeToHtmlTag };
 //# sourceMappingURL=ethlete-contentful.mjs.map