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

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 };

package/eds-pagination.entry.esm.js

@@ -0,0 +1,258 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.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)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.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)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{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:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
+const EdsPaginationStyle0 = edsPaginationCss;
+const EdsPagination = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.currentPage = undefined;
+    this.lastPage = undefined;
+    this.perPage = 10;
+    this.total = 0;
+    this.url = '';
+    this.mode = 'default';
+    this.prevLabel = 'Prev';
+    this.nextLabel = 'Next';
+    this.prevUrl = '';
+    this.nextUrl = '';
+    this.links = [];
+  }
+  /** Lifecycle hook to generate pagination links on component load */
+  componentWillLoad() {
+    if (this.mode === 'default') {
+      this.generateLinks();
+    }
+  }
+  componentDidLoad() {
+    // Emit context for each eds-link element after the component is fully loaded
+    const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
+    if (links.length > 0) {
+      // Emit context for the first link
+      this.emitContext(links[0]);
+      // Emit context for the last link, if it's different from the first
+      if (links.length > 1) {
+        this.emitContext(links[links.length - 1]);
+      }
+    }
+  }
+  /**
+   * 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.hostEl.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    linkElement.dispatchEvent(event);
+  }
+  onPageOrLastPageChange() {
+    if (this.mode === 'default') {
+      this.generateLinks();
+    }
+  }
+  /**
+   * Checks if the current page is the first page
+   * @returns {boolean} - true if current page is the first page
+   */
+  isFirstPage() {
+    return this.currentPage === 1;
+  }
+  /**
+   * Checks if the current page is the last page
+   * @returns {boolean} - true if current page is the last page
+   */
+  isLastPage() {
+    return this.currentPage === this.lastPage;
+  }
+  /**
+   * Generates a pagination link object
+   * @param {number} page - Page number for the link
+   * @returns {Link} - Link object with page details
+   */
+  generateLink(page) {
+    const urlHasQuery = this.url.includes('?');
+    return {
+      ariaLabel: `Page ${page}`,
+      url: `${this.url}${urlHasQuery ? '&' : '?'}page=${page}`,
+      label: page.toString(),
+      current: this.currentPage === page,
+      disabled: false
+    };
+  }
+  /** Generates pagination links based on the last page and current page */
+  generateLinks() {
+    if (this.lastPage && this.lastPage > 5) {
+      this.links = this.getPaginationGenerator(this.currentPage || 1, this.lastPage).map(page => typeof page === 'number' ? this.generateLink(page) : page);
+    } else if (this.lastPage) {
+      this.links = Array.from({
+        length: this.lastPage
+      }).map((_, i) => this.generateLink(i + 1));
+    }
+  }
+  /**
+   * Creates a pagination range based on delta, current, and total pages
+   * @param {number} current - Current page number
+   * @param {number} total - Total number of pages
+   * @param {number} delta - Range of pages to display around the current page
+   * @returns {(number | string)[]} - Range of page numbers or ellipses
+   */
+  getPaginationGenerator(current, total) {
+    const delta = 1; // Show one page before and one after the current page
+    const range = [];
+    if (total <= 5) {
+      // If total pages are 5 or less, show all pages
+      for (let i = 1; i <= total; i++) {
+        range.push(i);
+      }
+    } else {
+      // Always show the first page
+      range.push(1);
+      // Add ellipsis if there’s a gap between the first page and the current range start
+      if (current - delta > 2) {
+        range.push('...');
+      }
+      // Determine range for pages around the current page
+      for (let i = Math.max(2, current - delta); i <= Math.min(total - 1, current + delta); i++) {
+        range.push(i);
+      }
+      // Add ellipsis if there’s a gap between the current range end and the last page
+      if (current + delta < total - 1) {
+        range.push('...');
+      }
+      // Always show the last page
+      range.push(total);
+    }
+    return range;
+  }
+  /**
+   * Formats the current page results information for display
+   * @returns {string} - Formatted page result information
+   */
+  pageResults() {
+    if (this.total > 0) {
+      return this.total > this.perPage ? `${this.perPage * ((this.currentPage || 1) - 1) + 1} - ${this.perPage * (this.currentPage || 1) >= this.total ? this.total : this.perPage * (this.currentPage || 1)} of ${this.total}` : `${this.total}`;
+    }
+    return '';
+  }
+  /**
+   * Handles a page click event, updating the current page and dispatching an event
+   * @param {MouseEvent} event - Click event
+   * @param {number} newPage - New page number
+   */
+  handlePageClick(event, newPage) {
+    if (this.mode === 'navigator') {
+      return; // No page clicking logic for navigator mode
+    }
+    event.preventDefault(); // Prevent default link navigation
+    if (newPage !== this.currentPage) {
+      this.links = this.links.map(link => typeof link === 'object' ? Object.assign(Object.assign({}, link), {
+        current: parseInt(link.label) === newPage
+      }) : link);
+      const pageChangeEvent = new CustomEvent('pageChange', {
+        detail: newPage,
+        bubbles: true,
+        composed: true
+      });
+      this.hostEl.dispatchEvent(pageChangeEvent);
+      this.currentPage = newPage;
+    }
+  }
+  render() {
+    return h("div", {
+      key: '2385b59b0a8b2bbdc40bfc5032b846c0ec20065e'
+    }, this.total > 0 && this.mode === 'default' && h("p", {
+      key: '6aea281a4df247874f354469bbabae039424ad9e',
+      class: "f-ui-03 text-lightest mb-28 w-full text-center"
+    }, h("span", {
+      key: 'eeb5f0ea902505c3853a30d51026cef9d9785e48',
+      class: "sr-only"
+    }, "Results:"), this.pageResults()), this.mode === 'navigator' || this.lastPage && this.lastPage > 1 ? h("nav", {
+      "aria-label": "Pagination"
+    }, h("ul", {
+      class: "flex items-center justify-center gap-x-8"
+    }, h("li", {
+      class: "mr-auto"
+    }, h("eds-link", {
+      label: this.prevLabel,
+      url: this.mode === 'navigator' ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
+      : this.isFirstPage() ? '#' : this.generateLink(this.currentPage - 1).url,
+      disabled: this.mode === 'navigator' ? !this.prevUrl // Disable if prevUrl is not provided
+      : this.isFirstPage(),
+      "aria-label": "Previous page",
+      icon: "chevron-left",
+      "icon-pos": "left",
+      size: "small",
+      "icon-small": "true",
+      intent: "strong",
+      "hide-label-on-small-screen": true,
+      class: "!p-8 lg:!pr-12",
+      onClick: event => {
+        if (this.mode === 'default') {
+          if (this.isFirstPage()) {
+            event.preventDefault(); // Prevent click if disabled
+          } else {
+            this.handlePageClick(event, (this.currentPage || 1) - 1);
+          }
+        }
+      }
+    })), this.mode === 'default' && this.links.map((link, index) => h("li", {
+      key: index,
+      class: "f-ui-02 flex h-36 items-center justify-center"
+    }, typeof link === 'string' ? h("span", {
+      class: "flex items-center justify-center"
+    }, link) : h("eds-link", {
+      url: link.url,
+      "aria-label": link.ariaLabel,
+      label: link.label,
+      current: link.current,
+      size: "small",
+      class: "!p-8",
+      intent: link.current ? 'secondary' : 'ghost',
+      onClick: event => this.handlePageClick(event, parseInt(link.label))
+    }))), h("li", {
+      class: "ml-auto"
+    }, h("eds-link", {
+      label: this.nextLabel,
+      url: this.mode === 'navigator' ? this.nextUrl || '#' // Use nextUrl if provided, otherwise disable with '#'
+      : this.isLastPage() ? '#' : this.generateLink(this.currentPage + 1).url,
+      disabled: this.mode === 'navigator' ? !this.nextUrl // Disable if nextUrl is not provided
+      : this.isLastPage(),
+      "aria-label": "Next page",
+      size: "small",
+      "icon-small": "true",
+      icon: "chevron-right",
+      intent: "strong",
+      "hide-label-on-small-screen": true,
+      class: "!p-8 lg:!pl-12 flex items-center gap-1 py-4 transition-colors",
+      onClick: event => {
+        if (this.mode === 'default') {
+          if (this.isLastPage()) {
+            event.preventDefault(); // Prevent click if disabled
+          } else {
+            this.handlePageClick(event, (this.currentPage || 1) + 1);
+          }
+        }
+      }
+    })))) : null);
+  }
+  get hostEl() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "currentPage": ["onPageOrLastPageChange"],
+      "lastPage": ["onPageOrLastPageChange"]
+    };
+  }
+};
+EdsPagination.style = EdsPaginationStyle0;
+
+export { EdsPagination as eds_pagination };

