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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -226,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

@@ -1,5 +1,5 @@
 import { h, Host, } from '@stencil/core';
-import { TableSortDirections } from '../types';
+import { TableSortDirections } from '../../../utils/types/table.types';
 export class TableHeaderComponent {
   constructor() {
     this.sortIcon = (h("svg", { viewBox: "0 0 24 24", height: "24px", width: "24px", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M19.1831 8.47552L12.8541 2.14703C12.8079 2.10065 12.7524 2.06384 12.6909 2.03839C12.5687 1.98785 12.4313 1.98785 12.3091 2.03839C12.2476 2.06384 12.1921 2.10065 12.1459 2.14703L5.81689 8.47552C5.62158 8.67084 5.62158 8.98724 5.81689 9.18256C6.01221 9.37787 6.32861 9.37787 6.52393 9.18256L12 3.70691V21.4999C12 21.7763 12.2236 21.9999 12.5 21.9999C12.7764 21.9999 13 21.7763 13 21.4999V3.70691L18.4761 9.18256C18.5737 9.28021 18.7017 9.32904 18.8296 9.32904C18.9575 9.32904 19.0854 9.28021 19.1831 9.18256C19.3784 8.98724 19.3784 8.67084 19.1831 8.47552Z" })));
@@ -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"; }
@@ -119,7 +119,7 @@ export class TableHeaderComponent {
           "references": {
             "TableSortDirections": {
               "location": "import",
-              "path": "../types"
+              "path": "../../../utils/types/table.types"
             }
           }
         },
@@ -173,7 +173,7 @@ export class TableHeaderComponent {
           "references": {
             "TableSortDirections": {
               "location": "import",
-              "path": "../types"
+              "path": "../../../utils/types/table.types"
             }
           }
         }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -259,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 '../types';
+import { TableAccordionRowTypes, TableColourOptions, } from '../../../utils/types/table.types';
 export class TableRowComponent {
   constructor() {
     this.toggleOpen = () => {
@@ -7,46 +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() {
-    console.log(this.getRowWidthForEqualSize());
     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"; }
@@ -89,7 +143,7 @@ export class TableRowComponent {
           "references": {
             "TableColourOptions": {
               "location": "import",
-              "path": "../types"
+              "path": "../../../utils/types/table.types"
             }
           }
         },
@@ -103,27 +157,103 @@ 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": "../types"
+              "path": "../../../utils/types/table.types"
             }
           }
         },
         "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"
       }
     };
   }
@@ -148,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": ""
@@ -174,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 Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -217,6 +216,6 @@
 :host {
   display: table-row-group;
 }
-:host(.b2b-table-rowgroup--header) {
+:host(.b2b-table-rowgroup__header) {
   display: table-header-group;
 }