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

package/eds-login_2.entry.esm.js

@@ -1732,10 +1732,10 @@ const EdsLogin = class {
   }
   render() {
     return h("div", {
-      key: '074566b791eeb9ea4a0558b4ed83a96e4b673356',
+      key: 'dace7b16af2f945e4981c9ef139f4c2ae94e130c',
       class: "block"
     }, !this.authenticated && h("eds-button", {
-      key: '3a05ff97a90d73204eb77c5dad0d328294d72d3e',
+      key: 'a8d0bd545e8ae4a159b5977d50d05ae27dec7df3',
       label: "Login",
       intent: "primary",
       "extra-class": "text-default",

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

@@ -20,7 +20,7 @@ const EdsLogoVariations = class {
   }
   render() {
     return h("div", {
-      key: '0b23fee608fcbe7059fce155bd65a0c0a4d16e07',
+      key: '31bd93b3412b859adc59f6a4fe67018bf9c13336',
       class: "container"
     }, this.renderContent());
   }

package/eds-modal.entry.esm.js

@@ -97,40 +97,40 @@ const EdsModal = class {
     // Generate a unique id for the title so we can reference it for aria-labelledby.
     const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
     return h("div", {
-      key: '980f396b79c32a36005b5f7813cc52b2e97457fa',
+      key: '456972d43bddeec93053c1518ca35dff028f0416',
       id: "eds-modal",
       class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": titleId
     }, this.isOpen && h("div", {
-      key: 'a2e4bb022c17c66266809f1a8dd706523a6ff07b',
+      key: 'f3b84d1086f70f7863691835fe8984a4ff091b8f',
       class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
       ,
 
       onClick: () => this.close()
     }), h("div", {
-      key: '53c0c2a9559a6a5116f88caa2a7d92810560521e',
+      key: '5038d3564881f4580e63a1afd883affa0aee8750',
       class: `container max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center`
     }, h("div", {
-      key: '576b58f6bd78a969436c6a892f4dfec84a486cc4',
+      key: '4ce4d6f11afc552579a35f23901bc79e2ae19274',
       class: "flex justify-between items-center border-b-2 border-softer pb-8"
     }, h("span", {
-      key: '63e682d4297a346426dc7559cf0d80e21cc51f4c',
+      key: 'a9475d9cdcd4d3a1d68bce973f672621a30c53d4',
       id: titleId,
       class: `f-heading-04 text-lighter ${this.getTruncateClass()}`
     }, this.title), h("eds-button", {
-      key: 'eed35b30903d65694f2944431e7f387a8ef3f3e9',
+      key: 'c1e32fb266333856de6f0e63757fca02778330a9',
       intent: "tertiary",
       icon: "close",
       "aria-label": "Close modal",
       onClick: () => this.close(),
       "extra-class": "ml-8"
     })), h("div", {
-      key: '6c6e673640ed2ef2ae6139ae1931a4b0a0db9aa9',
+      key: '58b1d9a3228516a1de31a81c6cd3a2696c65ce5f',
       class: "pt-8"
     }, h("slot", {
-      key: 'eaaf2c17470681dc799b74f5eaebbe2496564c0e'
+      key: '0d81e88fcaa138bd746cc894543f264e4a3afb2f'
     }))));
   }
   get el() {

package/eds-pagination_2.entry.esm.js

@@ -0,0 +1,493 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
+import { p as parseData } from './sharedUtils-a550989c.esm.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');
+    links.forEach(lnk => {
+      this.emitContext(lnk);
+    });
+    /*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('page', {
+        detail: newPage,
+        bubbles: true,
+        composed: true
+      });
+      this.hostEl.dispatchEvent(pageChangeEvent);
+      this.currentPage = newPage;
+    }
+  }
+  render() {
+    return h("div", {
+      key: '4ebae5738982b21456e2852babeef2f5e2b4b1e0'
+    }, this.total > 0 && this.mode === 'default' && h("p", {
+      key: '9c18413928a471adb2b6964c78ea3339f251c81b',
+      class: "f-ui-03 text-lightest mb-28 w-full text-center"
+    }, h("span", {
+      key: '3d9d08eaaf7944ef1a6aba9b0912b7d9ebb58e28',
+      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;
+const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.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)}.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)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
+const EdsTableStyle0 = edsTableCss;
+const EdsTable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.handleResize = () => {
+      this.updateContainerWidth();
+    };
+    this.data = null;
+    this.endpoint = null;
+    this.config = {};
+    this.rowsPerPage = 10;
+    this.paginationEnabled = true;
+    this.searchEnabled = false;
+    this.hostWidth = undefined;
+    this.columnSize = 'default';
+    this.tbData = [];
+    this.columns = [];
+    this.currentPage = 1;
+    this.parsedConfig = {};
+    this.totalRows = 0;
+    this.searchQuery = '';
+    this.containerWidth = 0;
+  }
+  handleDataChange() {
+    this.parseData();
+  }
+  handleConfigChange() {
+    this.parseConfig();
+  }
+  componentWillLoad() {
+    this.parseConfig();
+    this.data ? this.parseData() : this.endpoint && this.fetchData();
+  }
+  componentDidLoad() {
+    this.updateContainerWidth();
+    window.addEventListener('resize', this.handleResize);
+    this.setupPaginationListener();
+  }
+  componentDidUpdate() {
+    this.setupPaginationListener();
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+  updateContainerWidth() {
+    // Use hostWidth prop if provided; otherwise, measure parent element
+    if (this.hostWidth && this.hostWidth.trim() !== '') {
+      this.containerWidth = Number(this.hostWidth);
+    } else if (this.hostEl.parentElement instanceof HTMLElement) {
+      this.containerWidth = this.hostEl.parentElement.getBoundingClientRect().width;
+    } else {
+      this.containerWidth = 400;
+    }
+  }
+  parseData() {
+    try {
+      this.tbData = parseData(this.data);
+      //this.tbData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+      this.totalRows = this.tbData.length;
+      this.updateColumns();
+      this.currentPage = 1;
+    } catch (error) {
+      // eslint-disable-next-line
+      console.error('Failed to parse data:', error);
+      this.tbData = [];
+    }
+  }
+  parseConfig() {
+    try {
+      //this.parsedConfig = parseData(this.config);
+      this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
+    } catch (error) {
+      // eslint-disable-next-line
+      console.error('Failed to parse config:', error);
+      this.parsedConfig = {};
+    }
+  }
+  async fetchData() {
+    try {
+      const response = await fetch(this.endpoint);
+      const data = await response.json();
+      this.data = data;
+    } catch (error) {
+      // eslint-disable-next-line
+      console.error('Failed to fetch data:', error);
+    }
+  }
+  setupPaginationListener() {
+    if (!this.shouldEnablePagination()) {
+      return;
+    }
+    const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
+    if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
+      paginationEl.addEventListener('page', event => this.handlePageChange(event.detail));
+      paginationEl.setAttribute('listener-attached', 'true');
+    }
+  }
+  getFilteredRows() {
+    return this.tbData.filter(row => Object.values(row).some(value => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
+  }
+  getPaginatedRows() {
+    const filteredRows = this.getFilteredRows();
+    this.totalRows = filteredRows.length;
+    const start = (this.currentPage - 1) * this.rowsPerPage;
+    return filteredRows.slice(start, start + this.rowsPerPage);
+  }
+  handlePageChange(newPage) {
+    this.currentPage = newPage;
+    sendAnalytics({
+      category: 'ui-component',
+      parentContext: null,
+      tag: `${this.hostEl.tagName.toLowerCase()}/eds-pagination`,
+      name: `${newPage}` || '',
+      action: 'page'
+    });
+  }
+  handleSearch(event) {
+    this.searchQuery = event.target.value;
+    this.currentPage = 1;
+    /*sendAnalytics({
+      category: 'ui-component',
+      parentContext: null,
+      tag: `${this.hostEl.tagName.toLowerCase()}/eds-input-field/search`,
+      name: `${this.searchQuery}` || '',
+      action: 'page'
+    });*/
+  }
+  renderCell(value, column) {
+    var _a;
+    const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
+    return format === 'uppercase' ? value === null || value === void 0 ? void 0 : value.toString().toUpperCase() : format === 'svg' ? h("div", {
+      innerHTML: value
+    }) : format === 'bold' ? h("strong", null, value) : format === 'code' ? h("code", null, value) : value;
+  }
+  shouldEnablePagination() {
+    return this.paginationEnabled && this.totalRows > this.rowsPerPage;
+  }
+  updateColumns() {
+    this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
+  }
+  getVisibleColumnsCount() {
+    return this.columns.filter(column => {
+      var _a;
+      return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden);
+    }).length;
+  }
+  divisionFactor() {
+    let divisionFactor = 1;
+    if (this.columnSize === 'medium') {
+      divisionFactor = 2;
+    } else if (this.columnSize === 'large') {
+      divisionFactor = 4;
+    }
+    return divisionFactor;
+  }
+  render() {
+    // Use containerWidth state that is updated on resize.
+    const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
+    // Calculate the number of visible columns and the column width.
+    const visibleColumnsCount = this.getVisibleColumnsCount();
+    const columnWidth = visibleColumnsCount > 0 ? Math.floor(currentContainerWidth / visibleColumnsCount * this.divisionFactor()) : 100;
+    const paginatedRows = this.getPaginatedRows();
+    const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
+    return h("div", {
+      key: 'a9df6351c49bb17abebfaf3640c71a7c7d15cb61'
+    }, this.searchEnabled && h("div", {
+      key: 'feb5708050593e791835456e6d2244332cee6062'
+    }, h("eds-input-field", {
+      key: 1,
+      name: "search",
+      "aria-label": "Search",
+      type: "text",
+      placeholder: "Search...",
+      // @ts-ignore
+      onInput: event => this.handleSearch(event)
+    })), h("div", {
+      key: '88dcb3d9e984a77f54735fa352c811dbf4745838',
+      class: "mt-20"
+    }, h("table", {
+      key: '32ff7b76066a96bce51f885e8339c258fdecd0c6',
+      class: "block overflow-x-auto mt-6 p-0"
+    }, h("thead", {
+      key: '9f4bbf0725c618c8c2f8a3b90d6d2f2a7f9c0186'
+    }, h("tr", {
+      key: 'd8f24a31aad07b667ae9cc06257ddddf529f8e31',
+      class: "m-0 p-0 border border-softer even:bg-inverse-softer"
+    }, this.columns.map(column => {
+      var _a;
+      return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("th", {
+        class: "m-0 py-8 border border-softer f-ui-02 break-words",
+        style: {
+          minWidth: `${columnWidth - 4}px`
+        }
+      }, column);
+    }))), h("tbody", {
+      key: '932e2f9cbd51d1115eef42f8b1acb7bb58ccdab7'
+    }, paginatedRows.map(row => h("tr", {
+      class: "m-0 p-0 border border-softer even:bg-inverse-softer"
+    }, this.columns.map(column => {
+      var _a;
+      return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("td", {
+        class: "text-center border border-softer m-0 py-8 f-ui-2 break-words",
+        style: {
+          minWidth: `${columnWidth - 4}px`
+        }
+      }, this.renderCell(row[column], column));
+    })))))), this.shouldEnablePagination() && h("div", {
+      key: '6368d38cec298dc8efa1a790d6b0cb93357f0ae5',
+      class: "mt-20"
+    }, h("eds-pagination", {
+      key: '2183eb4a6861a0e42538706bd0c9fe10a1e5d8bd',
+      currentPage: this.currentPage,
+      lastPage: lastPage,
+      perPage: this.rowsPerPage,
+      total: this.totalRows,
+      mode: "default"
+    })));
+  }
+  get hostEl() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "data": ["handleDataChange", "parseData"],
+      "config": ["handleConfigChange"]
+    };
+  }
+};
+EdsTable.style = EdsTableStyle0;
+
+export { EdsPagination as eds_pagination, EdsTable as eds_table };

