@scania/tegel 0.0.72 → 1.0.1

package/dist/collection/components/table/table-component-sorting.stories.js

@@ -0,0 +1,240 @@
+import { formatHtmlPreview } from "../../utils/utils";
+import tdsTable from "./table/readme.md";
+import tdsTableToolbar from "./table-toolbar/readme.md";
+import tdsHeader from "./table-header/readme.md";
+import tdsHeaderCell from "./table-header-cell/readme.md";
+import tdsTableBody from "./table-body/readme.md";
+import tdsBodyRow from "./table-body-row/readme.md";
+import tdsBodyRowExpandable from "./table-body-row-expandable/readme.md";
+import tdsBodyCell from "./table-body-cell/readme.md";
+import tdsTableFooter from "./table-footer/readme.md";
+import { ComponentsFolder } from "../../utils/constants";
+export default {
+  title: `${ComponentsFolder}/Table`,
+  parameters: {
+    notes: {
+      'tds-table': tdsTable,
+      'tds-table-toolbar': tdsTableToolbar,
+      'tds-header': tdsHeader,
+      'tds-header-cell': tdsHeaderCell,
+      'tds-table-body': tdsTableBody,
+      'tds-body-row': tdsBodyRow,
+      'tds-body-row-expandable': tdsBodyRowExpandable,
+      'tds-body-cell': tdsBodyCell,
+      'tds-table-footer': tdsTableFooter,
+    },
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    compactDesign: {
+      name: 'Compact Design',
+      description: 'Enables compact design of the Table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    responsiveDesign: {
+      name: 'Responsive design',
+      description: 'Enables Table to take 100% of available width. For column values less than 192px, "No minimum width" has to be enabled too.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    column1sortable: {
+      name: 'Column 1 is sortable',
+      description: 'Enables column 1 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    column2sortable: {
+      name: 'Column 2 is sortable',
+      description: 'Enables column 2 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    column3sortable: {
+      name: 'Column 3 is sortable',
+      description: 'Enables column 3 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    column4sortable: {
+      name: 'Column 4 is sortable',
+      description: 'Enables column 4 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between Table columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    column1Width: {
+      name: 'Column 1 width',
+      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column2Width: {
+      name: 'Column 2 width',
+      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column3Width: {
+      name: 'Column 3 width',
+      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column4Width: {
+      name: 'Column 4 width',
+      description: 'Value of width for column 4. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    responsiveDesign: false,
+    column1sortable: true,
+    column2sortable: true,
+    column3sortable: true,
+    column4sortable: true,
+    verticalDivider: false,
+    noMinWidth: false,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+    column4Width: '',
+  },
+};
+const SortingTemplate = ({ modeVariant, compactDesign, responsiveDesign, column1sortable, column2sortable, column3sortable, column4sortable, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+    <tds-table
+      table-id='tds-table-sorting-example'
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      <tds-table-toolbar table-title="Sorting"></tds-table-toolbar>
+          <tds-table-header>
+              <tds-header-cell cell-key='truck' cell-value='Truck type' sortable="${column1sortable}" ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='driver' cell-value='Driver name' sortable="${column2sortable}" ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='country' cell-value='Country' sortable="${column3sortable}" ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='mileage' cell-value='Mileage' sortable="${column4sortable}" text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
+          </tds-table-header>
+          <tds-table-body>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+          </tds-table-body>
+  </tds-table>
+  <!-- Note: Code below is just for demo purposes -->
+  <div class="tds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
+  <p class="tds-u-mt0">Note: This box works only in "Canvas" tab.</p>
+    <h5 class="tds-u-mt0 tds-u-mb0">Event test box</h5>
+    <h6 class="tds-u-mt1 tds-u-mb0">Event name:</h6>
+    <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
+    <h6 class="tds-u-mt0 tds-u-mb0">Events value (aka detail)</h6>
+    <br>
+    <textarea id="event-value-textarea" rows="4" cols="50" readonly></textarea>
+  </div>
+  
+  
+  <script>    
+    
+    
+  window.addEventListener('tdsSort', e => {
+    document.getElementById('event-name-textarea').value = e.type;
+    document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
+  });
+  </script>`);
+export const Sorting = SortingTemplate.bind({});

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

@@ -0,0 +1,113 @@
+:host {
+  box-sizing: border-box;
+  display: table-footer-group;
+  height: 48px;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .tds-table__footer-row {
+  background-color: var(--tds-table-footer-background);
+  color: var(--tds-table-color);
+}
+:host .tds-table__footer-cell {
+  padding: 0 16px;
+}
+:host .tds-table__footer-cell .tds-table__pagination {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector {
+  display: flex;
+  align-items: center;
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input {
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  background-color: var(--tds-table-footer-page-selector-input-background);
+  color: var(--tds-table-color);
+  width: 54px;
+  height: 30px;
+  border: none;
+  border-radius: 4px;
+  transition: background-color 250ms ease;
+  margin-right: 4px;
+  padding-left: 16px;
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover {
+  background-color: var(--tds-table-footer-page-selector-input-background-hover);
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled {
+  color: var(--tds-table-footer-page-selector-input-color-disabled);
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake {
+  animation: tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text {
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: 1px 8px 0 0;
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  height: 32px;
+  width: 32px;
+  border-radius: 4px;
+  transition: background-color 250ms ease;
+  color: var(--tds-table-footer-page-selector-icon);
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover {
+  background-color: var(--tds-table-footer-btn-hover);
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled {
+  cursor: default;
+  color: var(--tds-table-footer-page-selector-icon-disabled);
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover {
+  background-color: transparent;
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg {
+  height: 20px;
+  width: 20px;
+  fill: var(--tds-table-color);
+}
+
+:host(.tds-table--compact) {
+  height: 32px;
+}
+:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination {
+  height: 32px;
+}
+:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input {
+  height: 24px;
+}
+:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn {
+  height: 28px;
+  width: 28px;
+}
+
+@keyframes tds-shake-animation {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}

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

@@ -0,0 +1,219 @@
+import { h, Host, } from "@stencil/core";
+const relevantTableProps = ['compactDesign'];
+function removeShakeAnimation(e) {
+  e.target.classList.remove('tds-table__page-selector-input--shake');
+}
+export class TdsTableFooter {
+  constructor() {
+    this.previousPage = () => {
+      /** If pages and greater or equal to 2, decrease pagination value.
+       * This is to not get under 1 in pagination value.  */
+      if (this.paginationValue >= 2) {
+        this.paginationValue--;
+      }
+      /* Emits pagination event. */
+      this.tdsPagination.emit({
+        tableId: this.tableId,
+        paginationValue: Number(this.paginationValue),
+      });
+      this.storeLastCorrectValue(this.paginationValue);
+    };
+    this.nextPage = () => {
+      /** If pages and greater or equal to the number of pages, increase pagination value.
+       * This is to not get above the number of pages in pagination value.  */
+      if (this.paginationValue <= this.pages) {
+        this.paginationValue++;
+      }
+      this.tdsPagination.emit({
+        tableId: this.tableId,
+        paginationValue: Number(this.paginationValue),
+      });
+      this.storeLastCorrectValue(this.paginationValue);
+    };
+    this.pagination = false;
+    this.paginationValue = 1;
+    this.pages = null;
+    this.cols = null;
+    this.columnsNumber = 0;
+    this.compactDesign = false;
+    this.lastCorrectValue = undefined;
+    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];
+      });
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('tds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+    this.storeLastCorrectValue(this.paginationValue);
+    /** Get the number of columns. */
+    const numberOfColumns = this.host.parentElement.querySelector('tds-table-header').childElementCount;
+    if (this.cols) {
+      this.columnsNumber = this.cols;
+    }
+    else {
+      this.columnsNumber = numberOfColumns;
+    }
+  }
+  /* Function to store last valid input */
+  storeLastCorrectValue(value) {
+    this.lastCorrectValue = value;
+  }
+  paginationInputChange(event) {
+    const insertedValue = Number(event.target.value);
+    if (insertedValue > event.target.max || insertedValue < event.target.min) {
+      event.target.classList.add('tds-table__page-selector-input--shake');
+      this.inputElement.value = String(this.lastCorrectValue);
+      this.paginationValue = Number(this.inputElement.value);
+    }
+    else {
+      this.paginationValue = insertedValue;
+    }
+    this.tdsPagination.emit({
+      tableId: this.tableId,
+      paginationValue: Number(this.paginationValue),
+    });
+    this.storeLastCorrectValue(this.paginationValue);
+  }
+  render() {
+    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("tr", { class: "tds-table__footer-row" }, h("td", { class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { class: "tds-table__pagination" }, h("div", { class: "tds-table__row-selector" }), h("div", { class: "tds-table__page-selector" }, h("input", { ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { class: "tds-table__footer-text" }, "of ", h("span", null, this.pages), " pages"), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { name: "chevron_right", size: "20px" })))))))));
+  }
+  static get is() { return "tds-table-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table-footer.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table-footer.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "pagination": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable pagination and show pagination controls"
+        },
+        "attribute": "pagination",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "paginationValue": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the pagination number."
+        },
+        "attribute": "pagination-value",
+        "reflect": true,
+        "defaultValue": "1"
+      },
+      "pages": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the number of pages."
+        },
+        "attribute": "pages",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "cols": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "<b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails."
+        },
+        "attribute": "cols",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "columnsNumber": {},
+      "compactDesign": {},
+      "lastCorrectValue": {},
+      "tableId": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsPagination",
+        "name": "tdsPagination",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event to send current page value to tds-table-body component, can also be listened to in order to implement custom pagination logic."
+        },
+        "complexType": {
+          "original": "{\n    tableId: string;\n    paginationValue: number;\n  }",
+          "resolved": "{ tableId: string; paginationValue: number; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "internalTdsTablePropChange",
+        "method": "internalTdsPropChangeListener",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,69 @@
+:host {
+  box-sizing: border-box;
+  display: table-header-group;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .tds-table__header-cell--checkbox {
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  display: table-cell;
+  text-align: left;
+  color: var(--tds-table-color);
+  background-color: var(--tds-table-header-background);
+  border-bottom: 1px solid var(--tds-table-divider);
+  height: 48px;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: background-color 200ms ease;
+  min-width: unset;
+  width: 48px;
+  padding: 0;
+  border-top-left-radius: 4px;
+}
+:host .tds-form-label--table {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+:host .tds-table__expand-control-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 48px;
+  cursor: pointer;
+}
+:host .tds-table__expand-control-container .tds-table__expand-input {
+  display: none;
+}
+:host .tds-table__expand-control-container .tds-expandable-row-icon {
+  height: 20px;
+  width: 20px;
+  transition: transform 200ms ease;
+  transform: rotate(0);
+}
+:host .tds-table__expand-control-container .tds-expandable-row-icon--opened {
+  transform: rotate(180deg);
+}
+:host ::slotted(tds-header-cell:hover) {
+  background-color: var(--tds-table-header-background-hover);
+}
+
+:host(.tds-table--compact) .tds-table__header-cell--checkbox {
+  height: 32px;
+}
+:host(.tds-table--compact) .tds-form-label--table {
+  height: 32px;
+}
+
+:host(.tds-table--divider) .tds-table__header-cell--checkbox {
+  border-right: 1px solid var(--tds-table-divider);
+}
+
+:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox {
+  border-top-left-radius: 0;
+}