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

package/eds-login.entry.esm.js

@@ -1,97 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
-import { l as login, a as logout, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak-d502ec16.esm.js';
-import { t as toast } from './toastManager-d9eee791.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);
-    /**
-     * Handles user login by invoking the Keycloak `login` function.
-     * Only triggers login if the user is not already authenticated.
-     */
-    this.handleLogin = async () => {
-      if (!this.authenticated) {
-        try {
-          await login();
-          toast.show('You are authenticated', 'success');
-        } catch (error) {
-          toast.show(error.message, 'error');
-        }
-      }
-    };
-    /**
-     * Handles user logout by invoking the Keycloak `logout` function.
-     * Resets the `authenticated` state to `false` after logout.
-     */
-    this.handleLogout = async () => {
-      try {
-        await logout();
-      } catch (error) {
-        toast.show(error.message, 'error');
-      }
-      this.authenticated = false;
-      this.user = null;
-    };
-    this.keycloakUrl = undefined;
-    this.keycloakRealm = undefined;
-    this.keycloakClientId = undefined;
-    this.authenticated = false;
-    this.user = null;
-  }
-  /**
-   * Lifecycle method that runs when the component is about to load.
-   * It initializes authentication by calling the `initAuth` method.
-   */
-  async componentWillLoad() {
-    // Check if required props are provided (optional check)
-    if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
-      // eslint-disable-next-line
-      console.error('Keycloak configuration props are missing.');
-      return;
-    }
-    await this.initAuth();
-  }
-  /**
-   * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
-   * Sets the `authenticated` state and `user` data if the user is authenticated.
-   * Emits `authStatusChanged` event with the authentication status.
-   */
-  async initAuth() {
-    try {
-      await initKeycloak({
-        url: this.keycloakUrl,
-        realm: this.keycloakRealm,
-        clientId: this.keycloakClientId
-      }, true);
-      if (isAuthenticated()) {
-        this.user = getUser();
-        this.authenticated = true;
-        this.authStatusChanged.emit({
-          authenticated: this.authenticated,
-          user: this.user
-        }); // Emit auth status change
-      }
-    } catch (error) {
-      toast.show(error.message, 'error');
-    }
-  }
-  render() {
-    return h("div", {
-      key: '62768f8a6cc8ac16b13f9b2bb9cf5835f7f63844',
-      class: "block"
-    }, !this.authenticated && h("eds-button", {
-      key: '31e341d628242fed472f673c0fe8346c7871515d',
-      label: "Login",
-      intent: "primary",
-      "extra-class": "text-default",
-      "aria-label": "Login",
-      triggerClick: this.handleLogin.bind(this)
-    }));
-  }
-};
-
-export { EdsLogin as eds_login };

package/eds-logo.entry.esm.js

