@ebrains/react 0.0.1-alpha.0 → 0.3.0-alpha.0

package/eds-login.entry.esm.js

@@ -0,0 +1,76 @@
+import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+import { a as logout, i as initKeycloak, b as isAuthenticated, g as getUser, l as login } from './keycloak-13893af6.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsLogin = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.authStatusChanged = createEvent(this, "authStatusChanged", 7);
+    // Method to handle user logout
+    this.handleLogout = () => {
+      logout();
+      this.authenticated = false; // Reset authentication state after logout
+    };
+    this.keycloakUrl = '';
+    this.keycloakRealm = '';
+    this.keycloakClientId = '';
+    this.authenticated = false;
+    this.user = null;
+  }
+  // Lifecycle method to check authentication status before the component loads
+  async componentWillLoad() {
+    await this.checkAuthentication();
+  }
+  // Method to initialize Keycloak and check if the user is authenticated
+  async checkAuthentication() {
+    try {
+      const keycloakConfig = {
+        url: this.keycloakUrl,
+        realm: this.keycloakRealm,
+        clientId: this.keycloakClientId
+      };
+      await initKeycloak(keycloakConfig);
+      // eslint-disable-next-line
+      // Set authentication state and fetch user data if authenticated
+      this.authenticated = isAuthenticated();
+      if (this.authenticated) {
+        this.user = getUser();
+      }
+      this.authStatusChanged.emit({
+        authenticated: this.authenticated,
+        user: this.user
+      }); // Emit auth status change
+    } catch (error) {
+      // eslint-disable-next-line
+      console.error('Keycloak initialization or login check failed:', error);
+    }
+  }
+  // Method to handle user login
+  async handleLogin() {
+    try {
+      if (!this.authenticated) {
+        login(); // Start the Keycloak login process
+      }
+    } catch (error) {
+      // eslint-disable-next-line
+      console.error('Login failed:', error);
+    }
+  }
+  getBtnLabel() {
+    return this.authenticated ? 'Logout' : 'Login';
+  }
+  render() {
+    return h("eds-button", {
+      key: '35f298ecf951d5b1087f988262ae7d312c5e2d38',
+      label: this.getBtnLabel(),
+      intent: "primary",
+      "extra-class": "text-default",
+      "aria-label": this.getBtnLabel(),
+      triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this)
+    });
+  }
+};
+
+export { EdsLogin as eds_login };

package/eds-logo-variations.entry.esm.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsLogoVariations = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabIndex = undefined;
+  }
+  renderContent() {
+    switch (this.tabIndex) {
+      case 0:
+        return h("logo-variations-horizontal", null);
+      case 1:
+        return h("logo-variations-vertical", null);
+      default:
+        return h("p", null, "Content not available.");
+    }
+  }
+  render() {
+    return h("div", {
+      key: '9d6ce0e75030d6e636aab423181b0ce999f6f1b0',
+      class: "container"
+    }, this.renderContent());
+  }
+};
+
+export { EdsLogoVariations as eds_logo_variations };

package/eds-matomo-notice.entry.esm.js

