wcs-core 7.2.2 → 7.4.0

package/dist/collection/components/tabs/tabs.e2e.playwright.js

@@ -0,0 +1,205 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Tabs component', () => {
+    test('Display only first tab if none are preselected', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-tabs>
+                <wcs-tab header="1">One</wcs-tab>
+                <wcs-tab header="2">Two</wcs-tab>
+            </wcs-tabs>
+        `);
+        const tab1 = page.locator('wcs-tab').nth(0);
+        const tab2 = page.locator('wcs-tab').nth(1);
+        // Then
+        await expect(tab1).toBeVisible();
+        await expect(tab2).not.toBeVisible();
+    });
+    test('Display only second tab if users click on its header', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-tabs>
+                <wcs-tab header="1">One</wcs-tab>
+                <wcs-tab header="2">Two</wcs-tab>
+            </wcs-tabs>
+        `);
+        const tab1 = page.locator('wcs-tab').nth(0);
+        const tab2 = page.locator('wcs-tab').nth(1);
+        const tabh2 = page.locator('wcs-tabs .wcs-tab-header').nth(1);
+        // When
+        await tabh2.click();
+        // Then
+        await expect(tab1).not.toBeVisible();
+        await expect(tab2).toBeVisible();
+    });
+    test('Accept and render new tabs after creation', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-tabs>
+                <wcs-tab header="1">One</wcs-tab>
+                <wcs-tab header="2">Two</wcs-tab>
+            </wcs-tabs>
+        `);
+        // When
+        await page.evaluate(async () => {
+            const tab = document.createElement('wcs-tab');
+            const text = document.createTextNode('Three');
+            const tabsEl = document.querySelector('wcs-tabs');
+            tab.setAttribute('header', '3');
+            tab.appendChild(text);
+            tabsEl.appendChild(tab);
+        });
+        const h3 = page.locator('wcs-tabs .wcs-tab-header').nth(2);
+        const t3 = page.locator('wcs-tab').nth(2);
+        // Expect
+        await expect(h3).toBeVisible();
+        await expect(t3).toHaveText('Three');
+    });
+    test.describe('SelectedKey prop', () => {
+        test('should accept a default selected key', async ({ page }) => {
+            await setWcsContent(page, `
+                <wcs-tabs selected-key="custom-2">
+                    <wcs-tab item-key="custom-1">One</wcs-tab>
+                    <wcs-tab item-key="custom-2">Two</wcs-tab>
+                </wcs-tabs>
+            `);
+            const tab1 = page.locator('wcs-tab').nth(0);
+            const tab2 = page.locator('wcs-tab').nth(1);
+            await expect(tab1).not.toBeVisible();
+            await expect(tab2).toBeVisible();
+        });
+        test('Allows to change selected tab via prop after creation', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-tabs selected-key="a">
+                    <wcs-tab item-key="a">One</wcs-tab>
+                    <wcs-tab item-key="b">Two</wcs-tab>
+                </wcs-tabs>
+            `);
+            const tabs = page.locator('wcs-tabs');
+            const tab1 = page.locator('wcs-tab').nth(0);
+            const tab2 = page.locator('wcs-tab').nth(1);
+            // When
+            await tabs.evaluate((el) => el.selectedKey = 'b');
+            // Then
+            await expect(tab1).not.toBeVisible();
+            await expect(tab2).toBeVisible();
+        });
+    });
+    test.describe('SelectedIndex prop', () => {
+        test('Accept a default selected tab', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-tabs selected-index="1">
+                    <wcs-tab header="1">One</wcs-tab>
+                    <wcs-tab header="2">Two</wcs-tab>
+                </wcs-tabs>
+            `);
+            const tab1 = page.locator('wcs-tab').nth(0);
+            const tab2 = page.locator('wcs-tab').nth(1);
+            // Then
+            await expect(tab1).not.toBeVisible();
+            await expect(tab2).toBeVisible();
+        });
+        test('Allows to change selected tab via prop after creation', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-tabs selected-index="1">
+                    <wcs-tab header="1">One</wcs-tab>
+                    <wcs-tab header="2">Two</wcs-tab>
+                </wcs-tabs>
+            `);
+            const tabs = page.locator('wcs-tabs');
+            const tab1 = page.locator('wcs-tab').nth(0);
+            const tab2 = page.locator('wcs-tab').nth(1);
+            // When
+            await tabs.evaluate((el) => el.selectedIndex = 0);
+            // Then
+            await expect(tab1).toBeVisible();
+            await expect(tab2).not.toBeVisible();
+        });
+    });
+    test.describe('Tab change event', () => {
+        test('Fires when user clicks on a header', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-tabs>
+                    <wcs-tab header="1">One</wcs-tab>
+                    <wcs-tab header="2">Two</wcs-tab>
+                </wcs-tabs>
+            `);
+            const tabs = page.locator('wcs-tabs');
+            const tabChangeSpy = await tabs.spyOnEvent('tabChange');
+            const tabh2 = page.locator('wcs-tabs .wcs-tab-header').nth(1);
+            // When
+            await tabh2.click();
+            await page.waitForChanges();
+            // Then
+            expect(tabChangeSpy).toHaveReceivedEventTimes(1);
+            expect(tabChangeSpy).toHaveReceivedEventDetail({ tabName: '2', tabIndex: 1, selectedKey: undefined });
+        });
+    });
+    test.describe('Keyboard navigation', () => {
+        test('Change selected tab with enter', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-tabs>
+                    <wcs-tab header="1">One</wcs-tab>
+                    <wcs-tab header="2">Two</wcs-tab>
+                </wcs-tabs>
+            `);
+            const tabs = page.locator('wcs-tabs');
+            const tabChangeEnterSpy = await tabs.spyOnEvent('tabChange');
+            const h2 = page.locator('wcs-tabs .wcs-tab-header').nth(1);
+            // When
+            await h2.focus();
+            await page.keyboard.press('Enter');
+            await page.waitForChanges();
+            // Then
+            expect(tabChangeEnterSpy).toHaveReceivedEventTimes(1);
+            expect(tabChangeEnterSpy).toHaveReceivedEventDetail({ tabName: '2', tabIndex: 1, selectedKey: undefined });
+        });
+        test('Change selected tab with space', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-tabs>
+                    <wcs-tab header="1">One</wcs-tab>
+                    <wcs-tab header="2">Two</wcs-tab>
+                </wcs-tabs>
+            `);
+            const tabs = page.locator('wcs-tabs');
+            const tabChangeSpaceSpy = await tabs.spyOnEvent('tabChange');
+            const h2 = page.locator('wcs-tabs .wcs-tab-header').nth(1);
+            // When
+            await h2.focus();
+            await page.keyboard.press('Space');
+            await page.waitForChanges();
+            // Then
+            expect(tabChangeSpaceSpy).toHaveReceivedEventTimes(1);
+            expect(tabChangeSpaceSpy).toHaveReceivedEventDetail({ tabName: '2', tabIndex: 1, selectedKey: undefined });
+        });
+        test('Move focus with keyboard arrows', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-tabs>
+                    <wcs-tab header="1">One</wcs-tab>
+                    <wcs-tab header="2">Two</wcs-tab>
+                </wcs-tabs>
+            `);
+            const h1 = page.locator('wcs-tabs .wcs-tab-header').nth(0);
+            // When
+            await h1.focus();
+            await h1.press('ArrowRight');
+            // Then - verify second header is focused by checking it matches activeElement in shadow root
+            const isFocused = await page.evaluate(() => {
+                var _a, _b;
+                const tabs = document.querySelector('wcs-tabs');
+                const secondHeader = (_a = tabs === null || tabs === void 0 ? void 0 : tabs.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.wcs-tab-header')[1];
+                return ((_b = tabs === null || tabs === void 0 ? void 0 : tabs.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement) === secondHeader;
+            });
+            expect(isFocused).toBe(true);
+        });
+    });
+});
+//# sourceMappingURL=tabs.e2e.playwright.js.map

