@aiconomy/aico-components 0.0.53 → 0.0.78

package/dist/collection/components/content/aico-faq-content/aico-faq-content.stories.js

@@ -4,6 +4,7 @@ const meta = {
 export default meta;
 export const Example = {
     args: {
+        locale: 'de',
         content: {
             createdAt: new Date(),
             updatedAt: new Date(),
@@ -21,6 +22,14 @@ export const Example = {
                             question: 'Foo?',
                             answer: 'Foo!',
                         },
+                        {
+                            id: 1234,
+                            createdAt: new Date(),
+                            updatedAt: new Date(),
+                            locale: 'de',
+                            question: 'Foo de?',
+                            answer: 'Foo de!',
+                        },
                     ],
                 },
                 {
@@ -36,6 +45,14 @@ export const Example = {
                             question: 'Bar?',
                             answer: 'Bar!',
                         },
+                        {
+                            id: 1234,
+                            createdAt: new Date(),
+                            updatedAt: new Date(),
+                            locale: 'de',
+                            question: 'Bar de?',
+                            answer: 'Bar de!',
+                        },
                     ],
                 },
                 {
@@ -51,6 +68,14 @@ export const Example = {
                             question: 'Baz?',
                             answer: 'Baz!',
                         },
+                        {
+                            id: 1234,
+                            createdAt: new Date(),
+                            updatedAt: new Date(),
+                            locale: 'de',
+                            question: 'Baz de?',
+                            answer: 'Baz de!',
+                        },
                     ],
                 },
             ],

package/dist/collection/components/content/aico-faq-content/aico-faq-content.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"aico-faq-content.stories.js","sourceRoot":"","sources":["../../../../src/components/content/aico-faq-content/aico-faq-content.stories.ts"],"names":[],"mappings":"AAIA,MAAM,IAAI,GAA6B;IACrC,SAAS,EAAE,kBAAkB;CAC9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE;YACP,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,QAAQ,EAAE;gBACR;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,YAAY,EAAE;wBACZ;4BACE,EAAE,EAAE,IAAI;4BACR,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,MAAM,EAAE,OAAO;4BACf,QAAQ,EAAE,MAAM;4BAChB,MAAM,EAAE,MAAM;yBACf;qBACF;iBACF;gBAED;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,YAAY,EAAE;wBACZ;4BACE,EAAE,EAAE,IAAI;4BACR,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,MAAM,EAAE,OAAO;4BACf,QAAQ,EAAE,MAAM;4BAChB,MAAM,EAAE,MAAM;yBACf;qBACF;iBACF;gBAED;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,YAAY,EAAE;wBACZ;4BACE,EAAE,EAAE,IAAI;4BACR,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,MAAM,EAAE,OAAO;4BACf,QAAQ,EAAE,MAAM;4BAChB,MAAM,EAAE,MAAM;yBACf;qBACF;iBACF;aACF;SACY;KAChB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { FaqContent } from '../../../model/article/content/FaqContent';\nimport { JSX } from '../../../components';\n\nconst meta: Meta<JSX.AicoFaqContent> = {\n  component: 'aico-faq-content',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  args: {\n    content: {\n      createdAt: new Date(),\n      updatedAt: new Date(),\n      faqItems: [\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          translations: [\n            {\n              id: 1234,\n              createdAt: new Date(),\n              updatedAt: new Date(),\n              locale: 'en-GB',\n              question: 'Foo?',\n              answer: 'Foo!',\n            },\n          ],\n        },\n\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          translations: [\n            {\n              id: 1234,\n              createdAt: new Date(),\n              updatedAt: new Date(),\n              locale: 'en-GB',\n              question: 'Bar?',\n              answer: 'Bar!',\n            },\n          ],\n        },\n\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          translations: [\n            {\n              id: 1234,\n              createdAt: new Date(),\n              updatedAt: new Date(),\n              locale: 'en-GB',\n              question: 'Baz?',\n              answer: 'Baz!',\n            },\n          ],\n        },\n      ],\n    } as FaqContent,\n  },\n};\n"]}
+{"version":3,"file":"aico-faq-content.stories.js","sourceRoot":"","sources":["../../../../src/components/content/aico-faq-content/aico-faq-content.stories.ts"],"names":[],"mappings":"AAIA,MAAM,IAAI,GAA6B;IACrC,SAAS,EAAE,kBAAkB;CAC9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE;YACP,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,QAAQ,EAAE;gBACR;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,YAAY,EAAE;wBACZ;4BACE,EAAE,EAAE,IAAI;4BACR,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,MAAM,EAAE,OAAO;4BACf,QAAQ,EAAE,MAAM;4BAChB,MAAM,EAAE,MAAM;yBACf;wBACD;4BACE,EAAE,EAAE,IAAI;4BACR,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,MAAM,EAAE,IAAI;4BACZ,QAAQ,EAAE,SAAS;4BACnB,MAAM,EAAE,SAAS;yBAClB;qBACF;iBACF;gBAED;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,YAAY,EAAE;wBACZ;4BACE,EAAE,EAAE,IAAI;4BACR,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,MAAM,EAAE,OAAO;4BACf,QAAQ,EAAE,MAAM;4BAChB,MAAM,EAAE,MAAM;yBACf;wBACD;4BACE,EAAE,EAAE,IAAI;4BACR,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,MAAM,EAAE,IAAI;4BACZ,QAAQ,EAAE,SAAS;4BACnB,MAAM,EAAE,SAAS;yBAClB;qBACF;iBACF;gBAED;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,YAAY,EAAE;wBACZ;4BACE,EAAE,EAAE,IAAI;4BACR,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,MAAM,EAAE,OAAO;4BACf,QAAQ,EAAE,MAAM;4BAChB,MAAM,EAAE,MAAM;yBACf;wBACD;4BACE,EAAE,EAAE,IAAI;4BACR,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,SAAS,EAAE,IAAI,IAAI,EAAE;4BACrB,MAAM,EAAE,IAAI;4BACZ,QAAQ,EAAE,SAAS;4BACnB,MAAM,EAAE,SAAS;yBAClB;qBACF;iBACF;aACF;SACY;KAChB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { FaqContent } from '../../../model/article/content/FaqContent';\nimport { JSX } from '../../../components';\n\nconst meta: Meta<JSX.AicoFaqContent> = {\n  component: 'aico-faq-content',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  args: {\n    locale: 'de',\n    content: {\n      createdAt: new Date(),\n      updatedAt: new Date(),\n      faqItems: [\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          translations: [\n            {\n              id: 1234,\n              createdAt: new Date(),\n              updatedAt: new Date(),\n              locale: 'en-GB',\n              question: 'Foo?',\n              answer: 'Foo!',\n            },\n            {\n              id: 1234,\n              createdAt: new Date(),\n              updatedAt: new Date(),\n              locale: 'de',\n              question: 'Foo de?',\n              answer: 'Foo de!',\n            },\n          ],\n        },\n\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          translations: [\n            {\n              id: 1234,\n              createdAt: new Date(),\n              updatedAt: new Date(),\n              locale: 'en-GB',\n              question: 'Bar?',\n              answer: 'Bar!',\n            },\n            {\n              id: 1234,\n              createdAt: new Date(),\n              updatedAt: new Date(),\n              locale: 'de',\n              question: 'Bar de?',\n              answer: 'Bar de!',\n            },\n          ],\n        },\n\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          translations: [\n            {\n              id: 1234,\n              createdAt: new Date(),\n              updatedAt: new Date(),\n              locale: 'en-GB',\n              question: 'Baz?',\n              answer: 'Baz!',\n            },\n            {\n              id: 1234,\n              createdAt: new Date(),\n              updatedAt: new Date(),\n              locale: 'de',\n              question: 'Baz de?',\n              answer: 'Baz de!',\n            },\n          ],\n        },\n      ],\n    } as FaqContent,\n  },\n};\n"]}