package/eds-rating.entry.esm.js

@@ -0,0 +1,71 @@
+import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsRatingCss = ":host{display:inline-block;font-size:2rem}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.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-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}";
+const EdsRatingStyle0 = edsRatingCss;
+const EdsRating = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ratingChange = createEvent(this, "ratingChange", 7);
+    this.stars = 5;
+    this.label = 'Rate your experience';
+    this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
+    this.selectedRating = 0;
+  }
+  /**
+   * 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 parsedMappings() {
+    if (typeof this.textMapping === 'object') {
+      return this.textMapping;
+    } else if (typeof this.textMapping === 'string') {
+      try {
+        return JSON.parse(this.textMapping);
+      } catch (e) {
+        // eslint-disable-next-line
+        console.error('Error parsing links prop:', e);
+        return [];
+      }
+    }
+    return [];
+  }
+  /**
+   * Handles the click event on a star.
+   * @param rating - The selected rating value.
+   */
+  handleClick(rating) {
+    this.selectedRating = rating;
+    this.ratingChange.emit(rating);
+  }
+  render() {
+    return h("div", {
+      key: '4ca6d5e0fb35d8ebce1acd5c1a7c6c857ba4f463',
+      class: "relative w-full flex flex-col"
+    }, h("span", {
+      key: '784b77f84098b8d88cd3872004b0208a4437c51b',
+      class: "f-body-01"
+    }, this.label), h("div", {
+      key: '6780db58d3c96046a99d383518cfe1db1e3f1c68',
+      class: "stars"
+    }, Array.from({
+      length: this.stars
+    }, (_, index) => h("span", {
+      class: {
+        star: true,
+        filled: index < this.selectedRating
+      },
+      onClick: () => this.handleClick(index + 1)
+    }, "\u2605"))), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && h("span", {
+      key: 'ce0eec3c29cf27bff86e3307a29a2c39c2167087',
+      class: "f-ui-04 text-lighter"
+    }, this.parsedMappings[this.selectedRating - 1]));
+  }
+};
+EdsRating.style = EdsRatingStyle0;
+
+export { EdsRating as eds_rating };

