@ethlete/contentful 3.3.0 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/esm2022/lib/components/audio/contentful-audio.component.mjs +3 -3
- package/esm2022/lib/components/file/contentful-file.component.mjs +3 -3
- package/esm2022/lib/components/image/contentful-image.component.mjs +3 -3
- package/esm2022/lib/components/rich-text-renderer/rich-text-renderer.component.mjs +56 -49
- package/esm2022/lib/components/video/contentful-video.component.mjs +3 -3
- package/fesm2022/ethlete-contentful.mjs +69 -62
- package/fesm2022/ethlete-contentful.mjs.map +1 -1
- package/lib/components/rich-text-renderer/rich-text-renderer.component.d.ts +10 -0
- package/package.json +4 -4
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgClass, DOCUMENT } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { input, computed, Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, inject, numberAttribute, booleanAttribute, ViewContainerRef, Renderer2, ElementRef
|
|
3
|
+
import { input, computed, Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, inject, numberAttribute, booleanAttribute, isDevMode, ViewContainerRef, Renderer2, ElementRef } from '@angular/core';
|
|
4
4
|
import { gql } from '@ethlete/query';
|
|
5
5
|
import { normalizePictureSizes, PictureComponent } from '@ethlete/cdk';
|
|
6
6
|
import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -50,8 +50,8 @@ class ContentfulAudioComponent {
|
|
|
50
50
|
};
|
|
51
51
|
});
|
|
52
52
|
}
|
|
53
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
54
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
53
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ContentfulAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
54
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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: `
|
|
55
55
|
@if (data(); as data) {
|
|
56
56
|
<figure [ngClass]="figureClass()">
|
|
57
57
|
<figcaption [ngClass]="figcaptionClass()">{{ data.title }}</figcaption>
|
|
@@ -60,7 +60,7 @@ class ContentfulAudioComponent {
|
|
|
60
60
|
}
|
|
61
61
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
62
62
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ContentfulAudioComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
65
|
args: [{
|
|
66
66
|
selector: 'et-contentful-audio',
|
|
@@ -104,8 +104,8 @@ class ContentfulFileComponent {
|
|
|
104
104
|
};
|
|
105
105
|
});
|
|
106
106
|
}
|
|
107
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
108
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
107
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ContentfulFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
108
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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: `
|
|
109
109
|
@if (data(); as data) {
|
|
110
110
|
<a [href]="data.url" [ngClass]="fileClass()" class="underline" target="_blank">
|
|
111
111
|
{{ data.title }} ({{ data.size }} Bytes)
|
|
@@ -113,7 +113,7 @@ class ContentfulFileComponent {
|
|
|
113
113
|
}
|
|
114
114
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
115
115
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ContentfulFileComponent, decorators: [{
|
|
117
117
|
type: Component,
|
|
118
118
|
args: [{
|
|
119
119
|
selector: 'et-contentful-file',
|
|
@@ -273,8 +273,8 @@ class ContentfulImageComponent {
|
|
|
273
273
|
return asset ? generateDefaultContentfulImageSource(asset) : null;
|
|
274
274
|
});
|
|
275
275
|
}
|
|
276
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
277
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.
|
|
276
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ContentfulImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
277
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.5", type: ContentfulImageComponent, isStandalone: true, selector: "et-contentful-image", inputs: { asset: { classPropertyName: "asset", publicName: "asset", isSignal: true, isRequired: true, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, srcsetSizes: { classPropertyName: "srcsetSizes", publicName: "srcsetSizes", isSignal: true, isRequired: false, transformFunction: null }, quality: { classPropertyName: "quality", publicName: "quality", isSignal: true, isRequired: false, transformFunction: null }, focusArea: { classPropertyName: "focusArea", publicName: "focusArea", isSignal: true, isRequired: false, transformFunction: null }, resizeBehavior: { classPropertyName: "resizeBehavior", publicName: "resizeBehavior", isSignal: true, isRequired: false, transformFunction: null }, hasPriority: { classPropertyName: "hasPriority", publicName: "hasPriority", isSignal: true, isRequired: false, transformFunction: null }, imgClass: { classPropertyName: "imgClass", publicName: "imgClass", isSignal: true, isRequired: false, transformFunction: null }, figureClass: { classPropertyName: "figureClass", publicName: "figureClass", isSignal: true, isRequired: false, transformFunction: null }, figcaptionClass: { classPropertyName: "figcaptionClass", publicName: "figcaptionClass", isSignal: true, isRequired: false, transformFunction: null }, pictureClass: { classPropertyName: "pictureClass", publicName: "pictureClass", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-contentful-image" }, ngImport: i0, template: `
|
|
278
278
|
<et-picture
|
|
279
279
|
[imgClass]="imgClass()"
|
|
280
280
|
[hasPriority]="hasPriority()"
|
|
@@ -291,7 +291,7 @@ class ContentfulImageComponent {
|
|
|
291
291
|
/>
|
|
292
292
|
`, isInline: true, dependencies: [{ kind: "component", type: PictureComponent, selector: "et-picture", inputs: ["sources", "hasPriority", "imgClass", "figureClass", "figcaptionClass", "pictureClass", "defaultSrc", "alt", "figcaption", "width", "height", "sizes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
293
293
|
}
|
|
294
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
294
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ContentfulImageComponent, decorators: [{
|
|
295
295
|
type: Component,
|
|
296
296
|
args: [{
|
|
297
297
|
selector: 'et-contentful-image',
|
|
@@ -342,8 +342,8 @@ class ContentfulVideoComponent {
|
|
|
342
342
|
};
|
|
343
343
|
});
|
|
344
344
|
}
|
|
345
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
346
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.
|
|
345
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ContentfulVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
346
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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: `
|
|
347
347
|
@if (data(); as data) {
|
|
348
348
|
<video [ngClass]="videoClass()" controls>
|
|
349
349
|
<source src="{{ data.url }}" type="{{ data.contentType }}" />
|
|
@@ -351,7 +351,7 @@ class ContentfulVideoComponent {
|
|
|
351
351
|
}
|
|
352
352
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
353
353
|
}
|
|
354
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
354
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ContentfulVideoComponent, decorators: [{
|
|
355
355
|
type: Component,
|
|
356
356
|
args: [{
|
|
357
357
|
selector: 'et-contentful-video',
|
|
@@ -569,6 +569,57 @@ const isExecutedTextCommandCacheItem = (cache) => {
|
|
|
569
569
|
return isTextRenderCommand(cache.command);
|
|
570
570
|
};
|
|
571
571
|
const ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID = '$$$_et-contentful-any-entry-content-type-sys-id';
|
|
572
|
+
/**
|
|
573
|
+
* Create a contentful include map using the provided entries and assets.
|
|
574
|
+
*/
|
|
575
|
+
const createContentfulIncludeMap = (config) => {
|
|
576
|
+
const { entries, assets } = config;
|
|
577
|
+
const assetMap = new Map(assets.map((asset) => [asset.sys.id, asset]));
|
|
578
|
+
const entryMap = new Map(entries.map((entry) => [entry.sys.id, entry]));
|
|
579
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
580
|
+
const getEntry = (id, contentTypeId) => {
|
|
581
|
+
const entry = entryMap.get(id);
|
|
582
|
+
if (!entry) {
|
|
583
|
+
if (isDevMode()) {
|
|
584
|
+
console.warn('Entry not found! Will return null. Is the include query param to low?', { id, entryMap });
|
|
585
|
+
}
|
|
586
|
+
return null;
|
|
587
|
+
}
|
|
588
|
+
if (contentTypeId === ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID) {
|
|
589
|
+
return entry;
|
|
590
|
+
}
|
|
591
|
+
if (entry.sys.contentType.sys.id !== contentTypeId) {
|
|
592
|
+
if (isDevMode()) {
|
|
593
|
+
console.warn('Entry sys ID does not match the provided sys ID! Will return null.', {
|
|
594
|
+
entry,
|
|
595
|
+
sysId: contentTypeId,
|
|
596
|
+
});
|
|
597
|
+
}
|
|
598
|
+
return null;
|
|
599
|
+
}
|
|
600
|
+
return entry;
|
|
601
|
+
};
|
|
602
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
603
|
+
const getEntries = (ids, contentTypeId) => {
|
|
604
|
+
const entries = ids
|
|
605
|
+
.map((id) => (typeof id === 'string' ? id : id.sys.id))
|
|
606
|
+
.map((id) => getEntry(id, contentTypeId))
|
|
607
|
+
.filter((entry) => entry !== null);
|
|
608
|
+
return entries;
|
|
609
|
+
};
|
|
610
|
+
const getAsset = (id) => {
|
|
611
|
+
return assetMap.get(id) ?? null;
|
|
612
|
+
};
|
|
613
|
+
const getAssets = (ids) => {
|
|
614
|
+
return ids.map((id) => getAsset(id)).filter((asset) => asset !== null);
|
|
615
|
+
};
|
|
616
|
+
return {
|
|
617
|
+
getEntry,
|
|
618
|
+
getEntries,
|
|
619
|
+
getAsset,
|
|
620
|
+
getAssets,
|
|
621
|
+
};
|
|
622
|
+
};
|
|
572
623
|
class ContentfulRichTextRendererComponent {
|
|
573
624
|
constructor() {
|
|
574
625
|
this._viewContainerRef = inject(ViewContainerRef);
|
|
@@ -600,51 +651,7 @@ class ContentfulRichTextRendererComponent {
|
|
|
600
651
|
const content = this.content();
|
|
601
652
|
const assets = content?.includes.Asset;
|
|
602
653
|
const entries = content?.includes.Entry;
|
|
603
|
-
|
|
604
|
-
const entryMap = new Map(entries?.map((entry) => [entry.sys.id, entry]) ?? []);
|
|
605
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
606
|
-
const getEntry = (id, contentTypeId) => {
|
|
607
|
-
const entry = entryMap.get(id);
|
|
608
|
-
if (!entry) {
|
|
609
|
-
if (isDevMode()) {
|
|
610
|
-
console.warn('Entry not found! Will return null. Is the include query param to low?', { id, entryMap });
|
|
611
|
-
}
|
|
612
|
-
return null;
|
|
613
|
-
}
|
|
614
|
-
if (contentTypeId === ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID) {
|
|
615
|
-
return entry;
|
|
616
|
-
}
|
|
617
|
-
if (entry.sys.contentType.sys.id !== contentTypeId) {
|
|
618
|
-
if (isDevMode()) {
|
|
619
|
-
console.warn('Entry sys ID does not match the provided sys ID! Will return null.', {
|
|
620
|
-
entry,
|
|
621
|
-
sysId: contentTypeId,
|
|
622
|
-
});
|
|
623
|
-
}
|
|
624
|
-
return null;
|
|
625
|
-
}
|
|
626
|
-
return entry;
|
|
627
|
-
};
|
|
628
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
629
|
-
const getEntries = (ids, contentTypeId) => {
|
|
630
|
-
const entries = ids
|
|
631
|
-
.map((id) => (typeof id === 'string' ? id : id.sys.id))
|
|
632
|
-
.map((id) => getEntry(id, contentTypeId))
|
|
633
|
-
.filter((entry) => entry !== null);
|
|
634
|
-
return entries;
|
|
635
|
-
};
|
|
636
|
-
const getAsset = (id) => {
|
|
637
|
-
return assetMap.get(id) ?? null;
|
|
638
|
-
};
|
|
639
|
-
const getAssets = (ids) => {
|
|
640
|
-
return ids.map((id) => getAsset(id)).filter((asset) => asset !== null);
|
|
641
|
-
};
|
|
642
|
-
return {
|
|
643
|
-
getEntry,
|
|
644
|
-
getEntries,
|
|
645
|
-
getAsset,
|
|
646
|
-
getAssets,
|
|
647
|
-
};
|
|
654
|
+
return createContentfulIncludeMap({ assets: assets ?? [], entries: entries ?? [] });
|
|
648
655
|
});
|
|
649
656
|
/**
|
|
650
657
|
* The rich text data that should be rendered.
|
|
@@ -1179,10 +1186,10 @@ class ContentfulRichTextRendererComponent {
|
|
|
1179
1186
|
const command = this._stringifyRenderCommand(instruction[RENDER_INSTRUCTION_POSITION.COMMAND]);
|
|
1180
1187
|
return `${translatedType}: ${command}`;
|
|
1181
1188
|
}
|
|
1182
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.
|
|
1183
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.
|
|
1189
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ContentfulRichTextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1190
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.5", type: ContentfulRichTextRendererComponent, isStandalone: true, selector: "et-contentful-rich-text-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, richTextPath: { classPropertyName: "richTextPath", publicName: "richTextPath", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-contentful-rich-text-renderer" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1184
1191
|
}
|
|
1185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.
|
|
1192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ContentfulRichTextRendererComponent, decorators: [{
|
|
1186
1193
|
type: Component,
|
|
1187
1194
|
args: [{
|
|
1188
1195
|
selector: 'et-contentful-rich-text-renderer',
|
|
@@ -1228,5 +1235,5 @@ const provideContentfulConfig = (contentfulConfig = {}) => {
|
|
|
1228
1235
|
* Generated bundle index. Do not edit.
|
|
1229
1236
|
*/
|
|
1230
1237
|
|
|
1231
|
-
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 };
|
|
1238
|
+
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, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, getRenderCommandId, isComponentRenderCommand, isContentfulGqlAsset, isExecutedComponentCommandCacheItem, isExecutedHtmlOrTextCommandCacheItem, isExecutedTextCommandCacheItem, isHtmlCloseRenderCommand, isHtmlOpenRenderCommand, isRichTextRootNode, isTextRenderCommand, marksToClass, parseContentfulImageSize, provideContentfulConfig, translateContentfulNodeTypeToHtmlTag };
|
|
1232
1239
|
//# sourceMappingURL=ethlete-contentful.mjs.map
|