package/dist/collection/components/content/aico-heading-content/aico-heading-content.js

@@ -4,9 +4,11 @@ import { strIsNullOrEmptyOrWhitespace } from "../../../utils/utils";
 export class AicoHeadingContent {
     constructor() {
         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';
@@ -26,7 +28,7 @@ export class AicoHeadingContent {
         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;
@@ -74,6 +76,24 @@ export class AicoHeadingContent {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "'de'"
             }
         };
     }

package/dist/collection/components/content/aico-heading-content/aico-heading-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"aico-heading-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-heading-content/aico-heading-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAUpE,MAAM,OAAO,kBAAkB;;;;IAG7B,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC/F,MAAM,YAAY,GAA0C,EAAE,iBAAiB,EAAE,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;QAC9I,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACvD,YAAY,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;YACpF,YAAY,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YACxF,YAAY,CAAC,kBAAkB,CAAC,GAAG,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC;YAClE,YAAY,CAAC,mBAAmB,CAAC,GAAG,WAAW,CAAC;YAChD,YAAY,CAAC,qBAAqB,CAAC,GAAG,QAAQ,CAAC;SAChD;QAED,MAAM,iBAAiB,GAA0C,EAAE,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,mBAAmB,EAAE,CAAC;QAC1H,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;YACzB,iBAAiB,CAAC,WAAW,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC;SAC/D;QAED,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC1D,iBAAiB,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;SAC5D;QAED,MAAM,gBAAgB,GAA0C,EAAE,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,mBAAmB,EAAE,CAAC;QACzH,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;YACzD,gBAAgB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;SACpD;QAED,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,YAAY;YACpH,EAAC,iBAAiB,IAAC,SAAS,EAAE,WAAW,KAAK,IAAI;gBAChD,WAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,iBAAiB;oBACjD,0BAAoB,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAY,CAAC,GAAI,CAChE;gBACN,YAAM,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,gBAAgB,IAC9C,WAAY,CAAC,WAAW,CACpB,CACW,CAChB,CACP,CAAC;IACJ,CAAC;IAEO,gBAAgB,CAAC,WAAwB;;QAC/C,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE;YACnB,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS;YACjC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS;YACjC,aAAa,EAAE,KAAK;YACpB,IAAI,EAAE,MAAA,IAAI,CAAC,OAAO,CAAC,SAAS,mCAAI,IAAI;YACpC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS;YAClC,YAAY,EAAE,mBAAM,WAAW,EAAG;SACnC,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport ConditionalRender from '../../../utils/ConditionalRender';\nimport { strIsNullOrEmptyOrWhitespace } from '../../../utils/utils';\nimport type { HeadingContent } from '../../../model/article/content/HeadingContent';\nimport type { Translation } from '../../../model/article/Translation';\nimport type { TitleContent } from '../../../model/article/content/TitleContent';\n\n@Component({\n  tag: 'aico-heading-content',\n  styleUrl: 'aico-heading-content.css',\n  scoped: true,\n})\nexport class AicoHeadingContent {\n  @Prop() content!: HeadingContent;\n\n  render() {\n    const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;\n    const contentStyle: { [key: string]: string | undefined } = { 'justify-content': this.content.isTextAtMiddleOfImage ? 'center' : 'flex-end' };\n    if (!strIsNullOrEmptyOrWhitespace(this.content.picture)) {\n      contentStyle['min-height'] = this.content.isImageHeightHalfSize ? '400px' : '600px';\n      contentStyle['background-size'] = this.content.isImageHeightHalfSize ? '100%' : 'cover';\n      contentStyle['background-image'] = `url(${this.content.picture})`;\n      contentStyle['background-repeat'] = 'no-repeat';\n      contentStyle['background-position'] = 'center';\n    }\n\n    const titleWrapperStyle: { [key: string]: string | undefined } = { 'background-color': this.content.textBackgroundColor };\n    if (this.content.fontSize) {\n      titleWrapperStyle['font-size'] = `${this.content.fontSize}px`;\n    }\n\n    if (!strIsNullOrEmptyOrWhitespace(this.content.fontFamily)) {\n      titleWrapperStyle['font-family'] = this.content.fontFamily;\n    }\n\n    const descriptionStyle: { [key: string]: string | undefined } = { 'background-color': this.content.textBackgroundColor };\n    if (!strIsNullOrEmptyOrWhitespace(this.content.textColor)) {\n      descriptionStyle['color'] = this.content.textColor;\n    }\n\n    return (\n      <div class={this.content.isHeadingAlignedWithText ? 'content content-align-with-text' : 'content'} style={contentStyle}>\n        <ConditionalRender condition={translation !== null}>\n          <div class=\"title-wrapper\" style={titleWrapperStyle}>\n            <aico-title-content content={this.makeTitleContent(translation!)} />\n          </div>\n          <span class=\"description\" style={descriptionStyle}>\n            {translation!.description}\n          </span>\n        </ConditionalRender>\n      </div>\n    );\n  }\n\n  private makeTitleContent(translation: Translation): TitleContent {\n    return {\n      id: this.content.id,\n      createdAt: this.content.createdAt,\n      updatedAt: this.content.updatedAt,\n      hasUnderscore: false,\n      size: this.content.titleSize ?? 'h1',\n      titleColor: this.content.textColor,\n      translations: [{ ...translation }],\n    };\n  }\n}\n"]}
+{"version":3,"file":"aico-heading-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-heading-content/aico-heading-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport ConditionalRender from '../../../utils/ConditionalRender';\nimport { strIsNullOrEmptyOrWhitespace } from '../../../utils/utils';\nimport type { HeadingContent } from '../../../model/article/content/HeadingContent';\nimport type { Translation } from '../../../model/article/Translation';\nimport type { TitleContent } from '../../../model/article/content/TitleContent';\n\n@Component({\n  tag: 'aico-heading-content',\n  styleUrl: 'aico-heading-content.css',\n  scoped: true,\n})\nexport class AicoHeadingContent {\n  @Prop() content!: HeadingContent;\n\n  @Prop() locale: string = 'de';\n\n  render() {\n    const translation = this.content.translations.find(translation => translation.locale === this.locale) ?? null;\n    const contentStyle: { [key: string]: string | undefined } = { 'justify-content': this.content.isTextAtMiddleOfImage ? 'center' : 'flex-end' };\n    if (!strIsNullOrEmptyOrWhitespace(this.content.picture)) {\n      contentStyle['min-height'] = this.content.isImageHeightHalfSize ? '400px' : '600px';\n      contentStyle['background-size'] = this.content.isImageHeightHalfSize ? '100%' : 'cover';\n      contentStyle['background-image'] = `url(${this.content.picture})`;\n      contentStyle['background-repeat'] = 'no-repeat';\n      contentStyle['background-position'] = 'center';\n    }\n\n    const titleWrapperStyle: { [key: string]: string | undefined } = { 'background-color': this.content.textBackgroundColor };\n    if (this.content.fontSize) {\n      titleWrapperStyle['font-size'] = `${this.content.fontSize}px`;\n    }\n\n    if (!strIsNullOrEmptyOrWhitespace(this.content.fontFamily)) {\n      titleWrapperStyle['font-family'] = this.content.fontFamily;\n    }\n\n    const descriptionStyle: { [key: string]: string | undefined } = { 'background-color': this.content.textBackgroundColor };\n    if (!strIsNullOrEmptyOrWhitespace(this.content.textColor)) {\n      descriptionStyle['color'] = this.content.textColor;\n    }\n\n    return (\n      <div class={this.content.isHeadingAlignedWithText ? 'content content-align-with-text' : 'content'} style={contentStyle}>\n        <ConditionalRender condition={translation !== null}>\n          <div class=\"title-wrapper\" style={titleWrapperStyle}>\n            <aico-title-content content={this.makeTitleContent(translation!)} locale={this.locale} />\n          </div>\n          <span class=\"description\" style={descriptionStyle}>\n            {translation!.description}\n          </span>\n        </ConditionalRender>\n      </div>\n    );\n  }\n\n  private makeTitleContent(translation: Translation): TitleContent {\n    return {\n      id: this.content.id,\n      createdAt: this.content.createdAt,\n      updatedAt: this.content.updatedAt,\n      hasUnderscore: false,\n      size: this.content.titleSize ?? 'h1',\n      titleColor: this.content.textColor,\n      translations: [{ ...translation }],\n    };\n  }\n}\n"]}

