@aiconomy/aico-components 0.0.57 → 0.0.78

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, c as createEvent, F as Fragment } from './index-4621a8ba.js';
 import { j as jquery } from './slick-d11cf173.js';
-import { s as strIsNullOrEmptyOrWhitespace, g as getImageWidthPrc, d as getClass, e as getYoutubeURL } from './utils-54ffec33.js';
+import { s as strIsNullOrEmptyOrWhitespace, g as getImageWidthPrc, d as getClass, e as getYoutubeURL } from './utils-b4eec8e9.js';
 
 const aicoAlbumContentCss = "";
 
@@ -76,11 +76,12 @@ const AicoAskingContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        var _a, _b;
-        const translation = this.content.asking.translations.length > 0 ? this.content.asking.translations[0] : null;
-        return (h("div", { class: "card" }, h("div", { class: "card-body" }, h("div", { class: "card-text d-block" }, h("h1", { class: "card-title" }, "Asking"), h("table", { class: "team-table" }, h("tbody", null, h("tr", { class: "agenda-event" }, h("td", null, h("h3", null, this.content.asking.startsAt.toLocaleDateString())), h("td", null, `${this.content.asking.startTime.toLocaleDateString()} - ${(_b = (_a = this.content.asking.endTime) === null || _a === void 0 ? void 0 : _a.toLocaleDateString()) !== null && _b !== void 0 ? _b : 'N/A'}`), h("td", { style: { width: '49%' } }, translation === null || translation === void 0 ? void 0 : translation.title)), h("tr", { class: "event-details" }, h("td", { colSpan: 3, style: { padding: '0' } }, h("table", { class: "more-details-table" }, h("tbody", null, h("tr", null, h("th", null, "Description"), h("td", null, this.content.asking.description)), h("tr", null, h("th", null, "Gathering"), h("td", null, this.content.asking.meetingPoint)), h("tr", null, h("th", null, "Place (Address)"), h("td", null, this.content.asking.location)), h("tr", null, h("th", null, "Asking for"), h("td", { style: { 'white-space': 'pre' } }, this.content.asking.recipents)), h("tr", null, h("th", null, "Clothing / Equipment"), h("td", { style: { 'white-space': 'pre' } }, this.content.asking.clothingEquipment)), h("tr", null, h("th", null, "Provisions"), h("td", null, this.content.asking.catering)), h("tr", null, h("th", null, "Coaching"), h("td", null, this.content.asking.coaching))))))))))));
+        var _a, _b, _c;
+        const translation = (_a = this.content.asking.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
+        return (h("div", { class: "card" }, h("div", { class: "card-body" }, h("div", { class: "card-text d-block" }, h("h1", { class: "card-title" }, "Asking"), h("table", { class: "team-table" }, h("tbody", null, h("tr", { class: "agenda-event" }, h("td", null, h("h3", null, this.content.asking.startsAt.toLocaleDateString())), h("td", null, `${this.content.asking.startTime.toLocaleDateString()} - ${(_c = (_b = this.content.asking.endTime) === null || _b === void 0 ? void 0 : _b.toLocaleDateString()) !== null && _c !== void 0 ? _c : 'N/A'}`), h("td", { style: { width: '49%' } }, translation === null || translation === void 0 ? void 0 : translation.title)), h("tr", { class: "event-details" }, h("td", { colSpan: 3, style: { padding: '0' } }, h("table", { class: "more-details-table" }, h("tbody", null, h("tr", null, h("th", null, "Description"), h("td", null, this.content.asking.description)), h("tr", null, h("th", null, "Gathering"), h("td", null, this.content.asking.meetingPoint)), h("tr", null, h("th", null, "Place (Address)"), h("td", null, this.content.asking.location)), h("tr", null, h("th", null, "Asking for"), h("td", { style: { 'white-space': 'pre' } }, this.content.asking.recipents)), h("tr", null, h("th", null, "Clothing / Equipment"), h("td", { style: { 'white-space': 'pre' } }, this.content.asking.clothingEquipment)), h("tr", null, h("th", null, "Provisions"), h("td", null, this.content.asking.catering)), h("tr", null, h("th", null, "Coaching"), h("td", null, this.content.asking.coaching))))))))))));
     }
 };
 AicoAskingContent.style = aicoAskingContentCss;
