@ebrains/components 0.4.0-alpha.0 → 0.6.0-alpha.0

package/dist/esm/eds-frame.entry.js

@@ -0,0 +1,87 @@
+import { r as registerInstance, h, g as getElement } from './index-e96badea.js';
+
+const EdsFrame = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.frameLabel = undefined;
+        this.urlLabel = 'Open in Storybook';
+        this.errorMessage = 'Could not load the requested Storybook content. Please check the URL or try again later.';
+        this.storybookUrl = undefined;
+        this.storyPath = undefined;
+        this.intent = 'strong';
+        this.tiny = false;
+        this.size = 'auto';
+        this.bg = true;
+        this.iframeError = false;
+    }
+    articleClasses() {
+        return [
+            this.tiny ? 'min-h-120' : 'min-h-156',
+            this.bg ? 'bg-inverse' : 'bg-default',
+            'rounded border-softer effect-focus-within relative flex grow flex-col border-2',
+            'w-full h-full'
+        ].join(' ');
+    }
+    getFrameHeight() {
+        switch (this.size) {
+            case 'sm':
+                return '100px';
+            case 'md':
+                return '200px';
+            case 'lg':
+                return '400px';
+            case 'xl':
+                return '700px';
+            default:
+                return 'auto';
+        }
+    }
+    async checkIframeAvailability() {
+        try {
+            const response = await fetch(this.frameSrc, { method: 'GET' });
+            if (!response.ok) {
+                throw new Error('Failed to load');
+            }
+        }
+        catch (error) {
+            this.iframeError = true;
+        }
+    }
+    componentWillLoad() {
+        this.checkIframeAvailability();
+    }
+    componentDidLoad() {
+        // Emit context for each eds-link element after the component is fully loaded
+        const links = this.el.querySelectorAll('eds-link');
+        links.forEach((link) => {
+            this.emitContext(link);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param linkElement - The link element to which the event will be dispatched.
+     */
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: this.frameLabel
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    get storyLink() {
+        return `${this.storybookUrl}/?path=/story/${this.storyPath}`;
+    }
+    get frameSrc() {
+        return `${this.storybookUrl}/iframe.html?id=${this.storyPath}&viewMode=story`;
+    }
+    render() {
+        return (h("div", { key: '20786dd40414d29f98d496e29720bd78b9d7cf8e', class: this.articleClasses() }, h("div", { key: '208612330c9d2872c68aeb310e164c8a915a51ef', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'ada2a40384ffaffadc8887580aa6184422008a68', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (h("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '26a5ae1c81b60b05b6f4859ffa4dbd13bb2557f3', class: "border-softer border-t-2" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+    }
+    get el() { return getElement(this); }
+};
+
+export { EdsFrame as eds_frame };

package/dist/esm/eds-fullscreen-menu.entry.js

@@ -0,0 +1,96 @@
+import { r as registerInstance, c as createEvent, h } from './index-e96badea.js';
+
+const edsFullscreenMenuCss = "";
+const EdsFullscreenMenuStyle0 = edsFullscreenMenuCss;
+
+const EdsFullscreenMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.menuClose = createEvent(this, "menuClose", 7);
+        this.links = undefined;
+        this.menuLinks = undefined;
+        this.homeUrl = '/';
+        this.inverseHeader = false;
+        this.isMenuOpen = false;
+    }
+    /**
+     * Listens for the toggleMenu event to open or close the menu.
+     * This event is emitted by the eds-header component.
+     */
+    handleToggleMenu(event) {
+        this.isMenuOpen = event.detail; // Set isMenuOpen based on the event payload
+    }
+    /** Opens the menu */
+    openMenu() {
+        this.isMenuOpen = true;
+    }
+    /** Closes the menu */
+    closeMenu() {
+        this.isMenuOpen = false;
+        this.menuClose.emit();
+    }
+    // Lifecycle method to add the resize event listener when component loads
+    componentDidLoad() {
+        window.addEventListener('resize', this.handleResize.bind(this));
+    }
+    // Lifecycle method to remove the resize event listener when component unloads
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize.bind(this));
+    }
+    // Function to close the menu if screen width is larger than a defined breakpoint (1024px)
+    handleResize() {
+        if (window.innerWidth >= 1024) {
+            this.isMenuOpen = false;
+        }
+    }
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    get parsedLinks() {
+        if (typeof this.links === 'object') {
+            return this.links;
+        }
+        else if (typeof this.links === 'string') {
+            try {
+                return JSON.parse(this.links);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing links prop:', e);
+                return [];
+            }
+        }
+        return [];
+    }
+    /**
+     * Parses the `menuLinks` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `menuLinks` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed menu link objects
+     */
+    get parsedMenuLinks() {
+        if (typeof this.menuLinks === 'object') {
+            return this.menuLinks;
+        }
+        else if (typeof this.menuLinks === 'string') {
+            try {
+                return JSON.parse(this.menuLinks);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing menuLinks prop:', e);
+                return [];
+            }
+        }
+        return [];
+    }
+    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;
+    }
+};
+EdsFullscreenMenu.style = EdsFullscreenMenuStyle0;
+
+export { EdsFullscreenMenu as eds_fullscreen_menu };

package/dist/esm/eds-header.entry.js

@@ -0,0 +1,93 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e96badea.js';
+
+const edsHeaderCss = "";
+const EdsHeaderStyle0 = edsHeaderCss;
+
+const EdsHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toggleMenu = createEvent(this, "toggleMenu", 7);
+        this.homeUrl = '/';
+        this.links = undefined;
+        this.inverseHeader = false;
+        this.menuEnabled = false;
+        this.isMenuOpen = false;
+        this.isUserMenuOpen = false;
+        this.isAuthenticated = false;
+    }
+    onAuthStatusChanged(event) {
+        var _a;
+        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
+    }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-link` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        // Emit context for each eds-link element after the component is fully loaded
+        const links = this.hostEl.querySelectorAll('eds-link');
+        links.forEach((link) => {
+            this.emitContext(link);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param linkElement - The link element to which the event will be dispatched.
+     */
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.hostEl.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    /** Emits an event to open or close the menu */
+    handleToggleMenu() {
+        this.toggleMenu.emit(!this.isMenuOpen);
+    }
+    /**
+     * Toggles the visibility of the user menu.
+     * Opens the user menu if closed, and closes it if open.
+     */
+    toggleUserMenu() {
+        this.isUserMenuOpen = !this.isUserMenuOpen;
+    }
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    get parsedLinks() {
+        // If it's already an array, return it immediately.
+        if (Array.isArray(this.links)) {
+            return this.links;
+        }
+        if (typeof this.links === 'object') {
+            return this.links;
+        }
+        else if (typeof this.links === 'string') {
+            try {
+                return JSON.parse(this.links);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing links prop:', e);
+                return [];
+            }
+        }
+        return [];
+    }
+    render() {
+        return (h("header", { key: '8447435914bd3cdf61ce03f2a6bc646fd6b39b01', class: `flex items-center justify-between relative z-10
+       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '2a7a525d9ec5f86437212ab5b6c60c901e1f69a8', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '29381ef7d9f600690a373a09be30b2dea6d5b936', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '8085c6dfa6dadce3d7eefb45505e9c9404fd422d', 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: 'cb8442be1efc058dc46c283c85e50c58dd627f3e', 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: '5d39561f4f43641640cc3f5d01edd35ebde794e3' }), 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));
+    }
+    get hostEl() { return getElement(this); }
+};
+EdsHeader.style = EdsHeaderStyle0;
+
+export { EdsHeader as eds_header };

