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

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 { 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');
 
@@ -183,13 +177,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 +196,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 +243,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 +268,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 +358,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,
@@ -433,10 +414,18 @@ const isExternalWebHref = (href, context) => {
     const url = parseWebUrl(href);
     return url !== null && !isInternalWebUrl(url, context);
 };
+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 +433,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 +446,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 +465,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 +496,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 +556,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: 'gqlRichText cannot be combined with content or richTextPath. Pass either a GraphQL rich-text field through gqlRichText, or a REST response through content and richTextPath.',
     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 +566,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 +576,75 @@ 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 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) => {
+    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: lowerCaseFirst(__typename) } },
+        },
+        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 its `__typename` with the first letter lower-cased,
+ * which is how Contentful derives a GraphQL type name from a content type id. Entries without a
+ * `__typename` are dropped.
+ */
+const mapContentfulGqlLinks = (links) => {
+    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);
+        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';
 };
@@ -681,7 +746,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;
         }
@@ -720,6 +785,23 @@ const createContentfulIncludeMap = (config) => {
         getAssets,
     };
 };
+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() {
         this.viewContainerRef = inject(ViewContainerRef);
@@ -727,38 +809,72 @@ class ContentfulRichTextRendererComponent {
         this.elementRef = inject(ElementRef);
         this.config = injectContentfulConfig();
         this.document = inject(DOCUMENT);
+        this.location = inject(Location);
+        this.url = injectUrl();
         /**
          * 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 */ []));
         this.executedCommandsCache = new Map();
-        this.contentIncludesMap = computed(() => {
-            const content = this.content();
-            const assets = content?.includes?.Asset;
-            const entries = content?.includes?.Entry;
-            return createContentfulIncludeMap({ assets: assets ?? [], entries: entries ?? [] });
+        this.includes = computed(() => {
+            const gqlRichText = this.gqlRichText();
+            if (gqlRichText) {
+                return mapContentfulGqlLinks(gqlRichText.links);
+            }
+            const includes = this.content()?.includes;
+            return { assets: includes?.Asset ?? [], entries: includes?.Entry ?? [] };
         }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "includes" }] : /* istanbul ignore next */ []));
+        this.contentIncludesMap = computed(() => createContentfulIncludeMap(this.includes()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentIncludesMap" }] : /* istanbul ignore next */ []));
+        this.includedEntries = computed(() => new Map(this.includes().entries.map((entry) => [entry.sys.id, entry])), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "includedEntries" }] : /* istanbul ignore next */ []));
         this.richTextData = computed(() => {
+            const gqlRichText = this.gqlRichText();
             const content = this.content();
             const richTextPath = this.richTextPath();
+            if (ngDevMode && gqlRichText && (content || richTextPath)) {
+                throw richTextRendererError('rich_text_conflicting_inputs', { gqlRichText, content, richTextPath });
+            }
+            if (gqlRichText) {
+                if (!isRichTextRootNode(gqlRichText.json)) {
+                    throw richTextRendererError('rich_text_wrong_type', { gqlRichText });
+                }
+                return gqlRichText.json;
+            }
             if (!content) {
                 return null;
             }
+            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 richText = getObjectProperty(content, richTextPath);
             if (richText === null || richText === undefined) {
+                if (ngDevMode && richText === undefined) {
+                    warnOnUnresolvedParentPath(content, richTextPath);
+                }
                 return null;
             }
             if (!isObject(richText)) {
-                throw richTextRendererError('rich_text_undefined', { content, richTextPath });
+                throw richTextRendererError('rich_text_not_object', { content, richTextPath, type: typeof richText });
             }
             if (!isRichTextRootNode(richText)) {
                 throw richTextRendererError('rich_text_wrong_type', { content, richTextPath });
@@ -892,8 +1008,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 });
                         }
@@ -945,10 +1060,16 @@ class ContentfulRichTextRendererComponent {
                         href = url ? normalizeHref(url) : 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 };
+                        const anchorHref = isRouteRelativeHref(href)
+                            ? this.location.prepareExternalUrl(resolveHrefAgainstRoute(href, this.url()))
+                            : href;
+                        const attributes = { class: DEFAULT_ANCHOR_CLASS, href: anchorHref };
                         if (isExternalWebHref(href, { location: this.document.location, internalHosts: this.config.internalHosts })) {
                             attributes['target'] = '_blank';
                             attributes['rel'] = 'noopener noreferrer';
@@ -993,7 +1114,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 +1123,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 +1135,10 @@ 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);
+                    const entry = this.includedEntries().get(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;
                     }
@@ -1263,7 +1383,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 } }, host: { 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,
@@ -1275,14 +1395,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'et-contentful-rich-text-renderer',
                     },
                 }]
-        }], 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 }] }] } });
 
 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 +1423,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 +1437,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 +1484,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