@scania/tegel 0.0.72 → 1.0.0

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

@@ -0,0 +1,308 @@
+// 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";
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the table contents.
+ */
+export class TdsTable {
+  constructor() {
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = undefined;
+    this.multiselect = false;
+    this.expandableRows = false;
+    this.responsive = false;
+    this.modeVariant = null;
+    this.tableId = generateUniqueId();
+  }
+  emitInternalTdsPropChange(changedValueName, changedValue) {
+    this.internalTdsTablePropChange.emit({
+      tableId: this.tableId,
+      changed: [changedValueName],
+      [changedValueName]: changedValue,
+    });
+  }
+  /** Returns all selected rows data. */
+  async getSelectedRows() {
+    let selectedRowsData = [];
+    const tableBody = this.host.querySelector('tds-table-body');
+    const selectedRows = Array.from(tableBody.querySelectorAll('tds-table-body-row')).filter((element) => element.selected);
+    selectedRows.forEach((row) => {
+      let selectedRow = [];
+      const rowCells = Array.from(row.getElementsByTagName('tds-body-cell'));
+      rowCells.forEach((cell) => {
+        var _a;
+        const cellObject = {
+          cellKey: null,
+          cellValue: null,
+        };
+        cellObject.cellKey = cell.cellKey;
+        cellObject.cellValue = (_a = cell.cellValue) !== null && _a !== void 0 ? _a : cell.innerText;
+        selectedRow = [...selectedRow, cellObject];
+      });
+      selectedRowsData = [...selectedRowsData, selectedRow];
+    });
+    return selectedRowsData;
+  }
+  multiselectChanged(newValue) {
+    this.emitInternalTdsPropChange('multiselect', newValue);
+  }
+  enableExpandableRowsChanged(newValue) {
+    this.emitInternalTdsPropChange('expandableRows', 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.responsive,
+        'tds-mode-variant-primary': this.modeVariant === 'primary',
+        'tds-mode-variant-secondary': this.modeVariant === 'secondary',
+      } }, 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.responsive,
+      } }, 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
+      },
+      "multiselect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables multiselect feature of Table"
+        },
+        "attribute": "multiselect",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "expandableRows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables extended row feature of Table"
+        },
+        "attribute": "expandable-rows",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "responsive": {
+        "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": "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.\r\n\r\n**NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,\r\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": "C:/Users/nliglf/Repos/tegel/core/src/components/table/table/table.tsx",
+              "id": "src/components/table/table/table.tsx::InternalTdsTablePropChange"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getSelectedRows": {
+        "complexType": {
+          "signature": "() => Promise<any[]>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<any[]>"
+        },
+        "docs": {
+          "text": "Returns all selected rows data.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "multiselect",
+        "methodName": "multiselectChanged"
+      }, {
+        "propName": "expandableRows",
+        "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,100 @@
+import { h, Host } from "@stencil/core";
+const relevantTableProps = ['multiselect', 'expandableRows'];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For table rows.
+ * @slot no-result - Slot for no result message when using filtering.
+ */
+export class TdsTableBody {
+  constructor() {
+    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.multiselect = false;
+    this.enablePaginationTableBody = false;
+    this.expandableRows = false;
+    this.multiselectArray = [];
+    this.multiselectArrayJSON = undefined;
+    this.mainCheckboxStatus = false;
+    this.columnsNumber = 0;
+    this.tableId = '';
+  }
+  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];
+      });
+    }
+  }
+  // No need to read the value, event is here just to trigger another function
+  bodyCheckboxListener() {
+    this.bodyCheckBoxClicked();
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('tds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+  }
+  componentWillRender() {
+    const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
+    // multiselect and expended features requires one extra column for controls...
+    if (this.multiselect || this.expandableRows) {
+      this.columnsNumber = headerColumnsNo + 1;
+    }
+    else {
+      this.columnsNumber = headerColumnsNo;
+    }
+  }
+  render() {
+    return (h(Host, { "data-selected-rows": this.multiselectArrayJSON }, 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 states() {
+    return {
+      "multiselect": {},
+      "enablePaginationTableBody": {},
+      "expandableRows": {},
+      "multiselectArray": {},
+      "multiselectArrayJSON": {},
+      "mainCheckboxStatus": {},
+      "columnsNumber": {},
+      "tableId": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "internalTdsTablePropChange",
+        "method": "internalTdsPropChangeListener",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "internalTdsRowChange",
+        "method": "bodyCheckboxListener",
+        "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;
+}

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

@@ -0,0 +1,171 @@
+import { h, Host } from "@stencil/core";
+const relevantTableProps = [
+  'verticalDividers',
+  'compactDesign',
+  'noMinWidth',
+];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the cell contents.
+ */
+export class TdsTableBodyCell {
+  constructor() {
+    this.cellValue = undefined;
+    this.cellKey = undefined;
+    this.disablePadding = false;
+    this.textAlignState = undefined;
+    this.activeSorting = false;
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = false;
+    this.whiteBackground = false;
+    this.tableId = '';
+  }
+  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];
+      });
+    }
+  }
+  // Listen to headKey from table-header-element
+  internalTdsHoverListener(event) {
+    const { tableId, key } = event.detail;
+    if (tableId === this.tableId) {
+      this.activeSorting = this.cellKey === key;
+    }
+  }
+  // Listen to internalTdsTextAlign from table-header-element
+  internalTdsTextAlignListener(event) {
+    const [receivedID, receivedKey, receivedTextAlign] = event.detail;
+    if (this.tableId === receivedID) {
+      if (this.cellKey === receivedKey) {
+        this.textAlignState = receivedTextAlign;
+      }
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('tds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+  }
+  render() {
+    return (h(Host, { class: {
+        'tds-table__body-cell': true,
+        'tds-table__body-cell--hover': this.activeSorting,
+        'tds-table__compact': this.compactDesign,
+        'tds-table--divider': this.verticalDividers,
+        'tds-table--no-min-width': this.noMinWidth,
+        'tds-table__body-cell--no-padding': this.disablePadding,
+      }, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", null)));
+  }
+  static get is() { return "tds-body-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table-body-cell.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table-body-cell.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cellValue": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value that will be presented as text inside a cell"
+        },
+        "attribute": "cell-value",
+        "reflect": true
+      },
+      "cellKey": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Passing the same cell key for all body cells which is used in head cell enables features of text align and hovering"
+        },
+        "attribute": "cell-key",
+        "reflect": true
+      },
+      "disablePadding": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables internal padding. Useful when passing other components to cell."
+        },
+        "attribute": "disable-padding",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "textAlignState": {},
+      "activeSorting": {},
+      "verticalDividers": {},
+      "compactDesign": {},
+      "noMinWidth": {},
+      "whiteBackground": {},
+      "tableId": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "internalTdsPropChange",
+        "method": "internalTdsPropChangeListener",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "internalTdsHover",
+        "method": "internalTdsHoverListener",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "internalTdsTextAlign",
+        "method": "internalTdsTextAlignListener",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,54 @@
+:host(.tds-table__row) {
+  box-sizing: border-box;
+  display: table-row;
+  border-bottom: 1px solid var(--tds-table-divider);
+  background-color: var(--tds-table-body-row-background);
+  transition: background-color 200ms ease;
+  color: var(--tds-table-color);
+}
+:host(.tds-table__row) * {
+  box-sizing: border-box;
+}
+:host(.tds-table__row) .tds-table__body-cell--checkbox {
+  min-width: 48px;
+  width: 48px;
+  padding: 0;
+}
+
+:host(.tds-table__row:hover) {
+  background-color: var(--tds-table-body-row-background-hover);
+}
+
+:host(.tds-table__row--selected) {
+  background-color: var(--tds-table-body-row-background-selected);
+}
+
+:host(.tds-table__row--selected:hover) {
+  background-color: var(--tds-table-body-row-background-selected-hover);
+}
+
+:host(.tds-table__row--hidden) {
+  display: none;
+}
+
+:host(.tds-table__row--expended) {
+  width: 100%;
+  background-color: pink;
+}
+
+:host .tds-form-label--table {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+:host(.tds-table__compact) .tds-form-label--table {
+  height: 32px;
+}
+
+:host(.tds-table--divider) .tds-table__body-cell--checkbox {
+  border-right: 1px solid var(--tds-table-divider);
+}