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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -28,7 +28,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
@@ -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 Tue, 28 Nov 2023 08:54:33 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -150,7 +151,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-info-100: #003264;
@@ -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,257 +1,321 @@
 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() {
-    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.toggleList = (list, event) => {
-      list.forEach(child => ((child.checked = event.detail.checked), (child.indeterminate = false)));
-    };
-    this.addAccordionControlColumn = () => {
-      const firstRow = getFirstRow(this.host);
-      if (this.type === TableRowgroupTypes.HEADER) {
-        firstRow && (firstRow.accordionType = TableAccordionRowTypes.HEADER);
-      }
-      else {
-        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 = getFirstRow(this.host);
-      (async () => {
-        firstRow && (await firstRow.toggleAccordion(this.opened));
-      })();
-    };
-    this.toggleChildRowVisibility = (isOpen) => {
-      const children = getRemainingRows(this.host);
-      if (isOpen) {
-        children.forEach(child => {
-          child.style.visibility = 'visible';
-        });
-      }
-      else {
-        children.forEach(child => {
-          child.style.visibility = 'collapse';
-        });
-      }
-    };
-    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);
+    constructor() {
+        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.toggleList = (list, event) => {
+            list.forEach(child => ((child.checked = event.detail.checked), (child.indeterminate = false)));
+        };
+        this.addAccordionControlColumn = () => {
+            const firstRow = getFirstRow(this.host);
+            if (this.type === TableRowgroupTypes.HEADER) {
+                firstRow && (firstRow.accordionType = TableAccordionRowTypes.HEADER);
+            }
+            else {
+                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 = getFirstRow(this.host);
+            (async () => {
+                firstRow && (await firstRow.toggleAccordion(this.opened));
+            })();
+        };
+        this.toggleChildRowVisibility = (isOpen) => {
+            const children = getRemainingRows(this.host);
+            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 {
+                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 = [];
     }
-    else if (this.type === TableRowgroupTypes.HEADER) {
-      const children = getRemainingRows(table);
-      this.toggleSelectAll(event, children);
+    handleOpenChange(event) {
+        this.toggleChildRowVisibility(event.detail);
     }
-    else {
-      if (event.target.checked) {
-        this.selectedValues = [event.target.value, ...this.selectedValues];
-      }
-      else {
-        this.selectedValues = this.selectedValues.filter(el => el !== event.target.value);
-      }
+    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));
     }
-    if (this.accordion) {
-      updateCheckboxState(getRemainingRows(this.host), getFirstRow(this.host));
-      this.b2bSelect.emit({
-        group: parentValue,
-        values: this.selectedValues,
-      });
+    makeHeaderRowNotSelectable() {
+        const firstRow = getFirstRow(this.host);
+        if (this.type === TableRowgroupTypes.HEADER) {
+            firstRow.setAttribute('highlight', 'false');
+        }
     }
-    updateCheckboxState(getRemainingRows(table), getFirstRow(table));
-  }
-  makeHeaderRowNotSelectable() {
-    const firstRow = getFirstRow(this.host);
-    if (this.type === TableRowgroupTypes.HEADER) {
-      firstRow.setAttribute('highlight', 'false');
+    componentWillLoad() {
+        if (this.accordion) {
+            this.addAccordionControlColumn();
+            this.toggleInitialVisibility();
+        }
+        if (this.selectable) {
+            this.addCheckboxColumn();
+        }
     }
-  }
-  componentWillLoad() {
-    if (this.accordion) {
-      this.addAccordionControlColumn();
-      this.toggleInitialVisibility();
+    componentDidRender() {
+        this.makeHeaderRowNotSelectable();
     }
-    if (this.selectable) {
-      this.addCheckboxColumn();
+    render() {
+        return (h(Host, { key: '94b4dbff47db5ededca59cd1e04bedae7b5e0828', 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", { key: 'f61ad2c12ae8bacdae7b9195e73e5b516c4dd654' })));
     }
-  }
-  componentDidRender() {
-    this.makeHeaderRowNotSelectable();
-  }
-  render() {
-    return (h(Host, { class: {
-        ['b2b-table-rowgroup__' + this.type]: true,
-      }, role: "rowgroup" }, h("slot", null)));
-  }
-  static get is() { return "b2b-table-rowgroup"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["table-rowgroup.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["table-rowgroup.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "TableRowgroupTypes",
-          "resolved": "\"body\" | \"footer\" | \"header\"",
-          "references": {
-            "TableRowgroupTypes": {
-              "location": "import",
-              "path": "../../../utils/types/table.types",
-              "id": "src/utils/types/table.types.ts::TableRowgroupTypes"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Rowgroup allows grouping rows by context: header, body or footer.\nHeader rows are by default not highlightable on mouse over."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "TableRowgroupTypes.HEADER"
-      },
-      "accordion": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Renders the rowgroup as an accordion. Both header and body must have accordion set to true.\nOne table can contain multiple rowgroups of type body, each of which represents an accordion row with children."
-        },
-        "attribute": "accordion",
-        "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,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Only use when accordion property is true.\nWill render the accordion opened if set to true. By default, is false."
-        },
-        "attribute": "opened",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  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",
-              "id": "src/utils/interfaces/content.interface.d.ts::TableAccordionSelectedEventDetail"
+    static get is() { return "b2b-table-rowgroup"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["table-rowgroup.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["table-rowgroup.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableRowgroupTypes",
+                    "resolved": "\"body\" | \"footer\" | \"header\"",
+                    "references": {
+                        "TableRowgroupTypes": {
+                            "location": "import",
+                            "path": "../../../utils/types/table.types",
+                            "id": "src/utils/types/table.types.ts::TableRowgroupTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Rowgroup allows grouping rows by context: header, body or footer.\nHeader rows are by default not highlightable on mouse over."
+                },
+                "attribute": "type",
+                "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,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the rowgroup as an accordion. Both header and body must have accordion set to true.\nOne table can contain multiple rowgroups of type body, each of which represents an accordion row with children."
+                },
+                "attribute": "accordion",
+                "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"
+            },
+            "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,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Only use when accordion property is true.\nWill render the accordion opened if set to true. By default, is false."
+                },
+                "attribute": "opened",
+                "reflect": true,
+                "defaultValue": "false"
             }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "b2b-open",
-        "method": "handleOpenChange",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "b2b-row-selected",
-        "method": "handleSelectedChange",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "selectedValues": {}
+        };
+    }
+    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",
+                            "id": "src/utils/interfaces/content.interface.d.ts::TableAccordionSelectedEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "b2b-open",
+                "method": "handleOpenChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "b2b-row-selected",
+                "method": "handleSelectedChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }