@ebrains/components 0.9.0-beta → 0.9.2-beta

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

@@ -1,109 +0,0 @@
-.fixed {
-    position: fixed;
-}
-
-.absolute {
-    position: absolute;
-}
-
-.w-full {
-    width: 100%;
-}
-
-.bottom-0 {
-    bottom: 0rem;
-}
-
-.bottom-4 {
-    bottom: 0.25rem;
-}
-
-.p-4 {
-    padding: 0.25rem;
-}
-
-.p-6 {
-    padding: 0.375rem;
-}
-
-.p-8 {
-    padding: 0.5rem;
-}
-
-.z-10 {
-    z-index: 10;
-}
-
-.z-\[999999\] {
-    z-index: 999999;
-}
-
-.left-0 {
-    left: 0rem;
-}
-
-.left-1\/2 {
-    left: 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));
-}
-
-.items-center {
-    align-items: center;
-}
-
-.justify-center {
-    justify-content: center;
-}
-
-.justify-between {
-    justify-content: space-between;
-}
-
-.flex {
-    display: flex;
-}
-
-.gap-12 {
-    gap: 0.75rem;
-}
-
-.gap-20 {
-    gap: 1.25rem;
-}
-
-.gap-4 {
-    gap: 0.25rem;
-}
-
-@media (min-width: 750px) {
-    .md\:left-1\/2 {
-      left: 50%;
-    }
-    .md\:flex {
-      display: flex;
-    }
-    .md\:hidden {
-      display: none;
-    }
-    .md\:-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));
-    }
-    .md\:-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));
-    }
-  }

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

@@ -1,230 +0,0 @@
-import { h } from "@stencil/core";
-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 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('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('matomo-consent-given');
-        this.hideNotice();
-        this.consent.emit('in');
-    }
-    optOutAnalytics() {
-        matomoOptOut();
-        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;
-    }
-    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.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"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-matomo-notice.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-matomo-notice.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "title": {
-                "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

@@ -1,36 +0,0 @@
-export default {
-    title: 'Shared Ui/Matomo 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.'
-        },
-        forceShow: {
-            control: 'boolean',
-            description: 'Controls whether the notice is displayed.'
-        }
-    },
-    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}"
-        force-show="${args.forceShow}">
-      </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.',
-        forceShow: false
-    }
-};

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

@@ -1,124 +0,0 @@
-/*
-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

@@ -1,92 +0,0 @@
-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.title = '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: '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"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-social-networks.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-social-networks.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "title": {
-                "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

@@ -1,21 +0,0 @@
-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

@@ -1,29 +0,0 @@
-.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;
-  }
-