@ebrains/vue 0.0.1-alpha.1 → 0.2.0-alpha.0

package/eds-components-section.entry-8sEheaoX.js

@@ -0,0 +1,130 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BGGkUjck.js"),t=()=>e.h("div",{class:"static-content container"},e.h("eds-alert",{message:`EBRAINS Design System makes it easy to implement and use its components across any framework or no framework at all. We
+      accomplish this by using standardized web platform APIs and Web Components.`,intent:"default"}),e.h("h2",null,"Load the module"),e.h("p",null,"Integrating EDSs components to a project without a JavaScript framework is straight forward. If you’re working on a simple HTML page, you can start using the components immediately by adding the tags below to the"," ",e.h("code",null,"head"),"."),e.h("eds-code-block",{code:'<script type="module" href="https://unpkg.com/@ebrains/components@0.0.1/loader"/><\/script>',language:"javascript","copy-label":"Copy Code"}),e.h("h2",null,"Load the styles"),e.h("p",null,"To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the"," ",e.h("code",null,"head")),e.h("eds-code-block",{code:'<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/output.css"/>',language:"css","copy-label":"Copy Code"}),e.h("h2",null,"Load the fonts"),e.h("p",null,"To load the correct webfonts as well, add either one of these tags to the ",e.h("code",null,"head")),e.h("eds-code-block",{code:'<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/base/fonts.css"/>',language:"css","copy-label":"Copy Code"}),e.h("h2",null,"Component Usage"),e.h("p",null,"Once included, components can be used in your markup like any other regular HTML elements:"),e.h("eds-code-block",{code:'<eds-button label="my bytton" intent="primary"></eds-button>',language:"html","copy-label":"Copy Code"})),a=()=>e.h("div",null,e.h("p",null,"To start using the EBRAINS Design System, include the following scripts and styles in your project. You can also install it via npm for use with modern build tools."),e.h("eds-code-block",{code:"npm install @ebrains/components",language:"html","copy-label":"Copy Code"}),e.h("p",null,"TBD")),s=()=>e.h("div",null,e.h("h1",null,"Usage with basic HTML "),e.h("p",null,"TBD")),o=()=>e.h("div",null,e.h("h2",null,"React Wrappers"),e.h("p",null,"Learn how to use our components in a React Application."),"Simple install the package below and check out the examples",e.h("eds-code-block",{code:"npm install @ebrains/react",language:"javascript","copy-label":"Copy Code"}),e.h("eds-section-core",{"section-title":"Example React App","heading-level":"h3"},e.h("eds-code-block",{code:`
+import { EdsHeader } from "@ebrains/react";
+
+interface User {
+  firstname: string;
+  lastname: string;
+  // Add any other properties your user object might have
+}
+
+interface AuthStatus {
+  authenticated: boolean;
+  user: User | null;
+}
+
+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">
+      <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>
+
+      <div> 
+        User is{" "} {authStatus.authenticated ? "authenticated" : "not authenticated"}
+      </div>
+      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}
+      </div>
+    </div>
+  );
+}
+
+export default App;
+`,language:"javascript","copy-label":"Copy Code"}))),l=()=>e.h("div",null,e.h("h2",null,"Vue Wrappers"),e.h("p",null,"Learn how to use our components in a Vue Application."),e.h("eds-code-block",{code:"npm install @ebrains/vue",language:"javascript","copy-label":"Copy Code"}),e.h("p",null,"Define the custom elements"),e.h("eds-code-block",{code:`import { defineCustomElements } from '@ebrains/components/loader';
+defineCustomElements();`,language:"javascript","copy-label":"Copy Code"}),e.h("eds-section-core",{"section-title":"Example Vue App","heading-level":"h3"},e.h("eds-code-block",{code:`
+<template>
+  <h1 className="f-heading-02">Vue App</h1>
+
+  <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>
+
+</template>
+
+<script>
+
+import { EdsHeader } from "@ebrains/vue";
+
+export default {
+  name: "App",
+  components: {
+    EdsHeader,
+  }
+};
+<\/script>
+`,language:"javascript","copy-label":"Copy Code"}))),c=()=>e.h("div",null,e.h("h2",null,"Angular Wrappers"),e.h("p",null,"Learn how to use our components in a Angular Application."),e.h("eds-code-block",{code:"npm install @ebrains/angular",language:"javascript","copy-label":"Copy Code"}),e.h("p",null,"Define the custom elements"),e.h("eds-code-block",{code:`import { defineCustomElements } from '@ebrains/components/loader';
+defineCustomElements();`,language:"javascript","copy-label":"Copy Code"}),e.h("p",null,"Angular Custom Elements Schema"),e.h("eds-code-block",{code:'import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";',language:"javascript","copy-label":"Copy Code"}),e.h("eds-section-core",{"section-title":"Example Angular App","heading-level":"h3"},e.h("eds-code-block",{code:`
+<div class="container">
+  <h1 class="f-heading-01">{{ title }}</h1>
+  <eds-breadcrumb
+    intent="tertiary"
+    items="[
+      { "label": "Home", "url": "#" },
+      { "label": "Products", "url": "#" },
+    ]">
+  </eds-breadcrumb>
+  <eds-footer></eds-footer>
+</div>`,language:"javascript","copy-label":"Copy Code"}))),r=class{constructor(n){e.registerInstance(this,n),this.tabIndex=void 0}renderContent(){switch(this.tabIndex){case 0:return e.h(t,null);case 1:return e.h(a,null);case 2:return e.h(s,null);case 3:return e.h(o,null);case 4:return e.h(l,null);case 5:return e.h(c,null);default:return e.h("p",null,"Content not available.")}}render(){return e.h("div",{key:"faa14dc7bb5d966ea1328f60d8ca88b3c406ad51",class:"container"},this.renderContent())}};exports.eds_components_section=r;

package/eds-components-section.entry-BSRNSdwF.mjs

@@ -0,0 +1,244 @@
+import { r as t, h as e } from "./index-DQrtrXyM.mjs";
+const a = () => e(
+  "div",
+  { class: "static-content container" },
+  e("eds-alert", { message: `EBRAINS Design System makes it easy to implement and use its components across any framework or no framework at all. We
+      accomplish this by using standardized web platform APIs and Web Components.`, intent: "default" }),
+  e("h2", null, "Load the module"),
+  e(
+    "p",
+    null,
+    "Integrating EDSs components to a project without a JavaScript framework is straight forward. If you’re working on a simple HTML page, you can start using the components immediately by adding the tags below to the",
+    " ",
+    e("code", null, "head"),
+    "."
+  ),
+  e("eds-code-block", { code: '<script type="module" href="https://unpkg.com/@ebrains/components@0.0.1/loader"/><\/script>', language: "javascript", "copy-label": "Copy Code" }),
+  e("h2", null, "Load the styles"),
+  e(
+    "p",
+    null,
+    "To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the",
+    " ",
+    e("code", null, "head")
+  ),
+  e("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/output.css"/>', language: "css", "copy-label": "Copy Code" }),
+  e("h2", null, "Load the fonts"),
+  e(
+    "p",
+    null,
+    "To load the correct webfonts as well, add either one of these tags to the ",
+    e("code", null, "head")
+  ),
+  e("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/base/fonts.css"/>', language: "css", "copy-label": "Copy Code" }),
+  e("h2", null, "Component Usage"),
+  e("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"),
+  e("eds-code-block", { code: '<eds-button label="my bytton" intent="primary"></eds-button>', language: "html", "copy-label": "Copy Code" })
+), s = () => e(
+  "div",
+  null,
+  e("p", null, "To start using the EBRAINS Design System, include the following scripts and styles in your project. You can also install it via npm for use with modern build tools."),
+  e("eds-code-block", { code: "npm install @ebrains/components", language: "html", "copy-label": "Copy Code" }),
+  e("p", null, "TBD")
+), o = () => e(
+  "div",
+  null,
+  e("h1", null, "Usage with basic HTML "),
+  e("p", null, "TBD")
+), l = () => e(
+  "div",
+  null,
+  e("h2", null, "React Wrappers"),
+  e("p", null, "Learn how to use our components in a React Application."),
+  "Simple install the package below and check out the examples",
+  e("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" }),
+  e(
+    "eds-section-core",
+    { "section-title": "Example React App", "heading-level": "h3" },
+    e("eds-code-block", { code: `
+import { EdsHeader } from "@ebrains/react";
+
+interface User {
+  firstname: string;
+  lastname: string;
+  // Add any other properties your user object might have
+}
+
+interface AuthStatus {
+  authenticated: boolean;
+  user: User | null;
+}
+
+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">
+      <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>
+
+      <div> 
+        User is{" "} {authStatus.authenticated ? "authenticated" : "not authenticated"}
+      </div>
+      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}
+      </div>
+    </div>
+  );
+}
+
+export default App;
+`, language: "javascript", "copy-label": "Copy Code" })
+  )
+), r = () => e(
+  "div",
+  null,
+  e("h2", null, "Vue Wrappers"),
+  e("p", null, "Learn how to use our components in a Vue Application."),
+  e("eds-code-block", { code: "npm install @ebrains/vue", language: "javascript", "copy-label": "Copy Code" }),
+  e("p", null, "Define the custom elements"),
+  e("eds-code-block", { code: `import { defineCustomElements } from '@ebrains/components/loader';
+defineCustomElements();`, language: "javascript", "copy-label": "Copy Code" }),
+  e(
+    "eds-section-core",
+    { "section-title": "Example Vue App", "heading-level": "h3" },
+    e("eds-code-block", { code: `
+<template>
+  <h1 className="f-heading-02">Vue App</h1>
+
+  <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>
+
+</template>
+
+<script>
+
+import { EdsHeader } from "@ebrains/vue";
+
+export default {
+  name: "App",
+  components: {
+    EdsHeader,
+  }
+};
+<\/script>
+`, language: "javascript", "copy-label": "Copy Code" })
+  )
+), c = () => e(
+  "div",
+  null,
+  e("h2", null, "Angular Wrappers"),
+  e("p", null, "Learn how to use our components in a Angular Application."),
+  e("eds-code-block", { code: "npm install @ebrains/angular", language: "javascript", "copy-label": "Copy Code" }),
+  e("p", null, "Define the custom elements"),
+  e("eds-code-block", { code: `import { defineCustomElements } from '@ebrains/components/loader';
+defineCustomElements();`, language: "javascript", "copy-label": "Copy Code" }),
+  e("p", null, "Angular Custom Elements Schema"),
+  e("eds-code-block", { code: 'import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";', language: "javascript", "copy-label": "Copy Code" }),
+  e(
+    "eds-section-core",
+    { "section-title": "Example Angular App", "heading-level": "h3" },
+    e("eds-code-block", { code: `
+<div class="container">
+  <h1 class="f-heading-01">{{ title }}</h1>
+  <eds-breadcrumb
+    intent="tertiary"
+    items="[
+      { "label": "Home", "url": "#" },
+      { "label": "Products", "url": "#" },
+    ]">
+  </eds-breadcrumb>
+  <eds-footer></eds-footer>
+</div>`, language: "javascript", "copy-label": "Copy Code" })
+  )
+), u = class {
+  constructor(n) {
+    t(this, n), this.tabIndex = void 0;
+  }
+  renderContent() {
+    switch (this.tabIndex) {
+      case 0:
+        return e(a, null);
+      case 1:
+        return e(s, null);
+      case 2:
+        return e(o, null);
+      case 3:
+        return e(l, null);
+      case 4:
+        return e(r, null);
+      case 5:
+        return e(c, null);
+      default:
+        return e("p", null, "Content not available.");
+    }
+  }
+  render() {
+    return e("div", { key: "faa14dc7bb5d966ea1328f60d8ca88b3c406ad51", class: "container" }, this.renderContent());
+  }
+};
+export {
+  u as eds_components_section
+};

package/eds-docs-palettes.entry-BlQEI2Bl.mjs

@@ -0,0 +1,22 @@
+import { r as l, h as e } from "./index-DQrtrXyM.mjs";
+const r = class {
+  constructor(t) {
+    l(this, t), this.tabIndex = void 0;
+  }
+  renderContent() {
+    switch (this.tabIndex) {
+      case 0:
+        return e("div", null, e("h2", null, "Primary Palette"), e("color-primary-palette", null), e("h2", null, "Secondary Palette"), e("color-secondary-palette", null), e("h2", null, "Support Palette"), e("color-support-palette", null));
+      case 1:
+        return e("div", null, e("h2", null, "Primary Palette"), e("gradient-primary-palette", null), e("h2", null, "Secondary Palette"), e("gradient-secondary-palette", null), e("h2", null, "Support Palette"), e("gradient-support-palette", null));
+      default:
+        return e("p", null, "Content not available.");
+    }
+  }
+  render() {
+    return e("div", { key: "c11e0de66c41770e7ebca46d3fb7ab11b454511e", class: "container" }, this.renderContent());
+  }
+};
+export {
+  r as eds_docs_palettes
+};

package/eds-docs-palettes.entry-Gi9kzOYC.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BGGkUjck.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:"c11e0de66c41770e7ebca46d3fb7ab11b454511e",class:"container"},this.renderContent())}};exports.eds_docs_palettes=l;

package/eds-docs-tokens.entry-Bxzd9uSz.mjs

@@ -0,0 +1,30 @@
+import { r as n, h as e } from "./index-DQrtrXyM.mjs";
+const r = class {
+  constructor(t) {
+    n(this, t), this.tabIndex = void 0;
+  }
+  renderContent() {
+    switch (this.tabIndex) {
+      case 0:
+        return e("token-list", { show: "background" });
+      case 1:
+        return e("token-list", { show: "text" });
+      case 2:
+        return e("token-list", { show: "border" });
+      case 3:
+        return e("token-radii", null);
+      case 4:
+        return e("token-list", { show: "outline" });
+      case 5:
+        return e("token-shadows", null);
+      default:
+        return e("p", null, "Content not available.");
+    }
+  }
+  render() {
+    return e("div", { key: "ef9cf093af7bc730b73f3561b36187f70aea29a7", class: "container" }, this.renderContent());
+  }
+};
+export {
+  r as eds_docs_tokens
+};

package/eds-docs-tokens.entry-G6O1zRxS.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BGGkUjck.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:"ef9cf093af7bc730b73f3561b36187f70aea29a7",class:"container"},this.renderContent())}};exports.eds_docs_tokens=n;

package/eds-footer.entry-9xXgg22T.mjs

@@ -0,0 +1,29 @@
+import { r as o, h as e } from "./index-DQrtrXyM.mjs";
+const a = "", t = a, r = class {
+  constructor(s) {
+    o(this, s), this.backToTop = () => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }, this.extraClass = "", this.social = !1, this.hasCookiesSetUp = !1, this.enableScrollTop = !1, this.fundedBy = "EBRAINS is funded by the Horizon Europe Framework Programme.", this.rightsReserved = `${(/* @__PURE__ */ new Date()).getFullYear()} EBRAINS. All rights reserved.`, this.cookiesPreference = "Cookies Preferences";
+  }
+  /**
+   * Toggles the cookie preferences popup, if available.
+   * The actual implementation for handling cookie preferences should be defined here.
+   * @private
+   */
+  toggleCookiesPopup() {
+  }
+  /**
+   * 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 e("footer", { key: "efffa9b96cc2a094255fcb6d08ec45c7c7f09ec4", class: `${this.extraClass} pb-banner` }, this.social ? e("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, e("div", { class: "container pb-20 xl:pb-40 " }, e("div", { class: "grid-layout" }, e("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, e("eds-social-networks", { class: "mt-28" })), e("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, e("div", { key: "c3942c635dff3dc8cb47a21f20aca52acfaa3e18", class: `border-softest ${this.social ? "border-t-2" : ""} pt-20 pb-28 md:pt-28` }, e("div", { key: "57e963272659ce2e63294c969f3724a03aef667e", class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, e("div", { key: "c3e5cfe07fe9eb90450f7a87be1b95ed00ef38ce", class: "flex items-center gap-x-12" }, e("a", { key: "b0d0c65115b611f78d2b468559c16eb60f538907", 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" }, e("eds-img", { key: "6cb5d067f07b456a8d828f3f42f2730e3e5374e0", width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg" }))), e("div", { key: "e5b768b0fb96fcdcb786d33fc808368005935491", class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto" }, e("p", { key: "777263c2f4bde43d38690f41391eaf8e51d945fa" }, this.fundedBy), e("div", { key: "a415687d08edf8f3e03a6edce9c45f58662c8595", class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap" }, e("span", { key: "c0b6498ad4f5e1f4f1945ebb971f9dd81cc74c77", class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "© ", this.rightsReserved), this.hasCookiesSetUp && e("button", { key: "10133d180bfb0d8a6354ea2cbea318a2c46fc463", class: "effect-focus !no-underline underline-offset-4 hover:!underline", onClick: () => this.toggleCookiesPopup() }, this.cookiesPreference))), e("div", { key: "917d0980f91a8c42a75bae301b0a18e3777dd021", class: "ml-auto pl-12" }, this.enableScrollTop ? e("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop }) : null))));
+  }
+};
+r.style = t;
+export {
+  r as eds_footer
+};

package/eds-footer.entry-DqnRHQ32.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BGGkUjck.js"),a="",t=a,s=class{constructor(o){e.registerInstance(this,o),this.backToTop=()=>{window.scrollTo({top:0,behavior:"smooth"})},this.extraClass="",this.social=!1,this.hasCookiesSetUp=!1,this.enableScrollTop=!1,this.fundedBy="EBRAINS is funded by the Horizon Europe Framework Programme.",this.rightsReserved=`${new Date().getFullYear()} EBRAINS. All rights reserved.`,this.cookiesPreference="Cookies Preferences"}toggleCookiesPopup(){}render(){return e.h("footer",{key:"efffa9b96cc2a094255fcb6d08ec45c7c7f09ec4",class:`${this.extraClass} pb-banner`},this.social?e.h("div",{class:"border-softest border-t-2 pt-20 pb-28 md:pt-28"},e.h("div",{class:"container pb-20 xl:pb-40 "},e.h("div",{class:"grid-layout"},e.h("div",{class:"grid-col-span-12 lg:grid-col-span-5"},e.h("eds-social-networks",{class:"mt-28"})),e.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,e.h("div",{key:"c3942c635dff3dc8cb47a21f20aca52acfaa3e18",class:`border-softest ${this.social?"border-t-2":""} pt-20 pb-28 md:pt-28`},e.h("div",{key:"57e963272659ce2e63294c969f3724a03aef667e",class:"container flex flex-wrap items-center gap-20 lg:flex-nowrap"},e.h("div",{key:"c3e5cfe07fe9eb90450f7a87be1b95ed00ef38ce",class:"flex items-center gap-x-12"},e.h("a",{key:"b0d0c65115b611f78d2b468559c16eb60f538907",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"},e.h("eds-img",{key:"6cb5d067f07b456a8d828f3f42f2730e3e5374e0",width:54,height:41,src:"https://www.ebrains.eu/flags/4x3/eu.svg"}))),e.h("div",{key:"e5b768b0fb96fcdcb786d33fc808368005935491",class:"f-ui-04 text-light order-last w-full lg:order-none lg:w-auto"},e.h("p",{key:"777263c2f4bde43d38690f41391eaf8e51d945fa"},this.fundedBy),e.h("div",{key:"a415687d08edf8f3e03a6edce9c45f58662c8595",class:"mt-4 flex flex-wrap gap-12 lg:flex-nowrap"},e.h("span",{key:"c0b6498ad4f5e1f4f1945ebb971f9dd81cc74c77",class:"effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline"},"© ",this.rightsReserved),this.hasCookiesSetUp&&e.h("button",{key:"10133d180bfb0d8a6354ea2cbea318a2c46fc463",class:"effect-focus !no-underline underline-offset-4 hover:!underline",onClick:()=>this.toggleCookiesPopup()},this.cookiesPreference))),e.h("div",{key:"917d0980f91a8c42a75bae301b0a18e3777dd021",class:"ml-auto pl-12"},this.enableScrollTop?e.h("eds-button",{"aria-label":"Back to top",intent:"ghostInverse",icon:"chevron-up",onClick:this.backToTop}):null))))}};s.style=t;exports.eds_footer=s;

package/eds-frame.entry-Bz-23eT7.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BGGkUjck.js"),s=class{constructor(t){e.registerInstance(this,t),this.frameLabel=void 0,this.urlLabel="Open in Storybook",this.errorMessage="Could not load the requested Storybook content. Please check the URL or try again later.",this.storybookUrl=void 0,this.storyPath=void 0,this.intent="strong",this.tiny=!1,this.size="auto",this.bg=!0,this.iframeError=!1}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{if(!(await fetch(this.frameSrc,{method:"GET"})).ok)throw new Error("Failed to load")}catch{this.iframeError=!0}}componentWillLoad(){this.checkIframeAvailability()}componentDidLoad(){this.el.querySelectorAll("eds-link").forEach(r=>{this.emitContext(r)})}emitContext(t){const r=new CustomEvent("parentContext",{detail:{componentName:this.el.tagName.toLowerCase(),identifier:this.frameLabel}});t.dispatchEvent(r)}get storyLink(){return`${this.storybookUrl}/?path=/story/${this.storyPath}`}get frameSrc(){return`${this.storybookUrl}/iframe.html?id=${this.storyPath}&viewMode=story`}render(){return e.h("div",{key:"0c3a43efc1a125af5999af88c4eb071b5c3bc6c5",class:this.articleClasses()},e.h("div",{key:"32303d5e2c2f3b01efe1ceaf828346f873bea6b6",class:"effect-height flex items-center justify-between py-8 px-12"},e.h("span",{key:"75f7f6750413dad4af2ea62c12ffb994491d5d01",class:"f-ui-02"},this.frameLabel),this.iframeError?null:e.h("eds-link",{label:this.urlLabel,url:this.storyLink,intent:this.intent,class:"ml-auto",external:!0,disabled:!1,icon:"arrow-diagonal"})),e.h("div",{key:"1fd99f6eda026814910b0cd93635616b7d3ffe09",class:"border-softer border-t-2"},this.iframeError?e.h("div",{class:"container ml-8 mr-8 mt-16"},this.errorMessage):e.h("iframe",{src:this.frameSrc,width:"100%",height:this.getFrameHeight(),title:this.frameLabel,frameBorder:"0",allowFullScreen:!0})))}get el(){return e.getElement(this)}};exports.eds_frame=s;

package/eds-frame.entry-YVbNIAAz.mjs

@@ -0,0 +1,74 @@
+import { r as s, h as e, g as i } from "./index-DQrtrXyM.mjs";
+const o = class {
+  constructor(t) {
+    s(this, t), this.frameLabel = void 0, this.urlLabel = "Open in Storybook", this.errorMessage = "Could not load the requested Storybook content. Please check the URL or try again later.", this.storybookUrl = void 0, this.storyPath = void 0, this.intent = "strong", this.tiny = !1, this.size = "auto", this.bg = !0, this.iframeError = !1;
+  }
+  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 {
+      if (!(await fetch(this.frameSrc, { method: "GET" })).ok)
+        throw new Error("Failed to load");
+    } catch {
+      this.iframeError = !0;
+    }
+  }
+  componentWillLoad() {
+    this.checkIframeAvailability();
+  }
+  componentDidLoad() {
+    this.el.querySelectorAll("eds-link").forEach((r) => {
+      this.emitContext(r);
+    });
+  }
+  /**
+   * 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(t) {
+    const r = new CustomEvent("parentContext", {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: this.frameLabel
+      }
+    });
+    t.dispatchEvent(r);
+  }
+  get storyLink() {
+    return `${this.storybookUrl}/?path=/story/${this.storyPath}`;
+  }
+  get frameSrc() {
+    return `${this.storybookUrl}/iframe.html?id=${this.storyPath}&viewMode=story`;
+  }
+  render() {
+    return e("div", { key: "0c3a43efc1a125af5999af88c4eb071b5c3bc6c5", class: this.articleClasses() }, e("div", { key: "32303d5e2c2f3b01efe1ceaf828346f873bea6b6", class: "effect-height flex items-center justify-between py-8 px-12" }, e("span", { key: "75f7f6750413dad4af2ea62c12ffb994491d5d01", class: "f-ui-02" }, this.frameLabel), this.iframeError ? null : e("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: !0, disabled: !1, icon: "arrow-diagonal" })), e("div", { key: "1fd99f6eda026814910b0cd93635616b7d3ffe09", class: "border-softer border-t-2" }, this.iframeError ? e("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage) : e("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: !0 })));
+  }
+  get el() {
+    return i(this);
+  }
+};
+export {
+  o as eds_frame
+};

package/eds-fullscreen-menu.entry-4kxB1p-j.mjs

@@ -0,0 +1,74 @@
+import { r as t, c as i, h as e } from "./index-DQrtrXyM.mjs";
+const r = "", l = r, o = class {
+  constructor(s) {
+    t(this, s), this.menuClose = i(this, "menuClose", 7), this.links = void 0, this.menuLinks = void 0, this.homeUrl = "/", this.inverseHeader = !1, this.isMenuOpen = !1;
+  }
+  /**
+   * Listens for the toggleMenu event to open or close the menu.
+   * This event is emitted by the eds-header component.
+   */
+  handleToggleMenu(s) {
+    this.isMenuOpen = s.detail;
+  }
+  /** Opens the menu */
+  openMenu() {
+    this.isMenuOpen = !0;
+  }
+  /** Closes the menu */
+  closeMenu() {
+    this.isMenuOpen = !1, 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() {
+    window.innerWidth >= 1024 && (this.isMenuOpen = !1);
+  }
+  /**
+   * 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;
+    if (typeof this.links == "string")
+      try {
+        return JSON.parse(this.links);
+      } catch (s) {
+        return console.error("Error parsing links prop:", s), [];
+      }
+    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;
+    if (typeof this.menuLinks == "string")
+      try {
+        return JSON.parse(this.menuLinks);
+      } catch (s) {
+        return console.error("Error parsing menuLinks prop:", s), [];
+      }
+    return [];
+  }
+  render() {
+    return this.isMenuOpen ? e("div", { class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, e("div", { class: "flex min-h-full flex-col" }, e("div", { class: `bg-default w-full sticky top-0 ${this.inverseHeader ? "bg-strongest" : "bg-default"}` }, e("div", { class: "mx-auto flex items-center justify-between" }, e("div", { class: "mr-auto w-[200px] h-[85px]" }, e("eds-logo", { type: this.inverseHeader ? "color-white" : "color", href: this.homeUrl })), e("div", { class: "px-16" }, e("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), e("div", { class: "py-16 px-16" }, e("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((s, n) => e("eds-link", { label: s.label, key: n, url: s.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" }))), e("eds-block-break", null), e("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((s, n) => e("eds-link", { label: s.label, key: n, url: s.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" })))), e("div", { class: "mt-auto" }, e("eds-footer", { social: !0, "extra-class": "bg-darker" })))) : null;
+  }
+};
+o.style = l;
+export {
+  o as eds_fullscreen_menu
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BGGkUjck.js"),i="",r=i,t=class{constructor(s){e.registerInstance(this,s),this.menuClose=e.createEvent(this,"menuClose",7),this.links=void 0,this.menuLinks=void 0,this.homeUrl="/",this.inverseHeader=!1,this.isMenuOpen=!1}handleToggleMenu(s){this.isMenuOpen=s.detail}openMenu(){this.isMenuOpen=!0}closeMenu(){this.isMenuOpen=!1,this.menuClose.emit()}componentDidLoad(){window.addEventListener("resize",this.handleResize.bind(this))}disconnectedCallback(){window.removeEventListener("resize",this.handleResize.bind(this))}handleResize(){window.innerWidth>=1024&&(this.isMenuOpen=!1)}get parsedLinks(){if(typeof this.links=="object")return this.links;if(typeof this.links=="string")try{return JSON.parse(this.links)}catch(s){return console.error("Error parsing links prop:",s),[]}return[]}get parsedMenuLinks(){if(typeof this.menuLinks=="object")return this.menuLinks;if(typeof this.menuLinks=="string")try{return JSON.parse(this.menuLinks)}catch(s){return console.error("Error parsing menuLinks prop:",s),[]}return[]}render(){return this.isMenuOpen?e.h("div",{class:"eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll"},e.h("div",{class:"flex min-h-full flex-col"},e.h("div",{class:`bg-default w-full sticky top-0 ${this.inverseHeader?"bg-strongest":"bg-default"}`},e.h("div",{class:"mx-auto flex items-center justify-between"},e.h("div",{class:"mr-auto w-[200px] h-[85px]"},e.h("eds-logo",{type:this.inverseHeader?"color-white":"color",href:this.homeUrl})),e.h("div",{class:"px-16"},e.h("eds-button",{"aria-label":"Close menu",intent:"ghostInverse",icon:"close",onClick:()=>this.closeMenu()})))),e.h("div",{class:"py-16 px-16"},e.h("nav",{class:"mt-28 flex flex-col gap-y-8"},this.parsedLinks.map((s,n)=>e.h("eds-link",{label:s.label,key:n,url:s.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"}))),e.h("eds-block-break",null),e.h("nav",{class:"mt-28 flex flex-col gap-y-8"},this.parsedMenuLinks.map((s,n)=>e.h("eds-link",{label:s.label,key:n,url:s.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"})))),e.h("div",{class:"mt-auto"},e.h("eds-footer",{social:!0,"extra-class":"bg-darker"})))):null}};t.style=r;exports.eds_fullscreen_menu=t;

package/eds-icon-arrow-diagonal.entry-C06V6TIW.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BGGkUjck.js"),a=require("./arrow-diagonal-black-8f0494c3-DqsB6ni-.js"),s=class{constructor(r){e.registerInstance(this,r),this.addClass=""}render(){return e.h("span",{key:"08ebdce5cfbe75bf4bfab8f72493e2178be55c3c",class:this.addClass,innerHTML:a.arrowDiagonal})}};exports.eds_icon_arrow_diagonal=s;