package/dist/esm/eds-icon-arrow-diagonal.entry.js

@@ -7,7 +7,7 @@ const EdsIconArrowDiagonal = class {
         this.addClass = '';
     }
     render() {
-        return h("span", { key: '08ebdce5cfbe75bf4bfab8f72493e2178be55c3c', class: this.addClass, innerHTML: arrowDiagonal });
+        return h("span", { key: 'd85a4d425e0c255efe4763d4a13f13b6ff727c2c', class: this.addClass, innerHTML: arrowDiagonal });
     }
 };
 

package/dist/esm/eds-icon-arrow-right.entry.js

@@ -7,7 +7,7 @@ const EdsIconArrowRight = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '6d704324784e6c3d9c221dcaf83bd86a8a6a94ab', class: this.class, innerHTML: arrowRight });
+        return h("span", { key: '4a2b33b86753acab8270a45c7b250603b128bc88', class: this.class, innerHTML: arrowRight });
     }
 };
 

package/dist/esm/eds-icon-bluesky.entry.js

@@ -7,7 +7,7 @@ const EdsIconBluesky = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '8b5d4cfeedf6d7e9bea48d7ba892527d484c858d', class: this.class, innerHTML: bluesky });
+        return h("span", { key: '845a157678b9d059b2c9bd8a6265d3a62f33c31a', class: this.class, innerHTML: bluesky });
     }
 };
 

