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

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