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

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: '213e6e637f2097165429ed584fb24b0251826627' }, h("p", { key: '060717f30e5ecb2e8128933b761b058eafc7ce6a', class: "f-ui-02" }, this.title), h("ul", { key: '7d8cbd7a92d8785058be18899e42da7495eedfc5', 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"; }

package/dist/collection/shared-ui/eds-splash-screen/eds-splash-screen.js

@@ -5,21 +5,27 @@ export class EdsSplashScreen {
         this.initPromise = undefined;
         this.isVisible = true;
     }
+    // When the component loads, check if there is a promise.
     componentWillLoad() {
-        // If an initialization promise is provided, wait for it.
         if (this.initPromise) {
-            this.initPromise
-                .then(() => {
-                // eslint-disable-next-line
-                console.log('Promises resolved');
-                this.hideSplash();
-            })
-                .catch((error) => {
-                // eslint-disable-next-line
-                console.error('Initialization error:', error);
-                this.splash.emit({ type: 'error', message: error.message || 'Unknown error' });
-                //this.hideSplash();
-            });
+            this.handleInitPromise(this.initPromise);
+        }
+    }
+    // Watch for changes on initPromise.
+    async watchInitPromise(newPromise) {
+        if (newPromise) {
+            this.handleInitPromise(newPromise);
+        }
+    }
+    async handleInitPromise(promise) {
+        try {
+            await promise;
+            //console.log('Promises resolved');
+            this.hideSplash();
+        }
+        catch (error) {
+            //console.error('Initialization error:', error);
+            this.splash.emit({ type: 'error', message: error.message || 'Unknown error' });
         }
     }
     handleHideSplash() {
@@ -112,6 +118,12 @@ export class EdsSplashScreen {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "initPromise",
+                "methodName": "watchInitPromise"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "hideSplash",

package/dist/collection/shared-ui/eds-steps-v2/eds-steps-v2.css

@@ -0,0 +1,361 @@
+/*
+Remove the default font size and weight for headings.
+*/
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+.steps {
+  position: sticky;
+  margin-left: 16px;
+  border-left: 1px solid var(--soft-color, #ddd);
+  /* replace var() with your color if needed */
+  padding-left: 23px;
+  counter-reset: step;
+}
+
+/* Style for h3 headings inside the steps */
+.steps h3 {
+  counter-increment: step;
+  font-size: var(--f-heading-05-fontSize);
+  font-weight: var(--f-heading-05-fontWeight);
+  line-height: var(--f-heading-05-lineHeight);
+  position: relative;
+}
+
+.steps h3::before {
+  content: counter(step);
+  position: absolute;
+  left: -40px;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  /* adjust border style as needed */
+  background: var(--grey-900);
+  /* adjust background color as needed */
+  color: #fff;
+  /* adjust text color as needed */
+  border-radius: 50%;
+}
+
+/* Style for h4 headings inside the steps */
+.steps h4 {
+  counter-increment: step;
+  font-size: var(--f-heading-06-fontSize);
+  font-weight: var(--f-heading-06-fontWeight);
+  line-height: var(--f-heading-06-lineHeight);
+  position: relative;
+}
+
+.steps h4::before {
+  content: counter(step);
+  position: absolute;
+  left: -40px;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  font-size: 0.875rem;
+  border: 1px solid #ccc;
+  background: #333;
+  color: #fff;
+  border-radius: 50%;
+}
+
+/* Style for blockquotes inside the steps */
+.steps blockquote {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-style: italic;
+  color: #aaa;
+  padding-left: 6px;
+}
+
+.steps-img-placeholder {
+  width: 100%;
+  height: 200px;
+  /* Adjust the height as needed */
+  background: linear-gradient(to bottom, #9CE142, #00C959, #00A595);
+  /* Optionally add border, padding or any other styles */
+}
+
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
+.from-\[\#9CE142\] {
+  --tw-gradient-from: #9CE142 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(156 225 66 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.via-\[\#00C959\] {
+  --tw-gradient-to: rgb(0 201 89 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #00C959 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.to-\[\#00A595\] {
+  --tw-gradient-to: #00A595 var(--tw-gradient-to-position);
+}
+
+.bg-\[\#00A595\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 165 149 / var(--tw-bg-opacity));
+}
+
+.relative {
+  position: relative;
+}
+
+.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);
+}
+
+.f-heading-03 {
+  font-family: var(--f-heading-03-fontFamily);
+  font-weight: var(--f-heading-03-fontWeight);
+  font-size: var(--f-heading-03-fontSize);
+  line-height: var(--f-heading-03-lineHeight);
+  letter-spacing: var(--f-heading-03-letterSpacing);
+}
+
+.f-heading-04 {
+  font-family: var(--f-heading-04-fontFamily);
+  font-weight: var(--f-heading-04-fontWeight);
+  font-size: var(--f-heading-04-fontSize);
+  line-height: var(--f-heading-04-lineHeight);
+  letter-spacing: var(--f-heading-04-letterSpacing);
+}
+
+.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);
+}
+
+.f-heading-06 {
+  font-family: var(--f-heading-06-fontFamily);
+  font-weight: var(--f-heading-06-fontWeight);
+  font-size: var(--f-heading-06-fontSize);
+  line-height: var(--f-heading-06-lineHeight);
+  letter-spacing: var(--f-heading-06-letterSpacing);
+}
+
+.f-body-01 {
+  font-family: var(--f-body-01-fontFamily);
+  font-weight: var(--f-body-01-fontWeight);
+  font-size: var(--f-body-01-fontSize);
+  line-height: var(--f-body-01-lineHeight);
+  letter-spacing: var(--f-body-01-letterSpacing);
+}
+
+.f-body-02 {
+  font-family: var(--f-body-02-fontFamily);
+  font-weight: var(--f-body-02-fontWeight);
+  font-size: var(--f-body-02-fontSize);
+  line-height: var(--f-body-02-lineHeight);
+  letter-spacing: var(--f-body-02-letterSpacing);
+}
+
+.f-ui-01 {
+  font-family: var(--f-ui-01-fontFamily);
+  font-weight: var(--f-ui-01-fontWeight);
+  font-size: var(--f-ui-01-fontSize);
+  line-height: var(--f-ui-01-lineHeight);
+  letter-spacing: var(--f-ui-01-letterSpacing);
+}
+
+.bg-dark {
+  background-color: var(--grey-300);
+}
+
+.bg-strong {
+  background-color: var(--grey-700);
+}
+
+.text-default {
+  color: var(--black);
+}
+
+.text-error {
+  color: var(--red-700);
+}
+
+.text-extra-light {
+  color: var(--grey-300);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+
+.text-light {
+  color: var(--grey-700);
+}
+
+.text-lighter {
+  color: var(--grey-600);
+}
+
+.text-lightest {
+  color: var(--grey-500);
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-52 {
+  height: 3.25rem;
+}
+
+.h-96 {
+  height: 6rem;
+}
+
+.h-\[200px\] {
+  height: 200px;
+}
+
+.my-16 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.my-20 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.mb-10 {
+  margin-bottom: 0.625rem;
+}
+
+.mb-12 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-28 {
+  margin-bottom: 1.75rem;
+}
+
+.border-softer {
+  border: 2px solid rgba(0, 0, 0, .1);
+}
+
+.relative {
+  position: relative;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-lg {
+  border-radius: 16px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.p-8 {
+  padding: 0.5rem;
+}
+
+.p-16 {
+  padding: 1rem;
+}
+
+.p-24 {
+  padding: 1.5rem;
+}
+
+.p-48 {
+  padding: 3rem;
+}
+
+.bg-default {
+  background-color: var(--grey-200);
+}
+
+.bg-inverse {
+  background-color: var(--white);
+}
+
+.top-2 {
+  top: 0.125rem;
+}
+
+.bottom-2 {
+  bottom: 0.125rem;
+}
+
+.left-2 {
+  left: 0.125rem;
+}
+
+.right-2 {
+  right: 0.125rem;
+}
+
+.-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));
+}
+
+.bg-opacity-90 {
+  --tw-bg-opacity: 0.9;
+}