@scania/tegel 1.3.3-event-types.0 → 1.4.0

package/dist/collection/components/dropdown/test/error/dropdown.e2e.js

@@ -2,35 +2,35 @@ import { test } from "stencil-playwright";
 import { expect } from "@playwright/test";
 const componentTestPath = 'src/components/dropdown/test/error/index.html';
 test.describe('tds-dropdown-error', () => {
-  test('renders error dropdown correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('find helper text and check if visible and have icon', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const helperText = page.getByText(/Helper text/);
-    await expect(helperText).toBeVisible();
-    const helperTextIcon = helperText.getByRole('img');
-    await expect(helperTextIcon).toHaveCount(1);
-  });
-  test('clicking the dropdown opens the dropdown-list', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ })
-      .getByRole('button');
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await dropdownButton.click();
-    /* after clicking dropdownlist should be visible, the button should also be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeVisible();
-    /* check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+    test('renders error dropdown correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const dropdown = page.getByTestId('tds-dropdown-testid');
+        await expect(dropdown).toHaveCount(1);
+        /* Check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('find helper text and check if visible and have icon', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const helperText = page.getByText(/Helper text/);
+        await expect(helperText).toBeVisible();
+        const helperTextIcon = helperText.getByRole('img');
+        await expect(helperTextIcon).toHaveCount(1);
+    });
+    test('clicking the dropdown opens the dropdown-list', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const dropdownListElementOneButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /Option 1/ })
+            .getByRole('button');
+        const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+        /* before clicking dropdownlist should not be visible, the button should be */
+        await expect(dropdownButton).toBeVisible();
+        await expect(dropdownListElementOneButton).toBeHidden();
+        await dropdownButton.click();
+        /* after clicking dropdownlist should be visible, the button should also be */
+        await expect(dropdownButton).toBeVisible();
+        await expect(dropdownListElementOneButton).toBeVisible();
+        /* check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 });

package/dist/collection/components/dropdown/test/filter/dropdown.e2e.js

@@ -2,55 +2,55 @@ import { test } from "stencil-playwright";
 import { expect } from "@playwright/test";
 const componentTestPath = 'src/components/dropdown/test/filter/index.html';
 test.describe('tds-dropdown-filter', () => {
-  test('renders filter dropdown correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('clicking the dropdown opens the dropdown-list, then start typing "iles" to only show that option in the dropdown list', async ({ page, }) => {
-    await page.goto(componentTestPath);
-    const inputElement = page.getByRole('textbox');
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ });
-    const dropdownListElementTwoButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 2/ });
-    const dropdownListElementThreeButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 3/ });
-    const dropdownListElementFourButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 4/ });
-    const dropdownListElementFiveButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /îles Åland/ });
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await expect(dropdownListElementTwoButton).toBeHidden();
-    await expect(dropdownListElementThreeButton).toBeHidden();
-    await expect(dropdownListElementFourButton).toBeHidden();
-    await expect(dropdownListElementFiveButton).toBeHidden();
-    /* Clicking the input element should show the dropdown list and all its content */
-    await inputElement.click();
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeVisible();
-    await expect(dropdownListElementTwoButton).toBeVisible();
-    await expect(dropdownListElementThreeButton).toBeVisible();
-    await expect(dropdownListElementFourButton).toBeVisible();
-    await expect(dropdownListElementFiveButton).toBeVisible();
-    /* Add text and only Option 1 should be visible */
-    await inputElement.fill('iles');
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await expect(dropdownListElementTwoButton).toBeHidden();
-    await expect(dropdownListElementThreeButton).toBeHidden();
-    await expect(dropdownListElementFourButton).toBeHidden();
-    await expect(dropdownListElementFiveButton).toBeVisible();
-    /* Check diff on screenshot after adding text */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+    test('renders filter dropdown correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const dropdown = page.getByTestId('tds-dropdown-testid');
+        await expect(dropdown).toHaveCount(1);
+        /* Check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('clicking the dropdown opens the dropdown-list, then start typing "iles" to only show that option in the dropdown list', async ({ page, }) => {
+        await page.goto(componentTestPath);
+        const inputElement = page.getByRole('textbox');
+        const dropdownListElementOneButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /Option 1/ });
+        const dropdownListElementTwoButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /Option 2/ });
+        const dropdownListElementThreeButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /Option 3/ });
+        const dropdownListElementFourButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /Option 4/ });
+        const dropdownListElementFiveButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /îles Åland/ });
+        /* before clicking dropdownlist should not be visible, the button should be */
+        await expect(inputElement).toBeVisible();
+        await expect(dropdownListElementOneButton).toBeHidden();
+        await expect(dropdownListElementTwoButton).toBeHidden();
+        await expect(dropdownListElementThreeButton).toBeHidden();
+        await expect(dropdownListElementFourButton).toBeHidden();
+        await expect(dropdownListElementFiveButton).toBeHidden();
+        /* Clicking the input element should show the dropdown list and all its content */
+        await inputElement.click();
+        await expect(inputElement).toBeVisible();
+        await expect(dropdownListElementOneButton).toBeVisible();
+        await expect(dropdownListElementTwoButton).toBeVisible();
+        await expect(dropdownListElementThreeButton).toBeVisible();
+        await expect(dropdownListElementFourButton).toBeVisible();
+        await expect(dropdownListElementFiveButton).toBeVisible();
+        /* Add text and only Option 1 should be visible */
+        await inputElement.fill('iles');
+        await expect(inputElement).toBeVisible();
+        await expect(dropdownListElementOneButton).toBeHidden();
+        await expect(dropdownListElementTwoButton).toBeHidden();
+        await expect(dropdownListElementThreeButton).toBeHidden();
+        await expect(dropdownListElementFourButton).toBeHidden();
+        await expect(dropdownListElementFiveButton).toBeVisible();
+        /* Check diff on screenshot after adding text */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 });