package/dist/collection/components/tabs/tabs.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Tabs component', () => {\n    test('Display only first tab if none are preselected', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-tabs>\n                <wcs-tab header=\"1\">One</wcs-tab>\n                <wcs-tab header=\"2\">Two</wcs-tab>\n            </wcs-tabs>\n        `);\n\n        const tab1 = page.locator('wcs-tab').nth(0);\n        const tab2 = page.locator('wcs-tab').nth(1);\n\n        // Then\n        await expect(tab1).toBeVisible();\n        await expect(tab2).not.toBeVisible();\n    });\n\n    test('Display only second tab if users click on its header', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-tabs>\n                <wcs-tab header=\"1\">One</wcs-tab>\n                <wcs-tab header=\"2\">Two</wcs-tab>\n            </wcs-tabs>\n        `);\n\n        const tab1 = page.locator('wcs-tab').nth(0);\n        const tab2 = page.locator('wcs-tab').nth(1);\n        const tabh2 = page.locator('wcs-tabs .wcs-tab-header').nth(1);\n\n        // When\n        await tabh2.click();\n\n        // Then\n        await expect(tab1).not.toBeVisible();\n        await expect(tab2).toBeVisible();\n    });\n\n    test('Accept and render new tabs after creation', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-tabs>\n                <wcs-tab header=\"1\">One</wcs-tab>\n                <wcs-tab header=\"2\">Two</wcs-tab>\n            </wcs-tabs>\n        `);\n\n        // When\n        await page.evaluate(async () => {\n            const tab = document.createElement('wcs-tab');\n            const text = document.createTextNode('Three');\n            const tabsEl = document.querySelector('wcs-tabs');\n            tab.setAttribute('header', '3');\n            tab.appendChild(text);\n            tabsEl!.appendChild(tab);\n        });\n\n        const h3 = page.locator('wcs-tabs .wcs-tab-header').nth(2);\n        const t3 = page.locator('wcs-tab').nth(2);\n\n        // Expect\n        await expect(h3).toBeVisible();\n        await expect(t3).toHaveText('Three');\n    });\n\n    test.describe('SelectedKey prop', () => {\n        test('should accept a default selected key', async ({ page }: { page: E2EPage }) => {\n            await setWcsContent(page, `\n                <wcs-tabs selected-key=\"custom-2\">\n                    <wcs-tab item-key=\"custom-1\">One</wcs-tab>\n                    <wcs-tab item-key=\"custom-2\">Two</wcs-tab>\n                </wcs-tabs>\n            `);\n\n            const tab1 = page.locator('wcs-tab').nth(0);\n            const tab2 = page.locator('wcs-tab').nth(1);\n\n            await expect(tab1).not.toBeVisible();\n            await expect(tab2).toBeVisible();\n        });\n\n        test('Allows to change selected tab via prop after creation', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-tabs selected-key=\"a\">\n                    <wcs-tab item-key=\"a\">One</wcs-tab>\n                    <wcs-tab item-key=\"b\">Two</wcs-tab>\n                </wcs-tabs>\n            `);\n\n            const tabs = page.locator('wcs-tabs');\n            const tab1 = page.locator('wcs-tab').nth(0);\n            const tab2 = page.locator('wcs-tab').nth(1);\n\n            // When\n            await tabs.evaluate((el: any) => el.selectedKey = 'b');\n\n            // Then\n            await expect(tab1).not.toBeVisible();\n            await expect(tab2).toBeVisible();\n        });\n    });\n\n    test.describe('SelectedIndex prop', () => {\n        test('Accept a default selected tab', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-tabs selected-index=\"1\">\n                    <wcs-tab header=\"1\">One</wcs-tab>\n                    <wcs-tab header=\"2\">Two</wcs-tab>\n                </wcs-tabs>\n            `);\n\n            const tab1 = page.locator('wcs-tab').nth(0);\n            const tab2 = page.locator('wcs-tab').nth(1);\n\n            // Then\n            await expect(tab1).not.toBeVisible();\n            await expect(tab2).toBeVisible();\n        });\n\n        test('Allows to change selected tab via prop after creation', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-tabs selected-index=\"1\">\n                    <wcs-tab header=\"1\">One</wcs-tab>\n                    <wcs-tab header=\"2\">Two</wcs-tab>\n                </wcs-tabs>\n            `);\n\n            const tabs = page.locator('wcs-tabs');\n            const tab1 = page.locator('wcs-tab').nth(0);\n            const tab2 = page.locator('wcs-tab').nth(1);\n\n            // When\n            await tabs.evaluate((el: any) => el.selectedIndex = 0);\n\n            // Then\n            await expect(tab1).toBeVisible();\n            await expect(tab2).not.toBeVisible();\n        });\n    });\n\n    test.describe('Tab change event', () => {\n        test('Fires when user clicks on a header', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-tabs>\n                    <wcs-tab header=\"1\">One</wcs-tab>\n                    <wcs-tab header=\"2\">Two</wcs-tab>\n                </wcs-tabs>\n            `);\n\n            const tabs = page.locator('wcs-tabs');\n            const tabChangeSpy = await tabs.spyOnEvent('tabChange');\n\n            const tabh2 = page.locator('wcs-tabs .wcs-tab-header').nth(1);\n\n            // When\n            await tabh2.click();\n            await page.waitForChanges();\n\n            // Then\n            expect(tabChangeSpy).toHaveReceivedEventTimes(1);\n            expect(tabChangeSpy).toHaveReceivedEventDetail({ tabName: '2', tabIndex: 1, selectedKey: undefined });\n        });\n    });\n\n    test.describe('Keyboard navigation', () => {\n        test('Change selected tab with enter', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-tabs>\n                    <wcs-tab header=\"1\">One</wcs-tab>\n                    <wcs-tab header=\"2\">Two</wcs-tab>\n                </wcs-tabs>\n            `);\n\n            const tabs = page.locator('wcs-tabs');\n            const tabChangeEnterSpy = await tabs.spyOnEvent('tabChange');\n\n            const h2 = page.locator('wcs-tabs .wcs-tab-header').nth(1);\n\n            // When\n            await h2.focus();\n            await page.keyboard.press('Enter');\n            await page.waitForChanges();\n\n            // Then\n            expect(tabChangeEnterSpy).toHaveReceivedEventTimes(1);\n            expect(tabChangeEnterSpy).toHaveReceivedEventDetail({ tabName: '2', tabIndex: 1, selectedKey: undefined });\n        });\n\n        test('Change selected tab with space', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-tabs>\n                    <wcs-tab header=\"1\">One</wcs-tab>\n                    <wcs-tab header=\"2\">Two</wcs-tab>\n                </wcs-tabs>\n            `);\n\n            const tabs = page.locator('wcs-tabs');\n            const tabChangeSpaceSpy = await tabs.spyOnEvent('tabChange');\n\n            const h2 = page.locator('wcs-tabs .wcs-tab-header').nth(1);\n\n            // When\n            await h2.focus();\n            await page.keyboard.press('Space');\n            await page.waitForChanges();\n\n            // Then\n            expect(tabChangeSpaceSpy).toHaveReceivedEventTimes(1);\n            expect(tabChangeSpaceSpy).toHaveReceivedEventDetail({ tabName: '2', tabIndex: 1, selectedKey: undefined });\n        });\n\n        test('Move focus with keyboard arrows', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-tabs>\n                    <wcs-tab header=\"1\">One</wcs-tab>\n                    <wcs-tab header=\"2\">Two</wcs-tab>\n                </wcs-tabs>\n            `);\n\n            const h1 = page.locator('wcs-tabs .wcs-tab-header').nth(0);\n\n            // When\n            await h1.focus();\n            await h1.press('ArrowRight');\n\n            // Then - verify second header is focused by checking it matches activeElement in shadow root\n            const isFocused = await page.evaluate(() => {\n                const tabs = document.querySelector('wcs-tabs');\n                const secondHeader = tabs?.shadowRoot?.querySelectorAll('.wcs-tab-header')[1];\n                return tabs?.shadowRoot?.activeElement === secondHeader;\n            });\n            expect(isFocused).toBe(true);\n        });\n    });\n});\n"]}

