@otto-de/b2b-core-components 1.9.0-beta.1 → 1.9.0

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -228,6 +230,10 @@
   transform: rotate(90deg);
   transition: transform 0.2s ease-in-out;
 }
+:host(.b2b-table-row--colspan) {
+  flex-flow: row nowrap;
+  display: flex;
+}
 :host(.b2b-table-row--color-default) {
   background-color: inherit;
 }
@@ -258,9 +264,11 @@
 :host(.b2b-table-row--color-group:hover) ::slotted(*) {
   --b2b-table-cell-text-expand-bg: var(--b2b-color-table-expand-hover);
 }
-.b2b-table-header__control-cell {
-  /* For equal width the control cell will automatically grow.
-  We should fix the size and this size
-   */
-  max-width: 44px;
+.b2b-table-row__control-cell--checkbox {
+  flex: 0 0 var(--b2b-size-40);
+  width: var(--b2b-size-40);
+}
+.b2b-table-row__control-cell--accordion {
+  flex: 0 0 var(--b2b-size-60);
+  width: var(--b2b-size-60);
 }

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

@@ -1,29 +1,27 @@
 import { h, Host, } from "@stencil/core";
-import { TableAccordionRowTypes, TableColourOptions, } from "../../../utils/types/table.types";
+import { TableAccordionRowTypes, TableColourOptions, TableSizes, } from "../../../utils/types/table.types";
 export class TableRowComponent {
   constructor() {
     this.toggleOpen = () => {
       this.isOpen = !this.isOpen;
       this.b2bOpen.emit(this.isOpen);
     };
+    this.setTotalCols = () => {
+      let cells = Array.from(this.hostElement.children);
+      let cols = 0;
+      cells.forEach(cell => {
+        cols += cell.colspan ? cell.colspan : 1;
+      });
+      cells.forEach(cell => {
+        cell.totalCols = cols;
+      });
+    };
     this.getRowColor = () => {
       if (this.accordionType === TableAccordionRowTypes.PARENT)
         return TableColourOptions.GROUP;
       return this.color;
     };
-    this.getRowWidth = () => {
-      const accordionSize = '24px';
-      const checkboxSize = '16px';
-      if (Boolean(this.selectable)) {
-        return checkboxSize;
-      }
-      else if (Boolean(this.accordionType)) {
-        return accordionSize;
-      }
-      else {
-        return;
-      }
-    };
+    /** Only needs to be added if we control the state of the selection. */
     this.shouldAddCheckbox = () => {
       let checkbox = this.hostElement.querySelector('b2b-checkbox');
       return this.selectable && !Boolean(checkbox);
@@ -35,12 +33,10 @@ export class TableRowComponent {
       let parent = this.getParentRowGroup();
       if (this.shouldAddCheckbox()) {
         if (parent.type === 'header') {
-          return (h("b2b-table-header", { style: {
-              ['width']: this.getRowWidth(),
-            } }, h("b2b-checkbox", { standalone: true, checked: this.checked, indeterminate: this.indeterminate })));
+          return (h("b2b-table-header", { class: "b2b-table-row__control-cell--checkbox" }, h("b2b-checkbox", { standalone: true, checked: this.checked, indeterminate: this.indeterminate })));
         }
         else {
-          return (h("b2b-table-cell", null, h("b2b-checkbox", { standalone: true, checked: this.checked, value: this.value, indeterminate: this.indeterminate })));
+          return (h("b2b-table-cell", { class: "b2b-table-row__control-cell--checkbox" }, h("b2b-checkbox", { standalone: true, checked: this.checked, value: this.value, indeterminate: this.indeterminate })));
         }
       }
     };
@@ -48,16 +44,14 @@ export class TableRowComponent {
       if (this.accordionType != undefined) {
         switch (this.accordionType) {
           case TableAccordionRowTypes.HEADER:
-            return (h("b2b-table-header", { style: {
-                ['width']: this.getRowWidth(),
-              } }));
+            return (h("b2b-table-header", { class: "b2b-table-row__control-cell--accordion" }));
           case TableAccordionRowTypes.PARENT:
             return (h("b2b-table-cell", null, h("button", { onClick: this.toggleOpen, class: {
                 'b2b-table-row__accordion-icon': true,
                 'b2b-table-row__accordion-icon--open': this.isOpen,
               } }, h("b2b-icon", { icon: "b2b_icon-arrow-right", clickable: true }))));
           case TableAccordionRowTypes.CHILD:
-            return h("b2b-table-cell", null);
+            return (h("b2b-table-cell", { class: "b2b-table-row__control-cell--accordion" }));
         }
       }
     };
@@ -65,6 +59,7 @@ export class TableRowComponent {
     this.color = 'default';
     this.accordionType = undefined;
     this.selectable = undefined;
+    this.size = undefined;
     this.value = undefined;
     this.indeterminate = false;
     this.checked = false;
@@ -86,6 +81,9 @@ export class TableRowComponent {
     this.b2bOpen.emit(isOpen);
   }
   componentWillLoad() {
+    if (this.size === TableSizes.COLSPAN) {
+      this.setTotalCols();
+    }
     if (this.selectable &&
       !Boolean(this.value) &&
       this.getParentRowGroup().type !== 'header') {
@@ -95,6 +93,7 @@ export class TableRowComponent {
   render() {
     return (h(Host, { class: {
         'b2b-table-row': true,
+        ['b2b-table-row--colspan']: this.size === TableSizes.COLSPAN,
         ['b2b-table-row--highlight']: this.highlight,
         [`b2b-table-row--color-${this.getRowColor()}`]: true,
       }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", null)));
@@ -201,6 +200,32 @@ export class TableRowComponent {
         "attribute": "selectable",
         "reflect": false
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TableSizes",
+          "resolved": "\"colspan\" | \"equal\" | \"expand\"",
+          "references": {
+            "TableSizes": {
+              "location": "import",
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::TableSizes"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Whether colspans are possible in the table."
+            }],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false
+      },
       "value": {
         "type": "string",
         "mutable": false,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -218,4 +220,13 @@
 }
 :host(.b2b-table-rowgroup__header) {
   display: table-header-group;
+}
+:host(.b2b-table-rowgroup--fixed) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: var(--b2b-color-white-100);
+}
+:host(.b2b-table-rowgroup--colspan) {
+  display: block;
 }

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

@@ -1,5 +1,5 @@
 import { h, Host, } from "@stencil/core";
-import { TableAccordionRowTypes, TableRowgroupTypes, } from "../../../utils/types/table.types";
+import { TableAccordionRowTypes, TableRowgroupTypes, TableSizes, } from "../../../utils/types/table.types";
 import { updateCheckboxState, getFirstRow, getAllRows, getRemainingRows, } from "../utils";
 export class TableRowgroupComponent {
   constructor() {
@@ -39,23 +39,42 @@ export class TableRowgroupComponent {
     };
     this.toggleChildRowVisibility = (isOpen) => {
       const children = getRemainingRows(this.host);
-      if (isOpen) {
-        children.forEach(child => {
-          child.style.visibility = 'visible';
-        });
+      if (this.size === TableSizes.COLSPAN) {
+        if (isOpen) {
+          children.forEach(child => {
+            child.hidden = false;
+            child.setAttribute('aria-hidden', 'false');
+          });
+        }
+        else {
+          children.forEach(child => {
+            child.hidden = true;
+            child.setAttribute('aria-hidden', 'true');
+          });
+        }
       }
       else {
-        children.forEach(child => {
-          child.style.visibility = 'collapse';
-        });
+        if (isOpen) {
+          children.forEach(child => {
+            child.style.visibility = 'visible';
+            child.setAttribute('aria-hidden', 'false');
+          });
+        }
+        else {
+          children.forEach(child => {
+            child.style.visibility = 'collapse';
+            child.setAttribute('aria-hidden', 'true');
+          });
+        }
       }
     };
     this.type = TableRowgroupTypes.HEADER;
+    this.size = undefined;
     this.accordion = false;
     this.selectable = false;
+    this.fixed = false;
     this.opened = false;
     this.selectedValues = [];
-    this.indeterminate = false;
   }
   handleOpenChange(event) {
     this.toggleChildRowVisibility(event.detail);
@@ -112,6 +131,8 @@ export class TableRowgroupComponent {
   render() {
     return (h(Host, { class: {
         ['b2b-table-rowgroup__' + this.type]: true,
+        'b2b-table-rowgroup--fixed': this.fixed,
+        'b2b-table-rowgroup--colspan': this.size === TableSizes.COLSPAN,
       }, role: "rowgroup" }, h("slot", null)));
   }
   static get is() { return "b2b-table-rowgroup"; }
@@ -152,6 +173,32 @@ export class TableRowgroupComponent {
         "reflect": false,
         "defaultValue": "TableRowgroupTypes.HEADER"
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TableSizes",
+          "resolved": "\"colspan\" | \"equal\" | \"expand\"",
+          "references": {
+            "TableSizes": {
+              "location": "import",
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::TableSizes"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "the table size."
+            }],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false
+      },
       "accordion": {
         "type": "boolean",
         "mutable": false,
@@ -188,6 +235,24 @@ export class TableRowgroupComponent {
         "reflect": false,
         "defaultValue": "false"
       },
+      "fixed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the header rowgroup position to sticky. Use this in a scrollable container."
+        },
+        "attribute": "fixed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "opened": {
         "type": "boolean",
         "mutable": false,
@@ -210,8 +275,7 @@ export class TableRowgroupComponent {
   }
   static get states() {
     return {
-      "selectedValues": {},
-      "indeterminate": {}
+      "selectedValues": {}
     };
   }
   static get events() {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -45,6 +45,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -61,8 +62,8 @@
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
   --b2b-size-headline-line-height-400: var(--b2b-size-60);
-  --b2b-size-headline-line-height-200: var(--b2b-size-45);
-  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
   --b2b-size-headline-400: var(--b2b-size-60);
   --b2b-size-headline-200: var(--b2b-size-45);
   --b2b-size-headline-100: var(--b2b-size-40);
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 15:31:38 GMT
+ * Generated on Thu, 15 Feb 2024 09:42:32 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -161,6 +162,7 @@
   --b2b-color-warning-50: #ffd998;
   --b2b-color-error-100: #e6344b;
   --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
   --b2b-color-red-200: #bb0004;
   --b2b-color-red-150: #e6344b;
   --b2b-color-red-100: #d4021d;
@@ -215,12 +217,15 @@
 }
 :host {
   text-align: left;
-  display: table;
+  width: 100%;
 }
 :host(.b2b-table--expand) {
-  width: 100%;
+  display: table;
 }
 :host(.b2b-table--equal) {
-  width: 100%;
+  display: table;
   table-layout: fixed;
+}
+:host(.b2b-table--colspan) {
+  display: block;
 }

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

@@ -2,7 +2,7 @@ import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Table', () => {
   let page;
   beforeEach(async () => {
-    page = await newE2EPage();
+    page = await newE2EPage({ timeout: 10000 });
     await page.setContent(`
       <b2b-table size='equal'>
         <b2b-table-rowgroup type='header'>
@@ -64,6 +64,22 @@ describe('B2B-Table', () => {
       </b2b-table-row>
       </b2b-table-rowgroup>
     </b2b-table>`;
+  const tableWithColspan = `
+  <b2b-table size='colspan'>
+    <b2b-table-rowgroup type='header'>
+      <b2b-table-row>
+        <b2b-table-header colspan="2">Title 1 + 2</b2b-table-header>
+        <b2b-table-header>Title 2</b2b-table-header>
+      </b2b-table-row>
+    </b2b-table-rowgroup>
+    <b2b-table-rowgroup type='body'>
+      <b2b-table-row>
+        <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+        <b2b-table-cell colspan="2">data 2a + 3a</b2b-table-cell>
+      </b2b-table-row>
+    </b2b-table-rowgroup>
+  </b2b-table>
+`;
   it('should render the table component', async () => {
     const element = await page.find('b2b-table');
     expect(element).not.toBeNull();
@@ -93,10 +109,8 @@ describe('B2B-Table', () => {
         </b2b-table>
       </b2b-scrollable-container>
     `);
-    const cells = await page.findAll('b2b-table-header');
-    cells.map(cell => {
-      expect(cell.getAttribute('fixed')).toBe('true');
-    });
+    const rowGroup = await page.find('b2b-table-rowgroup');
+    expect(await rowGroup.getProperty('fixed')).toBe(true);
   });
   it('should set header rows not highlightable', async () => {
     const headerRow = await page.find('b2b-table-rowgroup[type=header] b2b-table-row');
@@ -371,4 +385,16 @@ describe('B2B-Table', () => {
       values: ['cherries'],
     });
   });
+  it('should allow setting the colspan property on cells if the table size is colspan', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithColspan);
+    const header = await page.find({ text: 'Title 1 + 2' });
+    const table = await page.find('b2b-table');
+    const row = await page.find('b2b-table-row');
+    const cell = await page.find({ text: 'data 2a + 3a' });
+    expect(await cell.style.flexBasis).toBeDefined;
+    expect(row).toHaveClass('b2b-table-row--colspan');
+    expect(table).toHaveClass('b2b-table--colspan');
+    expect(await header.getProperty('colspan')).toEqual(2);
+  });
 });

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

@@ -1,7 +1,17 @@
 import { h, Host, } from "@stencil/core";
 import { TableSizes, TableSortDirections } from "../../utils/types/table.types";
+import { getAllRows } from "./utils";
 export class TableComponent {
   constructor() {
+    this.getAllCellsByRow = (row) => {
+      return Array.from(row.children);
+    };
+    this.setRowGroupSize = () => {
+      const rowGroups = Array.from(this.host.querySelectorAll('b2b-table-rowgroup'));
+      for (let i = 0, n = rowGroups.length; i < n; i++) {
+        rowGroups[i].size = this.size;
+      }
+    };
     this.size = TableSizes.EXPAND;
   }
   onColumnSelected(event) {
@@ -13,19 +23,30 @@ export class TableComponent {
     }
   }
   setCellSize() {
-    const allCells = this.host.querySelectorAll('b2b-table-cell');
-    [...allCells].map(cell => cell.setAttribute('size', this.size));
+    const rows = getAllRows(this.host);
+    for (let i = 0, n = rows.length; i < n; i++) {
+      rows[i].size = this.size;
+      const cells = this.getAllCellsByRow(rows[i]);
+      for (let i = 0, n = cells.length; i < n; i++) {
+        cells[i].setAttribute('size', this.size);
+      }
+    }
   }
   setFixedHeaders() {
-    const isScrollable = this.host.closest('b2b-scrollable-container') !== null;
-    if (isScrollable) {
-      const allHeaders = this.host.querySelectorAll('b2b-table-header');
-      [...allHeaders].map(cell => cell.setAttribute('fixed', 'true'));
+    const rowGroup = this.host.querySelector('b2b-table-rowgroup');
+    rowGroup.fixed = true;
+  }
+  componentWillLoad() {
+    this.isScrollable = this.host.closest('b2b-scrollable-container') !== null;
+    this.setCellSize();
+    if (!this.isScrollable) {
+      this.setRowGroupSize();
     }
   }
   componentDidRender() {
-    this.setCellSize();
-    this.setFixedHeaders();
+    if (this.isScrollable) {
+      this.setFixedHeaders();
+    }
   }
   componentDidLoad() {
     const tableHeaders = this.host.querySelectorAll('b2b-table-header');
@@ -62,7 +83,7 @@ export class TableComponent {
         "mutable": false,
         "complexType": {
           "original": "TableSizes",
-          "resolved": "\"equal\" | \"expand\"",
+          "resolved": "\"colspan\" | \"equal\" | \"expand\"",
           "references": {
             "TableSizes": {
               "location": "import",
@@ -75,7 +96,7 @@ export class TableComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The size of the table. Both will expand to 100% of parent size.\nExpand cells will use as much space as content needs and text will wrap.\nEqual will keep all column sizes proportional to the number of columns."
+          "text": "The size of the table. Both will expand to 100% of parent size.\nExpand cells will use as much space as content needs and text will wrap.\nEqual will keep all column sizes proportional to the number of columns.\nColspan behaves same as equal, but allows you to set a colspan attribute on individual columns or cells\nto make them span more than one column."
         },
         "attribute": "size",
         "reflect": false,