wcs-core 7.3.0 → 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":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAW,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACrC,IAAI,CAAC,2DAA2D,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACpG,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;SAEzB,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;QAEnD,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAE9C,OAAO;QACP,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;QACvB,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,QAAQ,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,2EAA2E,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACpH,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;SAEzB,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;QAEnD,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAE9C,OAAO;QACP,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;QACvB,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,QAAQ,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qEAAqE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QAC9G,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;SAGzB,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAErD,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAEtC,OAAO;QACP,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;QACvB,MAAM,QAAQ,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;QACzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,uBAAuB;QAC7C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,2CAA2C;QAC3C,MAAM,CAAC,SAAS,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;QAC9C,MAAM,CAAC,SAAS,CAAC,CAAC,yBAAyB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uEAAuE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QAChH,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;SAGzB,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAErD,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAEtC,OAAO;QACP,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;QACvB,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;QACrB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,SAAS,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;QAC9C,MAAM,CAAC,SAAS,CAAC,CAAC,yBAAyB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oEAAoE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QAC7G,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;SAEzB,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAErD,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAE9C,OAAO;QACP,MAAM,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAO,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,GAAG,4BAA4B,CAAC,CAAC;QAC9E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,SAAS,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,mEAAmE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QAC5G,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;SAEzB,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;QAEnD,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAE9C,OAAO;QACP,MAAM,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAO,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,GAAG,4BAA4B,CAAC,CAAC;QAC9E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,QAAQ,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,yDAAyD,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QAClG,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;SAEzB,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAE9C,OAAO;QACP,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;QAClE,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IACnG,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,wDAAwD,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACjG,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;SAEzB,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAE9C,OAAO;QACP,MAAM,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAO,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC;QAEjE,OAAO;QACP,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;QAClE,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IACnG,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","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/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/{popper-e491c314.js → popper-ac238961.js}

@@ -161,7 +161,7 @@ var round = Math.round;
 function getUAString() {
   var uaData = navigator.userAgentData;
 
-  if (uaData != null && uaData.brands) {
+  if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
     return uaData.brands.map(function (item) {
       return item.brand + "/" + item.version;
     }).join(' ');
@@ -449,7 +449,6 @@ function effect$1(_ref2) {
   }
 
   if (!contains(state.elements.popper, arrowElement)) {
-
     return;
   }
 
@@ -480,10 +479,9 @@ var unsetSides = {
 // Zooming can change the DPR, but it seems to report a value that will
 // cleanly divide the values into the appropriate subpixels.
 
-function roundOffsetsByDPR(_ref) {
+function roundOffsetsByDPR(_ref, win) {
   var x = _ref.x,
       y = _ref.y;
-  var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
     x: round(x * dpr) / dpr || 0,
@@ -566,7 +564,7 @@ function mapToStyles(_ref2) {
   var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
     x: x,
     y: y
-  }) : {
+  }, getWindow(popper)) : {
     x: x,
     y: y
   };
@@ -592,7 +590,6 @@ function computeStyles(_ref5) {
       adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
       _options$roundOffsets = options.roundOffsets,
       roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-
   var commonStyles = {
     placement: getBasePlacement(state.placement),
     variation: getVariation(state.placement),
@@ -1660,8 +1657,7 @@ function popperGenerator(generatorOptions) {
 
         state.orderedModifiers = orderedModifiers.filter(function (m) {
           return m.enabled;
-        }); // Validate the provided modifiers so that the consumer will get warned
-
+        });
         runModifierEffects();
         return instance.update();
       },
@@ -1681,7 +1677,6 @@ function popperGenerator(generatorOptions) {
         // anymore
 
         if (!areValidElements(reference, popper)) {
-
           return;
         } // Store the reference and popper rects to be read by modifiers
 
@@ -1706,7 +1701,6 @@ function popperGenerator(generatorOptions) {
         });
 
         for (var index = 0; index < state.orderedModifiers.length; index++) {
-
           if (state.reset === true) {
             state.reset = false;
             index = -1;
@@ -1744,7 +1738,6 @@ function popperGenerator(generatorOptions) {
     };
 
     if (!areValidElements(reference, popper)) {
-
       return instance;
     }
 
@@ -1759,11 +1752,11 @@ function popperGenerator(generatorOptions) {
     // one.
 
     function runModifierEffects() {
-      state.orderedModifiers.forEach(function (_ref3) {
-        var name = _ref3.name,
-            _ref3$options = _ref3.options,
-            options = _ref3$options === void 0 ? {} : _ref3$options,
-            effect = _ref3.effect;
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
 
         if (typeof effect === 'function') {
           var cleanupFn = effect({
@@ -1798,4 +1791,4 @@ var createPopper = /*#__PURE__*/popperGenerator({
 
 export { applyStyles$1 as a, createPopper as c };
 
-//# sourceMappingURL=popper-e491c314.js.map
+//# sourceMappingURL=popper-ac238961.js.map