@@ -95,9 +96,11 @@ const AicoBlockQuoteContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
+        var _a;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
         return (h(ConditionalRender, { condition: translation !== null }, h("blockquote", { class: "blockquote", style: { 'background-color': this.content.quotesColor } }, h("p", { class: "mb-2", style: { color: this.content.textColor } }, translation.quoteText), h("footer", { class: "blockquote-footer ms-2", style: { color: this.content.authorColor } }, translation.quoteAuthorLine))));
     }
 };
@@ -109,9 +112,11 @@ const AicoBulletContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
+        var _a;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
         const styles = new Map();
         if (this.content.fontSize) {
             styles.set('font-size', this.content.fontSize);
@@ -119,17 +124,17 @@ const AicoBulletContent = class {
         if (this.content.fontFamily) {
             styles.set('font-family', this.content.fontFamily);
         }
-        return (h("div", { class: "content", style: Object.fromEntries(styles) }, h(ConditionalRender, { condition: translation !== null }, h("aico-title-content", { content: this.makeTitleContent(translation) })), h("ul", null, this.content.bulletBullets
+        return (h("div", { class: "content", style: Object.fromEntries(styles) }, h(ConditionalRender, { condition: translation !== null }, h("aico-title-content", { content: this.makeTitleContent(translation), locale: this.locale })), h("ul", null, this.content.bulletBullets
             .sort((a, b) => { var _a, _b; return ((_a = a.sort) !== null && _a !== void 0 ? _a : 0) - ((_b = b.sort) !== null && _b !== void 0 ? _b : 0); })
             .map(bullet => {
             if (bullet.translations.length === 0) {
                 return null;
             }
-            const translation = bullet.translations[0];
-            if (strIsNullOrEmptyOrWhitespace(translation.text)) {
+            const translation = bullet.translations.find(translation => translation.locale === this.locale);
+            if (strIsNullOrEmptyOrWhitespace(translation === null || translation === void 0 ? void 0 : translation.text)) {
                 return null;
             }
-            return h("li", null, translation.text);
+            return h("li", null, translation === null || translation === void 0 ? void 0 : translation.text);
         }))));
     }
     makeTitleContent(translation) {
@@ -153,6 +158,7 @@ const AicoCarouselContent = class {
         registerInstance(this, hostRef);
         this.content = undefined;
         this.hasArrows = true;
+        this.locale = 'de';
     }
     componentDidLoad() {
         jquery('.carousel').slick({
@@ -165,11 +171,14 @@ const AicoCarouselContent = class {
         });
     }
     render() {
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
-        return (h(Host, null, h(ConditionalRender, { condition: translation !== null }, h("aico-title-content", { content: this.makeTitleContent(translation) })), h("div", { class: "carousel" }, this.content.contentCarouselImages
+        var _a;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
+        return (h(Host, null, h(ConditionalRender, { condition: translation !== null }, h("aico-title-content", { content: this.makeTitleContent(translation), locale: this.locale })), h("div", { class: "carousel" }, this.content.contentCarouselImages
             .sort((a, b) => a.order - b.order)
             .map(content => {
-            return (h("div", { class: "carousel-item card text-bg-dark text-white" }, h("div", { class: "ratio ratio-16x9 mx-auto", style: { 'max-width': '50%' } }, h("img", { class: "card-img d-block object-fit-cover", alt: "Carousel Picture", "data-lazy": content.picture })), h(ConditionalRender, { condition: content.translations.length > 0 && !strIsNullOrEmptyOrWhitespace(content.translations[0].title) }, h("div", { class: "card-img-overlay d-flex align-items-end" }, h("h5", { class: "card-title text-uppercase" }, content.translations[0].title)))));
+            var _a;
+            const translation = (_a = content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
+            return (h("div", { class: "carousel-item card text-bg-dark text-white" }, h("div", { class: "ratio ratio-16x9 mx-auto", style: { 'max-width': '50%' } }, h("img", { class: "card-img d-block object-fit-cover", alt: "Carousel Picture", "data-lazy": translation === null || translation === void 0 ? void 0 : translation.picture })), h(ConditionalRender, { condition: content.translations.length > 0 && !strIsNullOrEmptyOrWhitespace(translation === null || translation === void 0 ? void 0 : translation.title) }, h("div", { class: "card-img-overlay d-flex align-items-end" }, h("h5", { class: "card-title text-uppercase" }, translation === null || translation === void 0 ? void 0 : translation.title)))));
         }))));
     }
     makeTitleContent(translation) {
@@ -191,11 +200,12 @@ const AicoContentCardContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        var _a;
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
-        return (h("div", { class: "card", style: { width: '18rem' } }, h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(this.content.picture) }, h("img", { class: "card-img-top", alt: "Card picture", src: this.content.picture })), h("div", { class: "card-body" }, h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(translation === null || translation === void 0 ? void 0 : translation.title) }, h("aico-title-content", { class: "card-title", content: this.makeTitleContent(translation) })), h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(this.content.link) }, h("a", { class: "card-link", href: this.content.link, target: "_blank" }, (_a = translation === null || translation === void 0 ? void 0 : translation.linkText) !== null && _a !== void 0 ? _a : 'link')))));
+        var _a, _b;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
+        return (h("div", { class: "card", style: { width: '18rem' } }, h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(this.content.picture) }, h("img", { class: "card-img-top", alt: "Card picture", src: this.content.picture })), h("div", { class: "card-body" }, h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(translation === null || translation === void 0 ? void 0 : translation.title) }, h("aico-title-content", { class: "card-title", content: this.makeTitleContent(translation), locale: this.locale })), h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(this.content.link) }, h("a", { class: "card-link", href: this.content.link, target: "_blank" }, (_b = translation === null || translation === void 0 ? void 0 : translation.linkText) !== null && _b !== void 0 ? _b : 'link')))));
     }
     makeTitleContent(translation) {
         var _a;
@@ -217,9 +227,11 @@ const AicoDividerContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
+        var _a;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
         const isOnlyMargin = translation ? translation.isOnlyMargin : this.content.isOnlyMargin;
         return h(Host, null, isOnlyMargin ? h("div", { style: { 'padding-top': '40px' } }) : h("hr", { style: { margin: '5px' } }));
     }