package/dist/collection/components/content/aico-heading-content/aico-heading-content.stories.js

@@ -4,6 +4,7 @@ const meta = {
 export default meta;
 export const Example = {
     args: {
+        locale: 'de',
         content: {
             id: 1234,
             createdAt: new Date(),
@@ -15,6 +16,15 @@ export const Example = {
                     updatedAt: new Date(),
                     title: 'Heading title',
                     description: 'Heading description',
+                    locale: 'de',
+                },
+                {
+                    id: 1234,
+                    createdAt: new Date(),
+                    updatedAt: new Date(),
+                    title: 'Heading title en',
+                    description: 'Heading description en',
+                    locale: 'en',
                 },
             ],
             textColor: 'red',

package/dist/collection/components/content/aico-heading-content/aico-heading-content.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"aico-heading-content.stories.js","sourceRoot":"","sources":["../../../../src/components/content/aico-heading-content/aico-heading-content.stories.ts"],"names":[],"mappings":"AAIA,MAAM,IAAI,GAAiC;IACzC,SAAS,EAAE,sBAAsB;CAClC,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE;YACP,EAAE,EAAE,IAAI;YACR,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,YAAY,EAAE;gBACZ;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,qBAAqB;iBACnC;aACF;YACD,SAAS,EAAE,KAAK;YAChB,mBAAmB,EAAE,MAAM;YAC3B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,4CAA4C;YACrD,QAAQ,EAAE,EAAE;YACZ,wBAAwB,EAAE,IAAI;YAC9B,qBAAqB,EAAE,IAAI;YAC3B,qBAAqB,EAAE,IAAI;SACV;KACpB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { HeadingContent } from '../../../model/article/content/HeadingContent';\nimport { JSX } from '../../../components';\n\nconst meta: Meta<JSX.AicoHeadingContent> = {\n  component: 'aico-heading-content',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  args: {\n    content: {\n      id: 1234,\n      createdAt: new Date(),\n      updatedAt: new Date(),\n      translations: [\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          title: 'Heading title',\n          description: 'Heading description',\n        },\n      ],\n      textColor: 'red',\n      textBackgroundColor: 'gray',\n      titleSize: 'h2',\n      picture: 'https://source.unsplash.com/random/320x240',\n      fontSize: 69,\n      isHeadingAlignedWithText: true,\n      isTextAtMiddleOfImage: true,\n      isImageHeightHalfSize: true,\n    } as HeadingContent,\n  },\n};\n"]}
+{"version":3,"file":"aico-heading-content.stories.js","sourceRoot":"","sources":["../../../../src/components/content/aico-heading-content/aico-heading-content.stories.ts"],"names":[],"mappings":"AAIA,MAAM,IAAI,GAAiC;IACzC,SAAS,EAAE,sBAAsB;CAClC,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE;YACP,EAAE,EAAE,IAAI;YACR,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,YAAY,EAAE;gBACZ;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,KAAK,EAAE,eAAe;oBACtB,WAAW,EAAE,qBAAqB;oBAClC,MAAM,EAAE,IAAI;iBACb;gBACD;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,KAAK,EAAE,kBAAkB;oBACzB,WAAW,EAAE,wBAAwB;oBACrC,MAAM,EAAE,IAAI;iBACb;aACF;YACD,SAAS,EAAE,KAAK;YAChB,mBAAmB,EAAE,MAAM;YAC3B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,4CAA4C;YACrD,QAAQ,EAAE,EAAE;YACZ,wBAAwB,EAAE,IAAI;YAC9B,qBAAqB,EAAE,IAAI;YAC3B,qBAAqB,EAAE,IAAI;SACV;KACpB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { HeadingContent } from '../../../model/article/content/HeadingContent';\nimport { JSX } from '../../../components';\n\nconst meta: Meta<JSX.AicoHeadingContent> = {\n  component: 'aico-heading-content',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Example: Story = {\n  args: {\n    locale: 'de',\n    content: {\n      id: 1234,\n      createdAt: new Date(),\n      updatedAt: new Date(),\n      translations: [\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          title: 'Heading title',\n          description: 'Heading description',\n          locale: 'de',\n        },\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          title: 'Heading title en',\n          description: 'Heading description en',\n          locale: 'en',\n        },\n      ],\n      textColor: 'red',\n      textBackgroundColor: 'gray',\n      titleSize: 'h2',\n      picture: 'https://source.unsplash.com/random/320x240',\n      fontSize: 69,\n      isHeadingAlignedWithText: true,\n      isTextAtMiddleOfImage: true,\n      isImageHeightHalfSize: true,\n    } as HeadingContent,\n  },\n};\n"]}

package/dist/collection/components/content/aico-html-content/aico-html-content.js

@@ -4,12 +4,12 @@ import { strIsNullOrEmptyOrWhitespace } from "../../../utils/utils";
 export class AicoHtmlContent {
     constructor() {
         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 })));
     }
     static get is() { return "aico-html-content"; }
     static get encapsulation() { return "scoped"; }
@@ -45,6 +45,24 @@ export class AicoHtmlContent {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "'de'"
             }
         };
     }

package/dist/collection/components/content/aico-html-content/aico-html-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"aico-html-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-html-content/aico-html-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAOpE,MAAM,OAAO,eAAe;;;;IAG1B,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;YAC1C,OAAO,0BAAmB,CAAC;SAC5B;QAED,OAAO,CACL,EAAC,iBAAiB,IAAC,SAAS,EAAE,CAAC,4BAA4B,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAC5F,WAAK,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAK,GAAI,CACpC,CACrB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { HtmlContent } from '../../../model/article/content/HtmlContent';\nimport ConditionalRender from '../../../utils/ConditionalRender';\nimport { strIsNullOrEmptyOrWhitespace } from '../../../utils/utils';\n\n@Component({\n  tag: 'aico-html-content',\n  styleUrl: 'aico-html-content.css',\n  scoped: true,\n})\nexport class AicoHtmlContent {\n  @Prop() content!: HtmlContent;\n\n  render() {\n    if (this.content.translations.length === 0) {\n      return <aico-no-content />;\n    }\n\n    return (\n      <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(this.content.translations[0].text)}>\n        <div innerHTML={this.content.translations[0].text!} />\n      </ConditionalRender>\n    );\n  }\n}\n"]}
+{"version":3,"file":"aico-html-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-html-content/aico-html-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAOpE,MAAM,OAAO,eAAe;;;sBAGD,IAAI;;IAE7B,MAAM;;QACJ,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,mCAAI,IAAI,CAAC;QAC9G,OAAO,CACL,EAAC,iBAAiB,IAAC,SAAS,EAAE,WAAW,KAAK,IAAI,IAAI,CAAC,4BAA4B,CAAC,WAAW,CAAC,IAAI,CAAC;YACnG,WAAK,SAAS,EAAE,WAAY,CAAC,IAAK,GAAI,CACpB,CACrB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { HtmlContent } from '../../../model/article/content/HtmlContent';\nimport ConditionalRender from '../../../utils/ConditionalRender';\nimport { strIsNullOrEmptyOrWhitespace } from '../../../utils/utils';\n\n@Component({\n  tag: 'aico-html-content',\n  styleUrl: 'aico-html-content.css',\n  scoped: true,\n})\nexport class AicoHtmlContent {\n  @Prop() content!: HtmlContent;\n\n  @Prop() locale: string = 'de';\n\n  render() {\n    const translation = this.content.translations.find(translation => translation.locale === this.locale) ?? null;\n    return (\n      <ConditionalRender condition={translation !== null && !strIsNullOrEmptyOrWhitespace(translation.text)}>\n        <div innerHTML={translation!.text!} />\n      </ConditionalRender>\n    );\n  }\n}\n"]}