@@ -1,87 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { h as hLogoColor } from './logo-color-7f1fd803.esm.js';
-import { h as hLogoBlack, a as hLogoColorWhite, b as hLogoWhite, c as hLogoWhiteNoBg, v as vLogoColor, d as vLogoBlack, e as vLogoColorWhite, f as vLogoWhite, g as vLogoWhiteNoBg } from './logo-white-no-bg-f382f86f.esm.js';
-import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsLogoCss = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{color:currentColor}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (min-width: 900px){.lg\\:w-\\[150px\\]{width:150px}}";
-const EdsLogoStyle0 = edsLogoCss;
-const EdsLogo = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.href = '/';
-    this.orientation = 'horizontal';
-    this.type = undefined;
-    this.label = 'Home';
-  }
-  /**
-   * Handles the click event on the logo link.
-   * Emits a `matomoEvent` for analytics tracking with details about the interaction.
-   * - `category`: Component type (e.g., "ui-component").
-   * - `tag`: The HTML tag name of the component.
-   * - `name`: Event name, set as "logo".
-   * - `action`: The action, set as "click".
-   */
-  handleClick() {
-    sendAnalytics({
-      category: 'ui-component',
-      tag: this.el.tagName.toLowerCase(),
-      name: 'logo',
-      action: 'click'
-    });
-  }
-  /**
-   * Determines the appropriate SVG content based on the `orientation` and `type` props.
-   */
-  getLogo() {
-    const logos = {
-      horizontal: {
-        color: hLogoColor,
-        black: hLogoBlack,
-        'color-white': hLogoColorWhite,
-        white: hLogoWhite,
-        'no-bg': hLogoWhiteNoBg
-      },
-      vertical: {
-        color: vLogoColor,
-        black: vLogoBlack,
-        'color-white': vLogoColorWhite,
-        white: vLogoWhite,
-        'no-bg': vLogoWhiteNoBg
-      }
-    };
-    // Validate the orientation and type
-    const validOrientation = logos[this.orientation];
-    if (!validOrientation) {
-      //console.error(`Invalid orientation "${this.orientation}". Falling back to "horizontal".`);
-      return hLogoColor; // Default fallback logo
-    }
-    const validLogo = validOrientation[this.type];
-    if (!validLogo) {
-      //console.error(`Invalid type "${this.type}" for orientation "${this.orientation}". Falling back to "color".`);
-      return validOrientation['color']; // Fallback to color logo
-    }
-    return validLogo;
-  }
-  render() {
-    const logoContent = this.getLogo();
-    return h("a", {
-      key: 'ee8de4071b0137020341982b4c5cb2c938f1c4df',
-      href: this.href,
-      onClick: () => this.handleClick(),
-      class: "eds-logo-wrapper",
-      "aria-label": this.label
-    }, h("div", {
-      key: '1eb620afbcc5a2a5c6914cc1c91a45ca62d0068c',
-      innerHTML: logoContent
-    }));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsLogo.style = EdsLogoStyle0;
-
-export { EdsLogo as eds_logo };

package/eds-navigator.entry.esm.js

@@ -1,72 +0,0 @@
-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: '712287e683436cc98c2d6ef195501add1929522e',
-      class: "flex lg:flex grow items-center justify-center gap-x-8"
-    }, this.prevLabel && h("eds-link", {
-      key: '4fda36ce37897284d7062f88133f147831d96a6f',
-      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: '9bfa6bbbdc68641f65bec49f207d96f075b9a5b0',
-      icon: "chevron-left"
-    }), this.prevLabel), this.nextLabel && h("eds-link", {
-      key: '6ee8ebee011a2c30a74645b072c7c37929d0a55f',
-      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: '44ebd4dcce0e367df7d9035bb445e49fde35e913',
-      icon: "chevron-right",
-      class: "w-20 h-20"
-    })));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-
-export { EdsNavigator as eds_navigator };

package/eds-social-networks.entry.esm.js

@@ -1,74 +0,0 @@
-import { r as registerInstance, h } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsSocialNetworksCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.mt-12{margin-top:0.75rem}.mt-16{margin-top:1rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";
-const EdsSocialNetworksStyle0 = edsSocialNetworksCss;
-const EdsSocialNetworks = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Array of social network objects, each containing label, URL, and icon.
-     * These are used to render the social network links.
-     *
-     * @private
-     * @type {SocialNetworks[]}
-     */
-    this.socialNetworks = [{
-      label: 'Twitter',
-      url: 'https://twitter.com/ebrains_eu',
-      icon: 'twitter'
-    }, {
-      label: 'Linkedin',
-      url: 'https://www.linkedin.com/company/ebrains-eu/about/',
-      icon: 'linkedin'
-    }, {
-      label: 'Facebook',
-      url: 'https://www.facebook.com/people/Ebrains_eu/100046659909324/',
-      icon: 'facebook'
-    }, {
-      label: 'Youtube',
-      url: 'https://www.youtube.com/channel/UC6E796cVVR5Xrs2A5jJmleQ',
-      icon: 'youtube'
-    }, {
-      label: 'Mastodon',
-      url: 'https://mastodon.social/@ebrains',
-      icon: 'mastodon'
-    }, {
-      label: 'Bluesky',
-      url: 'https://bsky.app/profile/ebrains.bsky.social',
-      icon: 'bluesky'
-    }];
-    this.title = 'Follow EBRAINS to keep up-to-date';
-  }
-  /**
-   * Renders the component's HTML structure with links to EBRAINS social profiles.
-   * Each social network link uses the `eds-link` component with specific classes and styles.
-   *
-   * @returns {JSX.Element} The rendered JSX for the component.
-   */
-  render() {
-    return h("div", {
-      key: '9efc31261e88c70f9c808251124178d807140594'
-    }, h("p", {
-      key: '383101de2aaba05e1024f3ba86d788ad5d92173c',
-      class: "f-ui-02"
-    }, this.title), h("ul", {
-      key: 'e27243a4e7b8aab085c4ef091d67df57dba70664',
-      class: "mt-12 flex gap-4"
-    }, this.socialNetworks.map((network, index) => h("li", {
-      key: index
-    }, h("eds-link", {
-      "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm",
-      external: true,
-      "aria-label": network.label,
-      url: network.url,
-      icon: network.icon,
-      intent: "strong"
-    })))));
-  }
-};
-EdsSocialNetworks.style = EdsSocialNetworksStyle0;
-
-export { EdsSocialNetworks as eds_social_networks };