@@ -232,10 +244,11 @@ const AicoDocumentContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        var _a;
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
+        var _a, _b;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
         const linkStyles = {};
         const buttonStyles = {};
         if (this.content.fontSize) {
@@ -258,7 +271,7 @@ const AicoDocumentContent = class {
         if (this.content.isDocumentDisplayedAsButton && this.content.buttonHoverColor) {
             buttonStyles['--hover-button-color'] = this.content.buttonHoverColor;
         }
-        return (h("div", { class: "card" }, h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(translation === null || translation === void 0 ? void 0 : translation.picture) }, h("img", { class: "card-img-top", alt: "image", src: translation.picture })), h("div", { class: "card-body" }, h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(this.content.link) }, h("a", { class: "card-link", style: linkStyles, href: this.content.link }, this.content.link)), h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(translation === null || translation === void 0 ? void 0 : translation.document) }, h("a", { href: translation.document, target: "_blank", style: buttonStyles, class: `card-link align-middle ${this.content.isDocumentDisplayedAsButton ? 'btn button-link' : ''}` }, h("i", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", width: "24", height: "24", viewBox: "0 0 50 50" }, h("path", { d: "M 7 2 L 7 48 L 43 48 L 43 14.59375 L 42.71875 14.28125 L 30.71875 2.28125 L 30.40625 2 Z M 9 4 L 29 4 L 29 16 L 41 16 L 41 46 L 9 46 Z M 31 5.4375 L 39.5625 14 L 31 14 Z" }))), (_a = translation.title) !== null && _a !== void 0 ? _a : 'File')))));
+        return (h("div", { class: "card" }, h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(translation === null || translation === void 0 ? void 0 : translation.picture) }, h("img", { class: "card-img-top", alt: "image", src: translation.picture })), h("div", { class: "card-body" }, h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(this.content.link) }, h("a", { class: "card-link", style: linkStyles, href: this.content.link }, this.content.link)), h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(translation === null || translation === void 0 ? void 0 : translation.document) }, h("a", { href: translation.document, target: "_blank", style: buttonStyles, class: `card-link align-middle ${this.content.isDocumentDisplayedAsButton ? 'btn button-link' : ''}` }, h("i", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", width: "24", height: "24", viewBox: "0 0 50 50" }, h("path", { d: "M 7 2 L 7 48 L 43 48 L 43 14.59375 L 42.71875 14.28125 L 30.71875 2.28125 L 30.40625 2 Z M 9 4 L 29 4 L 29 16 L 41 16 L 41 46 L 9 46 Z M 31 5.4375 L 39.5625 14 L 31 14 Z" }))), (_b = translation.title) !== null && _b !== void 0 ? _b : 'File')))));
     }
 };
 AicoDocumentContent.style = aicoDocumentContentCss;
