@ethlete/contentful 3.8.0 → 4.0.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @ethlete/contentful
 
+## 4.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`d8f381f`](https://github.com/ethlete-io/ethdk/commit/d8f381f39710db99c2f26af64dbf9e4df75c8a49), [`ca6cdfb`](https://github.com/ethlete-io/ethdk/commit/ca6cdfbaa99430a89244024a8810249bb99e3d91), [`99b3f64`](https://github.com/ethlete-io/ethdk/commit/99b3f646701cb763512e7148592457dc509f55e5), [`d8f381f`](https://github.com/ethlete-io/ethdk/commit/d8f381f39710db99c2f26af64dbf9e4df75c8a49), [`5503fbb`](https://github.com/ethlete-io/ethdk/commit/5503fbb21d948d4e2d59928afa4be9846eb2102d), [`e4a7c6f`](https://github.com/ethlete-io/ethdk/commit/e4a7c6ff868e6dd541d4533e509b30821f6c83b5), [`d8f381f`](https://github.com/ethlete-io/ethdk/commit/d8f381f39710db99c2f26af64dbf9e4df75c8a49), [`d080bb2`](https://github.com/ethlete-io/ethdk/commit/d080bb2cc246d4559ffcbf88c319b9437133d377), [`ca6cdfb`](https://github.com/ethlete-io/ethdk/commit/ca6cdfbaa99430a89244024a8810249bb99e3d91), [`3d7f302`](https://github.com/ethlete-io/ethdk/commit/3d7f30253502adada00825fda3653441c01071da), [`ca6cdfb`](https://github.com/ethlete-io/ethdk/commit/ca6cdfbaa99430a89244024a8810249bb99e3d91), [`58678e9`](https://github.com/ethlete-io/ethdk/commit/58678e9d57f7ff85e2a3159657bda15f06b8e5cd), [`f5ad487`](https://github.com/ethlete-io/ethdk/commit/f5ad4879061917e91bebf144889774226202308b), [`27aa7a8`](https://github.com/ethlete-io/ethdk/commit/27aa7a825573a12c3360530d1d32df7c4690e7e8), [`3d7f302`](https://github.com/ethlete-io/ethdk/commit/3d7f30253502adada00825fda3653441c01071da), [`d8f381f`](https://github.com/ethlete-io/ethdk/commit/d8f381f39710db99c2f26af64dbf9e4df75c8a49), [`3d7f302`](https://github.com/ethlete-io/ethdk/commit/3d7f30253502adada00825fda3653441c01071da), [`6816054`](https://github.com/ethlete-io/ethdk/commit/68160548e8df8cd8fbaff61afa684442f7f7a7e5), [`ca6cdfb`](https://github.com/ethlete-io/ethdk/commit/ca6cdfbaa99430a89244024a8810249bb99e3d91), [`f4847d4`](https://github.com/ethlete-io/ethdk/commit/f4847d4eb25b70706a4ee8c81addcd58a7d99995), [`451e170`](https://github.com/ethlete-io/ethdk/commit/451e170f2df1c49fca07bde053efa75bd23ca22f), [`3d7f302`](https://github.com/ethlete-io/ethdk/commit/3d7f30253502adada00825fda3653441c01071da), [`f5ad487`](https://github.com/ethlete-io/ethdk/commit/f5ad4879061917e91bebf144889774226202308b), [`55dc627`](https://github.com/ethlete-io/ethdk/commit/55dc627a6a49f3a8a5c8f80f63f163e443e07099), [`ca6cdfb`](https://github.com/ethlete-io/ethdk/commit/ca6cdfbaa99430a89244024a8810249bb99e3d91), [`5d7ae57`](https://github.com/ethlete-io/ethdk/commit/5d7ae57859077357e2e8a1761286c4744e58d4b9), [`ee5014f`](https://github.com/ethlete-io/ethdk/commit/ee5014f33dc7d79b43774aaafc2fd187073871be), [`da0ef0a`](https://github.com/ethlete-io/ethdk/commit/da0ef0a6425c1ac40c42fd13906af49860418a29), [`7e0f4d9`](https://github.com/ethlete-io/ethdk/commit/7e0f4d943abe6ae61719fcb7003cc8c19496320e), [`d080bb2`](https://github.com/ethlete-io/ethdk/commit/d080bb2cc246d4559ffcbf88c319b9437133d377), [`3d7f302`](https://github.com/ethlete-io/ethdk/commit/3d7f30253502adada00825fda3653441c01071da), [`5e764b9`](https://github.com/ethlete-io/ethdk/commit/5e764b92cbcc6b6ec288a84b397d291f0b1138fb), [`d8f381f`](https://github.com/ethlete-io/ethdk/commit/d8f381f39710db99c2f26af64dbf9e4df75c8a49), [`e4a7c6f`](https://github.com/ethlete-io/ethdk/commit/e4a7c6ff868e6dd541d4533e509b30821f6c83b5), [`d8f381f`](https://github.com/ethlete-io/ethdk/commit/d8f381f39710db99c2f26af64dbf9e4df75c8a49), [`d8f381f`](https://github.com/ethlete-io/ethdk/commit/d8f381f39710db99c2f26af64dbf9e4df75c8a49), [`ca6cdfb`](https://github.com/ethlete-io/ethdk/commit/ca6cdfbaa99430a89244024a8810249bb99e3d91), [`6816054`](https://github.com/ethlete-io/ethdk/commit/68160548e8df8cd8fbaff61afa684442f7f7a7e5), [`6e41e09`](https://github.com/ethlete-io/ethdk/commit/6e41e09668d2077fba27de1e11bacc98480becfe), [`8a85984`](https://github.com/ethlete-io/ethdk/commit/8a859841acaf7c10c876c7eb921f4c7e25e41764), [`5e764b9`](https://github.com/ethlete-io/ethdk/commit/5e764b92cbcc6b6ec288a84b397d291f0b1138fb), [`d080bb2`](https://github.com/ethlete-io/ethdk/commit/d080bb2cc246d4559ffcbf88c319b9437133d377), [`e4a7c6f`](https://github.com/ethlete-io/ethdk/commit/e4a7c6ff868e6dd541d4533e509b30821f6c83b5), [`5e764b9`](https://github.com/ethlete-io/ethdk/commit/5e764b92cbcc6b6ec288a84b397d291f0b1138fb)]:
+  - @ethlete/cdk@5.0.0-next.0
+  - @ethlete/core@5.0.0-next.0
+  - @ethlete/query@6.0.0-next.0
+
+## 3.9.0
+
+### Minor Changes
+
+- [`8816a31`](https://github.com/ethlete-io/ethdk/commit/8816a3184693002fcdc795c81e5f39771ec57c52) Thanks [@TomTomB](https://github.com/TomTomB)! - Add `et-contentful-rich-text-default-element` class to every native html element rendered by the rich text renderer
+
 ## 3.8.0
 
 ### Minor Changes
@@ -130,7 +145,6 @@
 ### Major Changes
 
 - [`ef63100`](https://github.com/ethlete-io/ethdk/commit/ef6310039b70c0321021a532b5818822518f47c6) Thanks [@TomTomB](https://github.com/TomTomB)! - The `rich-text-renderer` component was rebuild from scratch.
-
   - The `richText` input was renamed to `content` and is required.
   - The value of the `content` input should be a `ContentfulCollection` object. This can be directly fetched using the Contentful REST API. Do not use their GraphQL API for this purpose.
   - A `richTextPath` input was added to allow for the customization of the path to the `richText` field in the `ContentfulCollection` object. It is required and should point to the start of the rich text object inside the `ContentfulCollection` object. The start contains a `nodeType` property with the value `document`.

package/fesm2022/ethlete-contentful.mjs

@@ -1,11 +1,11 @@
 import { NgClass, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, computed, Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, inject, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, Renderer2, ElementRef } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, inject, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, ElementRef } from '@angular/core';
 import { gql } from '@ethlete/query';
 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 { RuntimeError, isObject, injectRenderer, getObjectProperty } from '@ethlete/core';
 import { startWith, pairwise, tap } from 'rxjs';
 
 const GQL_FRAGMENT_CONTENTFUL_ASSET = gql `
@@ -29,10 +29,10 @@ const isContentfulGqlAsset = (asset) => {
 
 class ContentfulAudioComponent {
     constructor() {
-        this.asset = input.required();
-        this.audioClass = input(null);
-        this.figureClass = input(null);
-        this.figcaptionClass = input(null);
+        this.asset = input.required(...(ngDevMode ? [{ debugName: "asset" }] : []));
+        this.audioClass = input(null, ...(ngDevMode ? [{ debugName: "audioClass" }] : []));
+        this.figureClass = input(null, ...(ngDevMode ? [{ debugName: "figureClass" }] : []));
+        this.figcaptionClass = input(null, ...(ngDevMode ? [{ debugName: "figcaptionClass" }] : []));
         this.data = computed(() => {
             const asset = this.asset();
             if (!asset) {
@@ -48,10 +48,10 @@ class ContentfulAudioComponent {
                 url: asset.fields.file.url,
                 title: asset.fields.title,
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "data" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, audioClass: { classPropertyName: "audioClass", publicName: "audioClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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: `
     @if (data(); as data) {
       <figure [ngClass]="figureClass()">
         <figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
@@ -60,7 +60,7 @@ class ContentfulAudioComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-audio',
@@ -76,12 +76,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgClass],
                 }]
