@otto-de/b2b-core-components 1.30.0 → 1.31.1

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

@@ -3,23 +3,6 @@ import { ContentAlignment, TableSizes, } from "../../../utils/types/table.types"
 import { setFlexBase } from "../utils";
 export class TableCellComponent {
     constructor() {
-        /** Whether text should wrap or truncate.
-         * It will only truncate when table size is equal
-         * **/
-        this.textWrap = true;
-        /** @internal The size of the cell. Follows table size.
-         * When size is equal and textWrap is false, the text will truncate with Ellipsis.
-         * Other sizes won't affect cell current implementation.
-         **/
-        this.size = TableSizes.EXPAND;
-        // TODO: test via visual tests - storybook story
-        /** Alignment of the content of the cell, by default is to the left. **/
-        this.align = ContentAlignment.LEFT;
-        /** adds a border to the right of the cell. **/
-        this.divider = false;
-        /** Background color of the cell. This color selection does not have hover states, as it is handled from the row**/
-        this.color = 'default';
-        this.useTextEllipsis = false;
         this.expandTextHoverWaitTime = 600;
         this.addExpandStyles = () => {
             this.expandTextHoverTimeoutId = setTimeout(() => {
@@ -36,6 +19,14 @@ export class TableCellComponent {
                 clearTimeout(this.expandTextHoverTimeoutId);
             this.host.classList.remove('b2b-table-cell--expand-text');
         };
+        this.textWrap = true;
+        this.size = TableSizes.EXPAND;
+        this.align = ContentAlignment.LEFT;
+        this.divider = false;
+        this.color = 'default';
+        this.colspan = undefined;
+        this.totalCols = undefined;
+        this.useTextEllipsis = false;
     }
     componentWillLoad() {
         this.useTextEllipsis = !this.textWrap && this.size === TableSizes.EQUAL;
@@ -45,14 +36,14 @@ export class TableCellComponent {
         }
     }
     render() {
-        return (h(Host, { key: '4ef24a1d1bc48b4ba44901e0db023f22008d26bf', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
+        return (h(Host, { key: '571ec5bc494057bfbe9c9146da086bb6a192f298', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
                 'b2b-table-cell': true,
                 ['b2b-table-cell--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-cell--ellipsis']: this.useTextEllipsis,
                 ['b2b-table-cell--' + this.align]: true,
                 ['b2b-table-cell--divider']: this.divider,
                 [`b2b-table-cell-color-${this.color}`]: true,
-            }, role: "cell" }, h("slot", { key: '98f3f69177a3520078a323ffb7ef256c1b503b2c' })));
+            }, role: "cell" }, h("slot", { key: '10385f497f0061d09b227b88456205bac24f272f' })));
     }
     static get is() { return "b2b-table-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -70,7 +61,6 @@ export class TableCellComponent {
         return {
             "textWrap": {
                 "type": "boolean",
-                "attribute": "text-wrap",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -83,14 +73,12 @@ export class TableCellComponent {
                     "tags": [],
                     "text": "Whether text should wrap or truncate.\nIt will only truncate when table size is equal\n*"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "text-wrap",
                 "reflect": true,
                 "defaultValue": "true"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "TableSizes",
@@ -112,14 +100,12 @@ export class TableCellComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "TableSizes.EXPAND"
             },
             "align": {
                 "type": "string",
-                "attribute": "align",
                 "mutable": false,
                 "complexType": {
                     "original": "ContentAlignment",
@@ -138,14 +124,12 @@ export class TableCellComponent {
                     "tags": [],
                     "text": "Alignment of the content of the cell, by default is to the left. *"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "align",
                 "reflect": false,
                 "defaultValue": "ContentAlignment.LEFT"
             },
             "divider": {
                 "type": "boolean",
-                "attribute": "divider",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -158,14 +142,12 @@ export class TableCellComponent {
                     "tags": [],
                     "text": "adds a border to the right of the cell. *"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "divider",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "TableColourOptions",
@@ -184,14 +166,12 @@ export class TableCellComponent {
                     "tags": [],
                     "text": "Background color of the cell. This color selection does not have hover states, as it is handled from the row*"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'default'"
             },
             "colspan": {
                 "type": "number",
-                "attribute": "colspan",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -204,13 +184,11 @@ export class TableCellComponent {
                     "tags": [],
                     "text": "How many columns the cell should span. Accepts numbers greater than one."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "colspan",
                 "reflect": false
             },
             "totalCols": {
                 "type": "number",
-                "attribute": "total-cols",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -226,8 +204,7 @@ export class TableCellComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "total-cols",
                 "reflect": false
             }
         };

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

@@ -3,18 +3,6 @@ import { TableSizes, TableSortDirections, SortIconAlignment, ContentAlignment, }
 import { setFlexBase } from "../utils";
 export class TableHeaderComponent {
     constructor() {
-        /** adds a border to the right of the header. **/
-        this.divider = false;
-        /** The size of the cell. Follows table size.
-         * When size is equal and textWrap is false, the text will truncate with Ellipsis.
-         * Other sizes won't affect cell current implementation.
-         **/
-        this.size = TableSizes.EXPAND;
-        /** @deprecated Use fixed on the rowgroup instead. Sets the header position to sticky. Use it when table is inside a scrollable container. **/
-        this.fixed = false;
-        /** Alignment of the content of the cell, by default is to the left. **/
-        this.contentAlign = ContentAlignment.LEFT;
-        this.active = false;
         this.setIconPlacement = () => {
             switch (this.contentAlign) {
                 case ContentAlignment.LEFT:
@@ -63,6 +51,16 @@ export class TableHeaderComponent {
         this.setInactive = () => {
             this.active = false;
         };
+        this.divider = false;
+        this.size = TableSizes.EXPAND;
+        this.fixed = false;
+        this.sortDirection = undefined;
+        this.sortId = undefined;
+        this.colspan = undefined;
+        this.contentAlign = ContentAlignment.LEFT;
+        this.totalCols = undefined;
+        this.active = false;
+        this.iconAlign = undefined;
     }
     componentWillLoad() {
         if (this.size === TableSizes.COLSPAN) {
@@ -74,7 +72,7 @@ export class TableHeaderComponent {
         this.setIconPlacement();
     }
     render() {
-        return (h(Host, { key: '216fc229ac8970ff900e40bd6645a4f3eb2ce758', class: {
+        return (h(Host, { key: '34f96e3a7c5c36cafadb463a72f1acec6550d367', class: {
                 [`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
                 'b2b-table-header--divider': this.divider,
                 [`b2b-table-header--${this.size}`]: true,
@@ -109,7 +107,6 @@ export class TableHeaderComponent {
         return {
             "divider": {
                 "type": "boolean",
-                "attribute": "divider",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -122,14 +119,12 @@ export class TableHeaderComponent {
                     "tags": [],
                     "text": "adds a border to the right of the header. *"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "divider",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "TableSizes",
@@ -148,14 +143,12 @@ export class TableHeaderComponent {
                     "tags": [],
                     "text": "The size of the cell. Follows table size.\nWhen size is equal and textWrap is false, the text will truncate with Ellipsis.\nOther sizes won't affect cell current implementation."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "TableSizes.EXPAND"
             },
             "fixed": {
                 "type": "boolean",
-                "attribute": "fixed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -171,14 +164,12 @@ export class TableHeaderComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "fixed",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "sortDirection": {
                 "type": "string",
-                "attribute": "sort-direction",
                 "mutable": true,
                 "complexType": {
                     "original": "TableSortDirections",
@@ -197,13 +188,11 @@ export class TableHeaderComponent {
                     "tags": [],
                     "text": "The direction in which the column data is sorted. Per default, it is unsorted and no button is visible. If your data comes presorted, you need to adjust this."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "sort-direction",
                 "reflect": true
             },
             "sortId": {
                 "type": "string",
-                "attribute": "sort-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -216,13 +205,11 @@ export class TableHeaderComponent {
                     "tags": [],
                     "text": "Optional string to uniquely represent the header, this id will be emitted by the table b2b-sort-change event. If not provided, the event will emit the header textContent."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "sort-id",
                 "reflect": false
             },
             "colspan": {
                 "type": "number",
-                "attribute": "colspan",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -235,13 +222,11 @@ export class TableHeaderComponent {
                     "tags": [],
                     "text": "The width of the column. Increase it to change the size of the column relative to other columns."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "colspan",
                 "reflect": false
             },
             "contentAlign": {
                 "type": "string",
-                "attribute": "content-align",
                 "mutable": false,
                 "complexType": {
                     "original": "ContentAlignment",
@@ -260,14 +245,12 @@ export class TableHeaderComponent {
                     "tags": [],
                     "text": "Alignment of the content of the cell, by default is to the left. *"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "content-align",
                 "reflect": false,
                 "defaultValue": "ContentAlignment.LEFT"
             },
             "totalCols": {
                 "type": "number",
-                "attribute": "total-cols",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -283,8 +266,7 @@ export class TableHeaderComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "total-cols",
                 "reflect": false
             }
         };

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

@@ -3,17 +3,7 @@ import { TableColourOptions, TableSizes, } from "../../../utils/types/table.type
 import { isFirstRow } from "../utils";
 export class TableRowComponent {
     constructor() {
-        /** Whether the row will be highlighted on mouse over **/
-        this.highlight = true;
-        /** Background color of the row. Use it semantically. This color selection have hover states **/
-        this.color = 'default';
-        /** If a selectable row is a parent for an accordion, it becomes indeterminate when some of it's children are checked, but not all. */
-        this.indeterminate = false;
-        /** If a selectable row is currently checked. Per default, it is false. */
-        this.checked = false;
         this.parentRowGroup = null;
-        this.isAccordionValue = false;
-        this.isOpen = false;
         this.toggleOpen = () => {
             this.isOpen = !this.isOpen;
             this.b2bOpen.emit(this.isOpen);
@@ -72,6 +62,15 @@ export class TableRowComponent {
                 return (h("b2b-table-header", { class: "b2b-table-row__control-cell--accordion" }));
             }
         };
+        this.highlight = true;
+        this.color = 'default';
+        this.selectable = undefined;
+        this.size = undefined;
+        this.value = undefined;
+        this.indeterminate = false;
+        this.checked = false;
+        this.isAccordionValue = false;
+        this.isOpen = false;
     }
     toggleSelected(event) {
         var _a;
@@ -111,12 +110,12 @@ export class TableRowComponent {
         }
     }
     render() {
-        return (h(Host, { key: '09109aed96e87e84242ab7ae0decf32989fdaad3', class: {
+        return (h(Host, { key: '9a5b7dad23904822431e478a2cba8afd65d41d49', 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", { key: '3ffcf53ef30a01f25dbcd6eb172f6f4164ac94ac' })));
+            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'ce9384518ed7337c3e0bd6e22a8b206af8a7452e' })));
     }
     static get is() { return "b2b-table-row"; }
     static get encapsulation() { return "shadow"; }
@@ -134,7 +133,6 @@ export class TableRowComponent {
         return {
             "highlight": {
                 "type": "boolean",
-                "attribute": "highlight",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -147,14 +145,12 @@ export class TableRowComponent {
                     "tags": [],
                     "text": "Whether the row will be highlighted on mouse over *"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "highlight",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "TableColourOptions",
@@ -173,14 +169,12 @@ export class TableRowComponent {
                     "tags": [],
                     "text": "Background color of the row. Use it semantically. This color selection have hover states *"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'default'"
             },
             "selectable": {
                 "type": "boolean",
-                "attribute": "selectable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -196,13 +190,11 @@ export class TableRowComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selectable",
                 "reflect": false
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "TableSizes",
@@ -224,13 +216,11 @@ export class TableRowComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -243,13 +233,11 @@ export class TableRowComponent {
                     "tags": [],
                     "text": "The unique identifier for a selectable row. It is emitted when the row is selected."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": false
             },
             "indeterminate": {
                 "type": "boolean",
-                "attribute": "indeterminate",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -262,14 +250,12 @@ export class TableRowComponent {
                     "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."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "indeterminate",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -282,8 +268,7 @@ export class TableRowComponent {
                     "tags": [],
                     "text": "If a selectable row is currently checked. Per default, it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -3,23 +3,6 @@ import { TableRowgroupTypes, TableSizes, } from "../../../utils/types/table.type
 import { updateCheckboxState, getFirstRow, getAllRows, getRemainingRows, isFirstRow, } from "../utils";
 export class TableRowgroupComponent {
     constructor() {
-        /** Rowgroup allows grouping rows by context: header, body or footer.
-         * Header rows are by default not highlightable on mouse over.
-         **/
-        this.type = TableRowgroupTypes.HEADER;
-        /** Renders the rowgroup as an accordion. Both header and body must have accordion set to true.
-         * One table can contain multiple rowgroups of type body, each of which represents an accordion row with children.
-         */
-        this.accordion = false;
-        /** If the rows in the rowgroup can be selected via checkmark. Per default, it is false. */
-        this.selectable = false;
-        /** Sets the header rowgroup position to sticky. Use this in a scrollable container. */
-        this.fixed = false;
-        /** Only use when accordion property is true.
-         * Will render the accordion opened if set to true. By default, is false.
-         */
-        this.opened = false;
-        this.selectedValues = [];
         this.toggleSelectAll = (event, children) => {
             this.toggleList(children, event);
             const rows = children.filter(child => !isFirstRow(child));
@@ -71,6 +54,13 @@ export class TableRowgroupComponent {
                 }
             }
         };
+        this.type = TableRowgroupTypes.HEADER;
+        this.size = undefined;
+        this.accordion = false;
+        this.selectable = false;
+        this.fixed = false;
+        this.opened = false;
+        this.selectedValues = [];
     }
     handleOpenChange(event) {
         this.toggleChildRowVisibility(event.detail);
@@ -123,11 +113,11 @@ export class TableRowgroupComponent {
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: 'a03c60c76b29eac8a0a0d57ff7e489d627e24116', class: {
+        return (h(Host, { key: '13fd30394de031e092fba44f9321c87a3e8429ec', 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: '527e1a3c9289ad784ec8197f8bf29db055b7e254' })));
+            }, role: "rowgroup" }, h("slot", { key: '7858dfcb69a29d791bd419a30b9cc4f95e3b2280' })));
     }
     static get is() { return "b2b-table-rowgroup"; }
     static get encapsulation() { return "shadow"; }
@@ -145,7 +135,6 @@ export class TableRowgroupComponent {
         return {
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "TableRowgroupTypes",
@@ -164,14 +153,12 @@ export class TableRowgroupComponent {
                     "tags": [],
                     "text": "Rowgroup allows grouping rows by context: header, body or footer.\nHeader rows are by default not highlightable on mouse over."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "TableRowgroupTypes.HEADER"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "TableSizes",
@@ -193,13 +180,11 @@ export class TableRowgroupComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false
             },
             "accordion": {
                 "type": "boolean",
-                "attribute": "accordion",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -212,14 +197,12 @@ export class TableRowgroupComponent {
                     "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."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "accordion",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "selectable": {
                 "type": "boolean",
-                "attribute": "selectable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -232,14 +215,12 @@ export class TableRowgroupComponent {
                     "tags": [],
                     "text": "If the rows in the rowgroup can be selected via checkmark. Per default, it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selectable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "fixed": {
                 "type": "boolean",
-                "attribute": "fixed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -252,14 +233,12 @@ export class TableRowgroupComponent {
                     "tags": [],
                     "text": "Sets the header rowgroup position to sticky. Use this in a scrollable container."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "fixed",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "opened": {
                 "type": "boolean",
-                "attribute": "opened",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -272,8 +251,7 @@ export class TableRowgroupComponent {
                     "tags": [],
                     "text": "Only use when accordion property is true.\nWill render the accordion opened if set to true. By default, is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "opened",
                 "reflect": true,
                 "defaultValue": "false"
             }