@ebrains/vue 0.3.0-alpha.0 → 0.5.0-alpha.0

package/{eds-components-section.entry-BAWU9rKy.mjs → eds-components-section.entry-D1ovrn93.mjs}

@@ -1,4 +1,4 @@
-import { r as t, h as e } from "./index-Dg2DO7q4.mjs";
+import { r as t, h as e } from "./index-C-Gy1Lax.mjs";
 const a = () => e(
   "div",
   { class: "static-content container" },
@@ -62,6 +62,16 @@ const a = () => e(
     "div",
     { class: "my-8" },
     e("eds-code-block", { code: "npm install @ebrains/react", language: "html", "copy-label": "Copy Code" })
+  ),
+  e(
+    "div",
+    { class: "my-8" },
+    e("eds-code-block", { code: "npm install @ebrains/vue", language: "html", "copy-label": "Copy Code" })
+  ),
+  e(
+    "div",
+    { class: "my-8" },
+    e("eds-code-block", { code: "npm install @ebrains/angular", language: "html", "copy-label": "Copy Code" })
   )
 ), o = () => e(
   "div",
@@ -77,11 +87,16 @@ const a = () => e(
     "eds-section-core",
     { "section-title": "Example React App", "heading-level": "h3" },
     e("eds-code-block", { code: `
-import { EdsHeader } from "@ebrains/react";
+import {
+  EdsHeader,
+  EdsFullscreenMenu,
+  EdsUser
+} from "@ebrains/react";
 
 interface User {
   firstname: string;
   lastname: string;
+  // Add any other properties your user object might have
 }
 
 interface AuthStatus {
@@ -92,73 +107,77 @@ interface AuthStatus {
 import { useEffect, useState } from "react";
 
 export function App() {
-
   const [authStatus, setAuthStatus] = useState<AuthStatus>({
     authenticated: false,
     user: null,
   });
-  
   const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
 
   // Use useEffect to render Stencil components dynamically after the component mounts
   useEffect(() => {
-    
     const handleAuthStatusChange = (event: CustomEvent) => {
       console.log(event.detail);
       setAuthStatus(event.detail); // Set the entire object
     };
 
-    const handleTabChange = (
-      event: CustomEvent<{ index: number; name: string }>,
-    ) => {
-      console.log(event.detail);
-      setActiveTabIndex(event.detail.index);
-    };
-
     document.addEventListener(
       "authStatusChanged",
       handleAuthStatusChange as EventListener,
     );
-    document.addEventListener("tabChange", handleTabChange as EventListener);
 
     return () => {
       document.removeEventListener(
         "authStatusChanged",
         handleAuthStatusChange as EventListener,
       );
-      document.removeEventListener(
-        "tabChange",
-        handleTabChange as EventListener,
-      );
     };
-  }, []); // Empty dependency array ensures this runs only once after mounting
+  }, []);
 
   return (
-    <div id="main">
+    <div>
       <EdsHeader
-        home-url="/"
-        user-feature={false}
-        keycloak-url="http://localhost:8080"
-        keycloak-realm="nigeor-realm"
-        keycloak-client-id="stencil-app"
-        links="[
-            { "label": "About", "url": "/about" },
-            { "label": "Focus Areas", "url": "/focus-areas" },
-            { "label": "News & Events", "url": "/news-and-events" },
-            { "label": "Contact", "url": "/contact" }
-          ]"
-      ></EdsHeader>
+        homeUrl="/"
+        menuEnabled={true}
+        inverseHeader={false}
+        links={[
+          { label: "About", url: "#" },
+          { label: "Focus Areas", url: "#" },
+          { label: "News & Events", url: "#" },
+          { label: "Contact", url: "#" }
+        ]}
+      >
+        <div className="px-16">
+          <EdsUser
+            keycloak-url="http://localhost:8080"
+            keycloak-realm="nigeor-realm"
+            keycloak-client-id="stencil-app"
+          ></EdsUser>
+        </div>
+      </EdsHeader>
 
-      <div> 
-        User is{" "} {authStatus.authenticated ? "authenticated" : "not authenticated"}
+      <EdsFullscreenMenu
+        home-url="/"
+        links={[
+          { label: "About", url: "#" },
+          { label: "Focus Areas", url: "#" },
+          { label: "News & Events", url: "#" },
+          { label: "Contact", url: "#" }
+        ]}
+      ></EdsFullscreenMenu>
+      
+      <div>
+        User is{" "}
+        {authStatus.authenticated ? "authenticated" : "not authenticated"}
       </div>
       {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}
-      </div>
+
+      <div id="main"></div>
     </div>
   );
 }
 
 export default App;
+
 `, language: "javascript", "copy-label": "Copy Code" })
   )
 ), l = () => e(
@@ -266,7 +285,7 @@ defineCustomElements();`, language: "javascript", "copy-label": "Copy Code" }),
   <eds-footer></eds-footer>
 </div>`, language: "javascript", "copy-label": "Copy Code" })
   )
-), d = class {
+), c = class {
   constructor(n) {
     t(this, n), this.tabIndex = void 0;
   }
@@ -287,9 +306,9 @@ defineCustomElements();`, language: "javascript", "copy-label": "Copy Code" }),
     }
   }
   render() {
-    return e("div", { key: "ce34514ab73daa5baa011bda56a13d6197f8bfd0", class: "container" }, this.renderContent());
+    return e("div", { key: "7e582a0eeafc2687229454532b5a7f66f91c1856", class: "container" }, this.renderContent());
   }
 };
 export {
-  d as eds_components_section
+  c as eds_components_section
 };

package/{eds-docs-palettes.entry-D3DdXkoo.js → eds-docs-palettes.entry-Bk77Xn04.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Dvww9rdy.js"),l=class{constructor(t){e.registerInstance(this,t),this.tabIndex=void 0}renderContent(){switch(this.tabIndex){case 0:return e.h("div",null,e.h("h2",null,"Primary Palette"),e.h("color-primary-palette",null),e.h("h2",null,"Secondary Palette"),e.h("color-secondary-palette",null),e.h("h2",null,"Support Palette"),e.h("color-support-palette",null));case 1:return e.h("div",null,e.h("h2",null,"Primary Palette"),e.h("gradient-primary-palette",null),e.h("h2",null,"Secondary Palette"),e.h("gradient-secondary-palette",null),e.h("h2",null,"Support Palette"),e.h("gradient-support-palette",null));default:return e.h("p",null,"Content not available.")}}render(){return e.h("div",{key:"42f0a4598c64661d98054522e88366ec591a2cb3",class:"container"},this.renderContent())}};exports.eds_docs_palettes=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D_kZU_4I.js"),l=class{constructor(t){e.registerInstance(this,t),this.tabIndex=void 0}renderContent(){switch(this.tabIndex){case 0:return e.h("div",null,e.h("h2",null,"Primary Palette"),e.h("color-primary-palette",null),e.h("h2",null,"Secondary Palette"),e.h("color-secondary-palette",null),e.h("h2",null,"Support Palette"),e.h("color-support-palette",null));case 1:return e.h("div",null,e.h("h2",null,"Primary Palette"),e.h("gradient-primary-palette",null),e.h("h2",null,"Secondary Palette"),e.h("gradient-secondary-palette",null),e.h("h2",null,"Support Palette"),e.h("gradient-support-palette",null));default:return e.h("p",null,"Content not available.")}}render(){return e.h("div",{key:"e8cd71caa7b23cc4dc28c694ecb9f13e3fd4170a",class:"container"},this.renderContent())}};exports.eds_docs_palettes=l;

package/{eds-docs-palettes.entry-etHagd2P.mjs → eds-docs-palettes.entry-lpT0ypSs.mjs}

@@ -1,4 +1,4 @@
-import { r as l, h as e } from "./index-Dg2DO7q4.mjs";
+import { r as l, h as e } from "./index-C-Gy1Lax.mjs";
 const r = class {
   constructor(t) {
     l(this, t), this.tabIndex = void 0;
@@ -14,7 +14,7 @@ const r = class {
     }
   }
   render() {
-    return e("div", { key: "42f0a4598c64661d98054522e88366ec591a2cb3", class: "container" }, this.renderContent());
+    return e("div", { key: "e8cd71caa7b23cc4dc28c694ecb9f13e3fd4170a", class: "container" }, this.renderContent());
   }
 };
 export {

package/{eds-docs-tokens.entry-CIGNTs97.mjs → eds-docs-tokens.entry-Bi35zxEM.mjs}

@@ -1,4 +1,4 @@
-import { r as n, h as e } from "./index-Dg2DO7q4.mjs";
+import { r as n, h as e } from "./index-C-Gy1Lax.mjs";
 const r = class {
   constructor(t) {
     n(this, t), this.tabIndex = void 0;
@@ -22,7 +22,7 @@ const r = class {
     }
   }
   render() {
-    return e("div", { key: "10708d591c4077e4e1fe94073322f01121253bdb", class: "container" }, this.renderContent());
+    return e("div", { key: "b140f7650e5e01711dc0778b04af83f9d004efc7", class: "container" }, this.renderContent());
   }
 };
 export {

package/{eds-docs-tokens.entry--gW4Z293.js → eds-docs-tokens.entry-DCHw-jrS.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Dvww9rdy.js"),n=class{constructor(t){e.registerInstance(this,t),this.tabIndex=void 0}renderContent(){switch(this.tabIndex){case 0:return e.h("token-list",{show:"background"});case 1:return e.h("token-list",{show:"text"});case 2:return e.h("token-list",{show:"border"});case 3:return e.h("token-radii",null);case 4:return e.h("token-list",{show:"outline"});case 5:return e.h("token-shadows",null);default:return e.h("p",null,"Content not available.")}}render(){return e.h("div",{key:"10708d591c4077e4e1fe94073322f01121253bdb",class:"container"},this.renderContent())}};exports.eds_docs_tokens=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D_kZU_4I.js"),n=class{constructor(t){e.registerInstance(this,t),this.tabIndex=void 0}renderContent(){switch(this.tabIndex){case 0:return e.h("token-list",{show:"background"});case 1:return e.h("token-list",{show:"text"});case 2:return e.h("token-list",{show:"border"});case 3:return e.h("token-radii",null);case 4:return e.h("token-list",{show:"outline"});case 5:return e.h("token-shadows",null);default:return e.h("p",null,"Content not available.")}}render(){return e.h("div",{key:"b140f7650e5e01711dc0778b04af83f9d004efc7",class:"container"},this.renderContent())}};exports.eds_docs_tokens=n;

package/eds-dropdown_2.entry-Bamjbo1o.mjs

@@ -0,0 +1,115 @@
+import { r as l, h as s, g as n } from "./index-C-Gy1Lax.mjs";
+import { s as f } from "./analytics-1cde8e4a-BDRcCMlV.mjs";
+const c = ".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}", h = c, p = class {
+  constructor(e) {
+    l(this, e), this.focusableItems = [], this.handleClick = () => {
+      var t;
+      this.isOpen = !this.isOpen, this.isOpen ? (this.focusIndex = 0, this.focusItem()) : this.closeDropdown(), f({
+        category: "ui-component",
+        parentContext: null,
+        tag: this.host.tagName.toLowerCase(),
+        name: ((t = this.label) === null || t === void 0 ? void 0 : t.toLowerCase()) || "",
+        action: this.isOpen ? "expanded" : "collapsed"
+      });
+    }, this.icon = "chevron-down", this.label = void 0, this.rounded = !1, this.ariaLabel = "Open dropdown", this.asNav = !0, this.dropdownPos = "left", this.dropdownOffset = !0, this.intent = "tertiary", this.isOpen = !1, this.focusIndex = -1;
+  }
+  /**
+   * Closes the dropdown when a click occurs outside of it.
+   * @param {Event} e - The click event.
+   */
+  handleWindowClick(e) {
+    this.host.contains(e.target) || this.closeDropdown();
+  }
+  /**
+   * Handles keyboard navigation and accessibility within the dropdown.
+   * @param {KeyboardEvent} event - The keyboard event.
+   */
+  handleKeyDown(e) {
+    if (this.isOpen)
+      switch (e.key) {
+        case "Tab":
+          this.closeDropdown();
+          break;
+        case "ArrowUp":
+          e.preventDefault(), this.focusIndex = (this.focusIndex - 1 + this.focusableItems.length) % this.focusableItems.length, this.focusItem();
+          break;
+        case "ArrowDown":
+          e.preventDefault(), this.focusIndex = (this.focusIndex + 1) % this.focusableItems.length, this.focusItem();
+          break;
+      }
+  }
+  /**
+   * Closes the dropdown and resets focus.
+   */
+  closeDropdown() {
+    this.isOpen = !1, this.focusIndex = -1;
+  }
+  /**
+   * Sets focus on the currently selected item in the dropdown.
+   */
+  focusItem() {
+    var e;
+    (e = this.focusableItems[this.focusIndex]) === null || e === void 0 || e.focus();
+  }
+  /**
+   * Lifecycle method that runs after the component has been added to the DOM.
+   * Initializes focusable items within the dropdown.
+   */
+  componentDidLoad() {
+    var e;
+    this.focusableItems = Array.from(((e = this.dropdownContent) === null || e === void 0 ? void 0 : e.querySelectorAll("a, button")) || []);
+  }
+  /**
+   * Renders the dropdown component and displays its content when open.
+   * @returns {JSX.Element} The rendered dropdown component.
+   */
+  render() {
+    return s("div", { key: "84f4cea78ea1c40c7897a356fe03ac83922fccb8", class: "z-focus relative", ref: (e) => this.dropdownContent = e }, s("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" }), s("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": !0,
+      "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 }, s("slot", { key: "dda70b865ed03dc7ad36a32934587bbcb0a16c1b" })));
+  }
+  get host() {
+    return n(this);
+  }
+};
+p.style = h;
+const g = class {
+  constructor(e) {
+    l(this, e), this.user = void 0, this.links = void 0, this.onLogout = void 0, this.parsedUser = {}, this.parsedLinks = [];
+  }
+  parseUserProp(e) {
+    this.parsedUser = typeof e == "string" ? JSON.parse(e) : e;
+  }
+  parseLinksProp(e) {
+    this.parsedLinks = typeof e == "string" ? JSON.parse(e) : e;
+  }
+  componentWillLoad() {
+    this.parseUserProp(this.user), this.parseLinksProp(this.links);
+  }
+  get initials() {
+    var e, t, i, o, a, r, d;
+    return `${((t = (e = this.parsedUser) === null || e === void 0 ? void 0 : e.firstname) === null || t === void 0 ? void 0 : t.charAt(0)) || ""}${((o = (i = this.parsedUser) === null || i === void 0 ? void 0 : i.lastname) === null || o === void 0 ? void 0 : o.charAt(0)) || ""}`.toUpperCase() || ((d = (r = (a = this.parsedUser) === null || a === void 0 ? void 0 : a.fullname) === null || r === void 0 ? void 0 : r.charAt(0)) === null || d === void 0 ? void 0 : d.toUpperCase()) || "";
+  }
+  get hasLogout() {
+    return typeof this.onLogout == "function";
+  }
+  render() {
+    var e, t, i, o, a;
+    return s("div", { key: "4a80335b6a59b9653130ca75a6e42c04fce68f4f", class: "min-w-[280px] p-8" }, s("div", { key: "9c97f6be46216587692d4852174cecfaacb70593", class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, s("eds-avatar", { key: "c778f6bdfb21068ca7c2deff6e298f61af6dbc67", "first-name": (e = this.parsedUser) === null || e === void 0 ? void 0 : e.firstname, "last-name": (t = this.parsedUser) === null || t === void 0 ? void 0 : t.lastname, initials: this.initials, color: "grey", rounded: !0, "initials-strong": !0 }), s("div", { key: "7f453546c9cc54597069abb3e4b50312fe7bf364", class: "max-w-full" }, ((i = this.parsedUser) === null || i === void 0 ? void 0 : i.fullname) && s("p", { key: "34e080ef159535820c09378701de0e6f4fd96009", class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname), ((o = this.parsedUser) === null || o === void 0 ? void 0 : o.username) && s("p", { key: "2f85764e7d015dc3f3b22ca8a07126f8f57216ef", class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((a = this.parsedUser) === null || a === void 0 ? void 0 : a.email) && s("p", { key: "002dec51e979c29f2343f55e004449e4cee4075c", class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), s("div", { key: "740b78c504257fb755ba7ba04dd25f023d37ed33", class: "text-default mt-16 flex w-full flex-col gap-y-8" }, s("div", { key: "ac307937bdd3fc86cce502e5eeb3e922d931f418", class: "border-softer mb-10 border-b-2 pb-16" }, s("eds-link", { key: "bdd0f1ef62ac78ffb1b40ed6873475df360cec66", label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: !0 })), s("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: !0, "extra-class": "w-full" }), this.hasLogout && s("eds-link", { key: "d73016ad71f3b356b7fb7d0a2a84124eabb05da5", 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 {
+  p as eds_dropdown,
+  g as eds_user_modal
+};

package/eds-dropdown_2.entry-YEBzyKJu.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-D_kZU_4I.js"),l=require("./analytics-1cde8e4a-B_MD-9qW.js"),h=".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}",c=h,n=class{constructor(e){s.registerInstance(this,e),this.focusableItems=[],this.handleClick=()=>{var t;this.isOpen=!this.isOpen,this.isOpen?(this.focusIndex=0,this.focusItem()):this.closeDropdown(),l.sendAnalytics({category:"ui-component",parentContext:null,tag:this.host.tagName.toLowerCase(),name:((t=this.label)===null||t===void 0?void 0:t.toLowerCase())||"",action:this.isOpen?"expanded":"collapsed"})},this.icon="chevron-down",this.label=void 0,this.rounded=!1,this.ariaLabel="Open dropdown",this.asNav=!0,this.dropdownPos="left",this.dropdownOffset=!0,this.intent="tertiary",this.isOpen=!1,this.focusIndex=-1}handleWindowClick(e){this.host.contains(e.target)||this.closeDropdown()}handleKeyDown(e){if(this.isOpen)switch(e.key){case"Tab":this.closeDropdown();break;case"ArrowUp":e.preventDefault(),this.focusIndex=(this.focusIndex-1+this.focusableItems.length)%this.focusableItems.length,this.focusItem();break;case"ArrowDown":e.preventDefault(),this.focusIndex=(this.focusIndex+1)%this.focusableItems.length,this.focusItem();break}}closeDropdown(){this.isOpen=!1,this.focusIndex=-1}focusItem(){var e;(e=this.focusableItems[this.focusIndex])===null||e===void 0||e.focus()}componentDidLoad(){var e;this.focusableItems=Array.from(((e=this.dropdownContent)===null||e===void 0?void 0:e.querySelectorAll("a, button"))||[])}render(){return s.h("div",{key:"84f4cea78ea1c40c7897a356fe03ac83922fccb8",class:"z-focus relative",ref:e=>this.dropdownContent=e},s.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"}),s.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":!0,"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},s.h("slot",{key:"dda70b865ed03dc7ad36a32934587bbcb0a16c1b"})))}get host(){return s.getElement(this)}};n.style=c;const f=class{constructor(e){s.registerInstance(this,e),this.user=void 0,this.links=void 0,this.onLogout=void 0,this.parsedUser={},this.parsedLinks=[]}parseUserProp(e){this.parsedUser=typeof e=="string"?JSON.parse(e):e}parseLinksProp(e){this.parsedLinks=typeof e=="string"?JSON.parse(e):e}componentWillLoad(){this.parseUserProp(this.user),this.parseLinksProp(this.links)}get initials(){var e,t,i,o,r,a,d;return`${((t=(e=this.parsedUser)===null||e===void 0?void 0:e.firstname)===null||t===void 0?void 0:t.charAt(0))||""}${((o=(i=this.parsedUser)===null||i===void 0?void 0:i.lastname)===null||o===void 0?void 0:o.charAt(0))||""}`.toUpperCase()||((d=(a=(r=this.parsedUser)===null||r===void 0?void 0:r.fullname)===null||a===void 0?void 0:a.charAt(0))===null||d===void 0?void 0:d.toUpperCase())||""}get hasLogout(){return typeof this.onLogout=="function"}render(){var e,t,i,o,r;return s.h("div",{key:"4a80335b6a59b9653130ca75a6e42c04fce68f4f",class:"min-w-[280px] p-8"},s.h("div",{key:"9c97f6be46216587692d4852174cecfaacb70593",class:"flex gap-x-16 pb-16 border-b-2 border-softer"},s.h("eds-avatar",{key:"c778f6bdfb21068ca7c2deff6e298f61af6dbc67","first-name":(e=this.parsedUser)===null||e===void 0?void 0:e.firstname,"last-name":(t=this.parsedUser)===null||t===void 0?void 0:t.lastname,initials:this.initials,color:"grey",rounded:!0,"initials-strong":!0}),s.h("div",{key:"7f453546c9cc54597069abb3e4b50312fe7bf364",class:"max-w-full"},((i=this.parsedUser)===null||i===void 0?void 0:i.fullname)&&s.h("p",{key:"34e080ef159535820c09378701de0e6f4fd96009",class:"f-ui-01 text-default w-full text-ellipsis"},this.parsedUser.fullname),((o=this.parsedUser)===null||o===void 0?void 0:o.username)&&s.h("p",{key:"2f85764e7d015dc3f3b22ca8a07126f8f57216ef",class:"f-ui-03-light text-light mt-4"},this.parsedUser.username),((r=this.parsedUser)===null||r===void 0?void 0:r.email)&&s.h("p",{key:"002dec51e979c29f2343f55e004449e4cee4075c",class:"f-ui-03-light text-light mt-4"},this.parsedUser.email))),s.h("div",{key:"740b78c504257fb755ba7ba04dd25f023d37ed33",class:"text-default mt-16 flex w-full flex-col gap-y-8"},s.h("div",{key:"ac307937bdd3fc86cce502e5eeb3e922d931f418",class:"border-softer mb-10 border-b-2 pb-16"},s.h("eds-link",{key:"bdd0f1ef62ac78ffb1b40ed6873475df360cec66",label:"My EBRAINS","aria-label":"My EBRAINS",url:"https://www.ebrains.eu/dashboard",intent:"primary","extra-class":"w-full",external:!0})),s.h("eds-link",{key:1,label:"Account Settings",url:"https://iam.ebrains.eu/auth/realms/hbp/account/",intent:"secondary",icon:"arrow-diagonal",external:!0,"extra-class":"w-full"}),this.hasLogout&&s.h("eds-link",{key:"d73016ad71f3b356b7fb7d0a2a84124eabb05da5",label:"Sign out",intent:"tertiary","extra-class":"w-full justify-center",onClick:()=>this.onLogout&&this.onLogout()})))}static get watchers(){return{user:["parseUserProp"],links:["parseLinksProp"]}}};exports.eds_dropdown=n;exports.eds_user_modal=f;

package/{eds-form.entry-D8FLPsaS.js → eds-form.entry-a52cYx3b.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index-Dvww9rdy.js"),g=require("./toastManager-d9eee791-DvR_vUPI.js"),b=`@font-face {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./index-D_kZU_4I.js"),g=require("./toastManager-d9eee791-DvR_vUPI.js"),x=require("./analytics-1cde8e4a-B_MD-9qW.js"),h=`@font-face {
     font-family: "Inter";
     font-weight: 100 900;
     font-display: swap;
@@ -7150,4 +7150,4 @@
       padding-right: 0rem;
     }
   }
