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

package/eds-breadcrumb.entry.esm.js

@@ -1,169 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsBreadcrumbCss = "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}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}";
-const EdsBreadcrumbStyle0 = edsBreadcrumbCss;
-const EdsBreadcrumb = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Updates the maximum number of visible items and tracks if the screen is small.
-     */
-    this.updateScreenSize = () => {
-      const width = window.innerWidth;
-      if (width < 769) {
-        this.maxVisibleItems = 3;
-        this.isSmallScreen = true;
-      } else if (width <= 1024) {
-        this.maxVisibleItems = 4;
-        this.isSmallScreen = true;
-      } else {
-        this.maxVisibleItems = 6;
-        this.isSmallScreen = false;
-      }
-    };
-    this.items = [];
-    this.intent = 'ghost';
-    this.parsedItems = [];
-    this.isSmallScreen = false;
-    this.maxVisibleItems = 6;
-  }
-  /**
-   * Watch for changes to the `items` prop and parse it when it changes.
-   * Converts the `items` string into an array of objects if it is a JSON string.
-   * If the format is invalid, it logs an error and sets an empty array.
-   *
-   * @param newValue - The new value for the `items` prop.
-   */
-  parseItems(newValue) {
-    try {
-      if (typeof newValue === 'string') {
-        this.parsedItems = JSON.parse(newValue);
-      } else {
-        this.parsedItems = newValue;
-      }
-    } catch (e) {
-      this.parsedItems = [];
-    }
-  }
-  /**
-   * Lifecycle method that runs when the component is about to be loaded.
-   * It parses the initial `items` prop value.
-   */
-  componentWillLoad() {
-    this.parseItems(this.items);
-    this.updateScreenSize();
-    window.addEventListener('resize', this.updateScreenSize);
-  }
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.updateScreenSize);
-  }
-  /**
-   * Lifecycle method that runs when the component has fully loaded.
-   * It emits a custom event for each `eds-link` element contained within the breadcrumb.
-   */
-  componentDidLoad() {
-    // Emit context for each eds-link element after the component is fully loaded
-    const links = this.el.shadowRoot.querySelectorAll('eds-link');
-    links.forEach(link => {
-      this.emitContext(link);
-    });
-  }
-  /**
-   * 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(linkElement) {
-    const event = new CustomEvent('parentContext', {
-      detail: {
-        componentName: this.el.tagName.toLowerCase(),
-        identifier: null
-      }
-    });
-    linkElement.dispatchEvent(event);
-  }
-  /**
-   * Truncates breadcrumb items based on the maxVisibleItems value.
-   * Truncates `label` to 10 characters if `isSmallScreen` is true, except for the last label.
-   */
-  getTruncatedItems() {
-    const totalItems = this.parsedItems.length;
-    if (totalItems > this.maxVisibleItems) {
-      const firstItem = this.parsedItems[0];
-      const lastItems = this.parsedItems.slice(-2);
-      const ellipsis = {
-        label: '...',
-        url: '',
-        isHidden: true
-      };
-      if (this.maxVisibleItems === 3) {
-        return [this.truncateLabel(firstItem), ellipsis, ...lastItems.map((item, index) => index === lastItems.length - 1 ? item : this.truncateLabel(item))];
-      } else if (this.maxVisibleItems === 4) {
-        const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
-        return [this.truncateLabel(firstItem), this.truncateLabel(middleItem), ellipsis, ...lastItems.map((item, index) => index === lastItems.length - 1 ? item : this.truncateLabel(item))];
-      }
-    }
-    return this.parsedItems.map((item, index) => index === this.parsedItems.length - 1 ? item : this.truncateLabel(item));
-  }
-  /**
-   * Truncates the label of a breadcrumb item to a maximum of 10 characters
-   * if the screen is small.
-   */
-  truncateLabel(item) {
-    if (item.label.length > 15) {
-      return Object.assign(Object.assign({}, item), {
-        label: `${item.label.slice(0, 15)}...`
-      });
-    }
-    return item;
-  }
-  /**
-   * Render method for the breadcrumb component.
-   * It creates a navigation element with an ordered list of breadcrumb links.
-   * The last link is disabled and marked as the current page.
-   */
-  render() {
-    const itemsToRender = this.getTruncatedItems();
-    return h("nav", {
-      key: 'b3f515670374a7451981638d658f8e37f07ab10c',
-      "aria-label": "Breadcrumb"
-    }, h("ol", {
-      key: '999b2035f3c996016e753be3826881a11054e184',
-      class: "flex items-center space-x-2"
-    }, itemsToRender.map((item, index) => {
-      const isLast = index === itemsToRender.length - 1;
-      return h("li", {
-        class: "flex items-center"
-      }, !item.isHidden ? h("eds-link", {
-        label: item.label,
-        url: item.url,
-        intent: this.intent,
-        current: isLast,
-        "aria-label": item.label,
-        size: "small",
-        "icon-small": "false"
-      }) : h("span", {
-        class: "truncate px-2 ",
-        "aria-hidden": "true"
-      }, "..."), !isLast && !item.isHidden && h("eds-icon-wrapper", {
-        icon: "chevron-right",
-        class: "w-20 h-20"
-      }));
-    })));
-  }
-  get el() {
-    return getElement(this);
-  }
-  static get watchers() {
-    return {
-      "items": ["parseItems"]
-    };
-  }
-};
-EdsBreadcrumb.style = EdsBreadcrumbStyle0;
-
-export { EdsBreadcrumb as eds_breadcrumb };

