@scania/tegel 0.0.8 → 0.0.10

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

@@ -0,0 +1,257 @@
+// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js
+// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641
+import { h, Host } from '@stencil/core';
+import { generateUniqueId } from '../../../utils/utils';
+export class TdsTable {
+  constructor() {
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = undefined;
+    this.enableMultiselect = false;
+    this.enableExpandableRows = false;
+    this.enableResponsive = false;
+    this.modeVariant = null;
+    this.tableId = generateUniqueId();
+  }
+  emitInternalTdsPropChange(changedValueName, changedValue) {
+    this.internalTdsTablePropChange.emit({
+      tableId: this.tableId,
+      changed: [changedValueName],
+      [changedValueName]: changedValue,
+    });
+  }
+  enableMultiselectChanged(newValue) {
+    this.emitInternalTdsPropChange('enableMultiselect', newValue);
+  }
+  enableExpandableRowsChanged(newValue) {
+    this.emitInternalTdsPropChange('enableExpandableRows', newValue);
+  }
+  compactDesignChanged(newValue) {
+    this.emitInternalTdsPropChange('compactDesign', newValue);
+  }
+  verticalDividersChanged(newValue) {
+    this.emitInternalTdsPropChange('verticalDividers', newValue);
+  }
+  noMinWidthChanged(newValue) {
+    this.emitInternalTdsPropChange('noMinWidth', newValue);
+  }
+  modeVariantChanged(newValue) {
+    this.emitInternalTdsPropChange('modeVariant', newValue);
+  }
+  render() {
+    return (h(Host, { class: { 'tds-table--responsive': this.enableResponsive } }, h("table", { class: {
+        'tds-table': true,
+        'tds-table--compact': this.compactDesign,
+        'tds-table--divider': this.verticalDividers,
+        'tds-table--no-min-width': this.noMinWidth,
+        'tds-table--responsive': this.enableResponsive,
+      } }, h("slot", null))));
+  }
+  static get is() { return "tds-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "verticalDividers": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables style with vertical dividers between columns"
+        },
+        "attribute": "vertical-dividers",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "compactDesign": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables style where Table toolbar, rows and footer are less high"
+        },
+        "attribute": "compact-design",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "noMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables to customize width on Table columns"
+        },
+        "attribute": "no-min-width",
+        "reflect": true
+      },
+      "enableMultiselect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables multiselect feature of Table"
+        },
+        "attribute": "enable-multiselect",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "enableExpandableRows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables extended row feature of Table"
+        },
+        "attribute": "enable-expandable-rows",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "enableResponsive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables Table to take 100% available width with equal spacing of columns"
+        },
+        "attribute": "enable-responsive",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the component, based on current mode."
+        },
+        "attribute": "mode-variant",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "tableId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID used for internal Table functionality and events, must be unique.\n\n**NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,\nas the default ID is random and will be different every time."
+        },
+        "attribute": "table-id",
+        "reflect": false,
+        "defaultValue": "generateUniqueId()"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "internalTdsTablePropChange",
+        "name": "internalTdsTablePropChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Broadcasts changes to the Table props"
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "InternalTdsTablePropChange",
+          "resolved": "{ tableId: string; changed: (keyof Props)[]; } & Partial<Props>",
+          "references": {
+            "InternalTdsTablePropChange": {
+              "location": "local",
+              "path": "/Users/johnny/dev/scania/tegel/core/src/components/table/table/table.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "enableMultiselect",
+        "methodName": "enableMultiselectChanged"
+      }, {
+        "propName": "enableExpandableRows",
+        "methodName": "enableExpandableRowsChanged"
+      }, {
+        "propName": "compactDesign",
+        "methodName": "compactDesignChanged"
+      }, {
+        "propName": "verticalDividers",
+        "methodName": "verticalDividersChanged"
+      }, {
+        "propName": "noMinWidth",
+        "methodName": "noMinWidthChanged"
+      }, {
+        "propName": "modeVariant",
+        "methodName": "modeVariantChanged"
+      }];
+  }
+}

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

@@ -0,0 +1,22 @@
+:host,
+tds-table-body {
+  box-sizing: border-box;
+  display: table-row-group;
+}
+:host *,
+tds-table-body * {
+  box-sizing: border-box;
+}
+:host .tds-table__info-message,
+tds-table-body .tds-table__info-message {
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  display: table-cell;
+  box-sizing: border-box;
+  color: var(--tds-table-color);
+  padding: var(--tds-spacing-element-16);
+  min-width: 192px;
+  vertical-align: top;
+  background-color: transparent;
+  transition: background-color 200ms ease;
+}

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

