@ethlete/contentful 2.1.2 → 3.0.1

package/fesm2022/ethlete-contentful.mjs

@@ -1,53 +1,71 @@
-import { NgClass, NgOptimizedImage, DOCUMENT } from '@angular/common';
+import { NgClass, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ChangeDetectorRef, Renderer2, ElementRef, ComponentFactoryResolver, ApplicationRef, Injector } from '@angular/core';
-import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
-import * as i1 from '@ethlete/cdk';
-import { PictureDataDirective, PictureComponent } from '@ethlete/cdk';
-import { BLOCKS, INLINES } from '@contentful/rich-text-types';
+import { input, Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, inject, numberAttribute, booleanAttribute, computed, ViewContainerRef, Renderer2, ElementRef } from '@angular/core';
+import { normalizePictureSizes, PictureComponent } from '@ethlete/cdk';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { INLINES, BLOCKS } from '@contentful/rich-text-types';
+import { RuntimeError, isObject, getObjectProperty } from '@ethlete/core';
+import { startWith, pairwise, tap } from 'rxjs';
 import { gql } from '@ethlete/query';
 
-const CONTENTFUL_CONFIG = new InjectionToken('ContentfulConfig');
-
-class ContentfulFileComponent {
+class ContentfulAudioComponent {
     constructor() {
-        this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, { optional: true });
-        this._data = null;
-        this.fileClass = null;
+        this.asset = input.required();
+        this.audioClass = input(null);
+        this.figureClass = input(null);
+        this.figcaptionClass = input(null);
     }
-    get data() {
-        return this._data;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, audioClass: { classPropertyName: "audioClass", publicName: "audioClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (asset(); as data) {
+      <figure [ngClass]="figureClass()">
+        <figcaption [ngClass]="figcaptionClass()">{{ data.fields.title }}</figcaption>
+        <audio [ngClass]="audioClass()" controls src="{{ data.fields.file.url }}"></audio>
+      </figure>
     }
-    set data(v) {
-        if (v && !v.contentType) {
-            this._data = null;
-            console.warn('The provided asset is invalid', v);
-            return;
-        }
-        this._data = v ?? null;
+  `, 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: "17.3.3", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-contentful-audio',
+                    template: `
+    @if (asset(); as data) {
+      <figure [ngClass]="figureClass()">
+        <figcaption [ngClass]="figcaptionClass()">{{ data.fields.title }}</figcaption>
+        <audio [ngClass]="audioClass()" controls src="{{ data.fields.file.url }}"></audio>
+      </figure>
     }
-    ngOnInit() {
-        if (this._richTextData && !this.data) {
-            this.data = this._richTextData;
-        }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: true,
+                    imports: [NgClass],
+                }]
+        }] });
+
+class ContentfulFileComponent {
+    constructor() {
+        this.asset = input.required();
+        this.fileClass = input(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { data: "data", fileClass: "fileClass" }, ngImport: i0, template: `
-    @if (data) {
-      <a [href]="data.url" [ngClass]="fileClass" class="underline" target="_blank">
-        {{ data.title }} ({{ data.size }} Bytes)
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, fileClass: { classPropertyName: "fileClass", publicName: "fileClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (asset(); as data) {
+      <a [href]="data.fields.file.url" [ngClass]="fileClass()" class="underline" target="_blank">
+        {{ data.fields.title }} ({{ data.fields.file.details.size }} Bytes)
       </a>
     }
   `, 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: "17.3.0", ngImport: i0, type: ContentfulFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulFileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-file',
                     template: `
-    @if (data) {
-      <a [href]="data.url" [ngClass]="fileClass" class="underline" target="_blank">
-        {{ data.title }} ({{ data.size }} Bytes)
+    @if (asset(); as data) {
+      <a [href]="data.fields.file.url" [ngClass]="fileClass()" class="underline" target="_blank">
+        {{ data.fields.title }} ({{ data.fields.file.details.size }} Bytes)
       </a>
     }
   `,
@@ -56,27 +74,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     standalone: true,
                     imports: [NgClass],
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], fileClass: [{
-                type: Input
-            }] } });
+        }] });
 