@@ -6533,10 +6546,12 @@ const AicoFaqContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
         return (h(Host, null, h("h2", { class: "card-title mb-2" }, "FAQ"), h("div", { class: "accordion", id: "aico-faq-accordion" }, this.content.faqItems.map((faqItem, index) => {
-            const translation = faqItem.translations.length > 0 ? faqItem.translations[0] : null;
+            var _a;
+            const translation = (_a = faqItem.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
             if (!translation) {
                 return null;
             }
@@ -6552,9 +6567,11 @@ const AicoHeadingContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
+        var _a;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
         const contentStyle = { 'justify-content': this.content.isTextAtMiddleOfImage ? 'center' : 'flex-end' };
         if (!strIsNullOrEmptyOrWhitespace(this.content.picture)) {
             contentStyle['min-height'] = this.content.isImageHeightHalfSize ? '400px' : '600px';
@@ -6574,7 +6591,7 @@ const AicoHeadingContent = class {
         if (!strIsNullOrEmptyOrWhitespace(this.content.textColor)) {
             descriptionStyle['color'] = this.content.textColor;
         }
-        return (h("div", { class: this.content.isHeadingAlignedWithText ? 'content content-align-with-text' : 'content', style: contentStyle }, h(ConditionalRender, { condition: translation !== null }, h("div", { class: "title-wrapper", style: titleWrapperStyle }, h("aico-title-content", { content: this.makeTitleContent(translation) })), h("span", { class: "description", style: descriptionStyle }, translation.description))));
+        return (h("div", { class: this.content.isHeadingAlignedWithText ? 'content content-align-with-text' : 'content', style: contentStyle }, h(ConditionalRender, { condition: translation !== null }, h("div", { class: "title-wrapper", style: titleWrapperStyle }, h("aico-title-content", { content: this.makeTitleContent(translation), locale: this.locale })), h("span", { class: "description", style: descriptionStyle }, translation.description))));
     }
     makeTitleContent(translation) {
         var _a;
@@ -6597,12 +6614,12 @@ const AicoHtmlContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        if (this.content.translations.length === 0) {
-            return h("aico-no-content", null);
-        }
-        return (h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(this.content.translations[0].text) }, h("div", { innerHTML: this.content.translations[0].text })));
+        var _a;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
+        return (h(ConditionalRender, { condition: translation !== null && !strIsNullOrEmptyOrWhitespace(translation.text) }, h("div", { innerHTML: translation.text })));
     }
 };
 AicoHtmlContent.style = aicoHtmlContentCss;
@@ -6613,10 +6630,11 @@ const AicoLinkContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        var _a, _b;
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
+        var _a, _b, _c;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
         const buttonLinkStyle = {};
         if (this.content.textButtonColor) {
             buttonLinkStyle['color'] = this.content.textButtonColor;
@@ -6634,7 +6652,7 @@ const AicoLinkContent = class {
             buttonLinkStyle['--hover-button-color'] = this.content.hoverColor;
         }
         return (h(Host, null, h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(translation === null || translation === void 0 ? void 0 : translation.title) }, h("label", null, translation === null || translation === void 0 ? void 0 :
-            translation.title, ": ")), h(ConditionalRender, { condition: this.content.isImageLink !== undefined && this.content.isImageLink }, h("div", { class: "image-link-wrapper", style: { 'justify-content': this.content.picturePosition } }, h("a", { href: (_a = translation === null || translation === void 0 ? void 0 : translation.link) !== null && _a !== void 0 ? _a : '#', target: "_blank", class: "image-link", style: { width: this.content.isImageFullSize ? '100%' : getImageWidthPrc(this.content.pictureSize) } }, h("img", { src: translation === null || translation === void 0 ? void 0 : translation.imageUrl })))), h(ConditionalRender, { condition: this.content.isImageLink === null || !this.content.isImageLink }, h("a", { href: (_b = translation === null || translation === void 0 ? void 0 : translation.link) !== null && _b !== void 0 ? _b : '#', target: "_blank", class: this.content.isButtonLink ? 'button-link' : '', style: buttonLinkStyle }, h("span", { class: "arrow-button" }, " \u2192")))));
+            translation.title, ": ")), h(ConditionalRender, { condition: this.content.isImageLink !== undefined && this.content.isImageLink }, h("div", { class: "image-link-wrapper", style: { 'justify-content': this.content.picturePosition } }, h("a", { href: (_b = translation === null || translation === void 0 ? void 0 : translation.link) !== null && _b !== void 0 ? _b : '#', target: "_blank", class: "image-link", style: { width: this.content.isImageFullSize ? '100%' : getImageWidthPrc(this.content.pictureSize) } }, h("img", { src: translation === null || translation === void 0 ? void 0 : translation.imageUrl })))), h(ConditionalRender, { condition: this.content.isImageLink === null || !this.content.isImageLink }, h("a", { href: (_c = translation === null || translation === void 0 ? void 0 : translation.link) !== null && _c !== void 0 ? _c : '#', target: "_blank", class: this.content.isButtonLink ? 'button-link' : '', style: buttonLinkStyle }, h("span", { class: "arrow-button" }, " \u2192")))));
     }
 };
 AicoLinkContent.style = aicoLinkContentCss;
