@ethlete/contentful 3.2.1 → 3.3.0

package/fesm2022/ethlete-contentful.mjs

@@ -1,12 +1,31 @@
 import { NgClass, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, inject, numberAttribute, booleanAttribute, computed, ViewContainerRef, Renderer2, ElementRef, isDevMode } from '@angular/core';
+import { input, computed, Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, inject, numberAttribute, booleanAttribute, ViewContainerRef, Renderer2, ElementRef, isDevMode } from '@angular/core';
+import { gql } from '@ethlete/query';
 import { normalizePictureSizes, PictureComponent } from '@ethlete/cdk';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { INLINES, BLOCKS } from '@contentful/rich-text-types';
 import { RuntimeError, isObject, getObjectProperty } from '@ethlete/core';
 import { startWith, pairwise, tap } from 'rxjs';
-import { gql } from '@ethlete/query';
+
+const GQL_FRAGMENT_CONTENTFUL_ASSET = gql `
+  fragment AssetData on Asset {
+    sys {
+      id
+    }
+    url
+    title
+    width
+    height
+    description
+    contentType
+    size
+  }
+`;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isContentfulGqlAsset = (asset) => {
+    return asset?.sys?.id && asset?.url && typeof asset?.size === 'number';
+};
 
 class ContentfulAudioComponent {
     constructor() {
@@ -14,13 +33,29 @@ class ContentfulAudioComponent {
         this.audioClass = input(null);
         this.figureClass = input(null);
         this.figcaptionClass = input(null);
+        this.data = computed(() => {
+            const asset = this.asset();
+            if (!asset) {
+                return null;
+            }
+            if (isContentfulGqlAsset(asset)) {
+                return {
+                    url: asset.url,
+                    title: asset.title,
+                };
+            }
+            return {
+                url: asset.fields.file.url,
+                title: asset.fields.title,
+            };
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: ContentfulAudioComponent, isStandalone: true, selector: "et-contentful-audio", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, audioClass: { classPropertyName: "audioClass", publicName: "audioClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (asset(); as data) {
+    @if (data(); as data) {
       <figure [ngClass]="figureClass()">
-        <figcaption [ngClass]="figcaptionClass()">{{ data.fields.title }}</figcaption>
-        <audio [ngClass]="audioClass()" controls src="{{ data.fields.file.url }}"></audio>
+        <figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
+        <audio [ngClass]="audioClass()" controls src="{{ data.url }}"></audio>
       </figure>
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -30,10 +65,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     selector: 'et-contentful-audio',
                     template: `
-    @if (asset(); as data) {
+    @if (data(); as data) {
       <figure [ngClass]="figureClass()">
-        <figcaption [ngClass]="figcaptionClass()">{{ data.fields.title }}</figcaption>
-        <audio [ngClass]="audioClass()" controls src="{{ data.fields.file.url }}"></audio>
+        <figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
+        <audio [ngClass]="audioClass()" controls src="{{ data.url }}"></audio>
       </figure>
     }
   `,
@@ -48,12 +83,32 @@ class ContentfulFileComponent {
     constructor() {
         this.asset = input.required();
         this.fileClass = input(null);
+        this.data = computed(() => {
+            const asset = this.asset();
+            if (!asset) {
+                return null;
+            }
+            if (isContentfulGqlAsset(asset)) {
+                return {
+                    url: asset.url,
+                    contentType: asset.contentType,
+                    size: asset.size,
+                    title: asset.title,
+                };
+            }
+            return {
+                url: asset.fields.file.url,
+                contentType: asset.fields.file.contentType,
+                size: asset.fields.file.details.size,
+                title: asset.fields.title,
+            };
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: ContentfulFileComponent, isStandalone: true, selector: "et-contentful-file", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, fileClass: { classPropertyName: "fileClass", publicName: "fileClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (asset(); as data) {
-      <a [href]="data.fields.file.url" [ngClass]="fileClass()" class="underline" target="_blank">
-        {{ data.fields.title }} ({{ data.fields.file.details.size }} Bytes)
+    @if (data(); as data) {
+      <a [href]="data.url" [ngClass]="fileClass()" class="underline" target="_blank">
+        {{ data.title }} ({{ data.size }} Bytes)
       </a>
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -63,9 +118,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     selector: 'et-contentful-file',
                     template: `
-    @if (asset(); as data) {
-      <a [href]="data.fields.file.url" [ngClass]="fileClass()" class="underline" target="_blank">
-        {{ data.fields.title }} ({{ data.fields.file.details.size }} Bytes)
+    @if (data(); as data) {
+      <a [href]="data.url" [ngClass]="fileClass()" class="underline" target="_blank">
+        {{ data.title }} ({{ data.size }} Bytes)
       </a>
     }
   `,
@@ -79,10 +134,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
 const CONTENTFUL_CONFIG = new InjectionToken('ContentfulConfig');
 
 const generateDefaultContentfulImageSource = (data) => {
-    const file = data.fields.file;
+    if (isContentfulGqlAsset(data)) {
+        return {
+            type: data.contentType,
+            srcset: data.url,
+        };
+    }
     return {
-        type: file.contentType,
-        srcset: file.url,
+        type: data.fields.file.contentType,
+        srcset: data.fields.file.url,
     };
 };
 /**
@@ -120,7 +180,7 @@ const generateContentfulImageSources = (data, srcsetSizes, backgroundColor, qual
     const sources = [];
     const SOURCE_TYPES = ['image/avif', 'image/webp', 'image/png', 'image/jpg'];
     for (const type of SOURCE_TYPES) {
-        const baseUrl = assetData.fields.file.url;
+        const baseUrl = isContentfulGqlAsset(assetData) ? assetData.url : assetData.fields.file.url;
         const sourceSets = [];
         const queryParams = [];
         // Set the format (e.g. 'fm=webp')
@@ -177,6 +237,25 @@ class ContentfulImageComponent {
         this.sizes = input(normalizePictureSizes(this._contentfulConfig.imageOptions.sizes), {
             transform: (v) => normalizePictureSizes(v),
         });
+        this.normalizedAsset = computed(() => {
+            const asset = this.asset();
+            if (isContentfulGqlAsset(asset)) {
+                return {
+                    alt: asset.title || null,
+                    figcaption: asset.description || null,
+                    width: asset.width,
+                    height: asset.height,
+                };
+            }
+            else {
+                return {
+                    alt: asset?.fields?.title || null,
+                    figcaption: asset?.fields?.description || null,
+                    width: asset?.fields?.file?.details?.image?.width ?? null,
+                    height: asset?.fields?.file?.details?.image?.height ?? null,
+                };
+            }
+        });
         this._sources = computed(() => {
             const asset = this.asset();
             const backgroundColor = this.backgroundColor();
@@ -203,10 +282,10 @@ class ContentfulImageComponent {
       [pictureClass]="pictureClass()"
       [figcaptionClass]="figcaptionClass()"
       [defaultSrc]="_defaultSrc()"
-      [alt]="asset()?.fields?.title ?? null"
-      [figcaption]="asset()?.fields?.description ?? null"
-      [width]="asset()?.fields?.file?.details?.image?.width ?? null"
-      [height]="asset()?.fields?.file?.details?.image?.height ?? null"
+      [alt]="normalizedAsset().alt ?? null"
+      [figcaption]="normalizedAsset().figcaption ?? null"
+      [width]="normalizedAsset().width ?? null"
+      [height]="normalizedAsset().height ?? null"
       [sizes]="sizes()"
       [sources]="_sources()"
     />
@@ -224,10 +303,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
       [pictureClass]="pictureClass()"
       [figcaptionClass]="figcaptionClass()"
       [defaultSrc]="_defaultSrc()"
-      [alt]="asset()?.fields?.title ?? null"
-      [figcaption]="asset()?.fields?.description ?? null"
-      [width]="asset()?.fields?.file?.details?.image?.width ?? null"
-      [height]="asset()?.fields?.file?.details?.image?.height ?? null"
+      [alt]="normalizedAsset().alt ?? null"
+      [figcaption]="normalizedAsset().figcaption ?? null"
+      [width]="normalizedAsset().width ?? null"
+      [height]="normalizedAsset().height ?? null"
       [sizes]="sizes()"
       [sources]="_sources()"
     />
@@ -246,12 +325,28 @@ class ContentfulVideoComponent {
     constructor() {
         this.asset = input.required();
         this.videoClass = input(null);
+        this.data = computed(() => {
+            const asset = this.asset();
+            if (!asset) {
+                return null;
+            }
+            if (isContentfulGqlAsset(asset)) {
+                return {
+                    url: asset.url,
+                    contentType: asset.contentType,
+                };
+            }
+            return {
+                url: asset.fields.file.url,
+                contentType: asset.fields.file.contentType,
+            };
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: ContentfulVideoComponent, isStandalone: true, selector: "et-contentful-video", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, videoClass: { classPropertyName: "videoClass", publicName: "videoClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (asset(); as data) {
+    @if (data(); as data) {
       <video [ngClass]="videoClass()" controls>
-        <source src="{{ data.fields.file.url }}" type="{{ data.fields.file.contentType }}" />
+        <source src="{{ data.url }}" type="{{ data.contentType }}" />
       </video>
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -261,9 +356,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     selector: 'et-contentful-video',
                     template: `
-    @if (asset(); as data) {
+    @if (data(); as data) {
       <video [ngClass]="videoClass()" controls>
-        <source src="{{ data.fields.file.url }}" type="{{ data.fields.file.contentType }}" />
+        <source src="{{ data.url }}" type="{{ data.contentType }}" />
       </video>
     }
   `,
@@ -1123,21 +1218,6 @@ const ContentfulImports = [
     ContentfulRichTextRendererComponent,
 ];
 
-const GQL_FRAGMENT_CONTENTFUL_ASSET = gql `
-  fragment AssetData on Asset {
-    sys {
-      id
-    }
-    url
-    title
-    width
-    height
-    description
-    contentType
-    size
-  }
-`;
-
 const provideContentfulConfig = (contentfulConfig = {}) => {
     return { provide: CONTENTFUL_CONFIG, useValue: createContentfulConfig(contentfulConfig) };
 };
@@ -1148,5 +1228,5 @@ const provideContentfulConfig = (contentfulConfig = {}) => {
  * Generated bundle index. Do not edit.
  */
 
-export { COMPONENT_RENDER_COMMAND_POSITION, CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulRichTextRendererComponent, ContentfulVideoComponent, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, HTML_CLOSE_RENDER_COMMAND_POSITION, HTML_OPEN_RENDER_COMMAND_POSITION, RENDER_COMMAND_POSITION, RENDER_COMMAND_TYPE, RENDER_INSTRUCTION_POSITION, RENDER_INSTRUCTION_TYPE, TEXT_RENDER_COMMAND_POSITION, createContentfulConfig, generateContentfulImageSources, generateDefaultContentfulImageSource, getRenderCommandId, isComponentRenderCommand, isExecutedComponentCommandCacheItem, isExecutedHtmlOrTextCommandCacheItem, isExecutedTextCommandCacheItem, isHtmlCloseRenderCommand, isHtmlOpenRenderCommand, isRichTextRootNode, isTextRenderCommand, marksToClass, parseContentfulImageSize, provideContentfulConfig, translateContentfulNodeTypeToHtmlTag };
+export { COMPONENT_RENDER_COMMAND_POSITION, CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulRichTextRendererComponent, ContentfulVideoComponent, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, HTML_CLOSE_RENDER_COMMAND_POSITION, HTML_OPEN_RENDER_COMMAND_POSITION, RENDER_COMMAND_POSITION, RENDER_COMMAND_TYPE, RENDER_INSTRUCTION_POSITION, RENDER_INSTRUCTION_TYPE, TEXT_RENDER_COMMAND_POSITION, createContentfulConfig, generateContentfulImageSources, generateDefaultContentfulImageSource, getRenderCommandId, isComponentRenderCommand, isContentfulGqlAsset, isExecutedComponentCommandCacheItem, isExecutedHtmlOrTextCommandCacheItem, isExecutedTextCommandCacheItem, isHtmlCloseRenderCommand, isHtmlOpenRenderCommand, isRichTextRootNode, isTextRenderCommand, marksToClass, parseContentfulImageSize, provideContentfulConfig, translateContentfulNodeTypeToHtmlTag };
 //# sourceMappingURL=ethlete-contentful.mjs.map