-const provideContentfulConfig = (contentfulConfig = {}) => {
-    return { provide: CONTENTFUL_CONFIG, useValue: createContentfulConfig(contentfulConfig) };
-};
-const isContentfulImage = (v) => {
-    return !!v && 'asset' in v && 'alt' in v && 'resizeBehavior' in v && 'focusArea' in v;
-};
-const isContentfulAsset = (v) => {
-    return !!v && 'contentType' in v && 'description' in v && 'height' in v && 'url' in v && 'width' in v;
-};
+const CONTENTFUL_CONFIG = new InjectionToken('ContentfulConfig');
 
 const generateDefaultContentfulImageSource = (data) => {
-    const { url, contentType } = data;
+    const file = data.fields.file;
     return {
-        type: contentType,
-        srcset: url,
+        type: file.contentType,
+        srcset: file.url,
     };
 };
 /**
@@ -106,16 +112,15 @@ const parseContentfulImageSize = (size) => {
         height: height ? parseInt(height, 10) : null,
     };
 };
-const generateContentfulImageSources = (data, srcsetSizes, backgroundColor) => {
-    const assetData = isContentfulImage(data) ? data.asset : data;
-    const imageData = isContentfulImage(data) ? data : null;
+const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, quality, focusArea, resizeBehavior) => {
+    const assetData = data;
     if (!assetData) {
         return [];
     }
     const sources = [];
     const SOURCE_TYPES = ['image/avif', 'image/webp', 'image/png', 'image/jpg'];
     for (const type of SOURCE_TYPES) {
-        const baseUrl = assetData.url;
+        const baseUrl = assetData.fields.file.url;
         const sourceSets = [];
         const queryParams = [];
         // Set the format (e.g. 'fm=webp')
@@ -123,16 +128,14 @@ const generateContentfulImageSources = (data, srcsetSizes, backgroundColor) => {
         if (backgroundColor) {
             queryParams.push(`bg=rgb:${backgroundColor}`);
         }
-        if (imageData) {
-            if (imageData.quality) {
-                queryParams.push(`q=${imageData.quality}`);
-            }
-            if (imageData.focusArea) {
-                queryParams.push(`f=${imageData.focusArea}`);
-            }
-            if (imageData.resizeBehavior) {
-                queryParams.push(`fit=${imageData.resizeBehavior}`);
-            }
+        if (quality !== null) {
+            queryParams.push(`q=${quality}`);
+        }
+        if (focusArea) {
+            queryParams.push(`f=${focusArea}`);
+        }
+        if (resizeBehavior) {
+            queryParams.push(`fit=${resizeBehavior}`);
         }
         if (srcsetSizes?.length) {
             const urlWithParams = `${baseUrl}?${queryParams.join('&')}`;
@@ -159,174 +162,108 @@ const generateContentfulImageSources = (data, srcsetSizes, backgroundColor) => {
 
 class ContentfulImageComponent {
     constructor() {
-        this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, {
-            optional: true,
+        this._contentfulConfig = inject(CONTENTFUL_CONFIG);
+        this.asset = input.required();
+        this.backgroundColor = input(null);
+        this.srcsetSizes = input(this._contentfulConfig.imageOptions.srcsetSizes);
+        this.quality = input(null, { transform: numberAttribute });
+        this.focusArea = input(null);
+        this.resizeBehavior = input(null);
+        this.hasPriority = input(false, { transform: booleanAttribute });
+        this.imgClass = input(null);
+        this.figureClass = input(null);
+        this.figcaptionClass = input(null);
+        this.pictureClass = input(null);
+        this.sizes = input(normalizePictureSizes(this._contentfulConfig.imageOptions.sizes), {
+            transform: (v) => normalizePictureSizes(v),
+        });
+        this._sources = 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();
+            if (!asset) {
+                return [];
+            }
+            return generateContentfulImageSources(asset, srcsetSizes, backgroundColor, quality, focusArea, resizeBehavior);
+        });
+        this._defaultSrc = computed(() => {
+            const asset = this.asset();
+            return asset ? generateDefaultContentfulImageSource(asset) : null;
         });
-        this.pictureData = inject(PictureDataDirective);
-        this._cdr = inject(ChangeDetectorRef);
-        this._data = null;
-        this._sizes = [];
-        this._srcsetSizes = [];
-        this._backgroundColor = null;
-        this.sources = [];
-    }
-    get data() {
-        return this._data;
-    }
-    set data(v) {
-        const assetData = isContentfulImage(v) ? v.asset : v;
-        const imageData = isContentfulImage(v) ? v : null;
-        if (assetData && !assetData.contentType) {
-            this._data = null;
-            console.warn('The provided asset is invalid', v);
-            return;
-        }
-        if (assetData && !assetData.contentType.startsWith('image/')) {
-            throw new Error('The provided asset is not an image');
-        }
-        this._data = v ?? null;
-        this.pictureData.defaultSrc = assetData ? generateDefaultContentfulImageSource(assetData) : null;
-        this.pictureData.alt = imageData?.alt ?? assetData?.description ?? null;
-        this.pictureData.width = assetData?.width ?? null;
-        this.pictureData.height = assetData?.height ?? null;
-        this.pictureData.figcaption = imageData?.caption ?? null;
-        this.updateSizes();
-    }
-    get sizes() {
-        return this._sizes;
-    }
-    set sizes(v) {
-        this._sizes = v;
-        this.pictureData.sizes = this.sizes?.join(', ') ?? null;
-    }
-    get srcsetSizes() {
-        return this._srcsetSizes;
-    }
-    set srcsetSizes(v) {
-        this._srcsetSizes = v;
-        this.updateSizes();
-    }
-    get backgroundColor() {
-        return this._backgroundColor;
-    }
-    set backgroundColor(v) {
-        this._backgroundColor = v;
-        this.updateSizes();
-    }
-    ngOnInit() {
-        if (this._richTextData && !this.data) {
-            this.data = this._richTextData;
-        }
-    }
-    updateSizes() {
-        this.sources = this._data ? generateContentfulImageSources(this._data, this.srcsetSizes, this.backgroundColor) : [];
-        this._cdr.markForCheck();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { data: "data", sizes: "sizes", srcsetSizes: "srcsetSizes", backgroundColor: "backgroundColor" }, host: { classAttribute: "et-contentful-image" }, hostDirectives: [{ directive: i1.PictureDataDirective, inputs: ["imgClass", "imgClass", "hasPriority", "hasPriority", "figureClass", "figureClass", "pictureClass", "pictureClass", "figcaptionClass", "figcaptionClass"] }], ngImport: i0, template: `
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.3", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, srcsetSizes: { classPropertyName: "srcsetSizes", publicName: "srcsetSizes", isSignal: true, isRequired: false, transformFunction: null }, quality: { classPropertyName: "quality", publicName: "quality", isSignal: true, isRequired: false, transformFunction: null }, focusArea: { classPropertyName: "focusArea", publicName: "focusArea", isSignal: true, isRequired: false, transformFunction: null }, resizeBehavior: { classPropertyName: "resizeBehavior", publicName: "resizeBehavior", isSignal: true, isRequired: false, transformFunction: null }, hasPriority: { classPropertyName: "hasPriority", publicName: "hasPriority", isSignal: true, isRequired: false, transformFunction: null }, imgClass: { classPropertyName: "imgClass", publicName: "imgClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null }, pictureClass: { classPropertyName: "pictureClass", publicName: "pictureClass", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-image" }, ngImport: i0, template: `
     <et-picture
-      [imgClass]="pictureData.imgClass"
-      [hasPriority]="pictureData.hasPriority"
-      [figureClass]="pictureData.figureClass"
-      [pictureClass]="pictureData.pictureClass"
-      [figcaptionClass]="pictureData.figcaptionClass"
-      [defaultSrc]="pictureData.defaultSrc"
-      [alt]="pictureData.alt"
-      [figcaption]="pictureData.figcaption"
-      [width]="pictureData.width"
-      [height]="pictureData.height"
-      [sizes]="pictureData.sizes"
-      [sources]="sources"
+      [imgClass]="imgClass()"
+      [hasPriority]="hasPriority()"
+      [figureClass]="figureClass()"
+      [pictureClass]="pictureClass()"
+      [figcaptionClass]="figcaptionClass()"
+      [defaultSrc]="_defaultSrc()"
+      [alt]="asset()?.fields?.title ?? null"
+      [figcaption]="asset()?.fields?.description ?? null"
+      [width]="asset()?.fields?.file?.details?.image?.width ?? null"
+      [height]="asset()?.fields?.file?.details?.image?.height ?? null"
+      [sizes]="sizes()"
+      [sources]="_sources()"
     />
-  `, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources", "hasPriority", "imgClass", "figureClass", "figcaptionClass", "pictureClass", "defaultSrc", "alt", "figcaption", "width", "height", "sizes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ContentfulImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulImageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-image',
                     template: `
     <et-picture
-      [imgClass]="pictureData.imgClass"
-      [hasPriority]="pictureData.hasPriority"
-      [figureClass]="pictureData.figureClass"
-      [pictureClass]="pictureData.pictureClass"
-      [figcaptionClass]="pictureData.figcaptionClass"
-      [defaultSrc]="pictureData.defaultSrc"
-      [alt]="pictureData.alt"
-      [figcaption]="pictureData.figcaption"
-      [width]="pictureData.width"
-      [height]="pictureData.height"
-      [sizes]="pictureData.sizes"
-      [sources]="sources"
+      [imgClass]="imgClass()"
+      [hasPriority]="hasPriority()"
+      [figureClass]="figureClass()"
+      [pictureClass]="pictureClass()"
+      [figcaptionClass]="figcaptionClass()"
+      [defaultSrc]="_defaultSrc()"
+      [alt]="asset()?.fields?.title ?? null"
+      [figcaption]="asset()?.fields?.description ?? null"
+      [width]="asset()?.fields?.file?.details?.image?.width ?? null"
+      [height]="asset()?.fields?.file?.details?.image?.height ?? null"
+      [sizes]="sizes()"
+      [sources]="_sources()"
     />
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     standalone: true,
-                    imports: [NgClass, NgOptimizedImage, PictureComponent],
-                    hostDirectives: [
-                        {
-                            directive: PictureDataDirective,
-                            // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                            inputs: ['imgClass', 'hasPriority', 'figureClass', 'pictureClass', 'figcaptionClass'],
-                        },
-                    ],
+                    imports: [PictureComponent],
                     host: {
                         class: 'et-contentful-image',
                     },
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], sizes: [{
-                type: Input
-            }], srcsetSizes: [{
-                type: Input
-            }], backgroundColor: [{
-                type: Input
-            }] } });
+        }] });
 
 class ContentfulVideoComponent {
     constructor() {
-        this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, { optional: true });
-        this._data = null;
-        this.videoClass = null;
-    }
-    get data() {
-        return this._data;
-    }
-    set data(v) {
-        if (v && !v.contentType) {
-            this._data = null;
-            console.warn('The provided asset is invalid', v);
-            return;
-        }
-        if (v && !v.contentType.startsWith('video/')) {
-            throw new Error('The provided asset is not an video');
-        }
-        this._data = v ?? null;
+        this.asset = input.required();
+        this.videoClass = input(null);
     }
-    ngOnInit() {
-        if (this._richTextData && !this.data) {
-            this.data = this._richTextData;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { data: "data", videoClass: "videoClass" }, ngImport: i0, template: `
-    @if (data) {
-      <video [ngClass]="videoClass" controls>
-        <source src="{{ data.url }}" type="{{ data.contentType }}" />
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", 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 (asset(); as data) {
+      <video [ngClass]="videoClass()" controls>
+        <source src="{{ data.fields.file.url }}" type="{{ data.fields.file.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: "17.3.0", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-video',
                     template: `
-    @if (data) {
-      <video [ngClass]="videoClass" controls>
-        <source src="{{ data.url }}" type="{{ data.contentType }}" />
+    @if (asset(); as data) {
+      <video [ngClass]="videoClass()" controls>
+        <source src="{{ data.fields.file.url }}" type="{{ data.fields.file.contentType }}" />
       </video>
     }
   `,
@@ -335,11 +272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     standalone: true,
                     imports: [NgClass],
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], videoClass: [{
-                type: Input
-            }] } });
+        }] });
 
 const createContentfulConfig = (config = {}) => ({
     // This default config must be inline and not saved inside a const for some weird webpack reason
@@ -361,118 +294,28 @@ const createContentfulConfig = (config = {}) => ({
     ...(config || {}),
 });
 
-const RICH_TEXT_RENDERER_COMPONENT_DATA = new InjectionToken('RICH_TEXT_RENDERER_COMPONENT_DATA');
-
-const createRenderCommandsFromContentfulRichText = (options) => {
-    const { data, config } = options;
-    const commands = [];
-    const resourceMap = createContentfulResourceMap(data.links);
-    createContentfulRenderCommand(data.json, { children: commands, payload: data.json.nodeType }, resourceMap, config);
-    return commands;
-};
-const createContentfulRenderCommand = (node, parent, resourceMap, config) => {
-    const { nodeType, data: nodeData } = node;
-    const { children, marks, value } = getContentfulNodeProps(node);
-    const command = {
-        payload: translateContentfulNodeTypeToHtmlTag(nodeType),
-        data: value,
-        attributes: {
-            ...(marks
-                ? {
-                    class: transformContentfulMarks(marks, config.useTailwindClasses),
-                }
-                : {}),
-            ...(nodeData['uri'] ? { href: nodeData['uri'], target: '_blank' } : {}),
-        },
-        children: [],
-    };
-    const entryId = nodeData['target']?.sys?.id;
-    if (nodeType === BLOCKS.EMBEDDED_ASSET) {
-        const asset = resourceMap.assetsBlock.get(entryId);
-        if (asset) {
-            const isImage = asset.contentType.startsWith('image/');
-            const isVideo = asset.contentType.startsWith('video/');
-            const isAudio = asset.contentType.startsWith('audio/');
-            command.data = asset;
-            if (isImage) {
-                command.payload = config.components.image;
-            }
-            else if (isVideo) {
-                command.payload = config.components.video;
-            }
-            else if (isAudio) {
-                command.payload = config.components.audio;
-            }
-            else {
-                command.payload = config.components.file;
-            }
-        }
-        else {
-            console.warn(`No asset found for entry id "${entryId}"!`, nodeData);
-        }
-    }
-    else if (nodeType === BLOCKS.EMBEDDED_ENTRY || nodeType === INLINES.EMBEDDED_ENTRY) {
-        const entry = resourceMap.entriesBlock.get(entryId) ?? resourceMap.entriesInline.get(entryId);
-        if (entry) {
-            const type = entry?.__typename ?? 'ET_UNKNOWN';
-            // "Image" is a special wrapper content model for contentful assets.
-            // It must be created by the user.
-            const component = type === 'Image' ? ContentfulImageComponent : config.customComponents?.[type];
-            if (component) {
-                command.payload = component;
-                command.data = entry;
-            }
-            else {
-                command.data = `ERROR: No component found for embedded entry "${type}" as "${nodeType}"!`;
-            }
-        }
-        else {
-            console.warn(`No entry found for entry id "${entryId}"!`, nodeData);
-        }
-    }
-    if (children && (children.length !== 1 || children[0]?.nodeType !== 'text')) {
-        children.forEach((child) => {
-            createContentfulRenderCommand(child, command, resourceMap, config);
-        });
-    }
-    parent.children.push(command);
-    return command;
+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.',
 };
-const getContentfulNodeProps = (node) => {
-    const children = 'content' in node ? node.content : null;
-    let marks = null;
-    let value = null;
-    if (children && children.length === 1 && children[0]?.nodeType === 'text') {
-        marks = children[0].marks?.length ? children[0].marks : null;
-        value = children[0].value;
-    }
-    else {
-        marks = 'marks' in node ? (node.marks?.length ? node.marks : null) : null;
-        value = 'value' in node ? node.value : null;
-    }
-    return {
-        children,
-        marks,
-        value,
-    };
+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 message = `<et-contentful-rich-text-renderer>: ${RICH_TEXT_RENDERER_ERRORS[code]}`;
+    throw new RuntimeError(RICH_TEXT_RENDERER_ERROR_CODES[code], message, devOnly, data);
 };
-const transformContentfulMarks = (marks, useTailwindClasses) => {
-    return marks
-        .map((mark) => {
-        switch (mark.type) {
-            case 'bold':
-                return useTailwindClasses ? 'font-bold' : mark.type;
-            case 'italic':
-                return useTailwindClasses ? 'italic' : mark.type;
-            case 'underline':
-                return useTailwindClasses ? 'underline' : mark.type;
-            case 'code':
-                return useTailwindClasses ? 'font-mono' : mark.type;
-            default:
-                return mark.type;
-        }
-    })
-        .join(' ');
+
+const isRichTextRootNode = (node) => {
+    return isObject(node) && 'nodeType' in node && node['nodeType'] === 'document';
 };
 const translateContentfulNodeTypeToHtmlTag = (nodeType) => {
     switch (nodeType) {
@@ -529,116 +372,686 @@ const translateContentfulNodeTypeToHtmlTag = (nodeType) => {
             return 'div';
     }
 };
-const createContentfulResourceMap = (links) => {
-    const resourceMap = {
-        assetsBlock: createContentfulMap(links?.assets?.block),
-        entriesInline: createContentfulMap(links?.entries?.inline),
-        entriesBlock: createContentfulMap(links?.entries?.block),
-    };
-    return resourceMap;
+
+const RENDER_COMMAND_TYPE = {
+    HTML_OPEN: 0,
+    HTML_CLOSE: 1,
+    TEXT: 2,
+    COMPONENT: 3,
 };
-const createContentfulMap = (links) => {
-    const assetMap = new Map();
-    if (links) {
-        for (const link of links) {
-            if (!link?.sys?.id) {
-                console.warn('Link has no sys.id property. Please include it inside your query.', link);
-                continue;
-            }
-            assetMap.set(link.sys.id, link);
+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 = {
+    TEXT: 4,
+};
+const COMPONENT_RENDER_COMMAND_POSITION = {
+    ATTRIBUTES: 4,
+    COMPONENT: 5,
+    INPUTS: 6,
+    COMPONENT_TYPE: 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 = [];
+    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;
         }
+        classes.push(klass);
     }
-    return assetMap;
+    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;
+};
+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];
+    }
+    else if (isTextRenderCommand(command)) {
+        return command[TEXT_RENDER_COMMAND_POSITION.TEXT];
+    }
+    else {
+        return command[COMPONENT_RENDER_COMMAND_POSITION.COMPONENT_TYPE];
+    }
+};
+const CLASS_ATTR = 'class';
+const DEFAULT_COMPONENT_TYPES = {
+    IMAGE: '$$$_et-image',
+    VIDEO: '$$$_et-video',
+    AUDIO: '$$$_et-audio',
+    FILE: '$$$_et-file',
+};
+const isExecutedComponentCommandCacheItem = (cache) => {
+    return isComponentRenderCommand(cache.command);
+};
+const isExecutedHtmlOrTextCommandCacheItem = (cache) => {
+    return isHtmlCloseRenderCommand(cache.command) || isHtmlOpenRenderCommand(cache.command);
+};
+const isExecutedTextCommandCacheItem = (cache) => {
+    return isTextRenderCommand(cache.command);
 };
-
 class ContentfulRichTextRendererComponent {
     constructor() {
-        this._richText = null;
+        this._viewContainerRef = inject(ViewContainerRef);
         this._renderer = inject(Renderer2);
         this._elementRef = inject(ElementRef);
-        this._componentFactoryResolver = inject(ComponentFactoryResolver);
         this._document = inject(DOCUMENT);
-        this._appRef = inject(ApplicationRef);
-        this._injector = inject(Injector);
         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();
+        /**
+         * 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();
+        /**
+         * The path to where the rich text field is inside the contentful response. Dot and array notation is allowed.
+         * @default "items[0].fields.html"
+         */
+        this.richTextPath = input.required();
+        /**
+         * 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.contentIncludesMap = computed(() => {
+            const content = this.content();
+            const assets = content?.includes.Asset;
+            const entries = content?.includes.Entry;
+            return {
+                assets: assets?.reduce((acc, asset) => {
+                    acc[asset.sys.id] = asset;
+                    return acc;
+                }, {}) ?? {},
+                entries: entries?.reduce((acc, entry) => {
+                    acc[entry.sys.id] = entry;
+                    return acc;
+                }, {}) ?? {},
+            };
+        });
+        /**
+         * The rich text data that should be rendered.
+         */
+        this.richTextData = computed(() => {
+            const content = this.content();
+            const richTextPath = this.richTextPath();
+            if (!content) {
+                return null;
+            }
+            const richText = getObjectProperty(content, richTextPath);
+            if (!isObject(richText)) {
+                throw richTextRendererError('rich_text_undefined', false, { content, richTextPath });
+            }
+            if (!isRichTextRootNode(richText)) {
+                throw richTextRendererError('rich_text_wrong_type', false, { content, richTextPath });
+            }
+            return richText;
+        });
+        this.renderCommands = computed(() => {
+            const richTextData = this.richTextData();
+            if (!richTextData) {
+                return [];
+            }
+            return this._createRenderCommands(richTextData);
+        });
+        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;
+        });
+        this.renderInstructions = computed(() => {
+            const commands = this.renderCommands();
+            const previousRenderCommandMap = new Map(this.previousRenderCommandMap());
+            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;
+                    }
+                }
+                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!');
+                }
+                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]);
+                }
+                else {
+                    instructions.push([RENDER_INSTRUCTION_TYPE.UPDATE, moveNext.command]);
+                    moveCheckIndex++;
+                }
+            }
+            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 {
+                    // create
+                    instructions.push([RENDER_INSTRUCTION_TYPE.CREATE, command]);
+                }
+            }
+            return instructions;
+        });
+        toObservable(this.renderInstructions)
+            .pipe(takeUntilDestroyed(), tap((instructions) => {
+            this._execInstructions(instructions);
+        }))
+            .subscribe();
     }
