@ethlete/contentful 4.0.0-next.12 → 4.0.0-next.14

package/fesm2022/ethlete-contentful.mjs

@@ -1,8 +1,8 @@
-import { NgClass, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, Component, InjectionToken, inject, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, ElementRef, effect, untracked, signal, reflectComponentType, inputBinding } from '@angular/core';
+import { input, computed, ViewEncapsulation, Component, InjectionToken, inject, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, ElementRef, Injector, effect, untracked, signal, reflectComponentType, inputBinding } from '@angular/core';
 import { formatFileSize, normalizePictureSizes, PictureComponent } from '@ethlete/components';
-import { defineLabels, toProvideFn, toInjectFn, toToken, injectUrl, RuntimeError, isObject, injectRenderer, getObjectProperty } from '@ethlete/core';
+import { defineLabels, toProvideFn, toInjectFn, toToken, injectUrl, RuntimeError, isObject, getObjectProperty, injectRenderer } from '@ethlete/core';
+import { DOCUMENT, Location } from '@angular/common';
 import { Router, RouterLink } from '@angular/router';
 
 const GQL_FRAGMENT_CONTENTFUL_ASSET = `
@@ -29,12 +29,6 @@ class ContentfulAudioComponent {
     constructor() {
         this.asset = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
-        this.audioClass = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "audioClass" }] : /* istanbul ignore next */ []));
-        this.figureClass = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "figureClass" }] : /* istanbul ignore next */ []));
-        this.figcaptionClass = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "figcaptionClass" }] : /* istanbul ignore next */ []));
         this.data = computed(() => {
             const asset = this.asset();
             if (!asset) {
@@ -57,14 +51,16 @@ class ContentfulAudioComponent {
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, audioClass: { classPropertyName: "audioClass", publicName: "audioClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-audio" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-contentful-audio" }, ngImport: i0, template: `
     @if (data(); as data) {
-      <figure [ngClass]="figureClass()">
-        <figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
-        <audio [ngClass]="audioClass()" [src]="data.url" controls></audio>
+      <figure class="et-contentful-audio-figure">
+        @if (data.title) {
+          <figcaption class="et-contentful-audio-figcaption">{{ data.title }}</figcaption>
+        }
+        <audio [src]="data.url" class="et-contentful-audio-audio" controls></audio>
       </figure>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
             type: Component,
@@ -72,19 +68,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     selector: 'et-contentful-audio',
                     template: `
     @if (data(); as data) {
-      <figure [ngClass]="figureClass()">
-        <figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
-        <audio [ngClass]="audioClass()" [src]="data.url" controls></audio>
+      <figure class="et-contentful-audio-figure">
+        @if (data.title) {
+          <figcaption class="et-contentful-audio-figcaption">{{ data.title }}</figcaption>
+        }
+        <audio [src]="data.url" class="et-contentful-audio-audio" controls></audio>
       </figure>
     }
   `,
                     encapsulation: ViewEncapsulation.None,
-                    imports: [NgClass],
                     host: {
                         class: 'et-contentful-audio',
                     },
                 }]