package/dist/collection/components/tabs/tabs.js

@@ -529,7 +529,7 @@ export class Tabs {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",

package/dist/collection/components/textarea/textarea.e2e.playwright.js

@@ -0,0 +1,133 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Textarea component', () => {
+    test('Should fire wcsInput event once when user typing one char', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-textarea name="wcs-textarea-1" />
+        `);
+        const inputSpy = await page.spyOnEvent('wcsInput');
+        const textarea = page.locator('wcs-textarea');
+        // When
+        await textarea.click();
+        await textarea.press('B');
+        await page.waitForChanges();
+        // Then
+        expect(inputSpy).toHaveReceivedEventTimes(1);
+    });
+    test('Should fire wcsInput event multiple times when user typing multiple chars', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-textarea name="wcs-textarea-1" />
+        `);
+        const inputSpy = await page.spyOnEvent('wcsInput');
+        const textarea = page.locator('wcs-textarea');
+        // When
+        await textarea.click();
+        await textarea.press('B');
+        await page.waitForChanges();
+        await textarea.press('o');
+        await page.waitForChanges();
+        await textarea.press('n');
+        await page.waitForChanges();
+        await textarea.press('j');
+        await page.waitForChanges();
+        await textarea.press('o');
+        await page.waitForChanges();
+        await textarea.press('u');
+        await page.waitForChanges();
+        await textarea.press('r');
+        await page.waitForChanges();
+        // Then
+        expect(inputSpy).toHaveReceivedEventTimes(7);
+    });
+    test('Should fire wcsChange event when user commit change with blur (tab)', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-textarea name="wcs-textarea-1"></wcs-textarea>
+            <button>Focus</button>
+        `);
+        const changeSpy = await page.spyOnEvent('wcsChange');
+        const textarea = page.locator('wcs-textarea');
+        const button = page.locator('button');
+        // When
+        await textarea.click();
+        await textarea.pressSequentially('Blur');
+        await button.focus(); // blur native textArea
+        await page.waitForChanges();
+        // Then - wait for the event to be received
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: 'Blur' });
+    });
+    test('Should fire wcsChange event when user commit change with blur (click)', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-textarea name="wcs-textarea-1"></wcs-textarea>
+            <button>Focus</button>
+        `);
+        const changeSpy = await page.spyOnEvent('wcsChange');
+        const textarea = page.locator('wcs-textarea');
+        const button = page.locator('button');
+        // When
+        await textarea.click();
+        await textarea.press('B');
+        await textarea.press('l');
+        await textarea.press('u');
+        await textarea.press('r');
+        await button.focus();
+        await page.waitForChanges();
+        // Then
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: 'Blur' });
+    });
+    test('Should not fire wcsChange event when value is programmatically set', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-textarea name="wcs-textarea-1" />
+        `);
+        const changeSpy = await page.spyOnEvent('wcsChange');
+        const textarea = page.locator('wcs-textarea');
+        // When
+        await textarea.evaluate((el) => el.value = 'Programmatically set value');
+        await page.waitForChanges();
+        // Then
+        expect(changeSpy).toHaveReceivedEventTimes(0);
+    });
+    test('Should not fire wcsInput event when value is programmatically set', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-textarea name="wcs-textarea-1" />
+        `);
+        const inputSpy = await page.spyOnEvent('wcsInput');
+        const textarea = page.locator('wcs-textarea');
+        // When
+        await textarea.evaluate((el) => el.value = 'Programmatically set value');
+        await page.waitForChanges();
+        // Then
+        expect(inputSpy).toHaveReceivedEventTimes(0);
+    });
+    test('Should have a default value when value attribute is set', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-textarea name="wcs-textarea-1" value="Default value" />
+        `);
+        const textarea = page.locator('wcs-textarea');
+        // Then
+        await expect(textarea).toHaveJSProperty('value', 'Default value');
+        await expect(page.locator('wcs-textarea textarea')).toHaveJSProperty('value', 'Default value');
+    });
+    test('Should have a default value when value property is set', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-textarea name="wcs-textarea-1" />
+        `);
+        const textarea = page.locator('wcs-textarea');
+        // When
+        await textarea.evaluate((el) => el.value = 'Default value');
+        // Then
+        await expect(textarea).toHaveJSProperty('value', 'Default value');
+        await expect(page.locator('wcs-textarea textarea')).toHaveJSProperty('value', 'Default value');
+    });
+});
+//# sourceMappingURL=textarea.e2e.playwright.js.map