-    get richText() {
-        return this._richText;
+    _createRenderCommands(richTextData) {
+        /** List of all render commands */
+        const rootCommands = [];
+        /** Counter for generating unique html element IDs. */
+        let elementId = 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 commandIndex = 0;
+        const traverse = (node, parent = null) => {
+            switch (node.nodeType) {
+                case 'text': {
+                    // Render media
+                    const type = RENDER_COMMAND_TYPE.TEXT;
+                    const text = node.value;
+                    if (!text)
+                        break;
+                    const command = [type, nestingLevel, domPosition, commandIndex++, text];
+                    rootCommands.push(command);
+                    domPosition++;
+                    if (!parent) {
+                        throw richTextRendererError('text_parent_not_found', false, { node });
+                    }
+                    if (!isHtmlOpenRenderCommand(parent) && !isComponentRenderCommand(parent)) {
+                        throw richTextRendererError('text_parent_wrong_type', false, { node, parent });
+                    }
+                    const attributesPosition = parent[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.HTML_OPEN
+                        ? HTML_OPEN_RENDER_COMMAND_POSITION.ATTRIBUTES
+                        : COMPONENT_RENDER_COMMAND_POSITION.ATTRIBUTES;
+                    const attributes = parent[attributesPosition];
+                    if (node.marks.length) {
+                        const markClasses = marksToClass(node.marks);
+                        if (CLASS_ATTR in attributes) {
+                            attributes[CLASS_ATTR] += ` ${markClasses}`;
+                        }
+                        else {
+                            attributes[CLASS_ATTR] = markClasses;
+                        }
+                    }
+                    break;
+                }
+                case BLOCKS.EMBEDDED_ASSET: {
+                    // Render media
+                    const type = RENDER_COMMAND_TYPE.COMPONENT;
+                    const assetId = node.data['target']?.sys?.id;
+                    if (!assetId) {
+                        throw richTextRendererError('asset_id_not_found', false, { node });
+                    }
+                    const asset = this.contentIncludesMap().assets[assetId];
+                    if (!asset) {
+                        throw richTextRendererError('asset_not_found', false, { assetId, node });
+                    }
+                    const contentType = asset.fields.file.contentType;
+                    const assetComponents = this._config.components;
+                    const isImage = contentType.startsWith('image/');
+                    const isVideo = contentType.startsWith('video/');
+                    const isAudio = contentType.startsWith('audio/');
+                    const component = isImage
+                        ? assetComponents.image
+                        : isVideo
+                            ? assetComponents.video
+                            : 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,
+                        nestingLevel,
+                        domPosition,
+                        commandIndex++,
+                        attributes,
+                        component,
+                        inputs,
+                        id,
+                    ];
+                    rootCommands.push(command);
+                    domPosition++;
+                    break;
+                }
+                case BLOCKS.EMBEDDED_ENTRY:
+                case INLINES.EMBEDDED_ENTRY: {
+                    // Render component
+                    const type = RENDER_COMMAND_TYPE.COMPONENT;
+                    const entryId = node.data['target']?.sys?.id;
+                    if (!entryId) {
+                        throw richTextRendererError('entry_id_not_found', false, { node });
+                    }
+                    const entry = this.contentIncludesMap().entries[entryId];
+                    if (!entry) {
+                        throw richTextRendererError('entry_not_found', false, { entryId, node });
+                    }
+                    const componentType = entry.sys.contentType.sys.id;
+                    const component = this._config.customComponents[componentType];
+                    if (!component) {
+                        throw richTextRendererError('custom_component_not_found', false, {
+                            componentType,
+                            customComponents: this._config.customComponents,
+                            entry,
+                        });
+                    }
+                    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,
+                        nestingLevel,
+                        domPosition,
+                        commandIndex++,
+                        attributes,
+                        component,
+                        inputs,
+                        id,
+                    ];
+                    rootCommands.push(command);
+                    domPosition++;
+                    break;
+                }
+                default: {
+                    const type = RENDER_COMMAND_TYPE.HTML_OPEN;
+                    const tag = translateContentfulNodeTypeToHtmlTag(node.nodeType);
+                    const attributes = {};
+                    const id = 'e' + elementId++;
+                    const command = [type, nestingLevel, domPosition, commandIndex++, attributes, tag, id];
+                    rootCommands.push(command);
+                    const domPositionAtThisLevel = domPosition;
+                    // Normal html elements can have children
+                    for (const child of node.content) {
+                        domPosition = 0;
+                        nestingLevel++;
+                        traverse(child, command);
+                        nestingLevel--;
+                        domPosition = domPositionAtThisLevel;
+                    }
+                    const lastCommand = rootCommands[rootCommands.length - 1];
+                    if (lastCommand?.[RENDER_COMMAND_POSITION.TYPE] === RENDER_COMMAND_TYPE.HTML_OPEN) {
+                        // If the last command is an open command, we can remove it since it's empty
+                        rootCommands.pop();
+                    }
+                    else {
+                        const closeId = 'e' + elementId++;
+                        const closeCommand = [
+                            RENDER_COMMAND_TYPE.HTML_CLOSE,
+                            nestingLevel,
+                            domPosition,
+                            commandIndex++,
+                            tag,
+                            closeId,
+                        ];
+                        rootCommands.push(closeCommand);
+                        domPosition++;
+                    }
+                    if (node.nodeType === INLINES.HYPERLINK) {
+                        const uri = node.data['uri'];
+                        attributes['href'] = uri;
+                        const host = this._document.location.host;
+                        const isExternal = !uri.includes(host);
+                        if (isExternal) {
+                            attributes['target'] = '_blank';
+                        }
+                    }
+                    break;
+                }
+            }
+        };
+        for (const node of richTextData.content) {
+            traverse(node, null);
+        }
+        return rootCommands;
     }