package/dist/esm/eds-icon-chevron-down.entry.js

@@ -7,7 +7,7 @@ const EdsIconChevronDown = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'bc01e9e10033245e02403b6b919911018eef9919', class: this.class, innerHTML: chevronDown });
+        return h("span", { key: 'fa8022d27b91e909d4cd5522c6d0406be698a412', class: this.class, innerHTML: chevronDown });
     }
 };
 

package/dist/esm/eds-icon-chevron-left.entry.js

@@ -7,7 +7,7 @@ const EdsIconChevronLeft = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'd74bd0b2ddfd5bd61c97309aebb71d7c29f0cf43', class: this.class, innerHTML: chevronLeft });
+        return h("span", { key: 'c723d7f1bbd596063ae7e66123b8038af5320a54', class: this.class, innerHTML: chevronLeft });
     }
 };
 

package/dist/esm/eds-icon-chevron-right.entry.js

@@ -7,7 +7,7 @@ const EdsIconChevronRight = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '998491aed74bd3edd1fb8545f85ab52cf2703b3f', class: this.class, innerHTML: chevronRight });
+        return h("span", { key: 'f770cd9151077e8708c76d2082613c65a20c420f', class: this.class, innerHTML: chevronRight });
     }
 };
 

package/dist/esm/eds-icon-chevron-up.entry.js

@@ -7,7 +7,7 @@ const EdsIconChevronUp = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'd0723afa766fc6dac454ec84602bd50ba4e49950', class: this.class, innerHTML: chevronUp });
+        return h("span", { key: '40d18a840277f2aba5d314a36fca5c1f8fd99cc6', class: this.class, innerHTML: chevronUp });
     }
 };
 

package/dist/esm/eds-icon-close.entry.js

@@ -7,7 +7,7 @@ const EdsIconClose = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '365ad476b1be9c708e73598cad1dd42a908fa1cd', class: this.class, innerHTML: close });
+        return h("span", { key: '947f6615e8ee155be98b379a9c771cc0d453becd', class: this.class, innerHTML: close });
     }
 };
 

package/dist/esm/eds-icon-copy.entry.js

@@ -7,7 +7,7 @@ const EdsIconCopy = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '770c34b98ec0e0a7e16de4d7b5b41b4afec9911e', class: this.class, innerHTML: copy });
+        return h("span", { key: '1e23d4493d5a1d07bc794da20cc4e445a87d56b0', class: this.class, innerHTML: copy });
     }
 };
 

package/dist/esm/eds-icon-eu.entry.js

@@ -7,7 +7,7 @@ const EdsIconEu = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'cc6e5f7d7333ff7ed4a6f716e0ee90806fa782f9', class: this.class, innerHTML: euSvg });
+        return h("span", { key: '14254e1b9d43562e6f3f943de22aa8dd4d89a044', class: this.class, innerHTML: euSvg });
     }
 };
 

package/dist/esm/eds-icon-facebook.entry.js

@@ -7,7 +7,7 @@ const EdsIconFacebook = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'f859db4f8b6679e138e6d72d1d0f5e5bd1bcf997', class: this.class, innerHTML: facebook });
+        return h("span", { key: '902598891dfe926f92ce5d30dc135896c6eccd43', class: this.class, innerHTML: facebook });
     }
 };
 

package/dist/esm/eds-icon-gitlab.entry.js