package/eds-progress-bar.entry.esm.js

@@ -20,7 +20,7 @@ const EdsProgressBar = class {
   render() {
     const progressValue = this.value;
     return h("div", {
-      key: '9a7fa42058034305b22818d464e7b633d7831d67',
+      key: '259c247cbf6269d1118b652c70cc45e6ea9192b5',
       role: "progressbar",
       "aria-valuemin": "0",
       "aria-valuemax": "100",
@@ -28,7 +28,7 @@ const EdsProgressBar = class {
       "aria-valuetext": `${progressValue}%`,
       class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden"
     }, h("div", {
-      key: '90b0ac9a538b575a30163c0dbbf437e1cfe8ce39',
+      key: 'e6141a6aa1eb8d1f9562028d95f6dfffc2777b11',
       class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`,
       style: {
         width: `${progressValue}%`

package/eds-rating.entry.esm.js

@@ -48,7 +48,7 @@ const EdsRating = class {
   }
   render() {
     return h("div", {
-      key: '2ab4f3dbc4cc3dd5272143e99c67b23086b03e18',
+      key: '34344f12d4ca8a80fe7c96537d417c199421e139',
       role: "radiogroup",
       class: "stars flex space-x-1 my-8"
     }, Array.from({

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

@@ -15,13 +15,13 @@ const EdsSectionCore = class {
   render() {
     const TagType = this.tag; // Set dynamic tag type (div or section)
     return h(TagType, {
-      key: '39c4280156ca46b83538de499baa9b152360b1b4'
+      key: '81d5d6f6010c56bb217b32fa520fdaf96e1c7adc'
     }, h("eds-section-heading", {
-      key: '34da742e606f0e9bb485faac8aba1519eccc8934',
+      key: 'c47dda41c2f553ef87f432109ead4bd0debcd99c',
       headingLevel: this.headingLevel,
       sectionTitle: this.sectionTitle
     }), h("slot", {
-      key: '517b8ecc112565e8c6bb0bf85b02525deaa6f9df'
+      key: '9276798e2c581440c46ff9914809e87203a86b1b'
     }));
   }
 };
@@ -52,15 +52,15 @@ const EdsSectionHeading = class {
     const TagType = this.tag; // Dynamically set tag type for the container
     const HeadingTag = this.headingLevel; // Dynamically set heading level
     return h(TagType, {
-      key: '766d3f317904f2d735b7b531cf6ad582f22084e3',
+      key: '6741f5bbede7d44109c5e60f92290d4b2eda4d42',
       class: {
-        'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
+        'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
         container: this.withContainer,
         'pt-48': this.spacingLarge,
         'pt-28': !this.spacingLarge
       }
     }, h(HeadingTag, {
-      key: '41a9db3f627cf93f58d14cdebf3b991be6a6facf',
+      key: 'cc65df919db1dc1d5725116ce1ab473319185901',
       class: this.getHeadingClass()
     }, this.sectionTitle));
   }

package/eds-spinner.entry.esm.js

@@ -50,13 +50,13 @@ const EdsSpinner = class {
       justifyContent: 'center'
     };
     return h(Host, {
-      key: '1e1e4ea2734fff8a680e55ca5163e69d2000a55d'
+      key: '49a825afb039ee46b26609eea60109e0a060c104'
     }, h("div", {
-      key: 'acf09f69d43404f317240c0d24e644ec0d046cd7',
+      key: '6445a4e7f1e7c553bdee660c42f1db0e011443f2',
       class: "spinner-overlay",
       style: overlayStyle
     }, h("span", {
-      key: '3728629fdff738a0b753cd499dc26052b1e3cb7b',
+      key: '07feeb7736e6d306e2b7baf5d253b2ce96bb2c9e',
       class: "spinner",
       style: spinnerStyle
     })));