-    set richText(v) {
-        this._richText = v ?? null;
-        this.resetAndRender();
+    _execInstructions(instructions) {
+        for (const instruction of instructions) {
+            const type = instruction[RENDER_INSTRUCTION_POSITION.TYPE];
+            const command = instruction[RENDER_INSTRUCTION_POSITION.COMMAND];
+            switch (type) {
+                case RENDER_INSTRUCTION_TYPE.CREATE:
+                    this._runCreateInstruction(command);
+                    break;
+                case RENDER_INSTRUCTION_TYPE.UPDATE:
+                    this._runUpdateInstruction(command);
+                    break;
+                case RENDER_INSTRUCTION_TYPE.MOVE:
+                    this._runMoveInstruction(command);
+                    break;
+                case RENDER_INSTRUCTION_TYPE.DELETE:
+                    this._runDeleteInstruction(command);
+                    break;
+            }
+        }
     }
-    resetAndRender() {
-        // clear childNodes to prevent appending new richtext elements to existing one
-        const childElements = this._elementRef.nativeElement.childNodes;
-        for (const child of childElements) {
-            this._renderer.removeChild(this._elementRef.nativeElement, child);
+    _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, {
+                command,
+                componentRef,
+                element: rootNode,
+            });
         }
-        if (!this._richText) {
-            return;
+        else if (isTextRenderCommand(command)) {
+            const text = command[TEXT_RENDER_COMMAND_POSITION.TEXT];
+            const textNode = this._renderer.createText(text);
+            const span = this._renderer.createElement('span');
+            this._renderer.appendChild(span, textNode);
+            this._renderInsertOrAppend(span, parentElement, nextElement);
+            this._executedCommandsCache.set(id, {
+                command,
+                element: span,
+                textNode,
+            });
+        }
+        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);
+            }
+            this._renderInsertOrAppend(element, parentElement, nextElement);
+            this._executedCommandsCache.set(id, {
+                command,
+                element,
+            });
         }
