@six-group/ui-library 3.0.0-beta.1.7

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

@@ -0,0 +1,209 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,33 @@
+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

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

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,13 @@
+: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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,17 @@
+: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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,37 @@
+: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;
+}

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

@@ -0,0 +1,174 @@
+import { Component, Event, h, Host, Prop } from '@stencil/core';
+import { SortDirection } from './types';
+import { getNextFilterState, getNextSortState } from './util/get-next-state';
+import { createFilterModel, createSortModel } from './util/create-model';
+import { FilterIcon, SortIcon } from './icons';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the label of the header field.
+ */
+export class SixTableHeaderCell {
+  constructor() {
+    this.handleSortNext = () => {
+      this.sortUpdated.emit(createSortModel(this.name, getNextSortState(this.sort)));
+    };
+    this.handleFilterNext = () => {
+      this.filterUpdated.emit(createFilterModel(this.name, getNextFilterState(this.filter), this.inputElement.value));
+    };
+    this.handleFilterChange = () => {
+      this.filterUpdated.emit(createFilterModel(this.name, this.filter, this.inputElement.value));
+    };
+    this.handleFilterClear = () => {
+      this.filterUpdated.emit(createFilterModel(this.name, this.filter, undefined));
+      this.filterRef.hide();
+    };
+  }
+  render() {
+    const sort = this.sort && (h("six-icon", { filled: true, class: { 'header__trigger-icon': this.sort === SortDirection.None }, onClick: this.handleSortNext, "data-testid": `table-sort-${this.name}` }, SortIcon[this.sort]));
+    const filter = this.filter && (h("six-dropdown", { ref: (el) => (this.filterRef = el), hoist: true, "data-testid": `table-filter-${this.name}` },
+      h("six-icon", { slot: "trigger", class: "header__trigger-icon" }, "filter_alt"),
+      h("six-input", { ref: (el) => (this.inputElement = el), value: this.value, "onSix-input-input": this.handleFilterChange },
+        h("six-icon-button", { slot: "prefix", html: FilterIcon[this.filter], onClick: this.handleFilterNext, "data-testid": `table-filter-prefix-${this.name}` }),
+        h("six-icon-button", { slot: "suffix", name: "clear", label: "Clear", onClick: this.handleFilterClear, "data-testid": `table-filter-suffix-${this.name}` }))));
+    return (h(Host, null,
+      h("div", { class: { header: true, 'header--selected': this.value !== undefined } },
+        h("slot", null),
+        h("div", { class: "header__trigger-icon-box" },
+          sort,
+          filter))));
+  }
+  static get is() { return "six-table-header-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-table-header-cell.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-table-header-cell.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "keyof Item",
+        "resolved": "string",
+        "references": {
+          "Item": {
+            "location": "import",
+            "path": "../six-table/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Table row property name. Used in the custom events to identify the row."
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "sort": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SortDirection",
+        "resolved": "SortDirection.Asc | SortDirection.Desc | SortDirection.None",
+        "references": {
+          "SortDirection": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sort direction. Applied only when set."
+      },
+      "attribute": "sort",
+      "reflect": false
+    },
+    "filter": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FilterMode",
+        "resolved": "FilterMode.Equals | FilterMode.Includes | FilterMode.NotEquals | FilterMode.NotIncludes",
+        "references": {
+          "FilterMode": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Filter mode. Applied only when set."
+      },
+      "attribute": "filter",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Filter value. Applied only when filter mode is set."
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "sortUpdated",
+      "name": "six-table-header-cell-sort-updated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when sort model is updated."
+      },
+      "complexType": {
+        "original": "SixTableHeaderCellSortUpdatedPayload",
+        "resolved": "{ [x: string]: SortDirection; }",
+        "references": {
+          "SixTableHeaderCellSortUpdatedPayload": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "filterUpdated",
+      "name": "six-table-header-cell-filter-updated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when filter model is updated."
+      },
+      "complexType": {
+        "original": "SixTableHeaderCellFilterUpdatedPayload",
+        "resolved": "{ [x: string]: BasedOnKeys<FilterMode, string>; }",
+        "references": {
+          "SixTableHeaderCellFilterUpdatedPayload": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+}

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

@@ -0,0 +1,13 @@
+export var SortDirection;
+(function (SortDirection) {
+  SortDirection["None"] = "none";
+  SortDirection["Asc"] = "asc";
+  SortDirection["Desc"] = "desc";
+})(SortDirection || (SortDirection = {}));
+export var FilterMode;
+(function (FilterMode) {
+  FilterMode["Equals"] = "eq";
+  FilterMode["NotEquals"] = "ne";
+  FilterMode["Includes"] = "in";
+  FilterMode["NotIncludes"] = "ni";
+})(FilterMode || (FilterMode = {}));

package/dist/collection/components/six-table-header-cell/util/create-model.js

@@ -0,0 +1,6 @@
+export const createSortModel = (key, value) => {
+  return { [key]: value };
+};
+export const createFilterModel = (key, filter, value) => {
+  return { [key]: { [filter]: value } };
+};