@ebrains/components 0.2.0-alpha.0 → 0.3.0-alpha.0

package/dist/collection/eds-docs-ui/functional/vue.js

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const EdsDocsVue = () => (h("div", null, h("h2", null, "Vue Wrappers"), h("p", null, "Learn how to use our components in a Vue Application."), h("eds-code-block", { code: "npm install @ebrains/vue", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Define the custom elements"), h("eds-code-block", { code: "import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();", language: "javascript", "copy-label": "Copy Code" }), h("eds-section-core", { "section-title": "Example Vue App", "heading-level": "h3" }, h("eds-code-block", { code: '\n<template>\n  <h1 className="f-heading-02">Vue App</h1>\n\n  <EdsHeader \n    home-url="/" \n    user-feature=false \n    keycloak-url="http://localhost:8080" \n    keycloak-realm="nigeor-realm"\n    keycloak-client-id="stencil-app" \n    links="[\n      { "label": "About", "url": "/about" },\n      { "label": "Focus Areas", "url": "/focus-areas" },\n      { "label": "News & Events", "url": "/news-and-events" },\n      { "label": "Contact", "url": "/contact" }\n    ]">\n  </EdsHeader>\n\n</template>\n\n<script>\n\nimport { EdsHeader } from "@ebrains/vue";\n\nexport default {\n  name: "App",\n  components: {\n    EdsHeader,\n  }\n};\n</script>\n', language: "javascript", "copy-label": "Copy Code" }))));
+export const EdsDocsVue = () => (h("div", null, h("h2", null, "Vue Wrappers"), h("p", null, "Learn how to use our components in a Vue Application."), h("p", null, "Simply install the latest version of our NPM package."), h("eds-code-block", { code: "npm install @ebrains/vue", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Our NPM package already includes the custom elements definitions. However, you can use the components as they are by simply importing and executing the initialization command in your \"main.ts\" file."), h("eds-code-block", { code: "import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();", language: "javascript", "copy-label": "Copy Code" }), h("h2", null, "Passing Properties to Custom Elements Using the ", h("b", null, ".prop"), " Modifier in Vue Wrappers"), h("p", null, "When using Vue wrappers for Stencil components (or any custom elements), you might encounter issues with property names being altered due to HTML\u2019s attribute handling. By default, Vue binds values as HTML attributes, and HTML attributes are case-insensitive. This means that camelCase property names can be transformed into lowercase strings, which can prevent your component from receiving the correct data."), h("h3", null, "How to Use the ", h("b", null, ".prop"), " Modifier"), h("p", null, "When using Vue wrappers, you can pass properties with the .prop modifier by adding it to your binding expression. Here\u2019s an example of how to do it:"), h("div", { class: "mt-8" }, h("eds-alert", { message: "This may lead to issues because Vue binds these as attributes .", intent: "error" })), h("eds-code-block", { code: '<EdsAlert\n  message="This is a default informational alert."\n  intent="default"\n  :pressableLabel="Press Me"\n  :pressableUrl="https://ebrains.eu"\n></EdsAlert>', language: "javascript", "copy-label": "Copy Code" }), h("div", { class: "mt-8" }, h("eds-alert", { message: "Use the .prop modifier to ensure properties are passed correctly.", intent: "success" })), h("eds-code-block", { code: '<EdsAlert\n  message="This is a default informational alert."\n  intent="default"\n  :pressableLabel.prop="Press Me"\n  :pressableUrl.prop="https://ebrains.eu"\n></EdsAlert>', language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Using the ", h("b", null, ".prop"), " modifier in Vue ensures that the data you pass to your custom elements is received as intended. It prevents Vue (and the browser) from transforming camelCase property names into lowercase attributes, thereby maintaining the correct data mapping in your Stencil components."), h("eds-section-core", { "section-title": "Example Vue App", "heading-level": "h3" }, h("eds-code-block", { code: '\n<template>\n  <EdsHeader \n    :inverseHeader.prop="true"\n    :menuEnabled.prop="true">\n  </EdsHeader>\n</template>\n\n<script>\n\nimport { EdsHeader } from "@ebrains/vue";\n\nexport default {\n  name: "App",\n  components: {\n    EdsHeader,\n  }\n};\n</script>\n', language: "javascript", "copy-label": "Copy Code" }))));

package/dist/collection/eds-docs-ui/logo/logo-space/logo-space.js

@@ -5,7 +5,7 @@ import { vLogoMargins } from "../../../../../../../../packages/svgs/src/index";
  */
 export class LogoSpace {
     render() {
-        return (h("div", { key: '941aa1eb81d139e0e9676481b9138bb52f7e83df', class: "container my-20" }, h("div", { key: 'aebf776430ff757354b7ec6cb777c129d0052f22', class: "w-[300px]" }, h("div", { key: '0ba420a45e374b736f360cbf165e1e7819a37184', class: "bg-dark" }, h("div", { key: 'abc0532214cde00c7488dbf658891e36b034a307', class: "logo-container", innerHTML: vLogoMargins })))));
+        return (h("div", { key: '004134f2770f755a3ae0d158b9ec6987a64dcc8b', class: "container my-20" }, h("div", { key: '49b57e44a4a68b5d6393ee3284af58d56aa5c014', class: "w-[300px]" }, h("div", { key: '4812ffe1b1df94ece0e2d391648aea812c7c9028', class: "bg-dark" }, h("div", { key: 'ce3bbecdba5bbabb14d1b0e197318cf4180f8699', class: "logo-container", innerHTML: vLogoMargins })))));
     }
     static get is() { return "logo-space"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.css

@@ -48,10 +48,30 @@
     width: 150px;
   }
 
-  .w-\[300px\] {
+  .w-\[500px\] {
     width: 500px;
   }
 
+  @media (min-width: 750px) {
+    .md\:w-\[300px\] {
+      width: 300px;
+    }
+
+    .md\:w-\[500px\] {
+      width: 500px;
+    }
+  }
+
+  @media (min-width: 900px) {
+    .lg\:w-\[300px\] {
+      width: 300px;
+    }
+
+    .lg\:w-\[500px\] {
+      width: 500px;
+    }
+  }
+
   .coloured {
     background: linear-gradient(to left, 
   #9CE142 0%, 

package/dist/collection/eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.js

@@ -2,22 +2,9 @@ import { h } from "@stencil/core";
 /**
  * @internal
  */
-export class LogoVariations {
-    constructor() {
-        this.orientation = 'horizontal';
-        this.type = undefined;
-    }
+export class LogoVariationsHorizontal {
     render() {
-        if (this.type === 'coloured') {
-            return (h("div", { class: "container my-16" }, h("div", { class: "coloured w-[300px]" }, h("eds-logo", { type: "no-bg", href: "#" }))));
-        }
-        if (this.type === 'black') {
-            return (h("div", { class: "container my-16" }, h("div", { class: "bg-default w-[300px]" }, h("eds-logo", { type: "black", href: "#" }))));
-        }
-        if (this.type === 'color-white') {
-            return (h("div", { class: "container my-16" }, h("div", { class: "w-[300px]" }, h("eds-logo", { type: "color-white", href: "#" }))));
-        }
-        return null;
+        return (h("div", { key: '577cade970766dbbbd654258efe78920d8c0dbaf' }, h("div", { key: '1c577dafe342384bffce716b4bcb9494685f2283', class: "container my-16" }, h("h3", { key: 'b9f78264dbbe144cc9c7823c48874b3618af3919', class: "f-heading03" }, "Coloured Background"), h("div", { key: 'c07b24eb1a3338d33a3b95c0228a1a7f297a0976', class: "coloured lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: 'ed173d7c59ae22ad55814cf64222a5ce52d108d4', type: "no-bg", href: "#" }))), h("div", { key: '7d939b469a8ce14f609e529121a830d9a47af857', class: "container my-16" }, h("h3", { key: 'f110490f66e3d27f204e289a5eb85461c13594fa', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'd05bd8166d2a60aac723436b96e2451ae4459c04', class: "bg-default lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: 'ce24bb6db3038d781a4d1917012c0d4ed7f23b1a', type: "black", href: "#" }))), h("div", { key: '32fbbb1568604bdfd04c6ca6c14a558a3c490ed8', class: "container my-16" }, h("h3", { key: 'ef03e68319669f548c7826d6387072af8d3f5a66', class: "f-heading03" }, "Dark Background "), h("div", { key: 'a6b082f14400be771f43074c1f7f0bc348e77673', class: "lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '569f77f1b43b4a65a39720017b34273d6f3d7baa', type: "color-white", href: "#" })))));
     }
     static get is() { return "logo-variations-horizontal"; }
     static get encapsulation() { return "shadow"; }
@@ -31,43 +18,4 @@ export class LogoVariations {
             "$": ["logo-variations-horizontal.css"]
         };
     }
-    static get properties() {
-        return {
-            "orientation": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'horizontal' | 'vertical'",
-                    "resolved": "\"horizontal\" | \"vertical\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "orientation",
-                "reflect": false,
-                "defaultValue": "'horizontal'"
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'coloured' | 'black' | 'color-white'",
-                    "resolved": "\"black\" | \"color-white\" | \"coloured\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The type of logo variation to display.\nAvailable options: \"coloured\", \"mono\", \"dark\"."
-                },
-                "attribute": "type",
-                "reflect": false
-            }
-        };
-    }
 }

package/dist/collection/eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.js

@@ -2,22 +2,13 @@ import { h } from "@stencil/core";
 /**
  * @internal
  */
-export class LogoVariations {
+export class LogoVariationsVertical {
     constructor() {
-        this.orientation = 'horizontal';
+        this.orientation = 'vertical';
         this.type = undefined;
     }
     render() {
-        if (this.type === 'coloured') {
-            return (h("div", { class: "container my-16" }, h("div", { class: "coloured w-[200px]" }, h("eds-logo", { orientation: "vertical", type: "no-bg", href: "#" }))));
-        }
-        if (this.type === 'black') {
-            return (h("div", { class: "container my-16" }, h("div", { class: "bg-default w-[200px]" }, h("eds-logo", { orientation: "vertical", type: "black", href: "#" }))));
-        }
-        if (this.type === 'color-white') {
-            return (h("div", { class: "container my-16" }, h("div", { class: "w-[200px]" }, h("eds-logo", { orientation: "vertical", type: "color-white", href: "#" }))));
-        }
-        return null;
+        return (h("div", { key: '70bc4a46031bb4456ba28bef27efbbfe5e7cf6f2' }, h("div", { key: '84ab774067350c75982d41b6d97500e19d3fe5e5', class: "container my-16" }, h("h3", { key: 'c080f9b4cfa18a3a48fb703f749c62531a322267', class: "f-heading03" }, "Coloured Background"), h("div", { key: 'a9a871769d76e97c879f49437187ca553a633dd2', class: "coloured w-[200px]" }, h("eds-logo", { key: '668f2607e0394ab1b25ddfbef4cd3e3880e1b4f9', orientation: "vertical", type: "no-bg", href: "#" }))), h("div", { key: 'd1674061f47b242930599337d605b51831214d7a', class: "container my-16" }, h("h3", { key: '8b1470587ad99fdf379c0c4b4646098d14f087e8', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'bbb9997369a93ce84450a7d289948049fcfa5bf6', class: "bg-default w-[200px]" }, h("eds-logo", { key: '4f3dc6ad9f9db6f605d54df3c8adecea051cf34e', orientation: "vertical", type: "black", href: "#" }))), h("div", { key: '0f54fde04fbef65477809b45371ac15914b1433b', class: "container my-16" }, h("h3", { key: '5c46f1d7b09bf3e113e2733531611943ad21be4e', class: "f-heading03" }, "Dark Background "), h("div", { key: '88609875109aae85cb5333426a3bc270314d9fb5', class: "w-[200px]" }, h("eds-logo", { key: '0eeeba0006e25a8a4f0c4fb5c0d38b089e0a22f4', orientation: "vertical", type: "color-white", href: "#" })))));
     }
     static get is() { return "logo-variations-vertical"; }
     static get encapsulation() { return "shadow"; }
@@ -49,7 +40,7 @@ export class LogoVariations {
                 },
                 "attribute": "orientation",
                 "reflect": false,
-                "defaultValue": "'horizontal'"
+                "defaultValue": "'vertical'"
             },
             "type": {
                 "type": "string",

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.css

@@ -127,6 +127,10 @@
   grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
   grid-gap: var(--inner-gutter);
 }
+.grid-col-span-12 {
+  --container-grid-columns: 12;
+  grid-column: span 12 / span 12;
+}
 
 .gap-y-8 {
   row-gap: 0.5rem;

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js

@@ -5,7 +5,7 @@ import { hLogoColor } from "../../../../../../../../packages/svgs/src/index";
  */
 export class LogoWrongUsage {
     render() {
-        return (h("ul", { key: '9aa8a3f496e779f561e54a6ee656528b2e55a500', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '735e61f1189decb4fef74b5f9f481f94f51c304e', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '8d8859bef157051ca9493bac1fd35e0db80414c0', class: "example" }, h("div", { key: '6ee9ce679339e1189439239889a60d8cba39c4b1', class: "bg-dark " }, h("div", { key: '492054f20250a9572ac3c641d05bbb955c050be4', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: 'c9f49c3c44fb7446e6e4e02c1f79ac15827633ba', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: 'd5cbda2472d3396f08fdb600676852708991ce0f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'dacbf3bcf4dd4914b4332a663a81732a196457f4', class: "example" }, h("div", { key: '9f9bb9b86a840658cf7311a2b035dbadd6a3e0af', class: "no-other-color p-16" }, h("div", { key: '9e96d60f66801638898c12b190640ae0dcc18d24', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: '5e0470cb9f81e4bba14104746715704fed2fddeb', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '5e9e1943ab5d4cda7d6b4cb51b76f9da4370a50b', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '9821754465969edcf1ea98aa7a353ff04140612f', class: "example" }, h("div", { key: '513bb5879746d5979cf7f5360ea60c97196e5379', class: "bg-light p-16" }, h("div", { key: '25f615bf82c51f8601960cb705fa5983667a4943', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '636efd5a54620ca8248b5e1adbf453a7d5292d0f', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: 'a006b91c704b1df8f7adf1cad1d0033bd11378d8', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '6a494fdace1e6a2ff48e02a6a8a79f31ca101e02', class: "example" }, h("div", { key: '09ea335ac52cb395cc3173263b4a956aba59cc4e', class: "bg-white p-16" }, h("div", { key: '9acf37c882acb0a04fddc5754b8e91e6789f36ee', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'f648aefe81578e9768c24de085e53e2484c1bb7b', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '70f90abc0d6a3292101e29bdfc311ebb0192a585', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '9eb3aa4276d7b0a9f7c5e76ffa9fefe7f3def0a3', class: "example" }, h("div", { key: '5a38e80d567d2c2faf08fbcb66a62c24973c3fea', class: "bg-white p-16" }, h("div", { key: '7edbadc8850a9babefea43be9c5f9697021712d5', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '96d30acd52838a03f33fd6c8dcf89a72417ce925', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: '41d476bd66b39e796f03c669945024720771216f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '3fd7f690559195125d633097b578b1cc2ff4ccc1', class: "example" }, h("div", { key: '684387318cfffdfbc5592486095a28a923e5af07', class: "bg-light p-16" }, h("div", { key: '7593acd61c1ea52ce613a1f3395c8769a09f9aed', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '51d6d974c005a0b5059cd002dff682dc50cfb19a', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: '605db4b33b7aab4d0e81e30f658f639689a433b6', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: '1dc1e6be701572fb7d31b435f8b25dbaf0bf30c8', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '30b239799a7d8acf93eba73d3d5dba3cc7117fb5', class: "example" }, h("div", { key: '16a146193f1ec233f37a9472dfe5fa92de10864d', class: "bg-accent p-16" }, h("div", { key: 'cc5924ad51847399ec52c2ece993bdd22305892f', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'bdcd59e968000ecd459b65aaa42e75fa9e06f8ef', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
+        return (h("ul", { key: 'e2fbd7802c153f970a457011a5dcaf3163d6290f', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '07d6a5b930dd8ae652e63310c4232e8c3e6858b2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '5d3dd01a67f41f839e79aa3d449ba319dcc0209c', class: "example" }, h("div", { key: '6b51ea71b6b4072ec6c66223a4f92c1232e8691a', class: "bg-dark " }, h("div", { key: '03a476635bc1112f1ea2d4ed10df0415ead7f0f8', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '084116335e9f8ed4c9d2a04a9551097dc2a53c4a', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: 'e67f1bdeee28928f4f6f8fb5d1e0b59160edd949', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'b0e909eb57a6771b32a93dd0932ef5b848a19ff2', class: "example" }, h("div", { key: '19bc9f29ddbffd1c308cb429100f0af3d58237a1', class: "no-other-color p-16" }, h("div", { key: '301c5cb926b9ad167f1ba096f99a874577617fb1', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: 'b41ab53c2af9efeafb46d41a515eba2f801d49e4', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '826ae54f62c5a3880adf1833dbc19bbb9e1ec6f2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '092d5fc3176845532ecf577c66d6e3a349ebfe45', class: "example" }, h("div", { key: '1d1d3cc86e728fc21f898c59ff1511c5fa728f9f', class: "bg-light p-16" }, h("div", { key: 'df05102398d3de9916a23d0998529d8ca8a66257', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '377e38a762855d563d087eb275481de6a17ddbbb', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '766c4ea568c8bf2fa1efa207ff5f602e5128aef3', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'cf4e883370c0ee284167bea7f2c0c603932d1682', class: "example" }, h("div", { key: 'de160646456f91316bf966db6568c20ff382dd3b', class: "bg-white p-16" }, h("div", { key: '5aa03093e5e483547919eaeca58643e54a286405', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'aa65e295008001d6fe2b2168d8f7f43a770ec8e3', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: 'd0eb2536e430b6e9fdb9a37d638d5c31ee81e205', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '43ec87b4632c2709404aff9d3e7bbcb2910426ca', class: "example" }, h("div", { key: '36cd6dc2b23070e5c7fdfc09444d3ccbb8681216', class: "bg-white p-16" }, h("div", { key: 'a1077b322d113220e05ee3edce627c60547cb49a', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '86c384f5cf362d16bd6ac5ac8448e3e0d591fa18', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: 'b267f6024a4e7bad6348d323606922888db5264b', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '0bd0c5d62e454ce133a187e7d3917afc0c26c551', class: "example" }, h("div", { key: '71e4c1681cfbb64970237b410e0925a0f22e1141', class: "bg-light p-16" }, h("div", { key: '01ab5d75102b9f476fecebcc31c975f6d4720c12', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '0734a049d710d1f6406989668f60da1249e29c7b', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: '830b7b2a8cdf6dfc7f395dc92db42fbe626a7ae4', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: 'ca40bb4ea839eacf62e93f7fbec41f076f7b12a6', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '641a963ba81294eefe8fc00dd0a3bdca91af94a2', class: "example" }, h("div", { key: '70691be08e9081899fb2928d5d287aaebef3b399', class: "bg-accent p-16" }, h("div", { key: '556135fd6596b530bf959bb9984641f185cd9f96', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '7eaded302e41fc1d04f2033add829dfaba6e8012', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
     }
     static get is() { return "logo-wrong-usage"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-card-section/eds-card-section.js

@@ -21,13 +21,24 @@ export class EdsCardSection {
      * @returns {any[]} An array of parsed card objects.
      */
     get parsedCards() {
-        try {
-            return JSON.parse(this.cards);
+        // If it's already an array, return it immediately.
+        if (Array.isArray(this.cards)) {
+            return this.cards;
         }
-        catch (e) {
-            //console.error('Error parsing links JSON', e);
-            return [];
+        if (typeof this.cards === 'object') {
+            return this.cards;
         }
+        else if (typeof this.cards === 'string') {
+            try {
+                return JSON.parse(this.cards);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing links prop:', e);
+                return [];
+            }
+        }
+        return [];
     }
     /**
      * Renders the card section as a grid layout.
@@ -37,7 +48,7 @@ export class EdsCardSection {
      * @returns {JSX.Element} The rendered section containing a list of cards.
      */
     render() {
-        return (h("section", { key: 'f8e6a03e37677623fad3c53327f6260920a5e914', class: "w-full" }, h("ul", { key: '1da1bc3a5aecadd52b4d025d7d02dc252e47b34a', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
+        return (h("section", { key: 'c02b0e71ae4658e2f568e9428a9c61455aeb8ccd', class: "w-full" }, h("ul", { key: '7f5d952d5cc5044c2ec23ca6b6b627901c40ab81', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
     }
     static get is() { return "eds-card-section"; }
     static get encapsulation() { return "shadow"; }
@@ -57,8 +68,8 @@ export class EdsCardSection {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | { title: string; description: string; tags: string; url: string }[]",
+                    "resolved": "string | { title: string; description: string; tags: string; url: string; }[]",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/shared-ui/eds-card-section/eds-card-section.stories.js

@@ -2,6 +2,7 @@ export default {
     title: 'Shared UI/Card Section',
     component: 'eds-card-section',
     argTypes: {
+        // For the string variant, we set the control to 'text'
         cards: {
             control: 'text',
             description: 'JSON string representing an array of card objects, each with properties like title, description, avatar, image, etc.'
@@ -16,6 +17,7 @@ export default {
         }
     },
     args: {
+        // Default args for the string variant
         cards: JSON.stringify([
             {
                 title: 'The Future of AI in Healthcare',
@@ -57,18 +59,49 @@ export default {
                     lazyload: true
                 }
             }
-            // Additional cards can be added here
         ]),
         cols: 4,
         extraClass: ''
     },
     parameters: {}
 };
-export const Default = {
+// Variant 1: Passing cards as a JSON string (text control)
+export const WithString = {
     render: (args) => `
-      <eds-card-section
-        cards='${args.cards}'
-        cols="${args.cols}"
-        class="${args.extraClass}"
-      ></eds-card-section>`
+    <eds-card-section
+      cards='${args.cards}'
+      cols="${args.cols}"
+      class="${args.extraClass}"
+    ></eds-card-section>
+  `
+};
+// Variant 2: Passing cards as an object (object control)
+export const WithObject = {
+    render: (args) => {
+        // Create the custom element
+        const cardSection = document.createElement('eds-card-section');
+        // Set the properties directly as objects
+        cardSection.cards = args.cards;
+        cardSection.cols = args.cols;
+        if (args.extraClass) {
+            cardSection.className = args.extraClass;
+        }
+        return cardSection;
+    },
+    args: {
+        // Override the default for this variant so that the cards are provided as an array of objects
+        cards: [
+            { title: 'Card1', description: 'Description1', tags: 'tag1,tag2', url: '/link1' },
+            { title: 'Card2', description: 'Description2', tags: 'tag3', url: '/link2' }
+        ],
+        cols: 4,
+        extraClass: ''
+    },
+    argTypes: {
+        // Change the control type for this variant to 'object'
+        cards: {
+            control: 'object',
+            description: 'An array of card objects, each with properties like title, description, avatar, image, etc.'
+        }
+    }
 };

package/dist/collection/shared-ui/eds-footer/eds-footer.js

@@ -47,7 +47,7 @@ export class EdsFooter {
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: 'efffa9b96cc2a094255fcb6d08ec45c7c7f09ec4', class: `${this.extraClass} pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, h("div", { class: "container pb-20 xl:pb-40 " }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })), h("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" }))))) : null, h("div", { key: 'c3942c635dff3dc8cb47a21f20aca52acfaa3e18', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, h("div", { key: '57e963272659ce2e63294c969f3724a03aef667e', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, h("div", { key: 'c3e5cfe07fe9eb90450f7a87be1b95ed00ef38ce', class: "flex items-center gap-x-12" }, h("a", { key: 'b0d0c65115b611f78d2b468559c16eb60f538907', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en" }, h("eds-img", { key: '6cb5d067f07b456a8d828f3f42f2730e3e5374e0', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg" }))), h("div", { key: 'e5b768b0fb96fcdcb786d33fc808368005935491', class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto" }, h("p", { key: '777263c2f4bde43d38690f41391eaf8e51d945fa' }, this.fundedBy), h("div", { key: 'a415687d08edf8f3e03a6edce9c45f58662c8595', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap" }, h("span", { key: 'c0b6498ad4f5e1f4f1945ebb971f9dd81cc74c77', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.hasCookiesSetUp && (h("button", { key: '10133d180bfb0d8a6354ea2cbea318a2c46fc463', class: "effect-focus !no-underline underline-offset-4 hover:!underline", onClick: () => this.toggleCookiesPopup() }, this.cookiesPreference)))), h("div", { key: '917d0980f91a8c42a75bae301b0a18e3777dd021', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
+        return (h("footer", { key: '8d3d1b5d2acd76f56b2bc12539cb7d277b4dcd7f', class: `${this.extraClass} pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, h("div", { class: "container pb-20 xl:pb-40 " }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })), h("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" }))))) : null, h("div", { key: '7d6e3a414ec8e8f8e2b795faf639948f8819f5cb', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, h("div", { key: '9a475fd146ac0e1bc78c43940ee24ec31212fcb9', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, h("div", { key: '4b465113cdb882f919fba15e944eb56edbe3c570', class: "flex items-center gap-x-12" }, h("a", { key: '1a8ad1ee5f4dfb77da036b03d0770cba8e5d725e', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en" }, h("eds-img", { key: '4714ea1a01b7b7eef8b3af0c04ffe793d51c4d5e', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg" }))), h("div", { key: 'c4db6bab70e570e337c82136a0d9d6dad01c1039', class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto" }, h("p", { key: '0b030a92c12a3a96fe2baacc13ac21f5bd708a50' }, this.fundedBy), h("div", { key: '4714d0ccf0e3912ae330a6f39ed3607caf2b51a4', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap" }, h("span", { key: 'b4bc2d45871c7d1f9de1d6090959b12fd5246f01', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.hasCookiesSetUp && (h("button", { key: '98b56eee7be6bc1558821933cebf2853b3bb68fc', class: "effect-focus !no-underline underline-offset-4 hover:!underline", onClick: () => this.toggleCookiesPopup() }, this.cookiesPreference)))), h("div", { key: 'f4bf4a0c99f3be920dd15f68e6f7e390cd85ecce', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
     }
     static get is() { return "eds-footer"; }
     static get originalStyleUrls() {

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.js

@@ -4,7 +4,8 @@ import { h } from "@stencil/core";
  * It provides a responsive, full-window overlay menu with navigation links and additional options.
  * This component is suitable for mobile and small screens, where a fullscreen menu enhances user navigation.
  *
- * ## Key Features:
+ * ## Key Features
+ *
  * - **Links and Menu Links**: Allows configurable primary and secondary navigation links.
  * - **Event-Driven Open/Close**: Listens for a `toggleMenu` event to open or close the menu, emitted by the `eds-header` component.
  * - **Responsive Behavior**: Automatically closes the menu when the screen width is larger than a specified breakpoint (1024px).
@@ -112,8 +113,8 @@ export class EdsFullscreenMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | { label: string; url: string; icon?: string; external?: boolean }[]",
+                    "resolved": "string | { label: string; url: string; icon?: string; external?: boolean; }[]",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.stories.js

@@ -0,0 +1,77 @@
+export default {
+    title: 'Shared UI/Header/Fullscreen Menu',
+    // We set a primary component here for documentation purposes.
+    // (Note: The story renders both eds-header and eds-fullscreen-menu.)
+    component: 'eds-fullscreen-menu',
+    argTypes: {
+        menuEnabled: {
+            control: 'boolean',
+            description: 'Enable menu toggle in the header',
+            defaultValue: true
+        },
+        headerLinks: {
+            control: 'object',
+            description: 'An array of link objects for the header navigation',
+            defaultValue: [
+                { label: 'About', url: '#' },
+                { label: 'Focus Areas', url: '#' },
+                { label: 'News & Events', url: '#' },
+                { label: 'Contact', url: '#' }
+            ]
+        },
+        menuLinks: {
+            control: 'object',
+            description: 'An array of link objects for the fullscreen menu',
+            defaultValue: [
+                { label: 'About', url: '#' },
+                { label: 'Focus Areas', url: '#' },
+                { label: 'News & Events', url: '#' },
+                { label: 'Contact', url: '#' }
+            ]
+        }
+    }
+};
+const Template = (args) => {
+    // Create a container element to host both components
+    const container = document.createElement('div');
+    container.style.position = 'relative'; // ensure proper stacking context
+    // Create an informational paragraph
+    const infoMessage = document.createElement('p');
+    infoMessage.textContent = 'Change the window width to see the menu burger. Then click on it to see the content';
+    infoMessage.style.fontFamily = 'sans-serif';
+    infoMessage.style.margin = '1rem 0';
+    infoMessage.style.fontWeight = 'bold';
+    // Append the info message to the container
+    container.appendChild(infoMessage);
+    // Render the header using property binding for the links by passing a JSON string.
+    // (You can update your components to also accept objects directly if desired.)
+    container.innerHTML += `
+      <eds-header
+        menu-enabled="${args.menuEnabled}"
+        links='${JSON.stringify(args.headerLinks)}'
+      ></eds-header>
+      <eds-fullscreen-menu
+        links='${JSON.stringify(args.menuLinks)}'
+      ></eds-fullscreen-menu>
+    `;
+    // Optionally, you might add some inline styling or scripts to simulate the header’s menu toggle behavior.
+    // For example, if your header emits an event when the menu toggle is clicked, you can listen for that event
+    // and programmatically show/hide the fullscreen menu. That logic would be implemented in your component.
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    menuEnabled: true,
+    headerLinks: [
+        { label: 'About', url: '#' },
+        { label: 'Focus Areas', url: '#' },
+        { label: 'News & Events', url: '#' },
+        { label: 'Contact', url: '#' }
+    ],
+    menuLinks: [
+        { label: 'About', url: '#' },
+        { label: 'Focus Areas', url: '#' },
+        { label: 'News & Events', url: '#' },
+        { label: 'Contact', url: '#' }
+    ]
+};

package/dist/collection/shared-ui/eds-header/eds-header.js

@@ -74,6 +74,10 @@ export class EdsHeader {
      * @returns {any[]} Array of parsed link objects
      */
     get parsedLinks() {
+        // If it's already an array, return it immediately.
+        if (Array.isArray(this.links)) {
+            return this.links;
+        }
         if (typeof this.links === 'object') {
             return this.links;
         }
@@ -90,8 +94,8 @@ export class EdsHeader {
         return [];
     }
     render() {
-        return (h("header", { key: 'bd3056a3d8ca0e8472e154eb3da9ba1aca6d1fa1', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '55db7995eab812785789ecc8441079ee5e07af76', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '0464d045dc59d0f78a021a14ffa0254579052529', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '7ab1b2c20cf9d934a29480bd29736ced42ff5a20', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: '7dca9e2715f3831ee806b0e354c19b65deac1490', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "small", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: 'd49985a1074f2daed9cab42fa5af8b0ec8cb6ec9' }), this.userFeature ? (h("div", { class: "px-16" }, h("eds-user", { "keycloak-url": this.keycloakUrl, "keycloak-realm": this.keycloakRealm, "keycloak-client-id": this.keycloakClientId }))) : null, this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
+        return (h("header", { key: 'b16e5e84ba7565ebf4ea5892a9a1af84fc94769d', class: `flex items-center justify-between relative z-10
+       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '00206a2714dedfe205151002cc10c430e75814fb', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '25fc6207d61bb4cc06877dd0b15bf56392b50255', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '8d1ee2947db26e5acb556da845fe1b811a8d18b2', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: '5c70e48f3a617a6abe402659b37741e657440cbc', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "small", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: '773b60e90ecfe336fede86ea6e3b0ec2fd10bd72' }), this.userFeature ? (h("div", { class: "px-16" }, h("eds-user", { "keycloak-url": this.keycloakUrl, "keycloak-realm": this.keycloakRealm, "keycloak-client-id": this.keycloakClientId }))) : null, this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
     }
     static get is() { return "eds-header"; }
     static get originalStyleUrls() {
@@ -128,8 +132,8 @@ export class EdsHeader {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | { label: string; url: string; icon?: string; external?: boolean }[]",
+                    "resolved": "string | { label: string; url: string; icon?: string; external?: boolean; }[]",
                     "references": {}
                 },
                 "required": false,
@@ -189,7 +193,7 @@ export class EdsHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Flag to enable or disable header menu toggle feature.\nWhen true, displays the toggle in the header."
+                    "text": "Flag to enable or disable header menu toggle feature.\nWhen true, displays the toggle in the header.\nRequires the <eds-fullscreen-menu> to properly work."
                 },
                 "attribute": "menu-enabled",
                 "reflect": false,

package/dist/collection/shared-ui/eds-header/eds-header.stories.js

@@ -1,5 +1,5 @@
 export default {
-    title: 'Shared Ui/Header',
+    title: 'Shared Ui/Header/Main',
     component: 'eds-header',
     argTypes: {
         homeUrl: {
@@ -7,8 +7,8 @@ export default {
             description: 'URL for the home logo link.'
         },
         links: {
-            control: 'text',
-            description: 'JSON string representing the primary navigation links, each containing `label`, `url`, and optionally `icon`.'
+            control: 'object',
+            description: 'An array of link objects for the header navigation'
         },
         menuLinks: {
             control: 'text',
@@ -18,6 +18,10 @@ export default {
             control: 'text',
             description: 'URL for the dashboard page.'
         },
+        menuEnabled: {
+            control: 'boolean',
+            description: 'Shows/hides burger menu on small screens.'
+        },
         inverseHeader: {
             control: 'boolean',
             description: 'Determines if the header is rendered in inverse style (dark background).'
@@ -41,12 +45,13 @@ export default {
     },
     args: {
         homeUrl: '/',
-        links: JSON.stringify([
-            { label: 'Home', url: '/', icon: '' },
-            { label: 'About', url: '/about' },
-            { label: 'Services', url: '/services' },
-            { label: 'Contact', url: '/contact' }
-        ]),
+        links: [
+            { label: 'About', url: '#' },
+            { label: 'Focus Areas', url: '#' },
+            { label: 'News & Events', url: '#' },
+            { label: 'Contact', url: '#' }
+        ],
+        menuEnabled: false,
         inverseHeader: false,
         userFeature: false,
         keycloakUrl: 'http://localhost:8080',
@@ -58,9 +63,10 @@ export const Default = (args) => `
     <eds-toast-manager />
     <eds-header
       home-url="${args.homeUrl}"
-      links='${args.links}'
+      links='${JSON.stringify(args.links)}'
       menu-links='${args.menuLinks}'
       dashboard-url="${args.dashboardUrl}"
+      menu-enabled="${args.menuEnabled}"
       inverse-header="${args.inverseHeader}"
       user-feature="${args.userFeature}"
       keycloak-url="${args.keycloakUrl}"

package/dist/collection/shared-ui/eds-login/eds-login.js

@@ -66,9 +66,10 @@ export class EdsLogin {
         return this.authenticated ? 'Logout' : 'Login';
     }
     render() {
-        return (h("div", { key: '3e9fdf8fa303948f00da83a1c8c1efc35e2c3c1a' }, h("eds-button", { key: '452b1c6ba9dda0ae5570accedf5e61b8391aeadb', label: this.getBtnLabel(), intent: "primary", loading: false, disabled: false, pill: false, icon: "arrow-diagonal", size: "small", "icon-pos": "right", "aria-label": this.getBtnLabel(), "element-type": "button", triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this) })));
+        return (h("eds-button", { key: '35f298ecf951d5b1087f988262ae7d312c5e2d38', label: this.getBtnLabel(), intent: "primary", "extra-class": "text-default", "aria-label": this.getBtnLabel(), triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this) }));
     }
     static get is() { return "eds-login"; }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "keycloakUrl": {
@@ -145,7 +146,7 @@ export class EdsLogin {
                     "text": "Event emitted when the authentication status changes.\nIt emits a boolean value indicating the new authentication status."
                 },
                 "complexType": {
-                    "original": "{ authenticated: boolean; user: any }",
+                    "original": "{\n    authenticated: boolean;\n    user: any;\n  }",
                     "resolved": "{ authenticated: boolean; user: any; }",
                     "references": {}
                 }

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.js

@@ -3,7 +3,7 @@ import { h } from "@stencil/core";
  * Component representing a list of social network links for EBRAINS.
  * Each link directs users to EBRAINS' profiles on various social networks.
  */
-export class EdsSocialNetwork {
+export class EdsSocialNetworks {
     constructor() {
         /**
          * Array of social network objects, each containing label, URL, and icon.
@@ -53,18 +53,18 @@ export class EdsSocialNetwork {
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '6169559327b728fd0f3a51a2b8a6439f80fba8fc' }, h("p", { key: 'df2e008500097af1b85660fe8b3fac122f5018a4', class: "f-ui-02" }, this.title), h("ul", { key: 'df01a2802412c4db4e5442fdfc0b6ef3f15c4109', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (h("div", { key: 'a6a3e2084eb01def71f6fee67ebe8c5f4f613c89' }, h("p", { key: '43b92e9c33f8abef6070a6a3cd77f7573e2ab454', class: "f-ui-02" }, this.title), h("ul", { key: 'c0e0dfdeff373885f62250c8bf4385268410406c', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["eds-social-network.css"]
+            "$": ["eds-social-networks.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["eds-social-network.css"]
+            "$": ["eds-social-networks.css"]
         };
     }
     static get properties() {