@@ -6666,15 +6684,16 @@ const AicoPageContent = class {
         registerInstance(this, hostRef);
         this.pageClicked = createEvent(this, "pageClicked", 7);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        var _a, _b, _c, _d;
-        const translation = this.content.landingPage.translations.length > 0 ? this.content.landingPage.translations[0] : null;
-        return (h(Host, { style: { 'max-width': '300px' } }, h("div", { class: "card pe-auto" }, h("div", { class: "ratio ratio-4x3" }, h("img", { class: "card-img-top img-fluid object-fit-cover", style: { 'object-position': 'center' }, src: (_a = this.content.landingPage.image) !== null && _a !== void 0 ? _a : 'https://cdn.shopify.com/s/files/1/0565/2201/4813/files/blank-img.png?v=13432316686103745237%20406w', alt: (_b = translation === null || translation === void 0 ? void 0 : translation.imageAlt) !== null && _b !== void 0 ? _b : 'Landing page image' })), h("div", { class: "card-body", style: { 'min-height': '6rem' } }, h("h5", { class: "card-title" }, translation === null || translation === void 0 ? void 0 : translation.name), h(ConditionalRender, { condition: this.content.openExternalLink && !strIsNullOrEmptyOrWhitespace(this.content.externalLink) }, h("a", { href: this.content.externalLink, class: "card-link" }, (_c = translation === null || translation === void 0 ? void 0 : translation.buttonText) !== null && _c !== void 0 ? _c : 'Navigate to page')), h(ConditionalRender, { condition: !this.content.openExternalLink }, h("a", { href: "#", class: "card-link", onClick: e => {
+        var _a, _b, _c, _d, _e;
+        const translation = (_a = this.content.landingPage.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
+        return (h(Host, { style: { 'max-width': '300px' } }, h("div", { class: "card pe-auto" }, h("div", { class: "ratio ratio-4x3" }, h("img", { class: "card-img-top img-fluid object-fit-cover", style: { 'object-position': 'center' }, src: (_b = this.content.landingPage.image) !== null && _b !== void 0 ? _b : 'https://cdn.shopify.com/s/files/1/0565/2201/4813/files/blank-img.png?v=13432316686103745237%20406w', alt: (_c = translation === null || translation === void 0 ? void 0 : translation.imageAlt) !== null && _c !== void 0 ? _c : 'Landing page image' })), h("div", { class: "card-body", style: { 'min-height': '6rem' } }, h("h5", { class: "card-title" }, translation === null || translation === void 0 ? void 0 : translation.name), h(ConditionalRender, { condition: this.content.openExternalLink && !strIsNullOrEmptyOrWhitespace(this.content.externalLink) }, h("a", { href: this.content.externalLink, class: "card-link" }, (_d = translation === null || translation === void 0 ? void 0 : translation.buttonText) !== null && _d !== void 0 ? _d : 'Navigate to page')), h(ConditionalRender, { condition: !this.content.openExternalLink }, h("a", { href: "#", class: "card-link", onClick: e => {
                 var _a;
                 e.preventDefault();
                 (_a = this.pageClicked) === null || _a === void 0 ? void 0 : _a.emit(this.content);
-            } }, (_d = translation === null || translation === void 0 ? void 0 : translation.buttonText) !== null && _d !== void 0 ? _d : 'Navigate to page'))), h(ConditionalRender, { condition: translation !== null && !strIsNullOrEmptyOrWhitespace(translation.excerpt) }, h("div", { class: "card-footer" }, h("small", { class: "text-muted" }, translation === null || translation === void 0 ? void 0 : translation.excerpt))))));
+            } }, (_e = translation === null || translation === void 0 ? void 0 : translation.buttonText) !== null && _e !== void 0 ? _e : 'Navigate to page'))), h(ConditionalRender, { condition: translation !== null && !strIsNullOrEmptyOrWhitespace(translation.excerpt) }, h("div", { class: "card-footer" }, h("small", { class: "text-muted" }, translation === null || translation === void 0 ? void 0 : translation.excerpt))))));
     }
 };
 AicoPageContent.style = aicoPageContentCss;