-  `,h=b,x=class{constructor(e){o.registerInstance(this,e),this.formSubmitting=o.createEvent(this,"formSubmitting",7),this.handleChange=(i,n)=>{const r=i.target;this.values=Object.assign(Object.assign({},this.values),{[n.name]:r.value});const t=Object.assign({},this.errors);if(n.type==="checkbox"||n.type==="radio")if(n.options){const l=this.validateFieldGroup(n.name,n.type,n.required);l.length>0?t[n.name]=l:delete t[n.name]}else{const l=this.validateSingleBox(n.name,n.required);l.length>0?t[n.name]=l:delete t[n.name]}else{const l=this.validateField(n.name,r.value,n.type,n.required,n.maxlength);l.length>0?t[n.name]=l:delete t[n.name]}this.errors=t,this.hasError=Object.keys(t).length>0},this.handleSubmit=async i=>{var n;if(i.preventDefault(),this.isSubmitting)return;if(this.validateForm(),this.hasError){this.alertMessage=this.errorMessage;return}this.isSubmitting=!0,this.formSubmitted=!1,this.alertMessage=null,this.errors={};const r=await this.getFormData();this.setFormUrl&&typeof window<"u"&&r.set("form_url",window.location.href),this.authUser&&r.set("form_user",(n=this.authUser)===null||n===void 0?void 0:n.email);const t=this.coupleAuth?{Authorization:`Bearer ${this.authUser.token}`}:{};try{const l=await fetch(this.endpoint,{method:"POST",body:r,headers:t});if(!l.ok){const d=await l.json();this.hasError=!0,g.toast.show(d.error||this.errorMessage,"error");return}const s=await l.json();this.formSubmitted=!0,g.toast.show(s.message||this.successMessage,"success"),this.formEl.reset()}catch(l){this.hasError=!0,g.toast.show(`${l}`,"error")}finally{this.isSubmitting=!1,this.formSubmitting.emit(this.isSubmitting)}},this.smallAlert=!1,this.setFormUrl=!0,this.submitBtn=!0,this.submitBtnLabel="Submit",this.successMessage="Your message has been sent.",this.errorMessage="Some fields in your form are incorrect.",this.submitBtnHintMessage="To participate, please sign in using your EBRAINS account. If you do not have an account yet, you can easily create one on the EBRAINS portal.",this.endpoint=void 0,this.name="form",this.fields=void 0,this.values={},this.coupleAuth=!1,this.formSubmitted=!1,this.hasError=!1,this.errors={},this.isSubmitting=!1,this.alertMessage=null,this.isAuthenticated=!1,this.authUser=void 0}onAuthStatusChanged(e){var i;this.isAuthenticated=(i=e.detail)===null||i===void 0?void 0:i.authenticated,this.authUser=e.detail.user}componentDidLoad(){this.el.querySelectorAll("eds-button").forEach(i=>{this.emitContext(i)})}emitContext(e){const i=new CustomEvent("parentContext",{detail:{componentName:this.el.tagName.toLowerCase(),identifier:null}});e.dispatchEvent(i)}isFieldVisible(e){return e.condition?this.values[e.condition.field]===e.condition.value:!0}validateField(e,i,n,r,t){const l=[];return r&&!i&&l.push(`${e} is required.`),t&&typeof i=="string"&&i.length>t&&l.push(`${e} must be at most ${t} characters.`),n==="email"&&i&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(i.toString())&&l.push("Invalid email format."),l}validateFieldGroup(e,i,n){const l=Array.from(this.formEl.querySelectorAll("eds-input-field")).filter(d=>{var a,c;return((c=(a=d.shadowRoot)===null||a===void 0?void 0:a.querySelectorAll(`input[name="${e}"]`))===null||c===void 0?void 0:c.length)>0}).flatMap(d=>{var a;return Array.from(((a=d.shadowRoot)===null||a===void 0?void 0:a.querySelectorAll(`input[name="${e}"]`))||[])}).some(d=>d.checked),s=[];return n&&!l&&s.push(`At least one option in ${e} is required.`),s}validateSingleBox(e,i){var n;const r=[],t=Array.from(this.formEl.querySelectorAll("eds-input-field")).find(s=>{var d;return(d=s.shadowRoot)===null||d===void 0?void 0:d.querySelector(`[name="${e}"]`)});if(!t)return i&&r.push(`${e} is required.`),r;const l=(n=t.shadowRoot)===null||n===void 0?void 0:n.querySelector(`[name="${e}"]`);return i&&l&&!l.checked&&r.push(`${e} is required.`),r}validateForm(){this.errors={},this.hasError=!1,this.parseFields.forEach(e=>{if(e.type!=="hidden")if((e.type==="checkbox"||e.type==="radio")&&!e.options){const i=this.validateSingleBox(e.name,e.required);i.length>0&&(this.errors[e.name]=i,this.hasError=!0)}else if(e.options&&(e.type==="checkbox"||e.type==="radio")){const i=this.validateFieldGroup(e.name,e.type,e.required);i.length>0&&(this.errors[e.name]=i,this.hasError=!0)}else{const i=this.findFieldElement(e.name);if(i){const n=i.value,r=this.validateField(e.name,n,e.type,e.required,e.maxlength);r.length>0&&(this.errors[e.name]=r,this.hasError=!0)}}})}findFieldElement(e){const i=Array.from(this.formEl.querySelectorAll("eds-input-field"));for(const n of i)if(n.shadowRoot){const r=n.shadowRoot.querySelector(`[name="${e}"]`);if(r)return r}return null}async getFormData(){const e=new FormData;return e.append("form_name",this.name),Array.from(this.formEl.querySelectorAll("eds-input-field")).forEach(n=>{if(n.shadowRoot){const r=n.shadowRoot.querySelector("input, textarea, select");if(r&&r.name)if(r.type==="checkbox"||r.type==="radio"){const l=Array.from(n.shadowRoot.querySelectorAll(`input[name="${r.name}"]:checked`)).map(s=>s.value);e.append(r.name,l.join(","))}else if(r.type==="file"){const t=r;t.files&&t.files.length>0&&Array.from(t.files).forEach(l=>{e.append(t.name,l)})}else e.append(r.name,r.value)}}),e}get parseFields(){return JSON.parse(this.fields)}render(){const e=this.parseFields.filter(n=>n.type==="hidden"),i=this.parseFields.filter(n=>n.type!=="hidden");return o.h("form",{key:"fdb974998dfd27c0d857d0fbfbbe9e769e55d7bb",ref:n=>this.formEl=n,enctype:"multipart/form-data",autocomplete:"on",method:"post",onSubmit:this.handleSubmit},o.h("div",{key:"dfbe5adce9e5685736169e88408590088aba5b1e"},o.h("slot",{key:"f5c5356a8b87bf63fdd21901da81291c596f1487"}),e.map((n,r)=>o.h("eds-input",{key:r,type:"hidden",name:n.name,value:n.value})),i.map((n,r)=>{var t,l;return this.isFieldVisible(n)?o.h("eds-input-field",{key:r,name:n.name,id:`${this.name}_${n.name}`,label:n.label,type:n.type,icon:n.icon||null,required:n.required,maxLength:n.maxlength,hint:n.hint,error:((t=this.errors[n.name])===null||t===void 0?void 0:t.length)>0,errorMessage:(l=this.errors[n.name])===null||l===void 0?void 0:l.join("<br />"),onInput:s=>this.handleChange(s,n),class:r>0?"mt-20":"",options:n.options}):null})),this.submitBtn&&o.h("div",{key:"2c3165a56d5bec9135a8695cae1b87981167c949",class:"mt-20"},o.h("eds-button",{key:"f311628ff58cd03ebbd0f7ccb0623df817d416da",intent:"primary",label:this.submitBtnLabel,disabled:this.isSubmitting||this.coupleAuth&&!this.isAuthenticated,loading:this.isSubmitting,onClick:n=>this.handleSubmit(n)}),this.coupleAuth&&!this.isAuthenticated?o.h("p",{class:"f-ui-05 text-lighter mt-8 ml-8"},this.submitBtnHintMessage):null),this.alertMessage&&(this.formSubmitted||this.hasError)&&o.h("div",{key:"1c7adc93081294eb86b71e808933215fe04fa033",class:"mt-20"},o.h("eds-alert",{key:"d221dd0674be734a8b7382ea2eeb97509f6bc3a6",message:this.alertMessage,intent:this.hasError?"error":"success",direction:"horizontal"})))}get el(){return o.getElement(this)}};x.style=h;exports.eds_form=x;
+  `,f=h,b=class{constructor(e){d.registerInstance(this,e),this.formSubmitting=d.createEvent(this,"formSubmitting",7),this.handleChange=(r,n)=>{const i=r.target;this.values=Object.assign(Object.assign({},this.values),{[n.name]:i.value});const l=Object.assign({},this.errors);if(n.type==="checkbox"||n.type==="radio")if(n.options){const t=this.validateFieldGroup(n.name,n.type,n.required);t.length>0?l[n.name]=t:delete l[n.name]}else{const t=this.validateSingleBox(n.name,n.required);t.length>0?l[n.name]=t:delete l[n.name]}else{const t=this.validateField(n.name,i.value,n.type,n.required,n.maxlength);t.length>0?l[n.name]=t:delete l[n.name]}this.errors=l,this.hasError=Object.keys(l).length>0},this.handleSubmit=async r=>{var n,i,l;if(r.preventDefault(),this.isSubmitting)return;if(this.validateForm(),this.hasError){x.sendAnalytics({category:"ui-component",parentContext:null,tag:this.el.tagName.toLowerCase(),name:`${(n=this.submitBtnLabel)===null||n===void 0?void 0:n.toLowerCase()}/error`||"",action:"click"}),this.alertMessage=this.errorMessage;return}this.isSubmitting=!0,this.formSubmitted=!1,this.alertMessage=null,this.errors={};const t=await this.getFormData();this.setFormUrl&&typeof window<"u"&&t.set("form_url",window.location.href),this.authUser&&t.set("form_user",(i=this.authUser)===null||i===void 0?void 0:i.email);const s=this.coupleAuth?{Authorization:`Bearer ${this.authUser.token}`}:{};try{const o=await fetch(this.endpoint,{method:"POST",body:t,headers:s});if(!o.ok){const c=await o.json();this.hasError=!0,g.toast.show(c.error||this.errorMessage,"error");return}const a=await o.json();this.formSubmitted=!0,g.toast.show(a.message||this.successMessage,"success"),this.formEl.reset(),x.sendAnalytics({category:"ui-component",parentContext:null,tag:this.el.tagName.toLowerCase(),name:`${(l=this.submitBtnLabel)===null||l===void 0?void 0:l.toLowerCase()}/success`||"",action:"click"})}catch(o){this.hasError=!0,g.toast.show(`${o}`,"error")}finally{this.isSubmitting=!1,this.formSubmitting.emit(this.isSubmitting)}},this.setFormUrl=!0,this.submitBtn=!0,this.submitBtnLabel="Submit",this.successMessage="Your message has been sent.",this.errorMessage="Some fields in your form are incorrect.",this.submitBtnHintMessage="To participate, please sign in using your EBRAINS account. If you do not have an account yet, you can easily create one on the EBRAINS portal.",this.endpoint=void 0,this.name="form",this.fields=[],this.values={},this.coupleAuth=!1,this.formSubmitted=!1,this.hasError=!1,this.errors={},this.isSubmitting=!1,this.alertMessage=null,this.isAuthenticated=!1,this.authUser=void 0,this.parsedFields=[]}onAuthStatusChanged(e){var r;this.isAuthenticated=(r=e.detail)===null||r===void 0?void 0:r.authenticated,this.authUser=e.detail.user}componentDidLoad(){this.parseFields(this.fields)}isFieldVisible(e){return e.condition?this.values[e.condition.field]===e.condition.value:!0}validateField(e,r,n,i,l){const t=[];return i&&!r&&t.push(`${e} is required.`),l&&typeof r=="string"&&r.length>l&&t.push(`${e} must be at most ${l} characters.`),n==="email"&&r&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r.toString())&&t.push("Invalid email format."),t}validateFieldGroup(e,r,n){const t=Array.from(this.formEl.querySelectorAll("eds-input-field")).filter(o=>{var a,c;return((c=(a=o.shadowRoot)===null||a===void 0?void 0:a.querySelectorAll(`input[name="${e}"]`))===null||c===void 0?void 0:c.length)>0}).flatMap(o=>{var a;return Array.from(((a=o.shadowRoot)===null||a===void 0?void 0:a.querySelectorAll(`input[name="${e}"]`))||[])}).some(o=>o.checked),s=[];return n&&!t&&s.push(`At least one option in ${e} is required.`),s}validateSingleBox(e,r){var n;const i=[],l=Array.from(this.formEl.querySelectorAll("eds-input-field")).find(s=>{var o;return(o=s.shadowRoot)===null||o===void 0?void 0:o.querySelector(`[name="${e}"]`)});if(!l)return r&&i.push(`${e} is required.`),i;const t=(n=l.shadowRoot)===null||n===void 0?void 0:n.querySelector(`[name="${e}"]`);return r&&t&&!t.checked&&i.push(`${e} is required.`),i}validateForm(){this.errors={},this.hasError=!1,this.parsedFields.forEach(e=>{if(e.type!=="hidden")if((e.type==="checkbox"||e.type==="radio")&&!e.options){const r=this.validateSingleBox(e.name,e.required);r.length>0&&(this.errors[e.name]=r,this.hasError=!0)}else if(e.options&&(e.type==="checkbox"||e.type==="radio")){const r=this.validateFieldGroup(e.name,e.type,e.required);r.length>0&&(this.errors[e.name]=r,this.hasError=!0)}else{const r=this.findFieldElement(e.name);if(r){const n=r.value,i=this.validateField(e.name,n,e.type,e.required,e.maxlength);i.length>0&&(this.errors[e.name]=i,this.hasError=!0)}}})}findFieldElement(e){const r=Array.from(this.formEl.querySelectorAll("eds-input-field"));for(const n of r)if(n.shadowRoot){const i=n.shadowRoot.querySelector(`[name="${e}"]`);if(i)return i}return null}async getFormData(){const e=new FormData;return e.append("form_name",this.name),Array.from(this.formEl.querySelectorAll("eds-input-field")).forEach(n=>{if(n.shadowRoot){const i=n.shadowRoot.querySelector("input, textarea, select");if(i&&i.name)if(i.type==="checkbox"||i.type==="radio"){const t=Array.from(n.shadowRoot.querySelectorAll(`input[name="${i.name}"]:checked`)).map(s=>s.value);e.append(i.name,t.join(","))}else if(i.type==="file"){const l=i;l.files&&l.files.length>0&&Array.from(l.files).forEach(t=>{e.append(l.name,t)})}else e.append(i.name,i.value)}}),e}parseFields(e){try{typeof e=="string"?this.parsedFields=JSON.parse(e):Array.isArray(e)?this.parsedFields=e:e&&typeof e=="object"?this.parsedFields=e:this.parsedFields=[]}catch(r){console.error("Error parsing fields prop:",r),this.parsedFields=[]}}render(){const e=this.parsedFields.filter(n=>n.type==="hidden"),r=this.parsedFields.filter(n=>n.type!=="hidden");return d.h("form",{key:"3d4ae34d48c0551f9de6dacb50ceee15b487b5de",ref:n=>this.formEl=n,enctype:"multipart/form-data",autocomplete:"on",method:"post",onSubmit:this.handleSubmit},d.h("div",{key:"344c56dcba3de5a1b55255d794a78fb0f19d04b5"},d.h("slot",{key:"3ca6d203458d67fa66840fac55f94d71acc2ee4d"}),e.map((n,i)=>d.h("eds-input",{key:i,type:"hidden",name:n.name,value:n.value})),r.map((n,i)=>{var l,t;return this.isFieldVisible(n)?d.h("eds-input-field",{key:i,name:n.name,id:`${this.name}_${n.name}`,label:n.label,type:n.type,icon:n.icon||null,required:n.required,maxLength:n.maxlength,hint:n.hint,error:((l=this.errors[n.name])===null||l===void 0?void 0:l.length)>0,errorMessage:(t=this.errors[n.name])===null||t===void 0?void 0:t.join("<br />"),onInput:s=>this.handleChange(s,n),class:i>0?"mt-20":"",options:n.options}):null})),this.submitBtn&&d.h("div",{key:"22915285f3522f6d260e358eea964c59a9557a55",class:"mt-20"},d.h("eds-button",{key:"9e2191ba8cc49d7ac2a6588c0fa468214773c791",intent:"primary",label:this.submitBtnLabel,disabled:this.isSubmitting||this.coupleAuth&&!this.isAuthenticated,loading:this.isSubmitting,onClick:n=>this.handleSubmit(n)}),this.coupleAuth&&!this.isAuthenticated?d.h("p",{class:"f-ui-05 text-lighter mt-8 ml-8"},this.submitBtnHintMessage):null),this.alertMessage&&(this.formSubmitted||this.hasError)&&d.h("div",{key:"8045c3dff26286a6735157b82afd56ec9001ba14",class:"mt-20"},d.h("eds-alert",{key:"dc8c8f74e8aada9023f110bb862afee1fb629601",message:this.alertMessage,intent:this.hasError?"error":"success",direction:"horizontal"})))}get el(){return d.getElement(this)}static get watchers(){return{fields:["parseFields"]}}};b.style=f;exports.eds_form=b;