-        const commands = createRenderCommandsFromContentfulRichText({ data: this._richText, config: this._config });
-        this._render(commands);
     }
-    _render(commands) {
-        // create a document fragment to hold the elements while we create them
-        const fragment = document.createDocumentFragment();
-        const hostCommand = {
-            payload: 'document',
-            children: commands,
-        };
-        // loop over the commands
-        this._executeCommand({ command: hostCommand, parent: fragment });
-        // append the fragment to the host element
-        this._renderer.appendChild(this._elementRef.nativeElement, fragment);
-    }
-    _executeCommand(data) {
-        const { command, parent } = data;
-        let element = null;
-        if (command.payload !== 'document') {
-            if (typeof command.payload === 'string') {
-                element = this._renderer.createElement(command.payload);
-                if (command.data) {
-                    this._renderer.setProperty(element, 'innerText', command.data);
+    _runUpdateInstruction(command) {
+        const id = getRenderCommandId(command);
+        const cached = this._executedCommandsCache.get(id);
+        if (!cached) {
+            throw new Error('Cached command not found!');
+        }
+        if (isComponentRenderCommand(command)) {
+            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!');
+            }
+            this._updateComponentInputs(command, componentRef);
+        }
+        this._executedCommandsCache.set(id, {
+            ...cached,
+            command: command,
+        });
+    }
+    _runMoveInstruction(command) {
+        const id = getRenderCommandId(command);
+        const cached = this._executedCommandsCache.get(id);
+        if (!cached) {
+            throw new Error('Cached command not found!');
+        }
+        if (isComponentRenderCommand(command)) {
+            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!');
+            }
+            const rootNode = cached.element;
+            const oldParentElement = cached.element.parentElement;
+            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, {
+                ...cached,
+                command: command,
+            });
+        }
+    }
+    _runDeleteInstruction(command) {
+        const id = getRenderCommandId(command);
+        const cached = this._executedCommandsCache.get(id);
+        if (!cached) {
+            if (isHtmlCloseRenderCommand(command)) {
+                return;
+            }
+            throw new Error('Cached command not found!');
+        }
+        if (isComponentRenderCommand(command)) {
+            if (!isExecutedComponentCommandCacheItem(cached)) {
+                throw new Error('Cached command is not a component command!');
+            }
+            cached.componentRef?.destroy();
+        }
+        else if (isTextRenderCommand(command)) {
+            this._renderer.removeChild(cached.element?.parentElement, cached.element);
+        }
+        else if (isHtmlOpenRenderCommand(command)) {
+            this._renderer.removeChild(cached.element?.parentElement, cached.element);
+        }
+        this._executedCommandsCache.delete(id);
+    }
+    _getComponentRootNode(componentRef) {
+        return componentRef.hostView.rootNodes[0];
+    }
+    _updateComponentInputs(command, componentRef) {
+        for (const [key, value] of Object.entries(command[COMPONENT_RENDER_COMMAND_POSITION.INPUTS])) {
+            if (!componentRef.instance[key])
+                continue;
+            componentRef.setInput(key, value);
+        }
+    }
+    _findParent(command) {
+        const hostElement = this._elementRef.nativeElement;
+        const nestingLevel = command[RENDER_COMMAND_POSITION.NESTING_LEVEL];
+        let parentElement = undefined;
+        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 (command.attributes) {
-                    for (const [name, value] of Object.entries(command.attributes)) {
-                        this._renderer.setAttribute(element, name, value);
-                    }
+                if (cmd[RENDER_COMMAND_POSITION.NESTING_LEVEL] === nestingLevel - 1) {
+                    parentCommand = cmd;
+                    break;
                 }
-                this._renderer.appendChild(parent, element);
             }
-            else {
-                const injector = Injector.create({
-                    providers: [
-                        {
-                            provide: RICH_TEXT_RENDERER_COMPONENT_DATA,
-                            useValue: command.data,
-                        },
-                    ],
-                    parent: this._injector,
-                });
-                const portal = new DomPortalOutlet(parent, this._componentFactoryResolver, this._appRef, injector, this._document);
-                const comp = new ComponentPortal(command.payload);
-                const ref = comp.attach(portal);
-                if (ref.instance instanceof ContentfulImageComponent) {
-                    ref.instance.sizes = this._config.imageOptions.sizes;
-                    ref.instance.srcsetSizes = this._config.imageOptions.srcsetSizes;
-                    ref.instance.backgroundColor = this._config.imageOptions.backgroundColor;
-                }
-                element = ref.location.nativeElement;
+            if (!parentCommand) {
+                throw new Error('Parent command not found!');
+            }
+            parentElement = this._executedCommandsCache.get(getRenderCommandId(parentCommand))?.element;
+        }
+        if (!parentElement) {
+            throw new Error('Parent element not found!');
+        }
+        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;
             }
         }
