npm - wcs-core - Versions diffs - 7.6.0 → 7.7.0 - Mend

wcs-core 7.6.0 → 7.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (704) hide show

package/dist/collection/components/com-nav-submenu/com-nav-submenu.js CHANGED Viewed

@@ -121,9 +121,9 @@ export class ComNavSubmenu {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '935e78a3daf751160c21e7375e86be186bcfdec9', onClick: evt => this.onClick(evt), role: "listitem", "data-open": this.menuOpen }, this.currentActiveSizing === 'mobile' ?
+        return (h(Host, { key: 'e6de47cc3e8d11be47b32229dc74a58aaf2f23c4', onClick: evt => this.onClick(evt), role: "listitem", "data-open": this.menuOpen }, this.currentActiveSizing === 'mobile' ?
             h("h2", { role: "presentation", class: "menu-button" }, h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { class: "arrow-icon", "data-open": this.menuOpen }, "\uF107")))
-            : h("button", Object.assign({ onClick: _ => this.menuOpen = !this.menuOpen, "aria-expanded": this.menuOpen ? 'true' : 'false', "aria-controls": this.menuItemsId, class: "menu-button", ref: (el) => (this.nativeButton = el) }, this.inheritedAttributes), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon", "data-open": this.menuOpen }, "\uF107"))), h("div", { key: '1e654c7f9a74f3e6bb92e9cd3589ea3b7ee9ed99', class: "drawer", "data-open": this.menuOpen, tabIndex: -1 }, h("div", { key: '1c2d8a56d7e91071fcb43f537173850ecf62fb28', class: "drawer-container" }, h("div", { key: '4880e09bcf8e06464db2984ac43dbd01ee9a0af3', class: "drawer-content" }, h("div", { key: 'd2e6e97442a73ff8d24ba4165587fd544b2ff853', class: "drawer-description" }, h("h3", { key: '04b20b11befc1dc63e719fda8dda51fe248e93cd' }, this.panelTitle), h("p", { key: '69810728510063a77b97845d91f684fe2abfa347' }, this.panelDescription)), h("div", { key: 'ed35406cc3a5ced0155181239dc96b4afcaa2871', role: "list", "aria-label": this.label, id: this.menuItemsId, class: "menu-items", onClick: (evt) => this.handleMenuItemsClick(evt), onKeyDown: evt => this.handleMenuItemsKeyDown(evt) }, h("slot", { key: '3059b3ccbef8b9483e05e4d400b1643d9ab23273' })))))));
+            : h("button", Object.assign({ onClick: _ => this.menuOpen = !this.menuOpen, "aria-expanded": this.menuOpen ? 'true' : 'false', "aria-controls": this.menuItemsId, class: "menu-button", ref: (el) => (this.nativeButton = el) }, this.inheritedAttributes), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon", "data-open": this.menuOpen }, "\uF107"))), h("div", { key: '99667d527d33591f69d9591ca039a8b416322bc5', class: "drawer", "data-open": this.menuOpen, tabIndex: -1 }, h("div", { key: 'cece9395bfb103342f9f54fc89bc207ccb18db9c', class: "drawer-container" }, h("div", { key: '19482a5a7393852da570431292c0f0cde86cfdcd', class: "drawer-content" }, h("div", { key: '85387b5371209178cb451065ddd9124143bb0112', class: "drawer-description" }, h("h3", { key: '4692b2d757408142da7357cddcfb55f8efa154e7' }, this.panelTitle), h("p", { key: 'e21e9eda294bac55a85e16e82178e9ad127907f4' }, this.panelDescription)), h("div", { key: '984f302624daf4341fbb3236cde16ff7e640f458', role: "list", "aria-label": this.label, id: this.menuItemsId, class: "menu-items", onClick: (evt) => this.handleMenuItemsClick(evt), onKeyDown: evt => this.handleMenuItemsKeyDown(evt) }, h("slot", { key: '286906e6ab84bed9d990eb4cbb10fea119a9d060' })))))));
     }
     static get is() { return "wcs-com-nav-submenu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/counter/counter.js CHANGED Viewed

@@ -165,7 +165,7 @@ export class Counter {
         });
     }
     render() {
-        return (h(Host, { key: '6f1d46e231cc1f88a92a2faa0122e1ed7b9dd834' }, h("div", { key: 'c3ed2c944c2a8f61ab862411b1d503a84ac37ae4', class: "counter" }, h("wcs-button", { key: 'c0d0d41e07a99ef0730b22d029529e629ff2f8d3', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, h("wcs-mat-icon", { key: '5003db6a007f8ede51d567a76ea18160fdb60949', icon: "remove", size: "s" })), h("div", { key: 'ae3b0ca61a95fe908583df73748b7e7d19242fd0', class: "counter-container", ref: input => this.counterContainer = input }, h("span", { key: '499a0d0ff7f38fcae6664b118991aeb39f5d6034', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), h("span", Object.assign({ key: '62cab421b796106f0b2957e4d8445266bd6ba754', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), h("span", { key: '339b6949d2b64262085f7bda19897f9533166cb4', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { key: 'ee77cee6c9d08225c1844d1c4703ea6868c054da', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, h("wcs-mat-icon", { key: 'b1b6cc395186ee871801d47ad2b9b62791f64b29', icon: "add", size: "s" })))));
+        return (h(Host, { key: '4043c155f8c67913d62318235aca68123f9746b6' }, h("div", { key: 'c3207a199646cba8f00ec1c942515c0888a64234', class: "counter" }, h("wcs-button", { key: 'ff7d18184fba7ff20fcaf59539ad379310f8ddc2', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, h("wcs-mat-icon", { key: '6749957c0b3d7ed71552bac6e57f7b1edcc2b30a', icon: "remove", size: "s" })), h("div", { key: 'ed9f5e4410f0858b2ac82b5931bc8195fb98eb7f', class: "counter-container", ref: input => this.counterContainer = input }, h("span", { key: 'e5ec58628efa9cd02ed824eec9f1f2e9773e24f1', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), h("span", Object.assign({ key: '27100d8f18b1325dfbab458b8465ce927c21682f', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), h("span", { key: '7129d4872e064d799dd654975e112f4200ebb141', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { key: '9fffb1c68e9ab63336983f368aeea7a4f41cd5db', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, h("wcs-mat-icon", { key: '4e07a2939e4c3c24d52bd7c6ff698526de781ca4', icon: "add", size: "s" })))));
     }
     static get is() { return "wcs-counter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/divider/divider.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Divider {
     render() {
-        return (h(Host, { key: 'cf4452e90a52e1bb419fec0db2d9c0838ad7b134' }));
+        return (h(Host, { key: 'd0fea091e2fa4aa557e56be65dcb604cd4340309' }));
     }
     static get is() { return "wcs-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,6 +64,7 @@ button:focus-visible + wcs-button {
 }
 .popover {
+  width: max-content;
   display: none;
   border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);
   border-radius: var(--wcs-dropdown-overlay-border-radius);

package/dist/collection/components/dropdown/dropdown.e2e.playwright.js CHANGED Viewed

@@ -369,5 +369,28 @@ test.describe('Dropdown component', () => {
             expect(scrollY).toBe(0);
         });
     });
+    test.describe('Overlay positionning', () => {
+        test('should display the popover wider than the trigger button when items have long labels', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div style="display: flex; width: 100%;">
+                    <wcs-dropdown id="dropdown" mode="plain" shape="normal" size="m">
+                        <span slot="placeholder">OK</span>
+                        <wcs-dropdown-item>Un libellé vraiment très très long qui dépasse la taille du bouton</wcs-dropdown-item>
+                        <wcs-dropdown-item>Autre item</wcs-dropdown-item>
+                    </wcs-dropdown>
+                </div>
+            `);
+            const dropdown = page.locator('wcs-dropdown');
+            const wcsButton = dropdown.locator('wcs-button');
+            // When
+            await wcsButton.click();
+            await page.waitForChanges();
+            // Then
+            const buttonWidth = await wcsButton.evaluate((el) => el.getBoundingClientRect().width);
+            const popoverWidth = await dropdown.locator('.popover').evaluate((el) => el.getBoundingClientRect().width);
+            expect(popoverWidth).toBeGreaterThan(buttonWidth + 50 /* some margin */);
+        });
+    });
 });
 //# sourceMappingURL=dropdown.e2e.playwright.js.map

package/dist/collection/components/dropdown/dropdown.e2e.playwright.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.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('Dropdown component', () => {\n test.describe('keyboard interactions', () => {\n test('Enter should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('Enter');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('SPACE should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('Space');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('DOWN_ARROW should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('ArrowDown');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('UP_ARROW should open menu and move focus to the last item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('ArrowUp');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(lastItem).toBeFocused();\n });\n\n test('HOME should focus the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Home\n await page.keyboard.press('Home');\n await page.waitForChanges();\n\n // Then\n await expect(firstItem).toBeFocused();\n });\n\n test('END should focus the last item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing End\n await page.keyboard.press('End');\n await page.waitForChanges();\n\n // Then\n await expect(lastItem).toBeFocused();\n });\n\n test('UP_ARROW should move focus to the previous item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing ArrowUp\n await page.keyboard.press('ArrowUp');\n await page.waitForChanges();\n\n // Then\n await expect(lastItem).toBeFocused();\n });\n\n test('DOWN_ARROW should move focus to the next item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item id=\"second-item\">Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const secondItem = page.locator('wcs-dropdown-item#second-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Escape\n await page.keyboard.press('ArrowDown');\n await page.waitForChanges();\n\n // Then\n await expect(secondItem).toBeFocused();\n });\n\n test('ESCAPE should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Escape\n await page.keyboard.press('Escape');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Tab\n await page.keyboard.press('Tab'); // should close the menu and focus back to button\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('SHIFT+TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Shift+Tab\n await page.keyboard.down('Shift');\n await page.keyboard.press('Tab');\n await page.keyboard.up('Shift');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('ENTER should activate the item, close menu, and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n // spy on the custom event on the locator\n const itemClickSpy = await dropdown.spyOnEvent('wcsDropdownItemClick');\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus();\n await page.keyboard.press('Enter');\n await page.waitForChanges();\n\n // Then\n expect(itemClickSpy).toHaveReceivedEventTimes(1);\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n });\n\n test.describe('Behavior in window with scroll', () => {\n test('should preserve the window scroll position when clicking on a dropdown inside a scrollable container', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <div id=\"scroll-container\" style=\"height: 100vh; overflow-y: auto;\">\n <div style=\"margin-top: 150vh; display: flex; gap: 16px; align-items: center;\">\n <wcs-dropdown id=\"dropdown\" mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-item>Second item</wcs-dropdown-item>\n </wcs-dropdown>\n </div>\n <div style=\"margin-top: 200vh;\">Other content</div>\n </div>\n `);\n\n const body = page.locator('body');\n const dropdown = page.locator('wcs-dropdown');\n\n await dropdown.scrollIntoViewIfNeeded();\n\n // When\n await dropdown.click();\n await page.waitForChanges();\n\n // Then\n const scrollY = await body.evaluate(() => window.scrollY);\n expect(scrollY).toBe(0);\n });\n\n test('should preserve the window scroll position when tabbing to a dropdown inside a scrollable container', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <div id=\"scroll-container\" style=\"height: 100vh; overflow-y: auto;\">\n <div style=\"margin-top: 150vh; display: flex; gap: 16px; align-items: center;\">\n <button id=\"before-dropdown\">Before dropdown</button>\n <wcs-dropdown id=\"dropdown\" mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-item>Second item</wcs-dropdown-item>\n </wcs-dropdown>\n </div>\n <div style=\"margin-top: 200vh;\">Other content</div>\n </div>\n `);\n\n const body = page.locator('body');\n const beforeDropdownButton = page.locator('#before-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n await beforeDropdownButton.scrollIntoViewIfNeeded();\n await beforeDropdownButton.focus();\n\n // When\n await page.keyboard.press('Tab');\n\n // Then\n await expect(dropdownButton).toBeFocused();\n const scrollY = await body.evaluate(() => window.scrollY);\n expect(scrollY).toBe(0);\n });\n });\n});\n"]}
1	+ {"version":3,"file":"dropdown.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.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('Dropdown component', () => {\n test.describe('keyboard interactions', () => {\n test('Enter should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('Enter');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('SPACE should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('Space');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('DOWN_ARROW should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('ArrowDown');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(firstItem).toBeFocused();\n });\n\n test('UP_ARROW should open menu and move focus to the last item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdown.focus();\n await page.keyboard.press('ArrowUp');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n await expect(lastItem).toBeFocused();\n });\n\n test('HOME should focus the first item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Home\n await page.keyboard.press('Home');\n await page.waitForChanges();\n\n // Then\n await expect(firstItem).toBeFocused();\n });\n\n test('END should focus the last item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing End\n await page.keyboard.press('End');\n await page.waitForChanges();\n\n // Then\n await expect(lastItem).toBeFocused();\n });\n\n test('UP_ARROW should move focus to the previous item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing ArrowUp\n await page.keyboard.press('ArrowUp');\n await page.waitForChanges();\n\n // Then\n await expect(lastItem).toBeFocused();\n });\n\n test('DOWN_ARROW should move focus to the next item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item id=\"second-item\">Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const secondItem = page.locator('wcs-dropdown-item#second-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Escape\n await page.keyboard.press('ArrowDown');\n await page.waitForChanges();\n\n // Then\n await expect(secondItem).toBeFocused();\n });\n\n test('ESCAPE should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Escape\n await page.keyboard.press('Escape');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Tab\n await page.keyboard.press('Tab'); // should close the menu and focus back to button\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('SHIFT+TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n // When\n await dropdownButton.dispatchEvent('click'); // open the menu\n await page.waitForChanges();\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus(); // ensure focus is on an item before pressing Shift+Tab\n await page.keyboard.down('Shift');\n await page.keyboard.press('Tab');\n await page.keyboard.up('Shift');\n await page.waitForChanges();\n\n // Then\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n\n test('ENTER should activate the item, close menu, and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n <wcs-dropdown-divider></wcs-dropdown-divider>\n <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n </wcs-dropdown>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n // spy on the custom event on the locator\n const itemClickSpy = await dropdown.spyOnEvent('wcsDropdownItemClick');\n\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n // When\n await dropdownButton.dispatchEvent('click');\n await page.waitForChanges();\n await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n await firstItem.focus();\n await page.keyboard.press('Enter');\n await page.waitForChanges();\n\n // Then\n expect(itemClickSpy).toHaveReceivedEventTimes(1);\n await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n await expect(dropdown).toBeFocused();\n });\n });\n\n test.describe('Behavior in window with scroll', () => {\n test('should preserve the window scroll position when clicking on a dropdown inside a scrollable container', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <div id=\"scroll-container\" style=\"height: 100vh; overflow-y: auto;\">\n <div style=\"margin-top: 150vh; display: flex; gap: 16px; align-items: center;\">\n <wcs-dropdown id=\"dropdown\" mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-item>Second item</wcs-dropdown-item>\n </wcs-dropdown>\n </div>\n <div style=\"margin-top: 200vh;\">Other content</div>\n </div>\n `);\n\n const body = page.locator('body');\n const dropdown = page.locator('wcs-dropdown');\n\n await dropdown.scrollIntoViewIfNeeded();\n\n // When\n await dropdown.click();\n await page.waitForChanges();\n\n // Then\n const scrollY = await body.evaluate(() => window.scrollY);\n expect(scrollY).toBe(0);\n });\n\n test('should preserve the window scroll position when tabbing to a dropdown inside a scrollable container', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <div id=\"scroll-container\" style=\"height: 100vh; overflow-y: auto;\">\n <div style=\"margin-top: 150vh; display: flex; gap: 16px; align-items: center;\">\n <button id=\"before-dropdown\">Before dropdown</button>\n <wcs-dropdown id=\"dropdown\" mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">Dropdown</span>\n <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n <wcs-dropdown-item>Second item</wcs-dropdown-item>\n </wcs-dropdown>\n </div>\n <div style=\"margin-top: 200vh;\">Other content</div>\n </div>\n `);\n\n const body = page.locator('body');\n const beforeDropdownButton = page.locator('#before-dropdown');\n const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n await beforeDropdownButton.scrollIntoViewIfNeeded();\n await beforeDropdownButton.focus();\n\n // When\n await page.keyboard.press('Tab');\n\n // Then\n await expect(dropdownButton).toBeFocused();\n const scrollY = await body.evaluate(() => window.scrollY);\n expect(scrollY).toBe(0);\n });\n });\n\n test.describe('Overlay positionning', () => {\n test('should display the popover wider than the trigger button when items have long labels', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <div style=\"display: flex; width: 100%;\">\n <wcs-dropdown id=\"dropdown\" mode=\"plain\" shape=\"normal\" size=\"m\">\n <span slot=\"placeholder\">OK</span>\n <wcs-dropdown-item>Un libellé vraiment très très long qui dépasse la taille du bouton</wcs-dropdown-item>\n <wcs-dropdown-item>Autre item</wcs-dropdown-item>\n </wcs-dropdown>\n </div>\n `);\n\n const dropdown = page.locator('wcs-dropdown');\n const wcsButton = dropdown.locator('wcs-button');\n\n // When\n await wcsButton.click();\n await page.waitForChanges();\n\n // Then\n const buttonWidth = await wcsButton.evaluate((el) => el.getBoundingClientRect().width);\n const popoverWidth = await dropdown.locator('.popover').evaluate((el) => el.getBoundingClientRect().width);\n\n expect(popoverWidth).toBeGreaterThan(buttonWidth + 50 /* some margin */);\n });\n })\n});\n"]}

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

@@ -198,7 +198,7 @@ export class Dropdown {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS));
     }
     render() {
-        return (h(Host, { key: '96be2f9df0a80b4d6c88cf15419ff29cb001c695' }, h("button", Object.assign({ key: '562456822837e6ff61ed23569335e42ad4e36df9', id: "dropdown-button", "aria-controls": "menu", disabled: this.disabled, "aria-haspopup": "true", role: "button", "aria-expanded": this.expanded ? 'true' : 'false', ref: el => this.nativeButton = el, onClick: ($event) => this.onButtonClick($event), onBlur: ($event) => $event.stopImmediatePropagation() }, this.inheritedAttributes), "Dropdown"), h("wcs-button", { key: '66348725409b810219dd1bd4658611c63bbb5eb8', mode: this.mode, shape: this.shape, disabled: this.disabled, size: this.size, ref: el => this.wcsButton = el, "aria-hidden": "true", tabindex: -1, onClick: ($event) => this.onButtonClick($event), onBlur: (e) => e.stopImmediatePropagation() }, h("div", { key: '028e06637e35ecc14b66cf74fba32dc59d58121a', class: "wcs-button-content-wrapper" }, h("slot", { key: '7f7e2db54f9b5d3a20588c48c1d3fd6750187017', name: "placeholder" }), this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))), h("div", { key: '7f6f4efe22cab63033b3e7775791856ed8e1b921', class: (this.expanded ? 'show ' : '') + 'popover', id: "menu", role: "menu", "aria-labelledby": "dropdown-button", tabindex: -1, ref: el => this.popoverDiv = el }, h("div", { key: 'ca7ce6adea1005d7126d4ae060ada55e9d3b6d70', role: "presentation", id: "arrow", "data-popper-arrow": true }), h("div", { key: '0f2a9e15df898550117743f855e7ee0746157ab1', role: "presentation", class: "container" }, h("slot", { key: '688fd29a894bae8aee4c848a9b07380c95302ca2', name: "item" }, h("span", { key: 'a80c902d26d7afed58e8a17646dac92473042fa4', id: "is-empty" }))))));
+        return (h(Host, { key: '38b0312bdb316b0fb3995ac7e04b3be6f2ae80b1' }, h("button", Object.assign({ key: '5842016e2ccb71db7f793e0376d9cc948591b9fb', id: "dropdown-button", "aria-controls": "menu", disabled: this.disabled, "aria-haspopup": "true", role: "button", "aria-expanded": this.expanded ? 'true' : 'false', ref: el => this.nativeButton = el, onClick: ($event) => this.onButtonClick($event), onBlur: ($event) => $event.stopImmediatePropagation() }, this.inheritedAttributes), "Dropdown"), h("wcs-button", { key: '463316eddbafe0beaa01eca79b06aeca9768d489', mode: this.mode, shape: this.shape, disabled: this.disabled, size: this.size, ref: el => this.wcsButton = el, "aria-hidden": "true", tabindex: -1, onClick: ($event) => this.onButtonClick($event), onBlur: (e) => e.stopImmediatePropagation() }, h("div", { key: '49a3210683fa548f2baaebbc6319e78e864ca7a2', class: "wcs-button-content-wrapper" }, h("slot", { key: 'b3fb4307c73fceddfc931342dc73069dbda28835', name: "placeholder" }), this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))), h("div", { key: '4a0eeee69519eb8a336120c976594aac191abc4d', class: (this.expanded ? 'show ' : '') + 'popover', id: "menu", role: "menu", "aria-labelledby": "dropdown-button", tabindex: -1, ref: el => this.popoverDiv = el }, h("div", { key: '05a7807155799f0492c4bc180d3bf998055ba148', role: "presentation", id: "arrow", "data-popper-arrow": true }), h("div", { key: '61bc7b3fcda2d10d83a68eb40db1e95ec9db3c6f', role: "presentation", class: "container" }, h("slot", { key: '30e21e28fb8c0ce46b6da18cdf67b7c567897839', name: "item" }, h("span", { key: 'ea05bd99cd367f7be8aacea33286e95ebbe82cd9', id: "is-empty" }))))));
     }
     static get is() { return "wcs-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-divider/dropdown-divider.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class DropdownDivider {
     render() {
-        return (h(Host, { key: '52d90154f003445f1d62badde51df437a38d6f19', slot: "item", tabindex: "-1", "aria-hidden": "true" }));
+        return (h(Host, { key: 'f6099eab21640cea46aaeb81b78d744416550b62', slot: "item", tabindex: "-1", "aria-hidden": "true" }));
     }
     static get is() { return "wcs-dropdown-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-header/dropdown-header.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class DropdownHeader {
     render() {
-        return (h(Host, { key: 'a9f4cf33ebcc666bd3f703c3d51d17b655f28ed8', slot: "item", tabindex: "-1" }, h("slot", { key: 'ccabe9a8805d48d8b2bec9326b5aaa1b6338f06b' })));
+        return (h(Host, { key: '63465bc35721ca858aeb4465f0581151f372b532', slot: "item", tabindex: "-1" }, h("slot", { key: '7f064837e9840499d7916fde0ff67ef98ecf649a' })));
     }
     static get is() { return "wcs-dropdown-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-item/dropdown-item.js CHANGED Viewed

@@ -31,7 +31,7 @@ export class DropdownItem {
         }
     }
     render() {
-        return (h(Host, { key: '70e0767afe5fe295df4292e356db89d555fa71a3', slot: "item", role: "menuitem", tabindex: "-1" }, h("slot", { key: '11cd674f89784aec6bfa1ba4d15f0fb0f25d976e' })));
+        return (h(Host, { key: '5833a19574cfb6d128e6fb015ec2124e3d40d8ce', slot: "item", role: "menuitem", tabindex: "-1" }, h("slot", { key: 'c679dd4325533514ebff2934bd7d21ff2f0c3e9c' })));
     }
     static get is() { return "wcs-dropdown-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/editable-field/editable-field.js CHANGED Viewed

@@ -326,7 +326,7 @@ export class EditableField {
     }
     render() {
         const { formattedValue, formattedValueText, formattedCurrentValue } = this.formatValues();
-        return (h(Host, { key: 'a1b692fad52bdb6a7309b70a04edfb68cf77f6d3' }, h("div", { key: 'dfc55ad386b993f0187040fa2d3cdcdc5c67dbd8', class: "label" }, this.label), h("button", { key: 'ec38bec07dd21b44c1e699b967d0d7aee9d51a1f', type: "button", class: 'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : ''), onClick: () => this.onDisplayContainerClick(), ref: (el) => this.editModeBtn = el, "aria-label": `${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}` }, formattedValue, h("wcs-mat-icon", { key: 'cc38a3416a563d4985311f73b7774496697f6685', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), h("div", { key: '0872aecf23dab9d4fdfee58b9ee13b51e682d48e', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, h("wcs-spinner", { key: '89e19662f6c7429e18fb9e41e3c35450b0675b1d' })), h("wcs-form-field", { key: '8e90e1c7f78fc418ecb6299b19b5c93dad0d9d7a', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, h("wcs-label", { key: '5919933cb037bd7e5c5fa87af68525d47006b6e3', class: "visually-hidden" }, this.label), h("slot", { key: '971ecbfe68bcd475d87fe3bcbf570b81a7be039e' }), this.isError && this.errorMsg
+        return (h(Host, { key: '3980dc18ccf2a4ea568569dd6f072ea19d2e2ce3' }, h("div", { key: '6d853b2bfdee062fd8e8a3e0aa9f19e17def5206', class: "label" }, this.label), h("button", { key: '9e8211967d9e48ea201ee25cbd6d5df17f77a9bb', type: "button", class: 'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : ''), onClick: () => this.onDisplayContainerClick(), ref: (el) => this.editModeBtn = el, "aria-label": `${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}` }, formattedValue, h("wcs-mat-icon", { key: '774fd99f237ad6c63fc8895f3d6cdfb99314adec', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), h("div", { key: 'ab98ad8b0909933b680353b46c1407b0f82af28a', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, h("wcs-spinner", { key: '2ae47012c5d251b7a756a1fb13c30ad5f36ee103' })), h("wcs-form-field", { key: '0858fc4d06e5c0f1c6dfb23d904fb36ea348d9b8', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, h("wcs-label", { key: '5f901a2af267d42b20aa67b80245f63c0124fdd2', class: "visually-hidden" }, this.label), h("slot", { key: 'd7948c3e0187f6d92727167eb1737d7b6973072d' }), this.isError && this.errorMsg
             ? h("wcs-error", null, this.errorMsg)
             : null)));
     }

package/dist/collection/components/error/error.js CHANGED Viewed

@@ -15,7 +15,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Label {
     render() {
-        return (h(Host, { key: '7dffcb3487f7210c5c9a45af709fc942a1410679', role: "alert", slot: "error" }, h("slot", { key: '251fbdc26fe58be4296328c4ebaed77329c6c507' })));
+        return (h(Host, { key: '89cbcbdb9057296fb11e99bd6f92b7b92bdad988', role: "alert", slot: "error" }, h("slot", { key: '81f37240e47e345a01901772bd095ee19d793963' })));
     }
     static get is() { return "wcs-error"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field/field.js CHANGED Viewed

@@ -21,7 +21,7 @@ import { h, Host, } from "@stencil/core";
  */
 export class Field {
     render() {
-        return (h(Host, { key: 'ae0a6c7224dc199cd6cd342d77878bfff17aa49b' }, h("slot", { key: '408c146f3e6bfa1868964a29934494215627fb59', name: "label" }), h("slot", { key: '9c2151491f6acc4a5a6da36676e21e8dee6f156a', name: "content" })));
+        return (h(Host, { key: '2f1a99e80af297bdad4ffc522c124ef998433036' }, h("slot", { key: '02ed1e93a6fa2394bb76699ebae4b85d1f693941', name: "label" }), h("slot", { key: 'de5f51186a195b070839751260a2b15aee14d75c', name: "content" })));
     }
     static get is() { return "wcs-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-content/field-content.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { h, Host } from "@stencil/core";
  */
 export class FieldContent {
     render() {
-        return (h(Host, { key: '251b9ccc1b13766b287f356dfc51d6a953ad0a5e', slot: "content" }, h("slot", { key: 'ee7d55bf47c0f468829e99a26a0fe340fbafcc9f' })));
+        return (h(Host, { key: 'd9e607042807d1eac96334e573b689fd556efb57', slot: "content" }, h("slot", { key: 'bfc5e88fcdaa0a74a530310c916e8e9d0686ade3' })));
     }
     static get is() { return "wcs-field-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-label/field-label.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { h, Host, } from "@stencil/core";
  */
 export class FieldLabel {
     render() {
-        return (h(Host, { key: 'a051b09993d67bf56b087d86ba433caf1bdbb7a6', slot: "label" }, h("slot", { key: '6044b728151fd48878f555d3db3e0754f31b7e51' })));
+        return (h(Host, { key: '8ec997eb8d3c959d536e915e41b6feee0abae9b5', slot: "label" }, h("slot", { key: '6388cadd5e9f3b793accd62806897550d38e2473' })));
     }
     static get is() { return "wcs-field-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer.js CHANGED Viewed

@@ -20,7 +20,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Footer {
     render() {
-        return (h(Host, { key: '6fe975235d6de2793e55e8d10860649b5684c093' }, h("footer", { key: '80b0ff721eedab3e4cc00fd2484a638718fc8b13', role: "contentinfo" }, h("div", { key: 'f7d676d79f4d8780736e3a28e3e4b2aa1f0786e1', class: "container" }, h("div", { key: 'e1f9ea823133d972d3eb2bc8e7eaa18558448a73' }, h("slot", { key: 'd7177b9e98ac24ad39008669de01899e71c27079' })), h("div", { key: '849ceafdd459f24b672e1f68edf86ffd4fcce733', class: "end" }, h("div", { key: '7077861e872bbb50e7e5de0c968fe2222e9bf7d7', class: "end-left" }, h("slot", { key: 'dded653e62bf683e0514c51b06e55ccb44f70c54', name: "end-left" })), h("div", { key: 'ec25d2a5f84cb477eaa6a63de4df6ce6e9db07c5', class: "end-right" }, h("slot", { key: '4201096294b44a29f74112c2acaa2163f9ecfcb9', name: "end-right" })))))));
+        return (h(Host, { key: '1982e1bb2f8f8fab2b32039b98327b82d0f7fe5b' }, h("footer", { key: '5df2e947ab692961ff3bab26c029d1cd6b60b525', role: "contentinfo" }, h("div", { key: '1aa5188a4679ca7c8d898747fae709648bf4efd4', class: "container" }, h("div", { key: '4e0720a198a72fd4d215afa9a9b82c9a01f935c7' }, h("slot", { key: 'b982e050f713d0684eb0202a33a72394a062383b' })), h("div", { key: '2d2969a699b1b56ebc712fecbb99ccde8dc28c28', class: "end" }, h("div", { key: 'a0e18ea874704d4fd8aac0204122b9a18209ca37', class: "end-left" }, h("slot", { key: 'c70c138311778a58748dcfcdd03f8f61895bc6ec', name: "end-left" })), h("div", { key: '3339a070ca8068d7441643825fdb30e684d9aff7', class: "end-right" }, h("slot", { key: 'f576479754f88144e8ded04c90d1696882e6155e', name: "end-right" })))))));
     }
     static get is() { return "wcs-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/form-field/form-field.js CHANGED Viewed

@@ -188,7 +188,7 @@ export class FormField {
         if (this.hasPrefix) {
             classes += ' has-prefix';
         }
-        return (h(Host, { key: 'd8a5d2023add393b0a31173351a3d16d9fa0b1a6', class: classes }, h("slot", { key: '3f347f4dce239c0106fbbe52bdc217fa37c05d01', name: "label" }), h("div", { key: 'd6cb92104d72530059ecb9a383ff832afb0c2141', class: "input-container" }, h("slot", { key: '8be28f721ff351d41dced80c97c0e34337703d0e', name: "prefix" }), h("slot", { key: 'cc58d463877a1e8513736a987286e965870e096d', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: '898709cfcf0ae1cd43dabd55547d62199d6230c9', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: 'aaf2d35dfbdfda47b440f96d7f9aa22cb09f6a06', name: "messages" })));
+        return (h(Host, { key: '9cfd2ef4834a62bfe77366b99ec637b71008178e', class: classes }, h("slot", { key: '26a0f59515e28ec045e8ccee2e74e143466ca183', name: "label" }), h("div", { key: '338b49d772bc0b9ec2621a783a051e4bdc8096bc', class: "input-container" }, h("slot", { key: 'f51bf6dc00f529f70a8ccf37ff54c29093fb1e20', name: "prefix" }), h("slot", { key: 'ccab32ee521ec419c89e561d4ac099a0953b6188', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: 'b54d01ac5b4f7f6761923b94c436b2728ff036e5', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: '40665251b2e5acc2fb8e31a4e8b46d34959b74e1', name: "messages" })));
     }
     onFormInputSlotChange() {
         this.initSpiedElement();

package/dist/collection/components/galactic/galactic.js CHANGED Viewed

@@ -21,7 +21,7 @@ export class Galactic {
         this.show = false;
     }
     render() {
-        return (h(Host, { key: 'bcede9aa03d2014887eeaa4d5728d57c32a69de2' }, h("div", { key: '2d031655b20b592b77e2227a195f15535071c069', class: "container" }, h("div", { key: '1d3a345c56925946f5b39ad9edaad7ee927343cc', class: "logo-container" }, h("img", { key: '3f7e9a0a7df3a954d21e328da562189771baf8a8', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: '68c00801e7f2564930d6a5f77fc6f45511a321cf' }, this.text)), h("div", { key: '3724b08dca457a9be21ecb84925ed3fea4e49f95', class: "actions-container" }, h("slot", { key: '572f4ca9036c737a579f2c58ec113cada4dd421c' })))));
+        return (h(Host, { key: '232bedfce53c034b8cb1d65386d883bd7e3bf98d' }, h("div", { key: '0c3540994bd2b846a4668cb20f7e12207b764041', class: "container" }, h("div", { key: '5e3d1e7c948420b75383a52eb39c22acfa443e1f', class: "logo-container" }, h("img", { key: 'd3d28eab6584e0b670cd7624147033c134f0bfbe', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: '46de64ef60c5b5180397dbcee9d18ddd33f42025' }, this.text)), h("div", { key: '2de7221e95f3628a2c05a9b1006b75b25f6cb25e', class: "actions-container" }, h("slot", { key: 'd91d6a26c3d9c79610e8b35c79bb7e3e42541751' })))));
     }
     static get is() { return "wcs-galactic"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/galactic-menu/galactic-menu.js CHANGED Viewed

@@ -71,9 +71,9 @@ export class Galactic {
         }
     }
     render() {
-        return (h(Host, { key: 'bc460c17b222723b8cc037042cc758f8ca0e50ec' }, h("span", { key: 'd324ff624a9e5c9f6984134d4091986cac11f18b' }, this.text), h("button", Object.assign({ key: '7b0160174a249b30e082b9b2a77aca334ee6256a', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
+        return (h(Host, { key: '8119cc6893e6dc5eda0b2f88a2d3935f9c1a6ac4' }, h("span", { key: 'c6ca18f7cb948c09d7d5fdd6bc9aacbad2e397fe' }, this.text), h("button", Object.assign({ key: 'a04475052533f24675ef125ba52117bc15279fba', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
                 this.menuButton = el;
-            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: '96b20053845f5490791ea278c2444392ba630600', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: '6f959f220edbf293fe6922f7aaeaab0f213bf736', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: '6a05e468d65252ecbb57b421a53be0a0a1974f98', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c9398cbb856d836820ac1cddf3113710eeaff5fb' }))));
+            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: '7a394bfe5e1cee3d49dba4672c6569a0f94a02ae', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: '290449dc75b2d5ba33acb49865b1736cf12cb13c', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: 'd5224168e7f11b935453c7e883791842ffbc0c61', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'eaaffe928ece2da680be02522e16655d961261ad' }))));
     }
     static get is() { return "wcs-galactic-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/grid.e2e.playwright.js CHANGED Viewed

@@ -204,5 +204,80 @@ test.describe('Grid component', () => {
             expect(scrollY).toBe(0);
         });
     });
+    test.describe('Pagination', () => {
+        test('should display 0/0 when no data is bound to the grid', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-grid id="grid">
+                    <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    <wcs-grid-pagination id="pagination" available-page-sizes="2"></wcs-grid-pagination>
+                </wcs-grid>
+            `);
+            // When - no data is set at all
+            await page.waitForChanges();
+            // Then
+            const pagination = page.locator('#pagination');
+            const { currentPage, pageCount } = await pagination.evaluate((el) => ({
+                currentPage: el.currentPage,
+                pageCount: el.pageCount
+            }));
+            expect(currentPage).toBe(-1);
+            expect(pageCount).toBe(0);
+            // The displayed counter should show "0 / 0"
+            const counter = pagination.locator('.pagination-counter span');
+            await expect(counter).toHaveText('0 / 0');
+        });
+        test('should display 0/0 when data is set to an empty array', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-grid id="grid">
+                    <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    <wcs-grid-pagination id="pagination" available-page-sizes="2"></wcs-grid-pagination>
+                </wcs-grid>
+            `);
+            const grid = page.locator('#grid');
+            // When
+            await grid.evaluate((el) => el.data = []);
+            await page.waitForChanges();
+            // Then
+            const pagination = page.locator('#pagination');
+            const { currentPage, pageCount } = await pagination.evaluate((el) => ({
+                currentPage: el.currentPage,
+                pageCount: el.pageCount
+            }));
+            expect(currentPage).toBe(-1);
+            expect(pageCount).toBe(0);
+            const counter = pagination.locator('.pagination-counter span');
+            await expect(counter).toHaveText('0 / 0');
+        });
+        test('should reset to 0/0 when data is cleared after being populated', async ({ page }) => {
+            // Given
+            const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }];
+            await setWcsContent(page, `
+                <wcs-grid id="grid">
+                    <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    <wcs-grid-pagination id="pagination" available-page-sizes="2"></wcs-grid-pagination>
+                </wcs-grid>
+            `);
+            const grid = page.locator('#grid');
+            await grid.evaluate((el, d) => el.data = d, data);
+            await page.waitForChanges();
+            // Sanity check: pagination should show data
+            const pagination = page.locator('#pagination');
+            const counterAfterData = pagination.locator('.pagination-counter span');
+            await expect(counterAfterData).toHaveText('1 / 1');
+            // When
+            await grid.evaluate((el) => el.data = []);
+            await page.waitForChanges();
+            // Then
+            const { currentPage, pageCount } = await pagination.evaluate((el) => ({
+                currentPage: el.currentPage,
+                pageCount: el.pageCount
+            }));
+            expect(currentPage).toBe(-1);
+            expect(pageCount).toBe(0);
+            await expect(counterAfterData).toHaveText('0 / 0');
+        });
+    });
 });
 //# sourceMappingURL=grid.e2e.playwright.js.map