package/dist/collection/components/textarea/textarea.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Textarea component', () => {\n    test('Should fire wcsInput event once when user typing one char', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-textarea name=\"wcs-textarea-1\" />\n        `);\n\n        const inputSpy = await page.spyOnEvent('wcsInput');\n\n        const textarea = page.locator('wcs-textarea');\n\n        // When\n        await textarea.click();\n        await textarea.press('B');\n        await page.waitForChanges();\n\n        // Then\n        expect(inputSpy).toHaveReceivedEventTimes(1);\n    });\n\n    test('Should fire wcsInput event multiple times when user typing multiple chars', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-textarea name=\"wcs-textarea-1\" />\n        `);\n\n        const inputSpy = await page.spyOnEvent('wcsInput');\n\n        const textarea = page.locator('wcs-textarea');\n\n        // When\n        await textarea.click();\n        await textarea.press('B');\n        await page.waitForChanges();\n        await textarea.press('o');\n        await page.waitForChanges();\n        await textarea.press('n');\n        await page.waitForChanges();\n        await textarea.press('j');\n        await page.waitForChanges();\n        await textarea.press('o');\n        await page.waitForChanges();\n        await textarea.press('u');\n        await page.waitForChanges();\n        await textarea.press('r');\n        await page.waitForChanges();\n\n        // Then\n        expect(inputSpy).toHaveReceivedEventTimes(7);\n    });\n\n    test('Should fire wcsChange event when user commit change with blur (tab)', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-textarea name=\"wcs-textarea-1\"></wcs-textarea>\n            <button>Focus</button>\n        `);\n\n        const changeSpy = await page.spyOnEvent('wcsChange');\n\n        const textarea = page.locator('wcs-textarea');\n        const button = page.locator('button');\n\n        // When\n        await textarea.click();\n        await textarea.pressSequentially('Blur');\n        await button.focus(); // blur native textArea\n        await page.waitForChanges();\n\n        // Then - wait for the event to be received\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: 'Blur' });\n    });\n\n    test('Should fire wcsChange event when user commit change with blur (click)', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-textarea name=\"wcs-textarea-1\"></wcs-textarea>\n            <button>Focus</button>\n        `);\n\n        const changeSpy = await page.spyOnEvent('wcsChange');\n\n        const textarea = page.locator('wcs-textarea');\n        const button = page.locator('button');\n\n        // When\n        await textarea.click();\n        await textarea.press('B');\n        await textarea.press('l');\n        await textarea.press('u');\n        await textarea.press('r');\n        await button.focus();\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: 'Blur' });\n    });\n\n    test('Should not fire wcsChange event when value is programmatically set', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-textarea name=\"wcs-textarea-1\" />\n        `);\n\n        const changeSpy = await page.spyOnEvent('wcsChange');\n\n        const textarea = page.locator('wcs-textarea');\n\n        // When\n        await textarea.evaluate((el: any) => el.value = 'Programmatically set value');\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(0);\n    });\n\n    test('Should not fire wcsInput event when value is programmatically set', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-textarea name=\"wcs-textarea-1\" />\n        `);\n\n        const inputSpy = await page.spyOnEvent('wcsInput');\n\n        const textarea = page.locator('wcs-textarea');\n\n        // When\n        await textarea.evaluate((el: any) => el.value = 'Programmatically set value');\n        await page.waitForChanges();\n\n        // Then\n        expect(inputSpy).toHaveReceivedEventTimes(0);\n    });\n\n    test('Should have a default value when value attribute is set', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-textarea name=\"wcs-textarea-1\" value=\"Default value\" />\n        `);\n\n        const textarea = page.locator('wcs-textarea');\n\n        // Then\n        await expect(textarea).toHaveJSProperty('value', 'Default value');\n        await expect(page.locator('wcs-textarea textarea')).toHaveJSProperty('value', 'Default value');\n    });\n\n    test('Should have a default value when value property is set', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-textarea name=\"wcs-textarea-1\" />\n        `);\n\n        const textarea = page.locator('wcs-textarea');\n\n        // When\n        await textarea.evaluate((el: any) => el.value = 'Default value');\n\n        // Then\n        await expect(textarea).toHaveJSProperty('value', 'Default value');\n        await expect(page.locator('wcs-textarea textarea')).toHaveJSProperty('value', 'Default value');\n    });\n});\n"]}

