@scania/tegel 0.0.11 → 0.0.12

package/dist/collection/components/datetime/datetime.js

@@ -22,6 +22,8 @@ export class TdsDatetime {
     };
     this.type = 'datetime-local';
     this.value = '';
+    this.min = undefined;
+    this.max = undefined;
     this.defaultValue = 'none';
     this.disabled = false;
     this.size = 'lg';
@@ -85,7 +87,7 @@ export class TdsDatetime {
         ? `tds-form-datetime-${this.state}`
         : ''}
         ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
-        ` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { class: "tds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("tds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("tds-icon", { size: "20px", name: "clock" }))), h("div", { class: "tds-datetime-bar" })), h("div", { class: "tds-datetime-helper" }, this.helper && (h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
+        ` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { class: "tds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("tds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("tds-icon", { size: "20px", name: "clock" }))), h("div", { class: "tds-datetime-bar" })), h("div", { class: "tds-datetime-helper" }, this.helper && (h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
   }
   static get is() { return "tds-datetime"; }
   static get encapsulation() { return "scoped"; }
@@ -113,7 +115,7 @@ export class TdsDatetime {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Which input type, text, password or similar"
+          "text": "Sets input type"
         },
         "attribute": "type",
         "reflect": true,
@@ -137,6 +139,40 @@ export class TdsDatetime {
         "reflect": true,
         "defaultValue": "''"
       },
+      "min": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets min value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
+        },
+        "attribute": "min",
+        "reflect": false
+      },
+      "max": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets max value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
+        },
+        "attribute": "max",
+        "reflect": false
+      },
       "defaultValue": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/datetime/datetime.stories.js

@@ -64,7 +64,7 @@ export default {
     },
     defaultValue: {
       name: 'Default value',
-      description: 'Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
+      description: 'Sets max value. Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
       control: {
         type: 'radio',
       },
@@ -73,6 +73,26 @@ export default {
         defaultValue: { summary: 'none' },
       },
     },