-        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], audioClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "audioClass", required: false }] }], figureClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figureClass", required: false }] }], figcaptionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "figcaptionClass", required: false }] }] } });
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }] } });
 
 /** The built-in English labels. */
 const DEFAULT_CONTENTFUL_FILE_LABELS = {
@@ -107,8 +104,6 @@ class ContentfulFileComponent {
         this.labels = injectContentfulFileLabels();
         this.asset = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
-        this.fileClass = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fileClass" }] : /* istanbul ignore next */ []));
         this.data = computed(() => {
             const asset = this.asset();
             if (!asset) {
@@ -133,16 +128,16 @@ class ContentfulFileComponent {
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, fileClass: { classPropertyName: "fileClass", publicName: "fileClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-file" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-contentful-file" }, ngImport: i0, template: `
     @if (data(); as data) {
-      <a [href]="data.url" [ngClass]="fileClass()" target="_blank" rel="noopener noreferrer">
+      <a [href]="data.url" class="et-contentful-file-anchor" target="_blank" rel="noopener noreferrer">
         {{ data.title }}
         @if (data.size !== null) {
           {{ labels().fileSize(data.size) }}
         }
       </a>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulFileComponent, decorators: [{
             type: Component,
@@ -150,7 +145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     selector: 'et-contentful-file',
                     template: `
     @if (data(); as data) {
-      <a [href]="data.url" [ngClass]="fileClass()" target="_blank" rel="noopener noreferrer">
+      <a [href]="data.url" class="et-contentful-file-anchor" target="_blank" rel="noopener noreferrer">
         {{ data.title }}
         @if (data.size !== null) {
           {{ labels().fileSize(data.size) }}
@@ -159,12 +154,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
     }
   `,
                     encapsulation: ViewEncapsulation.None,
-                    imports: [NgClass],
                     host: {
                         class: 'et-contentful-file',
                     },
                 }]
-        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], fileClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileClass", required: false }] }] } });
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }] } });
 
 const CONTENTFUL_CONFIG = new InjectionToken('ContentfulConfig');
 
@@ -175,6 +169,7 @@ const CONTENTFUL_CONFIG = new InjectionToken('ContentfulConfig');
  */
 const CONTENTFUL_FALLBACK_CONFIG = {
     internalHosts: [],
+    entryHref: null,
     components: {},
     customComponents: {},
     imageOptions: {
@@ -183,13 +178,16 @@ const CONTENTFUL_FALLBACK_CONFIG = {
         backgroundColor: null,
     },
 };
+const withoutUndefined = (value) => Object.fromEntries(Object.entries(value ?? {}).filter(([, entry]) => entry !== undefined));
 const createContentfulConfig = (options) => {
     const config = options ?? {};
     return {
         ...CONTENTFUL_FALLBACK_CONFIG,
         ...config,
         components: config.components ?? CONTENTFUL_FALLBACK_CONFIG.components,
-        imageOptions: { ...CONTENTFUL_FALLBACK_CONFIG.imageOptions, ...config.imageOptions },
+        customComponents: config.customComponents ?? CONTENTFUL_FALLBACK_CONFIG.customComponents,
+        internalHosts: config.internalHosts ?? CONTENTFUL_FALLBACK_CONFIG.internalHosts,
+        imageOptions: { ...CONTENTFUL_FALLBACK_CONFIG.imageOptions, ...withoutUndefined(config.imageOptions) },
     };
 };
 /**
@@ -199,29 +197,8 @@ const createContentfulConfig = (options) => {
 const injectContentfulConfig = () => inject(CONTENTFUL_CONFIG, { optional: true }) ?? CONTENTFUL_FALLBACK_CONFIG;
 
 const generateDefaultContentfulImageSource = (data) => {
-    if (isContentfulGqlAsset(data)) {
-        if (!data.contentType || !data.url) {
-            return {
-                type: '',
-                srcset: '',
-            };
-        }
-        return {
-            type: data.contentType,
-            srcset: data.url,
-        };
-    }
-    const file = data.fields.file;
-    if (!file?.contentType || !file.url) {
-        return {
-            type: '',
-            srcset: '',
-        };
-    }
-    return {
-        type: file.contentType,
-        srcset: file.url,
-    };
+    const { url, contentType } = isContentfulGqlAsset(data) ? data : (data.fields.file ?? {});
+    return url ? { type: contentType ?? '', srcset: url } : { type: '', srcset: '' };
 };
 /**
  * Parses source set sizes into an object containing with and height. Eg.
@@ -267,7 +244,7 @@ const generateContentfulImageSources = (data, options = {}) => {
         const queryParams = [];
         queryParams.push(`fm=${type.split('/')[1]}`);
         if (backgroundColor) {
-            queryParams.push(`bg=rgb:${backgroundColor}`);
+            queryParams.push(`bg=rgb:${backgroundColor.replace(/^#/, '')}`);
         }
         if (quality !== null && Number.isFinite(quality)) {
             queryParams.push(`q=${quality}`);
@@ -292,6 +269,11 @@ const generateContentfulImageSources = (data, options = {}) => {
                     const derivedWidth = Math.round((height * imageDimensions.width) / imageDimensions.height);
                     sourceSets.push(`${urlWithParams}&w=${derivedWidth}&h=${height} ${derivedWidth}w`);
                 }
+                else if (ngDevMode && type === SOURCE_TYPES[0]) {
+                    console.warn(height
+                        ? `Contentful image: srcsetSizes entry "${size}" is dropped. A height-only size needs the asset's width and height to derive a width descriptor.`
+                        : `Contentful image: srcsetSizes entry "${size}" is not a valid size and is dropped. Use "400", "400w", "400h" or "400x300"; viewport sizes like "50vw" belong in sizes.`);
+                }
             }
         }
         sources.push({
@@ -377,7 +359,7 @@ class ContentfulImageComponent {
       [sizes]="sizes()"
       [sources]="sourcesValue()"
     />
-  `, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources", "defaultSrc", "alt", "figcaption", "priority", "width", "height", "aspectRatio", "sizes", "fit"], outputs: ["imgLoad", "imgError"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources", "defaultSrc", "alt", "figcaption", "priority", "width", "height", "aspectRatio", "sizes", "fit"], outputs: ["imageLoad", "imageError"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulImageComponent, decorators: [{
             type: Component,
@@ -414,29 +396,46 @@ const parseWebUrl = (href) => {
         return null;
     }
 };
-const normalizeHostname = (host) => {
+const parseConfiguredHost = (host) => {
     const value = host.trim().toLowerCase();
+    const wildcard = value.startsWith('*.');
+    const bare = wildcard ? value.slice(2) : value;
     try {
-        return new URL(value.includes('://') ? value : 'https://' + value).hostname;
+        const url = new URL(bare.includes('://') ? bare : 'https://' + bare);
+        return { hostname: url.hostname, port: url.port, wildcard };
     }
     catch {
-        return value.split(':')[0] ?? value;
+        return { hostname: bare.split(':')[0] ?? bare, port: '', wildcard };
     }
 };
-const matchesHostname = (hostname, configuredHost) => {
-    const normalizedHost = normalizeHostname(configuredHost);
-    return hostname === normalizedHost || hostname.endsWith('.' + normalizedHost);
+const matchesConfiguredHost = (url, configuredHost) => {
+    const { hostname, port, wildcard } = parseConfiguredHost(configuredHost);
+    if (!hostname || (port && url.port !== port))
+        return false;
+    return wildcard ? url.hostname.endsWith('.' + hostname) : url.hostname === hostname;
 };
 const isInternalWebUrl = (url, { location, internalHosts }) => (url.hostname === location.hostname && url.port === location.port) ||
-    internalHosts.some((host) => matchesHostname(url.hostname, host));
+    internalHosts.some((host) => matchesConfiguredHost(url, host));
 const isExternalWebHref = (href, context) => {
     const url = parseWebUrl(href);
     return url !== null && !isInternalWebUrl(url, context);
 };
+const internalWebHrefPath = (href, context) => {
+    const url = parseWebUrl(href);
+    return url && isInternalWebUrl(url, context) ? url.pathname + url.search + url.hash : null;
+};
+const hasUrlScheme = (href) => /^[a-z][a-z\d+.-]*:/i.test(href);
+const isRouteRelativeHref = (href) => !hasUrlScheme(href) && !href.startsWith('/');
+const resolveHrefAgainstRoute = (href, routerUrl) => {
+    const resolved = new URL(href, 'https://contentful.invalid' + routerUrl);
+    return resolved.pathname + resolved.search + resolved.hash;
+};
 
+const RICH_TEXT_ANCHOR_CLASSES = ['et-contentful-rich-text-default-element', 'et-contentful-rich-text-default-a'];
 class ContentfulLinkComponent {
     constructor() {
         this.document = inject(DOCUMENT);
+        this.location = inject(Location);
         this.router = inject(Router);
         this.config = injectContentfulConfig();
         this.url = injectUrl();
@@ -444,10 +443,10 @@ class ContentfulLinkComponent {
         ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
         this.text = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-        this.textClass = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
-        this.anchorClass = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "anchorClass" }] : /* istanbul ignore next */ []));
+        this.marks = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "marks" }] : /* istanbul ignore next */ []));
+        this.richText = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "richText" }] : /* istanbul ignore next */ []));
         this.usesRouterLink = computed(() => {
             const href = this.href();
             const absoluteUrl = parseWebUrl(href);
@@ -457,9 +456,14 @@ class ContentfulLinkComponent {
                     internalHosts: this.config.internalHosts,
                 });
             }