-        }] });
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], audioClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "audioClass", required: false }] }], figureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figureClass", required: false }] }], figcaptionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figcaptionClass", required: false }] }] } });
 
 class ContentfulFileComponent {
     constructor() {
-        this.asset = input.required();
-        this.fileClass = input(null);
+        this.asset = input.required(...(ngDevMode ? [{ debugName: "asset" }] : []));
+        this.fileClass = input(null, ...(ngDevMode ? [{ debugName: "fileClass" }] : []));
         this.data = computed(() => {
             const asset = this.asset();
             if (!asset) {
@@ -101,10 +101,10 @@ class ContentfulFileComponent {
                 size: asset.fields.file.details.size,
                 title: asset.fields.title,
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "data" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, fileClass: { classPropertyName: "fileClass", publicName: "fileClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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: `
     @if (data(); as data) {
       <a [href]="data.url" [ngClass]="fileClass()" class="underline" target="_blank">
         {{ data.title }} ({{ data.size }} Bytes)
@@ -112,7 +112,7 @@ class ContentfulFileComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulFileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-file',
@@ -127,7 +127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgClass],
                 }]
-        }] });
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], fileClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileClass", required: false }] }] } });
 
 const CONTENTFUL_CONFIG = new InjectionToken('ContentfulConfig');
 
