@ebrains/components 0.9.2-beta → 0.9.3-beta

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

@@ -0,0 +1,230 @@
+import { h } from "@stencil/core";
+import { matomoOptIn, matomoOptOut } from "../../utils/analytics";
+export class EdsMatomoNotice {
+    constructor() {
+        this.heading = 'Analytics 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.
+     */
+    getStorageKey() {
+        return `${window.location.host}-matomo-deferred`;
+    }
+    /**
+     * 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(`${window.location.host}-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;
+        }
+        else {
+            // If user has already consented, hide the notice
+            // eslint-disable-next-line
+            if (this.hasCookieConsent()) {
+                this.showNotice = false;
+            }
+            else {
+                // Otherwise check if user deferred in this session
+                const sessionDeferred = sessionStorage.getItem(this.getStorageKey());
+                this.showNotice = !sessionDeferred;
+            }
+        }
+    }
+    componentDidLoad() {
+        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+        btns.forEach((b) => {
+            this.emitContext(b);
+        });
+    }
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    optInAnalytics() {
+        matomoOptIn();
+        localStorage.removeItem(`${window.location.host}-matomo-consent-given`);
+        this.hideNotice();
+        this.consent.emit('in');
+    }
+    optOutAnalytics() {
+        matomoOptOut();
+        this.hideNotice();
+        this.consent.emit('out');
+    }
+    noThanks() {
+        localStorage.setItem(`${window.location.host}-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;
+    }
+    render() {
+        if (!this.showNotice) {
+            return null;
+        }
+        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.heading, 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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-matomo-notice.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-matomo-notice.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title displayed in the notice."
+                },
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "'Analytics Consent'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The description displayed in the notice."
+                },
+                "attribute": "description",
+                "reflect": false,
+                "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",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the notice is forced to show regardless of cookies/session."
+                },
+                "attribute": "force-show",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showNotice": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "consent",
+                "name": "consent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the rating is changed."
+                },
+                "complexType": {
+                    "original": "'in' | 'out' | 'defer'",
+                    "resolved": "\"defer\" | \"in\" | \"out\"",
+                    "references": {}
+                }
+            }];
+    }
+    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-matomo-notice/eds-matomo-notice.stories.js

@@ -0,0 +1,30 @@
+export default {
+    title: 'Shared Ui/Analytics Notice',
+    component: 'eds-matomo-notice',
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'The title displayed in the notice.'
+        },
+        description: {
+            control: 'text',
+            description: 'The description explaining the purpose of collecting analytics data.'
+        }
+    },
+    args: {
+        title: 'Analytics Consent',
+        description: 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.'
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-matomo-notice 
+        title="${args.title}" 
+        description="${args.description}">
+      </eds-matomo-notice>
+    `,
+    args: {
+        title: 'Analytics Consent',
+        description: 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.'
+    }
+};

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

@@ -0,0 +1,124 @@
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+    margin: 0;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+}
+
+legend {
+    padding: 0;
+}
+
+ol,
+ul,
+menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.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);
+}
+
+.f-ui-03 {
+    font-family: var(--f-ui-03-fontFamily);
+    font-weight: var(--f-ui-03-fontWeight);
+    font-size: var(--f-ui-03-fontSize);
+    line-height: var(--f-ui-03-lineHeight);
+    letter-spacing: var(--f-ui-03-letterSpacing);
+}
+
+.mt-12 {
+    margin-top: 0.75rem;
+}
+
+.mt-16 {
+    margin-top: 1rem;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.gap-4 {
+    gap: 0.25rem;
+}
+
+.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);
+}
+
+.text-light {
+    color: var(--grey-700);
+}
+
+.text-lighter {
+    color: var(--grey-600);
+}
+
+.hover\:text-default:hover {
+    color: var(--black);
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.rounded-sm {
+    border-radius: 8px;
+}

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

@@ -0,0 +1,92 @@
+import { h } from "@stencil/core";
+/**
+ * Component representing a list of social network links for EBRAINS.
+ * Each link directs users to EBRAINS' profiles on various social networks.
+ */
+export class EdsSocialNetworks {
+    constructor() {
+        /**
+         * Array of social network objects, each containing label, URL, and icon.
+         * These are used to render the social network links.
+         *
+         * @private
+         * @type {SocialNetworks[]}
+         */
+        this.socialNetworks = [
+            {
+                label: 'Twitter',
+                url: 'https://twitter.com/ebrains_eu',
+                icon: 'twitter'
+            },
+            {
+                label: 'Linkedin',
+                url: 'https://www.linkedin.com/company/ebrains-eu/about/',
+                icon: 'linkedin'
+            },
+            {
+                label: 'Facebook',
+                url: 'https://www.facebook.com/people/Ebrains_eu/100046659909324/',
+                icon: 'facebook'
+            },
+            {
+                label: 'Youtube',
+                url: 'https://www.youtube.com/channel/UC6E796cVVR5Xrs2A5jJmleQ',
+                icon: 'youtube'
+            },
+            {
+                label: 'Mastodon',
+                url: 'https://mastodon.social/@ebrains',
+                icon: 'mastodon'
+            },
+            {
+                label: 'Bluesky',
+                url: 'https://bsky.app/profile/ebrains.bsky.social',
+                icon: 'bluesky'
+            }
+        ];
+        this.heading = 'Follow EBRAINS to keep up-to-date';
+    }
+    /**
+     * Renders the component's HTML structure with links to EBRAINS social profiles.
+     * Each social network link uses the `eds-link` component with specific classes and styles.
+     *
+     * @returns {JSX.Element} The rendered JSX for the component.
+     */
+    render() {
+        return (h("div", { key: 'f78431d66b849abfd16c60fc42d341e50fa38c47' }, h("p", { key: '1f905e5bb56695352d1da528862f597bdaa66933', class: "f-ui-02" }, this.heading), h("ul", { key: 'b281b99744549c8f2b941e10ce9b239df2ef6b63', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+    }
+    static get is() { return "eds-social-networks"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-social-networks.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-social-networks.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Social Network custom title to display"
+                },
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "'Follow EBRAINS to keep up-to-date'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,21 @@
+export default {
+    title: 'Shared Ui/Social Networks',
+    component: 'eds-social-networks',
+    argTypes: {
+        title: {
+            control: 'text',
+            defaultValue: 'Follow EBRAINS to keep up-to-date'
+        }
+    }
+};
+const Template = (args) => `
+    <eds-social-networks title="${args.title}"></eds-social-networks>
+  `;
+export const Default = Template.bind({});
+Default.args = {
+    title: 'Follow EBRAINS to keep up-to-date'
+};
+export const CustomTitle = Template.bind({});
+CustomTitle.args = {
+    title: 'Stay Connected with EBRAINS!'
+};

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

@@ -0,0 +1,29 @@
+.splash-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999999;
+    background-color: var(--grey-200);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .logo-container {
+    width: 200px;
+    height: 200px;
+    margin-bottom: 1rem;
+  }
+  
+  .content-container {
+    position: relative;  /* Establishes a positioning context for the spinner overlay */
+    width: 5rem;
+    height: 5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  

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

@@ -0,0 +1,136 @@
+import { Host, h } from "@stencil/core";
+export class EdsSplashScreen {
+    constructor() {
+        this.inverse = false;
+        this.initPromise = undefined;
+        this.isVisible = true;
+    }
+    // When the component loads, check if there is a promise.
+    componentWillLoad() {
+        if (this.initPromise) {
+            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() {
+        this.hideSplash();
+    }
+    hideSplash() {
+        this.isVisible = false;
+        this.splash.emit({ type: 'hidden', message: 'Splash screen hidden successfully' });
+    }
+    render() {
+        if (!this.isVisible) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "splash-overlay", style: { background: this.inverse ? 'black' : 'var(--grey-200)' } }, h("div", { class: "logo-container" }, this.inverse ? (h("eds-logo", { orientation: "vertical", type: "color-white" })) : (h("eds-logo", { orientation: "vertical", type: "color" }))), h("div", { class: "content-container" }, h("eds-spinner", { size: "1rem", thickness: "3px", "border-color": "var(--grey-400)", "bottom-color": "var(--grey-900)", background: "none", fullscreen: false })))));
+    }
+    static get is() { return "eds-splash-screen"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-splash-screen.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-splash-screen.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inverse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, applies a dark theme by rendering a black background and white logo."
+                },
+                "attribute": "inverse",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "initPromise": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Promise<any>",
+                    "resolved": "Promise<any>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A promise that must be resolved before the splash screen hides.\nThis can be used for tasks like initialization or authentication."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "splash",
+                "name": "splash",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the splash screen state changes.\nEmits an object with a type and a message."
+                },
+                "complexType": {
+                    "original": "{ type: 'hidden'; message: string } | { type: 'error'; message: string }",
+                    "resolved": "{ type: \"error\"; message: string; } | { type: \"hidden\"; message: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "initPromise",
+                "methodName": "watchInitPromise"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "hideSplash",
+                "method": "handleHideSplash",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,23 @@
+export default {
+    title: 'Shared Ui/Splash Screen',
+    component: 'eds-splash-screen',
+    argTypes: {
+        inverse: {
+            control: 'boolean',
+            description: 'If true, applies a dark theme (black background and white logo).'
+        },
+        delay: {
+            control: 'number',
+            description: 'Delay number'
+        }
+    },
+    args: {
+        inverse: false,
+        delay: 5000
+    }
+};
+export const Default = {
+    render: (args) => `
+    <eds-splash-screen inverse="${args.inverse}" delay="${args.delay}"></eds-splash-screen>
+  `
+};