package/eds-footer.entry.esm.js

@@ -1,110 +0,0 @@
-import { r as registerInstance, h } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsFooterCss = "";
-const EdsFooterStyle0 = edsFooterCss;
-const EdsFooter = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Scrolls the page smoothly back to the top.
-     * Called when the "Back to top" button is clicked.
-     * @private
-     */
-    this.backToTop = () => {
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-      });
-    };
-    this.extraClass = '';
-    this.social = false;
-    this.hasCookiesSetUp = false;
-    this.enableScrollTop = false;
-    this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
-    this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
-    this.cookiesPreference = 'Cookies Preferences';
-  }
-  /**
-   * Toggles the cookie preferences popup, if available.
-   * The actual implementation for handling cookie preferences should be defined here.
-   * @private
-   */
-  toggleCookiesPopup() {
-    // Implement logic for handling cookie preferences
-  }
-  /**
-   * Renders the footer component with optional sections and elements,
-   * including social network links, a Horizon Europe funding acknowledgment, and
-   * legal links such as "Cookies Preferences" and copyright information.
-   *
-   * @returns {JSX.Element} The rendered JSX for the footer component.
-   */
-  render() {
-    return h("footer", {
-      key: 'efffa9b96cc2a094255fcb6d08ec45c7c7f09ec4',
-      class: `${this.extraClass} pb-banner`
-    }, this.social ? h("div", {
-      class: "border-softest border-t-2 pt-20 pb-28 md:pt-28"
-    }, h("div", {
-      class: "container pb-20 xl:pb-40 "
-    }, h("div", {
-      class: "grid-layout"
-    }, h("div", {
-      class: "grid-col-span-12 lg:grid-col-span-5"
-    }, h("eds-social-networks", {
-      class: "mt-28"
-    })), h("nav", {
-      "aria-label": "Secondary nav",
-      class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0"
-    })))) : null, h("div", {
-      key: 'c3942c635dff3dc8cb47a21f20aca52acfaa3e18',
-      class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28`
-    }, h("div", {
-      key: '57e963272659ce2e63294c969f3724a03aef667e',
-      class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap"
-    }, h("div", {
-      key: 'c3e5cfe07fe9eb90450f7a87be1b95ed00ef38ce',
-      class: "flex items-center gap-x-12"
-    }, 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"
-    }, h("eds-img", {
-      key: '6cb5d067f07b456a8d828f3f42f2730e3e5374e0',
-      width: 54,
-      height: 41,
-      src: "https://www.ebrains.eu/flags/4x3/eu.svg"
-    }))), h("div", {
-      key: 'e5b768b0fb96fcdcb786d33fc808368005935491',
-      class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto"
-    }, h("p", {
-      key: '777263c2f4bde43d38690f41391eaf8e51d945fa'
-    }, this.fundedBy), h("div", {
-      key: 'a415687d08edf8f3e03a6edce9c45f58662c8595',
-      class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap"
-    }, h("span", {
-      key: 'c0b6498ad4f5e1f4f1945ebb971f9dd81cc74c77',
-      class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline"
-    }, "\u00A9 ", this.rightsReserved), this.hasCookiesSetUp && h("button", {
-      key: '10133d180bfb0d8a6354ea2cbea318a2c46fc463',
-      class: "effect-focus !no-underline underline-offset-4 hover:!underline",
-      onClick: () => this.toggleCookiesPopup()
-    }, this.cookiesPreference))), h("div", {
-      key: '917d0980f91a8c42a75bae301b0a18e3777dd021',
-      class: "ml-auto pl-12"
-    }, this.enableScrollTop ? h("eds-button", {
-      "aria-label": "Back to top",
-      intent: "ghostInverse",
-      icon: "chevron-up",
-      onClick: this.backToTop
-    }) : null))));
-  }
-};
-EdsFooter.style = EdsFooterStyle0;
-
-export { EdsFooter as eds_footer };

package/eds-frame.entry.esm.js

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

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

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

package/eds-modal.entry.esm.js

@@ -1,114 +0,0 @@
-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 };