@otto-de/b2b-core-components 1.5.0 → 1.6.0

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -225,50 +225,50 @@
   border-top: 1px solid var(--b2b-color-grey-200);
   border-bottom: 2px solid var(--b2b-color-grey-300);
 }
-:host .b2b-table-header--heading {
+:host .b2b-table-header__heading {
   cursor: pointer;
   user-select: none;
   display: flex;
   height: var(--b2b-size-icon-100);
   line-height: var(--b2b-size-icon-100);
 }
-:host .b2b-table-header--heading:hover, :host .b2b-table-header--heading:focus-visible {
+:host .b2b-table-header__heading:hover, :host .b2b-table-header__heading:focus-visible {
   outline: none;
 }
-:host .b2b-table-header--heading:hover .b2b-table-header--sort, :host .b2b-table-header--heading:focus-visible .b2b-table-header--sort {
+:host .b2b-table-header__heading:hover .b2b-table-header__sort, :host .b2b-table-header__heading:focus-visible .b2b-table-header__sort {
   fill: var(--b2b-color-grey-300);
 }
-:host .b2b-table-header--heading:hover .b2b-table-header--sort-not-sorted, :host .b2b-table-header--heading:focus-visible .b2b-table-header--sort-not-sorted {
+:host .b2b-table-header__heading:hover .b2b-table-header__sort--not-sorted, :host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--not-sorted {
   visibility: visible;
 }
-:host .b2b-table-header--heading:hover .b2b-table-header--sort-descending, :host .b2b-table-header--heading:focus-visible .b2b-table-header--sort-descending {
+:host .b2b-table-header__heading:hover .b2b-table-header__sort--descending, :host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--descending {
   transform: initial;
   transition: transform 0.4s ease;
 }
-:host .b2b-table-header--heading:hover .b2b-table-header--sort-ascending, :host .b2b-table-header--heading:focus-visible .b2b-table-header--sort-ascending {
+:host .b2b-table-header__heading:hover .b2b-table-header__sort--ascending, :host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--ascending {
   transform: rotate(180deg);
   transition: transform 0.4s ease;
 }
-:host .b2b-table-header--heading.b2b-table-header--sort-active .b2b-table-header--sort,
-:host .b2b-table-header--heading .b2b-table-header--sort-active:hover .b2b-table-header--sort {
+:host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort,
+:host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort {
   fill: var(--b2b-color-black-100);
 }
-:host .b2b-table-header--heading.b2b-table-header--sort-active .b2b-table-header--sort-descending,
-:host .b2b-table-header--heading .b2b-table-header--sort-active:hover .b2b-table-header--sort-descending {
+:host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort--descending,
+:host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort--descending {
   transform: rotate(180deg);
 }
-:host .b2b-table-header--heading.b2b-table-header--sort-active .b2b-table-header--sort-ascending,
-:host .b2b-table-header--heading .b2b-table-header--sort-active:hover .b2b-table-header--sort-ascending {
+:host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort-ascending,
+:host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort-ascending {
   transform: initial;
 }
-:host .b2b-table-header--sort {
+:host .b2b-table-header__sort {
   height: var(--b2b-size-icon-100);
   fill: var(--b2b-color-black-100);
 }
-:host .b2b-table-header--sort-not-sorted {
+:host .b2b-table-header__sort--not-sorted {
   visibility: hidden;
 }
-:host .b2b-table-header--sort-descending {
+:host .b2b-table-header__sort--descending {
   transform: rotate(180deg);
 }
 :host(.b2b-table-header--divider) {

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

@@ -53,11 +53,11 @@ export class TableHeaderComponent {
         this.sortDirection === undefined
         ? 'other'
         : this.sortDirection }, this.sortDirection !== undefined ? (h("div", { tabIndex: 0, class: {
-        'b2b-table-header--heading': true,
-        'b2b-table-header--sort-active': this.active,
+        'b2b-table-header__heading': true,
+        'b2b-table-header__sort--active': this.active,
       }, onClick: this.changeSortDirection, onKeyDown: this.changeSortDirection, onMouseLeave: this.setInactive, onBlur: this.setInactive }, h("slot", null), h("span", { class: {
-        'b2b-table-header--sort': true,
-        [`b2b-table-header--sort-${this.sortDirection}`]: true,
+        'b2b-table-header__sort': true,
+        [`b2b-table-header__sort--${this.sortDirection}`]: true,
       } }, this.sortIcon))) : (h("slot", null))));
   }
   static get is() { return "b2b-table-header"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -258,7 +258,7 @@
 :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 {
+.b2b-table-header__control-cell {
   /* For equal width the control cell will automatically grow.
   We should fix the size and this size
    */

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

@@ -1,5 +1,5 @@
 import { h, Host, } from '@stencil/core';
-import { TableRowTypes, TableColourOptions, TableSizes, } from '../../../utils/types/table.types';
+import { TableAccordionRowTypes, TableColourOptions, } from '../../../utils/types/table.types';
 export class TableRowComponent {
   constructor() {
     this.toggleOpen = () => {
@@ -7,45 +7,100 @@ export class TableRowComponent {
       this.b2bOpen.emit(this.isOpen);
     };
     this.getRowColor = () => {
-      if (this.type === TableRowTypes.PARENT)
+      if (this.accordionType === TableAccordionRowTypes.PARENT)
         return TableColourOptions.GROUP;
       return this.color;
     };
-    this.getParentTableSize = () => {
-      const parentTable = this.hostElement.closest('b2b-table');
-      return parentTable.getAttribute('size');
-    };
-    // This is needed for table size equal, so that control cell size remains as big
-    // as the elements it contains. Feel free to improve this
-    this.getRowWidthForEqualSize = () => {
+    this.getRowWidth = () => {
       const accordionIconSize = '24px';
-      if (this.getParentTableSize() === TableSizes.EQUAL) {
+      const checkboxSize = '16px';
+      if (Boolean(this.accordionType)) {
         return accordionIconSize;
-        // TODO: in B2BDS-166 selectable row - if table is selectable return size of checkbox
-        // TODO: in B2BDS-166 selectable row -if cell is selectable and accordion return size of both
+      }
+      else if (Boolean(this.selectable)) {
+        return checkboxSize;
+      }
+      else if (Boolean(this.accordionType && this.selectable)) {
+        return accordionIconSize + checkboxSize;
+      }
+      else {
+        return;
+      }
+    };
+    this.shouldAddCheckbox = () => {
+      let checkbox = this.hostElement.querySelector('b2b-checkbox');
+      return this.selectable && !Boolean(checkbox);
+    };
+    this.getParentRowGroup = () => {
+      return this.hostElement.closest('b2b-table-rowgroup');
+    };
+    this.getCheckbox = () => {
+      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 })));
+        }
+        else {
+          return (h("b2b-table-cell", null, h("b2b-checkbox", { standalone: true, checked: this.checked, value: this.value, indeterminate: this.indeterminate })));
+        }
+      }
+    };
+    this.getAccordionColumns = () => {
+      if (this.accordionType != undefined) {
+        switch (this.accordionType) {
+          case TableAccordionRowTypes.HEADER:
+            return (h("b2b-table-header", { style: {
+                ['width']: this.getRowWidth(),
+              } }));
+          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);
+        }
       }
     };
     this.highlight = true;
     this.color = 'default';
-    this.type = undefined;
+    this.accordionType = undefined;
+    this.selectable = undefined;
+    this.value = undefined;
+    this.indeterminate = false;
+    this.checked = false;
     this.isOpen = false;
   }
+  toggleSelected(event) {
+    var _a;
+    if (this.selectable) {
+      this.checked = event.detail.checked;
+      this.b2bSelected.emit({
+        checked: event.detail.checked,
+        value: (_a = event.detail.value) !== null && _a !== void 0 ? _a : 'header',
+      });
+    }
+  }
   /** Will toggle the accordion opened or closed. */
   async toggleAccordion(isOpen) {
     this.isOpen = isOpen;
     this.b2bOpen.emit(isOpen);
   }
+  componentWillLoad() {
+    if (this.selectable &&
+      !Boolean(this.value) &&
+      this.getParentRowGroup().type !== 'header') {
+      console.warn('You need to associate a value with the row as a unique identifier.');
+    }
+  }
   render() {
     return (h(Host, { class: {
         'b2b-table-row': true,
         ['b2b-table-row--highlight']: this.highlight,
         [`b2b-table-row--color-${this.getRowColor()}`]: true,
-      }, role: "row" }, this.type === TableRowTypes.PARENT && (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 })))), this.type === TableRowTypes.CHILD && h("b2b-table-cell", null), this.type === TableRowTypes.HEADER && (h("b2b-table-header", { style: {
-        ['width']: this.getRowWidthForEqualSize(),
-      } })), h("slot", null)));
+      }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", null)));
   }
   static get is() { return "b2b-table-row"; }
   static get encapsulation() { return "shadow"; }
@@ -102,14 +157,14 @@ export class TableRowComponent {
         "reflect": false,
         "defaultValue": "'default'"
       },
-      "type": {
+      "accordionType": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "TableRowTypes",
+          "original": "TableAccordionRowTypes",
           "resolved": "\"child\" | \"header\" | \"parent\"",
           "references": {
-            "TableRowTypes": {
+            "TableAccordionRowTypes": {
               "location": "import",
               "path": "../../../utils/types/table.types"
             }
@@ -117,12 +172,88 @@ export class TableRowComponent {
         },
         "required": false,
         "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Determined by the parent rowgroup for accordion rowgroups."
+            }],
+          "text": ""
+        },
+        "attribute": "accordion-type",
+        "reflect": false
+      },
+      "selectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Whether the parent rowgroup is selectable."
+            }],
+          "text": ""
+        },
+        "attribute": "selectable",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determined by the parent rowgroup for accordion rowgroups. Do not set manually."
+          "text": "The unique identifier for a selectable row. It is emitted when the row is selected."
         },