+    minValue: {
+      description: 'Sets min value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
+      name: 'Min value',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+    maxValue: {
+      description: 'Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
+      name: 'Max value',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
     noMinWidth: {
       name: 'No minimum width',
       description: 'Enables component to shrink below 208px which is the default width.',
@@ -114,13 +134,15 @@ export default {
     type: 'Datetime',
     size: 'Large',
     defaultValue: 'None',
+    minValue: '',
+    maxValue: '',
     noMinWidth: false,
     label: 'Label text',
     helper: 'Helper text',
     disabled: false,
   },
 };
-const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, noMinWidth, label, helper, disabled, }) => {
+const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, minValue, maxValue, noMinWidth, label, helper, disabled, }) => {
   const typeLookup = {
     Datetime: 'datetime-local',
     Date: 'date',
@@ -166,7 +188,9 @@ const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, noMinW
       id="datetime"
       ${defaultValue !== 'None' ? `default-value="${getDefaultValue(defaultValue, type)}"` : ''}
       ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      type="${typeLookup[type]}"
+      type="${typeLookup[type]}"      
+      ${minValue ? `min=${minValue}` : ''}
+      ${maxValue ? `min=${maxValue}` : ''}
       size="${sizeLookup[size]}"
       state="${stateLookup[state]}"
       ${disabled ? 'disabled' : ''}

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -4,7 +4,7 @@ import { Host, h } from '@stencil/core';
  */
 export class TdsDropdownOption {
   constructor() {
-    this.connectedCallback = () => {
+    this.componentWillRender = () => {
       this.parentElement =
         this.host.parentElement.tagName === 'TDS-DROPDOWN'
           ? this.host.parentElement

package/dist/collection/components/dropdown/dropdown.js

@@ -10,11 +10,16 @@ export class TdsDropdown {
         this.children = Array.from(this.host.children);
       }
     };
+    this.componentWillRender = () => {
+      if (!this.options) {
+        this.children = Array.from(this.host.children);
+      }
+    };
     this.setDefaultOption = () => {
       this.children = this.children.map((element) => {
         if (this.multiselect) {
-          this.defaultValue.split(',').forEach((defaultValue) => {
-            if (defaultValue === element.value) {
+          this.defaultValue.split(',').forEach((value) => {
+            if (value === element.value) {
               element.setSelected(true);
               this.selection = this.selection
                 ? [...this.selection, { value: element.value, label: element.textContent }]
@@ -114,10 +119,16 @@ export class TdsDropdown {
     this.filterResult = undefined;
     this.filterFocus = undefined;
   }
-  /** Method that resets the Dropdown. */
+  /** Method that resets the Dropdown, marks all children as non-selected and resets the value to null. */
   async reset() {
-    this.children.forEach((element) => element.setSelected(false));
+    this.children = Array.from(this.host.children)
+      .filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION')
+      .map((element) => {
+      element.setSelected(false);
+      return element;
+    });
     this.selection = null;
+    this.host.setAttribute('value', null);
     this.handleChange();
   }
   /** Method for setting the value of the Dropdown. */
@@ -129,7 +140,9 @@ export class TdsDropdown {
     }
     else {
       this.selection = [{ value: newValue, label: newValueLabel }];
-      this.children = this.children.map((element) => {
+      this.children = Array.from(this.host.children)
+        .filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION')
+        .map((element) => {
         if (element.value !== newValue) {
           element.setSelected(false);
         }
@@ -137,16 +150,20 @@ export class TdsDropdown {
       });
     }
     this.handleChange();
+    this.host.setAttribute('value', this.selection.map((selection) => selection.value).toString());
     return this.selection;
   }
   /** Method for removing a selected value in the Dropdown. */
   async removeValue(oldValue) {
     if (this.multiselect) {
-      this.children.forEach((element) => {
+      this.children = Array.from(this.host.children)
+        .filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION')
+        .map((element) => {
         if (element.value === oldValue) {
           this.selection = this.selection.filter((item) => item.value !== element.value);
           element.setSelected(false);
         }
+        return element;
       });
     }
     else {
@@ -638,12 +655,15 @@ export class TdsDropdown {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "HTMLTdsDropdownOptionElement": {
+              "location": "global"
             }
           },
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Method that resets the Dropdown.",
+          "text": "Method that resets the Dropdown, marks all children as non-selected and resets the value to null.",
           "tags": []
         }
       },
@@ -682,6 +702,9 @@ export class TdsDropdown {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "HTMLTdsDropdownOptionElement": {
+              "location": "global"
             }
           },
           "return": "Promise<{ value: string; label: string; }[]>"

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

@@ -27,5 +27,5 @@
 }
 :host .state-open .button {
   position: relative;
-  z-index: 801;
+  z-index: 901;
 }

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

@@ -34,5 +34,5 @@
 }
 :host .wrapper.state-open .button {
   position: relative;
-  z-index: 801;
+  z-index: 901;
 }

package/dist/collection/components/modal/modal.css

@@ -224,7 +224,7 @@ slot[name=header]::slotted(*) {
   position: fixed;
   height: 100%;
   width: 100%;
-  z-index: 600;
+  z-index: 700;
   background-color: var(--tds-modal-backdrop);
   padding: 0 16px;
 }
@@ -303,7 +303,7 @@ button.tds-modal-close {
   position: fixed;
   height: 100%;
   width: 100%;
-  z-index: 600;
+  z-index: 700;
   background-color: var(--tds-modal-backdrop);
   padding: 0 16px;
 }

package/dist/collection/components/popover-canvas/popover-canvas.css

@@ -5,7 +5,7 @@
   background-color: var(--tds-popover-canvas-background);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
-  z-index: 800;
+  z-index: 900;
 }
 .tds-popover-canvas * {
   box-sizing: border-box;

package/dist/collection/components/popover-menu/popover-menu.css

@@ -6,7 +6,7 @@
   padding: 16px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
-  z-index: 800;
+  z-index: 900;
 }
 .tds-popover-menu * {
   box-sizing: border-box;

package/dist/collection/components/popover-menu/popover-menu.js

@@ -86,7 +86,7 @@ export class TdsPopoverMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides if the Popover Menu should be visible from the start"
+          "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside. This\nalso means that clicking outside of the popover won't close it."
         },
         "attribute": "show",
         "reflect": false,

package/dist/collection/components/side-menu/side-menu-overlay/side-menu-overlay.css

@@ -1,8 +1,15 @@
 :host {
-  position: absolute;
+  position: fixed;
   width: 100%;
   height: 100%;
   background-color: black;
   transition: opacity 0.4s linear;
   opacity: 0;
+}
+
+div {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }

package/dist/collection/components/side-menu/side-menu.css

@@ -9,6 +9,7 @@
   top: 0;
   width: 100%;
   height: 100%;
+  z-index: 400;
 }
 :host .wrapper {
   height: inherit;
@@ -48,41 +49,41 @@
 }
 
 @media (max-width: 992px) {
-  :host([open]) {
+  :host(.menu-opened) {
     pointer-events: auto;
-    z-index: 301;
+    z-index: 400;
   }
 }
 @media (min-width: 992px) {
-  :host([persistent]) {
+  :host(.menu-persistent) {
     pointer-events: auto;
     position: static;
     width: 272px;
     height: auto;
     border-right: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
   }
-  :host([persistent]) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay) {
+  :host(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay) {
     display: none;
   }
-  :host([persistent]) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button) {
+  :host(.menu-persistent) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button) {
     display: none;
   }
-  :host([persistent]) .wrapper .tds-side-menu-wrapper {
+  :host(.menu-persistent) .wrapper .tds-side-menu-wrapper {
     transform: none;
   }
-  :host([persistent]) .menu {
+  :host(.menu-persistent) .menu {
     width: 272px;
   }
-  :host([persistent]) .state-closed {
+  :host(.menu-persistent) .state-closed {
     display: block;
   }
-  :host([persistent]):host([collapsed]) {
+  :host(.menu-persistent):host(.menu-collapsed) {
     width: 69px;
   }
-  :host([persistent]):host([collapsed]) .menu {
+  :host(.menu-persistent):host(.menu-collapsed) .menu {
     width: 68px;
   }
-  :host([persistent]) slot[name=end]::slotted(*) {
+  :host(.menu-persistent) slot[name=end]::slotted(*) {
     display: none;
   }
 }

package/dist/collection/components/side-menu/side-menu.js

@@ -93,7 +93,11 @@ export class TdsSideMenu {
     this.isClosed = true;
   }
   render() {
-    return (h(Host, { role: "navigation" }, h("div", { class: {
+    return (h(Host, { role: "navigation", class: {
+        'menu-opened': this.open,
+        'menu-persistent': this.persistent,
+        'menu-collapsed': this.collapsed,
+      } }, h("div", { class: {
         'wrapper': true,
         'state-upper-slot-empty': this.isUpperSlotEmpty,
         'state-open': this.isOpen || this.isOpening,
@@ -129,7 +133,7 @@ export class TdsSideMenu {
           "text": "Applicable only for mobile. If the Side Menu is open or not."
         },
         "attribute": "open",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       },
       "persistent": {
@@ -147,7 +151,7 @@ export class TdsSideMenu {
           "text": "Applicable only for desktop. If the Side Menu should always be shown."
         },
         "attribute": "persistent",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       },
       "collapsed": {
@@ -165,7 +169,7 @@ export class TdsSideMenu {
           "text": "If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.\nNOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tds-Collapse event."
         },
         "attribute": "collapsed",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       }
     };

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

@@ -10,9 +10,9 @@ export class TdsTable {
     this.verticalDividers = false;
     this.compactDesign = false;
     this.noMinWidth = undefined;
-    this.enableMultiselect = false;
-    this.enableExpandableRows = false;
-    this.enableResponsive = false;
+    this.multiselect = false;
+    this.expandableRows = false;
+    this.responsive = false;
     this.modeVariant = null;
     this.tableId = generateUniqueId();
   }
@@ -24,10 +24,10 @@ export class TdsTable {
     });
   }
   enableMultiselectChanged(newValue) {
-    this.emitInternalTdsPropChange('enableMultiselect', newValue);
+    this.emitInternalTdsPropChange('multiselect', newValue);
   }
   enableExpandableRowsChanged(newValue) {
-    this.emitInternalTdsPropChange('enableExpandableRows', newValue);
+    this.emitInternalTdsPropChange('expandableRows', newValue);
   }
   compactDesignChanged(newValue) {
     this.emitInternalTdsPropChange('compactDesign', newValue);
@@ -42,12 +42,16 @@ export class TdsTable {
     this.emitInternalTdsPropChange('modeVariant', newValue);
   }
   render() {
-    return (h(Host, { class: { 'tds-table--responsive': this.enableResponsive } }, h("table", { class: {
+    return (h(Host, { class: {
+        'tds-table--responsive': this.responsive,
+        'tds-mode-variant-primary': this.modeVariant === 'primary',
+        'tds-mode-variant-secondary': this.modeVariant === 'secondary',
+      } }, h("table", { class: {
         'tds-table': true,
         'tds-table--compact': this.compactDesign,
         'tds-table--divider': this.verticalDividers,
         'tds-table--no-min-width': this.noMinWidth,
-        'tds-table--responsive': this.enableResponsive,
+        'tds-table--responsive': this.responsive,
       } }, h("slot", null))));
   }
   static get is() { return "tds-table"; }
@@ -117,7 +121,7 @@ export class TdsTable {
         "attribute": "no-min-width",
         "reflect": true
       },
-      "enableMultiselect": {
+      "multiselect": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -131,11 +135,11 @@ export class TdsTable {
           "tags": [],
           "text": "Enables multiselect feature of Table"
         },
-        "attribute": "enable-multiselect",
+        "attribute": "multiselect",
         "reflect": true,
         "defaultValue": "false"
       },
-      "enableExpandableRows": {
+      "expandableRows": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -149,11 +153,11 @@ export class TdsTable {
           "tags": [],
           "text": "Enables extended row feature of Table"
         },
-        "attribute": "enable-expandable-rows",
+        "attribute": "expandable-rows",
         "reflect": true,
         "defaultValue": "false"
       },
-      "enableResponsive": {
+      "responsive": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -167,7 +171,7 @@ export class TdsTable {
           "tags": [],
           "text": "Enables Table to take 100% available width with equal spacing of columns"
         },
-        "attribute": "enable-responsive",
+        "attribute": "responsive",
         "reflect": true,
         "defaultValue": "false"
       },
@@ -238,10 +242,10 @@ export class TdsTable {
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
-        "propName": "enableMultiselect",
+        "propName": "multiselect",
         "methodName": "enableMultiselectChanged"
       }, {
-        "propName": "enableExpandableRows",
+        "propName": "expandableRows",
         "methodName": "enableExpandableRowsChanged"
       }, {
         "propName": "compactDesign",

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

@@ -1,8 +1,5 @@
 import { h, Host, } from '@stencil/core';
-const relevantTableProps = [
-  'enableMultiselect',
-  'enableExpandableRows',
-];
+const relevantTableProps = ['multiselect', 'expandableRows'];
 /**
  * @slot <default> - <b>Unnamed slot.</b> For table rows.
  * @slot no-result - Slot for no result message when using filtering.
@@ -39,9 +36,9 @@ export class TdsTableBody {
     this.bodyData = undefined;
     this.noResultMessage = undefined;
     this.rowsPerPage = 1;
-    this.enableMultiselect = false;
+    this.multiselect = false;
     this.enablePaginationTableBody = false;
-    this.enableExpandableRows = true;
+    this.expandableRows = false;
     this.innerBodyData = [];
     this.bodyDataManipulated = [];
     this.bodyDataOriginal = [];
@@ -98,7 +95,7 @@ export class TdsTableBody {
     };
   }
   sortData(keyValue, sortingDirection) {
-    if (this.enableMultiselect) {
+    if (this.multiselect) {
       // Uncheck all checkboxes as the state of checkbox is lost on sorting. Do it only in case multiSelect is True.
       this.uncheckAll();
     }
@@ -125,7 +122,7 @@ export class TdsTableBody {
   }
   searchFunction(searchTerm) {
     // grab all rows in body
-    const dataRowsFiltering = this.host.querySelectorAll('tds-table-body-row');
+    const dataRowsFiltering = this.host.querySelectorAll('tds-table-body-row, tds-table-body-row-expandable');
     if (searchTerm.length > 0) {
       if (this.enablePaginationTableBody) {
         this.tempPaginationDisable = true;
@@ -190,7 +187,7 @@ export class TdsTableBody {
   componentWillRender() {
     const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
     // multiselect and expended features requires one extra column for controls...
-    if (this.enableMultiselect || this.enableExpandableRows) {
+    if (this.multiselect || this.expandableRows) {
       this.columnsNumber = headerColumnsNo + 1;
     }
     else {
@@ -252,9 +249,9 @@ export class TdsTableBody {
   static get states() {
     return {
       "rowsPerPage": {},
-      "enableMultiselect": {},
+      "multiselect": {},
       "enablePaginationTableBody": {},
-      "enableExpandableRows": {},
+      "expandableRows": {},
       "innerBodyData": {},
       "bodyDataManipulated": {},
       "bodyDataOriginal": {},

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

@@ -20,11 +20,11 @@
 }
 
 :host(.tds-table__row--selected) {
-  background-color: var(--tds-table-body-row-background-active);
+  background-color: var(--tds-table-body-row-background-selected);
 }
 
 :host(.tds-table__row--selected:hover) {
-  background-color: var(--tds-table-body-row-background-active-hover);
+  background-color: var(--tds-table-body-row-background-selected-hover);
 }
 
 :host(.tds-table__row--hidden) {

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

@@ -1,22 +1,20 @@
 import { h, Host } from '@stencil/core';
 const relevantTableProps = [
-  'enableMultiselect',
+  'multiselect',
   'verticalDividers',
   'compactDesign',
-  'modeVariant',
 ];
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the cells.
  */
 export class TdsTableBodyRow {
   constructor() {
-    this.enableMultiselect = false;
+    this.multiselect = false;
     this.bodyCheckBoxStatus = false;
     this.mainCheckBoxStatus = false;
     this.verticalDividers = false;
     this.compactDesign = false;
     this.noMinWidth = false;
-    this.modeVariant = null;
     this.tableId = '';
   }
   bodyCheckBoxClicked(event) {
@@ -82,9 +80,7 @@ export class TdsTableBodyRow {
         'tds-table__row': true,
         'tds-table__compact': this.compactDesign,
         'tds-table--divider': this.verticalDividers,
-        'tds-mode-variant-primary': this.modeVariant === 'primary',
-        'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-      } }, this.enableMultiselect && (h("td", { class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { onTdsChange: (event) => this.bodyCheckBoxClicked(event), checked: this.bodyCheckBoxStatus }))), h("slot", null)));
+      } }, this.multiselect && (h("td", { class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { onTdsChange: (event) => this.bodyCheckBoxClicked(event), checked: this.bodyCheckBoxStatus }))), h("slot", null)));
   }
   static get is() { return "tds-table-body-row"; }
   static get encapsulation() { return "shadow"; }
@@ -100,13 +96,12 @@ export class TdsTableBodyRow {
   }
   static get states() {
     return {
-      "enableMultiselect": {},
+      "multiselect": {},
       "bodyCheckBoxStatus": {},
       "mainCheckBoxStatus": {},
       "verticalDividers": {},
       "compactDesign": {},
       "noMinWidth": {},
-      "modeVariant": {},
       "tableId": {}
     };
   }

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

@@ -72,6 +72,10 @@
   padding: 8px 16px 8px 66px;
 }
 
+:host(.tds-table__row--hidden) {
+  display: none;
+}
+
 :host(.tds-table--divider) .tds-table__cell--expand {
   border-right: 1px solid var(--tds-table-divider);
 }