@ebrains/react 0.5.0-alpha.0 → 0.6.0-alpha.0

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

@@ -0,0 +1,143 @@
+import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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/eds-header.entry.esm.js

@@ -0,0 +1,130 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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 };