@@ -233,20 +233,18 @@ const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, qual
 class ContentfulImageComponent {
     constructor() {
         this._contentfulConfig = inject(CONTENTFUL_CONFIG);
-        this.asset = input.required();
-        this.backgroundColor = input(null);
-        this.srcsetSizes = input(this._contentfulConfig.imageOptions.srcsetSizes);
-        this.quality = input(null, { transform: numberAttribute });
-        this.focusArea = input(null);
-        this.resizeBehavior = input(null);
-        this.hasPriority = input(false, { transform: booleanAttribute });
-        this.imgClass = input(null);
-        this.figureClass = input(null);
-        this.figcaptionClass = input(null);
-        this.pictureClass = input(null);
-        this.sizes = input(normalizePictureSizes(this._contentfulConfig.imageOptions.sizes), {
-            transform: (v) => normalizePictureSizes(v),
-        });
+        this.asset = input.required(...(ngDevMode ? [{ debugName: "asset" }] : []));
+        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.normalizedAsset = computed(() => {
             const asset = this.asset();
             if (isContentfulGqlAsset(asset)) {
@@ -265,7 +263,7 @@ class ContentfulImageComponent {
                     height: asset?.fields?.file?.details?.image?.height ?? null,
                 };
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "normalizedAsset" }] : []));
         this._sources = computed(() => {
             const asset = this.asset();
             const backgroundColor = this.backgroundColor();
@@ -277,14 +275,14 @@ class ContentfulImageComponent {
                 return [];
             }
             return generateContentfulImageSources(asset, srcsetSizes, backgroundColor, quality, focusArea, resizeBehavior);
-        });
+        }, ...(ngDevMode ? [{ debugName: "_sources" }] : []));
         this._defaultSrc = computed(() => {
             const asset = this.asset();
             return asset ? generateDefaultContentfulImageSource(asset) : null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "_defaultSrc" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, srcsetSizes: { classPropertyName: "srcsetSizes", publicName: "srcsetSizes", isSignal: true, isRequired: false, transformFunction: null }, quality: { classPropertyName: "quality", publicName: "quality", isSignal: true, isRequired: false, transformFunction: null }, focusArea: { classPropertyName: "focusArea", publicName: "focusArea", isSignal: true, isRequired: false, transformFunction: null }, resizeBehavior: { classPropertyName: "resizeBehavior", publicName: "resizeBehavior", isSignal: true, isRequired: false, transformFunction: null }, hasPriority: { classPropertyName: "hasPriority", publicName: "hasPriority", isSignal: true, isRequired: false, transformFunction: null }, imgClass: { classPropertyName: "imgClass", publicName: "imgClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null }, pictureClass: { classPropertyName: "pictureClass", publicName: "pictureClass", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-image" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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: `
     <et-picture
       [imgClass]="imgClass()"
       [hasPriority]="hasPriority()"
@@ -301,7 +299,7 @@ class ContentfulImageComponent {
     />
   `, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources", "hasPriority", "imgClass", "figureClass", "figcaptionClass", "pictureClass", "defaultSrc", "alt", "figcaption", "width", "height", "sizes"], outputs: ["imgLoaded", "imgError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulImageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-image',
@@ -328,12 +326,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         class: 'et-contentful-image',
                     },
                 }]
