@aiconomy/aico-components 0.0.164 → 0.0.174

package/dist/esm/aico-album-content_27.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, F as Fragment, c as createEvent } from './index-4621a8ba.js';
+import { r as registerInstance, h, H as Host, F as Fragment, c as createEvent, g as getElement$1 } from './index-1498b9e7.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -13906,12 +13906,15 @@ const AicoArticleDetail = class {
         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)));
@@ -20678,7 +20681,7 @@ const AicoNewsList = class {
     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();
@@ -20741,14 +20744,35 @@ const AicoNewsListItem = class {
         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 getElement$1(this); }
 };
 AicoNewsListItem.style = aicoNewsListItemCss;