@@ -0,0 +1,129 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { t as toast } from './toastManager-d9eee791.esm.js';
+import { m as matomoOptIn } from './color-0ba8ed56.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+import './index-39c58238.esm.js';
+
+const edsMatomoNoticeCss = ".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";
+const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
+const EdsMatomoNotice = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.title = 'Analytics Consent';
+    this.description = 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.';
+    this.showNotice = true;
+  }
+  /**
+   * Lifecycle method called before the component is rendered.
+   * Checks for the presence of the "mtm_consent" cookie to determine
+   * if the notice should be displayed.
+   */
+  componentWillLoad() {
+    this.checkConsentCookie();
+  }
+  /**
+   * Lifecycle method called after the component has been rendered.
+   * Emits `parentContext` events for each `eds-button` in the shadow DOM.
+   */
+  componentDidLoad() {
+    const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+    btns.forEach(b => {
+      this.emitContext(b);
+    });
+  }
+  /**
+   * Emits a custom `parentContext` event for a given button element.
+   * This can be used to provide context information about the component.
+   *
+   * @param linkElement - The button element to which the event will be dispatched.
+   */
+  emitContext(linkElement) {
+    const event = new CustomEvent('parentContext', {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    linkElement.dispatchEvent(event);
+  }
+  /**
+   * Checks if the Matomo "mtm_consent" cookie exists in the browser.
+   * If the cookie is found, the notice is hidden.
+   */
+  checkConsentCookie() {
+    const consentCookie = document.cookie.split('; ').find(row => row.startsWith('mtm_consent='));
+    //this.showNotice = !consentCookie;
+    const sessionDeferred = sessionStorage.getItem('matomo-deferred');
+    this.showNotice = !consentCookie && !sessionDeferred;
+  }
+  /**
+   * Handles user consent for analytics tracking.
+   * Calls the `matomoOptIn` utility and shows a success toast notification.
+   */
+  optInAnalytics() {
+    matomoOptIn();
+    toast.show('You have opted in to analytics.', 'success');
+    this.hideNotice();
+  }
+  /**
+   * Handles user opt-out from analytics tracking.
+   * Calls the `matomoOptOut` utility and shows a warning toast notification.
+   
+  private optOutAnalytics() {
+    matomoOptOut();
+    toast.show('You have opted out of analytics.', 'warning');
+    this.hideNotice();
+  }*/
+  /**
+   * Handles "Ask me later" action by storing a session storage entry
+   * and hiding the notice for the rest of the session.
+   */
+  deferDecision() {
+    sessionStorage.setItem('matomo-deferred', 'true');
+    toast.show('You can decide later.', 'warning');
+    this.hideNotice();
+  }
+  /**
+   * Hides the notice by updating the `showNotice` state.
+   */
+  hideNotice() {
+    this.showNotice = false;
+  }
+  /**
+   * Renders the Matomo consent notice with user options.
+   * Includes an accordion for the description and two buttons for user consent.
+   */
+  render() {
+    if (!this.showNotice) {
+      return null;
+    }
+    return h("div", {
+      class: "fixed bottom-0 p-8 z-10 grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center"
+    }, h("eds-accordion", {
+      title: this.title,
+      description: this.description,
+      switchBg: true,
+      expanded: true
+    }, h("div", {
+      class: "flex items-center gap-4"
+    }, h("eds-button", {
+      intent: "primary",
+      label: "Yes, I agree",
+      "aria-label": "Opt-in for analytics",
+      onClick: () => this.optInAnalytics()
+    }), h("eds-button", {
+      intent: "ghost",
+      label: "Ask me later",
+      "aria-label": "Defer analytics decision",
+      onClick: () => this.deferDecision()
+    }))));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsMatomoNotice.style = EdsMatomoNoticeStyle0;
+
+export { EdsMatomoNotice as eds_matomo_notice };

package/eds-modal.entry.esm.js

@@ -0,0 +1,114 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}";
+const EdsModalStyle0 = edsModalCss;
+const EdsModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isOpen = false;
+    this.title = '';
+    this.truncate = true;
+    this.truncateLines = '1';
+  }
+  getTruncateClass() {
+    return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
+  }
+  /**
+   * Opens the modal.
+   */
+  async open() {
+    this.isOpen = true;
+    /*sendAnalytics({
+      category: 'ui-component',
+      tag: this.el.tagName.toLowerCase(),
+      name: this.title,
+      action: 'show'
+    });*/
+  }
+  /**
+   * Closes the modal.
+   */
+  async close() {
+    this.isOpen = false;
+    /*sendAnalytics({
+      category: 'ui-component',
+      tag: this.el.tagName.toLowerCase(),
+      name: this.title,
+      action: 'hide'
+    });*/
+  }
+  /**
+   * Toggles the modal open or closed.
+   */
+  async toggle() {
+    this.isOpen = !this.isOpen;
+  }
+  /**
+   * Lifecycle method that runs when the component has fully loaded.
+   * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+   */
+  componentDidLoad() {
+    // Emit context for each eds-link element after the component is fully loaded
+    const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+    btns.forEach(btn => {
+      this.emitContext(btn);
+    });
+  }
+  /**
+   * Emits a custom event called `parentContext` for a given button element.
+   * This event provides context information about the eds-modal component.
+   *
+   * @param btnElement - The link element to which the event will be dispatched.
+   */
+  emitContext(btnElement) {
+    const event = new CustomEvent('parentContext', {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    btnElement.dispatchEvent(event);
+  }
+  render() {
+    return h("div", {
+      key: '00816ecb900bd9b68b31fdf6e48bef0223f9e10a',
+      class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`
+    }, this.isOpen && h("div", {
+      key: '570fa8625f9ad4b1ea82633f11e2b289ab01b853',
+      class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+      ,
+
+      onClick: () => this.close()
+    }), h("div", {
+      key: 'ff658c763e3fbc98123f13483076399966b10515',
+      class: "max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center "
+    }, h("div", {
+      key: 'd8b72acd90cc59ab1f82384aee4e311319f75aa9',
+      class: "flex justify-between items-center border-b-2 border-softer pb-8"
+    }, h("span", {
+      key: 'ee61fc505c5a3eb93541d3762d37f28a5a788bae',
+      class: `f-heading-04 text-lighter ${this.getTruncateClass()}`
+    }, this.title), h("eds-button", {
+      key: '3832772417d05a162eb5f2c4d0733f0ee845ed1c',
+      intent: "tertiary",
+      icon: "close",
+      "aria-label": "Close modal",
+      onClick: () => this.close(),
+      "extra-class": "ml-8"
+    })), h("div", {
+      key: 'f71b38be8284a37d0d198df0a9858c64202b3d91',
+      class: "pt-8"
+    }, h("slot", {
+      key: '1f80948334e5b4e9fc00a3bf01c6fc402d8220c3'
+    }))));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsModal.style = EdsModalStyle0;
+
+export { EdsModal as eds_modal };

package/eds-navigator.entry.esm.js

@@ -0,0 +1,72 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsNavigator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.prevLabel = undefined;
+    this.nextLabel = undefined;
+    this.prevUrl = undefined;
+    this.nextUrl = undefined;
+    this.linkSize = 'small';
+    this.linkIntent = 'tertiary';
+  }
+  componentDidLoad() {
+    // Emit context for each eds-link element after the component is fully loaded
+    const links = this.el.querySelectorAll('eds-link');
+    links.forEach(link => {
+      this.emitContext(link);
+    });
+  }
+  /**
+   * Emits a custom event 'parentContext' for a given link element with the component's context.
+   * @param linkElement - The eds-link element to emit the event for.
+   */
+  emitContext(linkElement) {
+    const event = new CustomEvent('parentContext', {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    linkElement.dispatchEvent(event);
+  }
+  render() {
+    return h("ul", {
+      key: '1ab60197bbc9ee86d77134138744dce39df2aaa7',
+      class: "flex lg:flex grow items-center justify-center gap-x-8"
+    }, this.prevLabel && h("eds-link", {
+      key: 'b29fd121d33c1e919d24a5d460d8d6864f1ff9db',
+      label: this.prevLabel,
+      url: this.prevUrl || undefined,
+      disabled: !this.prevUrl,
+      "aria-label": this.prevLabel,
+      size: this.linkSize,
+      intent: this.linkIntent,
+      class: "mr-auto !p-8 lg:!pr-12"
+    }, h("eds-icon-wrapper", {
+      key: '64620ccfaf2e006a6414bcd7e874a352b9d2d56b',
+      icon: "chevron-left"
+    }), this.prevLabel), this.nextLabel && h("eds-link", {
+      key: 'ae6425f0f01c8f5bcbdae27d9bea9dc3a5b09d3b',
+      label: this.nextLabel,
+      url: this.nextUrl || undefined,
+      disabled: !this.nextUrl,
+      "aria-label": this.nextLabel,
+      size: this.linkSize,
+      intent: this.linkIntent,
+      class: "ml-auto !p-8 lg:!pl-12"
+    }, this.nextLabel, h("eds-icon-wrapper", {
+      key: 'd286fc26f17ee6cf6828990e98df7865fbbfd352',
+      icon: "chevron-right",
+      class: "w-20 h-20"
+    })));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+
+export { EdsNavigator as eds_navigator };