package/eds-steps.entry.esm.js

@@ -1,98 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-28{margin-bottom:1.75rem}";
-const EdsStepsStyle0 = edsStepsCss;
-const EdsSteps = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.stepClick = createEvent(this, "stepClick", 7);
-    this.handleNext = () => {
-      if (this.activeStep < this.parsedSteps.length) {
-        this.activeStep = this.activeStep + 1;
-      }
-    };
-    this.handleBack = () => {
-      if (this.activeStep > 0) {
-        this.activeStep = this.activeStep - 1;
-      }
-    };
-    this.steps = [];
-    this.type = 'static';
-    this.activeStep = 0;
-  }
-  handleStepClick(index) {
-    this.stepClick.emit(index);
-    // In linear mode, update the active step on header click.
-    if (this.type === 'linear') {
-      this.activeStep = index;
-    }
-  }
-  /**
-   * Parse the JSON string into an array of steps.
-   */
-  get parsedSteps() {
-    if (typeof this.steps === 'string') {
-      try {
-        const stepsStr = this.steps;
-        return JSON.parse(stepsStr);
-      } catch (error) {
-        //console.error('Invalid steps JSON', error);
-        return [];
-      }
-    }
-    return this.steps;
-  }
-  /*private handleReset = () => {
-    this.activeStep = 0;
-  };*/
-  render() {
-    const steps = this.parsedSteps;
-    if (this.type === 'linear') {
-      return h("div", null, h("div", {
-        class: "steps"
-      }, steps.map((step, index) => h("div", {
-        class: "step mb-28",
-        key: index
-      }, h("h3", {
-        onClick: () => this.handleStepClick(index)
-      }, step.title), this.activeStep === index && h("div", {
-        class: "content"
-      }, h("div", {
-        class: "f-body-02 text-lighter my-16"
-      }, step.content), h("eds-button", {
-        label: index === steps.length - 1 ? 'Finish' : 'Continue',
-        intent: "primary",
-        class: "next-btn",
-        onClick: this.handleNext
-      }), h("eds-button", {
-        label: "Back",
-        intent: "ghostInverse",
-        onClick: this.handleBack,
-        disabled: index === 0,
-        "extra-class": index === 0 ? 'hidden' : 'ml-8 block'
-      }))))), this.activeStep === steps.length && h("div", {
-        class: "completed"
-      }, h("eds-alert", {
-        intent: "success",
-        message: "All steps completed - you're finished!"
-      })));
-    }
-    // Static mode: show all steps with their content, no navigation buttons.
-    return h("div", {
-      class: "steps"
-    }, steps.map((step, index) => h("div", {
-      class: "step mb-28",
-      key: index
-    }, h("h3", null, step.title), h("div", {
-      class: "content"
-    }, h("div", {
-      class: "f-body-02 text-lighter my-16"
-    }, step.content)))));
-  }
-};
-EdsSteps.style = EdsStepsStyle0;
-
-export { EdsSteps as eds_steps };

package/eds-tab.entry.esm.js

@@ -1,41 +0,0 @@
-import { r as registerInstance, h } from './index.esm2.js';
-import { c as cva } from './index-39c58238.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const EdsTab = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tabCva = cva(['cursor-pointer',
-    //'px-16 py-12',
-    //'border-b-2',
-    'text-gray-700', 'hover:text-black', 'focus:outline-none', 'focus-visible:ring'], {
-      variants: {
-        active: {
-          true: 'border-blue-500 font-bold text-blue-600',
-          false: 'border-transparent'
-        }
-      },
-      defaultVariants: {
-        active: false
-      }
-    });
-    this.label = undefined;
-    this.url = undefined;
-    this.active = false;
-    this.ariaLabel = undefined;
-  }
-  render() {
-    return h("a", {
-      key: 'a55be2a07e554ab13a0d7e913710382d6126da57',
-      "aria-label": this.label,
-      "aria-current": this.active,
-      class: this.tabCva({
-        active: this.active
-      })
-    }, this.label);
-  }
-};
-
-export { EdsTab as eds_tab };

package/eds-tabs-content.entry.esm.js