package/dist/collection/components/textarea/textarea.js

@@ -699,7 +699,7 @@ export class Textarea {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",

package/dist/collection/utils/accessibility.js

@@ -65,4 +65,20 @@ export function isFocusable(element) {
             return false;
     }
 }
+/**
+ * Finds the next focusable element after the given startElement.
+ * It checks the next siblings of the startElement and returns the first focusable element found.
+ * If no focusable element is found, it returns null.
+ * @param startElement The element from which to start searching for the next focusable element.
+ */
+export function findNextFocusableElement(startElement) {
+    let nextElement = startElement.nextElementSibling;
+    while (nextElement) {
+        if (isFocusable(nextElement) && nextElement instanceof HTMLElement) {
+            return nextElement;
+        }
+        nextElement = nextElement.nextElementSibling;
+    }
+    return null;
+}
 //# sourceMappingURL=accessibility.js.map

package/dist/collection/utils/accessibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"accessibility.js","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gBAAgB,CAAC,OAAoB;IACjD,OAAO,OAAO,KAAK,QAAQ,CAAC,aAAa,CAAC;AAC9C,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAChC,YAAY;IACZ,mBAAmB;IACnB,cAAc;IACd,mBAAmB;IACnB,cAAc;IACd,YAAY;IACZ,WAAW;IACX,cAAc;IACd,cAAc;IACd,WAAW;IACX,YAAY;IACZ,SAAS;IACT,aAAa;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAAY;IAC9C,OAAO,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,OAAY;IACpC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;QACjD,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACrD,IACI,YAAY,CAAC,MAAM,KAAK,CAAC;QACzB,YAAY,CAAC,GAAG,KAAK,CAAC;QACtB,YAAY,CAAC,IAAI,KAAK,CAAC;QACvB,YAAY,CAAC,KAAK,KAAK,CAAC;QACxB,YAAY,CAAC,MAAM,KAAK,CAAC;QACzB,YAAY,CAAC,KAAK,KAAK,CAAC;QACxB,YAAY,CAAC,CAAC,KAAK,CAAC;QACpB,YAAY,CAAC,CAAC,KAAK,CAAC,EACtB,CAAC;QACC,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,IACI,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM;QAChC,OAAO,CAAC,KAAK,CAAC,UAAU,KAAK,QAAQ;QACrC,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,CAAC,EAC7B,CAAC;QACC,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,qBAAqB,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,2CAA2C;IAC3C,QAAQ,OAAO,CAAC,QAAQ,EAAE,CAAC;QACvB,KAAK,GAAG;YACJ,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,GAAG,KAAK,QAAQ,CAAC;QACtD,KAAK,OAAO;YACR,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;QACrC,KAAK,QAAQ,CAAC;QACd,KAAK,QAAQ,CAAC;QACd,KAAK,UAAU;YACX,OAAO,IAAI,CAAC;QAChB;YACI,OAAO,KAAK,CAAC;IACrB,CAAC;AACL,CAAC","sourcesContent":["export function isElementFocused(element: HTMLElement) {\n    return element === document.activeElement;\n}\n\nexport const wcsFocusableElements = [\n    'wcs-select',\n    'wcs-select-option',\n    'wcs-dropdown',\n    'wcs-dropdown-item',\n    'wcs-nav-item',\n    'wcs-button',\n    'wcs-input',\n    'wcs-textarea',\n    'wcs-checkbox',\n    'wcs-radio',\n    'wcs-switch',\n    'wcs-tab',\n    'wcs-counter',\n];\n\n/**\n * Returns true if the provided element is part of the wcsFocusableElements list\n */\nexport function isWcsFocusableElement(element: any): boolean {\n    return wcsFocusableElements.includes(element.tagName.toLowerCase());\n}\n\nexport function isFocusable(element: any) {\n    if (parseInt(element.getAttribute('tabindex')) < 0) {\n        return false;\n    }\n    if (element.disabled) {\n        return false;\n    }\n    const boundingRect = element.getBoundingClientRect();\n    if (\n        boundingRect.bottom === 0 &&\n        boundingRect.top === 0 &&\n        boundingRect.left === 0 &&\n        boundingRect.right === 0 &&\n        boundingRect.height === 0 &&\n        boundingRect.width === 0 &&\n        boundingRect.x === 0 &&\n        boundingRect.y === 0\n    ) {\n        return false;\n    }\n    if (\n        element.style.display === 'none' ||\n        element.style.visibility === 'hidden' ||\n        element.style.opacity === 0\n    ) {\n        return false;\n    }\n    if (element.getAttribute('role') === 'button') {\n        return true;\n    }\n\n    if (isWcsFocusableElement(element)) {\n        return true;\n    }\n\n    // To identify other native focus elements.\n    switch (element.nodeName) {\n        case 'A':\n            return !!element.href && element.rel !== 'ignore';\n        case 'INPUT':\n            return element.type !== 'hidden';\n        case 'BUTTON':\n        case 'SELECT':\n        case 'TEXTAREA':\n            return true;\n        default:\n            return false;\n    }\n}\n"]}
+{"version":3,"file":"accessibility.js","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gBAAgB,CAAC,OAAoB;IACjD,OAAO,OAAO,KAAK,QAAQ,CAAC,aAAa,CAAC;AAC9C,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAChC,YAAY;IACZ,mBAAmB;IACnB,cAAc;IACd,mBAAmB;IACnB,cAAc;IACd,YAAY;IACZ,WAAW;IACX,cAAc;IACd,cAAc;IACd,WAAW;IACX,YAAY;IACZ,SAAS;IACT,aAAa;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAAY;IAC9C,OAAO,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,OAAY;IACpC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;QACjD,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACrD,IACI,YAAY,CAAC,MAAM,KAAK,CAAC;QACzB,YAAY,CAAC,GAAG,KAAK,CAAC;QACtB,YAAY,CAAC,IAAI,KAAK,CAAC;QACvB,YAAY,CAAC,KAAK,KAAK,CAAC;QACxB,YAAY,CAAC,MAAM,KAAK,CAAC;QACzB,YAAY,CAAC,KAAK,KAAK,CAAC;QACxB,YAAY,CAAC,CAAC,KAAK,CAAC;QACpB,YAAY,CAAC,CAAC,KAAK,CAAC,EACtB,CAAC;QACC,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,IACI,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM;QAChC,OAAO,CAAC,KAAK,CAAC,UAAU,KAAK,QAAQ;QACrC,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,CAAC,EAC7B,CAAC;QACC,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,qBAAqB,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,2CAA2C;IAC3C,QAAQ,OAAO,CAAC,QAAQ,EAAE,CAAC;QACvB,KAAK,GAAG;YACJ,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,GAAG,KAAK,QAAQ,CAAC;QACtD,KAAK,OAAO;YACR,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;QACrC,KAAK,QAAQ,CAAC;QACd,KAAK,QAAQ,CAAC;QACd,KAAK,UAAU;YACX,OAAO,IAAI,CAAC;QAChB;YACI,OAAO,KAAK,CAAC;IACrB,CAAC;AACL,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,wBAAwB,CAAC,YAAyB;IAC9D,IAAI,WAAW,GAAG,YAAY,CAAC,kBAAkB,CAAC;IAClD,OAAO,WAAW,EAAE,CAAC;QACjB,IAAI,WAAW,CAAC,WAAW,CAAC,IAAI,WAAW,YAAY,WAAW,EAAE,CAAC;YACjE,OAAO,WAAW,CAAC;QACvB,CAAC;QACD,WAAW,GAAG,WAAW,CAAC,kBAAkB,CAAC;IACjD,CAAC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC","sourcesContent":["export function isElementFocused(element: HTMLElement): boolean {\n    return element === document.activeElement;\n}\n\nexport const wcsFocusableElements = [\n    'wcs-select',\n    'wcs-select-option',\n    'wcs-dropdown',\n    'wcs-dropdown-item',\n    'wcs-nav-item',\n    'wcs-button',\n    'wcs-input',\n    'wcs-textarea',\n    'wcs-checkbox',\n    'wcs-radio',\n    'wcs-switch',\n    'wcs-tab',\n    'wcs-counter',\n];\n\n/**\n * Returns true if the provided element is part of the wcsFocusableElements list\n */\nexport function isWcsFocusableElement(element: any): boolean {\n    return wcsFocusableElements.includes(element.tagName.toLowerCase());\n}\n\nexport function isFocusable(element: any): boolean {\n    if (parseInt(element.getAttribute('tabindex')) < 0) {\n        return false;\n    }\n    if (element.disabled) {\n        return false;\n    }\n    const boundingRect = element.getBoundingClientRect();\n    if (\n        boundingRect.bottom === 0 &&\n        boundingRect.top === 0 &&\n        boundingRect.left === 0 &&\n        boundingRect.right === 0 &&\n        boundingRect.height === 0 &&\n        boundingRect.width === 0 &&\n        boundingRect.x === 0 &&\n        boundingRect.y === 0\n    ) {\n        return false;\n    }\n    if (\n        element.style.display === 'none' ||\n        element.style.visibility === 'hidden' ||\n        element.style.opacity === 0\n    ) {\n        return false;\n    }\n    if (element.getAttribute('role') === 'button') {\n        return true;\n    }\n\n    if (isWcsFocusableElement(element)) {\n        return true;\n    }\n\n    // To identify other native focus elements.\n    switch (element.nodeName) {\n        case 'A':\n            return !!element.href && element.rel !== 'ignore';\n        case 'INPUT':\n            return element.type !== 'hidden';\n        case 'BUTTON':\n        case 'SELECT':\n        case 'TEXTAREA':\n            return true;\n        default:\n            return false;\n    }\n}\n\n/**\n * Finds the next focusable element after the given startElement.\n * It checks the next siblings of the startElement and returns the first focusable element found.\n * If no focusable element is found, it returns null.\n * @param startElement The element from which to start searching for the next focusable element.\n */\nexport function findNextFocusableElement(startElement: HTMLElement): HTMLElement | null {\n    let nextElement = startElement.nextElementSibling;\n    while (nextElement) {\n        if (isFocusable(nextElement) && nextElement instanceof HTMLElement) {\n            return nextElement;\n        }\n        nextElement = nextElement.nextElementSibling;\n    }\n    return null;\n}\n"]}

