@aiconomy/aico-components 0.0.13 → 0.0.53

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

@@ -0,0 +1,59 @@
+const meta = {
+    component: 'aico-link-content',
+};
+export default meta;
+export const ImageLink = {
+    args: {
+        content: {
+            id: 1234,
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            translations: [
+                {
+                    id: 1234,
+                    createdAt: new Date(),
+                    updatedAt: new Date(),
+                    title: 'Link title',
+                    link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',
+                    linkText: 'Rick :)',
+                    imageUrl: 'https://source.unsplash.com/random/320x240',
+                },
+            ],
+            pictureSize: 'medium',
+            isButtonLink: true,
+            isImageFullSize: false,
+            isImageLink: true,
+            backgroundButtonColor: '#efefef',
+            textButtonColor: 'red',
+            hoverColor: 'pink',
+        },
+    },
+};
+export const ButtonLink = {
+    args: {
+        content: {
+            id: 1234,
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            translations: [
+                {
+                    id: 1234,
+                    createdAt: new Date(),
+                    updatedAt: new Date(),
+                    title: 'Link title',
+                    link: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',
+                    linkText: 'Rick :)',
+                    imageUrl: 'https://source.unsplash.com/random/320x240',
+                },
+            ],
+            pictureSize: 'medium',
+            isButtonLink: true,
+            isImageFullSize: false,
+            isImageLink: false,
+            backgroundButtonColor: '#efefef',
+            textButtonColor: 'red',
+            hoverColor: 'pink',
+        },
+    },
+};
+//# sourceMappingURL=aico-link-content.stories.js.map

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

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

package/dist/collection/components/content/aico-news-content/aico-news-content.css

@@ -0,0 +1,11 @@
+.news-article {
+  cursor: pointer;
+}
+
+.news-article-img {
+  transition: scale 0.5s ease-in-out;
+}
+
+.news-article:hover .news-article-img {
+  scale: 1.2;
+}

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

