@ebrains/components 0.7.0-alpha.1 → 0.8.0-alpha.0

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

@@ -0,0 +1,120 @@
+.bg-default {
+    background-color: var(--grey-200);
+  }
+  .bg-darker {
+    background-color: var(--grey-400);
+  }
+  .bg-inverse {
+    background-color: var(--white);
+  }
+  .bg-strongest {
+    background-color: var(--black);
+  }
+  .fixed {
+    position: fixed;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .sticky {
+    position: sticky;
+  }
+  .inset-0 {
+    inset: 0rem;
+  }
+  .z-\[999999\] {
+    z-index: 999999;
+  }
+  .overflow-y-scroll {
+    overflow-y: scroll;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .min-h-full {
+    min-height: 100%;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .top-0 {
+    top: 0rem;
+  }
+  .mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .mt-auto {
+    margin-top: auto;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .mr-auto {
+    margin-right: auto;
+  }
+  .w-\[200px\] {
+    width: 200px;
+  }
+  .h-\[85px\] {
+    height: 85px;
+  }
+  .px-16 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  .py-16 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+  .mt-28 {
+    margin-top: 1.75rem;
+  }
+  .gap-y-8 {
+    row-gap: 0.5rem;
+  }
+  .effect-color {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+  .effect-focus {
+    outline-width: 3px;
+    outline-offset: 2px;
+    outline-color: var(--green-500);
+  }
+  .rounded-xs {
+    border-radius: 4px;
+  }
+  .f-heading-02 {
+    font-family: var(--f-heading-02-fontFamily);
+    font-weight: var(--f-heading-02-fontWeight);
+    font-size: var(--f-heading-02-fontSize);
+    line-height: var(--f-heading-02-lineHeight);
+    letter-spacing: var(--f-heading-02-letterSpacing);
+  }
+  .hover\:text-lighter:hover {
+    color: var(--grey-600);
+  }
+  .w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
+

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

@@ -69,9 +69,10 @@ export class EdsFullscreenMenu {
         return parseData(this.menuLinks);
     }
     render() {
-        return this.isMenuOpen ? (h("div", { class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, h("div", { class: "flex min-h-full flex-col" }, h("div", { class: `bg-default w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, h("div", { class: "mx-auto flex items-center justify-between" }, h("div", { class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), h("div", { class: "px-16" }, h("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), h("div", { class: "py-16 px-16" }, h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), h("eds-block-break", null), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" }))))), h("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
+        return this.isMenuOpen ? (h("div", { class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, h("div", { class: "flex min-h-full flex-col" }, h("div", { class: `w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, h("div", { class: "mx-auto flex items-center justify-between" }, h("div", { class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), h("div", { class: "px-16" }, h("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), h("div", { class: "py-16 px-16" }, h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), h("eds-block-break", null), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" }))))), h("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
     }
     static get is() { return "eds-fullscreen-menu"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-fullscreen-menu.css"]

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

@@ -0,0 +1,138 @@
+.block {
+    display: block;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline {
+    display: inline;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }.block {
+    display: block;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline {
+    display: inline;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .sticky {
+    position: sticky;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .text-default {
+    color: var(--black);
+  }
+  .text-inverse {
+    color: var(--white);
+  }
+  .bg-dark {
+    background-color: var(--grey-300);
+  }
+  .bg-strongest {
+    background-color: var(--black);
+  }
+  .mr-auto {
+    margin-right: auto;
+  }
+  .w-\[200px\] {
+    width: 200px;
+  }
+  .h-\[85px\] {
+    height: 85px;
+  }
+  .left-1\/2 {
+    left: 50%;
+  }
+  .top-1\/2 {
+    top: 50%;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+  .-translate-x-1\/2 {
+    --tw-translate-x: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  .-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  .hidden {
+    display: none;
+  }
+  .gap-x-2 {
+    -moz-column-gap: 0.125rem;
+         column-gap: 0.125rem;
+  }
+  .after\:effect-opacity::after {
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .\!text-current {
+    color: currentColor !important;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .after\:\!border-transparent::after {
+    border-color: var(--transparent) !important;
+  }
+  .hover\:after\:\!border-transparent:hover::after {
+    border-color: var(--transparent) !important;
+  }
+  .after\:opacity-0::after {
+    opacity: 0;
+  }
+  .hover\:after\:opacity-100:hover::after {
+    opacity: 1;
+  }
+  .px-16 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  
+  @media (min-width: 750px) {
+    .md\:flex {
+      display: flex;
+    }
+    .md\:hidden {
+      display: none;
+    }
+}

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

@@ -74,10 +74,11 @@ export class EdsHeader {
         return parseData(this.links);
     }
     render() {
-        return (h("header", { key: '2e39471507762066b258c72da9690f3001ca9a94', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '75a52a092065c2f3f65f7d8a388b887d3991497e', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '632c71d268929e06bc507573db21e04da4c60c67', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '2a1bb9a64ea5731ea3a8c1537b1d95b28b2368f5', 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: '6cecbd7d268cd2aef5b7b117df422128c7dc994d', 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: 'b352a1456858d5190a6268928d2f92ddebdf99c2' }), 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: '7b98b945005f538f43432cbd5ad405fd90985506', class: `flex items-center justify-between relative z-10
+       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '2a7f0026a12abd316bf3511746706b16368a5c20', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '9f4d19c9cb68c11baf1fb76c1bb702722648233f', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '47ed93a21fec15c4d8bc93658d49749f9aba915d', 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: 'da6f7ef405e0ac3779ea631a098e090a442e8266', 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: "large", 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: '7b6fe4135500c87b0eba724f7ff9df7c10d54f5b' }), 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 encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-header.css"]

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

@@ -85,7 +85,7 @@ export class EdsLogin {
         }
     }
     render() {
-        return (h("div", { key: '074566b791eeb9ea4a0558b4ed83a96e4b673356', class: "block" }, !this.authenticated && (h("eds-button", { key: '3a05ff97a90d73204eb77c5dad0d328294d72d3e', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
+        return (h("div", { key: 'dace7b16af2f945e4981c9ef139f4c2ae94e130c', class: "block" }, !this.authenticated && (h("eds-button", { key: 'a8d0bd545e8ae4a159b5977d50d05ae27dec7df3', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
     }
     static get is() { return "eds-login"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.css

@@ -34,6 +34,10 @@
     z-index: 10;
 }
 
+.z-\[999999\] {
+    z-index: 999999;
+}
+
 .left-0 {
     left: 0rem;
 }

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.js

@@ -3,16 +3,29 @@ import { matomoOptIn, matomoOptOut } from "../../utils/analytics";
 export class EdsMatomoNotice {
     constructor() {
         this.title = 'Analytics Consent';
-        this.description = 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.';
+        this.description = "We use anonymous analytics to improve our services. No data is collected unless you give your consent. If you don't wish to send data right now, you can always re-enable analytics later by clicking the Cookies Preference button in the footer. However, by opting in today, you're joining a community that shapes our product's future—all while keeping your data completely anonymous.";
+        this.optOutMessage = "You are already part of our community, and your anonymous data helps shape our product's future! Rest assured, your privacy is fully protected.";
         this.forceShow = false;
         this.showNotice = true;
     }
+    /**
+     * Listens for global custom events to open the matomo-consent.
+     */
+    toggleCookiesConsent() {
+        this.showNotice = !this.showNotice;
+    }
     /**
      * Checks if the consent cookie exists.
      */
     hasCookieConsent() {
         return !!document.cookie.split('; ').find((row) => row.startsWith('mtm_consent='));
     }
+    /**
+     * Checks if the user has opted out after has opted in.
+     */
+    optedOut() {
+        return !!document.cookie.split('; ').find((row) => row.startsWith('mtm_consent_removed'));
+    }
     /**
      * Generate a unique storage key based on appId or the app's domain.
      */
@@ -23,6 +36,12 @@ export class EdsMatomoNotice {
      * Check cookies and sessionStorage (unless forceShow is true) to decide if the notice should be shown.
      */
     componentWillLoad() {
+        // If a decision has been made previously (opted in or out), don't show the notice.
+        const consentGiven = localStorage.getItem('matomo-consent-given');
+        if (consentGiven === 'out' || this.optedOut()) {
+            this.showNotice = false;
+            return;
+        }
         if (this.forceShow) {
             // If forceShow is true, always show the notice
             this.showNotice = true;
@@ -57,6 +76,7 @@ export class EdsMatomoNotice {
     }
     optInAnalytics() {
         matomoOptIn();
+        localStorage.removeItem('matomo-consent-given');
         this.hideNotice();
         this.consent.emit('in');
     }
@@ -65,11 +85,18 @@ export class EdsMatomoNotice {
         this.hideNotice();
         this.consent.emit('out');
     }
+    noThanks() {
+        localStorage.setItem('matomo-consent-given', 'out');
+        this.hideNotice();
+    }
     deferDecision() {
         sessionStorage.setItem(this.getStorageKey(), 'true');
         this.hideNotice();
         this.consent.emit('defer');
     }
+    keepMeIn() {
+        this.hideNotice();
+    }
     hideNotice() {
         this.showNotice = false;
     }
@@ -77,7 +104,7 @@ export class EdsMatomoNotice {
         if (!this.showNotice) {
             return null;
         }
-        return (h("div", { class: "fixed bottom-0 p-8 z-10 grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.title, description: this.description, switchBg: true, expanded: true }, h("div", { class: "flex items-center gap-4" }, this.hasCookieConsent() ? (h("eds-button", { intent: "primary", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() })) : (h("eds-button", { intent: "primary", label: "Yes, I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() })), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() })))));
+        return (h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.title, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() }))))));
     }
     static get is() { return "eds-matomo-notice"; }
     static get encapsulation() { return "shadow"; }
@@ -127,7 +154,25 @@ export class EdsMatomoNotice {
                 },
                 "attribute": "description",
                 "reflect": false,
-                "defaultValue": "'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.'"
+                "defaultValue": "\"We use anonymous analytics to improve our services. No data is collected unless you give your consent. If you don't wish to send data right now, you can always re-enable analytics later by clicking the Cookies Preference button in the footer. However, by opting in today, you're joining a community that shapes our product's future\u2014all while keeping your data completely anonymous.\""
+            },
+            "optOutMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "opt-out-message",
+                "reflect": false,
+                "defaultValue": "\"You are already part of our community, and your anonymous data helps shape our product's future! Rest assured, your privacy is fully protected.\""
             },
             "forceShow": {
                 "type": "boolean",
@@ -173,4 +218,13 @@ export class EdsMatomoNotice {
             }];
     }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "cookies",
+                "method": "toggleCookiesConsent",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -53,7 +53,7 @@ export class EdsSocialNetworks {
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: 'd394c8ce041b7f278f61f141d2a6353db037f776' }, h("p", { key: '88e87c17f014c5ed339f1f987051c3dcba8e4c90', class: "f-ui-02" }, this.title), h("ul", { key: '50cb6587a7fd5b46643e7f80e3c6bc7e7158d55a', 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: '6dba77a15e8259a12d1d6a22c00ab764a213611d' }, h("p", { key: '15fe6ee8597b359e25b8936c9e3506b91abaca11', class: "f-ui-02" }, this.title), h("ul", { key: 'b2e6dfa5c671a871df7a5a85f9a02f5822c8fd28', 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"; }