@@ -7,7 +7,7 @@ const EdsIconGitlab = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '5a91cfc15c4dec2b50ce57fb0f1d6cc8f57b03e8', class: this.class, innerHTML: gitlabBlack });
+        return h("span", { key: '128f9265dfc1aee95586ba0a3fd20dd131678893', class: this.class, innerHTML: gitlabBlack });
     }
 };
 

package/dist/esm/eds-icon-linkedin.entry.js

@@ -7,7 +7,7 @@ const EdsIconLinkedin = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'b8e0661a74a92c72b6db109cb48db12da48dcf92', class: this.class, innerHTML: linkedin });
+        return h("span", { key: '0f9675a371ca7bb460882c04bf2bb0c103273a0d', class: this.class, innerHTML: linkedin });
     }
 };
 

package/dist/esm/eds-icon-loader.entry.js

@@ -7,7 +7,7 @@ const EdsIconLoader = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '260c4eeb69ff79d943571c1461346b9019ea513a', class: this.class, innerHTML: loader });
+        return h("span", { key: 'f11c60068baa2d2398056b3d7f04129d9deb4517', class: this.class, innerHTML: loader });
     }
 };
 

package/dist/esm/eds-icon-mastodon.entry.js

@@ -7,7 +7,7 @@ const EdsIconMastodon = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '902598891dfe926f92ce5d30dc135896c6eccd43', class: this.class, innerHTML: mastodon });
+        return h("span", { key: '1f68e5d0b6f8455f40bf94f6095eceff00b7887e', class: this.class, innerHTML: mastodon });
     }
 };
 

package/dist/esm/eds-icon-menu.entry.js

@@ -7,7 +7,7 @@ const EdsIconMenu = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '9d15be28017eb074a69846a2a639861de997130b', class: this.class, innerHTML: menu });
+        return h("span", { key: '0084602c8e870b70caa66479f71bed3bd0cce94e', class: this.class, innerHTML: menu });
     }
 };
 

package/dist/esm/eds-icon-more.entry.js

@@ -7,7 +7,7 @@ const EdsIconMore = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '0f7d61104f8f2b0a83c5b60a6ce81c6ab91ecb9c', class: this.class, innerHTML: more });
+        return h("span", { key: 'dd9df55fa03c1b27f2f931c7d07ccc69ee940ff4', class: this.class, innerHTML: more });
     }
 };
 

package/dist/esm/eds-icon-search.entry.js

@@ -7,7 +7,7 @@ const EdsIconSearch = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '6795d973d3a1fff27c2fd6181235d0284abaf3b7', class: this.class, innerHTML: search });
+        return h("span", { key: '42acc730afd956c2884b0789b3ea37ccf323630b', class: this.class, innerHTML: search });
     }
 };
 

package/dist/esm/eds-icon-success.entry.js

@@ -7,7 +7,7 @@ const EdsIconSuccess = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: '15e428fd72496249adfe372847d5c683cd3412b1', class: this.class, innerHTML: success });
+        return h("span", { key: '8b5d4cfeedf6d7e9bea48d7ba892527d484c858d', class: this.class, innerHTML: success });
     }
 };
 

package/dist/esm/eds-icon-twitter.entry.js

@@ -7,7 +7,7 @@ const EdsIconTwitter = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'cfa2d903e79d5a17fb7511e078c0d26bd6d3abd6', class: this.class, innerHTML: twitter });
+        return h("span", { key: 'a06ab2e79a1ec7603244ec09649ccc2c9ea1950c', class: this.class, innerHTML: twitter });
     }
 };
 

package/dist/esm/eds-icon-user.entry.js

@@ -7,7 +7,7 @@ const EdsIconUser = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'dc06f1a54b9542cb2c0165fb3bdff960ecd81cc0', class: this.class, innerHTML: user });
+        return h("span", { key: 'cb31d12146ff577195650b502f51005092404a30', class: this.class, innerHTML: user });
     }
 };
 

package/dist/esm/eds-icon-youtube.entry.js

@@ -7,7 +7,7 @@ const EdsIconYoutube = class {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'ecd12a21c5797f93f7d8abe67803b27862967b2f', class: this.class, innerHTML: youtube });
+        return h("span", { key: '4eba69bfec926b7a3490feee15b5947a8ab8a7b9', class: this.class, innerHTML: youtube });
     }
 };