@ethlete/contentful 4.0.0-next.1 → 4.0.0-next.11

package/fesm2022/ethlete-contentful.mjs

@@ -1,21 +1,18 @@
 import { NgClass, DOCUMENT } from '@angular/common';
 import * as i0 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, injectRenderer, getObjectProperty } from '@ethlete/core';
-import { startWith, pairwise, tap } from 'rxjs';
+import { input, computed, ViewEncapsulation, Component, inject, InjectionToken, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, ElementRef, effect, untracked, signal, reflectComponentType, inputBinding } from '@angular/core';
+import { formatFileSize, normalizePictureSizes, PictureComponent } from '@ethlete/components';
+import { defineLabels, toProvideFn, toInjectFn, toToken, injectUrl, RuntimeError, isObject, injectRenderer, getObjectProperty } from '@ethlete/core';
+import { Router, RouterLink } from '@angular/router';
 
-const GQL_FRAGMENT_CONTENTFUL_ASSET = gql `
-  fragment AssetData on Asset {
+const GQL_FRAGMENT_CONTENTFUL_ASSET = `
+  fragment ContentfulAssetData on Asset {
     sys {
       id
     }
     url
     title
+    fileName
     width
     height
     description
@@ -25,43 +22,51 @@ const GQL_FRAGMENT_CONTENTFUL_ASSET = gql `
 `;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isContentfulGqlAsset = (asset) => {
-    return asset?.sys?.id && asset?.url && typeof asset?.size === 'number';
+    return Boolean(asset && typeof asset === 'object' && asset.sys?.id && !('fields' in asset));
 };
 
 class ContentfulAudioComponent {
     constructor() {
-        this.asset = input.required(...(ngDevMode ? [{ debugName: "asset" }] : []));
-        this.audioClass = input(null, ...(ngDevMode ? [{ debugName: "audioClass" }] : []));
-        this.figureClass = input(null, ...(ngDevMode ? [{ debugName: "figureClass" }] : []));
-        this.figcaptionClass = input(null, ...(ngDevMode ? [{ debugName: "figcaptionClass" }] : []));
+        this.asset = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
+        this.audioClass = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "audioClass" }] : /* istanbul ignore next */ []));
+        this.figureClass = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "figureClass" }] : /* istanbul ignore next */ []));
+        this.figcaptionClass = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "figcaptionClass" }] : /* istanbul ignore next */ []));
         this.data = computed(() => {
             const asset = this.asset();
             if (!asset) {
                 return null;
             }
-            if (isContentfulGqlAsset(asset)) {
+            if (isContentfulGqlAsset(asset) && asset.url) {
                 return {
                     url: asset.url,
-                    title: asset.title,
+                    title: asset.title || asset.fileName || null,
                 };
             }
-            return {
-                url: asset.fields.file.url,
-                title: asset.fields.title,
-            };
-        }, ...(ngDevMode ? [{ debugName: "data" }] : []));
+            if (!isContentfulGqlAsset(asset) && asset.fields.file?.url) {
+                return {
+                    url: asset.fields.file.url,
+                    title: asset.fields.title || asset.fields.file.fileName || null,
+                };
+            }
+            return null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: "22.1.6", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 } }, host: { classAttribute: "et-contentful-audio" }, ngImport: i0, template: `
     @if (data(); as data) {
       <figure [ngClass]="figureClass()">
         <figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
-        <audio [ngClass]="audioClass()" controls src="{{ data.url }}"></audio>
+        <audio [ngClass]="audioClass()" [src]="data.url" controls></audio>
       </figure>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-audio',
@@ -69,69 +74,311 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     @if (data(); as data) {
       <figure [ngClass]="figureClass()">
         <figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
-        <audio [ngClass]="audioClass()" controls src="{{ data.url }}"></audio>
+        <audio [ngClass]="audioClass()" [src]="data.url" controls></audio>
       </figure>
     }
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgClass],
+                    host: {
+                        class: 'et-contentful-audio',
+                    },
                 }]
         }], 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 }] }] } });
 
+/** The built-in English labels. */
+const DEFAULT_CONTENTFUL_FILE_LABELS = {
+    fileSize: (bytes) => `(${formatFileSize(bytes)})`,
+};
+const CONTENTFUL_FILE_LABELS_DEF = /* @__PURE__ */ defineLabels('CONTENTFUL_FILE_LABELS', DEFAULT_CONTENTFUL_FILE_LABELS);
+/**
+ * Localize `et-contentful-file` for everything below this injector, and read the set in effect here as a signal.
+ * Partial - whatever you leave out keeps its {@link DEFAULT_CONTENTFUL_FILE_LABELS} value.
+ *
+ * @example
+ * provideContentfulFileLabels({ fileSize: (bytes) => `(${new Intl.NumberFormat('de').format(bytes)} Byte)` });
+ */
+const provideContentfulFileLabels = /* @__PURE__ */ toProvideFn(CONTENTFUL_FILE_LABELS_DEF);
+const injectContentfulFileLabels = /* @__PURE__ */ toInjectFn(CONTENTFUL_FILE_LABELS_DEF);
+const CONTENTFUL_FILE_LABELS = /* @__PURE__ */ toToken(CONTENTFUL_FILE_LABELS_DEF);
+
 class ContentfulFileComponent {
     constructor() {
-        this.asset = input.required(...(ngDevMode ? [{ debugName: "asset" }] : []));
-        this.fileClass = input(null, ...(ngDevMode ? [{ debugName: "fileClass" }] : []));
+        this.labels = injectContentfulFileLabels();
+        this.asset = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
+        this.fileClass = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fileClass" }] : /* istanbul ignore next */ []));
         this.data = computed(() => {
             const asset = this.asset();
             if (!asset) {
                 return null;
             }
-            if (isContentfulGqlAsset(asset)) {
+            if (isContentfulGqlAsset(asset) && asset.url) {
                 return {
                     url: asset.url,
-                    contentType: asset.contentType,
                     size: asset.size,
-                    title: asset.title,
+                    title: asset.title || asset.fileName || null,
                 };
             }
-            return {
-                url: asset.fields.file.url,
-                contentType: asset.fields.file.contentType,
-                size: asset.fields.file.details.size,
-                title: asset.fields.title,
-            };
-        }, ...(ngDevMode ? [{ debugName: "data" }] : []));
+            if (!isContentfulGqlAsset(asset) && asset.fields.file?.url) {
+                return {
+                    url: asset.fields.file.url,
+                    size: asset.fields.file.details.size,
+                    title: asset.fields.title || asset.fields.file.fileName || null,
+                };
+            }
+            return null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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: "22.1.6", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 } }, host: { classAttribute: "et-contentful-file" }, ngImport: i0, template: `
     @if (data(); as data) {
-      <a [href]="data.url" [ngClass]="fileClass()" class="underline" target="_blank">
-        {{ data.title }} ({{ data.size }} Bytes)
+      <a [href]="data.url" [ngClass]="fileClass()" target="_blank" rel="noopener noreferrer">
+        {{ data.title }}
+        @if (data.size !== null) {
+          {{ labels().fileSize(data.size) }}
+        }
       </a>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulFileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-file',
                     template: `
     @if (data(); as data) {
-      <a [href]="data.url" [ngClass]="fileClass()" class="underline" target="_blank">
-        {{ data.title }} ({{ data.size }} Bytes)
+      <a [href]="data.url" [ngClass]="fileClass()" target="_blank" rel="noopener noreferrer">
+        {{ data.title }}
+        @if (data.size !== null) {
+          {{ labels().fileSize(data.size) }}
+        }
       </a>
     }
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgClass],
+                    host: {
+                        class: 'et-contentful-file',
+                    },
                 }]
         }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], fileClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileClass", required: false }] }] } });
 
+const parseWebUrl = (href) => {
+    if (!/^(?:https?:)?\/\//i.test(href)) {
+        return null;
+    }
+    try {
+        return new URL(href.startsWith('//') ? 'https:' + href : href);
+    }
+    catch {
+        return null;
+    }
+};
+const normalizeHostname = (host) => {
+    const value = host.trim().toLowerCase();
+    try {
+        return new URL(value.includes('://') ? value : 'https://' + value).hostname;
+    }
+    catch {
+        return value.split(':')[0] ?? value;
+    }
+};
+const matchesHostname = (hostname, configuredHost) => {
+    const normalizedHost = normalizeHostname(configuredHost);
+    return hostname === normalizedHost || hostname.endsWith('.' + normalizedHost);
+};
+const isInternalWebUrl = (url, { location, internalHosts }) => (url.hostname === location.hostname && url.port === location.port) ||
+    internalHosts.some((host) => matchesHostname(url.hostname, host));
+const isExternalWebHref = (href, context) => {
+    const url = parseWebUrl(href);
+    return url !== null && !isInternalWebUrl(url, context);
+};
+
+class ContentfulLinkComponent {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.router = inject(Router);
+        this.config = injectContentfulConfig();
+        this.url = injectUrl();
+        this.href = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+        this.text = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.textClass = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
+        this.anchorClass = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anchorClass" }] : /* istanbul ignore next */ []));
+        this.usesRouterLink = computed(() => {
+            const href = this.href();
+            const absoluteUrl = parseWebUrl(href);
+            if (absoluteUrl) {
+                return isInternalWebUrl(absoluteUrl, {
+                    location: this.document.location,
+                    internalHosts: this.config.internalHosts,
+                });
+            }
+            return !href.startsWith('#') && !/^[a-z][a-z\d+.-]*:/i.test(href);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "usesRouterLink" }] : /* istanbul ignore next */ []));
+        this.openInNewTab = computed(() => Boolean(parseWebUrl(this.href())) && !this.usesRouterLink(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openInNewTab" }] : /* istanbul ignore next */ []));
+        this.internalPath = computed(() => {
+            const href = this.href();
+            const url = parseWebUrl(href);
+            if (url) {
+                return url.pathname + url.search + url.hash;
+            }
+            if (href.startsWith('/')) {
+                return href;
+            }
+            const resolved = new URL(href, 'https://contentful.invalid' + this.url());
+            return resolved.pathname + resolved.search + resolved.hash;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "internalPath" }] : /* istanbul ignore next */ []));
+        this.internalUrlTree = computed(() => this.router.parseUrl(this.internalPath()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "internalUrlTree" }] : /* istanbul ignore next */ []));
+        this.linkClass = computed(() => [this.anchorClass(), this.textClass()].filter(Boolean).join(' ') || null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 }, anchorClass: { classPropertyName: "anchorClass", publicName: "anchorClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-link" }, ngImport: i0, template: `
+    @if (usesRouterLink()) {
+      <a [class]="linkClass()" [routerLink]="internalUrlTree()">{{ text() }}</a>
+    } @else {
+      <a
+        [class]="linkClass()"
+        [href]="href()"
+        [target]="openInNewTab() ? '_blank' : null"
+        [rel]="openInNewTab() ? 'noopener noreferrer' : null"
+        >{{ text() }}</a
+      >
+    }
+  `, isInline: true, styles: ["@layer components{.et-contentful-link{display:contents}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-contentful-link', template: `
+    @if (usesRouterLink()) {
+      <a [class]="linkClass()" [routerLink]="internalUrlTree()">{{ text() }}</a>
+    } @else {
+      <a
+        [class]="linkClass()"
+        [href]="href()"
+        [target]="openInNewTab() ? '_blank' : null"
+        [rel]="openInNewTab() ? 'noopener noreferrer' : null"
+        >{{ text() }}</a
+      >
+    }
+  `, encapsulation: ViewEncapsulation.None, imports: [RouterLink], host: {
+                        class: 'et-contentful-link',
+                    }, styles: ["@layer components{.et-contentful-link{display:contents}}\n"] }]
+        }], 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 }] }], anchorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorClass", required: false }] }] } });
+
+class ContentfulVideoComponent {
+    constructor() {
+        this.asset = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
+        this.videoClass = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "videoClass" }] : /* istanbul ignore next */ []));
+        this.data = computed(() => {
+            const asset = this.asset();
+            if (!asset) {
+                return null;
+            }
+            if (isContentfulGqlAsset(asset) && asset.url) {
+                return {
+                    url: asset.url,
+                    contentType: asset.contentType,
+                };
+            }
+            if (!isContentfulGqlAsset(asset) && asset.fields.file?.url) {
+                return {
+                    url: asset.fields.file.url,
+                    contentType: asset.fields.file.contentType,
+                };
+            }
+            return null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 } }, host: { classAttribute: "et-contentful-video" }, ngImport: i0, template: `
+    @if (data(); as data) {
+      <video [ngClass]="videoClass()" controls>
+        <source [src]="data.url" [type]="data.contentType" />
+      </video>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-contentful-video',
+                    template: `
+    @if (data(); as data) {
+      <video [ngClass]="videoClass()" controls>
+        <source [src]="data.url" [type]="data.contentType" />
+      </video>
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [NgClass],
+                    host: {
+                        class: 'et-contentful-video',
+                    },
+                }]
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], videoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoClass", required: false }] }] } });
+
 const CONTENTFUL_CONFIG = new InjectionToken('ContentfulConfig');
 
+/**
+ * The config used when no `provideContentfulConfig()` is in scope. It declares no
+ * `components`, so embedded assets are skipped and hyperlinks render as plain anchors
+ * until a config is provided.
+ */
+const CONTENTFUL_FALLBACK_CONFIG = {
+    internalHosts: [],
+    components: {},
+    customComponents: {},
+    imageOptions: {
+        srcsetSizes: ['375w', '1280w', '1920w', '2560w'],
+        sizes: ['100vw'],
+        backgroundColor: null,
+    },
+};
+const createContentfulConfig = (config) => {
+    const defaults = {
+        internalHosts: [],
+        components: {
+            audio: ContentfulAudioComponent,
+            file: ContentfulFileComponent,
+            image: ContentfulImageComponent,
+            video: ContentfulVideoComponent,
+            link: ContentfulLinkComponent,
+        },
+        customComponents: {},
+        imageOptions: {
+            srcsetSizes: ['375w', '1280w', '1920w', '2560w'],
+            sizes: ['100vw'],
+            backgroundColor: null,
+        },
+    };
+    return {
+        ...defaults,
+        ...config,
+        components: { ...defaults.components, ...config?.components },
+        imageOptions: { ...defaults.imageOptions, ...config?.imageOptions },
+    };
+};
+/**
+ * Reads the contentful config from the current injector. Falls back to a config without
+ * any `components` when none was provided via `provideContentfulConfig()`.
+ */
+const injectContentfulConfig = () => inject(CONTENTFUL_CONFIG, { optional: true }) ?? CONTENTFUL_FALLBACK_CONFIG;
+
 const generateDefaultContentfulImageSource = (data) => {
     if (isContentfulGqlAsset(data)) {
         if (!data.contentType || !data.url) {
@@ -145,15 +392,16 @@ const generateDefaultContentfulImageSource = (data) => {
             srcset: data.url,
         };
     }
-    if (!data.fields.file.contentType || !data.fields.file.url) {
+    const file = data.fields.file;
+    if (!file?.contentType || !file.url) {
         return {
             type: '',
             srcset: '',
         };
     }
     return {
-        type: data.fields.file.contentType,
-        srcset: data.fields.file.url,
+        type: file.contentType,
+        srcset: file.url,
     };
 };
 /**
@@ -165,41 +413,44 @@ const generateDefaultContentfulImageSource = (data) => {
  * - `"400wx300h"` - 400px width and 300px height
  **/
 const parseContentfulImageSize = (size) => {
-    let width = null;
-    let height = null;
-    if (size.includes('x')) {
-        const [w, h] = size.split('x');
-        width = w;
-        height = h;
-    }
-    else if (size.includes('h')) {
-        height = size;
+    const widthAndHeight = /^(\d+)w?x(\d+)h?$/.exec(size);
+    if (widthAndHeight) {
+        return {
+            width: Number(widthAndHeight[1]),
+            height: Number(widthAndHeight[2]),
+        };
     }
-    else {
-        width = size;
+    const height = /^(\d+)h$/.exec(size);
+    if (height) {
+        return { width: null, height: Number(height[1]) };
     }
-    return {
-        width: width ? parseInt(width, 10) : null,
-        height: height ? parseInt(height, 10) : null,
-    };
+    const width = /^(\d+)w?$/.exec(size);
+    return width ? { width: Number(width[1]), height: null } : { width: null, height: null };
 };
-const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, quality, focusArea, resizeBehavior) => {
-    const assetData = data;
-    if (!assetData) {
+const SOURCE_TYPES = ['image/avif', 'image/webp'];
+/**
+ * Builds AVIF and WebP `<source>` entries for a Contentful asset through the Contentful Images API.
+ *
+ * @example
+ * generateContentfulImageSources(asset, { srcsetSizes: ['400w', '800w'], quality: 80 });
+ */
+const generateContentfulImageSources = (data, options = {}) => {
+    const { srcsetSizes = [], backgroundColor = null, quality = null, focusArea = null, resizeBehavior = null } = options;
+    const isGqlAsset = isContentfulGqlAsset(data);
+    const baseUrl = isGqlAsset ? data.url : data.fields.file?.url;
+    if (!baseUrl) {
         return [];
     }
+    const imageDimensions = isGqlAsset ? data : data.fields.file?.details.image;
     const sources = [];
-    const SOURCE_TYPES = ['image/avif', 'image/webp', 'image/png', 'image/jpg'];
     for (const type of SOURCE_TYPES) {
-        const baseUrl = isContentfulGqlAsset(assetData) ? assetData.url : assetData.fields.file.url;
         const sourceSets = [];
         const queryParams = [];
-        // Set the format (e.g. 'fm=webp')
         queryParams.push(`fm=${type.split('/')[1]}`);
         if (backgroundColor) {
             queryParams.push(`bg=rgb:${backgroundColor}`);
         }
-        if (quality !== null) {
+        if (quality !== null && Number.isFinite(quality)) {
             queryParams.push(`q=${quality}`);
         }
         if (focusArea) {
@@ -208,8 +459,8 @@ const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, qual
         if (resizeBehavior) {
             queryParams.push(`fit=${resizeBehavior}`);
         }
-        if (srcsetSizes?.length) {
-            const urlWithParams = `${baseUrl}?${queryParams.join('&')}`;
+        if (srcsetSizes.length) {
+            const urlWithParams = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${queryParams.join('&')}`;
             for (const size of srcsetSizes) {
                 const { width, height } = parseContentfulImageSize(size);
                 if (width && height) {
@@ -218,34 +469,42 @@ const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, qual
                 else if (width) {
                     sourceSets.push(`${urlWithParams}&w=${width} ${width}w`);
                 }
-                else if (height) {
-                    sourceSets.push(`${urlWithParams}&h=${height} ${height}h`);
+                else if (height && imageDimensions?.width && imageDimensions.height) {
+                    const derivedWidth = Math.round((height * imageDimensions.width) / imageDimensions.height);
+                    sourceSets.push(`${urlWithParams}&w=${derivedWidth}&h=${height} ${derivedWidth}w`);
                 }
             }
         }
         sources.push({
             type,
-            srcset: sourceSets.length ? sourceSets.join(', ') : `${baseUrl}?${queryParams.join('&')}`,
+            srcset: sourceSets.length
+                ? sourceSets.join(', ')
+                : `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${queryParams.join('&')}`,
         });
     }
     return sources;
 };
 
+const optionalNumberAttribute = (value) => {
+    const transformed = numberAttribute(value);
+    return Number.isFinite(transformed) ? transformed : null;
+};
 class ContentfulImageComponent {
     constructor() {
-        this._contentfulConfig = inject(CONTENTFUL_CONFIG);
-        this.asset = input.required(...(ngDevMode ? [{ debugName: "asset" }] : []));
-        this.backgroundColor = input(null, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
-        this.srcsetSizes = input(this._contentfulConfig.imageOptions.srcsetSizes, ...(ngDevMode ? [{ debugName: "srcsetSizes" }] : []));
-        this.quality = input(null, { ...(ngDevMode ? { debugName: "quality" } : {}), transform: numberAttribute });
-        this.focusArea = input(null, ...(ngDevMode ? [{ debugName: "focusArea" }] : []));
-        this.resizeBehavior = input(null, ...(ngDevMode ? [{ debugName: "resizeBehavior" }] : []));
-        this.hasPriority = input(false, { ...(ngDevMode ? { debugName: "hasPriority" } : {}), transform: booleanAttribute });
-        this.imgClass = input(null, ...(ngDevMode ? [{ debugName: "imgClass" }] : []));
-        this.figureClass = input(null, ...(ngDevMode ? [{ debugName: "figureClass" }] : []));
-        this.figcaptionClass = input(null, ...(ngDevMode ? [{ debugName: "figcaptionClass" }] : []));
-        this.pictureClass = input(null, ...(ngDevMode ? [{ debugName: "pictureClass" }] : []));
-        this.sizes = input(normalizePictureSizes(this._contentfulConfig.imageOptions.sizes), { ...(ngDevMode ? { debugName: "sizes" } : {}), transform: (v) => normalizePictureSizes(v) });
+        this.contentfulConfig = injectContentfulConfig();
+        this.asset = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
+        this.backgroundColor = input(this.contentfulConfig.imageOptions.backgroundColor, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+        this.srcsetSizes = input(this.contentfulConfig.imageOptions.srcsetSizes, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "srcsetSizes" }] : /* istanbul ignore next */ []));
+        this.quality = input(null, { ...(ngDevMode ? { debugName: "quality" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+        this.focusArea = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusArea" }] : /* istanbul ignore next */ []));
+        this.resizeBehavior = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizeBehavior" }] : /* istanbul ignore next */ []));
+        this.priority = input(false, { ...(ngDevMode ? { debugName: "priority" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        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)) {
@@ -264,420 +523,220 @@ class ContentfulImageComponent {
                     height: asset?.fields?.file?.details?.image?.height ?? null,
                 };
             }
-        }, ...(ngDevMode ? [{ debugName: "normalizedAsset" }] : []));
-        this._sources = computed(() => {
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "normalizedAsset" }] : /* istanbul ignore next */ []));
+        this.sourcesValue = computed(() => {
             const asset = this.asset();
-            const backgroundColor = this.backgroundColor();
-            const srcsetSizes = this.srcsetSizes();
-            const quality = this.quality();
-            const focusArea = this.focusArea();
-            const resizeBehavior = this.resizeBehavior();
+            const options = {
+                srcsetSizes: this.srcsetSizes(),
+                backgroundColor: this.backgroundColor(),
+                quality: this.quality(),
+                focusArea: this.focusArea(),
+                resizeBehavior: this.resizeBehavior(),
+            };
             if (!asset) {
                 return [];
             }
-            return generateContentfulImageSources(asset, srcsetSizes, backgroundColor, quality, focusArea, resizeBehavior);
-        }, ...(ngDevMode ? [{ debugName: "_sources" }] : []));
-        this._defaultSrc = computed(() => {
+            return generateContentfulImageSources(asset, options);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sourcesValue" }] : /* istanbul ignore next */ []));
+        this.defaultSrcValue = computed(() => {
             const asset = this.asset();
             return asset ? generateDefaultContentfulImageSource(asset) : null;
-        }, ...(ngDevMode ? [{ debugName: "_defaultSrc" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultSrcValue" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", 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: "22.1.6", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", 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 }, priority: { classPropertyName: "priority", publicName: "priority", 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()"
-      [figureClass]="figureClass()"
-      [pictureClass]="pictureClass()"
-      [figcaptionClass]="figcaptionClass()"
-      [defaultSrc]="_defaultSrc()"
-      [alt]="normalizedAsset().alt ?? null"
+      [priority]="priority()"
+      [defaultSrc]="defaultSrcValue()"
+      [alt]="normalizedAsset().alt ?? ''"
       [figcaption]="normalizedAsset().figcaption ?? null"
       [width]="normalizedAsset().width ?? null"
       [height]="normalizedAsset().height ?? null"
       [sizes]="sizes()"
-      [sources]="_sources()"
+      [sources]="sourcesValue()"
     />
-  `, 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 }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources", "defaultSrc", "alt", "figcaption", "priority", "width", "height", "aspectRatio", "sizes", "fit"], outputs: ["imgLoad", "imgError"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulImageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-image',
                     template: `
     <et-picture
-      [imgClass]="imgClass()"
-      [hasPriority]="hasPriority()"
-      [figureClass]="figureClass()"
-      [pictureClass]="pictureClass()"
-      [figcaptionClass]="figcaptionClass()"
-      [defaultSrc]="_defaultSrc()"
-      [alt]="normalizedAsset().alt ?? null"
+      [priority]="priority()"
+      [defaultSrc]="defaultSrcValue()"
+      [alt]="normalizedAsset().alt ?? ''"
       [figcaption]="normalizedAsset().figcaption ?? null"
       [width]="normalizedAsset().width ?? null"
       [height]="normalizedAsset().height ?? null"
       [sizes]="sizes()"
-      [sources]="_sources()"
+      [sources]="sourcesValue()"
     />
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     imports: [PictureComponent],
                     host: {
                         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(...(ngDevMode ? [{ debugName: "asset" }] : []));
-        this.videoClass = input(null, ...(ngDevMode ? [{ debugName: "videoClass" }] : []));
-        this.data = computed(() => {
-            const asset = this.asset();
-            if (!asset) {
-                return null;
-            }
-            if (isContentfulGqlAsset(asset)) {
-                return {
-                    url: asset.url,
-                    contentType: asset.contentType,
-                };
-            }
-            return {
-                url: asset.fields.file.url,
-                contentType: asset.fields.file.contentType,
-            };
-        }, ...(ngDevMode ? [{ debugName: "data" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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 }}" />
-      </video>
-    }
-  `, 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: "21.2.1", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'et-contentful-video',
-                    template: `
-    @if (data(); as data) {
-      <video [ngClass]="videoClass()" controls>
-        <source src="{{ data.url }}" type="{{ data.contentType }}" />
-      </video>
-    }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    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 }] }] } });
+        }], 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 }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", 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: {
-            srcsetSizes: ['375w', '1280w', '1920w', '2560w'],
-            sizes: [],
-            backgroundColor: null,
-        },
-    },
-    ...(config || {}),
-});
-
-const getPrimaryDomain = (host) => {
-    const parts = host.split('.');
-    return parts.length > 2 ? parts.slice(-2).join('.') : host;
+/**
+ * The `BLOCKS` node type strings of `@contentful/rich-text-types`, as a plain literal map.
+ * Keep the values in sync with the enum - they are part of the Contentful Delivery API.
+ *
+ * These maps exist because `BLOCKS` and `INLINES` are TS enums: reading one in a *value* position
+ * anywhere in this lib emits a runtime import and costs every consumer ~2.4 kB gz. Use the enums for
+ * types only - the `contentful-deps` size golden fails if that slips.
+ */
+const CF_BLOCKS = {
+    DOCUMENT: 'document',
+    PARAGRAPH: 'paragraph',
+    HEADING_1: 'heading-1',
+    HEADING_2: 'heading-2',
+    HEADING_3: 'heading-3',
+    HEADING_4: 'heading-4',
+    HEADING_5: 'heading-5',
+    HEADING_6: 'heading-6',
+    OL_LIST: 'ordered-list',
+    UL_LIST: 'unordered-list',
+    LIST_ITEM: 'list-item',
+    HR: 'hr',
+    QUOTE: 'blockquote',
+    EMBEDDED_ENTRY: 'embedded-entry-block',
+    EMBEDDED_ASSET: 'embedded-asset-block',
+    EMBEDDED_RESOURCE: 'embedded-resource-block',
+    TABLE: 'table',
+    TABLE_ROW: 'table-row',
+    TABLE_CELL: 'table-cell',
+    TABLE_HEADER_CELL: 'table-header-cell',
+};
+/**
+ * The `INLINES` node type strings of `@contentful/rich-text-types`, as a plain literal map.
+ * Keep the values in sync with the enum - they are part of the Contentful Delivery API.
+ */
+const CF_INLINES = {
+    ASSET_HYPERLINK: 'asset-hyperlink',
+    EMBEDDED_ENTRY: 'embedded-entry-inline',
+    EMBEDDED_RESOURCE: 'embedded-resource-inline',
+    ENTRY_HYPERLINK: 'entry-hyperlink',
+    HYPERLINK: 'hyperlink',
+    RESOURCE_HYPERLINK: 'resource-hyperlink',
 };
-class ContentfulLinkComponent {
-    constructor() {
-        this._document = inject(DOCUMENT);
-        this._config = inject(CONTENTFUL_CONFIG, { optional: true }) ?? createContentfulConfig();
-        this.href = input.required(...(ngDevMode ? [{ debugName: "href" }] : []));
-        this.text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
-        this.textClass = input('', ...(ngDevMode ? [{ debugName: "textClass" }] : []));
-        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" }] : []));
-        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" }] : []));
-        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" }] : []));
-        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" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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.1", 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".',
     asset_id_not_found: 'The asset ID was not found. This node is not supported.',
     entry_id_not_found: 'The entry ID was not found. This node is not supported.',
-    asset_not_found: 'The asset was not found. This node is not supported.',
-    entry_not_found: 'The entry was not found. This node is not supported.',
-    custom_component_not_found: 'No custom component found for entry type. Please provide one for this type.',
     text_parent_not_found: 'The parent node is not found. This structure is not supported.',
-    text_parent_wrong_type: 'The parent node neither a html element nor a custom component. This structure is not supported.',
+    cached_command_not_found: 'No rendered node was found for a render command. The renderer state is out of sync.',
+    cached_command_not_component: 'The rendered node for a component command is not a component. The renderer state is out of sync.',
+};
+const RICH_TEXT_RENDERER_ERROR_CODES = {
+    rich_text_undefined: 0,
+    rich_text_wrong_type: 1,
+    asset_id_not_found: 2,
+    entry_id_not_found: 3,
+    text_parent_not_found: 7,
+    cached_command_not_found: 9,
+    cached_command_not_component: 10,
 };
-const RICH_TEXT_RENDERER_ERROR_CODES = Object.keys(RICH_TEXT_RENDERER_ERRORS).reduce((acc, key, index) => {
-    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) => {
     return isObject(node) && 'nodeType' in node && node['nodeType'] === 'document';
 };
+const NODE_TYPE_TAGS = /* @__PURE__ */ (() => ({
+    [CF_BLOCKS.HEADING_1]: 'h1',
+    [CF_BLOCKS.HEADING_2]: 'h2',
+    [CF_BLOCKS.HEADING_3]: 'h3',
+    [CF_BLOCKS.HEADING_4]: 'h4',
+    [CF_BLOCKS.HEADING_5]: 'h5',
+    [CF_BLOCKS.HEADING_6]: 'h6',
+    [CF_BLOCKS.PARAGRAPH]: 'p',
+    [CF_BLOCKS.UL_LIST]: 'ul',
+    [CF_BLOCKS.OL_LIST]: 'ol',
+    [CF_BLOCKS.LIST_ITEM]: 'li',
+    [CF_BLOCKS.HR]: 'hr',
+    [CF_BLOCKS.QUOTE]: 'blockquote',
+    [CF_BLOCKS.TABLE]: 'table',
+    [CF_BLOCKS.TABLE_ROW]: 'tr',
+    [CF_BLOCKS.TABLE_CELL]: 'td',
+    [CF_BLOCKS.TABLE_HEADER_CELL]: 'th',
+}))();
+const INLINE_NODE_TYPES = /* @__PURE__ */ (() => new Set(Object.values(CF_INLINES)))();
+/**
+ * The html element a structural rich text node renders as. A node type without an element
+ * (an unsupported inline or block) falls back to `span` for inlines and `div` otherwise,
+ * with a dev-mode warning.
+ */
 const translateContentfulNodeTypeToHtmlTag = (nodeType) => {
-    switch (nodeType) {
-        case BLOCKS.HEADING_1:
-            return 'h1';
-        case BLOCKS.HEADING_2:
-            return 'h2';
-        case BLOCKS.HEADING_3:
-            return 'h3';
-        case BLOCKS.HEADING_4:
-            return 'h4';
-        case BLOCKS.HEADING_5:
-            return 'h5';
-        case BLOCKS.HEADING_6:
-            return 'h6';
-        case BLOCKS.PARAGRAPH:
-            return 'p';
-        case BLOCKS.UL_LIST:
-            return 'ul';
-        case BLOCKS.OL_LIST:
-            return 'ol';
-        case BLOCKS.LIST_ITEM:
-            return 'li';
-        case BLOCKS.HR:
-            return 'hr';
-        case BLOCKS.QUOTE:
-            return 'blockquote';
-        case BLOCKS.TABLE:
-            return 'table';
-        case BLOCKS.TABLE_ROW:
-            return 'tr';
-        case BLOCKS.TABLE_CELL:
-            return 'td';
-        case BLOCKS.TABLE_HEADER_CELL:
-            return 'th';
-        case BLOCKS.EMBEDDED_ASSET:
-            return 'div';
-        case INLINES.ENTRY_HYPERLINK:
-            return 'a';
-        case INLINES.ASSET_HYPERLINK:
-            return 'a';
-        case 'text':
-            return 'span';
-        // Will be ignored by the renderer
-        case 'document':
-            return 'div';
-        case BLOCKS.EMBEDDED_ENTRY:
-            return 'div';
-        case INLINES.EMBEDDED_ENTRY:
-            return 'div';
-        default:
-            return 'div';
+    const tag = NODE_TYPE_TAGS[nodeType];
+    if (tag) {
+        return tag;
+    }
+    const fallback = INLINE_NODE_TYPES.has(nodeType) ? 'span' : 'div';
+    if (isDevMode()) {
+        console.warn(`Unsupported rich text node type "${nodeType}"! Its content is rendered inside a <${fallback}>.`);
     }
+    return fallback;
 };
 
-const RENDER_COMMAND_TYPE = {
-    HTML_OPEN: 0,
-    HTML_CLOSE: 1,
-    TEXT: 2,
-    COMPONENT: 3,
+const DEFAULT_ANCHOR_CLASS = 'et-contentful-rich-text-default-element et-contentful-rich-text-default-a';
+const MARK_TAG_MAP = {
+    bold: 'strong',
+    italic: 'em',
+    underline: 'u',
+    code: 'code',
+    strikethrough: 's',
+    subscript: 'sub',
+    superscript: 'sup',
 };
-const RENDER_COMMAND_POSITION = {
-    TYPE: 0,
-    NESTING_LEVEL: 1,
-    DOM_POSITION: 2,
-    INDEX: 3,
-};
-const HTML_OPEN_RENDER_COMMAND_POSITION = {
-    ATTRIBUTES: 4,
-    TAG_NAME: 5,
-    ELEMENT_ID: 6,
-};
-const HTML_CLOSE_RENDER_COMMAND_POSITION = {
-    TAG_NAME: 4,
-    ELEMENT_ID: 5,
-};
-const TEXT_RENDER_COMMAND_POSITION = {
-    ATTRIBUTES: 4,
-    TEXT: 5,
-    TEXT_ID: 6,
-};
-const COMPONENT_RENDER_COMMAND_POSITION = {
-    ATTRIBUTES: 4,
-    COMPONENT: 5,
-    INPUTS: 6,
-    COMPONENT_ID: 7,
-};
-const RENDER_INSTRUCTION_POSITION = {
-    TYPE: 0,
-    COMMAND: 1,
-};
-const RENDER_INSTRUCTION_TYPE = {
-    CREATE: 0,
-    UPDATE: 1,
-    DELETE: 2,
-    MOVE: 3,
-};
-const MARK_TAILWIND_MAP = {
-    bold: 'font-bold',
-    italic: 'italic',
-    underline: 'underline',
-    code: 'font-mono',
-};
-const marksToClass = (marks) => {
-    const classes = [];
+/**
+ * Translates contentful text marks into the semantic html elements the marked text is
+ * wrapped in, outermost first. Unknown marks are skipped (with a dev-mode warning).
+ */
+const marksToTags = (marks) => {
+    const tags = [];
     for (const mark of marks) {
-        let klass = MARK_TAILWIND_MAP[mark.type];
-        if (!klass) {
-            console.warn(`No class found for mark type! Falling back to "${mark.type}".`, mark);
-            klass = mark.type;
+        const tag = MARK_TAG_MAP[mark.type];
+        if (!tag) {
+            if (isDevMode()) {
+                console.warn(`No element found for mark type "${mark.type}"! The mark is ignored.`, mark);
+            }
+            continue;
         }
-        classes.push(klass);
+        tags.push(tag);
     }
-    return classes.join(' ');
-};
-const isHtmlOpenRenderCommand = (command) => {
-    return command[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.HTML_OPEN;
-};
-const isHtmlCloseRenderCommand = (command) => {
-    return command[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.HTML_CLOSE;
+    return tags;
 };
-const isTextRenderCommand = (command) => {
-    return command[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.TEXT;
-};
-const isComponentRenderCommand = (command) => {
-    return command[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.COMPONENT;
-};
-const getRenderCommandId = (command) => {
-    if (isHtmlOpenRenderCommand(command)) {
-        return command[HTML_OPEN_RENDER_COMMAND_POSITION.ELEMENT_ID];
-    }
-    else if (isHtmlCloseRenderCommand(command)) {
-        return command[HTML_CLOSE_RENDER_COMMAND_POSITION.ELEMENT_ID];
+/**
+ * The classes marked text inside a hyperlink is rendered with, since the link component
+ * receives its text as a plain string.
+ */
+const marksToClass = (marks) => marks.map((mark) => `et-contentful-rich-text-mark-${mark.type}`).join(' ');
+const LINK_COMPONENT_TYPE = '$$$_et-link';
+const normalizeHref = (href) => {
+    if (!href.trim()) {
+        return null;
     }
-    else if (isTextRenderCommand(command)) {
-        return command[TEXT_RENDER_COMMAND_POSITION.TEXT_ID];
+    try {
+        const url = new URL(href, 'https://contentful.invalid');
+        return ['http:', 'https:', 'mailto:', 'tel:', 'ftp:'].includes(url.protocol) ? href : null;
     }
-    else {
-        return command[COMPONENT_RENDER_COMMAND_POSITION.COMPONENT_ID];
+    catch {
+        return null;
     }
 };
-const CLASS_ATTR = 'class';
-const DEFAULT_COMPONENT_TYPES = {
-    IMAGE: '$$$_et-image',
-    VIDEO: '$$$_et-video',
-    AUDIO: '$$$_et-audio',
-    FILE: '$$$_et-file',
-    LINK: '$$$_et-link',
-};
 const isExecutedComponentCommandCacheItem = (cache) => {
-    return isComponentRenderCommand(cache.command);
-};
-const isExecutedHtmlOrTextCommandCacheItem = (cache) => {
-    return isHtmlCloseRenderCommand(cache.command) || isHtmlOpenRenderCommand(cache.command);
-};
-const isExecutedTextCommandCacheItem = (cache) => {
-    return isTextRenderCommand(cache.command);
+    return cache.command.kind === 'component';
 };
 const ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID = '$$$_et-contentful-any-entry-content-type-sys-id';
 /**
@@ -692,7 +751,7 @@ const createContentfulIncludeMap = (config) => {
         const entry = entryMap.get(id);
         if (!entry) {
             if (isDevMode()) {
-                console.warn('Entry not found! Will return null. Is the include query param to low?', { id, entryMap });
+                console.warn('Entry not found! Will return null. Is the include query param too low?', { id, entryMap });
             }
             return null;
         }
@@ -733,40 +792,31 @@ const createContentfulIncludeMap = (config) => {
 };
 class ContentfulRichTextRendererComponent {
     constructor() {
-        this._viewContainerRef = inject(ViewContainerRef);
-        this._renderer = injectRenderer();
-        this._elementRef = inject(ElementRef);
-        this._document = inject(DOCUMENT);
-        this._config = inject(CONTENTFUL_CONFIG, { optional: true }) ?? createContentfulConfig();
-        /**
-         * A cache for all executed commands that are not deleted.
-         * This is used to keep track of all rendered elements and components.
-         * The key is the render command element ID.
-         */
-        this._executedCommandsCache = new Map();
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = injectRenderer();
+        this.elementRef = inject(ElementRef);
+        this.config = injectContentfulConfig();
+        this.document = inject(DOCUMENT);
         /**
          * 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(...(ngDevMode ? [{ debugName: "content" }] : []));
+        this.content = input.required(/* @ts-ignore */
+        ...(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(...(ngDevMode ? [{ debugName: "richTextPath" }] : []));
-        /**
-         * 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.
-         */
+        this.richTextPath = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "richTextPath" }] : /* istanbul ignore next */ []));
+        this.executedCommandsCache = new Map();
         this.contentIncludesMap = computed(() => {
             const content = this.content();
-            const assets = content?.includes.Asset;
-            const entries = content?.includes.Entry;
+            const assets = content?.includes?.Asset;
+            const entries = content?.includes?.Entry;
             return createContentfulIncludeMap({ assets: assets ?? [], entries: entries ?? [] });
-        }, ...(ngDevMode ? [{ debugName: "contentIncludesMap" }] : []));
-        /**
-         * The rich text data that should be rendered.
-         */
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentIncludesMap" }] : /* istanbul ignore next */ []));
         this.richTextData = computed(() => {
             const content = this.content();
             const richTextPath = this.richTextPath();
@@ -774,159 +824,145 @@ class ContentfulRichTextRendererComponent {
                 return null;
             }
             const richText = getObjectProperty(content, richTextPath);
+            if (richText === null || richText === undefined) {
+                return null;
+            }
             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" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "richTextData" }] : /* istanbul ignore next */ []));
         this.renderCommands = computed(() => {
             const richTextData = this.richTextData();
             if (!richTextData) {
                 return [];
             }
-            return this._createRenderCommands(richTextData);
-        }, ...(ngDevMode ? [{ debugName: "renderCommands" }] : []));
-        this.renderCommandHistory = toSignal(toObservable(this.renderCommands).pipe(startWith([]), pairwise()), { initialValue: [[], []] });
-        this.previousRenderCommandMap = computed(() => {
-            const [prevCommands] = this.renderCommandHistory();
-            const map = new Map();
-            for (const command of prevCommands) {
-                map.set(getRenderCommandId(command), command);
-            }
-            return map;
-        }, ...(ngDevMode ? [{ debugName: "previousRenderCommandMap" }] : []));
+            return this.createRenderCommands(richTextData);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderCommands" }] : /* istanbul ignore next */ []));
         this.renderInstructions = computed(() => {
             const commands = this.renderCommands();
-            const previousRenderCommandMap = new Map(this.previousRenderCommandMap());
+            const previousRenderCommandMap = new Map([...this.executedCommandsCache.entries()].map(([id, item]) => [id, item.command]));
             const instructions = [];
-            // remove deleted components as well as all other elements
-            for (const [, command] of previousRenderCommandMap) {
-                if (isComponentRenderCommand(command)) {
-                    // keep the component around if it's still in the new commands
-                    if (commands.some((c) => getRenderCommandId(c) === getRenderCommandId(command))) {
-                        continue;
+            const preserved = new Set();
+            const needsReattach = new Set();
+            const markTagsEqual = (a, b) => a.length === b.length && a.every((tag, index) => tag === b[index]);
+            const attributesEqual = (a, b) => {
+                const aKeys = Object.keys(a);
+                return aKeys.length === Object.keys(b).length && aKeys.every((key) => a[key] === b[key]);
+            };
+            for (const command of commands) {
+                if (command.kind === 'htmlClose') {
+                    continue;
+                }
+                const previous = previousRenderCommandMap.get(command.id);
+                if (!previous || previous.kind !== command.kind) {
+                    continue;
+                }
+                if (previous.kind === 'component' && command.kind === 'component' && previous.component !== command.component) {
+                    continue;
+                }
+                const parentPreserved = previous.parentId === command.parentId && (command.parentId === null || preserved.has(command.parentId));
+                if (command.kind === 'component') {
+                    preserved.add(command.id);
+                    const samePlace = parentPreserved &&
+                        previous.nestingLevel === command.nestingLevel &&
+                        previous.domPosition === command.domPosition;
+                    if (!samePlace) {
+                        needsReattach.add(command.id);
                     }
+                    continue;
+                }
+                const sameOutput = previous.kind === command.kind &&
+                    (previous.kind !== 'htmlOpen' || previous.tagName === command.tagName) &&
+                    (previous.kind !== 'text' ||
+                        (previous.text === command.text &&
+                            markTagsEqual(previous.markTags, command.markTags)));
+                if (parentPreserved &&
+                    sameOutput &&
+                    previous.nestingLevel === command.nestingLevel &&
+                    previous.domPosition === command.domPosition &&
+                    attributesEqual(previous.attributes, command.attributes)) {
+                    preserved.add(command.id);
                 }
-                instructions.push([RENDER_INSTRUCTION_TYPE.DELETE, command]);
-                // remove from map to mark as used
-                previousRenderCommandMap.delete(getRenderCommandId(command));
             }
-            // Find the indexes of the commands remaining in the previousRenderCommandMap in the new commands array.
-            const lastComponentIndexes = [];
             for (const [id, command] of previousRenderCommandMap) {
-                const index = commands.findIndex((c) => getRenderCommandId(c) === id);
-                const newCommand = commands[index];
-                if (index === -1) {
-                    throw new Error('Command not found!');
+                if (command.kind !== 'htmlClose' && !preserved.has(id)) {
+                    instructions.push({ type: 'delete', command });
                 }
-                lastComponentIndexes.push({
-                    newIndex: index,
-                    prevIndex: command[RENDER_COMMAND_POSITION.INDEX],
-                    command: newCommand,
-                });
             }
-            lastComponentIndexes.sort((a, b) => a.newIndex - b.newIndex);
-            // check if the prevIndex are in order ascending
-            // for indexes that are not in order, create a move instruction
-            // for indexes that are in order, create an update instruction
-            let moveCheckIndex = 0;
-            while (moveCheckIndex < lastComponentIndexes.length - 1) {
-                const moveCurr = lastComponentIndexes[moveCheckIndex];
-                const moveNext = lastComponentIndexes[moveCheckIndex + 1];
-                if (!moveCurr || !moveNext) {
-                    break;
-                }
-                if (moveCurr.prevIndex > moveNext.prevIndex) {
-                    lastComponentIndexes.splice(moveCheckIndex + 1, 1);
-                    instructions.push([RENDER_INSTRUCTION_TYPE.MOVE, moveNext.command]);
+            for (const command of commands) {
+                if (command.kind === 'htmlClose') {
+                    continue;
                 }
-                else {
-                    instructions.push([RENDER_INSTRUCTION_TYPE.UPDATE, moveNext.command]);
-                    moveCheckIndex++;
+                if (!preserved.has(command.id)) {
+                    instructions.push({ type: 'create', command });
                 }
-            }
-            for (const command of commands) {
-                const id = getRenderCommandId(command);
-                if (isComponentRenderCommand(command)) {
-                    const previousCommand = previousRenderCommandMap.get(id);
-                    if (!previousCommand) {
-                        // create
-                        instructions.push([RENDER_INSTRUCTION_TYPE.CREATE, command]);
-                    }
+                else if (command.kind === 'component' && needsReattach.has(command.id)) {
+                    instructions.push({ type: 'move', command });
                 }
                 else {
-                    // create
-                    instructions.push([RENDER_INSTRUCTION_TYPE.CREATE, command]);
+                    instructions.push({ type: 'update', command });
                 }
             }
             return instructions;
-        }, ...(ngDevMode ? [{ debugName: "renderInstructions" }] : []));
-        toObservable(this.renderInstructions)
-            .pipe(takeUntilDestroyed(), tap((instructions) => {
-            this._execInstructions(instructions);
-        }))
-            .subscribe();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderInstructions" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const instructions = this.renderInstructions();
+            untracked(() => this.execInstructions(instructions));
+        });
     }
-    _createRenderCommands(richTextData) {
-        /** List of all render commands */
+    createRenderCommands(richTextData) {
         const rootCommands = [];
-        /** Counter for generating unique html element IDs. */
         let elementOpenId = 0;
-        /** Counter for generating unique html element IDs. */
         let elementCloseId = 0;
-        /** Counter for generating unique component IDs. */
         const componentIdMap = new Map();
-        /** The nesting level of the current node. */
         let nestingLevel = 0;
-        /** The position (index) of the current node inside the parent node. */
         let domPosition = 0;
         let textId = 0;
-        let commandIndex = 0;
+        const openElementIds = [];
         const traverse = (node) => {
             switch (node.nodeType) {
                 case 'text': {
-                    // Render media
-                    const type = RENDER_COMMAND_TYPE.TEXT;
                     const text = node.value;
                     if (!text)
                         break;
                     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) {
-                            attributes[CLASS_ATTR] += ` ${markClasses}`;
-                        }
-                        else {
-                            attributes[CLASS_ATTR] = markClasses;
-                        }
-                    }
-                    const id = 't' + textId++;
-                    const command = [type, nestingLevel, domPosition, commandIndex++, attributes, text, id];
-                    rootCommands.push(command);
+                    rootCommands.push({
+                        kind: 'text',
+                        nestingLevel,
+                        domPosition,
+                        parentId: openElementIds.at(-1) ?? null,
+                        attributes,
+                        markTags: node.marks.length ? marksToTags(node.marks) : [],
+                        text,
+                        id: 't' + textId++,
+                    });
                     domPosition++;
                     break;
                 }
-                case BLOCKS.EMBEDDED_ASSET: {
-                    // Render media
-                    const type = RENDER_COMMAND_TYPE.COMPONENT;
+                case CF_BLOCKS.EMBEDDED_ASSET: {
                     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 });
+                        if (isDevMode()) {
+                            console.warn('Embedded asset is missing from the includes! The asset will be skipped. Is it unpublished or deleted?', { assetId, node });
+                        }
+                        break;
                     }
-                    const contentType = asset.fields.file.contentType;
-                    const assetComponents = this._config.components;
-                    // Every property inside the asset will be null if no file was provided for a translation.
-                    // In this case, we can assume that the asset is missing due to user error.
-                    const isMissing = !contentType && !asset.fields.file.url;
+                    const contentType = asset.fields.file?.contentType;
+                    const assetComponents = this.config.components;
+                    const isMissing = !contentType && !asset.fields.file?.url;
                     if (isMissing) {
                         if (isDevMode()) {
                             console.warn('Asset is missing file data! Asset will be skipped. Did you forget to upload a file for the current translation in Contentful?', { asset });
@@ -943,146 +979,189 @@ class ContentfulRichTextRendererComponent {
                             : isAudio
                                 ? assetComponents.audio
                                 : assetComponents.file;
-                    const componentType = isImage
-                        ? DEFAULT_COMPONENT_TYPES.IMAGE
-                        : isVideo
-                            ? DEFAULT_COMPONENT_TYPES.VIDEO
-                            : isAudio
-                                ? DEFAULT_COMPONENT_TYPES.AUDIO
-                                : DEFAULT_COMPONENT_TYPES.FILE;
-                    let componentId = componentIdMap.get(componentType) ?? -1;
-                    const id = componentType + ++componentId;
-                    componentIdMap.set(componentType, componentId);
-                    const attributes = {};
-                    const inputs = {
-                        asset,
-                    };
-                    const command = [
-                        type,
+                    if (!component) {
+                        if (isDevMode()) {
+                            console.warn('No component registered for this embedded asset! The asset will be skipped. Provide one via provideContentfulConfig({ components: … }).', { asset });
+                        }
+                        break;
+                    }
+                    const occurrenceKey = 'asset:' + assetId;
+                    const occurrence = (componentIdMap.get(occurrenceKey) ?? -1) + 1;
+                    componentIdMap.set(occurrenceKey, occurrence);
+                    const id = occurrence === 0 ? occurrenceKey : `${occurrenceKey}:${occurrence}`;
+                    rootCommands.push({
+                        kind: 'component',
                         nestingLevel,
                         domPosition,
-                        commandIndex++,
-                        attributes,
+                        parentId: openElementIds.at(-1) ?? null,
                         component,
-                        inputs,
+                        inputs: { asset },
                         id,
-                    ];
-                    rootCommands.push(command);
+                    });
                     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);
+                case CF_INLINES.HYPERLINK:
+                case CF_INLINES.ASSET_HYPERLINK:
+                case CF_INLINES.ENTRY_HYPERLINK: {
+                    let href = null;
+                    if (node.nodeType === CF_INLINES.HYPERLINK) {
+                        href = normalizeHref(node.data['uri'] ?? '');
+                    }
+                    else if (node.nodeType === CF_INLINES.ASSET_HYPERLINK) {
+                        const assetId = node.data['target']?.sys?.id;
+                        const asset = assetId ? this.contentIncludesMap().getAsset(assetId) : null;
+                        const url = asset?.fields.file?.url;
+                        href = url ? normalizeHref(url) : null;
+                    }
+                    const linkTexts = node.content.filter((child) => child.nodeType === 'text' && Boolean(child.value));
+                    const linkText = linkTexts.map((child) => child.value).join('');
+                    const linkComponent = href ? this.config.components.link : null;
+                    if (href && !linkComponent) {
+                        const attributes = { class: DEFAULT_ANCHOR_CLASS, href };
+                        if (isExternalWebHref(href, { location: this.document.location, internalHosts: this.config.internalHosts })) {
+                            attributes['target'] = '_blank';
+                            attributes['rel'] = 'noopener noreferrer';
                         }
+                        rootCommands.push({
+                            kind: 'htmlOpen',
+                            nestingLevel,
+                            domPosition,
+                            parentId: openElementIds.at(-1) ?? null,
+                            attributes,
+                            tagName: 'a',
+                            id: 'e-o' + elementOpenId++,
+                        });
+                        const anchorDomPosition = domPosition;
+                        openElementIds.push('e-o' + (elementOpenId - 1));
+                        nestingLevel++;
+                        domPosition = 0;
+                        for (const child of linkTexts) {
+                            traverse(child);
+                        }
+                        openElementIds.pop();
+                        nestingLevel--;
+                        domPosition = anchorDomPosition;
+                        rootCommands.push({
+                            kind: 'htmlClose',
+                            nestingLevel,
+                            domPosition,
+                            parentId: openElementIds.at(-1) ?? null,
+                            tagName: 'a',
+                            id: 'e-c' + elementCloseId++,
+                        });
+                        domPosition++;
+                        break;
                     }
-                    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,
+                    if (!href) {
+                        for (const child of linkTexts) {
+                            traverse(child);
+                        }
+                        break;
+                    }
+                    if (!linkComponent) {
+                        break;
+                    }
+                    const sharedMarks = linkTexts[0]?.marks.filter((mark) => linkTexts.every((child) => child.marks.some((other) => other.type === mark.type))) ?? [];
+                    const textClass = marksToClass(sharedMarks);
+                    let linkComponentId = componentIdMap.get(LINK_COMPONENT_TYPE) ?? -1;
+                    const linkId = LINK_COMPONENT_TYPE + ++linkComponentId;
+                    componentIdMap.set(LINK_COMPONENT_TYPE, linkComponentId);
+                    rootCommands.push({
+                        kind: 'component',
                         nestingLevel,
                         domPosition,
-                        commandIndex++,
-                        {},
-                        this._config.components.link,
-                        { href: uri, text: linkText, textClass },
-                        linkId,
-                    ];
-                    rootCommands.push(linkCommand);
+                        parentId: openElementIds.at(-1) ?? null,
+                        component: linkComponent,
+                        inputs: { href, text: linkText, textClass, anchorClass: DEFAULT_ANCHOR_CLASS },
+                        id: linkId,
+                    });
                     domPosition++;
                     break;
                 }
-                case BLOCKS.EMBEDDED_ENTRY:
-                case INLINES.EMBEDDED_ENTRY: {
-                    // Render component
-                    const type = RENDER_COMMAND_TYPE.COMPONENT;
+                case CF_BLOCKS.EMBEDDED_ENTRY:
+                case CF_INLINES.EMBEDDED_ENTRY: {
                     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 });
+                        if (isDevMode()) {
+                            console.warn('Embedded entry is missing from the includes! The entry will be skipped. Is it unpublished or deleted?', { entryId, node });
+                        }
+                        break;
                     }
                     const componentType = entry.sys.contentType.sys.id;
-                    const component = this._config.customComponents[componentType];
+                    const component = this.config.customComponents[componentType];
                     if (!component) {
-                        throw richTextRendererError('custom_component_not_found', false, {
-                            componentType,
-                            customComponents: this._config.customComponents,
-                            entry,
-                        });
+                        if (isDevMode()) {
+                            console.warn('No custom component registered for this embedded entry type! The entry will be skipped. Provide one via provideContentfulConfig({ customComponents: … }).', { componentType, customComponents: this.config.customComponents, entry });
+                        }
+                        break;
                     }
-                    const attributes = {};
-                    let componentId = componentIdMap.get(componentType) ?? -1;
-                    const id = componentType + ++componentId;
-                    componentIdMap.set(componentType, componentId);
-                    const inputs = {
-                        fields: entry.fields,
-                        metadata: entry.metadata,
-                        sys: entry.sys,
-                        includes: this.contentIncludesMap(),
-                    };
-                    const command = [
-                        type,
+                    const occurrenceKey = 'entry:' + entryId;
+                    const occurrence = (componentIdMap.get(occurrenceKey) ?? -1) + 1;
+                    componentIdMap.set(occurrenceKey, occurrence);
+                    const id = occurrence === 0 ? occurrenceKey : `${occurrenceKey}:${occurrence}`;
+                    rootCommands.push({
+                        kind: 'component',
                         nestingLevel,
                         domPosition,
-                        commandIndex++,
-                        attributes,
+                        parentId: openElementIds.at(-1) ?? null,
                         component,
-                        inputs,
+                        inputs: {
+                            fields: entry.fields,
+                            metadata: entry.metadata,
+                            sys: entry.sys,
+                            includes: this.contentIncludesMap(),
+                        },
                         id,
-                    ];
-                    rootCommands.push(command);
+                    });
                     domPosition++;
                     break;
                 }
                 default: {
-                    const type = RENDER_COMMAND_TYPE.HTML_OPEN;
                     const tag = translateContentfulNodeTypeToHtmlTag(node.nodeType);
                     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);
+                    rootCommands.push({
+                        kind: 'htmlOpen',
+                        nestingLevel,
+                        domPosition,
+                        parentId: openElementIds.at(-1) ?? null,
+                        attributes,
+                        tagName: tag,
+                        id: 'e-o' + elementOpenId++,
+                    });
                     const domPositionAtThisLevel = domPosition;
-                    // Normal html elements can have children
+                    openElementIds.push('e-o' + (elementOpenId - 1));
+                    nestingLevel++;
+                    domPosition = 0;
                     for (const child of node.content) {
-                        domPosition = 0;
-                        nestingLevel++;
                         traverse(child);
-                        nestingLevel--;
-                        domPosition = domPositionAtThisLevel;
                     }
+                    openElementIds.pop();
+                    nestingLevel--;
+                    domPosition = domPositionAtThisLevel;
                     const lastCommand = rootCommands[rootCommands.length - 1];
-                    if (lastCommand?.[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.HTML_OPEN &&
-                        lastCommand[HTML_OPEN_RENDER_COMMAND_POSITION.TAG_NAME] !== 'td' &&
-                        lastCommand[HTML_OPEN_RENDER_COMMAND_POSITION.TAG_NAME] !== 'hr') {
-                        // If the last command is an open command, we can remove it since it's empty
+                    if (lastCommand?.kind === 'htmlOpen' &&
+                        lastCommand.tagName !== 'td' &&
+                        lastCommand.tagName !== 'th' &&
+                        lastCommand.tagName !== 'hr') {
                         rootCommands.pop();
                         elementOpenId--;
-                        commandIndex--;
                     }
                     else {
-                        const closeId = 'e-c' + elementCloseId++;
-                        const closeCommand = [
-                            RENDER_COMMAND_TYPE.HTML_CLOSE,
+                        rootCommands.push({
+                            kind: 'htmlClose',
                             nestingLevel,
                             domPosition,
-                            commandIndex++,
-                            tag,
-                            closeId,
-                        ];
-                        rootCommands.push(closeCommand);
+                            parentId: openElementIds.at(-1) ?? null,
+                            tagName: tag,
+                            id: 'e-c' + elementCloseId++,
+                        });
                         domPosition++;
                     }
                     break;
@@ -1094,246 +1173,174 @@ class ContentfulRichTextRendererComponent {
         }
         return rootCommands;
     }
-    _execInstructions(instructions) {
-        for (const instruction of instructions) {
-            const type = instruction[RENDER_INSTRUCTION_POSITION.TYPE];
-            const command = instruction[RENDER_INSTRUCTION_POSITION.COMMAND];
+    execInstructions(instructions) {
+        const lastPlacedChild = new Map();
+        for (const { type, command } of instructions) {
+            if (type === 'delete') {
+                this.runDeleteInstruction(command);
+                continue;
+            }
+            const previousSibling = lastPlacedChild.get(command.parentId) ?? null;
             switch (type) {
-                case RENDER_INSTRUCTION_TYPE.CREATE:
-                    this._runCreateInstruction(command);
-                    break;
-                case RENDER_INSTRUCTION_TYPE.UPDATE:
-                    this._runUpdateInstruction(command);
+                case 'create':
+                    this.runCreateInstruction(command, previousSibling);
                     break;
-                case RENDER_INSTRUCTION_TYPE.MOVE:
-                    this._runMoveInstruction(command);
+                case 'update':
+                    this.runUpdateInstruction(command);
                     break;
-                case RENDER_INSTRUCTION_TYPE.DELETE:
-                    this._runDeleteInstruction(command);
+                case 'move':
+                    this.runMoveInstruction(command, previousSibling);
                     break;
             }
+            const element = this.executedCommandsCache.get(command.id)?.element;
+            if (element) {
+                lastPlacedChild.set(command.parentId, element);
+            }
         }
     }
-    _runCreateInstruction(command) {
-        const id = getRenderCommandId(command);
-        const parentElement = this._findParent(command);
-        const nextElement = this._findFollowingElement(command);
-        if (isComponentRenderCommand(command)) {
-            const componentRef = this._viewContainerRef.createComponent(command[COMPONENT_RENDER_COMMAND_POSITION.COMPONENT]);
-            this._updateComponentInputs(command, componentRef);
-            const rootNode = this._getComponentRootNode(componentRef);
-            this._renderInsertOrAppend(rootNode, parentElement, nextElement);
-            this._executedCommandsCache.set(id, {
+    runCreateInstruction(command, previousSibling) {
+        const parentElement = this.findParent(command);
+        if (command.kind === 'component') {
+            const inputs = signal(command.inputs, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []));
+            const declaredInputs = reflectComponentType(command.component)?.inputs ?? [];
+            const bindings = declaredInputs
+                .filter((declared) => declared.propName in command.inputs)
+                .map((declared) => inputBinding(declared.templateName, () => inputs()[declared.propName]));
+            const componentRef = this.viewContainerRef.createComponent(command.component, { bindings });
+            const rootNode = this.getComponentRootNode(componentRef);
+            this.renderInsertAfter(rootNode, { parentElement, previousSibling });
+            this.executedCommandsCache.set(command.id, {
                 command,
                 componentRef,
+                inputs,
                 element: rootNode,
             });
         }
-        else if (isTextRenderCommand(command)) {
-            const text = command[TEXT_RENDER_COMMAND_POSITION.TEXT];
-            const span = this._renderer.createElement('span');
-            const attributes = command[TEXT_RENDER_COMMAND_POSITION.ATTRIBUTES];
-            const textSplitInLineBreaks = text.split('\n').filter((t) => t.trim().length > 0);
-            const textNodes = [];
-            for (const [key, value] of Object.entries(attributes)) {
-                this._renderer.setAttribute(span, key, value);
+        else if (command.kind === 'text') {
+            const span = this.renderer.createElement('span');
+            const textSplitInLineBreaks = command.text.split('\n');
+            for (const [key, value] of Object.entries(command.attributes)) {
+                this.renderer.setAttribute(span, key, value);
             }
-            if (text.startsWith('\n')) {
-                const brNode = this._renderer.createElement('br');
-                this._renderer.appendChild(parentElement, brNode);
+            let textContainer = span;
+            for (const tag of command.markTags) {
+                const markElement = this.renderer.createElement(tag);
+                this.renderer.appendChild(textContainer, markElement);
+                textContainer = markElement;
             }
             for (const [textPartIndex, textPart] of textSplitInLineBreaks.entries()) {
                 if (textPartIndex > 0) {
-                    const brNode = this._renderer.createElement('br');
-                    this._renderer.appendChild(span, brNode);
+                    const brNode = this.renderer.createElement('br');
+                    this.renderer.appendChild(textContainer, brNode);
+                }
+                if (textPart) {
+                    const textNode = this.renderer.createText(textPart);
+                    this.renderer.appendChild(textContainer, textNode);
                 }
-                const textNode = this._renderer.createText(textPart);
-                this._renderer.appendChild(span, textNode);
-                textNodes.push(textNode);
             }
-            this._renderInsertOrAppend(span, parentElement, nextElement);
-            this._executedCommandsCache.set(id, {
+            this.renderInsertAfter(span, { parentElement, previousSibling });
+            this.executedCommandsCache.set(command.id, {
                 command,
                 element: span,
-                textNode: textNodes,
             });
         }
-        else if (isHtmlOpenRenderCommand(command)) {
-            const tag = command[HTML_OPEN_RENDER_COMMAND_POSITION.TAG_NAME];
-            const attributes = command[HTML_OPEN_RENDER_COMMAND_POSITION.ATTRIBUTES];
-            const element = this._renderer.createElement(tag);
-            for (const [key, value] of Object.entries(attributes)) {
-                this._renderer.setAttribute(element, key, value);
+        else if (command.kind === 'htmlOpen') {
+            const element = this.renderer.createElement(command.tagName);
+            for (const [key, value] of Object.entries(command.attributes)) {
+                this.renderer.setAttribute(element, key, value);
             }
-            this._renderInsertOrAppend(element, parentElement, nextElement);
-            this._executedCommandsCache.set(id, {
+            this.renderInsertAfter(element, { parentElement, previousSibling });
+            this.executedCommandsCache.set(command.id, {
                 command,
                 element,
             });
         }
     }
-    _runUpdateInstruction(command) {
-        const id = getRenderCommandId(command);
-        const cached = this._executedCommandsCache.get(id);
+    runUpdateInstruction(command) {
+        const cached = this.executedCommandsCache.get(command.id);
         if (!cached) {
-            throw new Error('Cached command not found!');
+            throw richTextRendererError('cached_command_not_found', { command });
         }
-        if (isComponentRenderCommand(command)) {
+        if (command.kind === 'component') {
             if (!isExecutedComponentCommandCacheItem(cached)) {
-                throw new Error('Cached command is not a component command!');
-            }
-            const componentRef = cached.componentRef;
-            if (!componentRef) {
-                throw new Error('Component ref not found!');
+                throw richTextRendererError('cached_command_not_component', { command });
             }
-            this._updateComponentInputs(command, componentRef);
+            cached.inputs.set(command.inputs);
         }
-        this._executedCommandsCache.set(id, {
+        this.executedCommandsCache.set(command.id, {
             ...cached,
-            command: command,
+            command,
         });
     }
-    _runMoveInstruction(command) {
-        const id = getRenderCommandId(command);
-        const cached = this._executedCommandsCache.get(id);
+    runMoveInstruction(command, previousSibling) {
+        const cached = this.executedCommandsCache.get(command.id);
         if (!cached) {
-            throw new Error('Cached command not found!');
+            throw richTextRendererError('cached_command_not_found', { command });
         }
-        if (isComponentRenderCommand(command)) {
+        if (command.kind === 'component') {
             if (!isExecutedComponentCommandCacheItem(cached)) {
-                throw new Error('Cached command is not a component command!');
-            }
-            const componentRef = cached.componentRef;
-            if (!componentRef) {
-                throw new Error('Component ref not found!');
+                throw richTextRendererError('cached_command_not_component', { command });
             }
             const rootNode = cached.element;
             const oldParentElement = cached.element.parentElement;
             if (oldParentElement) {
-                this._renderer.removeChild(oldParentElement, rootNode);
+                this.renderer.removeChild(oldParentElement, rootNode);
             }
-            const newParentElement = this._findParent(command);
-            const nextElement = this._findFollowingElement(command);
-            this._renderInsertOrAppend(rootNode, newParentElement, nextElement);
-            this._updateComponentInputs(command, componentRef);
-            this._executedCommandsCache.set(id, {
+            this.renderInsertAfter(rootNode, { parentElement: this.findParent(command), previousSibling });
+            cached.inputs.set(command.inputs);
+            this.executedCommandsCache.set(command.id, {
                 ...cached,
-                command: command,
+                command,
             });
         }
     }
-    _runDeleteInstruction(command) {
-        const id = getRenderCommandId(command);
-        const cached = this._executedCommandsCache.get(id);
+    runDeleteInstruction(command) {
+        const cached = this.executedCommandsCache.get(command.id);
         if (!cached) {
-            if (isHtmlCloseRenderCommand(command)) {
+            if (command.kind === 'htmlClose') {
                 return;
             }
-            throw new Error('Cached command not found!');
+            throw richTextRendererError('cached_command_not_found', { command });
         }
-        if (isComponentRenderCommand(command)) {
+        if (command.kind === 'component') {
             if (!isExecutedComponentCommandCacheItem(cached)) {
-                throw new Error('Cached command is not a component command!');
+                throw richTextRendererError('cached_command_not_component', { command });
             }
-            cached.componentRef?.destroy();
+            cached.componentRef.destroy();
         }
-        else if (isTextRenderCommand(command)) {
-            if (cached.element?.parentElement) {
-                this._renderer.removeChild(cached.element.parentElement, cached.element);
+        else if (command.kind === 'text' || command.kind === 'htmlOpen') {
+            if (cached.element.parentElement) {
+                this.renderer.removeChild(cached.element.parentElement, cached.element);
             }
         }
-        else if (isHtmlOpenRenderCommand(command)) {
-            if (cached.element?.parentElement) {
-                this._renderer.removeChild(cached.element.parentElement, cached.element);
-            }
-        }
-        this._executedCommandsCache.delete(id);
+        this.executedCommandsCache.delete(command.id);
     }
-    _getComponentRootNode(componentRef) {
+    getComponentRootNode(componentRef) {
         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])) {
-            const publicName = inputsByProp.get(key);
-            if (publicName === undefined)
-                continue;
-            componentRef.setInput(publicName, value);
-        }
-    }
-    _findParent(command) {
-        const hostElement = this._elementRef.nativeElement;
-        const nestingLevel = command[RENDER_COMMAND_POSITION.NESTING_LEVEL];
-        let parentElement;
-        if (nestingLevel === 0) {
-            parentElement = hostElement;
-        }
-        else {
-            // Reverse search all render commands beginning from the current one using a for loop.
-            // The parent is found when the command's nesting level ist the same as the current nesting level minus 1.
-            // If the parent is not found, throw an error.
-            const allCommands = this.renderCommands();
-            const currentCommandIndex = command[RENDER_COMMAND_POSITION.INDEX];
-            let parentCommand = null;
-            for (let i = currentCommandIndex - 1; i >= 0; i--) {
-                const cmd = allCommands[i];
-                if (!cmd) {
-                    throw new Error('Command not found!');
-                }
-                if (cmd[RENDER_COMMAND_POSITION.NESTING_LEVEL] === nestingLevel - 1 && isHtmlOpenRenderCommand(cmd)) {
-                    parentCommand = cmd;
-                    break;
-                }
-            }
-            if (!parentCommand) {
-                throw new Error('Parent command not found!');
-            }
-            parentElement = this._executedCommandsCache.get(getRenderCommandId(parentCommand))?.element;
+    findParent(command) {
+        if (command.parentId === null) {
+            return this.elementRef.nativeElement;
         }
+        const parentElement = this.executedCommandsCache.get(command.parentId)?.element;
         if (!parentElement) {
-            throw new Error('Parent element not found!');
+            throw richTextRendererError('text_parent_not_found', { command });
         }
         return parentElement;
     }
-    _findFollowingElement(command) {
-        const cacheArray = Array.from(this._executedCommandsCache.values());
-        let nextElement = undefined;
-        const domPosition = command[RENDER_COMMAND_POSITION.DOM_POSITION];
-        const nestingLevel = command[RENDER_COMMAND_POSITION.NESTING_LEVEL];
-        const type = command[RENDER_COMMAND_POSITION.TYPE];
-        // Try to find an already rendered element with a domPosition that is greater than the current domPosition. If there are multiple, use the one with the smallest domPosition.
-        // If it does not exist, use .appendChild to simply append the element to the end of the parent element.
-        // If it does exist, use .insertBefore to insert the element before the found element.
-        for (const cached of cacheArray) {
-            if (cached.command[RENDER_COMMAND_POSITION.DOM_POSITION] > domPosition &&
-                cached.command[RENDER_COMMAND_POSITION.NESTING_LEVEL] === nestingLevel &&
-                // Make sure the element does not find itself
-                cached.command[RENDER_COMMAND_POSITION.TYPE] !== type) {
-                nextElement = cached.element;
-                break;
-            }
-        }
-        return nextElement;
+    renderInsertAfter(node, { parentElement, previousSibling }) {
+        this.renderer.insertBefore(parentElement, node, previousSibling ? previousSibling.nextSibling : parentElement.firstChild);
     }
-    _renderInsertOrAppend(nodeToRender, parentElement, nextElement) {
-        if (nextElement) {
-            this._renderer.insertBefore(parentElement, nodeToRender, nextElement);
-        }
-        else {
-            this._renderer.appendChild(parentElement, nodeToRender);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", 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: "22.1.6", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", 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, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-rich-text-renderer',
                     template: ``,
                     encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'et-contentful-rich-text-renderer',
                     },
@@ -1348,16 +1355,14 @@ const ContentfulImports = [
     ContentfulRichTextRendererComponent,
 ];
 
-const provideContentfulConfig = (contentfulConfig = {}) => {
+const provideContentfulConfig = (contentfulConfig) => {
     return { provide: CONTENTFUL_CONFIG, useValue: createContentfulConfig(contentfulConfig) };
 };
 const isContentfulEntryType = (entry, type) => entry.sys.contentType.sys.id === type;
 
-// Burst cache
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { CONTENTFUL_CONFIG, CONTENTFUL_FILE_LABELS, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulLinkComponent, ContentfulRichTextRendererComponent, ContentfulVideoComponent, DEFAULT_CONTENTFUL_FILE_LABELS, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, createContentfulConfig, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, injectContentfulConfig, injectContentfulFileLabels, isContentfulEntryType, isContentfulGqlAsset, isRichTextRootNode, marksToClass, marksToTags, parseContentfulImageSize, provideContentfulConfig, provideContentfulFileLabels, translateContentfulNodeTypeToHtmlTag };
 //# sourceMappingURL=ethlete-contentful.mjs.map