package/dist/collection/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.js

@@ -0,0 +1,23 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/dropdown/test/filter/hide-no-result-message/index.html';
+test.describe('tds-dropdown-filter', () => {
+    test('renders filter dropdown correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const dropdown = page.getByTestId('tds-dropdown-testid');
+        await expect(dropdown).toHaveCount(1);
+        /* Check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('typing non existing value does not show "No results!" message', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const inputElement = page.getByRole('textbox');
+        /* Add text and only Option 1 should be visible */
+        await inputElement.fill('Johnny looks for no results message');
+        await expect(inputElement).toBeVisible();
+        const noResult = page.getByText('No result');
+        await expect(noResult).toBeHidden();
+        /* Check diff on screenshot after adding text */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+});

package/dist/collection/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.js

@@ -2,42 +2,42 @@ import { test } from "stencil-playwright";
 import { expect } from "@playwright/test";
 const componentTestPath = 'src/components/dropdown/test/filter/normalize-text-false/index.html';
 test.describe('tds-dropdown-filter', () => {
-  test('renders filter dropdown correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('typing "iles" should not show anything in dropdown with normalize text set to false', async ({ page, }) => {
-    await page.goto(componentTestPath);
-    const inputElement = page.getByRole('textbox');
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ });
-    const dropdownListElementTwoButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 2/ });
-    const dropdownListElementThreeButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 3/ });
-    const dropdownListElementFourButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 4/ });
-    const dropdownListElementFiveButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /îles Åland/ });
-    /* Add text and only Option 1 should be visible */
-    await inputElement.fill('iles');
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await expect(dropdownListElementTwoButton).toBeHidden();
-    await expect(dropdownListElementThreeButton).toBeHidden();
-    await expect(dropdownListElementFourButton).toBeHidden();
-    await expect(dropdownListElementFiveButton).toBeHidden();
-    const noResult = page.getByText('No result');
-    await expect(noResult).toBeVisible();
-    /* Check diff on screenshot after adding text */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+    test('renders filter dropdown correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const dropdown = page.getByTestId('tds-dropdown-testid');
+        await expect(dropdown).toHaveCount(1);
+        /* Check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('typing "iles" should not show anything in dropdown with normalize text set to false', async ({ page, }) => {
+        await page.goto(componentTestPath);
+        const inputElement = page.getByRole('textbox');
+        const dropdownListElementOneButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /Option 1/ });
+        const dropdownListElementTwoButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /Option 2/ });
+        const dropdownListElementThreeButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /Option 3/ });
+        const dropdownListElementFourButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /Option 4/ });
+        const dropdownListElementFiveButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /îles Åland/ });
+        /* Add text and only Option 1 should be visible */
+        await inputElement.fill('iles');
+        await expect(inputElement).toBeVisible();
+        await expect(dropdownListElementOneButton).toBeHidden();
+        await expect(dropdownListElementTwoButton).toBeHidden();
+        await expect(dropdownListElementThreeButton).toBeHidden();
+        await expect(dropdownListElementFourButton).toBeHidden();
+        await expect(dropdownListElementFiveButton).toBeHidden();
+        const noResult = page.getByText('No result');
+        await expect(noResult).toBeVisible();
+        /* Check diff on screenshot after adding text */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 });

