@scania/tegel 1.40.0-stencil-core-4.38.1-beta.0 → 1.40.0-ts-strict-mode-beta.0

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

@@ -5,26 +5,18 @@ import inheritAttributes from "../../utils/inheritAttributes";
  */
 export class TdsPopoverMenu {
     constructor() {
-        /** Controls whether the Popover is shown or not. If this is set hiding and showing
-         * will be decided by this prop and will need to be controlled from the outside. This
-         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
-         */
+        this.inheritedAttributes = {};
+        this.selector = undefined;
+        this.referenceEl = undefined;
         this.show = null;
-        /** Decides if the component should be visible from the start. */
         this.defaultShow = false;
-        /** Decides the placement of the Popover Menu */
         this.placement = 'auto';
-        /** Whether the popover should animate when being opened/closed or not */
         this.animation = 'none';
-        /** Sets the offset skidding */
         this.offsetSkidding = 0;
-        /** Sets the offset distance */
         this.offsetDistance = 8;
-        /** If true this unsets the width (160px) of the Popover Menu */
         this.fluidWidth = false;
-        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
-        this.inheritedAttributes = [];
+        this.childRef = undefined;
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -36,15 +28,15 @@ export class TdsPopoverMenu {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ad39066c2a2f7d4e4696143095fa8a0032d7c148', class: {
+        return (h(Host, { key: 'cc1c55cdc6112cca33087fd541b2bb60489d1368', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, h("tds-popover-core", { key: 'f261b18f6e1e26df1baf39628911cb885277b431', class: {
+            } }, h("tds-popover-core", { key: 'fb4da1823553dddf0e1a45a5626dfac3589ade1a', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'f1549f6d338ed8e9a511577a85735b834a89df27', role: "menu" }, h("slot", { key: 'def698636f21c11133ad0289b21b76db0f208116' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '5b0a938b6e36afee22effcc2e19bae366fc7ef67', role: "menu" }, h("slot", { key: 'bf2631a96e721287936797c9865ea56d134cfabc' })))));
     }
     static get is() { return "tds-popover-menu"; }
     static get encapsulation() { return "scoped"; }
@@ -74,17 +66,15 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "The CSS-selector for an element that will trigger the pop-over"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selector"
+                "attribute": "selector",
+                "reflect": false
             },
             "referenceEl": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement | null",
-                    "resolved": "HTMLElement",
+                    "resolved": "HTMLElement | null | undefined",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -97,16 +87,14 @@ export class TdsPopoverMenu {
                 "docs": {
                     "tags": [],
                     "text": "Element that will trigger the pop-over (takes priority over selector)"
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "show": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | null",
+                    "resolved": "boolean | null",
                     "references": {}
                 },
                 "required": false,
@@ -115,10 +103,8 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "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. Takes precedence over `defaultShow` prop."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "show",
+                "reflect": false,
                 "defaultValue": "null"
             },
             "defaultShow": {
@@ -135,10 +121,8 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Decides if the component should be visible from the start."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "default-show",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "placement": {
@@ -161,10 +145,8 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Decides the placement of the Popover Menu"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "placement",
+                "reflect": false,
                 "defaultValue": "'auto'"
             },
             "animation": {
@@ -181,10 +163,8 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Whether the popover should animate when being opened/closed or not"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "animation",
+                "reflect": false,
                 "defaultValue": "'none'"
             },
             "offsetSkidding": {
@@ -201,10 +181,8 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Sets the offset skidding"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "offset-skidding",
+                "reflect": false,
                 "defaultValue": "0"
             },
             "offsetDistance": {
@@ -221,10 +199,8 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Sets the offset distance"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "offset-distance",
+                "reflect": false,
                 "defaultValue": "8"
             },
             "fluidWidth": {
@@ -241,18 +217,16 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "If true this unsets the width (160px) of the Popover Menu"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "fluid-width",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "modeVariant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -261,10 +235,8 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Mode variant of the component, based on current mode."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "mode-variant",
+                "reflect": false,
                 "defaultValue": "null"
             }
         };

package/dist/collection/components/radio-button/radio-button.js

@@ -5,20 +5,20 @@ import generateUniqueId from "../../utils/generateUniqueId";
  */
 export class TdsRadioButton {
     constructor() {
-        /** Unique Radio Button identifier. */
-        this.radioId = generateUniqueId();
-        /** Decides if the Radio Button is checked or not. */
-        this.checked = false;
-        /** Decides if the Radio Button is required or not. */
-        this.required = false;
-        /** Decides if the Radio Button is disabled or not. */
-        this.disabled = false;
         this.handleChange = () => {
             this.tdsChange.emit({
                 radioId: this.radioId,
                 value: this.value,
             });
         };
+        this.name = undefined;
+        this.value = undefined;
+        this.radioId = generateUniqueId();
+        this.checked = false;
+        this.required = false;
+        this.disabled = false;
+        this.tdsAriaLabel = undefined;
+        this.tdsTabIndex = undefined;
     }
     /** Method to programmatically focus the radio button element */
     async focusElement() {
@@ -27,7 +27,10 @@ export class TdsRadioButton {
         }
     }
     render() {
-        return (h("div", { key: '48a31826daeef320097430deec2f57188ad3cd80', class: "tds-radio-button" }, h("input", { key: '6bc9711fae2e1ea4b8bc18cd441a364eb0bc4d9c', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: 'b2dbeea2ca194adea717086ba0d69d023860324d', htmlFor: this.radioId }, h("slot", { key: '422fab6ae9d579cf46d4110a61782a501dfb6a2a', name: "label" }))));
+        return (h("div", { key: '48a31826daeef320097430deec2f57188ad3cd80', class: "tds-radio-button" }, h("input", { key: '591550d8bf69ddc6f51f81c012b92f61d850ba6e', ref: (inputEl) => {
+                if (inputEl)
+                    this.inputElement = inputEl;
+            }, "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '203bfad85ba5a8387fdfcb8d65fbeb0d8a0dd9ad', htmlFor: this.radioId }, h("slot", { key: 'a2b470cab8cfcab9c9120ac17af63c1261f2b926', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }
@@ -57,10 +60,8 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Name of Radio Button, used for reference."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
+                "attribute": "name",
+                "reflect": false
             },
             "value": {
                 "type": "string",
@@ -76,10 +77,8 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Value of input."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
+                "attribute": "value",
+                "reflect": false
             },
             "radioId": {
                 "type": "string",
@@ -95,10 +94,8 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Unique Radio Button identifier."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "radio-id",
+                "reflect": false,
                 "defaultValue": "generateUniqueId()"
             },
             "checked": {
@@ -115,10 +112,8 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is checked or not."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "checked",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "required": {
@@ -135,10 +130,8 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is required or not."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "required",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
@@ -155,10 +148,8 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is disabled or not."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "disabled",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -175,10 +166,8 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Provides an accessible name for the component"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-aria-label"
+                "attribute": "tds-aria-label",
+                "reflect": false
             },
             "tdsTabIndex": {
                 "type": "number",
@@ -194,10 +183,8 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Provides a tabindex used when radio buttons are grouped"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-tab-index"
+                "attribute": "tds-tab-index",
+                "reflect": false
             }
         };
     }

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

@@ -4,7 +4,6 @@ import { h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuCollapseButton {
     constructor() {
-        this.collapsed = false;
         this.handleClick = () => {
             /** Emit a public event that the user can prevent. */
             const tdsCollapseEvent = this.tdsCollapse.emit({
@@ -19,21 +18,23 @@ export class TdsSideMenuCollapseButton {
                 });
             }
         };
+        this.collapsed = false;
     }
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
     }
     connectedCallback() {
+        var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
-        this.collapsed = this.sideMenuEl.collapsed;
+        this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     render() {
-        return (h(Host, { key: 'e8b3276624a214cfa8d8c8a7bbb6757d1a6fe1c3' }, h("div", { key: '1c17452256ad8ca0f901178bdf2120076508ee84', class: {
+        return (h(Host, { key: '551e4feada40e0877a83f9f117d12f064e7134f7' }, h("div", { key: '2ed47deec275d0f61525f1b441f2d6cca94e9961', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '064ec6d7ea6ed2b13223cba39268f484146fee0a', class: { button: true } }, h("button", { key: 'd391bfe9a1e31e85f168b7261b92941b3e64693e', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
+            } }, h("tds-side-menu-item", { key: 'b3bb7346da645c12940a5465c4dc18c148fd1c85', class: { button: true } }, h("button", { key: 'b659aa47f9096384b90852495643b46e76a9bcb8', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
                 this.handleClick();
-            } }, h("svg", { key: '23a6362a7d6ab754d08ac439314fc94e37ec3a88', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '17a188de96b29b501b76294d8dac4f852edc22a3', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: 'a1a2408ee34830a190408c808935e33eed8bce5b' }))))));
+            } }, h("svg", { key: 'c4e533d201f1fca3c833efbbfad632e825d1c7e2', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '7317991b2bcfb52f9ab3695f80993fbc1e95093c', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: 'c347df9c72a4f83de4b9d2ae84a4c659867209d5' }))))));
     }
     static get is() { return "tds-side-menu-collapse-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,12 +6,11 @@ import { Fragment, h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuDropdown {
     constructor() {
-        /** If the dropdown should be open from the start. */
         this.defaultOpen = false;
-        /** If the button that opens the dropdown should appear selected. */
+        this.buttonLabel = undefined;
         this.selected = false;
-        /** Toggle open state programmatically */
         this.open = false;
+        this.hoverState = undefined;
         this.collapsed = false;
     }
     collapsedSideMenuEventHandler(event) {
@@ -52,18 +51,19 @@ export class TdsSideMenuDropdown {
         return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
     }
     connectedCallback() {
+        var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
-        this.collapsed = this.sideMenuEl.collapsed;
+        this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: '2c3887fe8ec9334f7f3b3f46b3bce64712957ae3' }, h("div", { key: 'bedb9fc6f22d0c608b77c2d0d2fe7c8c17eadd59', class: {
+        return (h(Host, { key: 'aeebdc5563c944b02881d11b12387dbc85c82344' }, h("div", { key: '2c6c44cb14b10c0859d0215928bfc5e69be7b8b4', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '83cb1486e99c0f699b02be91bf53df1249076902', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h("tds-side-menu-item", { key: 'ef2ee724b9d9db5e3cce2596abd27a8170e2181e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'e21c03415c48022813b3289f8dd80f21486414f0' }, h("slot", { key: '4462d95bf8e7945741cb54d9f363b8d9cac158e0', name: "icon" }), !this.collapsed && (h(Fragment, { key: '1a65252df105ef6ad9bca35f873fe19e71289b80' }, this.buttonLabel, h("slot", { key: 'e35a184bae5c65fde366ed287062becbc6633cac', name: "label" }), h("tds-icon", { key: '7a4328715c67aaf91a3675574f5aadca9ce8ae3d', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: '1e4e674c5e9b8901b5306bee36bf121aa37112e3', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: '54a5f5f89d595aeae6ac6e41ac553e96466fe4a1', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '20477b6be2c477c48412d0f4bc34f1181bcb00d3', name: "label" }))), h("slot", { key: '9740e5c9cb493e52c104223ec62b47bffc8adc5d' })))));
+            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'f1bf8718d877ea78d339c7501cb20432eb64e0aa' }, h("slot", { key: 'dd3cff6f183511fbbf7dba4b31cfb3805bd74f81', name: "icon" }), !this.collapsed && (h(Fragment, { key: '27efe259a8726195e2dfb355ef03e4a88ee72082' }, this.buttonLabel, h("slot", { key: 'd8e952a51054b8f7d143acf1ebfe8326d32a332e', name: "label" }), h("tds-icon", { key: '7edd1d7a66814451a056b578fa8c7e068dabcdd8', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: '5fb9c3e88e1aefeb38c2f46a18dfc221772b689c', class: "menu", tabindex: this.collapsed ? '0' : undefined }, this.collapsed && (h("h3", { key: '56397951c8c3486719f291a0e283703397ae243d', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '7fc3a35c7506345dc72a64989acf98e1483c126f', name: "label" }))), h("slot", { key: '4e95b1c1fa64906d937788e0c27c64c4e06b7b73' })))));
     }
     static get is() { return "tds-side-menu-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -93,10 +93,8 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "If the dropdown should be open from the start."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "default-open",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "buttonLabel": {
@@ -113,10 +111,8 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-label"
+                "attribute": "button-label",
+                "reflect": false
             },
             "selected": {
                 "type": "boolean",
@@ -132,10 +128,8 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "If the button that opens the dropdown should appear selected."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "selected",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "open": {
@@ -152,10 +146,8 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "Toggle open state programmatically"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "open",
+                "reflect": false,
                 "defaultValue": "false"
             }
         };

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

@@ -12,12 +12,12 @@ export class TdsSideMenuDropdownList {
     connectedCallback() {
         var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
-        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+        this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     render() {
-        return (h(Host, { key: '38e9f561720b3a68528ae69878138ea8e9085e3c', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '9f2e5ea13fe7f4483ae07d5a58208b27a64bbd1b', class: {
+        return (h(Host, { key: 'decb6d57d600ca24140d9cc4d47bdf44f3c34fe4', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '4b41cce5b765b236fba4f965c32652f9594c9c51', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: '10543e9547fc64683e4f96e0ecb72ff82e3ed3ad' }))));
+            } }, h("slot", { key: 'c399388267e8ba6885af0cc0bd8a69bf39c52b7b' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js

@@ -4,7 +4,6 @@ import { h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuDropdownListItem {
     constructor() {
-        /** If the item should appear selected. */
         this.selected = false;
         this.dropdownHasIcon = false;
         this.dropdownHasUser = false;
@@ -16,16 +15,20 @@ export class TdsSideMenuDropdownListItem {
     connectedCallback() {
         var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
-        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+        this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b;
         const dropdownEl = this.host.closest('tds-side-menu-dropdown');
-        const hasUserMenu = dropdownEl === null || dropdownEl === void 0 ? void 0 : dropdownEl.querySelector('tds-side-menu-user');
-        const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="icon"]');
-        const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
-        const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
-        const btnIconIsUserImage = ((_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'tds-side-menu-user-image';
+        let hasUserMenu = null;
+        let dropdownBtnIconSlotEl = null;
+        if (dropdownEl) {
+            hasUserMenu = dropdownEl.querySelector('tds-side-menu-user');
+            dropdownBtnIconSlotEl = (_a = dropdownEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="icon"]');
+        }
+        const btnIconSlottedEls = dropdownBtnIconSlotEl === null || dropdownBtnIconSlotEl === void 0 ? void 0 : dropdownBtnIconSlotEl.assignedElements();
+        const hasBtnIcon = btnIconSlottedEls ? (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0 : false;
+        const btnIconIsUserImage = ((_b = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _b === void 0 ? void 0 : _b.tagName.toLowerCase()) === 'tds-side-menu-user-image';
         if (hasBtnIcon && !btnIconIsUserImage) {
             this.dropdownHasIcon = true;
         }
@@ -34,13 +37,13 @@ export class TdsSideMenuDropdownListItem {
         }
     }
     render() {
-        return (h(Host, { key: '7d711b603579ec67a9f0312071519e31f4a15709', role: "listitem" }, h("div", { key: 'db890287036e3e85f10f7c76454e8ca91ada6f7c', class: {
+        return (h(Host, { key: 'c47d9154b70987212a197a4e1cee3e031c3a5934', role: "listitem" }, h("div", { key: 'd35ce4e0371380a76e59ee983ce32c33a3aa8167', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
                 'component-dropdown-has-user': this.dropdownHasUser,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: '944534e13549524e2e40fd8ad8e0b1d61e1bdbcf' }))));
+            } }, h("slot", { key: '915f92493f1a085f66501d0fbe361818e7dbc63f' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -70,10 +73,8 @@ export class TdsSideMenuDropdownListItem {
                     "tags": [],
                     "text": "If the item should appear selected."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "selected",
+                "reflect": false,
                 "defaultValue": "false"
             }
         };

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

@@ -5,16 +5,16 @@ import dfs from "../../../utils/dfs";
  * */
 export class TdsSideMenuItem {
     constructor() {
-        /** If the item should appear selected. */
         this.selected = false;
-        /** If the item should appear active. Can be used when the item is
-         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
         this.collapsed = false;
         this.hasUserComponent = false;
     }
     findSlottedAndExecute(searchPredicate, callback) {
-        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        var _a;
+        const assignedElements = (_a = this.slotEl) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true });
+        if (!(assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.length))
+            return;
         const firstSlottedElement = assignedElements[0];
         if (firstSlottedElement) {
             const foundElement = dfs(firstSlottedElement, searchPredicate);
@@ -55,16 +55,19 @@ export class TdsSideMenuItem {
         // closest() will return null if side-menu-item is inside a shadowRoot that
         // does not contain a side-menu. This is the case for the side-menu-dropdown.
         this.sideMenuEl = this.host.closest('tds-side-menu');
-        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+        this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     componentDidLoad() {
-        this.slotEl = this.host.shadowRoot.querySelector('slot');
+        var _a, _b;
+        this.slotEl = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) !== null && _b !== void 0 ? _b : null;
         this.updateSlottedElements();
         this.updateHasUserComponent();
-        this.slotEl.addEventListener('slotchange', () => {
-            this.updateSlottedElements();
-            this.updateHasUserComponent();
-        });
+        if (this.slotEl) {
+            this.slotEl.addEventListener('slotchange', () => {
+                this.updateSlottedElements();
+                this.updateHasUserComponent();
+            });
+        }
     }
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
@@ -72,13 +75,13 @@ export class TdsSideMenuItem {
         this.updateHasUserComponent();
     }
     render() {
-        return (h(Host, { key: '94dc12f57a0eedb5ab1528394352c4a7fcea55ff' }, h("div", { key: '3336a6d1af3c573fdbbbf590fae2be3381c89163', class: {
+        return (h(Host, { key: 'ff51604316231f08db7135c89336aa40a34ca780' }, h("div", { key: '7ba6d6ad1646cdcca89ba014eb20115ead57a9cc', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
                 'component-has-user': this.hasUserComponent,
-            } }, h("slot", { key: '5c92976a5aa367142e2af23fdacb6d67c3d2b36c' }))));
+            } }, h("slot", { key: '43b400894c86a51cc1dbe910f8eecab31fad4c45' }))));
     }
     static get is() { return "tds-side-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -108,10 +111,8 @@ export class TdsSideMenuItem {
                     "tags": [],
                     "text": "If the item should appear selected."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "selected",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "active": {
@@ -128,10 +129,8 @@ export class TdsSideMenuItem {
                     "tags": [],
                     "text": "If the item should appear active. Can be used when the item is\ntriggering a dropdown, and the dropdown is open, for example."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "active",
+                "reflect": false,
                 "defaultValue": "false"
             }
         };