package/dist/collection/utils/playwright/test-expect.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test-expect.js.map

package/dist/collection/utils/playwright/test-expect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-expect.js","sourceRoot":"","sources":["../../../src/utils/playwright/test-expect.ts"],"names":[],"mappings":"AAAA,8JAA8J","sourcesContent":["// TODO: to delete when we update to version of @stencil/playwright that includes forged matchers definition (https://github.com/stenciljs/playwright/pull/54)\n\ninterface CustomMatchers<R = unknown> {\n    /**\n     * Will check if the event spy received the expected event.\n     */\n    toHaveReceivedEvent(): R;\n\n    /**\n     * Will check if the event spy received the expected event with the expected detail.\n     * @param eventDetail The expected detail of the event.\n     */\n    toHaveReceivedEventDetail(eventDetail: any): R;\n\n    /**\n     * Will check if the event spy received the expected event at the given index with the expected detail.\n     * @param index position of the event in the received events array.\n     * @param eventDetail The expected detail of the event.\n     */\n    toHaveNthReceivedEventDetail(index: number, eventDetail: any): R;\n\n    /**\n     * Will check if the event spy received the expected event with the expected detail on the first received event.\n     * @param eventDetail The expected detail of the event.\n     */\n    toHaveFirstReceivedEventDetail(eventDetail: any): R;\n\n    /**\n     * Will check how many times the event has been received.\n     */\n    toHaveReceivedEventTimes(count: number): R;\n}\n\ndeclare global {\n    // eslint-disable-next-line @typescript-eslint/no-namespace\n    namespace PlaywrightTest {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        interface Matchers<R> extends CustomMatchers<R> {}\n    }\n}\n\nexport {};\n"]}

