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

package/eds-dropdown_2.entry.esm.js

@@ -0,0 +1,235 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsDropdownCss = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}";
+const EdsDropdownStyle0 = edsDropdownCss;
+const EdsDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.focusableItems = [];
+    /**
+     * Toggles the visibility of the dropdown and manages focus.
+     */
+    this.handleClick = () => {
+      var _a;
+      this.isOpen = !this.isOpen;
+      if (this.isOpen) {
+        this.focusIndex = 0;
+        this.focusItem();
+      } else {
+        this.closeDropdown();
+      }
+      sendAnalytics({
+        category: 'ui-component',
+        parentContext: null,
+        tag: this.host.tagName.toLowerCase(),
+        name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+        action: this.isOpen ? 'expanded' : 'collapsed'
+      });
+    };
+    this.icon = 'chevron-down';
+    this.label = undefined;
+    this.rounded = false;
+    this.ariaLabel = 'Open dropdown';
+    this.asNav = true;
+    this.dropdownPos = 'left';
+    this.dropdownOffset = true;
+    this.intent = 'tertiary';
+    this.isOpen = false;
+    this.focusIndex = -1;
+  }
+  /**
+   * Closes the dropdown when a click occurs outside of it.
+   * @param {Event} e - The click event.
+   */
+  handleWindowClick(e) {
+    if (!this.host.contains(e.target)) {
+      this.closeDropdown();
+    }
+  }
+  /**
+   * Handles keyboard navigation and accessibility within the dropdown.
+   * @param {KeyboardEvent} event - The keyboard event.
+   */
+  handleKeyDown(event) {
+    if (this.isOpen) {
+      const key = event.key;
+      switch (key) {
+        case 'Tab':
+          this.closeDropdown();
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          this.focusIndex = (this.focusIndex - 1 + this.focusableItems.length) % this.focusableItems.length;
+          this.focusItem();
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          this.focusIndex = (this.focusIndex + 1) % this.focusableItems.length;
+          this.focusItem();
+          break;
+      }
+    }
+  }
+  /**
+   * Closes the dropdown and resets focus.
+   */
+  closeDropdown() {
+    this.isOpen = false;
+    this.focusIndex = -1;
+  }
+  /**
+   * Sets focus on the currently selected item in the dropdown.
+   */
+  focusItem() {
+    var _a;
+    (_a = this.focusableItems[this.focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /**
+   * Lifecycle method that runs after the component has been added to the DOM.
+   * Initializes focusable items within the dropdown.
+   */
+  componentDidLoad() {
+    var _a;
+    this.focusableItems = Array.from(((_a = this.dropdownContent) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button')) || []);
+  }
+  /**
+   * Renders the dropdown component and displays its content when open.
+   * @returns {JSX.Element} The rendered dropdown component.
+   */
+  render() {
+    return h("div", {
+      key: '84f4cea78ea1c40c7897a356fe03ac83922fccb8',
+      class: "z-focus relative",
+      ref: el => this.dropdownContent = el
+    }, h("eds-button", {
+      key: '99dc51632dc82830054502a2d6d77d9fcefe9337',
+      label: this.label,
+      "aria-label": this.ariaLabel,
+      icon: this.icon,
+      intent: this.intent,
+      onClick: this.handleClick,
+      "aria-expanded": this.isOpen.toString(),
+      "aria-haspopup": "menu"
+    }), h("nav", {
+      key: 'a63613a7ecf709fd1d22d77da4b2d286905fef3e',
+      role: "menu",
+      class: {
+        'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
+        'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
+        'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
+        'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
+        'right-0': this.dropdownPos === 'right' && !this.dropdownOffset,
+        'rounded-lg': this.rounded
+      },
+      style: {
+        display: this.isOpen ? 'block' : 'none'
+      },
+      "aria-label": "Dropdown",
+      "aria-hidden": !this.isOpen
+    }, h("slot", {
+      key: 'dda70b865ed03dc7ad36a32934587bbcb0a16c1b'
+    })));
+  }
+  get host() {
+    return getElement(this);
+  }
+};
+EdsDropdown.style = EdsDropdownStyle0;
+const EdsUserModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.user = undefined;
+    this.links = undefined;
+    this.onLogout = undefined;
+    this.parsedUser = {};
+    this.parsedLinks = [];
+  }
+  parseUserProp(newValue) {
+    this.parsedUser = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+  }
+  parseLinksProp(newValue) {
+    this.parsedLinks = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+  }
+  componentWillLoad() {
+    this.parseUserProp(this.user);
+    this.parseLinksProp(this.links);
+  }
+  get initials() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const initials = `${((_b = (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}${((_d = (_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.lastname) === null || _d === void 0 ? void 0 : _d.charAt(0)) || ''}`.toUpperCase();
+    return initials || ((_g = (_f = (_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.fullname) === null || _f === void 0 ? void 0 : _f.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) || '';
+  }
+  get hasLogout() {
+    return typeof this.onLogout === 'function';
+  }
+  render() {
+    var _a, _b, _c, _d, _e;
+    return h("div", {
+      key: '866e4e08b5a5330d341845c7cd68f18845732bb6',
+      class: "min-w-[280px] p-8"
+    }, h("div", {
+      key: 'c3c0c56a0ba0bb035efbc474dacc69454f2f9831',
+      class: "flex gap-x-16 pb-16 border-b-2 border-softer"
+    }, h("eds-avatar", {
+      key: '053e545eb7b8f66b9b9463f77ac89083b2bc87a4',
+      "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname,
+      "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname,
+      initials: this.initials,
+      color: "grey",
+      rounded: true,
+      "initials-strong": true
+    }), h("div", {
+      key: 'c2d3a51f5aa92dda20058b51aaab3405a85dfbc0',
+      class: "max-w-full"
+    }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && h("p", {
+      key: 'fcc11680037eb282316cfde3988beb7550a51059',
+      class: "f-ui-01 text-default w-full text-ellipsis"
+    }, this.parsedUser.fullname), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && h("p", {
+      key: '2f6aac63baecb3da750f3eb9a09f8793120d8977',
+      class: "f-ui-03-light text-light mt-4"
+    }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && h("p", {
+      key: '04f3cf2dab10351bc52c94f53c6e9b75d3d34fe7',
+      class: "f-ui-03-light text-light mt-4"
+    }, this.parsedUser.email))), h("div", {
+      key: 'b5bb3171c338891669251b8cde0cdbc810562065',
+      class: "text-default mt-16 flex w-full flex-col gap-y-8"
+    }, h("div", {
+      key: '7020f1d94ad9ed10d8b1e1fce88837c70ef310b8',
+      class: "border-softer mb-10 border-b-2 pb-16"
+    }, h("eds-link", {
+      key: '26946fa26bd53953e99f2f61b4d9f47e60f5dc6f',
+      label: "My EBRAINS",
+      "aria-label": "My EBRAINS",
+      url: "https://www.ebrains.eu/dashboard",
+      intent: "primary",
+      "extra-class": "w-full",
+      external: true
+    })), h("eds-link", {
+      key: 1,
+      label: "Account Settings",
+      url: "https://iam.ebrains.eu/auth/realms/hbp/account/",
+      intent: "secondary",
+      icon: "arrow-diagonal",
+      external: true,
+      "extra-class": "w-full"
+    }), this.hasLogout && h("eds-link", {
+      key: 'e53f2b7588fea91fd16c0effe81609e1ded97304',
+      label: "Sign out",
+      intent: "tertiary",
+      "extra-class": "w-full justify-center",
+      onClick: () => this.onLogout && this.onLogout()
+    })));
+  }
+  static get watchers() {
+    return {
+      "user": ["parseUserProp"],
+      "links": ["parseLinksProp"]
+    };
+  }
+};
+
+export { EdsDropdown as eds_dropdown, EdsUserModal as eds_user_modal };

package/eds-footer.entry.esm.js

@@ -0,0 +1,102 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsFooterCss = "";
+const EdsFooterStyle0 = edsFooterCss;
+const EdsFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Scrolls the page smoothly back to the top.
+     * Called when the "Back to top" button is clicked.
+     * @private
+     */
+    this.backToTop = () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    };
+    this.extraClass = '';
+    this.social = false;
+    this.enableScrollTop = false;
+    this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
+    this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
+    this.showMatomoNotice = false;
+  }
+  /**
+   * Renders the footer component with optional sections and elements,
+   * including social network links, a Horizon Europe funding acknowledgment, and
+   * legal links such as "Cookies Preferences" and copyright information.
+   *
+   * @returns {JSX.Element} The rendered JSX for the footer component.
+   */
+  render() {
+    return h("footer", {
+      key: '9a7256325386a5072e9f1e391d838bb38458d99f',
+      class: `${this.extraClass} pb-banner`
+    }, this.social ? h("div", {
+      class: "border-softest border-t-2 pt-20 pb-28 md:pt-28"
+    }, h("div", {
+      class: "container pb-20 xl:pb-40 "
+    }, h("div", {
+      class: "grid-layout"
+    }, h("div", {
+      class: "grid-col-span-12 lg:grid-col-span-5"
+    }, h("eds-social-networks", {
+      class: "mt-28"
+    })), h("nav", {
+      "aria-label": "Secondary nav",
+      class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0"
+    })))) : null, h("div", {
+      key: '747d4708e90c13fe9e5aa234eaba182df100fca9',
+      class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28`
+    }, h("div", {
+      key: '3fecf340c536bb64aa98fd04c26c5b47d146630b',
+      class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap"
+    }, h("div", {
+      key: '6b7f167ac50c6aef9c76e56634a7228585c211db',
+      class: "flex items-center gap-x-12"
+    }, h("a", {
+      key: '8e496d31c4b883a867b5f2c6a5fab8a60899470a',
+      target: "_blank",
+      rel: "noopener noreferrer",
+      class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0",
+      href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en",
+      "aria-label": "Learn about Horizon 2020 funding"
+    }, h("eds-img", {
+      key: 'b3cdfc2cc428951d58fe5ae4f1fe1992fbded7f7',
+      width: 54,
+      height: 41,
+      src: "https://www.ebrains.eu/flags/4x3/eu.svg",
+      alt: "European Union Flag"
+    }))), h("div", {
+      key: '8c3a9f55f07b44ad633b11a1d4faa8396a5ae30a',
+      class: "order-last w-full lg:order-none lg:w-auto"
+    }, h("div", {
+      key: 'c268c107f6be692756d15a8f096e1a86df7bb62a',
+      class: "f-ui-04 text-light"
+    }, h("p", {
+      key: '528014cafcd1b498efa01482934b54c44dd03bd6'
+    }, this.fundedBy), h("div", {
+      key: 'ee5baffcf8f801b7480c8158b30777329699f57f',
+      class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block"
+    }, h("span", {
+      key: '79e600b799480904f47261be78262f344ada967b',
+      class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline"
+    }, "\u00A9 ", this.rightsReserved)))), h("div", {
+      key: '6bde5399c1044e0d85b71c9fab7e3e4c8b93e224',
+      class: "ml-auto pl-12"
+    }, this.enableScrollTop ? h("eds-button", {
+      "aria-label": "Back to top",
+      intent: "ghostInverse",
+      icon: "chevron-up",
+      onClick: this.backToTop
+    }) : null))));
+  }
+};
+EdsFooter.style = EdsFooterStyle0;
+
+export { EdsFooter as eds_footer };