package/dist/collection/components/content/aico-link-content/aico-link-content.js

@@ -4,10 +4,11 @@ import { getImageWidthPrc, strIsNullOrEmptyOrWhitespace } from "../../../utils/u
 export class AicoLinkContent {
     constructor() {
         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;
@@ -25,7 +26,7 @@ export class AicoLinkContent {
             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")))));
     }
     static get is() { return "aico-link-content"; }
     static get encapsulation() { return "scoped"; }
@@ -61,6 +62,24 @@ export class AicoLinkContent {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "'de'"
             }
         };
     }

package/dist/collection/components/content/aico-link-content/aico-link-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"aico-link-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-link-content/aico-link-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport ConditionalRender from '../../../utils/ConditionalRender';\nimport { getImageWidthPrc, strIsNullOrEmptyOrWhitespace } from '../../../utils/utils';\nimport type { LinkContent } from '../../../model/article/content/LinkContent';\n\n@Component({\n  tag: 'aico-link-content',\n  styleUrl: 'aico-link-content.css',\n  scoped: true,\n})\nexport class AicoLinkContent {\n  @Prop() content!: LinkContent;\n\n  render() {\n    const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;\n    const buttonLinkStyle: { [key: string]: string | undefined } = {};\n    if (this.content.textButtonColor) {\n      buttonLinkStyle['color'] = this.content.textButtonColor;\n    }\n\n    if (this.content.textButtonColor) {\n      buttonLinkStyle['background-color'] = this.content.textButtonColor;\n    }\n\n    if (this.content.fontSize) {\n      buttonLinkStyle['font-size'] = `${this.content.fontSize}px`;\n    }\n\n    if (this.content.fontFamily) {\n      buttonLinkStyle['font-family'] = this.content.fontFamily;\n    }\n\n    if (this.content.hoverColor) {\n      buttonLinkStyle['--hover-button-color'] = this.content.hoverColor;\n    }\n\n    return (\n      <Host>\n        <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(translation?.title)}>\n          <label>{translation?.title}: </label>\n        </ConditionalRender>\n        <ConditionalRender condition={this.content.isImageLink !== undefined && this.content.isImageLink}>\n          <div class=\"image-link-wrapper\" style={{ 'justify-content': this.content.picturePosition }}>\n            <a\n              href={translation?.link ?? '#'}\n              target=\"_blank\"\n              class=\"image-link\"\n              style={{ width: this.content.isImageFullSize ? '100%' : getImageWidthPrc(this.content.pictureSize) }}\n            >\n              <img src={translation?.imageUrl} />\n            </a>\n          </div>\n        </ConditionalRender>\n        <ConditionalRender condition={this.content.isImageLink === null || !this.content.isImageLink}>\n          <a href={translation?.link ?? '#'} target=\"_blank\" class={this.content.isButtonLink ? 'button-link' : ''} style={buttonLinkStyle}>\n            <span class=\"arrow-button\"> &#8594;</span>\n          </a>\n        </ConditionalRender>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"aico-link-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-link-content/aico-link-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport ConditionalRender from '../../../utils/ConditionalRender';\nimport { getImageWidthPrc, strIsNullOrEmptyOrWhitespace } from '../../../utils/utils';\nimport type { LinkContent } from '../../../model/article/content/LinkContent';\n\n@Component({\n  tag: 'aico-link-content',\n  styleUrl: 'aico-link-content.css',\n  scoped: true,\n})\nexport class AicoLinkContent {\n  @Prop() content!: LinkContent;\n\n  @Prop() locale: string = 'de';\n\n  render() {\n    const translation = this.content.translations.find(translation => translation.locale === this.locale) ?? null;\n    const buttonLinkStyle: { [key: string]: string | undefined } = {};\n    if (this.content.textButtonColor) {\n      buttonLinkStyle['color'] = this.content.textButtonColor;\n    }\n\n    if (this.content.textButtonColor) {\n      buttonLinkStyle['background-color'] = this.content.textButtonColor;\n    }\n\n    if (this.content.fontSize) {\n      buttonLinkStyle['font-size'] = `${this.content.fontSize}px`;\n    }\n\n    if (this.content.fontFamily) {\n      buttonLinkStyle['font-family'] = this.content.fontFamily;\n    }\n\n    if (this.content.hoverColor) {\n      buttonLinkStyle['--hover-button-color'] = this.content.hoverColor;\n    }\n\n    return (\n      <Host>\n        <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(translation?.title)}>\n          <label>{translation?.title}: </label>\n        </ConditionalRender>\n        <ConditionalRender condition={this.content.isImageLink !== undefined && this.content.isImageLink}>\n          <div class=\"image-link-wrapper\" style={{ 'justify-content': this.content.picturePosition }}>\n            <a\n              href={translation?.link ?? '#'}\n              target=\"_blank\"\n              class=\"image-link\"\n              style={{ width: this.content.isImageFullSize ? '100%' : getImageWidthPrc(this.content.pictureSize) }}\n            >\n              <img src={translation?.imageUrl} />\n            </a>\n          </div>\n        </ConditionalRender>\n        <ConditionalRender condition={this.content.isImageLink === null || !this.content.isImageLink}>\n          <a href={translation?.link ?? '#'} target=\"_blank\" class={this.content.isButtonLink ? 'button-link' : ''} style={buttonLinkStyle}>\n            <span class=\"arrow-button\"> &#8594;</span>\n          </a>\n        </ConditionalRender>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/content/aico-link-content/aico-link-content.stories.js

@@ -4,6 +4,7 @@ const meta = {
 export default meta;
 export const ImageLink = {
     args: {
+        locale: 'de',
         content: {
             id: 1234,
             createdAt: new Date(),
@@ -17,6 +18,17 @@ export const ImageLink = {
                     link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',
                     linkText: 'Rick :)',
                     imageUrl: 'https://source.unsplash.com/random/320x240',
+                    locale: 'de'
+                },
+                {
+                    id: 1234,
+                    createdAt: new Date(),
+                    updatedAt: new Date(),
+                    title: 'Link title en',
+                    link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',
+                    linkText: 'Rick :)',
+                    imageUrl: 'https://source.unsplash.com/random/320x240',
+                    locale: 'en'
                 },
             ],
             pictureSize: 'medium',
@@ -31,6 +43,7 @@ export const ImageLink = {
 };
 export const ButtonLink = {
     args: {
+        locale: 'de',
         content: {
             id: 1234,
             createdAt: new Date(),
@@ -44,6 +57,17 @@ export const ButtonLink = {
                     link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',
                     linkText: 'Rick :)',
                     imageUrl: 'https://source.unsplash.com/random/320x240',
+                    locale: 'de'
+                },
+                {
+                    id: 1234,
+                    createdAt: new Date(),
+                    updatedAt: new Date(),
+                    title: 'Link title en',
+                    link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',
+                    linkText: 'Rick :)',
+                    imageUrl: 'https://source.unsplash.com/random/320x240',
+                    locale: 'en'
                 },
             ],
             pictureSize: 'medium',

package/dist/collection/components/content/aico-link-content/aico-link-content.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"aico-link-content.stories.js","sourceRoot":"","sources":["../../../../src/components/content/aico-link-content/aico-link-content.stories.ts"],"names":[],"mappings":"AAIA,MAAM,IAAI,GAA8B;IACtC,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE;YACP,EAAE,EAAE,IAAI;YACR,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,YAAY,EAAE;gBACZ;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,KAAK,EAAE,YAAY;oBACnB,IAAI,EAAE,6CAA6C;oBACnD,QAAQ,EAAE,SAAS;oBACnB,QAAQ,EAAE,4CAA4C;iBACvD;aACF;YAED,WAAW,EAAE,QAAQ;YAErB,YAAY,EAAE,IAAI;YAClB,eAAe,EAAE,KAAK;YACtB,WAAW,EAAE,IAAI;YAEjB,qBAAqB,EAAE,SAAS;YAChC,eAAe,EAAE,KAAK;YACtB,UAAU,EAAE,MAAM;SACJ;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,OAAO,EAAE;YACP,EAAE,EAAE,IAAI;YACR,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,YAAY,EAAE;gBACZ;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,KAAK,EAAE,YAAY;oBACnB,IAAI,EAAE,6CAA6C;oBACnD,QAAQ,EAAE,SAAS;oBACnB,QAAQ,EAAE,4CAA4C;iBACvD;aACF;YAED,WAAW,EAAE,QAAQ;YAErB,YAAY,EAAE,IAAI;YAClB,eAAe,EAAE,KAAK;YACtB,WAAW,EAAE,KAAK;YAElB,qBAAqB,EAAE,SAAS;YAChC,eAAe,EAAE,KAAK;YACtB,UAAU,EAAE,MAAM;SACJ;KACjB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { LinkContent } from '../../../model/article/content/LinkContent';\nimport { JSX } from '../../../components';\n\nconst meta: Meta<JSX.AicoLinkContent> = {\n  component: 'aico-link-content',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const ImageLink: Story = {\n  args: {\n    content: {\n      id: 1234,\n      createdAt: new Date(),\n      updatedAt: new Date(),\n      translations: [\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          title: 'Link title',\n          link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n          linkText: 'Rick :)',\n          imageUrl: 'https://source.unsplash.com/random/320x240',\n        },\n      ],\n\n      pictureSize: 'medium',\n\n      isButtonLink: true,\n      isImageFullSize: false,\n      isImageLink: true,\n\n      backgroundButtonColor: '#efefef',\n      textButtonColor: 'red',\n      hoverColor: 'pink',\n    } as LinkContent,\n  },\n};\n\nexport const ButtonLink: Story = {\n  args: {\n    content: {\n      id: 1234,\n      createdAt: new Date(),\n      updatedAt: new Date(),\n      translations: [\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          title: 'Link title',\n          link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n          linkText: 'Rick :)',\n          imageUrl: 'https://source.unsplash.com/random/320x240',\n        },\n      ],\n\n      pictureSize: 'medium',\n\n      isButtonLink: true,\n      isImageFullSize: false,\n      isImageLink: false,\n\n      backgroundButtonColor: '#efefef',\n      textButtonColor: 'red',\n      hoverColor: 'pink',\n    } as LinkContent,\n  },\n};\n"]}
+{"version":3,"file":"aico-link-content.stories.js","sourceRoot":"","sources":["../../../../src/components/content/aico-link-content/aico-link-content.stories.ts"],"names":[],"mappings":"AAIA,MAAM,IAAI,GAA8B;IACtC,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE;YACP,EAAE,EAAE,IAAI;YACR,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,YAAY,EAAE;gBACZ;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,KAAK,EAAE,YAAY;oBACnB,IAAI,EAAE,6CAA6C;oBACnD,QAAQ,EAAE,SAAS;oBACnB,QAAQ,EAAE,4CAA4C;oBACtD,MAAM,EAAE,IAAI;iBACb;gBACD;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,KAAK,EAAE,eAAe;oBACtB,IAAI,EAAE,6CAA6C;oBACnD,QAAQ,EAAE,SAAS;oBACnB,QAAQ,EAAE,4CAA4C;oBACtD,MAAM,EAAE,IAAI;iBACb;aACF;YAED,WAAW,EAAE,QAAQ;YAErB,YAAY,EAAE,IAAI;YAClB,eAAe,EAAE,KAAK;YACtB,WAAW,EAAE,IAAI;YAEjB,qBAAqB,EAAE,SAAS;YAChC,eAAe,EAAE,KAAK;YACtB,UAAU,EAAE,MAAM;SACJ;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE;YACP,EAAE,EAAE,IAAI;YACR,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,YAAY,EAAE;gBACZ;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,KAAK,EAAE,YAAY;oBACnB,IAAI,EAAE,6CAA6C;oBACnD,QAAQ,EAAE,SAAS;oBACnB,QAAQ,EAAE,4CAA4C;oBACtD,MAAM,EAAE,IAAI;iBACb;gBACD;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,KAAK,EAAE,eAAe;oBACtB,IAAI,EAAE,6CAA6C;oBACnD,QAAQ,EAAE,SAAS;oBACnB,QAAQ,EAAE,4CAA4C;oBACtD,MAAM,EAAE,IAAI;iBACb;aACF;YAED,WAAW,EAAE,QAAQ;YAErB,YAAY,EAAE,IAAI;YAClB,eAAe,EAAE,KAAK;YACtB,WAAW,EAAE,KAAK;YAElB,qBAAqB,EAAE,SAAS;YAChC,eAAe,EAAE,KAAK;YACtB,UAAU,EAAE,MAAM;SACJ;KACjB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { LinkContent } from '../../../model/article/content/LinkContent';\nimport { JSX } from '../../../components';\n\nconst meta: Meta<JSX.AicoLinkContent> = {\n  component: 'aico-link-content',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const ImageLink: Story = {\n  args: {\n    locale: 'de',\n    content: {\n      id: 1234,\n      createdAt: new Date(),\n      updatedAt: new Date(),\n      translations: [\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          title: 'Link title',\n          link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n          linkText: 'Rick :)',\n          imageUrl: 'https://source.unsplash.com/random/320x240',\n          locale: 'de'\n        },\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          title: 'Link title en',\n          link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n          linkText: 'Rick :)',\n          imageUrl: 'https://source.unsplash.com/random/320x240',\n          locale: 'en'\n        },\n      ],\n\n      pictureSize: 'medium',\n\n      isButtonLink: true,\n      isImageFullSize: false,\n      isImageLink: true,\n\n      backgroundButtonColor: '#efefef',\n      textButtonColor: 'red',\n      hoverColor: 'pink',\n    } as LinkContent,\n  },\n};\n\nexport const ButtonLink: Story = {\n  args: {\n    locale: 'de',\n    content: {\n      id: 1234,\n      createdAt: new Date(),\n      updatedAt: new Date(),\n      translations: [\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          title: 'Link title',\n          link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n          linkText: 'Rick :)',\n          imageUrl: 'https://source.unsplash.com/random/320x240',\n          locale: 'de'\n        },\n        {\n          id: 1234,\n          createdAt: new Date(),\n          updatedAt: new Date(),\n          title: 'Link title en',\n          link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n          linkText: 'Rick :)',\n          imageUrl: 'https://source.unsplash.com/random/320x240',\n          locale: 'en'\n        },\n      ],\n\n      pictureSize: 'medium',\n\n      isButtonLink: true,\n      isImageFullSize: false,\n      isImageLink: false,\n\n      backgroundButtonColor: '#efefef',\n      textButtonColor: 'red',\n      hoverColor: 'pink',\n    } as LinkContent,\n  },\n};\n"]}

package/dist/collection/components/content/aico-page-content/aico-page-content.js

@@ -4,15 +4,16 @@ import ConditionalRender from "../../../utils/ConditionalRender";
 export class AicoPageContent {
     constructor() {
         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))))));
     }
     static get is() { return "aico-page-content"; }
     static get encapsulation() { return "scoped"; }
