npm - @aiconomy/aico-components - Versions diffs - 0.0.164 → 0.0.174 - Mend

@aiconomy/aico-components 0.0.164 → 0.0.174

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.

Files changed (46) hide show

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e52034b7.js');
+const index = require('./index-0ce53322.js');
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/collection/components/aico-article-detail/aico-article-detail.js CHANGED Viewed

@@ -11,12 +11,15 @@ export class AicoArticleDetail {
         this.hideCategoryAndTags = false;
     }
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const translation = (_a = this.article.attributes.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
         const category = (_c = (_b = this.article.attributes.newsCategory) === null || _b === void 0 ? void 0 : _b.translations.find(translation => translation.locale === this.locale)) !== null && _c !== void 0 ? _c : null;
         const articleDate = new Date(this.article.attributes.publishDate);
         const content = this.article.attributes.contentBuilder.rows.sort((a, b) => a.order - b.order).map((row, index) => this.mapRowContent(row, index));
-        return (h(Host, null, h("figure", null, h("blockquote", { class: "blockquote" }, h("h2", { class: "text-uppercase" }, (_d = translation === null || translation === void 0 ? void 0 : translation.name) !== null && _d !== void 0 ? _d : this.article.attributes.name)), h(ConditionalRender, { condition: !this.hideDateAndAuthor }, h("figcaption", { class: "blockquote-footer mb-1" }, articleDate.toLocaleDateString('en-US', this.dateOptions), " by ", h("cite", { title: "Author" }, this.article.attributes.author))), h(ConditionalRender, { condition: !this.hideCategoryAndTags && !strIsNullOrEmptyOrWhitespace(category === null || category === void 0 ? void 0 : category.webName) }, h("span", { class: "badge bg-info text-dark" }, category === null || category === void 0 ? void 0 : category.webName))), h("div", { class: "content-wrapper" }, content), h(ConditionalRender, { condition: !this.hideCategoryAndTags }, this.article.attributes.newsTags.map(tag => {
+        const headlineFocusX = this.article.attributes.headlineImageFocusXPercentage ? `${this.article.attributes.headlineImageFocusXPercentage}%` : 'center';
+        const headlineFocusY = this.article.attributes.headlineImageFocusYPercentage ? `${this.article.attributes.headlineImageFocusYPercentage}%` : 'center';
+        const headlineImage = (_d = translation === null || translation === void 0 ? void 0 : translation.headlineImage) !== null && _d !== void 0 ? _d : this.article.attributes.headlineImage;
+        return (h(Host, null, h("figure", null, h("blockquote", { class: "blockquote" }, h("h2", { class: "text-uppercase" }, (_e = translation === null || translation === void 0 ? void 0 : translation.name) !== null && _e !== void 0 ? _e : this.article.attributes.name)), headlineImage && h("img", { class: "img-fluid rounded object-fit-cover", style: { 'object-position': `${headlineFocusX} ${headlineFocusY}` }, alt: "Headline image", src: headlineImage }), h(ConditionalRender, { condition: !this.hideDateAndAuthor }, h("figcaption", { class: "blockquote-footer mb-1" }, articleDate.toLocaleDateString('en-US', this.dateOptions), " by ", h("cite", { title: "Author" }, this.article.attributes.author))), h(ConditionalRender, { condition: !this.hideCategoryAndTags && !strIsNullOrEmptyOrWhitespace(category === null || category === void 0 ? void 0 : category.webName) }, h("span", { class: "badge bg-info text-dark" }, category === null || category === void 0 ? void 0 : category.webName))), h("div", { class: "content-wrapper" }, content), h(ConditionalRender, { condition: !this.hideCategoryAndTags }, this.article.attributes.newsTags.map(tag => {
             var _a;
             const translation = (_a = tag.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
             return (h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(translation === null || translation === void 0 ? void 0 : translation.webName) }, h("span", { class: "badge bg-light text-dark" }, translation.webName)));

package/dist/collection/components/aico-article-detail/aico-article-detail.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aico-article-detail.js","sourceRoot":"","sources":["../../../src/components/aico-article-detail/aico-article-detail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { ContentType } from '../../model/article/ContentType';\nimport type { Article, ArticleContent, ArticleContentBuilderColumn, ArticleContentBuilderRow } from '../../model/Article';\nimport type { HtmlContent } from '../../model/article/content/HtmlContent';\nimport type { AlbumContent } from '../../model/article/content/AlbumContent';\nimport type { TitleContent } from '../../model/article/content/TitleContent';\nimport type { BlockQuoteContent } from '../../model/article/content/BlockQuoteContent';\nimport type { BulletContent } from '../../model/article/content/BulletContent';\nimport type { CardContent } from '../../model/article/content/CardContent';\nimport type { CarouselContent } from '../../model/article/content/CarouselContent';\nimport type { DividerContent } from '../../model/article/content/DividerContent';\nimport type { DocumentContent } from '../../model/article/content/DocumentContent';\nimport type { HeadingContent } from '../../model/article/content/HeadingContent';\nimport type { LinkContent } from '../../model/article/content/LinkContent';\nimport type { TableContent } from '../../model/article/content/TableContet';\nimport type { TestimonialContent } from '../../model/article/content/TestimonialContent';\nimport type { TextContent } from '../../model/article/content/TextContent';\nimport type { VideoContent } from '../../model/article/content/VideoContent';\nimport type { AskingContent } from '../../model/article/content/AskingContent';\nimport type { FaqContent } from '../../model/article/content/FaqContent';\nimport type { NewsContent } from '../../model/article/content/NewsContent';\nimport type { PageContent } from '../../model/article/content/PageContent';\nimport type { UploadContent } from '../../model/article/content/UploadContent';\nimport ConditionalRender from '../../utils/ConditionalRender';\nimport { strIsNullOrEmptyOrWhitespace } from '../../utils/utils';\n\n@Component({\n tag: 'aico-article-detail',\n styleUrl: 'aico-article-detail.css',\n scoped: true,\n})\nexport class AicoArticleDetail {\n @Prop() article!: Article;\n\n /*\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n /\n Determines if the article date and author are shown or not.\n /\n @Prop() hideDateAndAuthor: boolean = false;\n\n /\n Determines if the article category and tags are shown or not.\n */\n @Prop() hideCategoryAndTags: boolean = false;\n\n private readonly dateOptions: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };\n\n render() {\n const translation = this.article.attributes.translations.find(translation => translation.locale === this.locale) ?? null;\n const category = this.article.attributes.newsCategory?.translations.find(translation => translation.locale === this.locale) ?? null;\n const articleDate = new Date(this.article.attributes.publishDate);\n const content = this.article.attributes.contentBuilder.rows.sort((a, b) => a.order - b.order).map((row, index) => this.mapRowContent(row, index));\n return (\n <Host>\n <figure>\n <blockquote class=\"blockquote\">\n <h2 class=\"text-uppercase\">{translation?.name ?? this.article.attributes.name}</h2>\n </blockquote>\n <ConditionalRender condition={!this.hideDateAndAuthor}>\n <figcaption class=\"blockquote-footer mb-1\">\n {articleDate.toLocaleDateString('en-US', this.dateOptions)} by <cite title=\"Author\">{this.article.attributes.author}</cite>\n </figcaption>\n </ConditionalRender>\n <ConditionalRender condition={!this.hideCategoryAndTags && !strIsNullOrEmptyOrWhitespace(category?.webName)}>\n <span class=\"badge bg-info text-dark\">{category?.webName}</span>\n </ConditionalRender>\n </figure>\n <div class=\"content-wrapper\">{content}</div>\n <ConditionalRender condition={!this.hideCategoryAndTags}>\n {this.article.attributes.newsTags.map(tag => {\n const translation = tag.translations.find(translation => translation.locale === this.locale) ?? null;\n return (\n <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(translation?.webName)}>\n <span class=\"badge bg-light text-dark\">{translation!.webName}</span>\n </ConditionalRender>\n );\n })}\n </ConditionalRender>\n </Host>\n );\n }\n\n private mapRowContent(row: ArticleContentBuilderRow, index: number) {\n const rowContent = row.columns.map((column, columnIndex) => this.mapColumnContent(column, columnIndex));\n return <div class={`content-row content-row-index-${index}`}>{rowContent}</div>;\n }\n\n private mapColumnContent(column: ArticleContentBuilderColumn, index: number) {\n const columnContent = column.contentContainer.contents.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0)).map((content, contentIndex) => this.mapContent(content, contentIndex));\n return <div class={`content-column content-column-index-${index}`}>{columnContent}</div>;\n }\n\n private mapContent(content: ArticleContent, index: number) {\n return <div class={`content-data-wrapper content-data-wrapper-index-${index}`}>{this.mapContentData(content.type, content.contentData)}</div>;\n }\n\n private mapContentData(contentType: ContentType \| undefined, content: object) {\n switch (contentType) {\n case ContentType.ALBUM:\n return <aico-album-content content={content as AlbumContent} />;\n\n case ContentType.ASKING:\n return <aico-asking-content content={content as AskingContent} locale={this.locale} />;\n\n case ContentType.BLOCK_QUOTE:\n return <aico-block-quote-content content={content as BlockQuoteContent} locale={this.locale} />;\n\n case ContentType.BULLET:\n return <aico-bullet-content content={content as BulletContent} locale={this.locale} />;\n\n case ContentType.CAROUSEL:\n return <aico-carousel-content content={content as CarouselContent} locale={this.locale} />;\n\n case ContentType.CONTENT_CARD:\n return <aico-content-card-content content={content as CardContent} locale={this.locale} />;\n\n case ContentType.DIVIDER:\n return <aico-divider-content content={content as DividerContent} locale={this.locale} />;\n\n case ContentType.DOCUMENT:\n return <aico-document-content content={content as DocumentContent} locale={this.locale} />;\n\n case ContentType.FAQ:\n return <aico-faq-content content={content as FaqContent} locale={this.locale} />;\n\n case ContentType.HEADING:\n return <aico-heading-content content={content as HeadingContent} locale={this.locale} />;\n\n case ContentType.HTML:\n return <aico-html-content content={content as HtmlContent} locale={this.locale} />;\n\n case ContentType.LINK:\n return <aico-link-content content={content as LinkContent} locale={this.locale} />;\n\n case ContentType.NEWS:\n return <aico-news-content content={content as NewsContent} />;\n\n case ContentType.PAGE:\n return <aico-page-content content={content as PageContent} locale={this.locale} />;\n\n case ContentType.TABLE:\n return <aico-table-content content={content as TableContent} locale={this.locale} />;\n\n case ContentType.TESTIMONIAL:\n return <aico-testimonial-content content={content as TestimonialContent} />;\n\n case ContentType.TEXT:\n return <aico-text-content content={content as TextContent} locale={this.locale} />;\n\n case ContentType.TITLE:\n return <aico-title-content content={content as TitleContent} locale={this.locale} />;\n\n case ContentType.UPLOAD:\n return <aico-upload-content content={content as UploadContent} locale={this.locale} />;\n\n case ContentType.VIDEO:\n return <aico-video-content content={content as VideoContent} locale={this.locale} />;\n\n case ContentType.PRODUCT:\n case ContentType.AGENDA:\n case ContentType.LIST_ASKING:\n case ContentType.LIST_AGENDA:\n case ContentType.CRM:\n case ContentType.B2B:\n case ContentType.FORM_BUILDER:\n case ContentType.COURSE:\n case ContentType.COLLECTION:\n default:\n return <div class=\"content-data content-data-not-handled\">Content type not handled.</div>;\n }\n }\n}\n"]}
1	+ {"version":3,"file":"aico-article-detail.js","sourceRoot":"","sources":["../../../src/components/aico-article-detail/aico-article-detail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { ContentType } from '../../model/article/ContentType';\nimport type { Article, ArticleContent, ArticleContentBuilderColumn, ArticleContentBuilderRow } from '../../model/Article';\nimport type { HtmlContent } from '../../model/article/content/HtmlContent';\nimport type { AlbumContent } from '../../model/article/content/AlbumContent';\nimport type { TitleContent } from '../../model/article/content/TitleContent';\nimport type { BlockQuoteContent } from '../../model/article/content/BlockQuoteContent';\nimport type { BulletContent } from '../../model/article/content/BulletContent';\nimport type { CardContent } from '../../model/article/content/CardContent';\nimport type { CarouselContent } from '../../model/article/content/CarouselContent';\nimport type { DividerContent } from '../../model/article/content/DividerContent';\nimport type { DocumentContent } from '../../model/article/content/DocumentContent';\nimport type { HeadingContent } from '../../model/article/content/HeadingContent';\nimport type { LinkContent } from '../../model/article/content/LinkContent';\nimport type { TableContent } from '../../model/article/content/TableContet';\nimport type { TestimonialContent } from '../../model/article/content/TestimonialContent';\nimport type { TextContent } from '../../model/article/content/TextContent';\nimport type { VideoContent } from '../../model/article/content/VideoContent';\nimport type { AskingContent } from '../../model/article/content/AskingContent';\nimport type { FaqContent } from '../../model/article/content/FaqContent';\nimport type { NewsContent } from '../../model/article/content/NewsContent';\nimport type { PageContent } from '../../model/article/content/PageContent';\nimport type { UploadContent } from '../../model/article/content/UploadContent';\nimport ConditionalRender from '../../utils/ConditionalRender';\nimport { strIsNullOrEmptyOrWhitespace } from '../../utils/utils';\n\n@Component({\n tag: 'aico-article-detail',\n styleUrl: 'aico-article-detail.css',\n scoped: true,\n})\nexport class AicoArticleDetail {\n @Prop() article!: Article;\n\n /*\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n /\n Determines if the article date and author are shown or not.\n /\n @Prop() hideDateAndAuthor: boolean = false;\n\n /\n Determines if the article category and tags are shown or not.\n */\n @Prop() hideCategoryAndTags: boolean = false;\n\n private readonly dateOptions: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };\n\n render() {\n const translation = this.article.attributes.translations.find(translation => translation.locale === this.locale) ?? null;\n const category = this.article.attributes.newsCategory?.translations.find(translation => translation.locale === this.locale) ?? null;\n const articleDate = new Date(this.article.attributes.publishDate);\n const content = this.article.attributes.contentBuilder.rows.sort((a, b) => a.order - b.order).map((row, index) => this.mapRowContent(row, index));\n\n const headlineFocusX = this.article.attributes.headlineImageFocusXPercentage ? `${this.article.attributes.headlineImageFocusXPercentage}%` : 'center';\n const headlineFocusY = this.article.attributes.headlineImageFocusYPercentage ? `${this.article.attributes.headlineImageFocusYPercentage}%` : 'center';\n const headlineImage = translation?.headlineImage ?? this.article.attributes.headlineImage;\n\n return (\n <Host>\n <figure>\n <blockquote class=\"blockquote\">\n <h2 class=\"text-uppercase\">{translation?.name ?? this.article.attributes.name}</h2>\n </blockquote>\n {headlineImage && <img class=\"img-fluid rounded object-fit-cover\" style={{ 'object-position': `${headlineFocusX} ${headlineFocusY}` }} alt=\"Headline image\" src={headlineImage} />}\n <ConditionalRender condition={!this.hideDateAndAuthor}>\n <figcaption class=\"blockquote-footer mb-1\">\n {articleDate.toLocaleDateString('en-US', this.dateOptions)} by <cite title=\"Author\">{this.article.attributes.author}</cite>\n </figcaption>\n </ConditionalRender>\n <ConditionalRender condition={!this.hideCategoryAndTags && !strIsNullOrEmptyOrWhitespace(category?.webName)}>\n <span class=\"badge bg-info text-dark\">{category?.webName}</span>\n </ConditionalRender>\n </figure>\n <div class=\"content-wrapper\">{content}</div>\n <ConditionalRender condition={!this.hideCategoryAndTags}>\n {this.article.attributes.newsTags.map(tag => {\n const translation = tag.translations.find(translation => translation.locale === this.locale) ?? null;\n return (\n <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(translation?.webName)}>\n <span class=\"badge bg-light text-dark\">{translation!.webName}</span>\n </ConditionalRender>\n );\n })}\n </ConditionalRender>\n </Host>\n );\n }\n\n private mapRowContent(row: ArticleContentBuilderRow, index: number) {\n const rowContent = row.columns.map((column, columnIndex) => this.mapColumnContent(column, columnIndex));\n return <div class={`content-row content-row-index-${index}`}>{rowContent}</div>;\n }\n\n private mapColumnContent(column: ArticleContentBuilderColumn, index: number) {\n const columnContent = column.contentContainer.contents.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0)).map((content, contentIndex) => this.mapContent(content, contentIndex));\n return <div class={`content-column content-column-index-${index}`}>{columnContent}</div>;\n }\n\n private mapContent(content: ArticleContent, index: number) {\n return <div class={`content-data-wrapper content-data-wrapper-index-${index}`}>{this.mapContentData(content.type, content.contentData)}</div>;\n }\n\n private mapContentData(contentType: ContentType \| undefined, content: object) {\n switch (contentType) {\n case ContentType.ALBUM:\n return <aico-album-content content={content as AlbumContent} />;\n\n case ContentType.ASKING:\n return <aico-asking-content content={content as AskingContent} locale={this.locale} />;\n\n case ContentType.BLOCK_QUOTE:\n return <aico-block-quote-content content={content as BlockQuoteContent} locale={this.locale} />;\n\n case ContentType.BULLET:\n return <aico-bullet-content content={content as BulletContent} locale={this.locale} />;\n\n case ContentType.CAROUSEL:\n return <aico-carousel-content content={content as CarouselContent} locale={this.locale} />;\n\n case ContentType.CONTENT_CARD:\n return <aico-content-card-content content={content as CardContent} locale={this.locale} />;\n\n case ContentType.DIVIDER:\n return <aico-divider-content content={content as DividerContent} locale={this.locale} />;\n\n case ContentType.DOCUMENT:\n return <aico-document-content content={content as DocumentContent} locale={this.locale} />;\n\n case ContentType.FAQ:\n return <aico-faq-content content={content as FaqContent} locale={this.locale} />;\n\n case ContentType.HEADING:\n return <aico-heading-content content={content as HeadingContent} locale={this.locale} />;\n\n case ContentType.HTML:\n return <aico-html-content content={content as HtmlContent} locale={this.locale} />;\n\n case ContentType.LINK:\n return <aico-link-content content={content as LinkContent} locale={this.locale} />;\n\n case ContentType.NEWS:\n return <aico-news-content content={content as NewsContent} />;\n\n case ContentType.PAGE:\n return <aico-page-content content={content as PageContent} locale={this.locale} />;\n\n case ContentType.TABLE:\n return <aico-table-content content={content as TableContent} locale={this.locale} />;\n\n case ContentType.TESTIMONIAL:\n return <aico-testimonial-content content={content as TestimonialContent} />;\n\n case ContentType.TEXT:\n return <aico-text-content content={content as TextContent} locale={this.locale} />;\n\n case ContentType.TITLE:\n return <aico-title-content content={content as TitleContent} locale={this.locale} />;\n\n case ContentType.UPLOAD:\n return <aico-upload-content content={content as UploadContent} locale={this.locale} />;\n\n case ContentType.VIDEO:\n return <aico-video-content content={content as VideoContent} locale={this.locale} />;\n\n case ContentType.PRODUCT:\n case ContentType.AGENDA:\n case ContentType.LIST_ASKING:\n case ContentType.LIST_AGENDA:\n case ContentType.CRM:\n case ContentType.B2B:\n case ContentType.FORM_BUILDER:\n case ContentType.COURSE:\n case ContentType.COLLECTION:\n default:\n return <div class=\"content-data content-data-not-handled\">Content type not handled.</div>;\n }\n }\n}\n"]}

package/dist/collection/components/aico-news-list/aico-news-list.js CHANGED Viewed

@@ -43,7 +43,7 @@ export class AicoNewsList {
     render() {
         var _a, _b, _c;
         return (h(Host, null, h("div", { class: "newslist-grid-container mb-4" }, (_a = this.newsResponse) === null || _a === void 0 ? void 0 : _a.data.filter(article => !article.attributes.isTopNews).map((article, articleIndex) => {
-            return (h("div", { class: "col" }, h("aico-news-list-item", { article: article, articleIndex: articleIndex, onArticleClick: e => {
+            return (h("div", { key: article.id, class: "col" }, h("aico-news-list-item", { article: article, articleIndex: articleIndex, onArticleClick: e => {
                     var _a;
                     (_a = this.articleClick) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
                     e.stopPropagation();

package/dist/collection/components/aico-news-list/aico-news-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aico-news-list.js","sourceRoot":"","sources":["../../../src/components/aico-news-list/aico-news-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { fetchNewsArticles, splitByComma } from '../../utils/utils';\nimport { NewsResponse } from '../../model/NewsResponse';\nimport { AicoApiRequestInfo } from '../../model/AicoApiRequestInfo';\nimport { Article } from '../../model/Article';\n\n@Component({\n tag: 'aico-news-list',\n styleUrl: 'aico-news-list.css',\n scoped: true,\n})\nexport class AicoNewsList {\n @State() newsResponse?: NewsResponse;\n\n @State() pageNumber = 1;\n\n @State() newsChannelsArr: string[] = [];\n\n @State() newsSellerIdsArr: string[] = [];\n\n @State() newsBrandIdsArr: string[] = [];\n\n @State() newsLanguageLocalesArr: string[] = [];\n\n /*\n The url of the Aico Api that will be used to retrieve the article.\n /\n @Prop() aicoUrl!: string;\n\n /\n The token used to authenticate against he Aico Api.\n /\n @Prop() aicoBearerToken!: string;\n\n /\n Channel names as a comma separated list used to filter the results.\n /\n @Prop() newsChannels: string = '';\n\n /\n Seller ids as a comma separated list used to filter the results.\n /\n @Prop() newsSellerIds: string = '';\n\n /\n Brand ids as a comma separated list used to filter the results.\n /\n @Prop() newsBrandIds: string = '';\n\n /\n Language locales as a comma separated list used to filter the results.\n /\n @Prop() newsLanguageLocales: string = '';\n\n /\n Determines wheter top articles will be included in the list or not.\n /\n @Prop() hideTopArticles: boolean = true;\n\n /\n Determines wheter special articles will be included in the list or not.\n /\n @Prop() hideSpecialArticles: boolean = false;\n\n /\n The page size. Prefer this number to be even.\n /\n @Prop() pageSize: number = 16;\n\n /\n The text used by the next button in the pagination component.\n /\n @Prop() nextButtonText: string = 'Next';\n\n /\n The text used by the previous button in the pagination component.\n /\n @Prop() previousButtonText: string = 'Previous';\n\n /\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n /\n Event emitted when a user clicks an article.\n \n The handler receives the entire Article entity.\n */\n @Event() articleClick?: EventEmitter<Article>;\n\n private api?: AicoApiRequestInfo;\n private newsListFetchController?: AbortController;\n\n connectedCallback() {\n this.newsListFetchController = new AbortController();\n this.pageNumber = 1;\n\n this.api = { baseApi: this.aicoUrl, bearerToken: this.aicoBearerToken };\n\n this.newsChannelsArr = splitByComma(this.newsChannels);\n this.newsSellerIdsArr = splitByComma(this.newsSellerIds);\n this.newsBrandIdsArr = splitByComma(this.newsBrandIds);\n this.newsLanguageLocalesArr = splitByComma(this.newsLanguageLocales);\n }\n\n disconnectedCallback() {\n this.newsListFetchController!.abort('disconnected');\n }\n\n async componentWillLoad(): Promise<void> {\n this.newsResponse = await fetchNewsArticles(\n this.api!,\n this.pageNumber,\n this.pageSize,\n this.newsListFetchController!.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n this.hideTopArticles,\n this.hideSpecialArticles,\n );\n }\n\n async componentWillUpdate(): Promise<void> {\n this.newsListFetchController = new AbortController();\n this.newsResponse = await fetchNewsArticles(\n this.api!,\n this.pageNumber,\n this.pageSize,\n this.newsListFetchController.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n this.hideTopArticles,\n this.hideSpecialArticles,\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"newslist-grid-container mb-4\">\n {this.newsResponse?.data\n .filter(article => !article.attributes.isTopNews)\n .map((article, articleIndex) => {\n return (\n <div class=\"col\">\n <aico-news-list-item\n article={article}\n articleIndex={articleIndex}\n onArticleClick={e => {\n this.articleClick?.emit(e.detail);\n e.stopPropagation();\n }}\n locale={this.locale}\n />\n </div>\n );\n })}\n </div>\n <nav class=\"w-100\" aria-label=\"News navigation\">\n <ul class=\"pagination justify-content-center\">\n <li\n class={`page-item page-link user-select-none d-flex align-items-center ${!this.newsResponse?.links.prev ? 'disabled' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (this.pageNumber > 1) {\n this.pageNumber -= 1;\n }\n\n return false;\n }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" class=\"bi bi-chevron-left me-1 fs-4\" style={{ width: '1em', height: '1em' }} viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\" />\n </svg>\n {this.previousButtonText}\n </li>\n {this.getViewablePages().map(page => (\n <li\n class={`page-item page-link user-select-none ${page === '...' ? 'disabled' : Number(page) === this.pageNumber ? 'active' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (page !== '...') {\n this.pageNumber = Number(page);\n }\n return false;\n }}\n >\n {page}\n </li>\n ))}\n <li\n class={`page-item page-link user-select-none d-flex align-items-center ${!this.newsResponse?.links.next ? 'disabled' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (this.newsResponse?.meta.page.lastPage && this.pageNumber < this.newsResponse?.meta.page.lastPage) {\n this.pageNumber += 1;\n }\n }}\n >\n {this.nextButtonText}\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" class=\"bi bi-chevron-right ms-1 fs-4\" style={{ width: '1em', height: '1em' }} viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\" />\n </svg>\n </li>\n </ul>\n </nav>\n </Host>\n );\n }\n\n private getViewablePages(lookAhead: number = 2) {\n const pages: string[] = [];\n if (this.pageNumber - lookAhead >= 2) {\n pages.push('1');\n }\n\n if (this.pageNumber - lookAhead > 2) {\n pages.push('...');\n }\n\n for (let i = this.pageNumber - lookAhead; i < this.pageNumber; i += 1) {\n if (i >= 1) {\n pages.push(`${i}`);\n }\n }\n\n pages.push(`${this.pageNumber}`);\n for (let i = this.pageNumber + 1; i <= this.pageNumber + lookAhead; i += 1) {\n if (i <= (this.newsResponse?.meta.page.lastPage ?? 0)) {\n pages.push(`${i}`);\n }\n }\n\n if (this.pageNumber + lookAhead < (this.newsResponse?.meta.page.lastPage ?? 0) - 1) {\n pages.push('...');\n }\n\n if (this.pageNumber + lookAhead <= (this.newsResponse?.meta.page.lastPage ?? 0) - 1) {\n pages.push(`${this.newsResponse?.meta.page.lastPage}`);\n }\n\n return pages;\n }\n}\n"]}
1	+ {"version":3,"file":"aico-news-list.js","sourceRoot":"","sources":["../../../src/components/aico-news-list/aico-news-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { fetchNewsArticles, splitByComma } from '../../utils/utils';\nimport { NewsResponse } from '../../model/NewsResponse';\nimport { AicoApiRequestInfo } from '../../model/AicoApiRequestInfo';\nimport { Article } from '../../model/Article';\n\n@Component({\n tag: 'aico-news-list',\n styleUrl: 'aico-news-list.css',\n scoped: true,\n})\nexport class AicoNewsList {\n @State() newsResponse?: NewsResponse;\n\n @State() pageNumber = 1;\n\n @State() newsChannelsArr: string[] = [];\n\n @State() newsSellerIdsArr: string[] = [];\n\n @State() newsBrandIdsArr: string[] = [];\n\n @State() newsLanguageLocalesArr: string[] = [];\n\n /*\n The url of the Aico Api that will be used to retrieve the article.\n /\n @Prop() aicoUrl!: string;\n\n /\n The token used to authenticate against he Aico Api.\n /\n @Prop() aicoBearerToken!: string;\n\n /\n Channel names as a comma separated list used to filter the results.\n /\n @Prop() newsChannels: string = '';\n\n /\n Seller ids as a comma separated list used to filter the results.\n /\n @Prop() newsSellerIds: string = '';\n\n /\n Brand ids as a comma separated list used to filter the results.\n /\n @Prop() newsBrandIds: string = '';\n\n /\n Language locales as a comma separated list used to filter the results.\n /\n @Prop() newsLanguageLocales: string = '';\n\n /\n Determines wheter top articles will be included in the list or not.\n /\n @Prop() hideTopArticles: boolean = true;\n\n /\n Determines wheter special articles will be included in the list or not.\n /\n @Prop() hideSpecialArticles: boolean = false;\n\n /\n The page size. Prefer this number to be even.\n /\n @Prop() pageSize: number = 16;\n\n /\n The text used by the next button in the pagination component.\n /\n @Prop() nextButtonText: string = 'Next';\n\n /\n The text used by the previous button in the pagination component.\n /\n @Prop() previousButtonText: string = 'Previous';\n\n /\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n /\n Event emitted when a user clicks an article.\n \n The handler receives the entire Article entity.\n */\n @Event() articleClick?: EventEmitter<Article>;\n\n private api?: AicoApiRequestInfo;\n private newsListFetchController?: AbortController;\n\n connectedCallback() {\n this.newsListFetchController = new AbortController();\n this.pageNumber = 1;\n\n this.api = { baseApi: this.aicoUrl, bearerToken: this.aicoBearerToken };\n\n this.newsChannelsArr = splitByComma(this.newsChannels);\n this.newsSellerIdsArr = splitByComma(this.newsSellerIds);\n this.newsBrandIdsArr = splitByComma(this.newsBrandIds);\n this.newsLanguageLocalesArr = splitByComma(this.newsLanguageLocales);\n }\n\n disconnectedCallback() {\n this.newsListFetchController!.abort('disconnected');\n }\n\n async componentWillLoad(): Promise<void> {\n this.newsResponse = await fetchNewsArticles(\n this.api!,\n this.pageNumber,\n this.pageSize,\n this.newsListFetchController!.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n this.hideTopArticles,\n this.hideSpecialArticles,\n );\n }\n\n async componentWillUpdate(): Promise<void> {\n this.newsListFetchController = new AbortController();\n this.newsResponse = await fetchNewsArticles(\n this.api!,\n this.pageNumber,\n this.pageSize,\n this.newsListFetchController.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n this.hideTopArticles,\n this.hideSpecialArticles,\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"newslist-grid-container mb-4\">\n {this.newsResponse?.data\n .filter(article => !article.attributes.isTopNews)\n .map((article, articleIndex) => {\n return (\n <div key={article.id} class=\"col\">\n <aico-news-list-item\n article={article}\n articleIndex={articleIndex}\n onArticleClick={e => {\n this.articleClick?.emit(e.detail);\n e.stopPropagation();\n }}\n locale={this.locale}\n />\n </div>\n );\n })}\n </div>\n <nav class=\"w-100\" aria-label=\"News navigation\">\n <ul class=\"pagination justify-content-center\">\n <li\n class={`page-item page-link user-select-none d-flex align-items-center ${!this.newsResponse?.links.prev ? 'disabled' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (this.pageNumber > 1) {\n this.pageNumber -= 1;\n }\n\n return false;\n }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" class=\"bi bi-chevron-left me-1 fs-4\" style={{ width: '1em', height: '1em' }} viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\" />\n </svg>\n {this.previousButtonText}\n </li>\n {this.getViewablePages().map(page => (\n <li\n class={`page-item page-link user-select-none ${page === '...' ? 'disabled' : Number(page) === this.pageNumber ? 'active' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (page !== '...') {\n this.pageNumber = Number(page);\n }\n return false;\n }}\n >\n {page}\n </li>\n ))}\n <li\n class={`page-item page-link user-select-none d-flex align-items-center ${!this.newsResponse?.links.next ? 'disabled' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (this.newsResponse?.meta.page.lastPage && this.pageNumber < this.newsResponse?.meta.page.lastPage) {\n this.pageNumber += 1;\n }\n }}\n >\n {this.nextButtonText}\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" class=\"bi bi-chevron-right ms-1 fs-4\" style={{ width: '1em', height: '1em' }} viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\" />\n </svg>\n </li>\n </ul>\n </nav>\n </Host>\n );\n }\n\n private getViewablePages(lookAhead: number = 2) {\n const pages: string[] = [];\n if (this.pageNumber - lookAhead >= 2) {\n pages.push('1');\n }\n\n if (this.pageNumber - lookAhead > 2) {\n pages.push('...');\n }\n\n for (let i = this.pageNumber - lookAhead; i < this.pageNumber; i += 1) {\n if (i >= 1) {\n pages.push(`${i}`);\n }\n }\n\n pages.push(`${this.pageNumber}`);\n for (let i = this.pageNumber + 1; i <= this.pageNumber + lookAhead; i += 1) {\n if (i <= (this.newsResponse?.meta.page.lastPage ?? 0)) {\n pages.push(`${i}`);\n }\n }\n\n if (this.pageNumber + lookAhead < (this.newsResponse?.meta.page.lastPage ?? 0) - 1) {\n pages.push('...');\n }\n\n if (this.pageNumber + lookAhead <= (this.newsResponse?.meta.page.lastPage ?? 0) - 1) {\n pages.push(`${this.newsResponse?.meta.page.lastPage}`);\n }\n\n return pages;\n }\n}\n"]}

package/dist/collection/components/aico-news-list-item/aico-news-list-item.js CHANGED Viewed

@@ -5,13 +5,33 @@ export class AicoNewsListItem {
         this.articleIndex = 0;
         this.locale = 'de';
     }
+    componentDidLoad() {
+        const img = this.thisHtml.querySelector('img');
+        if (img) {
+            this.imageObserver = new IntersectionObserver(this.onIntersection);
+            this.imageObserver.observe(img);
+        }
+    }
+    async onIntersection(entries) {
+        var _a;
+        for (const entry of entries) {
+            if (entry.isIntersecting) {
+                (_a = this.imageObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                const src = entry.target.getAttribute('data-src');
+                if (src) {
+                    entry.target.setAttribute('src', src);
+                    entry.target.removeAttribute('data-src');
+                }
+            }
+        }
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         const translation = this.article.attributes.translations.find(t => t.locale === this.locale);
         return (h("div", { class: "card h-100 pe-auto", style: { cursor: 'pointer' }, onClick: () => {
                 var _a;
                 (_a = this.articleClick) === null || _a === void 0 ? void 0 : _a.emit(this.article);
-            } }, h("div", { class: "ratio ratio-16x9 overflow-hidden" }, h("img", { class: "object-fit-cover", style: { 'min-height': '15rem' }, alt: "Article image", src: (_e = (_d = (_c = (_b = (_a = translation === null || translation === void 0 ? void 0 : translation.image) !== null && _a !== void 0 ? _a : translation === null || translation === void 0 ? void 0 : translation.optimizedListImage) !== null && _b !== void 0 ? _b : translation === null || translation === void 0 ? void 0 : translation.optimizedImage) !== null && _c !== void 0 ? _c : this.article.attributes.image) !== null && _d !== void 0 ? _d : this.article.attributes.optimizedListImage) !== null && _e !== void 0 ? _e : this.article.attributes.optimizedImage }), h("div", { class: "card-img-overlay d-flex justify-content-end" })), h("div", { class: "card-body" }, h("h5", { class: "card-title" }, (_f = translation === null || translation === void 0 ? void 0 : translation.name) !== null && _f !== void 0 ? _f : this.article.attributes.name), h("p", { class: "card-text" }, (_g = translation === null || translation === void 0 ? void 0 : translation.excerpt) !== null && _g !== void 0 ? _g : this.article.attributes.excerpt))));
+            } }, h("div", { class: "ratio ratio-16x9 overflow-hidden" }, h("img", { class: "object-fit-cover", style: { 'min-height': '15rem' }, alt: "Article image", "data-src": (_e = (_d = (_c = (_b = (_a = translation === null || translation === void 0 ? void 0 : translation.image) !== null && _a !== void 0 ? _a : translation === null || translation === void 0 ? void 0 : translation.optimizedListImage) !== null && _b !== void 0 ? _b : translation === null || translation === void 0 ? void 0 : translation.optimizedImage) !== null && _c !== void 0 ? _c : this.article.attributes.image) !== null && _d !== void 0 ? _d : this.article.attributes.optimizedListImage) !== null && _e !== void 0 ? _e : this.article.attributes.optimizedImage }), h("div", { class: "card-img-overlay d-flex justify-content-end" })), h("div", { class: "card-body" }, h("h5", { class: "card-title" }, (_f = translation === null || translation === void 0 ? void 0 : translation.name) !== null && _f !== void 0 ? _f : this.article.attributes.name), h("p", { class: "card-text" }, (_g = translation === null || translation === void 0 ? void 0 : translation.excerpt) !== null && _g !== void 0 ? _g : this.article.attributes.excerpt))));
     }
     static get is() { return "aico-news-list-item"; }
     static get encapsulation() { return "scoped"; }
@@ -110,5 +130,6 @@ export class AicoNewsListItem {
                 }
             }];
     }
+    static get elementRef() { return "thisHtml"; }
 }
 //# sourceMappingURL=aico-news-list-item.js.map

package/dist/collection/components/aico-news-list-item/aico-news-list-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aico-news-list-item.js","sourceRoot":"","sources":["../../../src/components/aico-news-list-item/aico-news-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAQxE~~,MAAM,OAAO,gBAAgB;;;~~4BAEI~~,CAAC;sBAQP,IAAI;;~~IAE7B~~,MAAM;;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;QAC7F,OAAO,CACL,WACE,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE;;gBACZ,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACxC,CAAC;YAED,WAAK,KAAK,EAAC,kCAAkC;gBAC3C,WACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,EAChC,GAAG,EAAC,eAAe,~~EACnB~~,~~GAAG,EACD,~~MAAA,MAAA,MAAA,MAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,mCAClB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,mCAC/B,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,mCAC3B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,mCAC7B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,kBAAkB,mCAC1C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,cAAc,GAExC;gBACF,WAAK,KAAK,EAAC,6CAA6C,GAA0C,CAC9F;YACN,WAAK,KAAK,EAAC,WAAW;gBACpB,UAAI,KAAK,EAAC,YAAY,IAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAM;gBAC/E,SAAG,KAAK,EAAC,WAAW,IAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,mCAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAK,CAC9E,CACF,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { Article } from '../../model/Article';\n\n@Component({\n tag: 'aico-news-list-item',\n styleUrl: 'aico-news-list-item.css',\n scoped: true,\n})\nexport class AicoNewsListItem {\n @Prop() article!: Article;\n @Prop() articleIndex: number = 0;\n @Event() articleClick?: EventEmitter<Article>;\n\n /*\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n render() {\n const translation = this.article.attributes.translations.find(t => t.locale === this.locale);\n return (\n <div\n class=\"card h-100 pe-auto\"\n style={{ cursor: 'pointer' }}\n onClick={() => {\n this.articleClick?.emit(this.article);\n }}\n >\n <div class=\"ratio ratio-16x9 overflow-hidden\">\n <img\n class=\"object-fit-cover\"\n style={{ 'min-height': '15rem' }}\n alt=\"Article image\"\n src={\n translation?.image ??\n translation?.optimizedListImage ??\n translation?.optimizedImage ??\n this.article.attributes.image ??\n this.article.attributes.optimizedListImage ??\n this.article.attributes.optimizedImage\n }\n />\n <div class=\"card-img-overlay d-flex justify-content-end\">{/TODO: set the date top-right?*/}</div>\n </div>\n <div class=\"card-body\">\n <h5 class=\"card-title\">{translation?.name ?? this.article.attributes.name}</h5>\n <p class=\"card-text\">{translation?.excerpt ?? this.article.attributes.excerpt}</p>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"aico-news-list-item.js","sourceRoot":"","sources":["../../../src/components/aico-news-list-item/aico-news-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,gBAAgB;;;4BAII,CAAC;sBAQP,IAAI;;IAI7B,gBAAgB;QACd,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,IAAI,GAAG,EAAE;YACP,IAAI,CAAC,aAAa,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACnE,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;SACjC;IACH,CAAC;IAEO,KAAK,CAAC,cAAc,CAAC,OAAoC;;QAC/D,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;YAC3B,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,EAAE,CAAC;gBACjC,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;gBAClD,IAAI,GAAG,EAAE;oBACP,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;oBACtC,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;iBAC1C;aACF;SACF;IACH,CAAC;IAED,MAAM;;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;QAC7F,OAAO,CACL,WACE,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE;;gBACZ,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACxC,CAAC;YAED,WAAK,KAAK,EAAC,kCAAkC;gBAC3C,WACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,EAChC,GAAG,EAAC,eAAe,cAEjB,MAAA,MAAA,MAAA,MAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,mCAClB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,mCAC/B,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,mCAC3B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,mCAC7B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,kBAAkB,mCAC1C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,cAAc,GAExC;gBACF,WAAK,KAAK,EAAC,6CAA6C,GAA0C,CAC9F;YACN,WAAK,KAAK,EAAC,WAAW;gBACpB,UAAI,KAAK,EAAC,YAAY,IAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAM;gBAC/E,SAAG,KAAK,EAAC,WAAW,IAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,mCAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAK,CAC9E,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Element } from '@stencil/core';\nimport { Article } from '../../model/Article';\n\n@Component({\n tag: 'aico-news-list-item',\n styleUrl: 'aico-news-list-item.css',\n scoped: true,\n})\nexport class AicoNewsListItem {\n @Element() thisHtml!: HTMLElement;\n\n @Prop() article!: Article;\n @Prop() articleIndex: number = 0;\n @Event() articleClick?: EventEmitter<Article>;\n\n /*\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n private imageObserver?: IntersectionObserver;\n\n componentDidLoad() {\n const img = this.thisHtml.querySelector('img');\n if (img) {\n this.imageObserver = new IntersectionObserver(this.onIntersection);\n this.imageObserver.observe(img);\n }\n }\n\n private async onIntersection(entries: IntersectionObserverEntry[]) {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n this.imageObserver?.disconnect();\n const src = entry.target.getAttribute('data-src');\n if (src) {\n entry.target.setAttribute('src', src);\n entry.target.removeAttribute('data-src');\n }\n }\n }\n }\n\n render() {\n const translation = this.article.attributes.translations.find(t => t.locale === this.locale);\n return (\n <div\n class=\"card h-100 pe-auto\"\n style={{ cursor: 'pointer' }}\n onClick={() => {\n this.articleClick?.emit(this.article);\n }}\n >\n <div class=\"ratio ratio-16x9 overflow-hidden\">\n <img\n class=\"object-fit-cover\"\n style={{ 'min-height': '15rem' }}\n alt=\"Article image\"\n data-src={\n translation?.image ??\n translation?.optimizedListImage ??\n translation?.optimizedImage ??\n this.article.attributes.image ??\n this.article.attributes.optimizedListImage ??\n this.article.attributes.optimizedImage\n }\n />\n <div class=\"card-img-overlay d-flex justify-content-end\">{/TODO: set the date top-right?*/}</div>\n </div>\n <div class=\"card-body\">\n <h5 class=\"card-title\">{translation?.name ?? this.article.attributes.name}</h5>\n <p class=\"card-text\">{translation?.excerpt ?? this.article.attributes.excerpt}</p>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/model/Article.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Article.js","sourceRoot":"","sources":["../../src/model/Article.ts"],"names":[],"mappings":"","sourcesContent":["import { Entity } from './Entity';\nimport { NewsCategory } from './NewsCategory';\nimport { NewsTag } from './NewsTag';\nimport { ContentType } from './article/ContentType';\n\nexport type ArticleTranslation = Entity & {\n locale: string;\n name: string;\n description: string;\n excerpt: string;\n image?: string;\n optimizedImage?: string;\n portraitImage?: string;\n optimizedPortraitImage?: string;\n optimizedListImage?: string;\n shouldShowTranslation: boolean;\n};\n\nexport type ArticleContentTranslation = Entity & {\n locale: string;\n text: string;\n};\n\nexport type ArticleContent = Entity & {\n sort?: number;\n containerOrder?: number;\n type?: ContentType;\n contentData: object;\n};\n\nexport type ArticleContentBuilderColumn = Entity & {\n contentContainer: Entity & {\n isSplit?: object;\n contents: ArticleContent[];\n };\n};\n\nexport type ArticleContentBuilderRow = Entity & {\n defaultTextColor?: string;\n promptText?: string;\n order: number;\n isFullWidth: boolean;\n hasBackground: boolean;\n isOnPrompt: boolean;\n shouldMinimizeColumnSpacing: boolean;\n backgroundColor?: string;\n backgroundType?: string;\n backgroundImage?: string;\n backgroundGradientFrom?: string;\n backgroundGradientTo?: string;\n columns: ArticleContentBuilderColumn[];\n};\n\nexport type ArticleContetBuilder = Entity & {\n name: string;\n rows: ArticleContentBuilderRow[];\n};\n\nexport type ArticleAttributes = {\n createdAt: Date;\n updatedAt: Date;\n publishDate: Date;\n endDatePermanentNews?: Date;\n\n newsCategory?: NewsCategory;\n newsCategories?: NewsCategory[];\n newsTags: NewsTag[];\n soccerTeams: object[];\n brands: object[];\n album?: object;\n match?: object;\n\n // content\n pageTitle: string;\n metaDescription?: string;\n urlHandle: string;\n author: string;\n contentBuilder: ArticleContetBuilder;\n\n // flags\n isActive: boolean;\n isSpecialArticle: boolean;\n isTopNews: boolean;\n isFullWidth: boolean;\n showInApp: boolean;\n isPermanent: boolean;\n translations: ArticleTranslation[];\n name: string;\n description: string;\n excerpt: string;\n\n // visuals\n headlineImage?: string;\n videoUrl?: string;\n image?: string;\n optimizedImage?: string;\n portraitImage?: string;\n optimizedPortraitImage?: string;\n optimizedListImage?: string;\n\n // coordinates\n focusXCoordinate?: number;\n focusYCoordinate?: number;\n focusXPercentage?: number;\n focusYPercentage?: number;\n mobileFocusXCoordinate?: number;\n mobileFocusYCoordinate?: number;\n mobileFocusXPercentage?: number;\n mobileFocusYPercentage?: number;\n headlineImageFocusXCoordinate?: number;\n headlineImageFocusYCoordinate?: number;\n headlineImageFocusXPercentage?: number;\n headlineImageFocusYPercentage?: number;\n};\n\nexport type Article = {\n id: string;\n type: string;\n links: {\n self: string;\n };\n attributes: ArticleAttributes;\n};\n"]}
1	+ {"version":3,"file":"Article.js","sourceRoot":"","sources":["../../src/model/Article.ts"],"names":[],"mappings":"","sourcesContent":["import { Entity } from './Entity';\nimport { NewsCategory } from './NewsCategory';\nimport { NewsTag } from './NewsTag';\nimport { ContentType } from './article/ContentType';\n\nexport type ArticleTranslation = Entity & {\n locale: string;\n name: string;\n description: string;\n excerpt: string;\n image?: string;\n optimizedImage?: string;\n portraitImage?: string;\n optimizedPortraitImage?: string;\n optimizedListImage?: string;\n shouldShowTranslation: boolean;\n headlineImage?: string;\n};\n\nexport type ArticleContentTranslation = Entity & {\n locale: string;\n text: string;\n};\n\nexport type ArticleContent = Entity & {\n sort?: number;\n containerOrder?: number;\n type?: ContentType;\n contentData: object;\n};\n\nexport type ArticleContentBuilderColumn = Entity & {\n contentContainer: Entity & {\n isSplit?: object;\n contents: ArticleContent[];\n };\n};\n\nexport type ArticleContentBuilderRow = Entity & {\n defaultTextColor?: string;\n promptText?: string;\n order: number;\n isFullWidth: boolean;\n hasBackground: boolean;\n isOnPrompt: boolean;\n shouldMinimizeColumnSpacing: boolean;\n backgroundColor?: string;\n backgroundType?: string;\n backgroundImage?: string;\n backgroundGradientFrom?: string;\n backgroundGradientTo?: string;\n columns: ArticleContentBuilderColumn[];\n};\n\nexport type ArticleContetBuilder = Entity & {\n name: string;\n rows: ArticleContentBuilderRow[];\n};\n\nexport type ArticleAttributes = {\n createdAt: Date;\n updatedAt: Date;\n publishDate: Date;\n endDatePermanentNews?: Date;\n\n newsCategory?: NewsCategory;\n newsCategories?: NewsCategory[];\n newsTags: NewsTag[];\n soccerTeams: object[];\n brands: object[];\n album?: object;\n match?: object;\n\n // content\n pageTitle: string;\n metaDescription?: string;\n urlHandle: string;\n author: string;\n contentBuilder: ArticleContetBuilder;\n\n // flags\n isActive: boolean;\n isSpecialArticle: boolean;\n isTopNews: boolean;\n isFullWidth: boolean;\n showInApp: boolean;\n isPermanent: boolean;\n translations: ArticleTranslation[];\n name: string;\n description: string;\n excerpt: string;\n\n // visuals\n headlineImage?: string;\n videoUrl?: string;\n image?: string;\n optimizedImage?: string;\n portraitImage?: string;\n optimizedPortraitImage?: string;\n optimizedListImage?: string;\n\n // coordinates\n focusXCoordinate?: number;\n focusYCoordinate?: number;\n focusXPercentage?: number;\n focusYPercentage?: number;\n mobileFocusXCoordinate?: number;\n mobileFocusYCoordinate?: number;\n mobileFocusXPercentage?: number;\n mobileFocusYPercentage?: number;\n headlineImageFocusXCoordinate?: number;\n headlineImageFocusYCoordinate?: number;\n headlineImageFocusXPercentage?: number;\n headlineImageFocusYPercentage?: number;\n};\n\nexport type Article = {\n id: string;\n type: string;\n links: {\n self: string;\n };\n attributes: ArticleAttributes;\n};\n"]}

package/dist/components/aico-article-detail2.js CHANGED Viewed

@@ -69,12 +69,15 @@ const AicoArticleDetail = /*@__PURE__*/ proxyCustomElement(class AicoArticleDeta
         this.hideCategoryAndTags = false;
     }
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const translation = (_a = this.article.attributes.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
         const category = (_c = (_b = this.article.attributes.newsCategory) === null || _b === void 0 ? void 0 : _b.translations.find(translation => translation.locale === this.locale)) !== null && _c !== void 0 ? _c : null;
         const articleDate = new Date(this.article.attributes.publishDate);
         const content = this.article.attributes.contentBuilder.rows.sort((a, b) => a.order - b.order).map((row, index) => this.mapRowContent(row, index));
-        return (h(Host, null, h("figure", null, h("blockquote", { class: "blockquote" }, h("h2", { class: "text-uppercase" }, (_d = translation === null || translation === void 0 ? void 0 : translation.name) !== null && _d !== void 0 ? _d : this.article.attributes.name)), h(ConditionalRender, { condition: !this.hideDateAndAuthor }, h("figcaption", { class: "blockquote-footer mb-1" }, articleDate.toLocaleDateString('en-US', this.dateOptions), " by ", h("cite", { title: "Author" }, this.article.attributes.author))), h(ConditionalRender, { condition: !this.hideCategoryAndTags && !strIsNullOrEmptyOrWhitespace(category === null || category === void 0 ? void 0 : category.webName) }, h("span", { class: "badge bg-info text-dark" }, category === null || category === void 0 ? void 0 : category.webName))), h("div", { class: "content-wrapper" }, content), h(ConditionalRender, { condition: !this.hideCategoryAndTags }, this.article.attributes.newsTags.map(tag => {
+        const headlineFocusX = this.article.attributes.headlineImageFocusXPercentage ? `${this.article.attributes.headlineImageFocusXPercentage}%` : 'center';
+        const headlineFocusY = this.article.attributes.headlineImageFocusYPercentage ? `${this.article.attributes.headlineImageFocusYPercentage}%` : 'center';
+        const headlineImage = (_d = translation === null || translation === void 0 ? void 0 : translation.headlineImage) !== null && _d !== void 0 ? _d : this.article.attributes.headlineImage;
+        return (h(Host, null, h("figure", null, h("blockquote", { class: "blockquote" }, h("h2", { class: "text-uppercase" }, (_e = translation === null || translation === void 0 ? void 0 : translation.name) !== null && _e !== void 0 ? _e : this.article.attributes.name)), headlineImage && h("img", { class: "img-fluid rounded object-fit-cover", style: { 'object-position': `${headlineFocusX} ${headlineFocusY}` }, alt: "Headline image", src: headlineImage }), h(ConditionalRender, { condition: !this.hideDateAndAuthor }, h("figcaption", { class: "blockquote-footer mb-1" }, articleDate.toLocaleDateString('en-US', this.dateOptions), " by ", h("cite", { title: "Author" }, this.article.attributes.author))), h(ConditionalRender, { condition: !this.hideCategoryAndTags && !strIsNullOrEmptyOrWhitespace(category === null || category === void 0 ? void 0 : category.webName) }, h("span", { class: "badge bg-info text-dark" }, category === null || category === void 0 ? void 0 : category.webName))), h("div", { class: "content-wrapper" }, content), h(ConditionalRender, { condition: !this.hideCategoryAndTags }, this.article.attributes.newsTags.map(tag => {
             var _a;
             const translation = (_a = tag.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
             return (h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(translation === null || translation === void 0 ? void 0 : translation.webName) }, h("span", { class: "badge bg-light text-dark" }, translation.webName)));

package/dist/components/aico-article-detail2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"aico-article-detail2.js","mappings":"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","names":[],"sources":["src/model/article/ContentType.ts","src/components/aico-article-detail/aico-article-detail.css?tag=aico-article-detail&encapsulation=scoped","src/components/aico-article-detail/aico-article-detail.tsx"],"sourcesContent":["export enum ContentType {\n BULLET = 'BULLET',\n TEXT = 'TEXT',\n VIDEO = 'VIDEO',\n TABLE = 'TABLE',\n HEADING = 'HEADING',\n TITLE = 'TITLE',\n CONTENT_CARD = 'CONTENT_CARD',\n TESTIMONIAL = 'TESTIMONIAL',\n PRODUCT = 'PRODUCT',\n NEWS = 'NEWS',\n ASKING = 'ASKING',\n AGENDA = 'AGENDA',\n LIST_ASKING = 'LIST_ASKING',\n LIST_AGENDA = 'LIST_AGENDA',\n CRM = 'CRM',\n B2B = 'B2B',\n FORM_BUILDER = 'FORM_BUILDER',\n BLOCK_QUOTE = 'BLOCK_QUOTE',\n FAQ = 'FAQ',\n COURSE = 'COURSE',\n DOCUMENT = 'DOCUMENT',\n LINK = 'LINK',\n HTML = 'HTML',\n DIVIDER = 'DIVIDER',\n COLLECTION = 'COLLECTION',\n CAROUSEL = 'CAROUSEL',\n PAGE = 'PAGE',\n ALBUM = 'ALBUM',\n UPLOAD = 'UPLOAD',\n}\n","@import '../../../node_modules/bootstrap/dist/css/bootstrap.css';\n\n:host,\n:host::before,\n:host::after {\n box-sizing: border-box;\n}\n\n:host {\n font-family: var(--bs-body-font-family);\n font-size: var(--bs-body-font-size);\n font-weight: var(--bs-body-font-weight);\n line-height: var(--bs-body-line-height);\n color: var(--bs-body-color);\n text-align: var(--bs-body-text-align);\n -webkit-text-size-adjust: 100%;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { ContentType } from '../../model/article/ContentType';\nimport type { Article, ArticleContent, ArticleContentBuilderColumn, ArticleContentBuilderRow } from '../../model/Article';\nimport type { HtmlContent } from '../../model/article/content/HtmlContent';\nimport type { AlbumContent } from '../../model/article/content/AlbumContent';\nimport type { TitleContent } from '../../model/article/content/TitleContent';\nimport type { BlockQuoteContent } from '../../model/article/content/BlockQuoteContent';\nimport type { BulletContent } from '../../model/article/content/BulletContent';\nimport type { CardContent } from '../../model/article/content/CardContent';\nimport type { CarouselContent } from '../../model/article/content/CarouselContent';\nimport type { DividerContent } from '../../model/article/content/DividerContent';\nimport type { DocumentContent } from '../../model/article/content/DocumentContent';\nimport type { HeadingContent } from '../../model/article/content/HeadingContent';\nimport type { LinkContent } from '../../model/article/content/LinkContent';\nimport type { TableContent } from '../../model/article/content/TableContet';\nimport type { TestimonialContent } from '../../model/article/content/TestimonialContent';\nimport type { TextContent } from '../../model/article/content/TextContent';\nimport type { VideoContent } from '../../model/article/content/VideoContent';\nimport type { AskingContent } from '../../model/article/content/AskingContent';\nimport type { FaqContent } from '../../model/article/content/FaqContent';\nimport type { NewsContent } from '../../model/article/content/NewsContent';\nimport type { PageContent } from '../../model/article/content/PageContent';\nimport type { UploadContent } from '../../model/article/content/UploadContent';\nimport ConditionalRender from '../../utils/ConditionalRender';\nimport { strIsNullOrEmptyOrWhitespace } from '../../utils/utils';\n\n@Component({\n tag: 'aico-article-detail',\n styleUrl: 'aico-article-detail.css',\n scoped: true,\n})\nexport class AicoArticleDetail {\n @Prop() article!: Article;\n\n /*\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n /\n Determines if the article date and author are shown or not.\n /\n @Prop() hideDateAndAuthor: boolean = false;\n\n /\n Determines if the article category and tags are shown or not.\n */\n @Prop() hideCategoryAndTags: boolean = false;\n\n private readonly dateOptions: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };\n\n render() {\n const translation = this.article.attributes.translations.find(translation => translation.locale === this.locale) ?? null;\n const category = this.article.attributes.newsCategory?.translations.find(translation => translation.locale === this.locale) ?? null;\n const articleDate = new Date(this.article.attributes.publishDate);\n const content = this.article.attributes.contentBuilder.rows.sort((a, b) => a.order - b.order).map((row, index) => this.mapRowContent(row, index));\n return (\n <Host>\n <figure>\n <blockquote class=\"blockquote\">\n <h2 class=\"text-uppercase\">{translation?.name ?? this.article.attributes.name}</h2>\n </blockquote>\n <ConditionalRender condition={!this.hideDateAndAuthor}>\n <figcaption class=\"blockquote-footer mb-1\">\n {articleDate.toLocaleDateString('en-US', this.dateOptions)} by <cite title=\"Author\">{this.article.attributes.author}</cite>\n </figcaption>\n </ConditionalRender>\n <ConditionalRender condition={!this.hideCategoryAndTags && !strIsNullOrEmptyOrWhitespace(category?.webName)}>\n <span class=\"badge bg-info text-dark\">{category?.webName}</span>\n </ConditionalRender>\n </figure>\n <div class=\"content-wrapper\">{content}</div>\n <ConditionalRender condition={!this.hideCategoryAndTags}>\n {this.article.attributes.newsTags.map(tag => {\n const translation = tag.translations.find(translation => translation.locale === this.locale) ?? null;\n return (\n <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(translation?.webName)}>\n <span class=\"badge bg-light text-dark\">{translation!.webName}</span>\n </ConditionalRender>\n );\n })}\n </ConditionalRender>\n </Host>\n );\n }\n\n private mapRowContent(row: ArticleContentBuilderRow, index: number) {\n const rowContent = row.columns.map((column, columnIndex) => this.mapColumnContent(column, columnIndex));\n return <div class={`content-row content-row-index-${index}`}>{rowContent}</div>;\n }\n\n private mapColumnContent(column: ArticleContentBuilderColumn, index: number) {\n const columnContent = column.contentContainer.contents.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0)).map((content, contentIndex) => this.mapContent(content, contentIndex));\n return <div class={`content-column content-column-index-${index}`}>{columnContent}</div>;\n }\n\n private mapContent(content: ArticleContent, index: number) {\n return <div class={`content-data-wrapper content-data-wrapper-index-${index}`}>{this.mapContentData(content.type, content.contentData)}</div>;\n }\n\n private mapContentData(contentType: ContentType \| undefined, content: object) {\n switch (contentType) {\n case ContentType.ALBUM:\n return <aico-album-content content={content as AlbumContent} />;\n\n case ContentType.ASKING:\n return <aico-asking-content content={content as AskingContent} locale={this.locale} />;\n\n case ContentType.BLOCK_QUOTE:\n return <aico-block-quote-content content={content as BlockQuoteContent} locale={this.locale} />;\n\n case ContentType.BULLET:\n return <aico-bullet-content content={content as BulletContent} locale={this.locale} />;\n\n case ContentType.CAROUSEL:\n return <aico-carousel-content content={content as CarouselContent} locale={this.locale} />;\n\n case ContentType.CONTENT_CARD:\n return <aico-content-card-content content={content as CardContent} locale={this.locale} />;\n\n case ContentType.DIVIDER:\n return <aico-divider-content content={content as DividerContent} locale={this.locale} />;\n\n case ContentType.DOCUMENT:\n return <aico-document-content content={content as DocumentContent} locale={this.locale} />;\n\n case ContentType.FAQ:\n return <aico-faq-content content={content as FaqContent} locale={this.locale} />;\n\n case ContentType.HEADING:\n return <aico-heading-content content={content as HeadingContent} locale={this.locale} />;\n\n case ContentType.HTML:\n return <aico-html-content content={content as HtmlContent} locale={this.locale} />;\n\n case ContentType.LINK:\n return <aico-link-content content={content as LinkContent} locale={this.locale} />;\n\n case ContentType.NEWS:\n return <aico-news-content content={content as NewsContent} />;\n\n case ContentType.PAGE:\n return <aico-page-content content={content as PageContent} locale={this.locale} />;\n\n case ContentType.TABLE:\n return <aico-table-content content={content as TableContent} locale={this.locale} />;\n\n case ContentType.TESTIMONIAL:\n return <aico-testimonial-content content={content as TestimonialContent} />;\n\n case ContentType.TEXT:\n return <aico-text-content content={content as TextContent} locale={this.locale} />;\n\n case ContentType.TITLE:\n return <aico-title-content content={content as TitleContent} locale={this.locale} />;\n\n case ContentType.UPLOAD:\n return <aico-upload-content content={content as UploadContent} locale={this.locale} />;\n\n case ContentType.VIDEO:\n return <aico-video-content content={content as VideoContent} locale={this.locale} />;\n\n case ContentType.PRODUCT:\n case ContentType.AGENDA:\n case ContentType.LIST_ASKING:\n case ContentType.LIST_AGENDA:\n case ContentType.CRM:\n case ContentType.B2B:\n case ContentType.FORM_BUILDER:\n case ContentType.COURSE:\n case ContentType.COLLECTION:\n default:\n return <div class=\"content-data content-data-not-handled\">Content type not handled.</div>;\n }\n }\n}\n"],"version":3}
1	+ {"file":"aico-article-detail2.js","mappings":"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","names":[],"sources":["src/model/article/ContentType.ts","src/components/aico-article-detail/aico-article-detail.css?tag=aico-article-detail&encapsulation=scoped","src/components/aico-article-detail/aico-article-detail.tsx"],"sourcesContent":["export enum ContentType {\n BULLET = 'BULLET',\n TEXT = 'TEXT',\n VIDEO = 'VIDEO',\n TABLE = 'TABLE',\n HEADING = 'HEADING',\n TITLE = 'TITLE',\n CONTENT_CARD = 'CONTENT_CARD',\n TESTIMONIAL = 'TESTIMONIAL',\n PRODUCT = 'PRODUCT',\n NEWS = 'NEWS',\n ASKING = 'ASKING',\n AGENDA = 'AGENDA',\n LIST_ASKING = 'LIST_ASKING',\n LIST_AGENDA = 'LIST_AGENDA',\n CRM = 'CRM',\n B2B = 'B2B',\n FORM_BUILDER = 'FORM_BUILDER',\n BLOCK_QUOTE = 'BLOCK_QUOTE',\n FAQ = 'FAQ',\n COURSE = 'COURSE',\n DOCUMENT = 'DOCUMENT',\n LINK = 'LINK',\n HTML = 'HTML',\n DIVIDER = 'DIVIDER',\n COLLECTION = 'COLLECTION',\n CAROUSEL = 'CAROUSEL',\n PAGE = 'PAGE',\n ALBUM = 'ALBUM',\n UPLOAD = 'UPLOAD',\n}\n","@import '../../../node_modules/bootstrap/dist/css/bootstrap.css';\n\n:host,\n:host::before,\n:host::after {\n box-sizing: border-box;\n}\n\n:host {\n font-family: var(--bs-body-font-family);\n font-size: var(--bs-body-font-size);\n font-weight: var(--bs-body-font-weight);\n line-height: var(--bs-body-line-height);\n color: var(--bs-body-color);\n text-align: var(--bs-body-text-align);\n -webkit-text-size-adjust: 100%;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { ContentType } from '../../model/article/ContentType';\nimport type { Article, ArticleContent, ArticleContentBuilderColumn, ArticleContentBuilderRow } from '../../model/Article';\nimport type { HtmlContent } from '../../model/article/content/HtmlContent';\nimport type { AlbumContent } from '../../model/article/content/AlbumContent';\nimport type { TitleContent } from '../../model/article/content/TitleContent';\nimport type { BlockQuoteContent } from '../../model/article/content/BlockQuoteContent';\nimport type { BulletContent } from '../../model/article/content/BulletContent';\nimport type { CardContent } from '../../model/article/content/CardContent';\nimport type { CarouselContent } from '../../model/article/content/CarouselContent';\nimport type { DividerContent } from '../../model/article/content/DividerContent';\nimport type { DocumentContent } from '../../model/article/content/DocumentContent';\nimport type { HeadingContent } from '../../model/article/content/HeadingContent';\nimport type { LinkContent } from '../../model/article/content/LinkContent';\nimport type { TableContent } from '../../model/article/content/TableContet';\nimport type { TestimonialContent } from '../../model/article/content/TestimonialContent';\nimport type { TextContent } from '../../model/article/content/TextContent';\nimport type { VideoContent } from '../../model/article/content/VideoContent';\nimport type { AskingContent } from '../../model/article/content/AskingContent';\nimport type { FaqContent } from '../../model/article/content/FaqContent';\nimport type { NewsContent } from '../../model/article/content/NewsContent';\nimport type { PageContent } from '../../model/article/content/PageContent';\nimport type { UploadContent } from '../../model/article/content/UploadContent';\nimport ConditionalRender from '../../utils/ConditionalRender';\nimport { strIsNullOrEmptyOrWhitespace } from '../../utils/utils';\n\n@Component({\n tag: 'aico-article-detail',\n styleUrl: 'aico-article-detail.css',\n scoped: true,\n})\nexport class AicoArticleDetail {\n @Prop() article!: Article;\n\n /*\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n /\n Determines if the article date and author are shown or not.\n /\n @Prop() hideDateAndAuthor: boolean = false;\n\n /\n Determines if the article category and tags are shown or not.\n */\n @Prop() hideCategoryAndTags: boolean = false;\n\n private readonly dateOptions: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };\n\n render() {\n const translation = this.article.attributes.translations.find(translation => translation.locale === this.locale) ?? null;\n const category = this.article.attributes.newsCategory?.translations.find(translation => translation.locale === this.locale) ?? null;\n const articleDate = new Date(this.article.attributes.publishDate);\n const content = this.article.attributes.contentBuilder.rows.sort((a, b) => a.order - b.order).map((row, index) => this.mapRowContent(row, index));\n\n const headlineFocusX = this.article.attributes.headlineImageFocusXPercentage ? `${this.article.attributes.headlineImageFocusXPercentage}%` : 'center';\n const headlineFocusY = this.article.attributes.headlineImageFocusYPercentage ? `${this.article.attributes.headlineImageFocusYPercentage}%` : 'center';\n const headlineImage = translation?.headlineImage ?? this.article.attributes.headlineImage;\n\n return (\n <Host>\n <figure>\n <blockquote class=\"blockquote\">\n <h2 class=\"text-uppercase\">{translation?.name ?? this.article.attributes.name}</h2>\n </blockquote>\n {headlineImage && <img class=\"img-fluid rounded object-fit-cover\" style={{ 'object-position': `${headlineFocusX} ${headlineFocusY}` }} alt=\"Headline image\" src={headlineImage} />}\n <ConditionalRender condition={!this.hideDateAndAuthor}>\n <figcaption class=\"blockquote-footer mb-1\">\n {articleDate.toLocaleDateString('en-US', this.dateOptions)} by <cite title=\"Author\">{this.article.attributes.author}</cite>\n </figcaption>\n </ConditionalRender>\n <ConditionalRender condition={!this.hideCategoryAndTags && !strIsNullOrEmptyOrWhitespace(category?.webName)}>\n <span class=\"badge bg-info text-dark\">{category?.webName}</span>\n </ConditionalRender>\n </figure>\n <div class=\"content-wrapper\">{content}</div>\n <ConditionalRender condition={!this.hideCategoryAndTags}>\n {this.article.attributes.newsTags.map(tag => {\n const translation = tag.translations.find(translation => translation.locale === this.locale) ?? null;\n return (\n <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(translation?.webName)}>\n <span class=\"badge bg-light text-dark\">{translation!.webName}</span>\n </ConditionalRender>\n );\n })}\n </ConditionalRender>\n </Host>\n );\n }\n\n private mapRowContent(row: ArticleContentBuilderRow, index: number) {\n const rowContent = row.columns.map((column, columnIndex) => this.mapColumnContent(column, columnIndex));\n return <div class={`content-row content-row-index-${index}`}>{rowContent}</div>;\n }\n\n private mapColumnContent(column: ArticleContentBuilderColumn, index: number) {\n const columnContent = column.contentContainer.contents.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0)).map((content, contentIndex) => this.mapContent(content, contentIndex));\n return <div class={`content-column content-column-index-${index}`}>{columnContent}</div>;\n }\n\n private mapContent(content: ArticleContent, index: number) {\n return <div class={`content-data-wrapper content-data-wrapper-index-${index}`}>{this.mapContentData(content.type, content.contentData)}</div>;\n }\n\n private mapContentData(contentType: ContentType \| undefined, content: object) {\n switch (contentType) {\n case ContentType.ALBUM:\n return <aico-album-content content={content as AlbumContent} />;\n\n case ContentType.ASKING:\n return <aico-asking-content content={content as AskingContent} locale={this.locale} />;\n\n case ContentType.BLOCK_QUOTE:\n return <aico-block-quote-content content={content as BlockQuoteContent} locale={this.locale} />;\n\n case ContentType.BULLET:\n return <aico-bullet-content content={content as BulletContent} locale={this.locale} />;\n\n case ContentType.CAROUSEL:\n return <aico-carousel-content content={content as CarouselContent} locale={this.locale} />;\n\n case ContentType.CONTENT_CARD:\n return <aico-content-card-content content={content as CardContent} locale={this.locale} />;\n\n case ContentType.DIVIDER:\n return <aico-divider-content content={content as DividerContent} locale={this.locale} />;\n\n case ContentType.DOCUMENT:\n return <aico-document-content content={content as DocumentContent} locale={this.locale} />;\n\n case ContentType.FAQ:\n return <aico-faq-content content={content as FaqContent} locale={this.locale} />;\n\n case ContentType.HEADING:\n return <aico-heading-content content={content as HeadingContent} locale={this.locale} />;\n\n case ContentType.HTML:\n return <aico-html-content content={content as HtmlContent} locale={this.locale} />;\n\n case ContentType.LINK:\n return <aico-link-content content={content as LinkContent} locale={this.locale} />;\n\n case ContentType.NEWS:\n return <aico-news-content content={content as NewsContent} />;\n\n case ContentType.PAGE:\n return <aico-page-content content={content as PageContent} locale={this.locale} />;\n\n case ContentType.TABLE:\n return <aico-table-content content={content as TableContent} locale={this.locale} />;\n\n case ContentType.TESTIMONIAL:\n return <aico-testimonial-content content={content as TestimonialContent} />;\n\n case ContentType.TEXT:\n return <aico-text-content content={content as TextContent} locale={this.locale} />;\n\n case ContentType.TITLE:\n return <aico-title-content content={content as TitleContent} locale={this.locale} />;\n\n case ContentType.UPLOAD:\n return <aico-upload-content content={content as UploadContent} locale={this.locale} />;\n\n case ContentType.VIDEO:\n return <aico-video-content content={content as VideoContent} locale={this.locale} />;\n\n case ContentType.PRODUCT:\n case ContentType.AGENDA:\n case ContentType.LIST_ASKING:\n case ContentType.LIST_AGENDA:\n case ContentType.CRM:\n case ContentType.B2B:\n case ContentType.FORM_BUILDER:\n case ContentType.COURSE:\n case ContentType.COLLECTION:\n default:\n return <div class=\"content-data content-data-not-handled\">Content type not handled.</div>;\n }\n }\n}\n"],"version":3}

package/dist/components/aico-news-list-item2.js CHANGED Viewed

@@ -11,14 +11,35 @@ const AicoNewsListItem = /*@__PURE__*/ proxyCustomElement(class AicoNewsListItem
         this.articleIndex = 0;
         this.locale = 'de';
     }
+    componentDidLoad() {
+        const img = this.thisHtml.querySelector('img');
+        if (img) {
+            this.imageObserver = new IntersectionObserver(this.onIntersection);
+            this.imageObserver.observe(img);
+        }
+    }
+    async onIntersection(entries) {
+        var _a;
+        for (const entry of entries) {
+            if (entry.isIntersecting) {
+                (_a = this.imageObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                const src = entry.target.getAttribute('data-src');
+                if (src) {
+                    entry.target.setAttribute('src', src);
+                    entry.target.removeAttribute('data-src');
+                }
+            }
+        }
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         const translation = this.article.attributes.translations.find(t => t.locale === this.locale);
         return (h("div", { class: "card h-100 pe-auto", style: { cursor: 'pointer' }, onClick: () => {
                 var _a;
                 (_a = this.articleClick) === null || _a === void 0 ? void 0 : _a.emit(this.article);
-            } }, h("div", { class: "ratio ratio-16x9 overflow-hidden" }, h("img", { class: "object-fit-cover", style: { 'min-height': '15rem' }, alt: "Article image", src: (_e = (_d = (_c = (_b = (_a = translation === null || translation === void 0 ? void 0 : translation.image) !== null && _a !== void 0 ? _a : translation === null || translation === void 0 ? void 0 : translation.optimizedListImage) !== null && _b !== void 0 ? _b : translation === null || translation === void 0 ? void 0 : translation.optimizedImage) !== null && _c !== void 0 ? _c : this.article.attributes.image) !== null && _d !== void 0 ? _d : this.article.attributes.optimizedListImage) !== null && _e !== void 0 ? _e : this.article.attributes.optimizedImage }), h("div", { class: "card-img-overlay d-flex justify-content-end" })), h("div", { class: "card-body" }, h("h5", { class: "card-title" }, (_f = translation === null || translation === void 0 ? void 0 : translation.name) !== null && _f !== void 0 ? _f : this.article.attributes.name), h("p", { class: "card-text" }, (_g = translation === null || translation === void 0 ? void 0 : translation.excerpt) !== null && _g !== void 0 ? _g : this.article.attributes.excerpt))));
+            } }, h("div", { class: "ratio ratio-16x9 overflow-hidden" }, h("img", { class: "object-fit-cover", style: { 'min-height': '15rem' }, alt: "Article image", "data-src": (_e = (_d = (_c = (_b = (_a = translation === null || translation === void 0 ? void 0 : translation.image) !== null && _a !== void 0 ? _a : translation === null || translation === void 0 ? void 0 : translation.optimizedListImage) !== null && _b !== void 0 ? _b : translation === null || translation === void 0 ? void 0 : translation.optimizedImage) !== null && _c !== void 0 ? _c : this.article.attributes.image) !== null && _d !== void 0 ? _d : this.article.attributes.optimizedListImage) !== null && _e !== void 0 ? _e : this.article.attributes.optimizedImage }), h("div", { class: "card-img-overlay d-flex justify-content-end" })), h("div", { class: "card-body" }, h("h5", { class: "card-title" }, (_f = translation === null || translation === void 0 ? void 0 : translation.name) !== null && _f !== void 0 ? _f : this.article.attributes.name), h("p", { class: "card-text" }, (_g = translation === null || translation === void 0 ? void 0 : translation.excerpt) !== null && _g !== void 0 ? _g : this.article.attributes.excerpt))));
     }
+    get thisHtml() { return this; }
     static get style() { return aicoNewsListItemCss; }
 }, [2, "aico-news-list-item", {
         "article": [16],

package/dist/components/aico-news-list-item2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"aico-news-list-item2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,2xwTAA2xwT;;MCQ1ywT,gBAAgB;;;;;;~~4BAEI~~,CAAC;sBAQP,IAAI;;~~IAE7B~~,MAAM;;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;QAC7F,QACE,WACE,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5B,OAAO,EAAE;;gBACP,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aACvC,IAED,WAAK,KAAK,EAAC,kCAAkC,IAC3C,WACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,EAChC,GAAG,EAAC,eAAe,~~EACnB~~,~~GAAG,EACD,~~MAAA,MAAA,MAAA,MAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,mCAClB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,mCAC/B,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,mCAC3B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,mCAC7B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,kBAAkB,mCAC1C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,cAAc,GAExC,EACF,WAAK,KAAK,EAAC,6CAA6C,GAA0C,CAC9F,EACN,WAAK,KAAK,EAAC,WAAW,IACpB,UAAI,KAAK,EAAC,YAAY,IAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAM,EAC/E,SAAG,KAAK,EAAC,WAAW,IAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,mCAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAK,CAC9E,CACF,EACN;KACH~~;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/aico-news-list-item/aico-news-list-item.css?tag=aico-news-list-item&encapsulation=scoped","src/components/aico-news-list-item/aico-news-list-item.tsx"],"sourcesContent":["@import '../../../node_modules/bootstrap/dist/css/bootstrap.css';\n\n:host,\n:host::before,\n:host::after {\n box-sizing: border-box;\n}\n\n:host {\n font-family: var(--bs-body-font-family);\n font-size: var(--bs-body-font-size);\n font-weight: var(--bs-body-font-weight);\n line-height: var(--bs-body-line-height);\n color: var(--bs-body-color);\n text-align: var(--bs-body-text-align);\n -webkit-text-size-adjust: 100%;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { Article } from '../../model/Article';\n\n@Component({\n tag: 'aico-news-list-item',\n styleUrl: 'aico-news-list-item.css',\n scoped: true,\n})\nexport class AicoNewsListItem {\n @Prop() article!: Article;\n @Prop() articleIndex: number = 0;\n @Event() articleClick?: EventEmitter<Article>;\n\n /*\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n render() {\n const translation = this.article.attributes.translations.find(t => t.locale === this.locale);\n return (\n <div\n class=\"card h-100 pe-auto\"\n style={{ cursor: 'pointer' }}\n onClick={() => {\n this.articleClick?.emit(this.article);\n }}\n >\n <div class=\"ratio ratio-16x9 overflow-hidden\">\n <img\n class=\"object-fit-cover\"\n style={{ 'min-height': '15rem' }}\n alt=\"Article image\"\n src={\n translation?.image ??\n translation?.optimizedListImage ??\n translation?.optimizedImage ??\n this.article.attributes.image ??\n this.article.attributes.optimizedListImage ??\n this.article.attributes.optimizedImage\n }\n />\n <div class=\"card-img-overlay d-flex justify-content-end\">{/TODO: set the date top-right?*/}</div>\n </div>\n <div class=\"card-body\">\n <h5 class=\"card-title\">{translation?.name ?? this.article.attributes.name}</h5>\n <p class=\"card-text\">{translation?.excerpt ?? this.article.attributes.excerpt}</p>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"aico-news-list-item2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,2xwTAA2xwT;;MCQ1ywT,gBAAgB;;;;;;4BAII,CAAC;sBAQP,IAAI;;IAI7B,gBAAgB;QACd,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,IAAI,GAAG,EAAE;YACP,IAAI,CAAC,aAAa,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACnE,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;SACjC;KACF;IAEO,MAAM,cAAc,CAAC,OAAoC;;QAC/D,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;YAC3B,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,EAAE,CAAC;gBACjC,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;gBAClD,IAAI,GAAG,EAAE;oBACP,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;oBACtC,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;iBAC1C;aACF;SACF;KACF;IAED,MAAM;;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;QAC7F,QACE,WACE,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5B,OAAO,EAAE;;gBACP,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aACvC,IAED,WAAK,KAAK,EAAC,kCAAkC,IAC3C,WACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,EAChC,GAAG,EAAC,eAAe,cAEjB,MAAA,MAAA,MAAA,MAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,mCAClB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,mCAC/B,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,mCAC3B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,mCAC7B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,kBAAkB,mCAC1C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,cAAc,GAExC,EACF,WAAK,KAAK,EAAC,6CAA6C,GAA0C,CAC9F,EACN,WAAK,KAAK,EAAC,WAAW,IACpB,UAAI,KAAK,EAAC,YAAY,IAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAM,EAC/E,SAAG,KAAK,EAAC,WAAW,IAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,mCAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAK,CAC9E,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/aico-news-list-item/aico-news-list-item.css?tag=aico-news-list-item&encapsulation=scoped","src/components/aico-news-list-item/aico-news-list-item.tsx"],"sourcesContent":["@import '../../../node_modules/bootstrap/dist/css/bootstrap.css';\n\n:host,\n:host::before,\n:host::after {\n box-sizing: border-box;\n}\n\n:host {\n font-family: var(--bs-body-font-family);\n font-size: var(--bs-body-font-size);\n font-weight: var(--bs-body-font-weight);\n line-height: var(--bs-body-line-height);\n color: var(--bs-body-color);\n text-align: var(--bs-body-text-align);\n -webkit-text-size-adjust: 100%;\n}\n","import { Component, Prop, Event, EventEmitter, h, Element } from '@stencil/core';\nimport { Article } from '../../model/Article';\n\n@Component({\n tag: 'aico-news-list-item',\n styleUrl: 'aico-news-list-item.css',\n scoped: true,\n})\nexport class AicoNewsListItem {\n @Element() thisHtml!: HTMLElement;\n\n @Prop() article!: Article;\n @Prop() articleIndex: number = 0;\n @Event() articleClick?: EventEmitter<Article>;\n\n /*\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n private imageObserver?: IntersectionObserver;\n\n componentDidLoad() {\n const img = this.thisHtml.querySelector('img');\n if (img) {\n this.imageObserver = new IntersectionObserver(this.onIntersection);\n this.imageObserver.observe(img);\n }\n }\n\n private async onIntersection(entries: IntersectionObserverEntry[]) {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n this.imageObserver?.disconnect();\n const src = entry.target.getAttribute('data-src');\n if (src) {\n entry.target.setAttribute('src', src);\n entry.target.removeAttribute('data-src');\n }\n }\n }\n }\n\n render() {\n const translation = this.article.attributes.translations.find(t => t.locale === this.locale);\n return (\n <div\n class=\"card h-100 pe-auto\"\n style={{ cursor: 'pointer' }}\n onClick={() => {\n this.articleClick?.emit(this.article);\n }}\n >\n <div class=\"ratio ratio-16x9 overflow-hidden\">\n <img\n class=\"object-fit-cover\"\n style={{ 'min-height': '15rem' }}\n alt=\"Article image\"\n data-src={\n translation?.image ??\n translation?.optimizedListImage ??\n translation?.optimizedImage ??\n this.article.attributes.image ??\n this.article.attributes.optimizedListImage ??\n this.article.attributes.optimizedImage\n }\n />\n <div class=\"card-img-overlay d-flex justify-content-end\">{/TODO: set the date top-right?*/}</div>\n </div>\n <div class=\"card-body\">\n <h5 class=\"card-title\">{translation?.name ?? this.article.attributes.name}</h5>\n <p class=\"card-text\">{translation?.excerpt ?? this.article.attributes.excerpt}</p>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/aico-news-list.js CHANGED Viewed

@@ -50,7 +50,7 @@ const AicoNewsList$1 = /*@__PURE__*/ proxyCustomElement(class AicoNewsList exten
     render() {
         var _a, _b, _c;
         return (h(Host, null, h("div", { class: "newslist-grid-container mb-4" }, (_a = this.newsResponse) === null || _a === void 0 ? void 0 : _a.data.filter(article => !article.attributes.isTopNews).map((article, articleIndex) => {
-            return (h("div", { class: "col" }, h("aico-news-list-item", { article: article, articleIndex: articleIndex, onArticleClick: e => {
+            return (h("div", { key: article.id, class: "col" }, h("aico-news-list-item", { article: article, articleIndex: articleIndex, onArticleClick: e => {
                     var _a;
                     (_a = this.articleClick) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
                     e.stopPropagation();

package/dist/components/aico-news-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"aico-news-list.js","mappings":"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","names":["AicoNewsList"],"sources":["src/components/aico-news-list/aico-news-list.css?tag=aico-news-list&encapsulation=scoped","src/components/aico-news-list/aico-news-list.tsx"],"sourcesContent":["@import '../../../node_modules/bootstrap/dist/css/bootstrap.css';\n\n:host,\n:host::before,\n:host::after {\n box-sizing: border-box;\n}\n\n:host {\n font-family: var(--bs-body-font-family);\n font-size: var(--bs-body-font-size);\n font-weight: var(--bs-body-font-weight);\n line-height: var(--bs-body-line-height);\n color: var(--bs-body-color);\n text-align: var(--bs-body-text-align);\n -webkit-text-size-adjust: 100%;\n}\n\n.newslist-grid-container {\n display: grid;\n grid-gap: 24px;\n grid-auto-flow: dense;\n}\n\n.row-span-2 {\n grid-row-end: span 2;\n}\n\n@media (min-width: 768px) {\n .newslist-grid-container {\n grid-template-columns: repeat(2, 1fr);\n }\n .col-span-md-2 {\n grid-column-end: span 2;\n }\n}\n\n@media (min-width: 992px) {\n .newslist-grid-container {\n grid-template-columns: repeat(4, 1fr);\n }\n}\n\n@media (max-width: 767px) {\n .newslist-grid-container {\n grid-auto-rows: 1fr;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { fetchNewsArticles, splitByComma } from '../../utils/utils';\nimport { NewsResponse } from '../../model/NewsResponse';\nimport { AicoApiRequestInfo } from '../../model/AicoApiRequestInfo';\nimport { Article } from '../../model/Article';\n\n@Component({\n tag: 'aico-news-list',\n styleUrl: 'aico-news-list.css',\n scoped: true,\n})\nexport class AicoNewsList {\n @State() newsResponse?: NewsResponse;\n\n @State() pageNumber = 1;\n\n @State() newsChannelsArr: string[] = [];\n\n @State() newsSellerIdsArr: string[] = [];\n\n @State() newsBrandIdsArr: string[] = [];\n\n @State() newsLanguageLocalesArr: string[] = [];\n\n /*\n The url of the Aico Api that will be used to retrieve the article.\n /\n @Prop() aicoUrl!: string;\n\n /\n The token used to authenticate against he Aico Api.\n /\n @Prop() aicoBearerToken!: string;\n\n /\n Channel names as a comma separated list used to filter the results.\n /\n @Prop() newsChannels: string = '';\n\n /\n Seller ids as a comma separated list used to filter the results.\n /\n @Prop() newsSellerIds: string = '';\n\n /\n Brand ids as a comma separated list used to filter the results.\n /\n @Prop() newsBrandIds: string = '';\n\n /\n Language locales as a comma separated list used to filter the results.\n /\n @Prop() newsLanguageLocales: string = '';\n\n /\n Determines wheter top articles will be included in the list or not.\n /\n @Prop() hideTopArticles: boolean = true;\n\n /\n Determines wheter special articles will be included in the list or not.\n /\n @Prop() hideSpecialArticles: boolean = false;\n\n /\n The page size. Prefer this number to be even.\n /\n @Prop() pageSize: number = 16;\n\n /\n The text used by the next button in the pagination component.\n /\n @Prop() nextButtonText: string = 'Next';\n\n /\n The text used by the previous button in the pagination component.\n /\n @Prop() previousButtonText: string = 'Previous';\n\n /\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n /\n Event emitted when a user clicks an article.\n \n The handler receives the entire Article entity.\n */\n @Event() articleClick?: EventEmitter<Article>;\n\n private api?: AicoApiRequestInfo;\n private newsListFetchController?: AbortController;\n\n connectedCallback() {\n this.newsListFetchController = new AbortController();\n this.pageNumber = 1;\n\n this.api = { baseApi: this.aicoUrl, bearerToken: this.aicoBearerToken };\n\n this.newsChannelsArr = splitByComma(this.newsChannels);\n this.newsSellerIdsArr = splitByComma(this.newsSellerIds);\n this.newsBrandIdsArr = splitByComma(this.newsBrandIds);\n this.newsLanguageLocalesArr = splitByComma(this.newsLanguageLocales);\n }\n\n disconnectedCallback() {\n this.newsListFetchController!.abort('disconnected');\n }\n\n async componentWillLoad(): Promise<void> {\n this.newsResponse = await fetchNewsArticles(\n this.api!,\n this.pageNumber,\n this.pageSize,\n this.newsListFetchController!.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n this.hideTopArticles,\n this.hideSpecialArticles,\n );\n }\n\n async componentWillUpdate(): Promise<void> {\n this.newsListFetchController = new AbortController();\n this.newsResponse = await fetchNewsArticles(\n this.api!,\n this.pageNumber,\n this.pageSize,\n this.newsListFetchController.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n this.hideTopArticles,\n this.hideSpecialArticles,\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"newslist-grid-container mb-4\">\n {this.newsResponse?.data\n .filter(article => !article.attributes.isTopNews)\n .map((article, articleIndex) => {\n return (\n <div class=\"col\">\n <aico-news-list-item\n article={article}\n articleIndex={articleIndex}\n onArticleClick={e => {\n this.articleClick?.emit(e.detail);\n e.stopPropagation();\n }}\n locale={this.locale}\n />\n </div>\n );\n })}\n </div>\n <nav class=\"w-100\" aria-label=\"News navigation\">\n <ul class=\"pagination justify-content-center\">\n <li\n class={`page-item page-link user-select-none d-flex align-items-center ${!this.newsResponse?.links.prev ? 'disabled' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (this.pageNumber > 1) {\n this.pageNumber -= 1;\n }\n\n return false;\n }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" class=\"bi bi-chevron-left me-1 fs-4\" style={{ width: '1em', height: '1em' }} viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\" />\n </svg>\n {this.previousButtonText}\n </li>\n {this.getViewablePages().map(page => (\n <li\n class={`page-item page-link user-select-none ${page === '...' ? 'disabled' : Number(page) === this.pageNumber ? 'active' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (page !== '...') {\n this.pageNumber = Number(page);\n }\n return false;\n }}\n >\n {page}\n </li>\n ))}\n <li\n class={`page-item page-link user-select-none d-flex align-items-center ${!this.newsResponse?.links.next ? 'disabled' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (this.newsResponse?.meta.page.lastPage && this.pageNumber < this.newsResponse?.meta.page.lastPage) {\n this.pageNumber += 1;\n }\n }}\n >\n {this.nextButtonText}\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" class=\"bi bi-chevron-right ms-1 fs-4\" style={{ width: '1em', height: '1em' }} viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\" />\n </svg>\n </li>\n </ul>\n </nav>\n </Host>\n );\n }\n\n private getViewablePages(lookAhead: number = 2) {\n const pages: string[] = [];\n if (this.pageNumber - lookAhead >= 2) {\n pages.push('1');\n }\n\n if (this.pageNumber - lookAhead > 2) {\n pages.push('...');\n }\n\n for (let i = this.pageNumber - lookAhead; i < this.pageNumber; i += 1) {\n if (i >= 1) {\n pages.push(`${i}`);\n }\n }\n\n pages.push(`${this.pageNumber}`);\n for (let i = this.pageNumber + 1; i <= this.pageNumber + lookAhead; i += 1) {\n if (i <= (this.newsResponse?.meta.page.lastPage ?? 0)) {\n pages.push(`${i}`);\n }\n }\n\n if (this.pageNumber + lookAhead < (this.newsResponse?.meta.page.lastPage ?? 0) - 1) {\n pages.push('...');\n }\n\n if (this.pageNumber + lookAhead <= (this.newsResponse?.meta.page.lastPage ?? 0) - 1) {\n pages.push(`${this.newsResponse?.meta.page.lastPage}`);\n }\n\n return pages;\n }\n}\n"],"version":3}
1	+ {"file":"aico-news-list.js","mappings":"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","names":["AicoNewsList"],"sources":["src/components/aico-news-list/aico-news-list.css?tag=aico-news-list&encapsulation=scoped","src/components/aico-news-list/aico-news-list.tsx"],"sourcesContent":["@import '../../../node_modules/bootstrap/dist/css/bootstrap.css';\n\n:host,\n:host::before,\n:host::after {\n box-sizing: border-box;\n}\n\n:host {\n font-family: var(--bs-body-font-family);\n font-size: var(--bs-body-font-size);\n font-weight: var(--bs-body-font-weight);\n line-height: var(--bs-body-line-height);\n color: var(--bs-body-color);\n text-align: var(--bs-body-text-align);\n -webkit-text-size-adjust: 100%;\n}\n\n.newslist-grid-container {\n display: grid;\n grid-gap: 24px;\n grid-auto-flow: dense;\n}\n\n.row-span-2 {\n grid-row-end: span 2;\n}\n\n@media (min-width: 768px) {\n .newslist-grid-container {\n grid-template-columns: repeat(2, 1fr);\n }\n .col-span-md-2 {\n grid-column-end: span 2;\n }\n}\n\n@media (min-width: 992px) {\n .newslist-grid-container {\n grid-template-columns: repeat(4, 1fr);\n }\n}\n\n@media (max-width: 767px) {\n .newslist-grid-container {\n grid-auto-rows: 1fr;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { fetchNewsArticles, splitByComma } from '../../utils/utils';\nimport { NewsResponse } from '../../model/NewsResponse';\nimport { AicoApiRequestInfo } from '../../model/AicoApiRequestInfo';\nimport { Article } from '../../model/Article';\n\n@Component({\n tag: 'aico-news-list',\n styleUrl: 'aico-news-list.css',\n scoped: true,\n})\nexport class AicoNewsList {\n @State() newsResponse?: NewsResponse;\n\n @State() pageNumber = 1;\n\n @State() newsChannelsArr: string[] = [];\n\n @State() newsSellerIdsArr: string[] = [];\n\n @State() newsBrandIdsArr: string[] = [];\n\n @State() newsLanguageLocalesArr: string[] = [];\n\n /*\n The url of the Aico Api that will be used to retrieve the article.\n /\n @Prop() aicoUrl!: string;\n\n /\n The token used to authenticate against he Aico Api.\n /\n @Prop() aicoBearerToken!: string;\n\n /\n Channel names as a comma separated list used to filter the results.\n /\n @Prop() newsChannels: string = '';\n\n /\n Seller ids as a comma separated list used to filter the results.\n /\n @Prop() newsSellerIds: string = '';\n\n /\n Brand ids as a comma separated list used to filter the results.\n /\n @Prop() newsBrandIds: string = '';\n\n /\n Language locales as a comma separated list used to filter the results.\n /\n @Prop() newsLanguageLocales: string = '';\n\n /\n Determines wheter top articles will be included in the list or not.\n /\n @Prop() hideTopArticles: boolean = true;\n\n /\n Determines wheter special articles will be included in the list or not.\n /\n @Prop() hideSpecialArticles: boolean = false;\n\n /\n The page size. Prefer this number to be even.\n /\n @Prop() pageSize: number = 16;\n\n /\n The text used by the next button in the pagination component.\n /\n @Prop() nextButtonText: string = 'Next';\n\n /\n The text used by the previous button in the pagination component.\n /\n @Prop() previousButtonText: string = 'Previous';\n\n /\n The article translation that will be used to render the content.\n \n If the locale specified is not present in the article's translations, most content will not be shown.\n /\n @Prop() locale: string = 'de';\n\n /\n Event emitted when a user clicks an article.\n \n The handler receives the entire Article entity.\n */\n @Event() articleClick?: EventEmitter<Article>;\n\n private api?: AicoApiRequestInfo;\n private newsListFetchController?: AbortController;\n\n connectedCallback() {\n this.newsListFetchController = new AbortController();\n this.pageNumber = 1;\n\n this.api = { baseApi: this.aicoUrl, bearerToken: this.aicoBearerToken };\n\n this.newsChannelsArr = splitByComma(this.newsChannels);\n this.newsSellerIdsArr = splitByComma(this.newsSellerIds);\n this.newsBrandIdsArr = splitByComma(this.newsBrandIds);\n this.newsLanguageLocalesArr = splitByComma(this.newsLanguageLocales);\n }\n\n disconnectedCallback() {\n this.newsListFetchController!.abort('disconnected');\n }\n\n async componentWillLoad(): Promise<void> {\n this.newsResponse = await fetchNewsArticles(\n this.api!,\n this.pageNumber,\n this.pageSize,\n this.newsListFetchController!.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n this.hideTopArticles,\n this.hideSpecialArticles,\n );\n }\n\n async componentWillUpdate(): Promise<void> {\n this.newsListFetchController = new AbortController();\n this.newsResponse = await fetchNewsArticles(\n this.api!,\n this.pageNumber,\n this.pageSize,\n this.newsListFetchController.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n this.hideTopArticles,\n this.hideSpecialArticles,\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"newslist-grid-container mb-4\">\n {this.newsResponse?.data\n .filter(article => !article.attributes.isTopNews)\n .map((article, articleIndex) => {\n return (\n <div key={article.id} class=\"col\">\n <aico-news-list-item\n article={article}\n articleIndex={articleIndex}\n onArticleClick={e => {\n this.articleClick?.emit(e.detail);\n e.stopPropagation();\n }}\n locale={this.locale}\n />\n </div>\n );\n })}\n </div>\n <nav class=\"w-100\" aria-label=\"News navigation\">\n <ul class=\"pagination justify-content-center\">\n <li\n class={`page-item page-link user-select-none d-flex align-items-center ${!this.newsResponse?.links.prev ? 'disabled' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (this.pageNumber > 1) {\n this.pageNumber -= 1;\n }\n\n return false;\n }}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" class=\"bi bi-chevron-left me-1 fs-4\" style={{ width: '1em', height: '1em' }} viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\" />\n </svg>\n {this.previousButtonText}\n </li>\n {this.getViewablePages().map(page => (\n <li\n class={`page-item page-link user-select-none ${page === '...' ? 'disabled' : Number(page) === this.pageNumber ? 'active' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (page !== '...') {\n this.pageNumber = Number(page);\n }\n return false;\n }}\n >\n {page}\n </li>\n ))}\n <li\n class={`page-item page-link user-select-none d-flex align-items-center ${!this.newsResponse?.links.next ? 'disabled' : ''}`}\n style={{ cursor: 'pointer' }}\n onClick={() => {\n if (this.newsResponse?.meta.page.lastPage && this.pageNumber < this.newsResponse?.meta.page.lastPage) {\n this.pageNumber += 1;\n }\n }}\n >\n {this.nextButtonText}\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" class=\"bi bi-chevron-right ms-1 fs-4\" style={{ width: '1em', height: '1em' }} viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\" />\n </svg>\n </li>\n </ul>\n </nav>\n </Host>\n );\n }\n\n private getViewablePages(lookAhead: number = 2) {\n const pages: string[] = [];\n if (this.pageNumber - lookAhead >= 2) {\n pages.push('1');\n }\n\n if (this.pageNumber - lookAhead > 2) {\n pages.push('...');\n }\n\n for (let i = this.pageNumber - lookAhead; i < this.pageNumber; i += 1) {\n if (i >= 1) {\n pages.push(`${i}`);\n }\n }\n\n pages.push(`${this.pageNumber}`);\n for (let i = this.pageNumber + 1; i <= this.pageNumber + lookAhead; i += 1) {\n if (i <= (this.newsResponse?.meta.page.lastPage ?? 0)) {\n pages.push(`${i}`);\n }\n }\n\n if (this.pageNumber + lookAhead < (this.newsResponse?.meta.page.lastPage ?? 0) - 1) {\n pages.push('...');\n }\n\n if (this.pageNumber + lookAhead <= (this.newsResponse?.meta.page.lastPage ?? 0) - 1) {\n pages.push(`${this.newsResponse?.meta.page.lastPage}`);\n }\n\n return pages;\n }\n}\n"],"version":3}