-        "attribute": "type",
+        "attribute": "value",
         "reflect": false
+      },
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If a selectable row is a parent for an accordion, it becomes indeterminate when some of it's children are checked, but not all."
+        },
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If a selectable row is currently checked. Per default, it is false."
+        },
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -147,13 +278,33 @@ export class TableRowComponent {
           "resolved": "boolean",
           "references": {}
         }
+      }, {
+        "method": "b2bSelected",
+        "name": "b2b-row-selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits if the row is selectable and it is selected or unselected. Emits both unique value and the checkbox status."
+        },
+        "complexType": {
+          "original": "CheckboxEventDetail",
+          "resolved": "CheckboxEventDetail<any>",
+          "references": {
+            "CheckboxEventDetail": {
+              "location": "import",
+              "path": "../../../components"
+            }
+          }
+        }
       }];
   }
   static get methods() {
     return {
       "toggleAccordion": {
         "complexType": {
-          "signature": "(isOpen: any) => Promise<void>",
+          "signature": "(isOpen: boolean) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -173,4 +324,13 @@ export class TableRowComponent {
     };
   }
   static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "b2b-change",
+        "method": "toggleSelected",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -216,6 +216,6 @@
 :host {
   display: table-row-group;
 }
-:host(.b2b-table-rowgroup--header) {
+:host(.b2b-table-rowgroup__header) {
   display: table-header-group;
 }

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

@@ -1,39 +1,44 @@
-import { h, Host } from '@stencil/core';
-import { TableRowgroupTypes } from '../../../utils/types/table.types';
+import { h, Host, } from '@stencil/core';
+import { TableAccordionRowTypes, TableRowgroupTypes, } from '../../../utils/types/table.types';
+import { updateCheckboxState, getFirstRow, getAllRows, getRemainingRows, } from '../utils';
 export class TableRowgroupComponent {
   constructor() {
-    this.getFirstRow = () => {
-      const firstRow = this.host.querySelector('b2b-table-row');
-      if (firstRow != null) {
-        return firstRow;
-      }
+    this.toggleSelectAll = (event, children) => {
+      this.toggleList(children, event);
+      const rows = children.filter(child => child.accordionType !== TableAccordionRowTypes.PARENT);
+      this.selectedValues = [...rows]
+        .filter(child => child.checked)
+        .map(child => child.value);
     };
-    this.getRemainingRows = () => {
-      const children = Array.from(this.host.querySelectorAll('b2b-table-row'));
-      return Array.from(children.slice(1));
+    this.toggleList = (list, event) => {
+      list.forEach(child => ((child.checked = event.detail.checked), (child.indeterminate = false)));
     };
     this.addAccordionControlColumn = () => {
-      const children = this.getRemainingRows();
-      children &&
-        children.forEach(child => {
-          child.setAttribute('type', 'child');
-        });
-      const firstRow = this.getFirstRow();
-      if (this.type === 'header') {
-        firstRow && firstRow.setAttribute('type', 'header');
+      const firstRow = getFirstRow(this.host);
+      if (this.type === TableRowgroupTypes.HEADER) {
+        firstRow && (firstRow.accordionType = TableAccordionRowTypes.HEADER);
       }
       else {
-        firstRow && firstRow.setAttribute('type', 'parent');
+        firstRow && (firstRow.accordionType = TableAccordionRowTypes.PARENT);
       }
+      const children = getRemainingRows(this.host);
+      children &&
+        children.forEach(child => {
+          child.accordionType = TableAccordionRowTypes.CHILD;
+        });
+    };
+    this.addCheckboxColumn = () => {
+      const children = getAllRows(this.host);
+      children.forEach(child => (child.selectable = true));
     };
     this.toggleInitialVisibility = () => {
-      const firstRow = this.getFirstRow();
+      const firstRow = getFirstRow(this.host);
       (async () => {
         firstRow && (await firstRow.toggleAccordion(this.opened));
       })();
     };
     this.toggleChildRowVisibility = (isOpen) => {
-      const children = this.getRemainingRows();
+      const children = getRemainingRows(this.host);
       if (isOpen) {
         children.forEach(child => {
           child.style.visibility = 'visible';
@@ -47,13 +52,47 @@ export class TableRowgroupComponent {
     };
     this.type = TableRowgroupTypes.HEADER;
     this.accordion = false;
+    this.selectable = false;
     this.opened = false;
+    this.selectedValues = [];
+    this.indeterminate = false;
   }
   handleOpenChange(event) {
     this.toggleChildRowVisibility(event.detail);
   }
+  handleSelectedChange(event) {
+    var _a;
+    const target = event.target;
+    const table = this.host.closest('b2b-table');
+    const parentValue = (_a = getFirstRow(this.host).value) !== null && _a !== void 0 ? _a : 'header';
+    if (this.accordion &&
+      target.accordionType === TableAccordionRowTypes.PARENT) {
+      const children = getRemainingRows(this.host);
+      this.toggleSelectAll(event, children);
+    }
+    else if (this.type === TableRowgroupTypes.HEADER) {
+      const children = getRemainingRows(table);
+      this.toggleSelectAll(event, children);
+    }
+    else {
+      if (event.target.checked) {
+        this.selectedValues = [event.target.value, ...this.selectedValues];
+      }
+      else {
+        this.selectedValues = this.selectedValues.filter(el => el !== event.target.value);
+      }
+    }
+    if (this.accordion) {
+      updateCheckboxState(getRemainingRows(this.host), getFirstRow(this.host));
+      this.b2bSelect.emit({
+        group: parentValue,
+        values: this.selectedValues,
+      });
+    }
+    updateCheckboxState(getRemainingRows(table), getFirstRow(table));
+  }
   makeHeaderRowNotSelectable() {
-    const firstRow = this.getFirstRow();
+    const firstRow = getFirstRow(this.host);
     if (this.type === TableRowgroupTypes.HEADER) {
       firstRow.setAttribute('highlight', 'false');
     }
@@ -63,13 +102,16 @@ export class TableRowgroupComponent {
       this.addAccordionControlColumn();
       this.toggleInitialVisibility();
     }
+    if (this.selectable) {
+      this.addCheckboxColumn();
+    }
   }
   componentDidRender() {
     this.makeHeaderRowNotSelectable();
   }
   render() {
     return (h(Host, { class: {
-        ['b2b-table-rowgroup--' + this.type]: true,
+        ['b2b-table-rowgroup__' + this.type]: true,
       }, role: "rowgroup" }, h("slot", null)));
   }
   static get is() { return "b2b-table-rowgroup"; }
@@ -127,6 +169,24 @@ export class TableRowgroupComponent {
         "reflect": false,
         "defaultValue": "false"
       },
+      "selectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the rows in the rowgroup can be selected via checkmark. Per default, it is false."
+        },
+        "attribute": "selectable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "opened": {
         "type": "boolean",
         "mutable": false,
@@ -147,6 +207,35 @@ export class TableRowgroupComponent {
       }
     };
   }
+  static get states() {
+    return {
+      "selectedValues": {},
+      "indeterminate": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bSelect",
+        "name": "b2b-group-selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits when the rowgroup as a whole is selected."
+        },
+        "complexType": {
+          "original": "TableAccordionSelectedEventDetail",
+          "resolved": "TableAccordionSelectedEventDetail",
+          "references": {
+            "TableAccordionSelectedEventDetail": {
+              "location": "import",
+              "path": "../../../utils/interfaces/content.interface"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "host"; }
   static get listeners() {
     return [{
@@ -155,6 +244,12 @@ export class TableRowgroupComponent {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "b2b-row-selected",
+        "method": "handleSelectedChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */