@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

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: 'bc42810801b7692a7cce35d1b3d44ae70bf79db7', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '5961e3d0148ddfdb9d77c72c5cb8dd6733cdbc1c', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'fe06a82d62bb7bedc6880991c45c099c1e4f913e', class: "example" }, h("div", { key: '3f851373000c1b0cb1ecf0c42add9eef09d7e969', class: "bg-dark " }, h("div", { key: '2cdcc5b3419e5a9bdfde2c6ebeeafe482b060808', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '027a7e9000a7b0e18697e1add62fb52bc340e56d', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: '37821295b19c46c6bd23f75ff090f42513f2c52a', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '7f4fb4c6e94d1cfa0080bf4716d386a64cc588a6', class: "example" }, h("div", { key: '9b580db406baa9ab882042693238d96db83099b1', class: "no-other-color p-16" }, h("div", { key: '6c1b3d0668acae7f1542fddbd83444c187f8f447', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: '644fb68b648f330c80ff295f9a4d74924b44e5dd', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '651a9bf67507fdfe1289d1afaced18bdc739313c', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '211ca59ce2d0760a752fa2fd087a43e9b61bdd9b', class: "example" }, h("div", { key: '526628247fe9587785c79bef6e16630a988a2af9', class: "bg-light p-16" }, h("div", { key: 'fd9b59d40e805902bd628a04525d27fcbe6d99b1', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '97e0a604d08be01ac7956fe284f2325a680496d2', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '23cf6c4f70ededbfd3347f31adc749e4e411c5b2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '5d1702074e065740261bb7a86ce18139c2336dd6', class: "example" }, h("div", { key: '1b0fcc5f673339bf8ac84ed317ba4c214f5f2618', class: "bg-white p-16" }, h("div", { key: '708f276b908ee858a634034a0a9d025fe3f0515d', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'cb99b28a2154bf90565480386d8b3b67de0b76bb', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '96f8a61f549c8e83f8a81bfba629a40eb26716a9', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'd1cf64b340f6551e4f4a8189c355a22e95d8b3c9', class: "example" }, h("div", { key: '264fc7c03ad4b17a9631d7ede8714f4e91aec931', class: "bg-white p-16" }, h("div", { key: 'a39c949f0b7494bfc08d689e21f84303fd9f9327', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: 'e1b264ef7f8b68fd0dd0f9271d26db65c355497b', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: '3dada86d19486aefe9970a5555caa14e2abaad8f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '973e204cb94bda151712b413f38e5a03df46ffdf', class: "example" }, h("div", { key: 'cc9f9d40a9736663c426a9bea6e3060a847a9be5', class: "bg-light p-16" }, h("div", { key: '60bde7eea395d1454e2f9a47535b92752430043f', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '9469d10927d103ceb37b8b192ac220d53db06196', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: 'a4cdf1201a61559fed04eef9c20511a242ba0306', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: '6fbc736e477be9d0952053abc687e9b08dcba324', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'ae655c9985d173716e6c0ff62683efa887998910', class: "example" }, h("div", { key: 'd1597bb34428986cf534ec74cedfa5656b6fe1c8', class: "bg-accent p-16" }, h("div", { key: 'ed43780afc9ae3e9f85c8168f1182be9a29b36ce', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '1232c6e2018bfc9cb6fc39d076049ce9cd949775', 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/svg-repository/svg-repository.css

@@ -0,0 +1,5 @@
+:host, .full-width {
+    display: block;
+    width: 100%;
+  }
+  

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,9 +25,19 @@ export class EdsSvgRepository {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("eds-table", { key: 'e4c454638f02e043a5ad466ee95558be8723d214', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
+        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 {
+            "$": ["svg-repository.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["svg-repository.css"]
+        };
+    }
     static get elementRef() { return "hostEl"; }
 }

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

@@ -9,10 +9,6 @@ export default {
         occupyCols: {
             control: { type: 'number', min: 1, max: 12, step: 1 },
             description: 'Number of columns to span for each card in the grid layout'
-        },
-        extraClass: {
-            control: 'text',
-            description: 'Additional CSS classes for custom styling'
         }
     },
     args: {
@@ -58,8 +54,7 @@ export default {
                 }
             }
         ],
-        cols: 4,
-        extraClass: ''
+        occupyCols: 4
     },
     parameters: {}
 };

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

@@ -25,10 +25,9 @@ export class EdsCookiesPreference {
         }
     }
     render() {
-        return (h("div", { key: '48f67648644ae9c8e645791ad3cbba5491866dc5' }, h("eds-link", { key: '50154721f0f44e811ebe362e18bcf8cfb77b8f64', 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 encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-cookies-preference.css"]

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: '125299e9780486a10213fc3c59b15e7a4fb62616', class: "grid inline" }, h("p", { key: '6a02d78d34a590bc213cd5bf311ec8bed44f8959', class: "f-heading-03 my-4" }, this.label), h("p", { key: '76146fbade2f864ba7b72429a85218ebf6a24ea7', class: "f-body-02 text-light" }, this.description), h("eds-rating", { key: '38e0ec9219adaf85f674fab6be471112f06e42ff', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'beab34888d3db63ca2ee374a2d10d407bfc948cc', 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.css

@@ -0,0 +1,226 @@
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+p {
+  margin: 0;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.ml-4 {
+    margin-left: 0.25rem;
+  }
+
+.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-darker {
+    background-color: var(--grey-400);
+}
+
+.border-softest {
+    border-color: rgba(0, 0, 0, .05);
+}
+
+.border-t-2 {
+    border-top-width: 2px;
+}
+
+.pt-20 {
+    padding-top: 1.25rem;
+}
+
+.pb-28 {
+    padding-bottom: 1.75rem;
+}
+
+.grid-layout {
+    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;
+}
+
+.mt-28 {
+    margin-top: 1.75rem;
+}
+
+.gap-y-12 {
+    row-gap: 0.75rem;
+}
+
+.gap-x-12 {
+    -moz-column-gap: 0.75rem;
+    column-gap: 0.75rem;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.gap-20 {
+    gap: 1.25rem;
+}
+
+.effect-focus {
+    outline-width: 3px;
+    outline-offset: 2px;
+    outline-color: var(--green-500);
+}
+
+.focus-visible\:rounded-xs:focus-visible {
+    border-radius: 4px;
+}
+
+.flex {
+    display: flex;
+}
+
+.w-\[54px\] {
+    width: 54px;
+}
+
+.ml-0 {
+    margin-left: 0rem;
+}
+
+.order-last {
+    order: 9999;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.f-ui-04 {
+    font-family: var(--f-ui-04-fontFamily);
+    font-weight: var(--f-ui-04-fontWeight);
+    font-size: var(--f-ui-04-fontSize);
+    line-height: var(--f-ui-04-lineHeight);
+    letter-spacing: var(--f-ui-04-letterSpacing);
+}
+
+.text-light {
+    color: var(--grey-700);
+}
+
+.mt-4 {
+    margin-top: 0.25rem;
+}
+
+.gap-12 {
+    gap: 0.75rem;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.\!no-underline {
+    text-decoration-line: none !important;
+}
+
+.decoration-2 {
+    text-decoration-thickness: 2px;
+}
+
+.underline-offset-4 {
+    text-underline-offset: 4px;
+}
+
+.hover\:\!underline:hover {
+    text-decoration-line: underline !important;
+}
+
+.ml-auto {
+    margin-left: auto;
+}
+
+.pl-12 {
+    padding-left: 0.75rem;
+}
+
+
+
+
+@media (min-width: 750px) {
+    .md\:pt-28 {
+        padding-top: 1.75rem;
+    }
+}
+
+@media (min-width: 900px) {
+    .lg\:grid-col-span-5 {
+        --container-grid-columns: 5;
+        grid-column: span 5 / span 5;
+    }
+
+    .lg\:grid-col-span-6 {
+        --container-grid-columns: 6;
+        grid-column: span 6 / span 6;
+    }
+
+    .lg\:grid-col-start-7 {
+        grid-column-start: 7;
+    }
+
+    .lg\:mt-0 {
+        margin-top: 0rem;
+    }
+
+    .lg\:flex-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    .lg\:order-none {
+        order: 0;
+    }
+
+    .lg\:w-auto {
+        width: auto;
+    }
+}
+
+@media (min-width: 1024px) {
+    .xl\:pb-40 {
+        padding-bottom: 2.5rem;
+    }
+}

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

@@ -23,13 +23,16 @@ export class EdsFooter {
         this.backToTop = () => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
         };
-        this.extraClass = '';
         this.social = false;
         this.enableScrollTop = false;
         this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
         this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
+        this.enableCookiesSettings = false;
         this.showMatomoNotice = false;
     }
+    toggleCookiesConsent() {
+        this.cookies.emit('toggle');
+    }
     /**
      * Renders the footer component with optional sections and elements,
      * including social network links, a Horizon Europe funding acknowledgment, and
@@ -38,9 +41,12 @@ export class EdsFooter {
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: 'fc315d7ddfa4ede5514083d842bba36c991fef8a', 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: '9d00bf38cabc8cea80be80b0e26f57fa70e635fb', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, h("div", { key: '67342d2033716108d6b7137029709d0048dd06f2', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, h("div", { key: '44bbeddacf48ed1d3a8f716cb9a044f7175aabab', class: "flex items-center gap-x-12" }, h("a", { key: '34ce75ccde53cfd7771d7d325d989a23d148011f', 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: 'f06317200fe90580ca1d2d512e665252d11b4799', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '6a81ccd4f5196c6567a60c6a43c468178154f9ad', class: "order-last w-full lg:order-none lg:w-auto" }, h("div", { key: 'e10de8b2e966cd0a2febcc8e8c5189b7694f856c', class: "f-ui-04 text-light" }, h("p", { key: '26f14c5c27859d1fea9985800d8e35023ca8ade9' }, this.fundedBy), h("div", { key: '7eabdf80c9c9e42793eff579c2ec92d934611bb2', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'abe3d9e7091e15f09782cdde3e59228f6e143805', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved)))), h("div", { key: '0c3371aec2ff5f9e348bef2171e4bc5a353960e2', 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: '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: '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"; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-footer.css"]
@@ -53,27 +59,6 @@ export class EdsFooter {
     }
     static get properties() {
         return {
-            "extraClass": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{string}"
-                        }],
-                    "text": "Additional CSS classes to apply to the footer for customization."
-                },
-                "attribute": "extra-class",
-                "reflect": false,
-                "defaultValue": "''"
-            },
             "social": {
                 "type": "boolean",
                 "mutable": false,
@@ -157,6 +142,24 @@ export class EdsFooter {
                 "attribute": "rights-reserved",
                 "reflect": false,
                 "defaultValue": "`${new Date().getFullYear()} EBRAINS. All rights reserved.`"
+            },
+            "enableCookiesSettings": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "enable-cookies-settings",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -165,4 +168,22 @@ export class EdsFooter {
             "showMatomoNotice": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "cookies",
+                "name": "cookies",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
 }

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

@@ -2,10 +2,6 @@ export default {
     title: 'Shared UI/Footer',
     component: 'eds-footer',
     argTypes: {
-        hasCookiesSetUp: {
-            control: 'boolean',
-            description: 'Whether the cookies popup has been set up'
-        },
         social: {
             control: 'boolean',
             description: 'Controls if the social section is displayed'
@@ -18,33 +14,31 @@ export default {
             control: 'text',
             description: 'Control for the rights reserved text'
         },
-        cookiesPreference: {
-            control: 'text',
-            description: 'Control for the cookies preference text'
+        enableScrollTop: {
+            control: 'boolean',
+            description: 'Scroll to top button'
         },
-        extraClass: {
-            control: 'text',
-            description: 'Additional CSS classes for custom styling'
+        enableCookiesSettings: {
+            control: 'boolean',
+            description: 'Enable cookies consent preferences'
         }
     },
     args: {
-        hasCookiesSetUp: false,
         social: false,
         fundedBy: 'EBRAINS is funded by the Horizon Europe Framework Programme.',
         rightsReserved: '2024 EBRAINS. All rights reserved.',
-        cookiesPreference: 'Cookies Preferences',
-        extraClass: ''
+        enableScrollTop: false,
+        enableCookiesSettings: false
     },
     parameters: {}
 };
 export const Default = {
     render: (args) => `
     <eds-footer
-      has-cookies-set-up="${args.hasCookiesSetUp}"
       social="${args.social}"
-      extra-class="${args.extraClass}"
       funded-by="${args.fundedBy}"
       rights-reserved="${args.rightsReserved}"
-      cookies-preference="${args.cookiesPreference}"
+      enable-scroll-top="${args.enableScrollTop}"
+      enable-cookies-settings="${args.enableCookiesSettings}"
     ></eds-footer>`
 };

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

@@ -0,0 +1,3 @@
+.mt-20 {
+    margin-top: 1.25rem;
+}

package/dist/collection/{components/eds-form-v2/eds-form-v2.js → shared-ui/eds-form/eds-form.js}

@@ -16,7 +16,7 @@ import { getFormInitData } from "../../utils/eds-form/formUtils";
  *
  * This component is ideal for implementing complex forms with specific validation and submission behaviors.
  */
-export class EdsFormV2 {
+export class EdsForm {
     constructor() {
         this.name = 'eds-form';
         this.setFormUrl = true;
@@ -45,8 +45,7 @@ export class EdsFormV2 {
         }
     }
     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 EdsFormV2 {
         });
         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 EdsFormV2 {
         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,23 +256,24 @@ export class EdsFormV2 {
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: 'b5ec80c5fab2f16cb3b9a2f0e4e2ffc6f1ff3870', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '0fac703db54931d095b14ed26b4bd214e8d7cb0b' }, h("slot", { key: '4d8941744b5445fdb58187f020387c9418cf0c95' }), 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: '90443e4a7502815a0b2a8b6aba7041a35fe80c02', class: "mt-20" }, h("eds-button", { key: '52e829f8c91fa5f07a60bd2568269f6628fbe4c7', 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-v2"; }
+    static get is() { return "eds-form"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["eds-form-v2.css"]
+            "$": ["eds-form.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["eds-form-v2.css"]
+            "$": ["eds-form.css"]
         };
     }
     static get properties() {