package/dist/collection/components/dropdown/test/multiselect/dropdown.e2e.js

@@ -2,80 +2,80 @@ import { test } from "stencil-playwright";
 import { expect } from "@playwright/test";
 const componentTestPath = 'src/components/dropdown/test/multiselect/index.html';
 test.describe('tds-dropdown-multiselect', () => {
-  test('renders multiselect dropdown correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('clicking the dropdown opens the dropdown-list, then click Option 1, should not close it', async ({ page, }) => {
-    await page.goto(componentTestPath);
-    /* click the dropdown button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
-    /* Click the Option 1 button */
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ });
-    await dropdownListElementOneButton.click();
-    await expect(dropdownListElementOneButton).toBeVisible();
-    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
-    await expect(dropdownButtonWithOption1.first()).toBeVisible();
-    /* also check screenshot diff to make sure it says Option 1 */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('clicking the dropdown opens the dropdown-list, then click on all the options', async ({ page, }) => {
-    await page.goto(componentTestPath);
-    /* click the button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
-    /* get all checkboxes */
-    const dropdownListElementOneButton = page
-      .getByText(/Option 1/)
-      .filter({ has: page.getByRole('checkbox') });
-    const dropdownListElementTwoButton = page
-      .getByText(/Option 2/)
-      .filter({ has: page.getByRole('checkbox') });
-    const dropdownListElementThreeButton = page
-      .getByText(/Option 3/)
-      .filter({ has: page.getByRole('checkbox') });
-    const dropdownListElementFourButton = page
-      .getByText(/Option 4/)
-      .filter({ has: page.getByRole('checkbox') });
-    await expect(dropdownListElementOneButton).toHaveCount(1);
-    await expect(dropdownListElementTwoButton).toHaveCount(1);
-    await expect(dropdownListElementThreeButton).toHaveCount(1);
-    await expect(dropdownListElementFourButton).toHaveCount(1);
-    /* check each one and see that it updates correctly */
-    await dropdownListElementOneButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
-    const inputText = page.getByRole('button', { name: /Option 1/ });
-    await expect(inputText).toHaveCount(1);
-    await dropdownListElementTwoButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
-    await expect(inputText).toHaveCount(1);
-    await dropdownListElementThreeButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
-    const inputText2 = page.getByRole('button', { name: /Option 1,Option 3/ });
-    await expect(inputText2).toHaveCount(1);
-    await dropdownListElementFourButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).toHaveAttribute('aria-selected');
-    const inputText3 = page.getByRole('button', { name: /Option 1,Option 3,Option 4/ });
-    await expect(inputText3).toHaveCount(1);
-    /* also check screenshot diff to make sure */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+    test('renders multiselect dropdown correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const dropdown = page.getByTestId('tds-dropdown-testid');
+        await expect(dropdown).toHaveCount(1);
+        /* Check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('clicking the dropdown opens the dropdown-list, then click Option 1, should not close it', async ({ page, }) => {
+        await page.goto(componentTestPath);
+        /* click the dropdown button */
+        const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+        await dropdownButton.click();
+        /* Click the Option 1 button */
+        const dropdownListElementOneButton = page
+            .locator('tds-dropdown-option')
+            .filter({ hasText: /Option 1/ });
+        await dropdownListElementOneButton.click();
+        await expect(dropdownListElementOneButton).toBeVisible();
+        const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
+        await expect(dropdownButtonWithOption1.first()).toBeVisible();
+        /* also check screenshot diff to make sure it says Option 1 */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('clicking the dropdown opens the dropdown-list, then click on all the options', async ({ page, }) => {
+        await page.goto(componentTestPath);
+        /* click the button */
+        const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+        await dropdownButton.click();
+        /* get all checkboxes */
+        const dropdownListElementOneButton = page
+            .getByText(/Option 1/)
+            .filter({ has: page.getByRole('checkbox') });
+        const dropdownListElementTwoButton = page
+            .getByText(/Option 2/)
+            .filter({ has: page.getByRole('checkbox') });
+        const dropdownListElementThreeButton = page
+            .getByText(/Option 3/)
+            .filter({ has: page.getByRole('checkbox') });
+        const dropdownListElementFourButton = page
+            .getByText(/Option 4/)
+            .filter({ has: page.getByRole('checkbox') });
+        await expect(dropdownListElementOneButton).toHaveCount(1);
+        await expect(dropdownListElementTwoButton).toHaveCount(1);
+        await expect(dropdownListElementThreeButton).toHaveCount(1);
+        await expect(dropdownListElementFourButton).toHaveCount(1);
+        /* check each one and see that it updates correctly */
+        await dropdownListElementOneButton.click();
+        await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+        await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+        await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
+        await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
+        const inputText = page.getByRole('button', { name: /Option 1/ });
+        await expect(inputText).toHaveCount(1);
+        await dropdownListElementTwoButton.click();
+        await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+        await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+        await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
+        await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
+        await expect(inputText).toHaveCount(1);
+        await dropdownListElementThreeButton.click();
+        await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+        await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+        await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
+        await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
+        const inputText2 = page.getByRole('button', { name: /Option 1,Option 3/ });
+        await expect(inputText2).toHaveCount(1);
+        await dropdownListElementFourButton.click();
+        await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
+        await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
+        await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
+        await expect(dropdownListElementFourButton).toHaveAttribute('aria-selected');
+        const inputText3 = page.getByRole('button', { name: /Option 1,Option 3,Option 4/ });
+        await expect(inputText3).toHaveCount(1);
+        /* also check screenshot diff to make sure */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 });

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

@@ -3,65 +3,65 @@ import { Host, h } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> For footer items.
  */
 export class TdsFooterGroup {
-  constructor() {
-    /** 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.open = false;
-  }
-  connectedCallback() {
-    this.topPartGroup = this.host.parentElement.slot === 'top';
-    if (!this.topPartGroup) {
-      this.slotPosition = this.host.parentElement.slot === 'end' ? 'end' : 'start';
+    constructor() {
+        /** 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.open = false;
     }
-  }
-  render() {
-    return (h(Host, null, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
-        this.open = !this.open;
-      }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+    connectedCallback() {
+        this.topPartGroup = this.host.parentElement.slot === 'top';
+        if (!this.topPartGroup) {
+            this.slotPosition = this.host.parentElement.slot === 'end' ? 'end' : 'start';
+        }
+    }
+    render() {
+        return (h(Host, null, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
+                this.open = !this.open;
+            }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
             ${this.open ? 'expanded' : 'closed'}` }, h("slot", null))));
-  }
-  static get is() { return "tds-footer-group"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["footer-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["footer-group.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "titleText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Title text for the link group, only valid on top part of Footer."
-        },
-        "attribute": "title-text",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {}
-    };
-  }
-  static get elementRef() { return "host"; }
+    }
+    static get is() { return "tds-footer-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["footer-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["footer-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "titleText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title text for the link group, only valid on top part of Footer."
+                },
+                "attribute": "title-text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get elementRef() { return "host"; }
 }

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

@@ -3,26 +3,26 @@ import { h } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> For slotting a link, button, or similar.
  */
 export class TdsFooterItem {
-  constructor() {
-    this.parentIsTopPart = false;
-  }
-  connectedCallback() {
-    this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
-  }
-  render() {
-    return (h("div", { role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", null)));
-  }
-  static get is() { return "tds-footer-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["footer-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["footer-item.css"]
-    };
-  }
-  static get elementRef() { return "host"; }
+    constructor() {
+        this.parentIsTopPart = false;
+    }
+    connectedCallback() {
+        this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
+    }
+    render() {
+        return (h("div", { role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", null)));
+    }
+    static get is() { return "tds-footer-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["footer-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["footer-item.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
 }