package/dist/collection/utils/playwright/test.js

@@ -0,0 +1,16 @@
+/**
+ * @see stencil.config.ts expose dev web server
+ * @param page
+ * @param content
+ */
+export async function setWcsContent(page, content) {
+    await page.setContent(content);
+    await page.evaluate(() => {
+        document.body.classList.add('sncf-holding');
+    });
+    await page.addStyleTag({
+        url: '/design-tokens/sncf-holding.css',
+    });
+    await page.waitForChanges();
+}
+//# sourceMappingURL=test.js.map

package/dist/collection/utils/playwright/test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../../../src/utils/playwright/test.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,IAAa,EAAE,OAAe;IAC9D,MAAM,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;QACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChD,CAAC,CAAC,CAAA;IACF,MAAM,IAAI,CAAC,WAAW,CAAC;QACnB,GAAG,EAAE,iCAAiC;KACzC,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAChC,CAAC","sourcesContent":["import { E2EPage } from '@stencil/playwright';\n\n/**\n * @see stencil.config.ts expose dev web server\n * @param page\n * @param content\n */\nexport async function setWcsContent(page: E2EPage, content: string) {\n    await page.setContent(content);\n    await page.evaluate(() => {\n        document.body.classList.add('sncf-holding');\n    })\n    await page.addStyleTag({\n        url: '/design-tokens/sncf-holding.css',\n    });\n    await page.waitForChanges();\n}\n"]}

package/dist/esm/accessibility-069640cf.js.map

