@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.1

package/dist/collection/components/six-table/six-table.css

@@ -1,44 +0,0 @@
-:host {
-  position: relative;
-  box-sizing: border-box;
-}
-:host *, :host *:before, :host *:after {
-  box-sizing: inherit;
-}
-
-:host {
-  display: table;
-  border-collapse: collapse;
-  user-select: none;
-  border: none;
-  width: 100%;
-  height: 100%;
-}
-
-:host([loading]) {
-  border-collapse: separate;
-}
-
-:host([striped]) six-table-row:nth-child(odd):not(:hover),
-:host([striped]) ::slotted(six-table-row:nth-child(odd):not(:hover)) {
-  background-color: var(--six-table-row-background-color);
-}
-
-:host(:not(striped)) ::slotted(six-table-row) {
-  border-bottom: solid 1px var(--six-table-row-border-color);
-}
-
-.loading {
-  position: absolute;
-  background-color: var(--six-table-background-color);
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.loading six-spinner {
-  top: calc(50% - 0.5em);
-  left: 50%;
-  transform: scale(3);
-}

package/dist/collection/components/six-table/six-table.js

@@ -1,209 +0,0 @@
-import { Component, Host, h, Prop, Event, State, Listen, Method, Element } from '@stencil/core';
-import { isData } from './types';
-import { fromData } from './util/from-data';
-/**
- * @since 1.0
- * @status stable
- *
- * @slot - Used to define header and the rows of the table.
- * @Deprecated - six-table will be removed with the next table. Use fate table instead.
- */
-export class SixTable {
-  constructor() {
-    /** Set to true to stripe the table. */
-    this.striped = false;
-    /** Set to true to display loading indicator. */
-    this.loading = false;
-    this.data = {
-      columns: {},
-      rows: [],
-    };
-    this.handleRowClick = (item) => (event) => {
-      this.tableRowClicked.emit({ event, item });
-    };
-    this.handleCellClick = (item, key) => (event) => {
-      this.tableCellClicked.emit({ event, item, key });
-    };
-    console.warn('six-table will be removed with the next table. Use fate table instead. In case of any question contact Daniel Häusler');
-  }
-  handleData({ detail }) {
-    if (!isData(detail)) {
-      return;
-    }
-    this.data = detail;
-  }
-  async setData(value) {
-    if (!isData(value)) {
-      return;
-    }
-    this.data = value;
-  }
-  componentDidLoad() {
-    this.tableReady.emit();
-  }
-  render() {
-    const loading = this.loading && (h("div", { class: "loading" },
-      h("six-spinner", { "data-testid": "loading-spinner" })));
-    return (h(Host, null,
-      h("slot", null, fromData(this)),
-      loading));
-  }
-  static get is() { return "six-table"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-table.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-table.css"]
-  }; }
-  static get properties() { return {
-    "striped": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to stripe the table."
-      },
-      "attribute": "striped",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to display loading indicator."
-      },
-      "attribute": "loading",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "data": {}
-  }; }
-  static get events() { return [{
-      "method": "tableReady",
-      "name": "six-table-ready",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when table is ready."
-      },
-      "complexType": {
-        "original": "TableReadyPayload",
-        "resolved": "TableReadyPayload",
-        "references": {
-          "TableReadyPayload": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      }
-    }, {
-      "method": "tableRowClicked",
-      "name": "six-table-row-clicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when table row is clicked."
-      },
-      "complexType": {
-        "original": "TableRowClickedPayload<Item>",
-        "resolved": "TableRowClickedPayload<Item>",
-        "references": {
-          "TableRowClickedPayload": {
-            "location": "import",
-            "path": "./types"
-          },
-          "Item": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      }
-    }, {
-      "method": "tableCellClicked",
-      "name": "six-table-cell-clicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when table cell is clicked."
-      },
-      "complexType": {
-        "original": "TableCellClickedPayload<Item>",
-        "resolved": "TableCellClickedPayload<Item>",
-        "references": {
-          "TableCellClickedPayload": {
-            "location": "import",
-            "path": "./types"
-          },
-          "Item": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "setData": {
-      "complexType": {
-        "signature": "<T extends Item>(value: Data<T>) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "Item": {
-            "location": "import",
-            "path": "./types"
-          },
-          "Data": {
-            "location": "import",
-            "path": "./types"
-          },
-          "T": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "data",
-      "method": "handleData",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}

package/dist/collection/components/six-table/test/helpers.js

@@ -1,13 +0,0 @@
-export const getTableRows = async (page) => {
-  const json = await page.evaluate(() => {
-    const rows = [
-      // when constructed from data
-      ...Array.from(document.querySelector('six-table').shadowRoot.querySelectorAll('six-table-row')),
-      // when constructed from a template
-      ...Array.from(document.querySelector('six-table').querySelectorAll('six-table-row')),
-    ];
-    const data = rows.map((row) => Array.from(row.querySelectorAll('six-table-cell')).map((cell) => cell.textContent));
-    return JSON.stringify(data);
-  });
-  return JSON.parse(json);
-};

package/dist/collection/components/six-table/types.js

@@ -1,8 +0,0 @@
-const assertions = [
-  (value) => typeof value === 'object',
-  (value) => typeof value.columns === 'object',
-  (value) => Array.isArray(value.rows),
-  (value) => value.sort === undefined || typeof value.sort === 'object',
-];
-const apply = (value) => (f) => f(value);
-export const isData = (value) => assertions.every(apply(value));

package/dist/collection/components/six-table/util/filter-by.js

@@ -1,34 +0,0 @@
-import { FilterMode } from '../../six-table-header-cell/types';
-import { Invalid } from './is';
-const modes = {
-  [FilterMode.Includes]: (a, b) => a.includes(b),
-  [FilterMode.NotIncludes]: (a, b) => !a.includes(b),
-  [FilterMode.Equals]: (a, b) => a === b,
-  [FilterMode.NotEquals]: (a, b) => a !== b,
-};
-export const filterBy = (filterModel = {}) => (item) => {
-  var _a;
-  const keys = Object.keys(filterModel);
-  if (keys.length === 0) {
-    return true;
-  }
-  for (const key of keys) {
-    const filter = filterModel[key];
-    if (!filter) {
-      return true;
-    }
-    for (const [mode, term] of Object.entries(filter)) {
-      if (Invalid.Term(term)) {
-        continue;
-      }
-      const value = String((_a = item[key]) !== null && _a !== void 0 ? _a : '');
-      if (Invalid.Term(value)) {
-        continue;
-      }
-      if (!modes[mode](value, term)) {
-        return false;
-      }
-    }
-  }
-  return true;
-};

package/dist/collection/components/six-table/util/from-data.js

@@ -1,33 +0,0 @@
-import { isData } from '../types';
-import { filterBy } from './filter-by';
-import { Fragment, h } from '@stencil/core';
-import { sortBy } from './sort-by';
-import { quickFilterBy } from './quick-filter-by';
-const propOr = (k) => (o = {}, defaults) => o[k] || defaults;
-export const fromData = ({ data, handleRowClick, handleCellClick }) => {
-  if (!isData(data)) {
-    return;
-  }
-  const keys = Object.keys(data.columns);
-  const columns = keys.map((key) => {
-    const byKey = propOr(key);
-    const sort = byKey(data.sort, undefined);
-    const [[filter, value] = []] = Object.entries(byKey(data.filter, {}));
-    return (h("six-table-header-cell", { name: key, sort: sort, filter: filter, value: value }, data.columns[key]));
-  });
-  const quickFilter = quickFilterBy(Object.keys(data.columns), data.quickFilter);
-  const filter = filterBy(data.filter);
-  const sort = sortBy(data.sort, data.compare);
-  const rows = sort(data.rows.filter(quickFilter).filter(filter)).map((item, index) => {
-    const cells = keys.map((key) => {
-      const renderer = data.render && data.render[key];
-      // HTML is not escaped, responsibility lays on the caller
-      const html = typeof renderer === 'function' ? renderer(item) : String(item[key]);
-      return (h("six-table-cell", { onClick: handleCellClick(item, key), "data-testid": `table-cell-${key}-${index}`, innerHTML: html }));
-    });
-    return (h("six-table-row", { onClick: handleRowClick(item), "data-testid": `table-row-${index}` }, cells));
-  });
-  return (h(Fragment, null,
-    h("six-table-header", { "data-testid": "table-header" }, columns),
-    rows));
-};

package/dist/collection/components/six-table/util/is.js

@@ -1,3 +0,0 @@
-export const Invalid = {
-  Term: (value) => typeof value !== 'string' || value.length < 1,
-};

package/dist/collection/components/six-table/util/quick-filter-by.js

@@ -1,13 +0,0 @@
-import { Invalid } from './is';
-export const quickFilterBy = (keys, value) => (item) => {
-  if (Invalid.Term(value)) {
-    return true;
-  }
-  const term = value.toLowerCase();
-  const source = keys
-    .map((key) => { var _a; return (_a = item[key]) !== null && _a !== void 0 ? _a : ''; })
-    .map(String)
-    .join()
-    .toLowerCase();
-  return source.includes(term);
-};

package/dist/collection/components/six-table/util/sort-by.js

@@ -1,25 +0,0 @@
-import { SortDirection } from '../../six-table-header-cell/types';
-const unordered = (value) => value === SortDirection.None;
-const DEFAULT_COMPARATOR = (a, b) => String(a).localeCompare(String(b));
-export const sortBy = (sort = {}, compare = {}) => (items) => {
-  const values = Object.values(sort);
-  if (values.length === 0 || values.every(unordered)) {
-    return items;
-  }
-  return [...items].sort((a, b) => {
-    return Object.entries(sort).reduce((acc, [k, v], index) => {
-      if (v === SortDirection.None) {
-        return acc;
-      }
-      const comparator = compare[k];
-      const direction = {
-        [SortDirection.Asc]: +1,
-        [SortDirection.Desc]: -1,
-      }[v];
-      if (comparator) {
-        return acc + direction * (comparator(a, b) << index);
-      }
-      return acc + direction * (DEFAULT_COMPARATOR(a[k], b[k]) << index);
-    }, 0);
-  });
-};

package/dist/collection/components/six-table-cell/six-table-cell.css

@@ -1,13 +0,0 @@
-:host {
-  position: relative;
-  box-sizing: border-box;
-}
-:host *, :host *:before, :host *:after {
-  box-sizing: inherit;
-}
-
-:host {
-  display: table-cell;
-  padding: var(--six-spacing-medium);
-  font-size: var(--six-font-size-small);
-}

package/dist/collection/components/six-table-cell/six-table-cell.js

@@ -1,21 +0,0 @@
-import { Component, h, Host } from '@stencil/core';
-/**
- * @since 1.0
- * @status stable
- *
- * @slot - Used to define the content of the cell.
- */
-export class SixTableCell {
-  render() {
-    return (h(Host, null,
-      h("slot", null)));
-  }
-  static get is() { return "six-table-cell"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-table-cell.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-table-cell.css"]
-  }; }
-}

package/dist/collection/components/six-table-header/six-table-header.css

@@ -1,17 +0,0 @@
-:host {
-  position: relative;
-  box-sizing: border-box;
-}
-:host *, :host *:before, :host *:after {
-  box-sizing: inherit;
-}
-
-:host {
-  display: table-header-group;
-  cursor: pointer;
-  font-family: var(--six-font-family);
-  font-weight: var(--six-font-weight-bold);
-  color: var(--six-table-header-color);
-  border-bottom: solid 2px var(--six-table-header-border-color);
-  padding: 0.75rem;
-}

package/dist/collection/components/six-table-header/six-table-header.js

@@ -1,21 +0,0 @@
-import { Component, Host, h } from '@stencil/core';
-/**
- * @since 1.0
- * @status stable
- *
- * @slot - Used to define the cells of the header.
- */
-export class SixTableHeader {
-  render() {
-    return (h(Host, null,
-      h("slot", null)));
-  }
-  static get is() { return "six-table-header"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-table-header.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-table-header.css"]
-  }; }
-}

package/dist/collection/components/six-table-header-cell/get-next-state.js

@@ -1,7 +0,0 @@
-import { SortDirection, FilterMode } from './types';
-const getNextState = (states) => (current) => {
-  const next = states.indexOf(current) + 1;
-  return states[next < states.length ? next : 0];
-};
-export const getNextSortState = getNextState(Object.values(SortDirection));
-export const getNextFilterState = getNextState(Object.values(FilterMode));

package/dist/collection/components/six-table-header-cell/icons.js

@@ -1,12 +0,0 @@
-import { SortDirection, FilterMode } from './types';
-export const SortIcon = {
-  [SortDirection.Asc]: 'arrow_drop_up',
-  [SortDirection.Desc]: 'arrow_drop_down',
-  [SortDirection.None]: 'swap_vert',
-};
-export const FilterIcon = {
-  [FilterMode.Equals]: '=',
-  [FilterMode.NotEquals]: '≠',
-  [FilterMode.Includes]: '∈',
-  [FilterMode.NotIncludes]: '∉',
-};

package/dist/collection/components/six-table-header-cell/six-table-header-cell.css

@@ -1,37 +0,0 @@
-:host {
-  position: relative;
-  box-sizing: border-box;
-}
-:host *, :host *:before, :host *:after {
-  box-sizing: inherit;
-}
-
-:host {
-  display: table-cell;
-  padding: var(--six-spacing-medium) var(--six-spacing-medium) var(--six-spacing-x-small);
-  font-size: var(--six-font-size-small);
-}
-
-six-icon {
-  vertical-align: text-top;
-  width: 1.5rem;
-}
-
-.header:hover .header__trigger-icon, .header--selected .header__trigger-icon {
-  opacity: 1;
-}
-.header__trigger-icon {
-  color: var(--six-color-web-rock-600);
-  opacity: 0;
-}
-.header__trigger-icon-box {
-  float: right;
-}
-
-[slot=prefix] {
-  font-size: 1.5em;
-}
-
-six-dropdown::part(panel) {
-  overflow: inherit;
-}