@ebrains/components 0.8.0-alpha.0 → 0.9.1-beta

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

@@ -1,210 +1,240 @@
-.container {
-    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
-    margin-right: auto;
-    margin-left: auto;
-  }
-  .container > * {
-    --container-outer-gutter: 0;
-    --breakout-container-outer-gutter: 0;
-  }
-  .bg-accent {
-    background-color: var(--green-500);
-  }
-  .bg-dark {
-    background-color: var(--grey-300);
-  }
-  .bg-strongest {
-    background-color: var(--black);
-  }
-  .text-default {
-    color: var(--black);
-  }
-  .text-inverse {
-    color: var(--white);
-  }
-  .p-8 {
-    padding: 0.5rem;
-  }
-  .p-16 {
-    padding: 1rem;
-  }
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
 
-  .f-heading-05 {
-    font-family: var(--f-heading-05-fontFamily);
-    font-weight: var(--f-heading-05-fontWeight);
-    font-size: var(--f-heading-05-fontSize);
-    line-height: var(--f-heading-05-lineHeight);
-    letter-spacing: var(--f-heading-05-letterSpacing);
-  }
+.bg-accent {
+  background-color: var(--green-500);
+}
 
-  .f-ui-02 {
-    font-family: var(--f-ui-02-fontFamily);
-    font-weight: var(--f-ui-02-fontWeight);
-    font-size: var(--f-ui-02-fontSize);
-    line-height: var(--f-ui-02-lineHeight);
-    letter-spacing: var(--f-ui-02-letterSpacing);
-  }
-  .f-ui-02-light {
-    font-family: var(--f-ui-02-light-fontFamily);
-    font-weight: var(--f-ui-02-light-fontWeight);
-    font-size: var(--f-ui-02-light-fontSize);
-    line-height: var(--f-ui-02-light-lineHeight);
-    letter-spacing: var(--f-ui-02-light-letterSpacing);
-  }
+.bg-dark {
+  background-color: var(--grey-300);
+}
 
-  .container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-  }
-  
-  .example {
-    width: 200px;
-    text-align: center;
-    font-size: 14px;
-  }
-  
-  .logo {
-    width: 100%;
-    height: auto;
-  }
-  
-  .bg-dark {
-    background-color: #333;
-  }
-  
-  .bg-light {
-    background-color: #f3f3f3;
-  }
-  
-  .bg-white {
-    background-color: white;
-  }
-  
-  /* Wrong Usage: Non-brand colors */
-  .non-brand-color {
-    fill: purple; /* Non-brand color */
-  }
-  
-  /* Wrong Usage: Distorted logo */
-  .distorted {
-    transform: scaleX(1.5);
-  }
-  
-  /* Wrong Usage: Adding effects */
-  .effects {
-    filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
-  }
-  
-  /* Wrong Usage: Rotated logo */
-  .rotated {
-    transform: rotate(15deg);
-  }
+.bg-strongest {
+  background-color: var(--black);
+}
 
-  .no-other-bg-color{
-    background-color: var(--purple-200);
-  }
+.text-center {
+  text-align: center;
+}
 