@@ -1 +1 @@
-{"file":"accessibility-069640cf.js","mappings":"SAAgB,gBAAgB,CAAC,OAAoB;IACjD,OAAO,OAAO,KAAK,QAAQ,CAAC,aAAa,CAAC;AAC9C,CAAC;AAEM,MAAM,oBAAoB,GAAG;IAChC,YAAY;IACZ,mBAAmB;IACnB,cAAc;IACd,mBAAmB;IACnB,cAAc;IACd,YAAY;IACZ,WAAW;IACX,cAAc;IACd,cAAc;IACd,WAAW;IACX,YAAY;IACZ,SAAS;IACT,aAAa;CAChB,CAAC;AAEF;;;SAGgB,qBAAqB,CAAC,OAAY;IAC9C,OAAO,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,CAAC;SAEe,WAAW,CAAC,OAAY;IACpC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,EAAE;QAChD,OAAO,KAAK,CAAC;KAChB;IACD,IAAI,OAAO,CAAC,QAAQ,EAAE;QAClB,OAAO,KAAK,CAAC;KAChB;IACD,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACrD,IACI,YAAY,CAAC,MAAM,KAAK,CAAC;QACzB,YAAY,CAAC,GAAG,KAAK,CAAC;QACtB,YAAY,CAAC,IAAI,KAAK,CAAC;QACvB,YAAY,CAAC,KAAK,KAAK,CAAC;QACxB,YAAY,CAAC,MAAM,KAAK,CAAC;QACzB,YAAY,CAAC,KAAK,KAAK,CAAC;QACxB,YAAY,CAAC,CAAC,KAAK,CAAC;QACpB,YAAY,CAAC,CAAC,KAAK,CAAC,EACtB;QACE,OAAO,KAAK,CAAC;KAChB;IACD,IACI,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM;QAChC,OAAO,CAAC,KAAK,CAAC,UAAU,KAAK,QAAQ;QACrC,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,CAAC,EAC7B;QACE,OAAO,KAAK,CAAC;KAChB;IACD,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;QAC3C,OAAO,IAAI,CAAC;KACf;IAED,IAAI,qBAAqB,CAAC,OAAO,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACf;;IAGD,QAAQ,OAAO,CAAC,QAAQ;QACpB,KAAK,GAAG;YACJ,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,GAAG,KAAK,QAAQ,CAAC;QACtD,KAAK,OAAO;YACR,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;QACrC,KAAK,QAAQ,CAAC;QACd,KAAK,QAAQ,CAAC;QACd,KAAK,UAAU;YACX,OAAO,IAAI,CAAC;QAChB;YACI,OAAO,KAAK,CAAC;KACpB;AACL;;;;","names":[],"sources":["src/utils/accessibility.ts"],"sourcesContent":["export function isElementFocused(element: HTMLElement) {\n    return element === document.activeElement;\n}\n\nexport const wcsFocusableElements = [\n    'wcs-select',\n    'wcs-select-option',\n    'wcs-dropdown',\n    'wcs-dropdown-item',\n    'wcs-nav-item',\n    'wcs-button',\n    'wcs-input',\n    'wcs-textarea',\n    'wcs-checkbox',\n    'wcs-radio',\n    'wcs-switch',\n    'wcs-tab',\n    'wcs-counter',\n];\n\n/**\n * Returns true if the provided element is part of the wcsFocusableElements list\n */\nexport function isWcsFocusableElement(element: any): boolean {\n    return wcsFocusableElements.includes(element.tagName.toLowerCase());\n}\n\nexport function isFocusable(element: any) {\n    if (parseInt(element.getAttribute('tabindex')) < 0) {\n        return false;\n    }\n    if (element.disabled) {\n        return false;\n    }\n    const boundingRect = element.getBoundingClientRect();\n    if (\n        boundingRect.bottom === 0 &&\n        boundingRect.top === 0 &&\n        boundingRect.left === 0 &&\n        boundingRect.right === 0 &&\n        boundingRect.height === 0 &&\n        boundingRect.width === 0 &&\n        boundingRect.x === 0 &&\n        boundingRect.y === 0\n    ) {\n        return false;\n    }\n    if (\n        element.style.display === 'none' ||\n        element.style.visibility === 'hidden' ||\n        element.style.opacity === 0\n    ) {\n        return false;\n    }\n    if (element.getAttribute('role') === 'button') {\n        return true;\n    }\n\n    if (isWcsFocusableElement(element)) {\n        return true;\n    }\n\n    // To identify other native focus elements.\n    switch (element.nodeName) {\n        case 'A':\n            return !!element.href && element.rel !== 'ignore';\n        case 'INPUT':\n            return element.type !== 'hidden';\n        case 'BUTTON':\n        case 'SELECT':\n        case 'TEXTAREA':\n            return true;\n        default:\n            return false;\n    }\n}\n"],"version":3}
+{"file":"accessibility-069640cf.js","mappings":"SAAgB,gBAAgB,CAAC,OAAoB;IACjD,OAAO,OAAO,KAAK,QAAQ,CAAC,aAAa,CAAC;AAC9C,CAAC;AAEM,MAAM,oBAAoB,GAAG;IAChC,YAAY;IACZ,mBAAmB;IACnB,cAAc;IACd,mBAAmB;IACnB,cAAc;IACd,YAAY;IACZ,WAAW;IACX,cAAc;IACd,cAAc;IACd,WAAW;IACX,YAAY;IACZ,SAAS;IACT,aAAa;CAChB,CAAC;AAEF;;;SAGgB,qBAAqB,CAAC,OAAY;IAC9C,OAAO,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;AACxE,CAAC;SAEe,WAAW,CAAC,OAAY;IACpC,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,EAAE;QAChD,OAAO,KAAK,CAAC;KAChB;IACD,IAAI,OAAO,CAAC,QAAQ,EAAE;QAClB,OAAO,KAAK,CAAC;KAChB;IACD,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACrD,IACI,YAAY,CAAC,MAAM,KAAK,CAAC;QACzB,YAAY,CAAC,GAAG,KAAK,CAAC;QACtB,YAAY,CAAC,IAAI,KAAK,CAAC;QACvB,YAAY,CAAC,KAAK,KAAK,CAAC;QACxB,YAAY,CAAC,MAAM,KAAK,CAAC;QACzB,YAAY,CAAC,KAAK,KAAK,CAAC;QACxB,YAAY,CAAC,CAAC,KAAK,CAAC;QACpB,YAAY,CAAC,CAAC,KAAK,CAAC,EACtB;QACE,OAAO,KAAK,CAAC;KAChB;IACD,IACI,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM;QAChC,OAAO,CAAC,KAAK,CAAC,UAAU,KAAK,QAAQ;QACrC,OAAO,CAAC,KAAK,CAAC,OAAO,KAAK,CAAC,EAC7B;QACE,OAAO,KAAK,CAAC;KAChB;IACD,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;QAC3C,OAAO,IAAI,CAAC;KACf;IAED,IAAI,qBAAqB,CAAC,OAAO,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACf;;IAGD,QAAQ,OAAO,CAAC,QAAQ;QACpB,KAAK,GAAG;YACJ,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,GAAG,KAAK,QAAQ,CAAC;QACtD,KAAK,OAAO;YACR,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;QACrC,KAAK,QAAQ,CAAC;QACd,KAAK,QAAQ,CAAC;QACd,KAAK,UAAU;YACX,OAAO,IAAI,CAAC;QAChB;YACI,OAAO,KAAK,CAAC;KACpB;AACL;;;;","names":[],"sources":["src/utils/accessibility.ts"],"sourcesContent":["export function isElementFocused(element: HTMLElement): boolean {\n    return element === document.activeElement;\n}\n\nexport const wcsFocusableElements = [\n    'wcs-select',\n    'wcs-select-option',\n    'wcs-dropdown',\n    'wcs-dropdown-item',\n    'wcs-nav-item',\n    'wcs-button',\n    'wcs-input',\n    'wcs-textarea',\n    'wcs-checkbox',\n    'wcs-radio',\n    'wcs-switch',\n    'wcs-tab',\n    'wcs-counter',\n];\n\n/**\n * Returns true if the provided element is part of the wcsFocusableElements list\n */\nexport function isWcsFocusableElement(element: any): boolean {\n    return wcsFocusableElements.includes(element.tagName.toLowerCase());\n}\n\nexport function isFocusable(element: any): boolean {\n    if (parseInt(element.getAttribute('tabindex')) < 0) {\n        return false;\n    }\n    if (element.disabled) {\n        return false;\n    }\n    const boundingRect = element.getBoundingClientRect();\n    if (\n        boundingRect.bottom === 0 &&\n        boundingRect.top === 0 &&\n        boundingRect.left === 0 &&\n        boundingRect.right === 0 &&\n        boundingRect.height === 0 &&\n        boundingRect.width === 0 &&\n        boundingRect.x === 0 &&\n        boundingRect.y === 0\n    ) {\n        return false;\n    }\n    if (\n        element.style.display === 'none' ||\n        element.style.visibility === 'hidden' ||\n        element.style.opacity === 0\n    ) {\n        return false;\n    }\n    if (element.getAttribute('role') === 'button') {\n        return true;\n    }\n\n    if (isWcsFocusableElement(element)) {\n        return true;\n    }\n\n    // To identify other native focus elements.\n    switch (element.nodeName) {\n        case 'A':\n            return !!element.href && element.rel !== 'ignore';\n        case 'INPUT':\n            return element.type !== 'hidden';\n        case 'BUTTON':\n        case 'SELECT':\n        case 'TEXTAREA':\n            return true;\n        default:\n            return false;\n    }\n}\n\n/**\n * Finds the next focusable element after the given startElement.\n * It checks the next siblings of the startElement and returns the first focusable element found.\n * If no focusable element is found, it returns null.\n * @param startElement The element from which to start searching for the next focusable element.\n */\nexport function findNextFocusableElement(startElement: HTMLElement): HTMLElement | null {\n    let nextElement = startElement.nextElementSibling;\n    while (nextElement) {\n        if (isFocusable(nextElement) && nextElement instanceof HTMLElement) {\n            return nextElement;\n        }\n        nextElement = nextElement.nextElementSibling;\n    }\n    return null;\n}\n"],"version":3}