@scania/tegel 1.40.0-ts-strict-mode-beta.0 → 1.41.0-beta.0

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

@@ -1,35 +1,48 @@
 import { Host, h, } from "@stencil/core";
 import { convertToString } from "../../../utils/convertToString";
+import { closestByTag, isTag } from "../../../utils/dom";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the option label text.
  */
 export class TdsDropdownOption {
     constructor() {
+        /** Sets the option as disabled. */
+        this.disabled = false;
+        this.selected = false;
+        this.multiselect = false;
+        this.size = 'lg';
         this.parentElement = null;
         // @ts-expect-error - label property is used internally for text content tracking
         // eslint-disable-next-line no-unused-vars,
         this.label = '';
         this.componentWillRender = () => {
-            var _a, _b, _c;
-            if (!this.host.parentElement) {
+            var _a, _b;
+            if (!this.host.parentElement)
                 return;
+            const directParent = this.host.parentElement;
+            if (isTag(directParent, 'tds-dropdown')) {
+                this.parentElement = directParent;
+            }
+            else {
+                const root = this.host.getRootNode();
+                if (root instanceof ShadowRoot) {
+                    this.parentElement = closestByTag(root.host, 'tds-dropdown');
+                }
+                else {
+                    this.parentElement = null;
+                }
             }
-            this.parentElement =
-                ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === 'TDS-DROPDOWN'
-                    ? this.host.parentElement
-                    : this.host.getRootNode().host;
             if (this.parentElement) {
-                this.multiselect = (_b = this.parentElement.multiselect) !== null && _b !== void 0 ? _b : false;
+                this.multiselect = (_a = this.parentElement.multiselect) !== null && _a !== void 0 ? _a : false;
                 this.size = this.parentElement.size || 'lg';
             }
-            this.label = ((_c = this.host.textContent) === null || _c === void 0 ? void 0 : _c.trim()) || '';
+            this.label = ((_b = this.host.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '';
         };
         this.handleSingleSelect = () => {
-            var _a, _b;
             if (!this.disabled) {
                 this.selected = true;
-                (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
-                (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.close();
+                this.parentElement.appendValue(this.internalValue);
+                this.parentElement.close();
                 this.tdsSelect.emit({
                     value: this.internalValue,
                     selected: this.selected,
@@ -37,10 +50,9 @@ export class TdsDropdownOption {
             }
         };
         this.handleMultiselect = (event) => {
-            var _a, _b;
             if (!this.disabled) {
                 if (event.detail.checked) {
-                    (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
+                    this.parentElement.appendValue(this.internalValue);
                     this.selected = true;
                     this.tdsSelect.emit({
                         value: this.internalValue,
@@ -48,7 +60,7 @@ export class TdsDropdownOption {
                     });
                 }
                 else {
-                    (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.removeValue(this.internalValue);
+                    this.parentElement.removeValue(this.internalValue);
                     this.selected = false;
                     this.tdsSelect.emit({
                         value: this.internalValue,
@@ -72,13 +84,6 @@ export class TdsDropdownOption {
                 this.tdsBlur.emit(event);
             }
         };
-        this.value = undefined;
-        this.internalValue = undefined;
-        this.disabled = false;
-        this.tdsAriaLabel = undefined;
-        this.selected = false;
-        this.multiselect = false;
-        this.size = 'lg';
     }
     /** Method to select/deselect an option. */
     async setSelected(selected) {
@@ -91,14 +96,13 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'c073be0f228d93964e103da392ef7609878f9d0c' }, h("div", { key: 'bb4349fa2c32884bfafc80cd3c58a0e9fe738e53', class: `dropdown-option
+        return (h(Host, { key: '9fa5bfe8a6dc4596c0181c3319cba2e4101b7502' }, h("div", { key: 'b160e2007f01dfa6b13b633408125cd32159bb95', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
           ` }, this.multiselect ? (h("div", { class: "multiselect", onKeyDown: (event) => {
-                var _a;
                 if (event.key === 'Escape') {
-                    (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.close();
+                    this.parentElement.close();
                 }
             } }, h("tds-checkbox", { onTdsChange: (event) => {
                 this.handleMultiselect(event);
@@ -139,8 +143,10 @@ export class TdsDropdownOption {
                     "tags": [],
                     "text": "Value of the dropdown option"
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "disabled": {
                 "type": "boolean",
@@ -156,8 +162,10 @@ export class TdsDropdownOption {
                     "tags": [],
                     "text": "Sets the option as disabled."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -174,8 +182,10 @@ export class TdsDropdownOption {
                     "tags": [],
                     "text": "Defines aria-label attribute for the option"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }

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

@@ -229,7 +229,8 @@ body {
 :host .dropdown-select.disabled .label-inside,
 :host .dropdown-select.disabled .placeholder,
 :host .dropdown-select.disabled .label-inside-as-placeholder,
-:host .dropdown-select.disabled .value-wrapper {
+:host .dropdown-select.disabled .value-wrapper,
+:host .dropdown-select.disabled .menu-icon {
   color: var(--tds-dropdown-disabled-color);
 }
 :host .dropdown-select.disabled button {
@@ -326,6 +327,7 @@ body {
   overflow-y: auto;
   transform: scaleY(0);
   pointer-events: none;
+  background-color: var(--tds-dropdown-bg);
 }
 :host .dropdown-list:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;