-        }] });
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], srcsetSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcsetSizes", required: false }] }], quality: [{ type: i0.Input, args: [{ isSignal: true, alias: "quality", required: false }] }], focusArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusArea", required: false }] }], resizeBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeBehavior", required: false }] }], hasPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPriority", required: false }] }], imgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgClass", required: false }] }], figureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figureClass", required: false }] }], figcaptionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figcaptionClass", required: false }] }], pictureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "pictureClass", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }] } });
 
 class ContentfulVideoComponent {
     constructor() {
-        this.asset = input.required();
-        this.videoClass = input(null);
+        this.asset = input.required(...(ngDevMode ? [{ debugName: "asset" }] : []));
+        this.videoClass = input(null, ...(ngDevMode ? [{ debugName: "videoClass" }] : []));
         this.data = computed(() => {
             const asset = this.asset();
             if (!asset) {
@@ -349,10 +347,10 @@ class ContentfulVideoComponent {
                 url: asset.fields.file.url,
                 contentType: asset.fields.file.contentType,
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "data" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, videoClass: { classPropertyName: "videoClass", publicName: "videoClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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 }}" />
@@ -360,7 +358,7 @@ class ContentfulVideoComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-video',
@@ -375,7 +373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     imports: [NgClass],
                 }]
-        }] });
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], videoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoClass", required: false }] }] } });
 
 const createContentfulConfig = (config = {}) => ({
     // This default config must be inline and not saved inside a const for some weird webpack reason
@@ -466,7 +464,7 @@ const translateContentfulNodeTypeToHtmlTag = (nodeType) => {
             return 'span';
         // Will be ignored by the renderer
         case 'document':
-            return 'document';
+            return 'div';
         case BLOCKS.EMBEDDED_ENTRY:
             return 'div';
         case INLINES.EMBEDDED_ENTRY:
@@ -633,7 +631,7 @@ const createContentfulIncludeMap = (config) => {
 class ContentfulRichTextRendererComponent {
     constructor() {
         this._viewContainerRef = inject(ViewContainerRef);
-        this._renderer = inject(Renderer2);
+        this._renderer = injectRenderer();
         this._elementRef = inject(ElementRef);
         this._document = inject(DOCUMENT);
         this._config = inject(CONTENTFUL_CONFIG, { optional: true }) ?? createContentfulConfig();
@@ -647,12 +645,12 @@ class ContentfulRichTextRendererComponent {
          * The contentful response gotten via their REST api.
          * @see https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/entries/entries-collection
          */
-        this.content = input.required();
+        this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
         /**
          * The path to where the rich text field is inside the contentful response. Dot and array notation is allowed.
          * @example "items[0].fields.html"
          */
-        this.richTextPath = input.required();
+        this.richTextPath = input.required(...(ngDevMode ? [{ debugName: "richTextPath" }] : []));
         /**
          * A map of all includes in the contentful response.
          * This is useful for looking up assets and entries that are referenced in the rich text without having to use loops.
@@ -662,7 +660,7 @@ class ContentfulRichTextRendererComponent {
             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.
          */
@@ -680,14 +678,14 @@ class ContentfulRichTextRendererComponent {
                 throw richTextRendererError('rich_text_wrong_type', false, { content, richTextPath });
             }
             return richText;
-        });
+        }, ...(ngDevMode ? [{ debugName: "richTextData" }] : []));
         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();
@@ -696,7 +694,7 @@ class ContentfulRichTextRendererComponent {
                 map.set(getRenderCommandId(command), command);
             }
             return map;
-        });
+        }, ...(ngDevMode ? [{ debugName: "previousRenderCommandMap" }] : []));
         this.renderInstructions = computed(() => {
             const commands = this.renderCommands();
             const previousRenderCommandMap = new Map(this.previousRenderCommandMap());
@@ -762,7 +760,7 @@ class ContentfulRichTextRendererComponent {
                 }
             }
             return instructions;
-        });
+        }, ...(ngDevMode ? [{ debugName: "renderInstructions" }] : []));
         toObservable(this.renderInstructions)
             .pipe(takeUntilDestroyed(), tap((instructions) => {
             this._execInstructions(instructions);
@@ -792,7 +790,9 @@ class ContentfulRichTextRendererComponent {
                     const text = node.value;
                     if (!text)
                         break;
-                    const attributes = {};
+                    const attributes = {
+                        class: 'et-contentful-rich-text-default-element et-contentful-rich-text-default-span',
+                    };
                     if (node.marks.length) {
                         const markClasses = marksToClass(node.marks);
                         if (CLASS_ATTR in attributes) {
@@ -916,7 +916,9 @@ class ContentfulRichTextRendererComponent {
                 default: {
                     const type = RENDER_COMMAND_TYPE.HTML_OPEN;
                     const tag = translateContentfulNodeTypeToHtmlTag(node.nodeType);
-                    const attributes = {};
+                    const attributes = {
+                        class: `et-contentful-rich-text-default-element et-contentful-rich-text-default-${tag}`,
+                    };
                     const id = 'e-o' + elementOpenId++;
                     const command = [type, nestingLevel, domPosition, commandIndex++, attributes, tag, id];
                     rootCommands.push(command);
@@ -1084,7 +1086,9 @@ class ContentfulRichTextRendererComponent {
             }
             const rootNode = cached.element;
             const oldParentElement = cached.element.parentElement;
-            this._renderer.removeChild(oldParentElement, rootNode);
+            if (oldParentElement) {
+                this._renderer.removeChild(oldParentElement, rootNode);
+            }
             const newParentElement = this._findParent(command);
             const nextElement = this._findFollowingElement(command);
             this._renderInsertOrAppend(rootNode, newParentElement, nextElement);
@@ -1111,10 +1115,14 @@ class ContentfulRichTextRendererComponent {
             cached.componentRef?.destroy();
         }
         else if (isTextRenderCommand(command)) {
-            this._renderer.removeChild(cached.element?.parentElement, cached.element);
+            if (cached.element?.parentElement) {
+                this._renderer.removeChild(cached.element.parentElement, cached.element);
+            }
         }
         else if (isHtmlOpenRenderCommand(command)) {
-            this._renderer.removeChild(cached.element?.parentElement, cached.element);
+            if (cached.element?.parentElement) {
+                this._renderer.removeChild(cached.element.parentElement, cached.element);
+            }
         }
         this._executedCommandsCache.delete(id);
     }
@@ -1131,7 +1139,7 @@ class ContentfulRichTextRendererComponent {
     _findParent(command) {
         const hostElement = this._elementRef.nativeElement;
         const nestingLevel = command[RENDER_COMMAND_POSITION.NESTING_LEVEL];
-        let parentElement = undefined;
+        let parentElement;
         if (nestingLevel === 0) {
             parentElement = hostElement;
         }
@@ -1190,22 +1198,21 @@ class ContentfulRichTextRendererComponent {
             this._renderer.appendChild(parentElement, nodeToRender);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, richTextPath: { classPropertyName: "richTextPath", publicName: "richTextPath", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-contentful-rich-text-renderer" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-contentful-rich-text-renderer',
                     template: ``,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
                     host: {
                         class: 'et-contentful-rich-text-renderer',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], richTextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "richTextPath", required: true }] }] } });
 
 const ContentfulImports = [
     ContentfulAudioComponent,