@@ -6685,17 +6704,19 @@ const AicoTableContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        var _a, _b;
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
-        const firstBackgroundColor = (_a = this.content.firstColor) !== null && _a !== void 0 ? _a : '#d6dfe1';
-        const secondBackgroundColor = (_b = this.content.secondColor) !== null && _b !== void 0 ? _b : '#e6eced';
-        return (h("div", { class: "content-table card" }, h("div", { class: "card-body" }, h(ConditionalRender, { condition: translation !== null }, h("aico-title-content", { class: "card-title mt-0", content: this.makeTitleContent(translation) }), h("p", { class: "card-text" }, translation.additionalText)), h("table", { class: "table-content" }, this.content.tableRows
+        var _a, _b, _c;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
+        const firstBackgroundColor = (_b = this.content.firstColor) !== null && _b !== void 0 ? _b : '#d6dfe1';
+        const secondBackgroundColor = (_c = this.content.secondColor) !== null && _c !== void 0 ? _c : '#e6eced';
+        return (h("div", { class: "content-table card" }, h("div", { class: "card-body" }, h(ConditionalRender, { condition: translation !== null }, h("aico-title-content", { class: "card-title mt-0", content: this.makeTitleContent(translation), locale: this.locale }), h("p", { class: "card-text" }, translation.additionalText)), h("table", { class: "table-content" }, this.content.tableRows
             .sort((a, b) => a.sort - b.sort)
             .map((row, index) => {
             return (h("tr", { style: { 'font-weight': '400', 'background-color': index % 2 === 0 ? firstBackgroundColor : secondBackgroundColor } }, row.rowColumns.map(col => {
-                const translation = col.translations.length > 0 ? col.translations[0] : null;
+                var _a;
+                const translation = (_a = col.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
                 if (!translation) {
                     return row.isHeading ? h("th", null) : h("td", null);
                 }
@@ -6742,17 +6763,15 @@ const AicoTextContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        var _a, _b, _c;
-        if (this.content.translations.length === 0) {
-            return h("aico-no-content", null);
-        }
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
+        var _a, _b, _c, _d;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
         const contentStyles = {};
         if (this.content.hasBackgroundColor) {
-            contentStyles['background-color'] = (_a = this.content.backgroundColor) !== null && _a !== void 0 ? _a : 'white';
-            contentStyles['color'] = (_b = this.content.textColor) !== null && _b !== void 0 ? _b : 'black';
+            contentStyles['background-color'] = (_b = this.content.backgroundColor) !== null && _b !== void 0 ? _b : 'white';
+            contentStyles['color'] = (_c = this.content.textColor) !== null && _c !== void 0 ? _c : 'black';
             contentStyles['width'] = '100%';
             contentStyles['padding'] = '15px';
             contentStyles['margin-top'] = '10px';
@@ -6763,9 +6782,9 @@ const AicoTextContent = class {
         }
         if (this.content.alignmentEnabled) {
             contentStyles['display'] = 'flex';
-            contentStyles['align-items'] = (_c = this.content.verticalAlign) !== null && _c !== void 0 ? _c : 'flex-start';
+            contentStyles['align-items'] = (_d = this.content.verticalAlign) !== null && _d !== void 0 ? _d : 'flex-start';
         }
-        return (h(ConditionalRender, { condition: translation !== null }, h(ConditionalWrap, { condition: !strIsNullOrEmptyOrWhitespace(translation.promptText), wrap: children => (h("div", { class: "accordion", id: "aico-text-content" }, h("div", { class: "accordion-item" }, h("h2", { class: "accordion-header", id: "heading" }, h("button", { class: "accordion-button collapsed", type: "button", "data-bs-toggle": "collapse", "data-bs-target": "#collapse", "aria-expanded": "false", "aria-controls": "collapse" }, translation.promptText)), h("div", { id: "collapse", class: "accordion-collapse collapse", "aria-labelledby": "heading", "data-bs-parent": "#aico-text-content" }, h("div", { class: "accordion-body" }, children))))) }, h("div", { class: "card", style: contentStyles }, h("div", { class: "card-body w-100 border-0" }, h("aico-title-content", { class: "card-title", content: this.makeTitleContent(translation) }), h(ConditionalRender, { condition: this.shouldDisplayTextAndPicture(translation) }, h("div", { class: "row g-4" }, h("div", { class: getClass({
+        return (h(ConditionalRender, { condition: translation !== null }, h(ConditionalWrap, { condition: !strIsNullOrEmptyOrWhitespace(translation.promptText), wrap: children => (h("div", { class: "accordion", id: "aico-text-content" }, h("div", { class: "accordion-item" }, h("h2", { class: "accordion-header", id: "heading" }, h("button", { class: "accordion-button collapsed", type: "button", "data-bs-toggle": "collapse", "data-bs-target": "#collapse", "aria-expanded": "false", "aria-controls": "collapse" }, translation.promptText)), h("div", { id: "collapse", class: "accordion-collapse collapse", "aria-labelledby": "heading", "data-bs-parent": "#aico-text-content" }, h("div", { class: "accordion-body" }, children))))) }, h("div", { class: "card", style: contentStyles }, h("div", { class: "card-body w-100 border-0" }, h("aico-title-content", { class: "card-title", content: this.makeTitleContent(translation), locale: this.locale }), h(ConditionalRender, { condition: this.shouldDisplayTextAndPicture(translation) }, h("div", { class: "row g-4" }, h("div", { class: getClass({
                 'col-md-8': true,
                 'order-1': this.content.picturePosition === 'right',
                 'order-2': this.content.picturePosition === 'left',
@@ -6827,11 +6846,13 @@ const AicoUploadContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
+        var _a;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
         const youtubeUrl = this.content && this.content.videoUrl ? getYoutubeURL(this.content.videoUrl) : null;
-        return (h(Host, null, h(ConditionalRender, { condition: translation !== null }, h("aico-title-content", { content: this.makeTitleContent(translation) })), h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(youtubeUrl) }, h("div", { class: "ratio ratio-16x9" }, h("iframe", { allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, src: youtubeUrl }))), h(ConditionalRender, { condition: !this.content.shouldHideFile }, h("p", { class: "fs-3 mt-3" }, "Files:"), h("div", { class: "list-group list-group-flush" }, this.content.uploads.map(upload => {
+        return (h(Host, null, h(ConditionalRender, { condition: translation !== null }, h("aico-title-content", { content: this.makeTitleContent(translation), locale: this.locale })), h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(youtubeUrl) }, h("div", { class: "ratio ratio-16x9" }, h("iframe", { allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, src: youtubeUrl }))), h(ConditionalRender, { condition: !this.content.shouldHideFile }, h("p", { class: "fs-3 mt-3" }, "Files:"), h("div", { class: "list-group list-group-flush" }, this.content.uploads.map(upload => {
             if (strIsNullOrEmptyOrWhitespace(upload.path)) {
                 return null;
             }
@@ -6857,11 +6878,13 @@ const AicoVideoContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.content = undefined;
+        this.locale = 'de';
     }
     render() {
-        const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;
+        var _a;
+        const translation = (_a = this.content.translations.find(translation => translation.locale === this.locale)) !== null && _a !== void 0 ? _a : null;
         const youtubeUrl = translation && translation.videoUrl ? getYoutubeURL(translation.videoUrl) : null;
-        return (h(Host, null, h(ConditionalRender, { condition: translation !== null }, h("aico-title-content", { content: this.makeTitleContent(translation) })), h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(youtubeUrl) }, h("div", { class: "ratio ratio-16x9" }, h("iframe", { allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, src: youtubeUrl }))), h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(this.content.localVideoUrl) }, h("div", { class: "ratio ratio-16x9" }, h("video", { class: "media-card-video", controls: true, playsInline: true, style: { height: this.content.isVideoMinimized ? '400px' : '100%' } }, h("source", { src: this.content.localVideoUrl, type: "video/mp4" }))))));
+        return (h(Host, null, h(ConditionalRender, { condition: translation !== null }, h("aico-title-content", { content: this.makeTitleContent(translation), locale: this.locale })), h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(youtubeUrl) }, h("div", { class: "ratio ratio-16x9" }, h("iframe", { allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, src: youtubeUrl }))), h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(this.content.localVideoUrl) }, h("div", { class: "ratio ratio-16x9" }, h("video", { class: "media-card-video", controls: true, playsInline: true, style: { height: this.content.isVideoMinimized ? '400px' : '100%' } }, h("source", { src: this.content.localVideoUrl, type: "video/mp4" }))))));
     }
     makeTitleContent(translation) {
         var _a;