@@ -0,0 +1,370 @@
+import { h, Host, } from '@stencil/core';
+const relevantTableProps = [
+  'enableMultiselect',
+  'enableExpandableRows',
+];
+/**
+ * @slot <default> - Default slot for the Table Body, used by <tds-table-body-row>
+ * @slot no-result - Slot for no result message when using filtering.
+*/
+export class TdsTableBody {
+  constructor() {
+    this.uncheckAll = () => {
+      this.mainCheckboxStatus = false;
+      this.internalTdsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);
+      this.internalTdsCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);
+    };
+    this.selectedDataExporter = () => {
+      const selectedRows = this.host.getElementsByClassName('tds-table__row--selected');
+      this.multiselectArray = [];
+      for (let j = 0; j < selectedRows.length; j++) {
+        const rowCells = selectedRows[j].getElementsByTagName('tds-body-cell');
+        const selectedObject = {};
+        for (let i = 0; i < rowCells.length; i++) {
+          const currentCellKey = rowCells[i].getAttribute('cell-key');
+          const currentCellValue = rowCells[i].getAttribute('cell-value');
+          selectedObject[currentCellKey] = currentCellValue;
+        }
+        this.multiselectArray.push(selectedObject);
+      }
+      this.multiselectArrayJSON = JSON.stringify(this.multiselectArray);
+    };
+    this.bodyCheckBoxClicked = () => {
+      const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
+      const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
+      this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
+      this.internalTdsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);
+      this.selectedDataExporter();
+    };
+    this.bodyData = undefined;
+    this.noResultMessage = undefined;
+    this.rowsPerPage = 1;
+    this.enableMultiselect = false;
+    this.enablePaginationTableBody = false;
+    this.enableExpandableRows = true;
+    this.innerBodyData = [];
+    this.bodyDataManipulated = [];
+    this.bodyDataOriginal = [];
+    this.multiselectArray = [];
+    this.multiselectArrayJSON = undefined;
+    this.mainCheckboxStatus = false;
+    this.columnsNumber = 0;
+    this.disableAllSorting = false;
+    this.numberOfPages = 0;
+    this.paginationValue = 1;
+    this.tempPaginationDisable = false;
+    this.showNoResultsMessage = false;
+    this.tableId = '';
+  }
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this.innerBodyData = JSON.parse(newValue);
+    }
+    else {
+      this.innerBodyData = newValue;
+    }
+    this.bodyDataManipulated = [...this.innerBodyData];
+    this.bodyDataOriginal = [...this.innerBodyData];
+  }
+  internalTdsPropChangeListener(event) {
+    if (this.tableId === event.detail.tableId) {
+      event.detail.changed
+        .filter((changedProp) => relevantTableProps.includes(changedProp))
+        .forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
+  }
+  static compareValues(key, order = 'asc') {
+    return function innerSort(a, b) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
+        // property doesn't exist on either object
+        return 0;
+      }
+      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];
+      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];
+      let comparison = 0;
+      if (varA > varB) {
+        comparison = 1;
+      }
+      else if (varA < varB) {
+        comparison = -1;
+      }
+      return order === 'desc' ? comparison * -1 : comparison;
+    };
+  }
+  sortData(keyValue, sortingDirection) {
+    if (this.enableMultiselect) {
+      // Uncheck all checkboxes as the state of checkbox is lost on sorting. Do it only in case multiSelect is True.
+      this.uncheckAll();
+    }
+    // use spread operator to make enable a sorting and modifying array, same as using .slice()
+    this.bodyDataManipulated = [...this.bodyDataManipulated];
+    this.bodyDataManipulated.sort(TdsTableBody.compareValues(keyValue, sortingDirection));
+  }
+  // Listen to sortColumnData from table-header-element - TODO
+  updateOptionsContent(event) {
+    const { tableId, columnKey, sortingDirection } = event.detail;
+    if (this.tableId === tableId) {
+      this.sortData(columnKey, sortingDirection);
+    }
+  }
+  headCheckboxListener(event) {
+    if (this.tableId === event.detail[0]) {
+      [, this.mainCheckboxStatus] = event.detail;
+      this.selectedDataExporter();
+    }
+  }
+  // No need to read the value, event is here just to trigger another function
+  bodyCheckboxListener() {
+    this.bodyCheckBoxClicked();
+  }
+  searchFunction(searchTerm) {
+    // grab all rows in body
+    const dataRowsFiltering = this.host.querySelectorAll('tds-table-body-row');
+    if (searchTerm.length > 0) {
+      if (this.enablePaginationTableBody) {
+        this.tempPaginationDisable = true;
+      }
+      dataRowsFiltering.forEach((item) => {
+        const cells = item.querySelectorAll('tds-body-cell');
+        const cellValuesArray = [];
+        // go through cells and save cell-values in an array
+        cells.forEach((cellItem) => {
+          const cellValue = cellItem.getAttribute('cell-value').toLowerCase();
+          cellValuesArray.push(cellValue);
+        });
+        // iterate over an array of values and see if one matches search string
+        const matchCounter = cellValuesArray.find((element) => element.includes(searchTerm));
+        // if matches, show parent row, otherwise hide the row
+        if (matchCounter) {
+          item.classList.remove('tds-table__row--hidden');
+        }
+        else {
+          item.classList.add('tds-table__row--hidden');
+        }
+      });
+      this.disableAllSorting = true;
+      this.internalTdsSortingChange.emit([this.tableId, this.disableAllSorting]);
+      const dataRowsHidden = this.host.querySelectorAll('.tds-table__row--hidden');
+      // If same, an info message will be shown
+      this.showNoResultsMessage = dataRowsHidden.length === dataRowsFiltering.length;
+    }
+    else {
+      if (this.enablePaginationTableBody) {
+        this.tempPaginationDisable = false;
+      }
+      // If pagination is NOT enabled, we show all rows.
+      if (!this.enablePaginationTableBody) {
+        dataRowsFiltering.forEach((item) => {
+          item.classList.remove('tds-table__row--hidden');
+        });
+      }
+      this.showNoResultsMessage = false;
+      this.disableAllSorting = false;
+      this.internalTdsSortingChange.emit([this.tableId, this.disableAllSorting]);
+    }
+  }
+  /** Listens to internalTdsFilter from tableToolbar component */
+  tdsFilterListener(event) {
+    if (this.tableId === event.detail.tableId) {
+      this.searchFunction(event.detail.query);
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('tds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+    if (this.bodyData) {
+      this.arrayDataWatcher(this.bodyData);
+    }
+  }
+  componentWillRender() {
+    const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
+    // multiselect and expended features requires one extra column for controls...
+    if (this.enableMultiselect || this.enableExpandableRows) {
+      this.columnsNumber = headerColumnsNo + 1;
+    }
+    else {
+      this.columnsNumber = headerColumnsNo;
+    }
+  }
+  render() {
+    return (h(Host, { "data-selected-rows": this.multiselectArrayJSON }, this.bodyDataManipulated.map((row) => (h("tds-table-body-row", null, Object.keys(row).map((cellData) => (h("tds-body-cell", { "cell-key": cellData, "cell-value": row[cellData] })))))), h("tr", { hidden: !this.showNoResultsMessage }, h("td", { class: "tds-table__info-message", colSpan: this.columnsNumber }, h("slot", { name: "no-result" }), this.noResultMessage)), h("slot", null)));
+  }
+  static get is() { return "tds-table-body"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table-body.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table-body.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "bodyData": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prop to pass JSON string which enables automatic rendering of Table rows and cells"
+        },
+        "attribute": "body-data",
+        "reflect": false
+      },
+      "noResultMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prop for no result message when using filtering"
+        },
+        "attribute": "no-result-message",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "rowsPerPage": {},
+      "enableMultiselect": {},
+      "enablePaginationTableBody": {},
+      "enableExpandableRows": {},
+      "innerBodyData": {},
+      "bodyDataManipulated": {},
+      "bodyDataOriginal": {},
+      "multiselectArray": {},
+      "multiselectArrayJSON": {},
+      "mainCheckboxStatus": {},
+      "columnsNumber": {},
+      "disableAllSorting": {},
+      "numberOfPages": {},
+      "paginationValue": {},
+      "tempPaginationDisable": {},
+      "showNoResultsMessage": {},
+      "tableId": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "internalTdsSortingChange",
+        "name": "internalTdsSortingChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Event that sends unique Table identifier and enable/disable status for sorting functionality"
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "internalTdsCheckboxChange",
+        "name": "internalTdsCheckboxChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Sends unique Table identifier and mainCheckbox status to all rows when multiselect feature is enabled"
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "internalTdsMainCheckboxChange",
+        "name": "internalTdsMainCheckboxChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Sends unique Table identifier and status\nif mainCheckbox should change its state based on selection status of single rows\nwhen multiselect feature is used"
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "bodyData",
+        "methodName": "arrayDataWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "internalTdsTablePropChange",
+        "method": "internalTdsPropChangeListener",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "internalTdsSortChange",
+        "method": "updateOptionsContent",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "internalTdsMainCheckboxChange",
+        "method": "headCheckboxListener",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "internalTdsRowChange",
+        "method": "bodyCheckboxListener",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "internalTdsFilter",
+        "method": "tdsFilterListener",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,40 @@
+:host(.tds-table__body-cell) {
+  box-sizing: border-box;
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  display: table-cell;
+  box-sizing: border-box;
+  color: var(--tds-table-color);
+  padding: var(--tds-spacing-element-16);
+  min-width: 192px;
+  vertical-align: top;
+  background-color: transparent;
+  transition: background-color 200ms ease;
+}
+:host(.tds-table__body-cell) * {
+  box-sizing: border-box;
+}
+
+:host(.tds-table__body-cell--no-padding) {
+  padding: 0;
+}
+
+:host(.tds-table__body-cell--hover) {
+  background-color: var(--tds-table-body-cell-background-hover);
+}
+
+:host(.tds-table__compact) {
+  padding: var(--tds-spacing-element-8) var(--tds-spacing-element-16);
+}
+
+:host(.tds-table--divider) {
+  border-right: 1px solid var(--tds-table-divider);
+}
+
+:host(.tds-table--divider:last-of-type) {
+  border-right: none;
+}
+
+:host(.tds-table--no-min-width) {
+  min-width: unset;
+}