-  .no-other-color{
-    color: var(--red-700);
-  }
+.text-default {
+  color: var(--black);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+
+.p-8 {
+  padding: 0.5rem;
+}
+
+.p-16 {
+  padding: 1rem;
+}
+
+.logo {
+  width: 100%;
+  height: auto;
+}
+
+.bg-dark {
+  background-color: #333;
+}
+
+.bg-light {
+  background-color: #f3f3f3;
+}
+
+.bg-white {
+  background-color: white;
+}
 
-  /* Wrong Usage: Applying outlines */
+/* Wrong Usage: Non-brand colors */
+.non-brand-color {
+  fill: purple;
+  /* Non-brand color */
+}
+
+/* Wrong Usage: Distorted logo */
+.distorted {
+  transform: scaleX(0.5);
+}
+
+/* Wrong Usage: Adding effects */
+.effects {
+  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
+}
+
+/* Wrong Usage: Rotated logo */
+.rotated {
+  transform: rotate(15deg);
+}
+
+.no-other-bg-color {
+  background-color: var(--purple-200);
+}
+
+.no-other-color {
+  color: var(--red-700);
+}
+
+/* Wrong Usage: Applying outlines */
 .outlined {
-  stroke: red; /* Outline color */
-  stroke-width: 2px; /* Thickness of the outline */
-  fill: none; /* Remove the fill to emphasize the outline */
+  stroke: red;
+  /* Outline color */
+  stroke-width: 2px;
+  /* Thickness of the outline */
+  fill: none;
+  /* Remove the fill to emphasize the outline */
 }
 
 /* Wrong Usage: Changing the font */
 .custom-font {
-  font-family: 'Comic Sans MS', cursive; /* An incorrect font choice */
-  font-size: 20px; /* Modify font size */
-  color: #333; /* Incorrect text color */
+  font-family: 'Comic Sans MS', cursive;
+  /* An incorrect font choice */
+  font-size: 20px;
+  /* Modify font size */
+  color: #333;
+  /* Incorrect text color */
+}
+
+.container {
+  width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
+  margin-right: auto;
+  margin-left: auto;
 }
+
+.container>* {
+  --container-outer-gutter: 0;
+  --breakout-container-outer-gutter: 0;
+}
+
 .grid-layout {
+  --grid-columns: 6;
   display: grid;
   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;
+
+.grid-cols-6[class*="grid-line-x"][class*="grid-line-x"]>*:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-xfull"]>*:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1)::before {
+  inset-inline-start: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+6)::before {
+  inset-inline-end: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)~*::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+6)::after {
+  border-inline-end-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(-n+6)::after {
+  top: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)::after {
+  bottom: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)~li::after {
+  bottom: 0;
+}
+
+.grid-col-span-6 {
+  --container-grid-columns: 6;
+  grid-column: span 6 / span 6;
 }
 
 .gap-y-8 {
   row-gap: 0.5rem;
 }
 
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
 @media (min-width: 750px) {
-  .md\:flex {
-    display: flex;
-  }
-  .md\:hidden {
-    display: none;
+  .md\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
+
   .md\:gap-y-12 {
     row-gap: 0.75rem;
   }
-  .md\:pt-28 {
-    padding-top: 1.75rem;
-  }
 }
 
 @media (min-width: 900px) {
-  .lg\:order-last {
-    order: 9999;
-  }
-  .lg\:order-none {
-    order: 0;
-  }
-  .lg\:mt-0 {
-    margin-top: 0rem;
-  }
-  .lg\:flex {
-    display: flex;
-  }
-  .lg\:w-\[150px\] {
-    width: 150px;
-  }
-  .lg\:w-auto {
-    width: auto;
-  }
-  .lg\:max-w-\[720px\] {
-    max-width: 720px;
-  }
-  .lg\:flex-row {
-    flex-direction: row;
-  }
-  .lg\:flex-nowrap {
-    flex-wrap: nowrap;
-  }
   .lg\:gap-y-16 {
     row-gap: 1rem;
   }
-  .lg\:px-28 {
-    padding-left: 1.75rem;
-    padding-right: 1.75rem;
-  }
-  .lg\:\!pl-12 {
-    padding-left: 0.75rem !important;
-  }
-  .lg\:\!pr-12 {
-    padding-right: 0.75rem !important;
+
+  .lg\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
 }
 
-@media (min-width: 750px) {
-  .md\:grid-col-span-4 {
-    --container-grid-columns: 4;
-    grid-column: span 4 / span 4;
-  }
-  .md\:grid-col-span-6 {
-    --container-grid-columns: 6;
-    grid-column: span 6 / span 6;
+@media (min-width: 1024px) {
+  .xl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
 }
 
-.flex-col {
-  flex-direction: column;
+@media (min-width: 1280px) {
+  .xxl\:grid-col-span-2 {
+    --container-grid-columns: 2;
+    grid-column: span 2 / span 2;
+  }
+
+  .xxl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
 }

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: 'f5aef262ac65790a1f86ea7eb8a80fc093406798', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '150bcdb8502a137f54415e24618cf39d0f098c28', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '7df94271a37ae57dc021390f6f16637ea3c6948e', class: "example" }, h("div", { key: '8b4bff581312ed63a5812b9bd7c93bbae6137809', class: "bg-dark " }, h("div", { key: '78fd9855901f2da1392006dbbcaec5537586ef9d', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '5bbf1ae6a4b6b4f9c1a5a310c0c5b123b24f3581', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: '7d1c8346857b6366b69e9ad6bc910adfed8b6213', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '3df57b6e370e166e63b36aa45901800de51bedc5', class: "example" }, h("div", { key: 'dc1983f4b8faad9d3c23ad612a1c01462bf033b0', class: "no-other-color p-16" }, h("div", { key: '42f985c970bce2bfa9590f64458e6987500d6036', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: '9f44984a151b0720f2be17074bdd3c0d42c8210a', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: 'd6481a9e1f79c892e54853f3137e5724a42c2479', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'fd550421e565543c1aaff054a86733a585ce9b9b', class: "example" }, h("div", { key: '3b677e85c9b3cb237e10a212187ba192b711fd53', class: "bg-light p-16" }, h("div", { key: '958733b94eca4e7e27dc5ac3e74f2c745198f37d', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '9f4d3fc90cf8143480fb143a8932f91185a62f4c', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '7254597b2dbcb94118547e3b640c79c3bbd3e7ff', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '4caef2a8c103ecfc8ff91e40b8c5255571984d14', class: "example" }, h("div", { key: 'c93ae6b7c3d58700300fe01b398e4e57728fb314', class: "bg-white p-16" }, h("div", { key: '92916204870722a6da1f45d3d09505589763390b', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'f9295bc1f1b1de2c575d934588f95dee6fc81143', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '1b8488e14728799e81205823d2a964cf8e6f9baf', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'd3be08fe47ce2fd20dee086553cd16950fb6f964', class: "example" }, h("div", { key: '76713df96cca42778f26b580e790dd3fcfb0abee', class: "bg-white p-16" }, h("div", { key: 'db1a9153dc37119255fa75ea0491daea09545d61', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '95b0f06f728a846119bd6844207e93d068dabcc6', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: '92c5de7b7834ae8a14548712239ec22667d2fb5c', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '64533bc4e04c802b4cedc6866c168eaac72c2550', class: "example" }, h("div", { key: 'd630811a1c2ae0a252a7e1bdf7383440e6aa417a', class: "bg-light p-16" }, h("div", { key: '525f7eaebf6e0a75b4ea91c2795f13a7837ebb54', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '455855e6657b98d55b0f637548a88ed312130007', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: 'a0c54e90591e693fb705d085c21b281e0468bc6e', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: 'af1f7db921096e0a20372ad028bf8eb6522ec736', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'ba754fd4de6ea65d74f8215aee158c3657b42b23', class: "example" }, h("div", { key: '91b10cf3ad9ce224546f5c67ddd10a6009a6278d', class: "bg-accent p-16" }, h("div", { key: '1ea0aa874d42426a0e4762532a1b5aaa8c7fc671', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '3219f17362a76b5694e44c34d9405c04e378d7fd', 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("div", { key: '3abc03c4b2592a3138a60c80c390ff12ac79c92e', class: "container" }, h("ul", { key: 'be3a492fe05ef05b96bfc66833f7ac30d596cf7c', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '60f3aa76849d2793907b27ad6ed0584f27896dc1', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '7c0c0f86de1354651d42f11c865ea4e68d7fd5f6', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '6c1e0b7bc964a2b062ddd539f740622ed5cf9ef8', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: '4dbf231814d5994d3075ca55b8a18006eb3b487e', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'ee1964d4fe1390daa4c3446370d6efd183ec80e2', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: '509d867602f88bfd2ce5030e78005eb96993e22b', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '40b486fdcf816d6cc3943b3444014a145798889f', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'cc64549a8aaf14eac2ed57543ca7bbca39fd7686', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: 'e8fdc70352a2084d5bc7255059addb232f055f63', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: '375278f35b81a58f00f0a5702d156774b8d5f5a0', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '4c4d4f2e3a8b4111b2f444a744f366c276f1869f', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: 'c3bf1ab4f4244a345ab5babbce4f4de78b696ac6', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: '5fe3b28dba45127dc391d8101402834f09a61976', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'e4e36e3539813527c339e0e46a66661d8d9fd412', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: '6d48a5cc5a0917047ba8377da80a24f42d3d16d1', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: '9e55f909b1fc0fcbc9b3a1e6d57257f4972f7632', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'c1867f7232957dc5022936f2174039e4d02e6ad7', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: 'd0769904f374ae87e5e283135854dbfb7b448663', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '0955a1f0e63fdc260e990ce995f8d1e1546bfdf4', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '4f9ad9e2a5d3ba7125284b1657db0cad282480ce', class: "mx-auto" }, h("div", { key: 'd1a2ef07750991919768bd699a8e8c2cd2801254', class: "bg-accent p-16" }, h("div", { key: '291732a9a1463be409989c10def40eafb4e89ee2', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'b9946ad16af5c474a06179be04966dfaba6c81c3', class: "f-ui-02 text-center" }, "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/eds-docs-ui/{eds-svg-repository/eds-svg-repository.js → svg-repository/svg-repository.js}

@@ -3,7 +3,7 @@ import * as svgs from "../../../../../../../packages/svgs/src/index";
 /**
  * @internal
  */
-export class EdsSvgRepository {
+export class SvgRepository {
     // Convert SVG data to a format usable by `eds-table`
     getSvgData() {
         return Object.entries(svgs)
@@ -25,18 +25,18 @@ export class EdsSvgRepository {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("div", { key: '8b10e6b478c9a2354f4cf418dacb33d5629585ac', class: "full-width" }, h("eds-table", { key: '04ea0a3bc8d72f42225290210aa0bda441e14b95', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+        return (h("div", { key: 'f9b58e4ab1104753ef5e26fa70af162d9e5ddb1c', class: "full-width" }, h("eds-table", { key: 'fe21b6043cc0fc6f96cb8359f3e7ace75d3f4639', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
     }
-    static get is() { return "eds-svg-repository"; }
+    static get is() { return "svg-repository"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["eds-svg-repository.css"]
+            "$": ["svg-repository.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["eds-svg-repository.css"]
+            "$": ["svg-repository.css"]
         };
     }
     static get elementRef() { return "hostEl"; }

package/dist/collection/shared-ui/eds-cookies-preference/eds-cookies-preference.js

@@ -25,7 +25,7 @@ export class EdsCookiesPreference {
         }
     }
     render() {
-        return (h("div", { key: '13e1244d4e151f091eaca1d22dbed009bcb97786' }, h("eds-link", { key: '4cfc54b447c93824f98da1f990a28fdb61018afe', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+        return (h("div", { key: 'fe3330180b8f3a5ff6b02156f5d76afb8cdf7edd' }, h("eds-link", { key: 'c5d63e486cb63bcb28b89babe606ac1eae525fe0', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
     }
     static get is() { return "eds-cookies-preference"; }
     static get originalStyleUrls() {

package/dist/collection/shared-ui/eds-feedback/eds-feedback.css

@@ -50,6 +50,14 @@ pre {
     letter-spacing: var(--f-body-01-letterSpacing);
 }
 
+.f-heading-01 {
+    font-family: var(--f-heading-01-fontFamily);
+    font-weight: var(--f-heading-01-fontWeight);
+    font-size: var(--f-heading-01-fontSize);
+    line-height: var(--f-heading-01-lineHeight);
+    letter-spacing: var(--f-heading-01-letterSpacing);
+}
+
 .f-heading-02 {
     font-family: var(--f-heading-02-fontFamily);
     font-weight: var(--f-heading-02-fontWeight);

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

@@ -47,7 +47,7 @@ export class EdsFeedback {
         this.selectedRating = e.detail;
     }
     render() {
-        return (h("div", { key: '3cdbbc2eb256ca4f2008f03e90ae9aacb6afbaac', class: "grid inline" }, h("p", { key: 'afb5aa7ab4a8c3117a4db0a5cbeca0195ccec3e8', class: "f-heading-03 my-4" }, this.label), h("p", { key: '9b1b83b31d05d10943bcf9e9a413686caa9e49a7', class: "f-body-02 text-light" }, this.description), h("eds-rating", { key: '4535006f72ee21d168d9b42da6a5c3528417d2f4', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'b90b59aaae1e2bc6071e1488f332d0c154bdb25a', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: '5fbf2af8386c318134b64c1323553bc00ee2fe2c', class: "grid inline" }, h("h1", { key: 'f5ec1e3cbbfa9c1d549a69c76e01609253c6dfea', class: "f-heading-01 my-4" }, this.label), h("p", { key: '60348466e10a5295fdb861f512c1037cdf8fbf27', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: 'ed559e7844c20081e82ccc0cddd4a34691a7ad1d', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'b4ab49d3c936649c75714ef2cd9fc09f9a213437', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get is() { return "eds-feedback"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,9 +41,9 @@ export class EdsFooter {
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: '97ad163716ff16e519a37a9d69895ec1813a1d28', class: `pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: '170923d5155be90a814adaf5ec503d6f3c097fba', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '21d0e035b5d3163530af6dcd23b908689696e8dc', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '4a1926948db9d4717396a07fef924a10c3f28480', class: "flex items-center gap-x-12" }, h("a", { key: '91f122ffc396a19233d8b1b443db83e7eb272afc', 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", "aria-label": "Learn about Horizon 2020 funding" }, h("eds-img", { key: 'a159fed1d2f11be99143d1858cc8b40687d121e0', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: 'c1d69e25e663e8a25ef9f333bcd555863a2afe40' }, h("div", { key: 'a7d7895bfc18565aa8b98c751f99365de5e33532', class: "f-ui-04 text-light" }, h("p", { key: 'bb7a341fb7471e0cdcf3cd3bbe2bbb1f42296535' }, this.fundedBy), h("div", { key: '2abd03a76d5c89f004e8da425f03e9152e4f2290', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '21e042b3b5a7b09c1ad92daf7ce191714a157892', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: "Cookies preferences", intent: "weak", "extra-class": "f-ui-04 ml-4 cursor-pointer effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline", onClick: () => {
+        return (h("footer", { key: '63daf387ac4ae4d3aea75345d1599b0cce0aa28e', class: `pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: '31a6ca4ea417c61d0e927092cf6dffb18bfd9547', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '91ff15aa4b47ae73642d0c36e569fd598a9f2ac9', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '57b332abdbc53662253f00add0491779c7421e5e', class: "flex items-center gap-x-12" }, h("a", { key: 'c9b659030dfeb3d1485219e1882a9ff1dde4cd42', 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", "aria-label": "Learn about Horizon 2020 funding" }, h("eds-img", { key: 'cbd71badd41f5c1c1220c5d0042651eda2a73e51', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: 'a012c699d5088292d171432b074eb61dd160e22f' }, h("div", { key: '1e4ab16ccb53b12468b3d53f30d671a35cc625ce', class: "f-ui-04 text-light" }, h("p", { key: 'f31aadca310d2a24153c135f1f49f96dbe69c768' }, this.fundedBy), h("div", { key: 'cb885e8666536e4e940309cc1fb0b79725ec737e', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '328fc8376cb062846dc665278a6e00c0c19cc7f4', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: "Cookies preferences", intent: "weak", "extra-class": "f-ui-04 ml-4 cursor-pointer effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline", onClick: () => {
                 this.toggleCookiesConsent();
-            } })) : null))), h("div", { key: '9bce0373f2b427b1244916c88a2cabefe41e7b14', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { id: "backToTop", "aria-hidden": "true", "aria-label": "Back to Top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, class: "transition-all transition duration-75 opacity-0 " })) : null)))));
+            } })) : null))), h("div", { key: '4965f9293058a1d750f5aa6598e829152b37f34d', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { id: "backToTop", "aria-hidden": "true", "aria-label": "Back to Top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, class: "transition-all transition duration-75 opacity-0 " })) : null)))));
     }
     static get is() { return "eds-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,8 +45,7 @@ export class EdsForm {
         }
     }
     get shouldFormProcessInitData() {
-        var _a;
-        return !!((_a = this.initData) === null || _a === void 0 ? void 0 : _a._id);
+        return !!this.initData;
     }
     parseFields(newValue) {
         this.parsedFields = parseData(newValue);
@@ -136,22 +135,57 @@ export class EdsForm {
         });
         return formData;
     }
+    makeFormData() {
+        const formData = new FormData();
+        // Add the form name
+        formData.append('form_name', this.name);
+        // Add the form URL
+        if (this.setFormUrl && typeof window !== 'undefined') {
+            formData.set('form_url', window.location.href);
+        }
+        Object.keys(this.values).forEach((key) => {
+            // Append each key-value pair to the FormData object.
+            formData.append(key, this.values[key]);
+        });
+        return formData;
+    }
     handleChange(e, field) {
         const target = e.target;
-        this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
-        // Emit an input event with message and current form values
+        if (target.type === 'checkbox') {
+            // Get the current comma separated string or default to an empty string.
+            const currentStr = this.values[field.name] || '';
+            // Convert the string into an array. If the string is empty, we get an empty array.
+            let valuesArray = currentStr ? currentStr.split(',') : [];
+            if (target.checked) {
+                // Only add if it's not already in the array.
+                if (!valuesArray.includes(target.value)) {
+                    valuesArray.push(target.value);
+                }
+            }
+            else {
+                // Remove the value from the array if the checkbox is unchecked.
+                valuesArray = valuesArray.filter((item) => item !== target.value);
+            }
+            // Reassemble the comma separated string and update your form values.
+            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: valuesArray.join(',') });
+        }
+        else {
+            // Handle non-checkbox input normally.
+            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
+        }
+        // Emit the updated form state.
         this.form.emit({
             event: 'change',
             field: field.name,
-            value: target.value,
+            value: target.type === 'checkbox' ? this.values[field.name] : target.value,
             message: `${field.name} updated`,
-            data: this.getFormData()
+            data: this.makeFormData()
         });
     }
     handleInput(e, field) {
         const target = e.target;
         // Update the field's value in state.
-        this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
+        //this.values = { ...this.values, [field.name]: target.value };
         // Create a copy of the current errors.
         const newErrors = Object.assign({}, this.errors);
         // Use the utility to validate the field.
@@ -174,12 +208,13 @@ export class EdsForm {
         this.isSubmitting = true;
         this.validateForm();
         if (this.hasError) {
+            this.isSubmitting = false;
             this.form.emit({
                 event: 'submit',
                 validated: false,
                 success: false,
                 message: this.errorMessage,
-                data: this.getFormData()
+                data: this.makeFormData()
             }); // Emit form status submit false validation error
             sendAnalytics({
                 category: 'ui-component',
@@ -221,13 +256,13 @@ export class EdsForm {
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: '695438941134ef6a3c43b70008b1904b03700743', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '870ff661aded11c890e4f144a970c5ab5120a61f' }, h("slot", { key: 'b1070ccc8984afe457d28a6bbf52255dcbbc9b33' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        return (h("form", { key: '2f5651942cd01c0574b5a5f08483480c285472cb', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '0dab281f049f6afb8cfbad146076d7f3015b8c17' }, h("slot", { key: '661b26b05023480447f87aa03e2f21b814355d00' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
-            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChange: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.formBtn && (h("div", { key: '80e0af076f3c57124f8a1f6718a0d45cfd45c0cd', class: "mt-20" }, h("eds-button", { key: '51dd28fb2a6610983e50ddb60409b3acf18dba1b', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, value: this.values[field.name] || null, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, link: field.link, message: field.message, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChange: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
+        })), this.formBtn && (h("div", { key: '3f250271116962a060359cf462b053234f059bd1', class: "mt-20" }, h("eds-button", { key: 'b234af290bcae3205c874edb4796e484320a5475', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     static get is() { return "eds-form"; }
     static get encapsulation() { return "shadow"; }