@@ -1,145 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
-import { c as cva } from './index-39c58238.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const EdsTabsContent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tabContentChange = createEvent(this, "tabContentChange", 7);
-    // cva configuration
-    this.tabCva = cva(['relative px-16 py-12', 'f-ui-03 whitespace-nowrap', 'effect-color', 'focus-visible:text-default hover:text-default', 'border-2', "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:border-3 after:border-accent after:opacity-0", 'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'], {
-      variants: {
-        position: {
-          left: 'rounded-tl-lg border-r-0 pr-28 -mr-16 after:right-16',
-          right: 'rounded-tr-lg border-l-0 pl-28 -ml-16 after:left-16',
-          center: '',
-          first: 'rounded-t-lg'
-        },
-        active: {
-          false: 'text-lighter bg-dark hover:bg-darker border-softest',
-          true: ['bg-default text-default z-99', 'rounded-t-lg', "before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default", 'border-[#d2d2d2]']
-        }
-      }
-    });
-    this.navAriaLabel = 'Tabs';
-    this.tabs = undefined;
-    this.parsedTabs = [];
-    this.activeIndex = -1;
-  }
-  componentWillLoad() {
-    this.parseTabs();
-    this.setActiveIndex();
-  }
-  parseTabs() {
-    try {
-      this.parsedTabs = JSON.parse(this.tabs);
-    } catch (error) {
-      //console.error('Invalid JSON format for tabs:', error);
-      this.parsedTabs = [];
-    }
-  }
-  componentDidLoad() {
-    this.initializeTabContentVisibility();
-    this.el.addEventListener('tabContentChange', e => {
-      this.updateTabContentVisibility(e.detail.index);
-    });
-    this.scrollToActiveTab();
-  }
-  initializeTabContentVisibility() {
-    const allContent = this.el.querySelectorAll('.tab-content');
-    allContent.forEach((content, index) => {
-      content.setAttribute('style', `display: ${index === this.activeIndex ? 'block' : 'none'}`);
-    });
-  }
-  updateTabContentVisibility(index) {
-    const allContent = this.el.querySelectorAll('.tab-content');
-    allContent.forEach((content, contentIndex) => {
-      content.setAttribute('style', `display: ${contentIndex === index ? 'block' : 'none'}`);
-    });
-  }
-  setActiveIndex() {
-    this.activeIndex = this.parsedTabs.findIndex(tab => tab.active);
-  }
-  scrollToActiveTab() {
-    var _a;
-    const activeTab = (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.querySelector('[data-tab-active]');
-    if (activeTab) {
-      setTimeout(() => {
-        activeTab.scrollIntoView({
-          inline: 'center',
-          block: 'nearest'
-        });
-      }, 316);
-    }
-  }
-  getTabOptions(active, index) {
-    const position = active ? 'center' : this.activeIndex === -1 && index === 0 ? 'first' : index < this.activeIndex ? 'left' : 'right';
-    return Object.assign({
-      class: this.tabCva({
-        active,
-        position
-      }),
-      style: {
-        zIndex: `${active ? this.parsedTabs.length + 99 : position === 'left' ? index : this.parsedTabs.length + 1 - index}`
-      }
-    }, active ? {
-      'data-tab-active': 'true'
-    } : {});
-  }
-  handleTabClick(index, tabLabel) {
-    // Update the active index and set all tabs' active state accordingly
-    this.activeIndex = index;
-    this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => Object.assign(Object.assign({}, tab), {
-      active: tabIndex === index
-    }));
-    this.tabContentChange.emit({
-      index: index,
-      name: tabLabel
-    });
-    sendAnalytics({
-      category: 'ui-component',
-      tag: this.el.tagName.toLowerCase(),
-      name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
-      action: 'click'
-    });
-  }
-  render() {
-    return h("div", {
-      key: 'd94df79c55522088de5445587758a5eea028b313',
-      class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"
-    }, h("div", {
-      key: 'e7d01a2e6b424c25749c0d70305fb1c8c55bef74',
-      class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
-    }, h("nav", {
-      key: 'ef8ff8a02e570dfcf8143997ace793a65917e6ca',
-      ref: el => this.tabContainer = el,
-      class: "inline-flex",
-      "aria-label": this.navAriaLabel
-    }, this.parsedTabs.map((tab, index) => {
-      //const TabComponent = tab.active ? 'span' : 'a';
-      const tabProps = this.getTabOptions(tab.active, index);
-      return h("eds-tab", Object.assign({}, tabProps, {
-        label: tab.label,
-        url: tab.url,
-        active: index === this.activeIndex,
-        ariaLabel: tab.ariaLabel,
-        onClick: () => this.handleTabClick(index, tab.label)
-      }));
-    })), h("slot", {
-      key: '8f014081c3bc2a8a3013aea3aff32690d6f71c85'
-    })));
-  }
-  get el() {
-    return getElement(this);
-  }
-  static get watchers() {
-    return {
-      "tabs": ["parseTabs"]
-    };
-  }
-};
-
-export { EdsTabsContent as eds_tabs_content };