-        // loop over the commands
-        for (const childCommand of command.children) {
-            this._executeCommand({ command: childCommand, parent: element ?? parent });
+        return nextElement;
+    }
+    _renderInsertOrAppend(nodeToRender, parentElement, nextElement) {
+        if (nextElement) {
+            this._renderer.insertBefore(parentElement, nodeToRender, nextElement);
+        }
+        else {
+            this._renderer.appendChild(parentElement, nodeToRender);
+        }
+    }
+    _debugVisualizeRenderCommands(commands) {
+        const debug = commands.map((command) => this._stringifyRenderCommand(command)).flat();
+        const prettified = formatHTML(debug);
+        return prettified;
+    }
+    _stringifyRenderCommand(command) {
+        const nestAttr = `nest="${command[RENDER_COMMAND_POSITION.NESTING_LEVEL]}"`;
+        const domAttr = `dom="${command[RENDER_COMMAND_POSITION.DOM_POSITION]}"`;
+        if (isHtmlOpenRenderCommand(command)) {
+            return `<${command[HTML_OPEN_RENDER_COMMAND_POSITION.TAG_NAME]} ${nestAttr} ${domAttr}>`;
+        }
+        else if (isHtmlCloseRenderCommand(command)) {
+            return `</${command[HTML_CLOSE_RENDER_COMMAND_POSITION.TAG_NAME]} ${nestAttr} ${domAttr}>`;
+        }
+        else if (isTextRenderCommand(command)) {
+            return [`<span ${nestAttr} ${domAttr}>`, command[TEXT_RENDER_COMMAND_POSITION.TEXT], '</span>'];
+        }
+        else if (isComponentRenderCommand(command)) {
+            const selector = command[COMPONENT_RENDER_COMMAND_POSITION.COMPONENT_TYPE];
+            return [`<${selector} ${nestAttr} ${domAttr}>`, `</${selector}>`];
+        }
+        else {
+            return 'UNKNOWN';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { richText: "richText" }, host: { classAttribute: "et-contentful-rich-text-renderer" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    _stringifyRenderInstruction(instruction) {
+        const type = instruction[RENDER_INSTRUCTION_POSITION.TYPE];
+        const translatedType = Object.entries(RENDER_INSTRUCTION_TYPE).find(([, value]) => value === type)?.[0];
+        const command = this._stringifyRenderCommand(instruction[RENDER_INSTRUCTION_POSITION.COMMAND]);
+        return `${translatedType}: ${command}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.3", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, richTextPath: { classPropertyName: "richTextPath", publicName: "richTextPath", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-contentful-rich-text-renderer" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-rich-text-renderer',
@@ -650,73 +1063,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         class: 'et-contentful-rich-text-renderer',
                     },
                 }]
-        }], propDecorators: { richText: [{
-                type: Input
-            }] } });
-
-class ContentfulAudioComponent {
-    constructor() {
-        this._richTextData = inject(RICH_TEXT_RENDERER_COMPONENT_DATA, { optional: true });
-        this._data = null;
-        this.audioClass = null;
-        this.figureClass = null;
-        this.figcaptionClass = null;
-    }
-    get data() {
-        return this._data;
-    }
-    set data(v) {
-        if (v && !v.contentType) {
-            this._data = null;
-            console.warn('The provided asset is invalid', v);
-            return;
+        }], ctorParameters: () => [] });
+function formatHTML(html) {
+    const result = [];
+    let indent = 0;
+    for (const tag of html) {
+        if (tag.startsWith('</')) {
+            indent--;
         }
-        if (v && !v.contentType.startsWith('audio/')) {
-            throw new Error('The provided asset is not an audio');
+        result.push(' '.repeat(indent * 2) + tag);
+        if (tag.startsWith('<') && !tag.startsWith('</')) {
+            indent++;
         }
-        this._data = v ?? null;
     }
-    ngOnInit() {
-        if (this._richTextData && !this.data) {
-            this.data = this._richTextData;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { data: "data", audioClass: "audioClass", figureClass: "figureClass", figcaptionClass: "figcaptionClass" }, ngImport: i0, template: `
-    @if (data) {
-      <figure [ngClass]="figureClass">
-        <figcaption [ngClass]="figcaptionClass">{{ data.title }}</figcaption>
-        <audio [ngClass]="audioClass" controls src="{{ data.url }}"></audio>
-      </figure>
-    }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    return result.join('\n');
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'et-contentful-audio',
-                    template: `
-    @if (data) {
-      <figure [ngClass]="figureClass">
-        <figcaption [ngClass]="figcaptionClass">{{ data.title }}</figcaption>
-        <audio [ngClass]="audioClass" controls src="{{ data.url }}"></audio>
-      </figure>
-    }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: true,
-                    imports: [NgClass],
-                }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], audioClass: [{
-                type: Input
-            }], figureClass: [{
-                type: Input
-            }], figcaptionClass: [{
-                type: Input
-            }] } });
 
 const ContentfulImports = [
     ContentfulAudioComponent,
@@ -740,26 +1101,16 @@ const GQL_FRAGMENT_CONTENTFUL_ASSET = gql `
     size
   }
 `;
-const GQL_FRAGMENT_CONTENTFUL_IMAGE = gql `
-  fragment ImageData on Image {
-    sys {
-      id
-    }
-    asset {
-      ...AssetData
-    }
-    alt
-    caption
-    resizeBehavior
-    focusArea
-    quality
-    __typename
-  }
-`;
+
+const provideContentfulConfig = (contentfulConfig = {}) => {
+    return { provide: CONTENTFUL_CONFIG, useValue: createContentfulConfig(contentfulConfig) };
+};
+
+// Burst cache
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulRichTextRendererComponent, ContentfulVideoComponent, GQL_FRAGMENT_CONTENTFUL_ASSET, GQL_FRAGMENT_CONTENTFUL_IMAGE, RICH_TEXT_RENDERER_COMPONENT_DATA, createContentfulConfig, createContentfulMap, createContentfulRenderCommand, createContentfulResourceMap, createRenderCommandsFromContentfulRichText, generateContentfulImageSources, generateDefaultContentfulImageSource, getContentfulNodeProps, isContentfulAsset, isContentfulImage, parseContentfulImageSize, provideContentfulConfig, transformContentfulMarks, translateContentfulNodeTypeToHtmlTag };
+export { COMPONENT_RENDER_COMMAND_POSITION, CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulRichTextRendererComponent, ContentfulVideoComponent, 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, generateContentfulImageSources, generateDefaultContentfulImageSource, getRenderCommandId, isComponentRenderCommand, isExecutedComponentCommandCacheItem, isExecutedHtmlOrTextCommandCacheItem, isExecutedTextCommandCacheItem, isHtmlCloseRenderCommand, isHtmlOpenRenderCommand, isRichTextRootNode, isTextRenderCommand, marksToClass, parseContentfulImageSize, provideContentfulConfig, translateContentfulNodeTypeToHtmlTag };
 //# sourceMappingURL=ethlete-contentful.mjs.map