package/eds-section-core_2.entry.esm.js

@@ -0,0 +1,69 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsSectionCoreCss = "";
+const EdsSectionCoreStyle0 = edsSectionCoreCss;
+const EdsSectionCore = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tag = 'section';
+    this.sectionTitle = '';
+    this.headingLevel = 'h2';
+  }
+  render() {
+    const TagType = this.tag; // Set dynamic tag type (div or section)
+    return h(TagType, {
+      key: '849c35d9cd587cf14b0d6bc6efd1310a85d447f2'
+    }, h("eds-section-heading", {
+      key: '7ed4486fcf6e7c653026869c9468be9471db1775',
+      headingLevel: this.headingLevel,
+      sectionTitle: this.sectionTitle
+    }), h("slot", {
+      key: '5d95ea6516ecaaab4e07a40b84cd20deb3d8d3b2'
+    }));
+  }
+};
+EdsSectionCore.style = EdsSectionCoreStyle0;
+const EdsSectionHeading = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sectionTitle = undefined;
+    this.withContainer = true;
+    this.headingLevel = 'h2';
+    this.tag = 'div';
+    this.spacingLarge = false;
+  }
+  getHeadingClass() {
+    // Map heading levels to their respective classes
+    const headingClasses = {
+      h1: 'f-heading-01',
+      h2: 'f-heading-02',
+      h3: 'f-heading-03',
+      h4: 'f-heading-04',
+      h5: 'f-heading-05',
+      h6: 'f-heading-06'
+    };
+    // Return the class based on the heading level
+    return headingClasses[this.headingLevel];
+  }
+  render() {
+    const TagType = this.tag; // Dynamically set tag type for the container
+    const HeadingTag = this.headingLevel; // Dynamically set heading level
+    return h(TagType, {
+      key: '2c6466c0a02bf8598153c18eafb37affc3dac395',
+      class: {
+        'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
+        container: this.withContainer,
+        'pt-48': this.spacingLarge,
+        'pt-28': !this.spacingLarge
+      }
+    }, h(HeadingTag, {
+      key: 'fc7f0f09e02e8c63697e46811c465792497126e0',
+      class: this.getHeadingClass()
+    }, this.sectionTitle));
+  }
+};
+
+export { EdsSectionCore as eds_section_core, EdsSectionHeading as eds_section_heading };

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

@@ -0,0 +1,74 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsSocialNetworkCss = "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 = edsSocialNetworkCss;
+const EdsSocialNetwork = 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: '6169559327b728fd0f3a51a2b8a6439f80fba8fc'
+    }, h("p", {
+      key: 'df2e008500097af1b85660fe8b3fac122f5018a4',
+      class: "f-ui-02"
+    }, this.title), h("ul", {
+      key: 'df01a2802412c4db4e5442fdfc0b6ef3f15c4109',
+      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"
+    })))));
+  }
+};
+EdsSocialNetwork.style = EdsSocialNetworksStyle0;
+
+export { EdsSocialNetwork as eds_social_networks };