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

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

@@ -14,6 +14,31 @@ function hasValueChanged(newValue, currentValue) {
  */
 export class TdsDropdown {
     constructor() {
+        /** Sets the Dropdown in a disabled state */
+        this.disabled = false;
+        /** Mode variant of the component, based on current mode. */
+        this.modeVariant = null;
+        /** The direction the Dropdown should open, auto if not specified. */
+        this.openDirection = 'auto';
+        /** The size of the Dropdown. */
+        this.size = 'lg';
+        this.animation = 'slide';
+        /** Sets the Dropdown in an error state */
+        this.error = false;
+        /** Enables multiselect in the Dropdown. */
+        this.multiselect = false;
+        /** Enables filtration in the Dropdown. */
+        this.filter = false;
+        /** Normalizes input text for fuzzier search */
+        this.normalizeText = true;
+        /** Text that is displayed if filter is used and there are no options that matches the search.
+         * Setting it to an empty string disables message from showing up. */
+        this.noResultText = 'No result';
+        /** Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number. */
+        this.value = null;
+        this.open = false;
+        this.selectedOptions = [];
+        this.filterQuery = '';
         this.hasFocus = false;
         this.setDefaultOption = () => {
             if (this.internalDefaultValue) {
@@ -44,7 +69,7 @@ export class TdsDropdown {
         };
         this.getSelectedChildrenLabels = () => {
             var _a;
-            return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => { var _a; return (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim(); });
+            return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => element.textContent.trim());
         };
         this.getValue = () => {
             const labels = this.getSelectedChildrenLabels();
@@ -75,7 +100,6 @@ export class TdsDropdown {
             return this.openDirection;
         };
         this.handleToggleOpen = () => {
-            var _a;
             if (!this.disabled) {
                 this.open = !this.open;
                 if (this.open) {
@@ -83,7 +107,7 @@ export class TdsDropdown {
                         this.focusInputElement();
                     }
                     else {
-                        const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+                        const button = this.host.shadowRoot.querySelector('button');
                         if (button) {
                             button.focus();
                         }
@@ -111,8 +135,7 @@ export class TdsDropdown {
             }
             else {
                 this.filterResult = children.filter((element) => {
-                    var _a;
-                    if (!this.normalizeString((_a = element === null || element === void 0 ? void 0 : element.textContent) !== null && _a !== void 0 ? _a : '')
+                    if (!this.normalizeString(element.textContent)
                         .toLowerCase()
                         .includes(this.normalizeString(query).toLowerCase())) {
                         element.setAttribute('hidden', '');
@@ -125,6 +148,8 @@ export class TdsDropdown {
             }
         };
         this.handleFilterReset = () => {
+            // Store the current filter query before clearing
+            const clearedValue = this.filterQuery;
             // only reset selected values when filterquery is blank
             if (!this.filterQuery.length) {
                 this.reset();
@@ -134,6 +159,7 @@ export class TdsDropdown {
             this.inputElement.focus();
             // Add this line to ensure internal value is cleared
             this.internalValue = '';
+            this.tdsClear.emit({ clearedValue });
         };
         this.handleFocus = () => {
             this.open = true;
@@ -159,31 +185,6 @@ export class TdsDropdown {
                 this.reset();
             }
         };
-        this.name = undefined;
-        this.disabled = false;
-        this.helper = undefined;
-        this.label = undefined;
-        this.labelPosition = undefined;
-        this.modeVariant = null;
-        this.openDirection = 'auto';
-        this.placeholder = undefined;
-        this.size = 'lg';
-        this.animation = 'slide';
-        this.error = false;
-        this.multiselect = false;
-        this.filter = false;
-        this.normalizeText = true;
-        this.noResultText = 'No result';
-        this.defaultValue = undefined;
-        this.value = null;
-        this.tdsAriaLabel = undefined;
-        this.open = false;
-        this.internalValue = undefined;
-        this.filterResult = undefined;
-        this.filterFocus = undefined;
-        this.internalDefaultValue = undefined;
-        this.selectedOptions = [];
-        this.filterQuery = '';
     }
     handleValueChange(newValue) {
         // Normalize to array
@@ -301,13 +302,10 @@ export class TdsDropdown {
             normalizedValue = [convertToString(value)];
         }
         this.updateDropdownStateFromUser(normalizedValue);
-        return this.getSelectedChildren().map((element) => {
-            var _a;
-            return ({
-                value: element.value,
-                label: (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim(),
-            });
-        });
+        return this.getSelectedChildren().map((element) => ({
+            value: element.value,
+            label: element.textContent.trim(),
+        }));
     }
     async reset() {
         this.updateDropdownStateFromUser([]);
@@ -318,14 +316,13 @@ export class TdsDropdown {
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
-        var _a;
         if (this.filter) {
             // For filter mode, focus the input element
             this.focusInputElement();
         }
         else {
             // For non-filter mode, focus the button element
-            const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+            const button = this.host.shadowRoot.querySelector('button');
             if (button) {
                 button.focus();
             }
@@ -349,6 +346,10 @@ export class TdsDropdown {
             // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
             const isClickOutside = !event.composedPath().includes(this.host);
             if (isClickOutside) {
+                // Emit clear event if there's a filter query when clicking outside
+                if (this.filter && this.filterQuery) {
+                    this.tdsClear.emit({ clearedValue: this.filterQuery });
+                }
                 this.open = false;
             }
         }
@@ -373,7 +374,7 @@ export class TdsDropdown {
         }
     }
     async onKeyDown(event) {
-        var _a, _b;
+        var _a;
         // Get the active element
         const { activeElement } = document;
         if (!activeElement) {
@@ -386,11 +387,8 @@ export class TdsDropdown {
             const startingIndex = activeElement.nextElementSibling
                 ? children.findIndex((element) => element === activeElement.nextElementSibling)
                 : 0;
-            if (children.length > 0) {
-                const elementIndex = findNextFocusableElement(children, startingIndex);
-                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[0];
-                target === null || target === void 0 ? void 0 : target.focus();
-            }
+            const elementIndex = findNextFocusableElement(children, startingIndex);
+            children[elementIndex].focus();
         }
         else if (event.key === 'ArrowUp') {
             /* Get the index of the current focus index, if there is no
@@ -398,11 +396,8 @@ export class TdsDropdown {
             const startingIndex = activeElement.nextElementSibling
                 ? this.getChildren().findIndex((element) => element === activeElement.previousElementSibling)
                 : 0;
-            if (children.length > 0) {
-                const elementIndex = findPreviousFocusableElement(children, startingIndex);
-                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[children.length - 1];
-                target === null || target === void 0 ? void 0 : target.focus();
-            }
+            const elementIndex = findPreviousFocusableElement(children, startingIndex);
+            children[elementIndex].focus();
         }
         else if (event.key === 'Escape') {
             this.open = false;
@@ -411,7 +406,7 @@ export class TdsDropdown {
                 (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
             }
             else {
-                const button = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
+                const button = this.host.shadowRoot.querySelector('button');
                 button === null || button === void 0 ? void 0 : button.focus();
             }
         }
@@ -497,9 +492,9 @@ export class TdsDropdown {
         // Generate unique IDs for associating labels and helpers with the input/button
         const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
         const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
-        return (h(Host, { key: '20b2b8e16e86f66e735870c142caae96094e8a67', class: {
+        return (h(Host, { key: 'ebb4008f7e27e9f9de603b1dfeb5100f45f0e600', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '151a7528da2411eb549ba55b00234609524d21ef', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'b74809f85659d8b59fda7e26cc6ce7d25c1683c9', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '77f30a6ec80264fe89422b8f129e763d2fe2a64c', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3d3d3ca87cae2df4f043feb1f6bdbf4482cc4223', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -543,23 +538,22 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '47278e9797420ea5f5c9c5ea4ef327386b087b53', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
-                if (element)
-                    this.dropdownList = element;
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '48e96d8ecac8918e11c6e2c0e1321802b61dbf7d', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
                 [this.size]: true,
                 [this.getOpenDirection()]: true,
-                'label-outside': !!(this.label && this.labelPosition === 'outside'),
+                'label-outside': this.label && this.labelPosition === 'outside',
                 'open': this.open,
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: 'b50453420be7803742bde1a3bc5ac3274bf61478', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '979d8b7224f9d845a3aa6364f913fdf22bf5ddf9', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'a471701f913ef80a5d7d0875e270c32ebaf236c8', id: helperId, class: {
+            } }, h("slot", { key: 'd49f3a638a9f6b1b08e3489dffad27151c0c554f', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'b38d308604e30fdb130d72295d2d3f7bf2fb9bd6', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1f8160ac1f0ecdc0d4f29faa31c469a0bd04b0d6', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '294692745fec61636576c1f8256050abf1f57913', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '487fb6deb5bd27347b2cd4f607e5488543185894', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -589,8 +583,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Name for the Dropdowns input element."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "disabled": {
                 "type": "boolean",
@@ -606,8 +602,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Sets the Dropdown in a disabled state"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "helper": {
@@ -624,8 +622,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Helper text for the Dropdown."
                 },
-                "attribute": "helper",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper"
             },
             "label": {
                 "type": "string",
@@ -641,8 +641,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Label text for the Dropdown."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "labelPosition": {
                 "type": "string",
@@ -658,15 +660,17 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Label text position"
                 },
-                "attribute": "label-position",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position"
             },
             "modeVariant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | null",
-                    "resolved": "\"primary\" | \"secondary\" | null",
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
@@ -675,8 +679,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Mode variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "openDirection": {
@@ -693,8 +699,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "The direction the Dropdown should open, auto if not specified."
                 },
-                "attribute": "open-direction",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "open-direction",
                 "defaultValue": "'auto'"
             },
             "placeholder": {
@@ -711,8 +719,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Placeholder text for the Dropdown."
                 },
-                "attribute": "placeholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "size": {
                 "type": "string",
@@ -728,8 +738,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "The size of the Dropdown."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "animation": {
@@ -746,8 +758,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "animation",
                 "defaultValue": "'slide'"
             },
             "error": {
@@ -764,8 +778,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Sets the Dropdown in an error state"
                 },
-                "attribute": "error",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "error",
                 "defaultValue": "false"
             },
             "multiselect": {
@@ -782,8 +798,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Enables multiselect in the Dropdown."
                 },
-                "attribute": "multiselect",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "multiselect",
                 "defaultValue": "false"
             },
             "filter": {
@@ -800,8 +818,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Enables filtration in the Dropdown."
                 },
-                "attribute": "filter",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "filter",
                 "defaultValue": "false"
             },
             "normalizeText": {
@@ -818,8 +838,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Normalizes input text for fuzzier search"
                 },
-                "attribute": "normalize-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "normalize-text",
                 "defaultValue": "true"
             },
             "noResultText": {
@@ -827,7 +849,7 @@ export class TdsDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -836,8 +858,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Text that is displayed if filter is used and there are no options that matches the search.\nSetting it to an empty string disables message from showing up."
                 },
-                "attribute": "no-result-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "no-result-text",
                 "defaultValue": "'No result'"
             },
             "defaultValue": {
@@ -854,15 +878,17 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Default value selected in the Dropdown."
                 },
-                "attribute": "default-value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
             },
             "value": {
                 "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "string | number | (string | number)[] | null",
-                    "resolved": "(string | number)[] | null | number | string",
+                    "original": "string | number | (string | number)[]",
+                    "resolved": "(string | number)[] | number | string",
                     "references": {}
                 },
                 "required": false,
@@ -871,8 +897,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "null"
             },
             "tdsAriaLabel": {
@@ -889,8 +917,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Defines aria-label attribute for input"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }
@@ -917,8 +947,8 @@ export class TdsDropdown {
                     "text": "Change event for the Dropdown."
                 },
                 "complexType": {
-                    "original": "{\n    name: string;\n    value: string | null;\n  }",
-                    "resolved": "{ name: string; value: string | null; }",
+                    "original": "{\n    name: string;\n    value: string;\n  }",
+                    "resolved": "{ name: string; value: string; }",
                     "references": {}
                 }
             }, {
@@ -981,20 +1011,35 @@ export class TdsDropdown {
                         }
                     }
                 }
+            }, {
+                "method": "tdsClear",
+                "name": "tdsClear",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Clear event for the Dropdown."
+                },
+                "complexType": {
+                    "original": "{ clearedValue: string }",
+                    "resolved": "{ clearedValue: string; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
         return {
             "setValue": {
                 "complexType": {
-                    "signature": "(value: string | number | string[] | number[], label?: string) => Promise<{ value: string | number; label: string | undefined; }[]>",
+                    "signature": "(value: string | number | string[] | number[], label?: string) => Promise<{ value: string | number; label: string; }[]>",
                     "parameters": [{
                             "name": "value",
                             "type": "string | number | string[] | number[]",
                             "docs": ""
                         }, {
                             "name": "label",
-                            "type": "string | undefined",
+                            "type": "string",
                             "docs": ""
                         }],
                     "references": {
@@ -1007,7 +1052,7 @@ export class TdsDropdown {
                             "id": "global::HTMLTdsDropdownOptionElement"
                         }
                     },
-                    "return": "Promise<{ value: string | number; label: string | undefined; }[]>"
+                    "return": "Promise<{ value: string | number; label: string; }[]>"
                 },
                 "docs": {
                     "text": "Method for setting the selected value of the Dropdown.\n\nSingle selection example:\n\n<code>\ndropdown.setValue('option-1', 'Option 1');\n</code>\n\nMultiselect example:\n\n<code>\ndropdown.setValue(['option-1', 'option-2']);\n</code>",

package/dist/collection/components/footer/footer-group/footer-group.js

@@ -6,25 +6,22 @@ import hasSlot from "../../../utils/hasSlot";
  */
 export class TdsFooterGroup {
     constructor() {
+        /** In mobile, this indicates when the group (if it's in the top part) is opened/closed. */
+        this.open = false;
         /** If the group is placed in the main part of the Footer,
          * it can have either start or end as a slot position otherwise undefined. */
         this.slotPosition = null;
         /** Indicates if a group is part of the top part of the Footer. */
         this.topPartGroup = false;
-        this.titleText = undefined;
-        this.tdsListAriaLabel = undefined;
-        this.open = false;
-        this.isMobile = undefined;
     }
     updateIsMobile() {
         this.isMobile = window.innerWidth <= 992;
     }
     connectedCallback() {
-        var _a, _b;
         this.updateIsMobile();
-        this.topPartGroup = ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.slot) === 'top';
+        this.topPartGroup = this.host.parentElement.slot === 'top';
         if (!this.topPartGroup) {
-            this.slotPosition = ((_b = this.host.parentElement) === null || _b === void 0 ? void 0 : _b.slot) === 'end' ? 'end' : 'start';
+            this.slotPosition = this.host.parentElement.slot === 'end' ? 'end' : 'start';
         }
         if (!this.tdsListAriaLabel) {
             console.warn('Tegel Footer Group component: missing tdsListAriaLabel prop');
@@ -42,12 +39,12 @@ export class TdsFooterGroup {
     }
     render() {
         const hasTitleSlot = hasSlot('title', this.host);
-        return (h(Host, { key: '03334686d168738c5f4c8e24af3683e667fab531', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: '106158a95e6c699615280250d60d629bed56d442', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
+        return (h(Host, { key: 'ae7d97292dba7bf2054e1833e436dbabec499ed7', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: 'e94d8a8f5cdab4eaa1ec72d9d8da2cf3634ddb86', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
             (this.isMobile ? (h("button", { onClick: () => {
                     this.open = !this.open;
-                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: 'ee127c2b7951a4e5f4f541b10de603db4554c0d0', "aria-label": this.tdsListAriaLabel }, h("div", { key: 'f513ab58811b6f2f7ae9c9ed4986367c9169e030', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: 'ab7829753c2e2e80b877470e92f1947d24aefe38', "aria-label": this.tdsListAriaLabel }, h("div", { key: 'e402e251eff4b82e2cfffdb7edc9db3e1c537325', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: 'bc584cbb0542907628ebf05c316f53372bfde08a' }))))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: 'd00e9acc84542e2694b6a9aa4b481a2263f79e4b' }))))));
     }
     static get is() { return "tds-footer-group"; }
     static get encapsulation() { return "shadow"; }
@@ -77,8 +74,10 @@ export class TdsFooterGroup {
                     "tags": [],
                     "text": "Title text for the link group, only valid on top part of Footer."
                 },
-                "attribute": "title-text",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-text"
             },
             "tdsListAriaLabel": {
                 "type": "string",
@@ -94,8 +93,10 @@ export class TdsFooterGroup {
                     "tags": [],
                     "text": "Value to be used for the aria-label attribute for the nav element wrapping the list. Should be unique for accessibility."
                 },
-                "attribute": "tds-list-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-list-aria-label"
             }
         };
     }

package/dist/collection/components/footer/footer-item/footer-item.js

@@ -7,14 +7,10 @@ export class TdsFooterItem {
         this.parentIsTopPart = false;
     }
     connectedCallback() {
-        var _a;
-        const closestGroup = this.host.closest('tds-footer-group');
-        if (closestGroup) {
-            this.parentIsTopPart = ((_a = closestGroup.parentElement) === null || _a === void 0 ? void 0 : _a.slot) === 'top';
-        }
+        this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
     }
     render() {
-        return (h(Host, { key: 'fe1aff1acd336f2d1b66b87a9666c1ea4e3f0016', role: "listitem" }, h("div", { key: 'c180f66951842e69f6b51e83151f5962ff410794', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '160d1d6054ed399f8597bcdf98524a65f77c6310' }))));
+        return (h(Host, { key: 'cc3e94cd085ad62a1933a948014d06da55ffeb35', role: "listitem" }, h("div", { key: '602c0f0ede8f40bfc06e3899adb0afa7941602e3', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '2770b612c929deb25895455114d2a6e3a45957a4' }))));
     }
     static get is() { return "tds-footer-item"; }
     static get encapsulation() { return "shadow"; }