-            return !href.startsWith('#') && !/^[a-z][a-z\d+.-]*:/i.test(href);
+            return !href.startsWith('#') && !hasUrlScheme(href);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "usesRouterLink" }] : /* istanbul ignore next */ []));
+        this.anchorHref = computed(() => {
+            const href = this.href();
+            return href.startsWith('#') ? this.location.prepareExternalUrl(resolveHrefAgainstRoute(href, this.url())) : href;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anchorHref" }] : /* istanbul ignore next */ []));
         this.openInNewTab = computed(() => Boolean(parseWebUrl(this.href())) && !this.usesRouterLink(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "openInNewTab" }] : /* istanbul ignore next */ []));
         this.internalPath = computed(() => {
@@ -471,25 +475,28 @@ class ContentfulLinkComponent {
             if (href.startsWith('/')) {
                 return href;
             }
-            const resolved = new URL(href, 'https://contentful.invalid' + this.url());
-            return resolved.pathname + resolved.search + resolved.hash;
+            return resolveHrefAgainstRoute(href, this.url());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "internalPath" }] : /* istanbul ignore next */ []));
         this.internalUrlTree = computed(() => this.router.parseUrl(this.internalPath()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "internalUrlTree" }] : /* istanbul ignore next */ []));
-        this.linkClass = computed(() => [this.anchorClass(), this.textClass()].filter(Boolean).join(' ') || null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "linkClass" }] : /* istanbul ignore next */ []));
+        this.modifierClasses = computed(() => [
+            ...(this.richText() ? RICH_TEXT_ANCHOR_CLASSES : []),
+            ...this.marks().map((mark) => `et-contentful-rich-text-mark-${mark}`),
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modifierClasses" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ContentfulLinkComponent, isStandalone: true, selector: "et-contentful-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, textClass: { classPropertyName: "textClass", publicName: "textClass", isSignal: true, isRequired: false, transformFunction: null }, anchorClass: { classPropertyName: "anchorClass", publicName: "anchorClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-link" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ContentfulLinkComponent, isStandalone: true, selector: "et-contentful-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, marks: { classPropertyName: "marks", publicName: "marks", isSignal: true, isRequired: false, transformFunction: null }, richText: { classPropertyName: "richText", publicName: "richText", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-link" }, ngImport: i0, template: `
     @if (usesRouterLink()) {
-      <a [class]="linkClass()" [routerLink]="internalUrlTree()">{{ text() }}</a>
+      <a [class]="modifierClasses()" [routerLink]="internalUrlTree()" class="et-contentful-link-anchor">{{ text() }}</a>
     } @else {
       <a
-        [class]="linkClass()"
-        [href]="href()"
-        [target]="openInNewTab() ? '_blank' : null"
-        [rel]="openInNewTab() ? 'noopener noreferrer' : null"
+        [class]="modifierClasses()"
+        [href]="anchorHref()"
+        [attr.target]="openInNewTab() ? '_blank' : null"
+        [attr.rel]="openInNewTab() ? 'noopener noreferrer' : null"
+        class="et-contentful-link-anchor"
         >{{ text() }}</a
       >
     }
@@ -499,20 +506,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             type: Component,
             args: [{ selector: 'et-contentful-link', template: `
     @if (usesRouterLink()) {
-      <a [class]="linkClass()" [routerLink]="internalUrlTree()">{{ text() }}</a>
+      <a [class]="modifierClasses()" [routerLink]="internalUrlTree()" class="et-contentful-link-anchor">{{ text() }}</a>
     } @else {
       <a
-        [class]="linkClass()"
-        [href]="href()"
-        [target]="openInNewTab() ? '_blank' : null"
-        [rel]="openInNewTab() ? 'noopener noreferrer' : null"
+        [class]="modifierClasses()"
+        [href]="anchorHref()"
+        [attr.target]="openInNewTab() ? '_blank' : null"
+        [attr.rel]="openInNewTab() ? 'noopener noreferrer' : null"
+        class="et-contentful-link-anchor"
         >{{ text() }}</a
       >
     }
   `, encapsulation: ViewEncapsulation.None, imports: [RouterLink], host: {
                         class: 'et-contentful-link',
                     }, styles: ["@layer components{.et-contentful-link{display:contents}}\n"] }]
-        }], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], textClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "textClass", required: false }] }], anchorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorClass", required: false }] }] } });
+        }], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], marks: [{ type: i0.Input, args: [{ isSignal: true, alias: "marks", required: false }] }], richText: [{ type: i0.Input, args: [{ isSignal: true, alias: "richText", required: false }] }] } });
 
 /**
  * The `BLOCKS` node type strings of `@contentful/rich-text-types`, as a plain literal map.
@@ -558,8 +566,9 @@ const CF_INLINES = {
 };
 
 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_not_object: (data) => `The value at richTextPath is a ${data.type}, not a rich-text document object. Point richTextPath at the rich-text field itself (e.g. items[0].fields.body).`,
     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".',
+    rich_text_conflicting_inputs: 'Set exactly one rich-text source: a GraphQL rich-text field through gqlRichText, a REST response through content and richTextPath, or a bare document through richText (with includes).',
     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.',
     text_parent_not_found: 'The parent node is not found. This structure is not supported.',
@@ -567,8 +576,9 @@ const RICH_TEXT_RENDERER_ERRORS = {
     cached_command_not_component: 'The rendered node for a component command is not a component. The renderer state is out of sync.',
 };
 const RICH_TEXT_RENDERER_ERROR_CODES = {
-    rich_text_undefined: 0,
+    rich_text_not_object: 0,
     rich_text_wrong_type: 1,
+    rich_text_conflicting_inputs: 11,
     asset_id_not_found: 2,
     entry_id_not_found: 3,
     text_parent_not_found: 7,
@@ -576,10 +586,80 @@ const RICH_TEXT_RENDERER_ERROR_CODES = {
     cached_command_not_component: 10,
 };
 const richTextRendererError = (code, data) => {
-    const message = `<et-contentful-rich-text-renderer>: ${RICH_TEXT_RENDERER_ERRORS[code]}`;
+    const entry = RICH_TEXT_RENDERER_ERRORS[code];
+    const message = `<et-contentful-rich-text-renderer>: ${typeof entry === 'function' ? entry(data) : entry}`;
     throw new RuntimeError(RICH_TEXT_RENDERER_ERROR_CODES[code], message, data);
 };
 
+const lowerCaseFirst = (value) => value.charAt(0).toLowerCase() + value.slice(1);
+const toGqlTypeName = (contentTypeId) => {
+    const pascal = contentTypeId.replace(/[^a-z0-9]+(.)?/gi, (_, next) => next?.toUpperCase() ?? '');
+    return pascal.charAt(0).toUpperCase() + pascal.slice(1);
+};
+const toContentTypeId = (typename, contentTypeIds) => contentTypeIds.find((id) => toGqlTypeName(id) === typename) ?? lowerCaseFirst(typename);
+const toRestAsset = (asset) => ({
+    sys: { type: 'Asset', id: asset.sys.id, createdAt: '', updatedAt: '', locale: '' },
+    fields: {
+        title: asset.title ?? '',
+        description: asset.description ?? '',
+        file: {
+            url: asset.url,
+            details: {
+                size: asset.size,
+                ...(asset.width !== null && asset.height !== null
+                    ? { image: { width: asset.width, height: asset.height } }
+                    : {}),
+            },
+            fileName: asset.fileName ?? null,
+            contentType: asset.contentType,
+        },
+    },
+    metadata: { tags: [] },
+});
+const toRestEntry = (entry, contentTypeIds) => {
+    const { __typename, sys, ...fields } = entry;
+    if (!__typename) {
+        return null;
+    }
+    return {
+        sys: {
+            type: 'Entry',
+            id: sys.id,
+            createdAt: '',
+            updatedAt: '',
+            locale: '',
+            contentType: { sys: { type: 'Link', linkType: 'ContentType', id: toContentTypeId(__typename, contentTypeIds) } },
+        },
+        fields,
+        metadata: { tags: [] },
+    };
+};
+const present = (items) => (items ?? []).filter((item) => item !== null && item !== undefined);
+/**
+ * Maps the `links` of a GraphQL rich-text field to the entries and assets the renderer resolves
+ * embeds against. An entry's content type id is the id in `contentTypeIds` whose GraphQL type name
+ * (PascalCase, separators dropped: `product-teaser` → `ProductTeaser`) equals its `__typename`, else the
+ * `__typename` with the first letter lower-cased. Entries without a `__typename` are dropped.
+ */
+const mapContentfulGqlLinks = (links, contentTypeIds = []) => {
+    const assets = new Map();
+    const entries = new Map();
+    for (const asset of [...present(links?.assets?.block), ...present(links?.assets?.hyperlink)]) {
+        assets.set(asset.sys.id, toRestAsset(asset));
+    }
+    for (const gqlEntry of [
+        ...present(links?.entries?.block),
+        ...present(links?.entries?.inline),
+        ...present(links?.entries?.hyperlink),
+    ]) {
+        const entry = toRestEntry(gqlEntry, contentTypeIds);
+        if (entry) {
+            entries.set(entry.sys.id, entry);
+        }
+    }
+    return { assets: [...assets.values()], entries: [...entries.values()] };
+};
+
 const isRichTextRootNode = (node) => {
     return isObject(node) && 'nodeType' in node && node['nodeType'] === 'document';
 };
@@ -669,6 +749,12 @@ const isExecutedComponentCommandCacheItem = (cache) => {
     return cache.command.kind === 'component';
 };
 const ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID = '$$$_et-contentful-any-entry-content-type-sys-id';
+const includeMapLookups = /* @__PURE__ */ new WeakMap();
+const lookupOf = (includes) => includeMapLookups.get(includes) ?? {
+    entry: (id) => includes.getEntry(id, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID),
+    asset: (id) => includes.getAsset(id),
+};
+const ANCESTOR_ENTRY_IDS = /* @__PURE__ */ new InjectionToken('ContentfulRichTextAncestorEntryIds');
 /**
  * Create a contentful include map using the provided entries and assets.
  */
@@ -681,7 +767,7 @@ const createContentfulIncludeMap = (config) => {
         const entry = entryMap.get(id);
         if (!entry) {
             if (isDevMode()) {
-                console.warn('Entry not found! Will return null. Is the include query param too low?', { id, entryMap });
+                console.warn('Entry not found! Will return null. Is it unpublished or deleted, or is the include query param too low?', { id });
             }
             return null;
         }
@@ -713,12 +799,29 @@ const createContentfulIncludeMap = (config) => {
     const getAssets = (ids) => {
         return ids.map((id) => getAsset(id)).filter((asset) => asset !== null);
     };
-    return {
-        getEntry,
-        getEntries,
-        getAsset,
-        getAssets,
-    };
+    const includeMap = { getEntry, getEntries, getAsset, getAssets };
+    includeMapLookups.set(includeMap, {
+        entry: (id) => entryMap.get(id) ?? null,
+        asset: (id) => assetMap.get(id) ?? null,
+    });
+    return includeMap;
+};
+const warnedRichTextPaths = /* @__PURE__ */ new Set();
+const warnOnUnresolvedParentPath = (content, richTextPath) => {
+    const segments = richTextPath.split('.');
+    const root = content;
+    if (segments.length < 2 || isObject(getObjectProperty(root, segments.slice(0, -1).join('.'))))
+        return;
+    if (warnedRichTextPaths.has(richTextPath))
+        return;
+    warnedRichTextPaths.add(richTextPath);
+    let resolvedSegments = 0;
+    while (resolvedSegments < segments.length - 1 &&
+        isObject(getObjectProperty(root, segments.slice(0, resolvedSegments + 1).join('.')))) {
+        resolvedSegments++;
+    }
+    const resolvedPath = segments.slice(0, resolvedSegments).join('.') || '(the content itself)';
+    console.warn(`<et-contentful-rich-text-renderer>: richTextPath "${richTextPath}" does not resolve, so nothing is rendered. The deepest part that resolves is ${resolvedPath}; check the next segment for a typo or a missing item.`, { content, richTextPath });
 };
 class ContentfulRichTextRendererComponent {
     constructor() {
@@ -727,43 +830,102 @@ class ContentfulRichTextRendererComponent {
         this.elementRef = inject(ElementRef);
         this.config = injectContentfulConfig();
         this.document = inject(DOCUMENT);
+        this.location = inject(Location);
+        this.url = injectUrl();
+        this.injector = inject(Injector);
         /**
          * 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(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        this.content = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
         /**
          * The path to where the rich text field is inside the contentful response. Dot and array notation is allowed.
          * @example "items[0].fields.html"
          */
-        this.richTextPath = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "richTextPath" }] : /* istanbul ignore next */ []));
+        this.richTextPath = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "richTextPath" }] : /* istanbul ignore next */ []));
+        /**
+         * A rich-text field from the Contentful GraphQL API, passed as-is. An alternative to `content` and
+         * `richTextPath`; setting both is an error in dev mode.
+         * @example { json, links: { assets: { block, hyperlink }, entries: { block, inline, hyperlink } } }
+         */
+        this.gqlRichText = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "gqlRichText" }] : /* istanbul ignore next */ []));
+        /**
+         * A bare rich-text document, e.g. a rich-text field of an embedded entry. Pair it with `includes` so its
+         * embeds resolve. An alternative to `content` / `richTextPath` and `gqlRichText`.
+         * @example <et-contentful-rich-text-renderer [richText]="fields().body" [includes]="includes()" />
+         */
+        this.richText = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "richText" }] : /* istanbul ignore next */ []));
+        /** The linked entries and assets `richText` resolves its embeds against, e.g. a custom component's `includes`. */
+        this.includes = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "includes" }] : /* istanbul ignore next */ []));
+        this.ancestorEntryIds = inject(ANCESTOR_ENTRY_IDS, { optional: true }) ?? new Set();
         this.executedCommandsCache = new Map();
         this.contentIncludesMap = computed(() => {
+            const includes = this.includes();
+            if (includes) {
+                return includes;
+            }
+            const gqlRichText = this.gqlRichText();
+            if (gqlRichText) {
+                return createContentfulIncludeMap(mapContentfulGqlLinks(gqlRichText.links, Object.keys(this.config.customComponents)));
+            }
             const content = this.content();
-            const assets = content?.includes?.Asset;
-            const entries = content?.includes?.Entry;
-            return createContentfulIncludeMap({ assets: assets ?? [], entries: entries ?? [] });
+            const entries = new Map();
+            for (const entry of [...(content?.items ?? []), ...(content?.includes?.Entry ?? [])]) {
+                entries.set(entry.sys.id, entry);
+            }
+            return createContentfulIncludeMap({ assets: content?.includes?.Asset ?? [], entries: [...entries.values()] });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentIncludesMap" }] : /* istanbul ignore next */ []));
+        this.linkLookup = computed(() => lookupOf(this.contentIncludesMap()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkLookup" }] : /* istanbul ignore next */ []));
         this.richTextData = computed(() => {
+            const gqlRichText = this.gqlRichText();
             const content = this.content();
             const richTextPath = this.richTextPath();
+            const richText = this.richText();
+            if (ngDevMode && [gqlRichText, content || richTextPath, richText].filter(Boolean).length > 1) {
+                throw richTextRendererError('rich_text_conflicting_inputs', { gqlRichText, content, richTextPath, richText });
+            }
+            if (richText) {
+                if (!isRichTextRootNode(richText)) {
+                    throw richTextRendererError('rich_text_wrong_type', { richText });
+                }
+                return richText;
+            }
+            if (gqlRichText) {
+                if (!isRichTextRootNode(gqlRichText.json)) {
+                    throw richTextRendererError('rich_text_wrong_type', { gqlRichText });
+                }
+                return gqlRichText.json;
+            }
             if (!content) {
                 return null;
             }
-            const richText = getObjectProperty(content, richTextPath);
-            if (richText === null || richText === undefined) {
+            if (!richTextPath) {
+                if (ngDevMode) {
+                    console.warn('<et-contentful-rich-text-renderer>: content is set without richTextPath, so nothing is rendered. Set richTextPath, or pass a GraphQL field through gqlRichText.');
+                }
+                return null;
+            }
+            const pathValue = getObjectProperty(content, richTextPath);
+            if (pathValue === null || pathValue === undefined) {
+                if (ngDevMode && pathValue === undefined) {
+                    warnOnUnresolvedParentPath(content, richTextPath);
+                }
                 return null;
             }
-            if (!isObject(richText)) {
-                throw richTextRendererError('rich_text_undefined', { content, richTextPath });
+            if (!isObject(pathValue)) {
+                throw richTextRendererError('rich_text_not_object', { content, richTextPath, type: typeof pathValue });
             }
-            if (!isRichTextRootNode(richText)) {
+            if (!isRichTextRootNode(pathValue)) {
                 throw richTextRendererError('rich_text_wrong_type', { content, richTextPath });
             }
-            return richText;
+            return pathValue;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "richTextData" }] : /* istanbul ignore next */ []));
         this.renderCommands = computed(() => {
@@ -883,7 +1045,7 @@ class ContentfulRichTextRendererComponent {
                     if (!assetId) {
                         throw richTextRendererError('asset_id_not_found', { node });
                     }
-                    const asset = this.contentIncludesMap().getAsset(assetId);
+                    const asset = this.linkLookup().asset(assetId);
                     if (!asset) {
                         if (isDevMode()) {
                             console.warn('Embedded asset is missing from the includes! The asset will be skipped. Is it unpublished or deleted?', { assetId, node });
@@ -892,8 +1054,7 @@ class ContentfulRichTextRendererComponent {
                     }
                     const contentType = asset.fields.file?.contentType;
                     const assetComponents = this.config.components;
-                    const isMissing = !contentType && !asset.fields.file?.url;
-                    if (isMissing) {
+                    if (!asset.fields.file?.url) {
                         if (isDevMode()) {
                             console.warn('Asset is missing file data! Asset will be skipped. Did you forget to upload a file for the current translation in Contentful?', { asset });
                         }
@@ -940,16 +1101,32 @@ class ContentfulRichTextRendererComponent {
                     }
                     else if (node.nodeType === CF_INLINES.ASSET_HYPERLINK) {
                         const assetId = node.data['target']?.sys?.id;
-                        const asset = assetId ? this.contentIncludesMap().getAsset(assetId) : null;
+                        const asset = assetId ? this.linkLookup().asset(assetId) : null;
                         const url = asset?.fields.file?.url;
                         href = url ? normalizeHref(url) : null;
                     }
+                    else if (this.config.entryHref) {
+                        const entryId = node.data['target']?.sys?.id;
+                        const entry = entryId ? this.linkLookup().entry(entryId) : null;
+                        const entryHref = entry ? this.config.entryHref(entry) : null;
+                        href = entryHref ? normalizeHref(entryHref) : null;
+                    }
                     const linkTexts = node.content.filter((child) => child.nodeType === 'text' && Boolean(child.value));
+                    if (!linkTexts.length) {
+                        break;
+                    }
                     const linkText = linkTexts.map((child) => child.value).join('');
                     const linkComponent = href ? this.config.components.link : null;
                     if (href && !linkComponent) {
-                        const attributes = { class: DEFAULT_ANCHOR_CLASS, href };
-                        if (isExternalWebHref(href, { location: this.document.location, internalHosts: this.config.internalHosts })) {
+                        const webUrlContext = { location: this.document.location, internalHosts: this.config.internalHosts };
+                        const internalPath = internalWebHrefPath(href, webUrlContext);
+                        const anchorHref = internalPath !== null
+                            ? this.location.prepareExternalUrl(internalPath)
+                            : isRouteRelativeHref(href)
+                                ? this.location.prepareExternalUrl(resolveHrefAgainstRoute(href, this.url()))
+                                : href;
+                        const attributes = { class: DEFAULT_ANCHOR_CLASS, href: anchorHref };
+                        if (isExternalWebHref(href, webUrlContext)) {
                             attributes['target'] = '_blank';
                             attributes['rel'] = 'noopener noreferrer';
                         }
@@ -993,7 +1170,6 @@ class ContentfulRichTextRendererComponent {
                         break;
                     }
                     const sharedMarks = linkTexts[0]?.marks.filter((mark) => linkTexts.every((child) => child.marks.some((other) => other.type === mark.type))) ?? [];
-                    const textClass = marksToClass(sharedMarks);
                     let linkComponentId = componentIdMap.get(LINK_COMPONENT_TYPE) ?? -1;
                     const linkId = LINK_COMPONENT_TYPE + ++linkComponentId;
                     componentIdMap.set(LINK_COMPONENT_TYPE, linkComponentId);
@@ -1003,7 +1179,7 @@ class ContentfulRichTextRendererComponent {
                         domPosition,
                         parentId: openElementIds.at(-1) ?? null,
                         component: linkComponent,
-                        inputs: { href, text: linkText, textClass, anchorClass: DEFAULT_ANCHOR_CLASS },
+                        inputs: { href, text: linkText, marks: sharedMarks.map((mark) => mark.type), richText: true },
                         id: linkId,
                     });
                     domPosition++;
@@ -1015,10 +1191,16 @@ class ContentfulRichTextRendererComponent {
                     if (!entryId) {
                         throw richTextRendererError('entry_id_not_found', { node });
                     }
-                    const entry = this.contentIncludesMap().getEntry(entryId, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID);
+                    if (this.ancestorEntryIds.has(entryId)) {
+                        if (isDevMode()) {
+                            console.warn('Embedded entry embeds itself through its own rich text! The nested occurrence is skipped to stop the cycle.', { entryId, node });
+                        }
+                        break;
+                    }
+                    const entry = this.linkLookup().entry(entryId);
                     if (!entry) {
                         if (isDevMode()) {
-                            console.warn('Embedded entry is missing from the includes! The entry will be skipped. Is it unpublished or deleted?', { entryId, node });
+                            console.warn('Embedded entry is missing from the includes! The entry will be skipped. Is it unpublished or deleted, or is the include query param too low?', { entryId, node });
                         }
                         break;
                     }
@@ -1046,11 +1228,22 @@ class ContentfulRichTextRendererComponent {
                             sys: entry.sys,
                             includes: this.contentIncludesMap(),
                         },
+                        entryId,
                         id,
                     });
                     domPosition++;
                     break;
                 }
+                case CF_BLOCKS.EMBEDDED_RESOURCE:
+                case CF_INLINES.EMBEDDED_RESOURCE: {
+                    if (isDevMode()) {
+                        console.warn(`Rich text node type "${node.nodeType}" is not supported and is skipped.`, {
+                            urn: node.data['target']?.sys?.urn,
+                            node,
+                        });
+                    }
+                    break;
+                }
                 default: {
                     const tag = translateContentfulNodeTypeToHtmlTag(node.nodeType);
                     const attributes = {
@@ -1137,7 +1330,15 @@ class ContentfulRichTextRendererComponent {
             const bindings = declaredInputs
                 .filter((declared) => declared.propName in command.inputs)
                 .map((declared) => inputBinding(declared.templateName, () => inputs()[declared.propName]));
-            const componentRef = this.viewContainerRef.createComponent(command.component, { bindings });
+            const injector = command.entryId
+                ? Injector.create({
+                    providers: [
+                        { provide: ANCESTOR_ENTRY_IDS, useValue: new Set([...this.ancestorEntryIds, command.entryId]) },
+                    ],
+                    parent: this.injector,
+                })
+                : undefined;
+            const componentRef = this.viewContainerRef.createComponent(command.component, { bindings, injector });
             const rootNode = this.getComponentRootNode(componentRef);
             this.renderInsertAfter(rootNode, { parentElement, previousSibling });
             this.executedCommandsCache.set(command.id, {
@@ -1263,7 +1464,7 @@ class ContentfulRichTextRendererComponent {
         this.renderer.insertBefore(parentElement, node, previousSibling ? previousSibling.nextSibling : parentElement.firstChild);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, richTextPath: { classPropertyName: "richTextPath", publicName: "richTextPath", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-contentful-rich-text-renderer" }, ngImport: i0, template: ``, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, richTextPath: { classPropertyName: "richTextPath", publicName: "richTextPath", isSignal: true, isRequired: false, transformFunction: null }, gqlRichText: { classPropertyName: "gqlRichText", publicName: "gqlRichText", isSignal: true, isRequired: false, transformFunction: null }, richText: { classPropertyName: "richText", publicName: "richText", isSignal: true, isRequired: false, transformFunction: null }, includes: { classPropertyName: "includes", publicName: "includes", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true" }, classAttribute: "et-contentful-rich-text-renderer" }, ngImport: i0, template: ``, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
             type: Component,
@@ -1273,16 +1474,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         class: 'et-contentful-rich-text-renderer',
+                        ngSkipHydration: 'true',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], richTextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "richTextPath", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], richTextPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "richTextPath", required: false }] }], gqlRichText: [{ type: i0.Input, args: [{ isSignal: true, alias: "gqlRichText", required: false }] }], richText: [{ type: i0.Input, args: [{ isSignal: true, alias: "richText", required: false }] }], includes: [{ type: i0.Input, args: [{ isSignal: true, alias: "includes", required: false }] }] } });
 
 class ContentfulVideoComponent {
     constructor() {
         this.asset = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "asset" }] : /* istanbul ignore next */ []));
-        this.videoClass = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "videoClass" }] : /* istanbul ignore next */ []));
         this.data = computed(() => {
             const asset = this.asset();
             if (!asset) {
@@ -1305,13 +1505,13 @@ class ContentfulVideoComponent {
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, videoClass: { classPropertyName: "videoClass", publicName: "videoClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-video" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-contentful-video" }, ngImport: i0, template: `
     @if (data(); as data) {
-      <video [ngClass]="videoClass()" controls>
-        <source [src]="data.url" [type]="data.contentType" />
+      <video class="et-contentful-video-video" controls>
+        <source [src]="data.url" [attr.type]="data.contentType || null" class="et-contentful-video-source" />
       </video>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
             type: Component,
@@ -1319,18 +1519,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     selector: 'et-contentful-video',
                     template: `
     @if (data(); as data) {
-      <video [ngClass]="videoClass()" controls>
-        <source [src]="data.url" [type]="data.contentType" />
+      <video class="et-contentful-video-video" controls>
+        <source [src]="data.url" [attr.type]="data.contentType || null" class="et-contentful-video-source" />
       </video>
     }
   `,
                     encapsulation: ViewEncapsulation.None,
-                    imports: [NgClass],
                     host: {
                         class: 'et-contentful-video',
                     },
                 }]
-        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }], videoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoClass", required: false }] }] } });
+        }], propDecorators: { asset: [{ type: i0.Input, args: [{ isSignal: true, alias: "asset", required: true }] }] } });
 
 const ContentfulImports = [
     ContentfulAudioComponent,
@@ -1367,5 +1566,5 @@ const isContentfulEntryType = (entry, type) => entry.sys.contentType.sys.id ===
  * Generated bundle index. Do not edit.
  */
 
-export { CONTENTFUL_CONFIG, CONTENTFUL_DEFAULT_COMPONENTS, CONTENTFUL_FILE_LABELS, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulLinkComponent, ContentfulRichTextRendererComponent, ContentfulVideoComponent, DEFAULT_CONTENTFUL_FILE_LABELS, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, createContentfulConfig, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, injectContentfulConfig, injectContentfulFileLabels, isContentfulEntryType, isContentfulGqlAsset, isRichTextRootNode, marksToClass, marksToTags, parseContentfulImageSize, provideContentfulConfig, provideContentfulFileLabels, translateContentfulNodeTypeToHtmlTag };
+export { CONTENTFUL_CONFIG, CONTENTFUL_DEFAULT_COMPONENTS, CONTENTFUL_FILE_LABELS, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulLinkComponent, ContentfulRichTextRendererComponent, ContentfulVideoComponent, DEFAULT_CONTENTFUL_FILE_LABELS, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, createContentfulConfig, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, injectContentfulConfig, injectContentfulFileLabels, isContentfulEntryType, isContentfulGqlAsset, isRichTextRootNode, mapContentfulGqlLinks, marksToClass, marksToTags, parseContentfulImageSize, provideContentfulConfig, provideContentfulFileLabels, translateContentfulNodeTypeToHtmlTag };
 //# sourceMappingURL=ethlete-contentful.mjs.map