npm - @aiconomy/aico-components - Versions diffs - 0.0.57 → 0.0.78 - Mend

@aiconomy/aico-components 0.0.57 → 0.0.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

package/dist/collection/components/content/aico-document-content/aico-document-content.js CHANGED Viewed

@@ -4,10 +4,11 @@ import { strIsNullOrEmptyOrWhitespace } from "../../../utils/utils";
 export class AicoDocumentContent {
     constructor() {
         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) {
@@ -30,7 +31,7 @@ export class AicoDocumentContent {
         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')))));
     }
     static get is() { return "aico-document-content"; }
     static get encapsulation() { return "scoped"; }
@@ -66,6 +67,24 @@ export class AicoDocumentContent {
                     "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-document-content/aico-document-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aico-document-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-document-content/aico-document-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;AAQpE,MAAM,OAAO,mBAAmB~~;;;;IAG9B~~,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,UAAU,GAA0C,EAAE,CAAC;QAC7D,MAAM,YAAY,GAA0C,EAAE,CAAC;QAE/D,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;YACzB,UAAU,CAAC,WAAW,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC;YACvD,YAAY,CAAC,WAAW,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC;SAC1D;QAED,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;YAC3B,UAAU,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;YACpD,YAAY,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;SACvD;QAED,IAAI,IAAI,CAAC,OAAO,CAAC,2BAA2B,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,EAAE;YAC5E,YAAY,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;SACtD;QAED,IAAI,IAAI,CAAC,OAAO,CAAC,2BAA2B,IAAI,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE;YAClF,YAAY,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC;SACvE;QAED,IAAI,IAAI,CAAC,OAAO,CAAC,2BAA2B,IAAI,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE;YAC9E,YAAY,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC;SAC/D;QAED,IAAI,IAAI,CAAC,OAAO,CAAC,2BAA2B,IAAI,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE;YAC7E,YAAY,CAAC,sBAAsB,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;SACtE;QAED,OAAO,CACL,WAAK,KAAK,EAAC,MAAM;YACf,EAAC,iBAAiB,IAAC,SAAS,EAAE,CAAC,4BAA4B,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAC;gBAC/E,WAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAC,OAAO,EAAC,GAAG,EAAE,WAAY,CAAC,OAAO,GAAI,CACjD;YACpB,WAAK,KAAK,EAAC,WAAW;gBACpB,EAAC,iBAAiB,IAAC,SAAS,EAAE,CAAC,4BAA4B,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;oBAC5E,SAAG,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAC5D,IAAI,CAAC,OAAO,CAAC,IAAI,CAChB,CACc;gBACpB,EAAC,iBAAiB,IAAC,SAAS,EAAE,CAAC,4BAA4B,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CAAC;oBAChF,SACE,IAAI,EAAE,WAAY,CAAC,QAAQ,EAC3B,MAAM,EAAC,QAAQ,EACf,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE,0BAA0B,IAAI,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE;wBAEpG;4BACE,WAAK,KAAK,EAAC,4BAA4B,EAAC,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;gCAChG,YAAM,CAAC,EAAC,2KAA2K,GAAQ,CACvL,CACJ,EACH,MAAA,WAAY,CAAC,KAAK,mCAAI,MAAM,CAC3B,CACc,CAChB,CACF,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport ConditionalRender from '../../../utils/ConditionalRender';\nimport { strIsNullOrEmptyOrWhitespace } from '../../../utils/utils';\nimport type { DocumentContent } from '../../../model/article/content/DocumentContent';\n\n@Component({\n tag: 'aico-document-content',\n styleUrl: 'aico-document-content.css',\n scoped: true,\n})\nexport class AicoDocumentContent {\n @Prop() content!: DocumentContent;\n\n render() {\n const translation = this.content.translations.~~length~~ > 0 ? this.~~content.translations[0]~~ : null;\n const linkStyles: { [key: string]: string \| undefined } = {};\n const buttonStyles: { [key: string]: string \| undefined } = {};\n\n if (this.content.fontSize) {\n linkStyles['font-size'] = `${this.content.fontSize}px`;\n buttonStyles['font-size'] = `${this.content.fontSize}px`;\n }\n\n if (this.content.fontFamily) {\n linkStyles['font-family'] = this.content.fontFamily;\n buttonStyles['font-family'] = this.content.fontFamily;\n }\n\n if (this.content.isDocumentDisplayedAsButton && this.content.buttonTextColor) {\n buttonStyles['color'] = this.content.buttonTextColor;\n }\n\n if (this.content.isDocumentDisplayedAsButton && this.content.buttonBackgroundColor) {\n buttonStyles['background-color'] = this.content.buttonBackgroundColor;\n }\n\n if (this.content.isDocumentDisplayedAsButton && this.content.buttonBorderColor) {\n buttonStyles['border-color'] = this.content.buttonBorderColor;\n }\n\n if (this.content.isDocumentDisplayedAsButton && this.content.buttonHoverColor) {\n buttonStyles['--hover-button-color'] = this.content.buttonHoverColor;\n }\n\n return (\n <div class=\"card\">\n <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(translation?.picture)}>\n <img class=\"card-img-top\" alt=\"image\" src={translation!.picture} />\n </ConditionalRender>\n <div class=\"card-body\">\n <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(this.content.link)}>\n <a class=\"card-link\" style={linkStyles} href={this.content.link}>\n {this.content.link}\n </a>\n </ConditionalRender>\n <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(translation?.document)}>\n <a\n href={translation!.document}\n target=\"_blank\"\n style={buttonStyles}\n class={`card-link align-middle ${this.content.isDocumentDisplayedAsButton ? 'btn button-link' : ''}`}\n >\n <i>\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" width=\"24\" height=\"24\" viewBox=\"0 0 50 50\">\n <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\"></path>\n </svg>\n </i>\n {translation!.title ?? 'File'}\n </a>\n </ConditionalRender>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"aico-document-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-document-content/aico-document-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 { DocumentContent } from '../../../model/article/content/DocumentContent';\n\n@Component({\n tag: 'aico-document-content',\n styleUrl: 'aico-document-content.css',\n scoped: true,\n})\nexport class AicoDocumentContent {\n @Prop() content!: DocumentContent;\n\n @Prop() locale: string = 'de';\n\n render() {\n const translation = this.content.translations.find(translation => translation.locale === this.locale) ?? null;\n const linkStyles: { [key: string]: string \| undefined } = {};\n const buttonStyles: { [key: string]: string \| undefined } = {};\n\n if (this.content.fontSize) {\n linkStyles['font-size'] = `${this.content.fontSize}px`;\n buttonStyles['font-size'] = `${this.content.fontSize}px`;\n }\n\n if (this.content.fontFamily) {\n linkStyles['font-family'] = this.content.fontFamily;\n buttonStyles['font-family'] = this.content.fontFamily;\n }\n\n if (this.content.isDocumentDisplayedAsButton && this.content.buttonTextColor) {\n buttonStyles['color'] = this.content.buttonTextColor;\n }\n\n if (this.content.isDocumentDisplayedAsButton && this.content.buttonBackgroundColor) {\n buttonStyles['background-color'] = this.content.buttonBackgroundColor;\n }\n\n if (this.content.isDocumentDisplayedAsButton && this.content.buttonBorderColor) {\n buttonStyles['border-color'] = this.content.buttonBorderColor;\n }\n\n if (this.content.isDocumentDisplayedAsButton && this.content.buttonHoverColor) {\n buttonStyles['--hover-button-color'] = this.content.buttonHoverColor;\n }\n\n return (\n <div class=\"card\">\n <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(translation?.picture)}>\n <img class=\"card-img-top\" alt=\"image\" src={translation!.picture} />\n </ConditionalRender>\n <div class=\"card-body\">\n <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(this.content.link)}>\n <a class=\"card-link\" style={linkStyles} href={this.content.link}>\n {this.content.link}\n </a>\n </ConditionalRender>\n <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(translation?.document)}>\n <a\n href={translation!.document}\n target=\"_blank\"\n style={buttonStyles}\n class={`card-link align-middle ${this.content.isDocumentDisplayedAsButton ? 'btn button-link' : ''}`}\n >\n <i>\n <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" width=\"24\" height=\"24\" viewBox=\"0 0 50 50\">\n <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\"></path>\n </svg>\n </i>\n {translation!.title ?? 'File'}\n </a>\n </ConditionalRender>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/content/aico-document-content/aico-document-content.stories.js CHANGED Viewed

@@ -4,6 +4,7 @@ const meta = {
 export default meta;
 export const Example = {
     args: {
+        locale: 'de',
         content: {
             id: 1234,
             createdAt: new Date(),
@@ -16,6 +17,16 @@ export const Example = {
                     title: 'Document title',
                     picture: 'https://source.unsplash.com/random/320x240',
                     document: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',
+                    locale: 'de'
+                },
+                {
+                    id: 1234,
+                    createdAt: new Date(),
+                    updatedAt: new Date(),
+                    title: 'Document title en',
+                    picture: 'https://source.unsplash.com/random/320x240',
+                    document: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',
+                    locale: 'en'
                 },
             ],
             link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',

package/dist/collection/components/content/aico-document-content/aico-document-content.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aico-document-content.stories.js","sourceRoot":"","sources":["../../../../src/components/content/aico-document-content/aico-document-content.stories.ts"],"names":[],"mappings":"AAIA,MAAM,IAAI,GAAkC;IAC1C,SAAS,EAAE,uBAAuB;CACnC,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,gBAAgB;oBACvB,OAAO,EAAE,4CAA4C;oBACrD,QAAQ,EAAE,6CAA6C;~~iBACxD~~;aACF;YACD,IAAI,EAAE,6CAA6C;YACnD,2BAA2B,EAAE,IAAI;YACjC,iBAAiB,EAAE,KAAK;YACxB,qBAAqB,EAAE,MAAM;YAC7B,eAAe,EAAE,OAAO;YACxB,gBAAgB,EAAE,MAAM;SACN;KACrB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { DocumentContent } from '../../../model/article/content/DocumentContent';\nimport { JSX } from '../../../components';\n\nconst meta: Meta<JSX.AicoDocumentContent> = {\n component: 'aico-document-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: 'Document title',\n picture: 'https://source.unsplash.com/random/320x240',\n document: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n },\n ],\n link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n isDocumentDisplayedAsButton: true,\n buttonBorderColor: 'red',\n buttonBackgroundColor: 'gray',\n buttonTextColor: 'green',\n buttonHoverColor: 'pink',\n } as DocumentContent,\n },\n};\n"]}
1	+ {"version":3,"file":"aico-document-content.stories.js","sourceRoot":"","sources":["../../../../src/components/content/aico-document-content/aico-document-content.stories.ts"],"names":[],"mappings":"AAIA,MAAM,IAAI,GAAkC;IAC1C,SAAS,EAAE,uBAAuB;CACnC,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,gBAAgB;oBACvB,OAAO,EAAE,4CAA4C;oBACrD,QAAQ,EAAE,6CAA6C;oBACvD,MAAM,EAAE,IAAI;iBACb;gBACD;oBACE,EAAE,EAAE,IAAI;oBACR,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,SAAS,EAAE,IAAI,IAAI,EAAE;oBACrB,KAAK,EAAE,mBAAmB;oBAC1B,OAAO,EAAE,4CAA4C;oBACrD,QAAQ,EAAE,6CAA6C;oBACvD,MAAM,EAAE,IAAI;iBACb;aACF;YACD,IAAI,EAAE,6CAA6C;YACnD,2BAA2B,EAAE,IAAI;YACjC,iBAAiB,EAAE,KAAK;YACxB,qBAAqB,EAAE,MAAM;YAC7B,eAAe,EAAE,OAAO;YACxB,gBAAgB,EAAE,MAAM;SACN;KACrB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { DocumentContent } from '../../../model/article/content/DocumentContent';\nimport { JSX } from '../../../components';\n\nconst meta: Meta<JSX.AicoDocumentContent> = {\n component: 'aico-document-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: 'Document title',\n picture: 'https://source.unsplash.com/random/320x240',\n document: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n locale: 'de'\n },\n {\n id: 1234,\n createdAt: new Date(),\n updatedAt: new Date(),\n title: 'Document title en',\n picture: 'https://source.unsplash.com/random/320x240',\n document: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n locale: 'en'\n },\n ],\n link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',\n isDocumentDisplayedAsButton: true,\n buttonBorderColor: 'red',\n buttonBackgroundColor: 'gray',\n buttonTextColor: 'green',\n buttonHoverColor: 'pink',\n } as DocumentContent,\n },\n};\n"]}

package/dist/collection/components/content/aico-faq-content/aico-faq-content.js CHANGED Viewed

@@ -3,10 +3,12 @@ import "bootstrap";
 export class AicoFaqContent {
     constructor() {
         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;
             }
@@ -47,6 +49,24 @@ export class AicoFaqContent {
                     "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-faq-content/aico-faq-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aico-faq-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-faq-content/aico-faq-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,WAAW,CAAC;AAOnB,MAAM,OAAO,cAAc~~;;;;IAGzB~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,UAAI,KAAK,EAAC,iBAAiB,UAAS;YACpC,WAAK,KAAK,EAAC,WAAW,EAAC,EAAE,EAAC,oBAAoB,IAC3C,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;gBAC5C,MAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,~~MAAM~~,~~GAAG,~~CAAC,~~CAAC~~,CAAC,CAAC,~~OAAO~~,CAAC,~~YAAY~~,~~CAAC~~,~~CAAC~~,CAAC,~~CAAC~~,CAAC,~~CAAC~~,IAAI,CAAC;~~gBACrF~~,IAAI,CAAC,WAAW,EAAE;oBAChB,OAAO,IAAI,CAAC;iBACb;gBAED,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;oBACzB,UAAI,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,WAAW,KAAK,EAAE;wBACjD,cACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,QAAQ,oBACE,UAAU,oBACT,aAAa,KAAK,EAAE,mBACtB,OAAO,mBACN,YAAY,KAAK,EAAE,IAEjC,WAAW,CAAC,QAAQ,CACd,CACN;oBACL,WAAK,EAAE,EAAE,YAAY,KAAK,EAAE,EAAE,KAAK,EAAC,6BAA6B,qBAAkB,WAAW,KAAK,EAAE,oBAAiB,qBAAqB;wBACzI,WAAK,KAAK,EAAC,gBAAgB,IAAE,WAAW,CAAC,MAAM,CAAO,CAClD,CACF,CACP,CAAC;YACJ,CAAC,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport type { FaqContent } from '../../../model/article/content/FaqContent';\nimport 'bootstrap';\n\n@Component({\n tag: 'aico-faq-content',\n styleUrl: 'aico-faq-content.css',\n scoped: true,\n})\nexport class AicoFaqContent {\n @Prop() content!: FaqContent;\n\n render() {\n return (\n <Host>\n <h2 class=\"card-title mb-2\">FAQ</h2>\n <div class=\"accordion\" id=\"aico-faq-accordion\">\n {this.content.faqItems.map((faqItem, index) => {\n const translation = faqItem.translations.~~length~~ > 0 ? ~~faqItem~~.~~translations[0]~~ : null;\n if (!translation) {\n return null;\n }\n\n return (\n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\" id={`heading-${index}`}>\n <button\n class=\"accordion-button collapsed\"\n type=\"button\"\n data-bs-toggle=\"collapse\"\n data-bs-target={`#collapse-${index}`}\n aria-expanded=\"false\"\n aria-controls={`collapse-${index}`}\n >\n {translation.question}\n </button>\n </h2>\n <div id={`collapse-${index}`} class=\"accordion-collapse collapse\" aria-labelledby={`heading-${index}`} data-bs-parent=\"#aico-faq-accordion\">\n <div class=\"accordion-body\">{translation.answer}</div>\n </div>\n </div>\n );\n })}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"aico-faq-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-faq-content/aico-faq-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,WAAW,CAAC;AAOnB,MAAM,OAAO,cAAc;;;sBAGA,IAAI;;IAE7B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,UAAI,KAAK,EAAC,iBAAiB,UAAS;YACpC,WAAK,KAAK,EAAC,WAAW,EAAC,EAAE,EAAC,oBAAoB,IAC3C,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;;gBAC5C,MAAM,WAAW,GAAG,MAAA,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,mCAAI,IAAI,CAAC;gBACzG,IAAI,CAAC,WAAW,EAAE;oBAChB,OAAO,IAAI,CAAC;iBACb;gBAED,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;oBACzB,UAAI,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,WAAW,KAAK,EAAE;wBACjD,cACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,QAAQ,oBACE,UAAU,oBACT,aAAa,KAAK,EAAE,mBACtB,OAAO,mBACN,YAAY,KAAK,EAAE,IAEjC,WAAW,CAAC,QAAQ,CACd,CACN;oBACL,WAAK,EAAE,EAAE,YAAY,KAAK,EAAE,EAAE,KAAK,EAAC,6BAA6B,qBAAkB,WAAW,KAAK,EAAE,oBAAiB,qBAAqB;wBACzI,WAAK,KAAK,EAAC,gBAAgB,IAAE,WAAW,CAAC,MAAM,CAAO,CAClD,CACF,CACP,CAAC;YACJ,CAAC,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport type { FaqContent } from '../../../model/article/content/FaqContent';\nimport 'bootstrap';\n\n@Component({\n tag: 'aico-faq-content',\n styleUrl: 'aico-faq-content.css',\n scoped: true,\n})\nexport class AicoFaqContent {\n @Prop() content!: FaqContent;\n\n @Prop() locale: string = 'de';\n\n render() {\n return (\n <Host>\n <h2 class=\"card-title mb-2\">FAQ</h2>\n <div class=\"accordion\" id=\"aico-faq-accordion\">\n {this.content.faqItems.map((faqItem, index) => {\n const translation = faqItem.translations.find(translation => translation.locale === this.locale) ?? null;\n if (!translation) {\n return null;\n }\n\n return (\n <div class=\"accordion-item\">\n <h2 class=\"accordion-header\" id={`heading-${index}`}>\n <button\n class=\"accordion-button collapsed\"\n type=\"button\"\n data-bs-toggle=\"collapse\"\n data-bs-target={`#collapse-${index}`}\n aria-expanded=\"false\"\n aria-controls={`collapse-${index}`}\n >\n {translation.question}\n </button>\n </h2>\n <div id={`collapse-${index}`} class=\"accordion-collapse collapse\" aria-labelledby={`heading-${index}`} data-bs-parent=\"#aico-faq-accordion\">\n <div class=\"accordion-body\">{translation.answer}</div>\n </div>\n </div>\n );\n })}\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aico-link-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-link-content/aico-link-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAQtF,MAAM,OAAO,eAAe~~;;;;IAG1B~~,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,eAAe,GAA0C,EAAE,CAAC;QAClE,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,EAAE;YAChC,eAAe,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;SACzD;QAED,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,EAAE;YAChC,eAAe,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;SACpE;QAED,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;YACzB,eAAe,CAAC,WAAW,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC;SAC7D;QAED,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;YAC3B,eAAe,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;SAC1D;QAED,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;YAC3B,eAAe,CAAC,sBAAsB,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;SACnE;QAED,OAAO,CACL,EAAC,IAAI;YACH,EAAC,iBAAiB,IAAC,SAAS,EAAE,CAAC,4BAA4B,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,CAAC;gBAC7E,iBAAQ,WAAW,aAAX,WAAW;oBAAX,WAAW,CAAE,KAAK;yBAAW,CACnB;YACpB,EAAC,iBAAiB,IAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW;gBAC9F,WAAK,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,EAAE;oBACxF,SACE,IAAI,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,GAAG,EAC9B,MAAM,EAAC,QAAQ,EACf,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;wBAEpG,WAAK,GAAG,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,GAAI,CACjC,CACA,CACY;YACpB,EAAC,iBAAiB,IAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;gBAC1F,SAAG,IAAI,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,GAAG,EAAE,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,eAAe;oBAC9H,YAAM,KAAK,EAAC,cAAc,cAAgB,CACxC,CACc,CACf,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","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\"> →</span>\n </a>\n </ConditionalRender>\n </Host>\n );\n }\n}\n"]}
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 @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\"> →</span>\n </a>\n </ConditionalRender>\n </Host>\n );\n }\n}\n"]}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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"]}