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

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

package/eds-table.entry.esm.js

@@ -1,196 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-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}";
-const EdsTableStyle0 = edsTableCss;
-const EdsTable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.minWidth = 400; // Minimum width for components in px
-    this.data = null;
-    this.endpoint = null;
-    this.config = {};
-    this.rowsPerPage = 10;
-    this.paginationEnabled = true;
-    this.searchEnabled = false;
-    this.tableData = [];
-    this.columns = [];
-    this.currentPage = 1;
-    this.parsedConfig = {};
-    this.totalRows = 0;
-    this.searchQuery = '';
-  }
-  handleDataChange() {
-    this.parseData();
-  }
-  handleConfigChange() {
-    this.parseConfig();
-  }
-  componentWillLoad() {
-    this.parseConfig();
-    this.data ? this.parseData() : this.endpoint && this.fetchData();
-  }
-  componentDidLoad() {
-    this.setupPaginationListener();
-  }
-  componentDidUpdate() {
-    this.setupPaginationListener();
-  }
-  parseData() {
-    try {
-      this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
-      this.totalRows = this.tableData.length;
-      this.updateColumns();
-      this.currentPage = 1;
-    } catch (error) {
-      // eslint-disable-next-line
-      console.error('Failed to parse data:', error);
-      this.tableData = [];
-    }
-  }
-  parseConfig() {
-    try {
-      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('pageChange', event => this.handlePageChange(event.detail));
-      paginationEl.setAttribute('listener-attached', 'true');
-    }
-  }
-  getFilteredRows() {
-    return this.tableData.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;
-  }
-  handleSearch(event) {
-    this.searchQuery = event.target.value;
-    this.currentPage = 1;
-  }
-  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.tableData.length > 0 ? Object.keys(this.tableData[0]) : [];
-  }
-  getVisibleColumnsCount() {
-    return this.columns.filter(column => {
-      var _a;
-      return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden);
-    }).length;
-  }
-  render() {
-    const paginatedRows = this.getPaginatedRows();
-    const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-    // Calculate column width based on minWidth and number of columns
-    //const columnWidth = Math.max(this.minWidth / this.columns.length, 100);
-    // Use the visible column count to calculate the column width
-    const visibleColumnsCount = this.getVisibleColumnsCount();
-    const columnWidth = visibleColumnsCount > 0 ? Math.max(this.minWidth / visibleColumnsCount, 100) : 100;
-    return h("div", {
-      key: 'c5e50673eb1ed5cf00e0294885bf9cd6d13f9366',
-      class: "container",
-      style: {
-        minWidth: `${this.minWidth}px`
-      }
-    }, h("div", {
-      key: '0e0814a8cb5ae1e11538a26cba630e59d39dde74'
-    }, this.searchEnabled && 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: '65e0c9057c313f220655ecd7692a83c932f441b3',
-      class: "mt-20"
-    }, h("table", {
-      key: '9e77153c2e0983f7598a21ef55ebcf3107655e09',
-      class: "block overflow-x-auto mt-6 p-0"
-    }, h("thead", {
-      key: '38e5ac67ffae80d896c29357615d19b5dfcc52d3'
-    }, h("tr", {
-      key: '526c5b30da0a2aa97bb90f5b473b3e9ea41dde6b',
-      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 px-20 py-8 border border-softer f-ui-02",
-        style: {
-          minWidth: `${columnWidth}px`
-        }
-      }, column);
-    }))), h("tbody", {
-      key: '5a10525ed86eac82291746be4c6cce5f65942d2d'
-    }, 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 px-20 py-8 f-ui-2",
-        style: {
-          minWidth: `${columnWidth}px`
-        }
-      }, this.renderCell(row[column], column));
-    })))))), h("div", {
-      key: 'af1183fd3e635c7d7ac982231adfdd9d892f6979',
-      class: "mt-20"
-    }, this.shouldEnablePagination() && h("eds-pagination", {
-      key: 'a5de7f25054c2d67f0788bfd2bc37d07f46de02c',
-      currentPage: this.currentPage,
-      lastPage: lastPage,
-      perPage: this.rowsPerPage,
-      total: this.totalRows,
-      mode: "default"
-    })));
-  }
-  get hostEl() {
-    return getElement(this);
-  }
-  static get watchers() {
-    return {
-      "data": ["handleDataChange"],
-      "config": ["handleConfigChange"]
-    };
-  }
-};
-EdsTable.style = EdsTableStyle0;
-
-export { EdsTable as eds_table };

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

@@ -1,50 +0,0 @@
-import { r as registerInstance, h } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const logoVariationsHorizontalCss = ".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}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.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)}.w-\\[150px\\]{width:150px}.w-\\[300px\\]{width:500px}.coloured{background:linear-gradient(to left, \n  #9CE142 0%, \n  #00C959 50%, \n  #00A595 100%)}";
-const LogoVariationsHorizontalStyle0 = logoVariationsHorizontalCss;
-const LogoVariations = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.orientation = 'horizontal';
-    this.type = undefined;
-  }
-  render() {
-    if (this.type === 'coloured') {
-      return h("div", {
-        class: "container my-16"
-      }, h("div", {
-        class: "coloured w-[300px]"
-      }, h("eds-logo", {
-        type: "no-bg",
-        href: "#"
-      })));
-    }
-    if (this.type === 'black') {
-      return h("div", {
-        class: "container my-16"
-      }, h("div", {
-        class: "bg-default w-[300px]"
-      }, h("eds-logo", {
-        type: "black",
-        href: "#"
-      })));
-    }
-    if (this.type === 'color-white') {
-      return h("div", {
-        class: "container my-16"
-      }, h("div", {
-        class: "w-[300px]"
-      }, h("eds-logo", {
-        type: "color-white",
-        href: "#"
-      })));
-    }
-    return null;
-  }
-};
-LogoVariations.style = LogoVariationsHorizontalStyle0;
-
-export { LogoVariations as logo_variations_horizontal };

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

@@ -1,53 +0,0 @@
-import { r as registerInstance, h } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const logoVariationsVerticalCss = ".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}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.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)}.w-\\[150px\\]{width:150px}.w-\\[200px\\]{width:200px}.w-\\[300px\\]{width:500px}.coloured{background:linear-gradient(to left, \n  #9CE142 0%, \n  #00C959 50%, \n  #00A595 100%)}";
-const LogoVariationsVerticalStyle0 = logoVariationsVerticalCss;
-const LogoVariations = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.orientation = 'horizontal';
-    this.type = undefined;
-  }
-  render() {
-    if (this.type === 'coloured') {
-      return h("div", {
-        class: "container my-16"
-      }, h("div", {
-        class: "coloured w-[200px]"
-      }, h("eds-logo", {
-        orientation: "vertical",
-        type: "no-bg",
-        href: "#"
-      })));
-    }
-    if (this.type === 'black') {
-      return h("div", {
-        class: "container my-16"
-      }, h("div", {
-        class: "bg-default w-[200px]"
-      }, h("eds-logo", {
-        orientation: "vertical",
-        type: "black",
-        href: "#"
-      })));
-    }
-    if (this.type === 'color-white') {
-      return h("div", {
-        class: "container my-16"
-      }, h("div", {
-        class: "w-[200px]"
-      }, h("eds-logo", {
-        orientation: "vertical",
-        type: "color-white",
-        href: "#"
-      })));
-    }
-    return null;
-  }
-};
-LogoVariations.style = LogoVariationsVerticalStyle0;
-
-export { LogoVariations as logo_variations_vertical };