@@ -48,6 +49,24 @@ export class AicoPageContent {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "'de'"
             }
         };
     }

package/dist/collection/components/content/aico-page-content/aico-page-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"aico-page-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-page-content/aico-page-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AAOjE,MAAM,OAAO,eAAe;;;;IAK1B,MAAM;;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACvH,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE;YACnC,WAAK,KAAK,EAAC,cAAc;gBACvB,WAAK,KAAK,EAAC,iBAAiB;oBAC1B,WACE,KAAK,EAAC,yCAAyC,EAC/C,KAAK,EAAE,EAAE,iBAAiB,EAAE,QAAQ,EAAE,EACtC,GAAG,EAAE,MAAA,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,mCAAI,oGAAoG,EAC3I,GAAG,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,mCAAI,oBAAoB,GAClD,CACE;gBACN,WAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE;oBACpD,UAAI,KAAK,EAAC,YAAY,IAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAAM;oBAC/C,EAAC,iBAAiB,IAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;wBACrH,SAAG,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,YAAa,EAAE,KAAK,EAAC,WAAW,IACnD,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,UAAU,mCAAI,kBAAkB,CAC5C,CACc;oBACpB,EAAC,iBAAiB,IAAC,SAAS,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB;wBAC1D,SACE,IAAI,EAAC,GAAG,EACR,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE;;gCACX,CAAC,CAAC,cAAc,EAAE,CAAC;gCACnB,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;4BACvC,CAAC,IAEA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,UAAU,mCAAI,kBAAkB,CAC5C,CACc,CAChB;gBACN,EAAC,iBAAiB,IAAC,SAAS,EAAE,WAAW,KAAK,IAAI,IAAI,CAAC,4BAA4B,CAAC,WAAW,CAAC,OAAO,CAAC;oBACtG,WAAK,KAAK,EAAC,aAAa;wBACtB,aAAO,KAAK,EAAC,YAAY,IAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAS,CACpD,CACY,CAChB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport type { PageContent } from '../../../model/article/content/PageContent';\nimport { strIsNullOrEmptyOrWhitespace } from '../../../utils/utils';\nimport ConditionalRender from '../../../utils/ConditionalRender';\n\n@Component({\n  tag: 'aico-page-content',\n  styleUrl: 'aico-page-content.css',\n  scoped: true,\n})\nexport class AicoPageContent {\n  @Prop() content!: PageContent;\n\n  @Event() pageClicked?: EventEmitter<PageContent>;\n\n  render() {\n    const translation = this.content.landingPage.translations.length > 0 ? this.content.landingPage.translations[0] : null;\n    return (\n      <Host style={{ 'max-width': '300px' }}>\n        <div class=\"card pe-auto\">\n          <div class=\"ratio ratio-4x3\">\n            <img\n              class=\"card-img-top img-fluid object-fit-cover\"\n              style={{ 'object-position': 'center' }}\n              src={this.content.landingPage.image ?? 'https://cdn.shopify.com/s/files/1/0565/2201/4813/files/blank-img.png?v=13432316686103745237%20406w'}\n              alt={translation?.imageAlt ?? 'Landing page image'}\n            />\n          </div>\n          <div class=\"card-body\" style={{ 'min-height': '6rem' }}>\n            <h5 class=\"card-title\">{translation?.name}</h5>\n            <ConditionalRender condition={this.content.openExternalLink && !strIsNullOrEmptyOrWhitespace(this.content.externalLink)}>\n              <a href={this.content.externalLink!} class=\"card-link\">\n                {translation?.buttonText ?? 'Navigate to page'}\n              </a>\n            </ConditionalRender>\n            <ConditionalRender condition={!this.content.openExternalLink}>\n              <a\n                href=\"#\"\n                class=\"card-link\"\n                onClick={e => {\n                  e.preventDefault();\n                  this.pageClicked?.emit(this.content);\n                }}\n              >\n                {translation?.buttonText ?? 'Navigate to page'}\n              </a>\n            </ConditionalRender>\n          </div>\n          <ConditionalRender condition={translation !== null && !strIsNullOrEmptyOrWhitespace(translation.excerpt)}>\n            <div class=\"card-footer\">\n              <small class=\"text-muted\">{translation?.excerpt}</small>\n            </div>\n          </ConditionalRender>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"aico-page-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-page-content/aico-page-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AAOjE,MAAM,OAAO,eAAe;;;sBAGD,IAAI;;IAI7B,MAAM;;QACJ,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,mCAAI,IAAI,CAAC;QAC1H,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE;YACnC,WAAK,KAAK,EAAC,cAAc;gBACvB,WAAK,KAAK,EAAC,iBAAiB;oBAC1B,WACE,KAAK,EAAC,yCAAyC,EAC/C,KAAK,EAAE,EAAE,iBAAiB,EAAE,QAAQ,EAAE,EACtC,GAAG,EAAE,MAAA,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,mCAAI,oGAAoG,EAC3I,GAAG,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,mCAAI,oBAAoB,GAClD,CACE;gBACN,WAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE;oBACpD,UAAI,KAAK,EAAC,YAAY,IAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAAM;oBAC/C,EAAC,iBAAiB,IAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;wBACrH,SAAG,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,YAAa,EAAE,KAAK,EAAC,WAAW,IACnD,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,UAAU,mCAAI,kBAAkB,CAC5C,CACc;oBACpB,EAAC,iBAAiB,IAAC,SAAS,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB;wBAC1D,SACE,IAAI,EAAC,GAAG,EACR,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE;;gCACX,CAAC,CAAC,cAAc,EAAE,CAAC;gCACnB,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;4BACvC,CAAC,IAEA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,UAAU,mCAAI,kBAAkB,CAC5C,CACc,CAChB;gBACN,EAAC,iBAAiB,IAAC,SAAS,EAAE,WAAW,KAAK,IAAI,IAAI,CAAC,4BAA4B,CAAC,WAAW,CAAC,OAAO,CAAC;oBACtG,WAAK,KAAK,EAAC,aAAa;wBACtB,aAAO,KAAK,EAAC,YAAY,IAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAS,CACpD,CACY,CAChB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport type { PageContent } from '../../../model/article/content/PageContent';\nimport { strIsNullOrEmptyOrWhitespace } from '../../../utils/utils';\nimport ConditionalRender from '../../../utils/ConditionalRender';\n\n@Component({\n  tag: 'aico-page-content',\n  styleUrl: 'aico-page-content.css',\n  scoped: true,\n})\nexport class AicoPageContent {\n  @Prop() content!: PageContent;\n\n  @Prop() locale: string = 'de';\n\n  @Event() pageClicked?: EventEmitter<PageContent>;\n\n  render() {\n    const translation = this.content.landingPage.translations.find(translation => translation.locale === this.locale) ?? null;\n    return (\n      <Host style={{ 'max-width': '300px' }}>\n        <div class=\"card pe-auto\">\n          <div class=\"ratio ratio-4x3\">\n            <img\n              class=\"card-img-top img-fluid object-fit-cover\"\n              style={{ 'object-position': 'center' }}\n              src={this.content.landingPage.image ?? 'https://cdn.shopify.com/s/files/1/0565/2201/4813/files/blank-img.png?v=13432316686103745237%20406w'}\n              alt={translation?.imageAlt ?? 'Landing page image'}\n            />\n          </div>\n          <div class=\"card-body\" style={{ 'min-height': '6rem' }}>\n            <h5 class=\"card-title\">{translation?.name}</h5>\n            <ConditionalRender condition={this.content.openExternalLink && !strIsNullOrEmptyOrWhitespace(this.content.externalLink)}>\n              <a href={this.content.externalLink!} class=\"card-link\">\n                {translation?.buttonText ?? 'Navigate to page'}\n              </a>\n            </ConditionalRender>\n            <ConditionalRender condition={!this.content.openExternalLink}>\n              <a\n                href=\"#\"\n                class=\"card-link\"\n                onClick={e => {\n                  e.preventDefault();\n                  this.pageClicked?.emit(this.content);\n                }}\n              >\n                {translation?.buttonText ?? 'Navigate to page'}\n              </a>\n            </ConditionalRender>\n          </div>\n          <ConditionalRender condition={translation !== null && !strIsNullOrEmptyOrWhitespace(translation.excerpt)}>\n            <div class=\"card-footer\">\n              <small class=\"text-muted\">{translation?.excerpt}</small>\n            </div>\n          </ConditionalRender>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/content/aico-page-content/aico-page-content.stories.js

@@ -4,6 +4,7 @@ const meta = {
 export default meta;
 export const Exampl = {
     args: {
+        locale: 'de',
         content: {
             id: 1234,
             createdAt: new Date(),
@@ -26,6 +27,16 @@ export const Exampl = {
                         imageAlt: 'Image alt',
                         excerpt: 'Soon',
                     },
+                    {
+                        id: 1234,
+                        createdAt: new Date(),
+                        updatedAt: new Date(),
+                        locale: 'de',
+                        name: 'Page name de',
+                        buttonText: 'See the article de',
+                        imageAlt: 'Image alt',
+                        excerpt: 'Soon de',
+                    },
                 ],
                 isPublic: false,
                 isTemplate: false,

package/dist/collection/components/content/aico-page-content/aico-page-content.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"aico-page-content.stories.js","sourceRoot":"","sources":["../../../../src/components/content/aico-page-content/aico-page-content.stories.ts"],"names":[],"mappings":"AAIA,MAAM,IAAI,GAA8B;IACtC,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,MAAM,GAAa;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE;YACP,EAAE,EAAE,IAAI;YACR,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,gBAAgB,EAAE,IAAI;YACtB,YAAY,EAAE,6CAA6C;YAC3D,eAAe,EAAE,KAAK;YACtB,WAAW,EAAE;gBACX,EAAE,EAAE,IAAI;gBACR,SAAS,EAAE,IAAI,IAAI,EAAE;gBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;gBACrB,YAAY,EAAE;oBACZ;wBACE,EAAE,EAAE,IAAI;wBACR,SAAS,EAAE,IAAI,IAAI,EAAE;wBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;wBACrB,MAAM,EAAE,OAAO;wBACf,IAAI,EAAE,WAAW;wBACjB,UAAU,EAAE,iBAAiB;wBAC7B,QAAQ,EAAE,WAAW;wBACrB,OAAO,EAAE,MAAM;qBAChB;iBACF;gBACD,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,KAAK;gBACjB,KAAK,EAAE,4CAA4C;aACpD;SACa;KACjB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { PageContent } from '../../../model/article/content/PageContent';\nimport { JSX } from '../../../components';\n\nconst meta: Meta<JSX.AicoPageContent> = {\n  component: 'aico-page-content',\n};\n\nexport default meta;\n\nexport const Exampl: StoryObj = {\n  args: {\n    content: {\n      id: 1234,\n      createdAt: new Date(),\n      updatedAt: new Date(),\n      openExternalLink: true,\n      externalLink: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n      isImageZoomedIn: false,\n      landingPage: {\n        id: 1234,\n        createdAt: new Date(),\n        updatedAt: new Date(),\n        translations: [\n          {\n            id: 1234,\n            createdAt: new Date(),\n            updatedAt: new Date(),\n            locale: 'en-GB',\n            name: 'Page name',\n            buttonText: 'See the article',\n            imageAlt: 'Image alt',\n            excerpt: 'Soon',\n          },\n        ],\n        isPublic: false,\n        isTemplate: false,\n        image: 'https://source.unsplash.com/random/320x240',\n      },\n    } as PageContent,\n  },\n};\n"]}
+{"version":3,"file":"aico-page-content.stories.js","sourceRoot":"","sources":["../../../../src/components/content/aico-page-content/aico-page-content.stories.ts"],"names":[],"mappings":"AAIA,MAAM,IAAI,GAA8B;IACtC,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,MAAM,GAAa;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE;YACP,EAAE,EAAE,IAAI;YACR,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,gBAAgB,EAAE,IAAI;YACtB,YAAY,EAAE,6CAA6C;YAC3D,eAAe,EAAE,KAAK;YACtB,WAAW,EAAE;gBACX,EAAE,EAAE,IAAI;gBACR,SAAS,EAAE,IAAI,IAAI,EAAE;gBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;gBACrB,YAAY,EAAE;oBACZ;wBACE,EAAE,EAAE,IAAI;wBACR,SAAS,EAAE,IAAI,IAAI,EAAE;wBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;wBACrB,MAAM,EAAE,OAAO;wBACf,IAAI,EAAE,WAAW;wBACjB,UAAU,EAAE,iBAAiB;wBAC7B,QAAQ,EAAE,WAAW;wBACrB,OAAO,EAAE,MAAM;qBAChB;oBACD;wBACE,EAAE,EAAE,IAAI;wBACR,SAAS,EAAE,IAAI,IAAI,EAAE;wBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;wBACrB,MAAM,EAAE,IAAI;wBACZ,IAAI,EAAE,cAAc;wBACpB,UAAU,EAAE,oBAAoB;wBAChC,QAAQ,EAAE,WAAW;wBACrB,OAAO,EAAE,SAAS;qBACnB;iBACF;gBACD,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,KAAK;gBACjB,KAAK,EAAE,4CAA4C;aACpD;SACa;KACjB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { PageContent } from '../../../model/article/content/PageContent';\nimport { JSX } from '../../../components';\n\nconst meta: Meta<JSX.AicoPageContent> = {\n  component: 'aico-page-content',\n};\n\nexport default meta;\n\nexport const Exampl: StoryObj = {\n  args: {\n    locale: 'de',\n    content: {\n      id: 1234,\n      createdAt: new Date(),\n      updatedAt: new Date(),\n      openExternalLink: true,\n      externalLink: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n      isImageZoomedIn: false,\n      landingPage: {\n        id: 1234,\n        createdAt: new Date(),\n        updatedAt: new Date(),\n        translations: [\n          {\n            id: 1234,\n            createdAt: new Date(),\n            updatedAt: new Date(),\n            locale: 'en-GB',\n            name: 'Page name',\n            buttonText: 'See the article',\n            imageAlt: 'Image alt',\n            excerpt: 'Soon',\n          },\n          {\n            id: 1234,\n            createdAt: new Date(),\n            updatedAt: new Date(),\n            locale: 'de',\n            name: 'Page name de',\n            buttonText: 'See the article de',\n            imageAlt: 'Image alt',\n            excerpt: 'Soon de',\n          },\n        ],\n        isPublic: false,\n        isTemplate: false,\n        image: 'https://source.unsplash.com/random/320x240',\n      },\n    } as PageContent,\n  },\n};\n"]}

package/dist/collection/components/content/aico-table-content/aico-table-content.js

@@ -3,17 +3,19 @@ import ConditionalRender from "../../../utils/ConditionalRender";
 export class AicoTableContent {
     constructor() {
         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);
                 }
@@ -66,6 +68,24 @@ export class AicoTableContent {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "'de'"
             }
         };
     }

package/dist/collection/components/content/aico-table-content/aico-table-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"aico-table-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-table-content/aico-table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAInD,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AAOjE,MAAM,OAAO,gBAAgB;;;;IAG3B,MAAM;;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE/F,MAAM,oBAAoB,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,UAAU,mCAAI,SAAS,CAAC;QAClE,MAAM,qBAAqB,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,WAAW,mCAAI,SAAS,CAAC;QAEpE,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;YAC7B,WAAK,KAAK,EAAC,WAAW;gBACpB,EAAC,iBAAiB,IAAC,SAAS,EAAE,WAAW,KAAK,IAAI;oBAChD,0BAAoB,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAY,CAAC,GAAI;oBAC5F,SAAG,KAAK,EAAC,WAAW,IAAE,WAAY,CAAC,cAAc,CAAK,CACpC;gBACpB,aAAO,KAAK,EAAC,eAAe,IACzB,IAAI,CAAC,OAAO,CAAC,SAAS;qBACpB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC;qBAC/B,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;oBAClB,OAAO,CACL,UAAI,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,EAAE,IACpH,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;wBACxB,MAAM,WAAW,GAAG,GAAG,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAC7E,IAAI,CAAC,WAAW,EAAE;4BAChB,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,aAAS,CAAC,CAAC,CAAC,aAAS,CAAC;yBAC9C;wBAED,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,cAAK,WAAW,CAAC,UAAU,CAAM,CAAC,CAAC,CAAC,cAAK,WAAW,CAAC,UAAU,CAAM,CAAC;oBAC/F,CAAC,CAAC,CACC,CACN,CAAC;gBACJ,CAAC,CAAC,CACE,CACJ,CACF,CACP,CAAC;IACJ,CAAC;IAEO,gBAAgB,CAAC,WAAwB;;QAC/C,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE;YACnB,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS;YACjC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS;YACjC,aAAa,EAAE,KAAK;YACpB,IAAI,EAAE,MAAA,IAAI,CAAC,OAAO,CAAC,SAAS,mCAAI,IAAI;YACpC,YAAY,EAAE,mBAAM,WAAW,EAAG;SACnC,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport type { TableContent } from '../../../model/article/content/TableContet';\nimport type { Translation } from '../../../model/article/Translation';\nimport type { TitleContent } from '../../../model/article/content/TitleContent';\nimport ConditionalRender from '../../../utils/ConditionalRender';\n\n@Component({\n  tag: 'aico-table-content',\n  styleUrl: 'aico-table-content.css',\n  scoped: true,\n})\nexport class AicoTableContent {\n  @Prop() content!: TableContent;\n\n  render() {\n    const translation = this.content.translations.length > 0 ? this.content.translations[0] : null;\n\n    const firstBackgroundColor = this.content.firstColor ?? '#d6dfe1';\n    const secondBackgroundColor = this.content.secondColor ?? '#e6eced';\n\n    return (\n      <div class=\"content-table card\">\n        <div class=\"card-body\">\n          <ConditionalRender condition={translation !== null}>\n            <aico-title-content class=\"card-title mt-0\" content={this.makeTitleContent(translation!)} />\n            <p class=\"card-text\">{translation!.additionalText}</p>\n          </ConditionalRender>\n          <table class=\"table-content\">\n            {this.content.tableRows\n              .sort((a, b) => a.sort - b.sort)\n              .map((row, index) => {\n                return (\n                  <tr style={{ 'font-weight': '400', 'background-color': index % 2 === 0 ? firstBackgroundColor : secondBackgroundColor }}>\n                    {row.rowColumns.map(col => {\n                      const translation = col.translations.length > 0 ? col.translations[0] : null;\n                      if (!translation) {\n                        return row.isHeading ? <th></th> : <td></td>;\n                      }\n\n                      return row.isHeading ? <th>{translation.columnData}</th> : <td>{translation.columnData}</td>;\n                    })}\n                  </tr>\n                );\n              })}\n          </table>\n        </div>\n      </div>\n    );\n  }\n\n  private makeTitleContent(translation: Translation): TitleContent {\n    return {\n      id: this.content.id,\n      createdAt: this.content.createdAt,\n      updatedAt: this.content.updatedAt,\n      hasUnderscore: false,\n      size: this.content.titleSize ?? 'h2',\n      translations: [{ ...translation }],\n    };\n  }\n}\n"]}
+{"version":3,"file":"aico-table-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-table-content/aico-table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAInD,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AAOjE,MAAM,OAAO,gBAAgB;;;sBAGF,IAAI;;IAE7B,MAAM;;QACJ,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,mCAAI,IAAI,CAAC;QAE9G,MAAM,oBAAoB,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,UAAU,mCAAI,SAAS,CAAC;QAClE,MAAM,qBAAqB,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,WAAW,mCAAI,SAAS,CAAC;QAEpE,OAAO,CACL,WAAK,KAAK,EAAC,oBAAoB;YAC7B,WAAK,KAAK,EAAC,WAAW;gBACpB,EAAC,iBAAiB,IAAC,SAAS,EAAE,WAAW,KAAK,IAAI;oBAChD,0BAAoB,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAY,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAI;oBACjH,SAAG,KAAK,EAAC,WAAW,IAAE,WAAY,CAAC,cAAc,CAAK,CACpC;gBACpB,aAAO,KAAK,EAAC,eAAe,IACzB,IAAI,CAAC,OAAO,CAAC,SAAS;qBACpB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC;qBAC/B,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;oBAClB,OAAO,CACL,UAAI,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB,EAAE,IACpH,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;;wBACxB,MAAM,WAAW,GAAG,MAAA,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,mCAAI,IAAI,CAAC;wBACrG,IAAI,CAAC,WAAW,EAAE;4BAChB,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,aAAS,CAAC,CAAC,CAAC,aAAS,CAAC;yBAC9C;wBAED,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,cAAK,WAAW,CAAC,UAAU,CAAM,CAAC,CAAC,CAAC,cAAK,WAAW,CAAC,UAAU,CAAM,CAAC;oBAC/F,CAAC,CAAC,CACC,CACN,CAAC;gBACJ,CAAC,CAAC,CACE,CACJ,CACF,CACP,CAAC;IACJ,CAAC;IAEO,gBAAgB,CAAC,WAAwB;;QAC/C,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE;YACnB,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS;YACjC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS;YACjC,aAAa,EAAE,KAAK;YACpB,IAAI,EAAE,MAAA,IAAI,CAAC,OAAO,CAAC,SAAS,mCAAI,IAAI;YACpC,YAAY,EAAE,mBAAM,WAAW,EAAG;SACnC,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport type { TableContent } from '../../../model/article/content/TableContet';\nimport type { Translation } from '../../../model/article/Translation';\nimport type { TitleContent } from '../../../model/article/content/TitleContent';\nimport ConditionalRender from '../../../utils/ConditionalRender';\n\n@Component({\n  tag: 'aico-table-content',\n  styleUrl: 'aico-table-content.css',\n  scoped: true,\n})\nexport class AicoTableContent {\n  @Prop() content!: TableContent;\n\n  @Prop() locale: string = 'de';\n\n  render() {\n    const translation = this.content.translations.find(translation => translation.locale === this.locale) ?? null;\n\n    const firstBackgroundColor = this.content.firstColor ?? '#d6dfe1';\n    const secondBackgroundColor = this.content.secondColor ?? '#e6eced';\n\n    return (\n      <div class=\"content-table card\">\n        <div class=\"card-body\">\n          <ConditionalRender condition={translation !== null}>\n            <aico-title-content class=\"card-title mt-0\" content={this.makeTitleContent(translation!)} locale={this.locale} />\n            <p class=\"card-text\">{translation!.additionalText}</p>\n          </ConditionalRender>\n          <table class=\"table-content\">\n            {this.content.tableRows\n              .sort((a, b) => a.sort - b.sort)\n              .map((row, index) => {\n                return (\n                  <tr style={{ 'font-weight': '400', 'background-color': index % 2 === 0 ? firstBackgroundColor : secondBackgroundColor }}>\n                    {row.rowColumns.map(col => {\n                      const translation = col.translations.find(translation => translation.locale === this.locale) ?? null;\n                      if (!translation) {\n                        return row.isHeading ? <th></th> : <td></td>;\n                      }\n\n                      return row.isHeading ? <th>{translation.columnData}</th> : <td>{translation.columnData}</td>;\n                    })}\n                  </tr>\n                );\n              })}\n          </table>\n        </div>\n      </div>\n    );\n  }\n\n  private makeTitleContent(translation: Translation): TitleContent {\n    return {\n      id: this.content.id,\n      createdAt: this.content.createdAt,\n      updatedAt: this.content.updatedAt,\n      hasUnderscore: false,\n      size: this.content.titleSize ?? 'h2',\n      translations: [{ ...translation }],\n    };\n  }\n}\n"]}