@@ -0,0 +1,79 @@
+import { h } from "@stencil/core";
+import ConditionalRender from "../../../utils/ConditionalRender";
+import { strIsNullOrEmptyOrWhitespace } from "../../../utils/utils";
+export class AicoNewsContent {
+    constructor() {
+        this.content = undefined;
+    }
+    render() {
+        return (h("div", { class: "card-group" }, this.content.aicoShopNews.map(news => {
+            var _a, _b, _c, _d;
+            return (h("div", { class: "news-article card h-100 pe-auto", onClick: () => {
+                    var _a;
+                    (_a = this.newsArticleClicked) === null || _a === void 0 ? void 0 : _a.emit(news);
+                } }, h("div", { class: "ratio ratio-4x3 overflow-hidden " }, h("img", { class: "news-article-img card-img-top img-fluid object-fit-cover", style: { 'object-position': 'center' }, src: (_b = (_a = news.image) !== null && _a !== void 0 ? _a : news.headlineImage) !== null && _b !== void 0 ? _b : 'https://cdn.shopify.com/s/files/1/0565/2201/4813/files/blank-img.png?v=13432316686103745237%20406w' })), h("div", { class: "card-body", style: { 'min-height': '6rem', 'background-color': (_c = this.content.textBackgroundColor) !== null && _c !== void 0 ? _c : 'royalBlue' } }, h("h5", { class: "card-title" }, news.name)), h(ConditionalRender, { condition: !strIsNullOrEmptyOrWhitespace(news.excerpt) }, h("div", { class: "card-footer", style: { 'background-color': (_d = this.content.textBackgroundColor) !== null && _d !== void 0 ? _d : 'royalBlue', 'color': 'white' } }, h("small", { class: "text-muted" }, news.excerpt)))));
+        })));
+    }
+    static get is() { return "aico-news-content"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["aico-news-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["aico-news-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "content": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NewsContent",
+                    "resolved": "{ id: string | number; createdAt: Date; updatedAt: Date; titleSize: string; maxPerRow: number; maxToDisplay: number; aicoShopNews: { id: string | number; translations: { id: string | number; createdAt: Date; updatedAt: Date; locale: string; shouldShowTranslation: boolean; title?: string | null | undefined; text?: string | null | undefined; name?: string | null | undefined; description?: string | null | undefined; excerpt?: string | null | undefined; image?: string | null | undefined; optimizedImage?: string | null | undefined; portraitImage?: string | null | undefined; optimizedPortraitImage?: string | null | undefined; optimizedListImage?: string | null | undefined; }[]; isActive: boolean; isSpecialArticle: boolean; brandIds: (string | number)[]; sellerIds: (string | number)[]; newsCategory: { id: string | number; createdAt: Date; updatedAt: Date; translations: { id: string | number; createdAt: Date; updatedAt: Date; locale: string; title?: string | null | undefined; text?: string | null | undefined; name?: string | null | undefined; webName?: string | null | undefined; description?: string | null | undefined; smallDescription?: string | null | undefined; }[]; isActive: boolean; sortingNumber: number; sorting_number: number; is_active: boolean; image?: string | null | undefined; }; newsTags: { id: string | number; createdAt: Date; updatedAt: Date; translations: { id: string | number; createdAt: Date; updatedAt: Date; locale: string; title?: string | null | undefined; text?: string | null | undefined; name?: string | null | undefined; webName?: string | null | undefined; }; }[]; album: { id: string | number; createdAt: Date; updatedAt: Date; images: { id: string | number; createdAt: Date; updatedAt: Date; translations: { id: string | number; createdAt: Date; updatedAt: Date; locale: string; title?: string | null | undefined; text?: string | null | undefined; name?: string | null | undefined; description?: string | null | undefined; alternativeText?: string | null | undefined; caption?: string | null | undefined; alternative_text?: string | null | undefined; }[]; url?: string | null | undefined; type?: string | null | undefined; order?: number | null | undefined; optimizedImage?: string | null | undefined; }[]; name?: string | null | undefined; }; name?: string | null | undefined; description?: string | null | undefined; pageTitle?: string | null | undefined; metaDescription?: string | null | undefined; urlHandle?: string | null | undefined; excerpt?: string | null | undefined; publishDate?: Date | null | undefined; author?: string | null | undefined; videoUrl?: string | null | undefined; image?: string | null | undefined; headlineImage?: string | null | undefined; portraitImage?: string | null | undefined; optimizedPortraitImage?: string | null | undefined; optimizedImage?: string | null | undefined; optimizedListImage?: string | null | undefined; contentBuilder?: any; }[]; landscapePicture?: string | null | undefined; portraitPicture?: string | null | undefined; title?: string | null | undefined; text?: string | null | undefined; textColor?: string | null | undefined; textBackgroundColor?: string | null | undefined; textHoverColor?: string | null | undefined; IMPORTANT?: string | null | undefined; text_hover_color?: string | null | undefined; }",
+                    "references": {
+                        "NewsContent": {
+                            "location": "import",
+                            "path": "../../../model/article/content/NewsContent",
+                            "id": "src/model/article/content/NewsContent.ts::NewsContent"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "newsArticleClicked",
+                "name": "newsArticleClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "NewsArticle",
+                    "resolved": "{ id: string | number; translations: { id: string | number; createdAt: Date; updatedAt: Date; locale: string; shouldShowTranslation: boolean; title?: string | null | undefined; text?: string | null | undefined; name?: string | null | undefined; description?: string | null | undefined; excerpt?: string | null | undefined; image?: string | null | undefined; optimizedImage?: string | null | undefined; portraitImage?: string | null | undefined; optimizedPortraitImage?: string | null | undefined; optimizedListImage?: string | null | undefined; }[]; isActive: boolean; isSpecialArticle: boolean; brandIds: (string | number)[]; sellerIds: (string | number)[]; newsCategory: { id: string | number; createdAt: Date; updatedAt: Date; translations: { id: string | number; createdAt: Date; updatedAt: Date; locale: string; title?: string | null | undefined; text?: string | null | undefined; name?: string | null | undefined; webName?: string | null | undefined; description?: string | null | undefined; smallDescription?: string | null | undefined; }[]; isActive: boolean; sortingNumber: number; sorting_number: number; is_active: boolean; image?: string | null | undefined; }; newsTags: { id: string | number; createdAt: Date; updatedAt: Date; translations: { id: string | number; createdAt: Date; updatedAt: Date; locale: string; title?: string | null | undefined; text?: string | null | undefined; name?: string | null | undefined; webName?: string | null | undefined; }; }[]; album: { id: string | number; createdAt: Date; updatedAt: Date; images: { id: string | number; createdAt: Date; updatedAt: Date; translations: { id: string | number; createdAt: Date; updatedAt: Date; locale: string; title?: string | null | undefined; text?: string | null | undefined; name?: string | null | undefined; description?: string | null | undefined; alternativeText?: string | null | undefined; caption?: string | null | undefined; alternative_text?: string | null | undefined; }[]; url?: string | null | undefined; type?: string | null | undefined; order?: number | null | undefined; optimizedImage?: string | null | undefined; }[]; name?: string | null | undefined; }; name?: string | null | undefined; description?: string | null | undefined; pageTitle?: string | null | undefined; metaDescription?: string | null | undefined; urlHandle?: string | null | undefined; excerpt?: string | null | undefined; publishDate?: Date | null | undefined; author?: string | null | undefined; videoUrl?: string | null | undefined; image?: string | null | undefined; headlineImage?: string | null | undefined; portraitImage?: string | null | undefined; optimizedPortraitImage?: string | null | undefined; optimizedImage?: string | null | undefined; optimizedListImage?: string | null | undefined; contentBuilder?: any; }",
+                    "references": {
+                        "NewsArticle": {
+                            "location": "import",
+                            "path": "../../../model/article/content/news/NewsArticle",
+                            "id": "src/model/article/content/news/NewsArticle.ts::NewsArticle"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=aico-news-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"aico-news-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-news-content/aico-news-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGxE,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAOpE,MAAM,OAAO,eAAe;;;;IAK1B,MAAM;QACJ,OAAO,CACL,WAAK,KAAK,EAAC,YAAY,IACpB,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;YACpC,OAAO,CACL,WACE,KAAK,EAAC,iCAAiC,EACvC,OAAO,EAAE,GAAG,EAAE;;oBACZ,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBACtC,CAAC;gBAED,WAAK,KAAK,EAAC,kCAAkC;oBAC3C,WACE,KAAK,EAAC,0DAA0D,EAChE,KAAK,EAAE,EAAE,iBAAiB,EAAE,QAAQ,EAAE,EACtC,GAAG,EAAE,MAAA,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,aAAa,mCAAI,oGAAoG,GAC7I,CACE;gBACN,WAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAA,IAAI,CAAC,OAAO,CAAC,mBAAmB,mCAAI,WAAW,EAAE;oBACzH,UAAI,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,IAAI,CAAM,CACnC;gBACN,EAAC,iBAAiB,IAAC,SAAS,EAAE,CAAC,4BAA4B,CAAC,IAAI,CAAC,OAAO,CAAC;oBACvE,WAAK,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,MAAA,IAAI,CAAC,OAAO,CAAC,mBAAmB,mCAAI,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE;wBACvH,aAAO,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,OAAO,CAAS,CAC5C,CACY,CAChB,CACP,CAAC;QACJ,CAAC,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport type { NewsContent } from '../../../model/article/content/NewsContent';\nimport type { NewsArticle } from '../../../model/article/content/news/NewsArticle';\nimport ConditionalRender from '../../../utils/ConditionalRender';\nimport { strIsNullOrEmptyOrWhitespace } from '../../../utils/utils';\n\n@Component({\n  tag: 'aico-news-content',\n  styleUrl: 'aico-news-content.css',\n  scoped: true,\n})\nexport class AicoNewsContent {\n  @Prop() content!: NewsContent;\n\n  @Event() newsArticleClicked?: EventEmitter<NewsArticle>;\n\n  render() {\n    return (\n      <div class=\"card-group\">\n        {this.content.aicoShopNews.map(news => {\n          return (\n            <div\n              class=\"news-article card h-100 pe-auto\"\n              onClick={() => {\n                this.newsArticleClicked?.emit(news);\n              }}\n            >\n              <div class=\"ratio ratio-4x3 overflow-hidden \">\n                <img\n                  class=\"news-article-img card-img-top img-fluid object-fit-cover\"\n                  style={{ 'object-position': 'center' }}\n                  src={news.image ?? news.headlineImage ?? 'https://cdn.shopify.com/s/files/1/0565/2201/4813/files/blank-img.png?v=13432316686103745237%20406w'}\n                />\n              </div>\n              <div class=\"card-body\" style={{ 'min-height': '6rem', 'background-color': this.content.textBackgroundColor ?? 'royalBlue' }}>\n                <h5 class=\"card-title\">{news.name}</h5>\n              </div>\n              <ConditionalRender condition={!strIsNullOrEmptyOrWhitespace(news.excerpt)}>\n                <div class=\"card-footer\" style={{ 'background-color': this.content.textBackgroundColor ?? 'royalBlue', 'color': 'white' }}>\n                  <small class=\"text-muted\">{news.excerpt}</small>\n                </div>\n              </ConditionalRender>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,43 @@
+const meta = {
+    component: 'aico-news-content',
+};
+export default meta;
+export const Example = {
+    args: {
+        content: {
+            id: 1234,
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            maxPerRow: 3,
+            maxToDisplay: 6,
+            titleSize: 'h1',
+            aicoShopNews: [
+                {
+                    id: 1234,
+                    name: 'Article 1',
+                    image: 'https://source.unsplash.com/random/320x240',
+                    excerpt: 'Tomorrow at 7 PM',
+                },
+                {
+                    id: 1234,
+                    name: 'Article 2',
+                    image: 'https://source.unsplash.com/random/320x240',
+                    excerpt: 'Tomorrow at 8 PM',
+                },
+                {
+                    id: 1234,
+                    name: 'Article 3',
+                    image: 'https://source.unsplash.com/random/320x240',
+                    excerpt: 'Tomorrow at 9 PM',
+                },
+                {
+                    id: 1234,
+                    name: 'Article 4',
+                    image: 'https://source.unsplash.com/random/320x240',
+                    excerpt: 'Tomorrow at 10 PM',
+                },
+            ],
+        },
+    },
+};
+//# sourceMappingURL=aico-news-content.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"aico-news-content.stories.js","sourceRoot":"","sources":["../../../../src/components/content/aico-news-content/aico-news-content.stories.ts"],"names":[],"mappings":"AAIA,MAAM,IAAI,GAA8B;IACtC,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,OAAO,GAAa;IAC/B,IAAI,EAAE;QACJ,OAAO,EAAE;YACP,EAAE,EAAE,IAAI;YACR,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI,IAAI,EAAE;YACrB,SAAS,EAAE,CAAC;YACZ,YAAY,EAAE,CAAC;YACf,SAAS,EAAE,IAAI;YACf,YAAY,EAAE;gBACZ;oBACE,EAAE,EAAE,IAAI;oBACR,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,4CAA4C;oBACnD,OAAO,EAAE,kBAAkB;iBAC5B;gBACD;oBACE,EAAE,EAAE,IAAI;oBACR,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,4CAA4C;oBACnD,OAAO,EAAE,kBAAkB;iBAC5B;gBACD;oBACE,EAAE,EAAE,IAAI;oBACR,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,4CAA4C;oBACnD,OAAO,EAAE,kBAAkB;iBAC5B;gBACD;oBACE,EAAE,EAAE,IAAI;oBACR,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,4CAA4C;oBACnD,OAAO,EAAE,mBAAmB;iBAC7B;aACF;SACa;KACjB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport type { NewsContent } from '../../../model/article/content/NewsContent';\nimport { JSX } from '../../../components';\n\nconst meta: Meta<JSX.AicoNewsContent> = {\n  component: 'aico-news-content',\n};\n\nexport default meta;\n\nexport const Example: StoryObj = {\n  args: {\n    content: {\n      id: 1234,\n      createdAt: new Date(),\n      updatedAt: new Date(),\n      maxPerRow: 3,\n      maxToDisplay: 6,\n      titleSize: 'h1',\n      aicoShopNews: [\n        {\n          id: 1234,\n          name: 'Article 1',\n          image: 'https://source.unsplash.com/random/320x240',\n          excerpt: 'Tomorrow at 7 PM',\n        },\n        {\n          id: 1234,\n          name: 'Article 2',\n          image: 'https://source.unsplash.com/random/320x240',\n          excerpt: 'Tomorrow at 8 PM',\n        },\n        {\n          id: 1234,\n          name: 'Article 3',\n          image: 'https://source.unsplash.com/random/320x240',\n          excerpt: 'Tomorrow at 9 PM',\n        },\n        {\n          id: 1234,\n          name: 'Article 4',\n          image: 'https://source.unsplash.com/random/320x240',\n          excerpt: 'Tomorrow at 10 PM',\n        },\n      ],\n    } as NewsContent,\n  },\n};\n"]}

package/dist/collection/components/content/aico-no-content/aico-no-content.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,19 @@
+import { h } from "@stencil/core";
+export class AicoNoContent {
+    render() {
+        return (h("div", null, h("span", null, "The content cannot be rendered because it is either malformed or not supported.")));
+    }
+    static get is() { return "aico-no-content"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["aico-no-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["aico-no-content.css"]
+        };
+    }
+}
+//# sourceMappingURL=aico-no-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"aico-no-content.js","sourceRoot":"","sources":["../../../../src/components/content/aico-no-content/aico-no-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,CACL;YACE,kGAA4F,CACxF,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'aico-no-content',\n  styleUrl: 'aico-no-content.css',\n  scoped: true,\n})\nexport class AicoNoContent {\n  render() {\n    return (\n      <div>\n        <span>The content cannot be rendered because it is either malformed or not supported.</span>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,79 @@
+import { Host, h } from "@stencil/core";
+import { strIsNullOrEmptyOrWhitespace } from "../../../utils/utils";
+import ConditionalRender from "../../../utils/ConditionalRender";
+export class AicoPageContent {
+    constructor() {
+        this.content = undefined;
+    }
+    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;
+                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))))));
+    }
+    static get is() { return "aico-page-content"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["aico-page-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["aico-page-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "content": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PageContent",
+                    "resolved": "{ id: string | number; createdAt: Date; updatedAt: Date; openExternalLink: boolean; isImageZoomedIn: boolean; landingPage: { id: string | number; createdAt: Date; updatedAt: Date; translations: { id: string | number; createdAt: Date; updatedAt: Date; locale: string; title?: string | null | undefined; text?: string | null | undefined; name?: string | null | undefined; imageAlt?: string | null | undefined; excerpt?: string | null | undefined; buttonText?: string | null | undefined; }[]; isTemplate: boolean; isPublic: boolean; lastSyncAt?: Date | null | undefined; pageTitle?: string | null | undefined; metaDescription?: string | null | undefined; urlHandle?: string | null | undefined; image?: string | null | undefined; focusXCoordinate?: number | null | undefined; focusYCoordinate?: number | null | undefined; focusXPercentage?: number | null | undefined; focusYPercentage?: number | null | undefined; }; buttonBackgroundColor?: string | null | undefined; buttonTextColor?: string | null | undefined; textColor?: string | null | undefined; backgroundColor?: string | null | undefined; externalLink?: string | null | undefined; fontType?: string | null | undefined; fontSize?: number | null | undefined; borderColor?: string | null | undefined; titleColor?: string | null | undefined; }",
+                    "references": {
+                        "PageContent": {
+                            "location": "import",
+                            "path": "../../../model/article/content/PageContent",
+                            "id": "src/model/article/content/PageContent.ts::PageContent"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pageClicked",
+                "name": "pageClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PageContent",
+                    "resolved": "{ id: string | number; createdAt: Date; updatedAt: Date; openExternalLink: boolean; isImageZoomedIn: boolean; landingPage: { id: string | number; createdAt: Date; updatedAt: Date; translations: { id: string | number; createdAt: Date; updatedAt: Date; locale: string; title?: string | null | undefined; text?: string | null | undefined; name?: string | null | undefined; imageAlt?: string | null | undefined; excerpt?: string | null | undefined; buttonText?: string | null | undefined; }[]; isTemplate: boolean; isPublic: boolean; lastSyncAt?: Date | null | undefined; pageTitle?: string | null | undefined; metaDescription?: string | null | undefined; urlHandle?: string | null | undefined; image?: string | null | undefined; focusXCoordinate?: number | null | undefined; focusYCoordinate?: number | null | undefined; focusXPercentage?: number | null | undefined; focusYPercentage?: number | null | undefined; }; buttonBackgroundColor?: string | null | undefined; buttonTextColor?: string | null | undefined; textColor?: string | null | undefined; backgroundColor?: string | null | undefined; externalLink?: string | null | undefined; fontType?: string | null | undefined; fontSize?: number | null | undefined; borderColor?: string | null | undefined; titleColor?: string | null | undefined; }",
+                    "references": {
+                        "PageContent": {
+                            "location": "import",
+                            "path": "../../../model/article/content/PageContent",
+                            "id": "src/model/article/content/PageContent.ts::PageContent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=aico-page-content.js.map

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

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

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

@@ -0,0 +1,37 @@
+const meta = {
+    component: 'aico-page-content',
+};
+export default meta;
+export const Exampl = {
+    args: {
+        content: {
+            id: 1234,
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            openExternalLink: true,
+            externalLink: 'https://www.youtube.com/watch?v=xvFZjo5PgG0',
+            isImageZoomedIn: false,
+            landingPage: {
+                id: 1234,
+                createdAt: new Date(),
+                updatedAt: new Date(),
+                translations: [
+                    {
+                        id: 1234,
+                        createdAt: new Date(),
+                        updatedAt: new Date(),
+                        locale: 'en-GB',
+                        name: 'Page name',
+                        buttonText: 'See the article',
+                        imageAlt: 'Image alt',
+                        excerpt: 'Soon',
+                    },
+                ],
+                isPublic: false,
+                isTemplate: false,
+                image: 'https://source.unsplash.com/random/320x240',
+            },
+        },
+    },
+};
+//# sourceMappingURL=aico-page-content.stories.js.map

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

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

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

@@ -0,0 +1,21 @@
+.table-content {
+  width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.table-content:not([class]) td,
+.table-content:not([class]) th {
+  padding: 10px !important;
+  border: none !important;
+}
+
+.table-content th {
+  font-weight: 700 !important;
+}
+
+.table-content td,
+.table-content th {
+  white-space: pre-line;
+}

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

@@ -0,0 +1,73 @@
+import { h } from "@stencil/core";
+import ConditionalRender from "../../../utils/ConditionalRender";
+export class AicoTableContent {
+    constructor() {
+        this.content = undefined;
+    }
+    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
+            .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;
+                if (!translation) {
+                    return row.isHeading ? h("th", null) : h("td", null);
+                }
+                return row.isHeading ? h("th", null, translation.columnData) : h("td", null, translation.columnData);
+            })));
+        })))));
+    }
+    makeTitleContent(translation) {
+        var _a;
+        return {
+            id: this.content.id,
+            createdAt: this.content.createdAt,
+            updatedAt: this.content.updatedAt,
+            hasUnderscore: false,
+            size: (_a = this.content.titleSize) !== null && _a !== void 0 ? _a : 'h2',
+            translations: [Object.assign({}, translation)],
+        };
+    }
+    static get is() { return "aico-table-content"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["aico-table-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["aico-table-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "content": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableContent",
+                    "resolved": "{ id: string | number; createdAt: Date; updatedAt: Date; } & { translations: ({ id: string | number; createdAt: Date; updatedAt: Date; locale: string; text?: string | null | undefined; title?: string | null | undefined; } & { additionalText?: string | undefined; })[]; sort: number; titleSize?: string | undefined; firstColor?: string | undefined; secondColor?: string | undefined; tableRows: TableContentRow[]; IMPORTANT?: string | undefined; bulletBullets?: object[] | undefined; }",
+                    "references": {
+                        "TableContent": {
+                            "location": "import",
+                            "path": "../../../model/article/content/TableContet",
+                            "id": "src/model/article/content/TableContet.ts::TableContent"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=aico-table-content.js.map

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

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