wcs-core 7.3.0 → 7.4.1

package/dist/collection/components/editable-field/editable-field.e2e.playwright.js

@@ -0,0 +1,156 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('wcs-editable-field', () => {
+    test('renders with input element and default props', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test Input" value="Initial value" type="input" id="test">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await expect(displayContainer).toContainText('Initial value');
+        const label = page.locator('wcs-editable-field .label');
+        await expect(label).toHaveText('Test Input');
+    });
+    test('transitions from DISPLAY to EDIT state when clicked', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test Input" value="Initial value" type="input" id="test">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await displayContainer.click();
+        const editContainer = page.locator('wcs-editable-field .edit-container:not(.display-none)');
+        await expect(editContainer).toBeVisible();
+    });
+    test('properly handles validation', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field id="validate-test" label="Test Validation" value="Valid" error-msg="Value is invalid" type="input">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        // Set up validation function
+        await page.evaluate(() => {
+            const el = document.querySelector('wcs-editable-field');
+            el.validateFn = (val) => val === 'Valid';
+        });
+        // Go to edit mode
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await displayContainer.click();
+        // Input invalid value
+        const wcsInput = page.locator('wcs-input');
+        const nativeInput = page.locator('wcs-input input');
+        await nativeInput.fill('Invalid');
+        // Trigger validation (simulate Enter key)
+        await wcsInput.press('Enter');
+        await page.waitForChanges();
+        // Check error message is displayed
+        const errorElement = page.locator('wcs-editable-field wcs-error');
+        await expect(errorElement).toBeVisible();
+        await expect(errorElement).toHaveText('Value is invalid');
+    });
+    test('emits wcsChange event with correct data', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test Events" value="Old value" type="input" id="event-test">
+                <wcs-input id="test-input"></wcs-input>
+            </wcs-editable-field>
+        `);
+        const changeSpy = await page.spyOnEvent('wcsChange');
+        // Go to edit mode
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await displayContainer.click();
+        await page.waitForChanges();
+        const input = page.locator('wcs-input');
+        await input.press('Backspace'); // Clear value (backspace is easier than selecting all)
+        await input.pressSequentially('New value'); // send input event
+        await page.waitForChanges();
+        // Submit the form by pressing Enter
+        await input.press('Enter');
+        await page.waitForChanges();
+        // Note: Functions defined in the event's detail object (successHandler and errorHandler)
+        // are not cloned by the DOM's structured clone algorithm.
+        // This means that when the event is emitted, these functions will not be present in the
+        // event.detail object when accessed in E2E tests, even though they exist in the browser.
+        expect(changeSpy).toHaveNthReceivedEventDetail(0, {
+            newValue: 'New value',
+            successHandler: undefined,
+            errorHandler: undefined
+        });
+    });
+    test('respects readonly property', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Read Only Field" value="Readonly value" readonly="true" type="input" id="test">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        // Check readonly icon is displayed
+        const readonlyIcon = page.locator('wcs-editable-field .readonly-icon');
+        await expect(readonlyIcon).toBeVisible();
+        // Try clicking
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await displayContainer.click();
+        // Should still be in display mode
+        const editContainer = page.locator('wcs-editable-field .edit-container:not(.display-none)');
+        await expect(editContainer).toHaveCount(0);
+    });
+    test('works correctly with textarea', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Textarea Test" type="textarea" value="Multiline\nText" id="test">
+                <wcs-textarea></wcs-textarea>
+            </wcs-editable-field>
+        `);
+        // Check it renders correctly
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await expect(displayContainer).toContainText('Multiline\nText');
+        // Go to edit mode
+        await displayContainer.click();
+        // Should need Ctrl+Enter to submit with textarea
+        const textarea = page.locator('wcs-textarea');
+        await textarea.press('Enter'); // This should NOT submit
+        // Should still be in edit mode
+        const editContainerVisible = page.locator('wcs-editable-field .edit-container:not(.display-none)');
+        await expect(editContainerVisible).toBeVisible();
+    });
+    test('works correctly with select', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Select Test" type="select" value="option1" id="test">
+                <wcs-select>
+                    <wcs-select-option value="option1">Option 1</wcs-select-option>
+                    <wcs-select-option value="option2">Option 2</wcs-select-option>
+                </wcs-select>
+            </wcs-editable-field>
+        `);
+        // Go to edit mode
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await displayContainer.click();
+        // We get the select element
+        const select = page.locator('wcs-select');
+        await select.focus();
+        await select.press('ArrowDown');
+        // press CTRL + ENTER (combined) to validate
+        await page.keyboard.down('Control');
+        await page.keyboard.press('Enter');
+        await page.keyboard.up('Control');
+        await page.waitForChanges();
+        // Should be in load state after change
+        const loadContainer = page.locator('wcs-editable-field .load-container:not(.display-none)');
+        await expect(loadContainer).toBeVisible();
+    });
+    test('properly handles custom formatting function', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field id="format-test" label="Formatting Test" value="test value" type="input">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        // Set custom formatter
+        await page.evaluate(() => {
+            const el = document.querySelector('wcs-editable-field');
+            el.formatFn = (val) => val ? val.toUpperCase() : '';
+        });
+        // Check formatted output
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await expect(displayContainer).toContainText('TEST VALUE');
+    });
+});
+//# sourceMappingURL=editable-field.e2e.playwright.js.map

package/dist/collection/components/editable-field/editable-field.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-field.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/editable-field/editable-field.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,8CAA8C,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACvF,MAAM,aAAa,CAAC,IAAI,EAAE;;;;SAIzB,CAAC,CAAC;QAEH,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC;QAC/E,MAAM,MAAM,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE9D,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;QACxD,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qDAAqD,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QAC9F,MAAM,aAAa,CAAC,IAAI,EAAE;;;;SAIzB,CAAC,CAAC;QAEH,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC;QAC/E,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAE/B,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,uDAAuD,CAAC,CAAC;QAC5F,MAAM,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6BAA6B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACtE,MAAM,aAAa,CAAC,IAAI,EAAE;;;;SAIzB,CAAC,CAAC;QAEH,6BAA6B;QAC7B,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YACrB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAQ,CAAC;YAC/D,EAAE,CAAC,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,KAAK,OAAO,CAAC;QACrD,CAAC,CAAC,CAAC;QAEH,kBAAkB;QAClB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC;QAC/E,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAE/B,sBAAsB;QACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACpD,MAAM,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAElC,0CAA0C;QAC1C,MAAM,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC9B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,mCAAmC;QACnC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAAC;QAClE,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,EAAE,CAAC;QACzC,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,yCAAyC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QAClF,MAAM,aAAa,CAAC,IAAI,EAAE;;;;SAIzB,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAErD,kBAAkB;QAClB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC;QAC/E,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACxC,MAAM,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,uDAAuD;QACvF,MAAM,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,mBAAmB;QAC/D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,oCAAoC;QACpC,MAAM,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC3B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,yFAAyF;QACzF,0DAA0D;QAC1D,wFAAwF;QACxF,yFAAyF;QAEzF,MAAM,CAAC,SAAS,CAAC,CAAC,4BAA4B,CAAC,CAAC,EAAE;YAC9C,QAAQ,EAAE,WAAW;YACrB,cAAc,EAAE,SAAS;YACzB,YAAY,EAAE,SAAS;SAC1B,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACrE,MAAM,aAAa,CAAC,IAAI,EAAE;;;;SAIzB,CAAC,CAAC;QAEH,mCAAmC;QACnC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,mCAAmC,CAAC,CAAC;QACvE,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,EAAE,CAAC;QAEzC,eAAe;QACf,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC;QAC/E,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAE/B,kCAAkC;QAClC,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,uDAAuD,CAAC,CAAC;QAC5F,MAAM,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,+BAA+B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACxE,MAAM,aAAa,CAAC,IAAI,EAAE;;;;SAIzB,CAAC,CAAC;QAEH,6BAA6B;QAC7B,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC;QAC/E,MAAM,MAAM,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAEhE,kBAAkB;QAClB,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAE/B,iDAAiD;QACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAC9C,MAAM,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,yBAAyB;QAExD,+BAA+B;QAC/B,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,uDAAuD,CAAC,CAAC;QACnG,MAAM,MAAM,CAAC,oBAAoB,CAAC,CAAC,WAAW,EAAE,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6BAA6B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACtE,MAAM,aAAa,CAAC,IAAI,EAAE;;;;;;;SAOzB,CAAC,CAAC;QAEH,kBAAkB;QAClB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC;QAC/E,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAE/B,4BAA4B;QAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC1C,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;QACrB,MAAM,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAEhC,4CAA4C;QAC5C,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACpC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACnC,MAAM,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;QAClC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,uCAAuC;QACvC,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,uDAAuD,CAAC,CAAC;QAC5F,MAAM,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACtF,MAAM,aAAa,CAAC,IAAI,EAAE;;;;SAIzB,CAAC,CAAC;QAEH,uBAAuB;QACvB,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YACrB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAQ,CAAC;YAC/D,EAAE,CAAC,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,CAAC,CAAC,CAAC;QAEH,yBAAyB;QACzB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC;QAC/E,MAAM,MAAM,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC/D,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('wcs-editable-field', () => {\n    test('renders with input element and default props', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test Input\" value=\"Initial value\" type=\"input\" id=\"test\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await expect(displayContainer).toContainText('Initial value');\n\n        const label = page.locator('wcs-editable-field .label');\n        await expect(label).toHaveText('Test Input');\n    });\n\n    test('transitions from DISPLAY to EDIT state when clicked', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test Input\" value=\"Initial value\" type=\"input\" id=\"test\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await displayContainer.click();\n\n        const editContainer = page.locator('wcs-editable-field .edit-container:not(.display-none)');\n        await expect(editContainer).toBeVisible();\n    });\n\n    test('properly handles validation', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field id=\"validate-test\" label=\"Test Validation\" value=\"Valid\" error-msg=\"Value is invalid\" type=\"input\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        // Set up validation function\n        await page.evaluate(() => {\n            const el = document.querySelector('wcs-editable-field') as any;\n            el.validateFn = (val: string) => val === 'Valid';\n        });\n\n        // Go to edit mode\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await displayContainer.click();\n\n        // Input invalid value\n        const wcsInput = page.locator('wcs-input');\n        const nativeInput = page.locator('wcs-input input');\n        await nativeInput.fill('Invalid');\n\n        // Trigger validation (simulate Enter key)\n        await wcsInput.press('Enter');\n        await page.waitForChanges();\n\n        // Check error message is displayed\n        const errorElement = page.locator('wcs-editable-field wcs-error');\n        await expect(errorElement).toBeVisible();\n        await expect(errorElement).toHaveText('Value is invalid');\n    });\n\n    test('emits wcsChange event with correct data', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test Events\" value=\"Old value\" type=\"input\" id=\"event-test\">\n                <wcs-input id=\"test-input\"></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        const changeSpy = await page.spyOnEvent('wcsChange');\n\n        // Go to edit mode\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await displayContainer.click();\n        await page.waitForChanges();\n\n        const input = page.locator('wcs-input');\n        await input.press('Backspace'); // Clear value (backspace is easier than selecting all)\n        await input.pressSequentially('New value'); // send input event\n        await page.waitForChanges();\n\n        // Submit the form by pressing Enter\n        await input.press('Enter');\n        await page.waitForChanges();\n\n        // Note: Functions defined in the event's detail object (successHandler and errorHandler)\n        // are not cloned by the DOM's structured clone algorithm.\n        // This means that when the event is emitted, these functions will not be present in the\n        // event.detail object when accessed in E2E tests, even though they exist in the browser.\n\n        expect(changeSpy).toHaveNthReceivedEventDetail(0, {\n            newValue: 'New value',\n            successHandler: undefined,\n            errorHandler: undefined\n        });\n    });\n\n    test('respects readonly property', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Read Only Field\" value=\"Readonly value\" readonly=\"true\" type=\"input\" id=\"test\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        // Check readonly icon is displayed\n        const readonlyIcon = page.locator('wcs-editable-field .readonly-icon');\n        await expect(readonlyIcon).toBeVisible();\n\n        // Try clicking\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await displayContainer.click();\n\n        // Should still be in display mode\n        const editContainer = page.locator('wcs-editable-field .edit-container:not(.display-none)');\n        await expect(editContainer).toHaveCount(0);\n    });\n\n    test('works correctly with textarea', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Textarea Test\" type=\"textarea\" value=\"Multiline\\nText\" id=\"test\">\n                <wcs-textarea></wcs-textarea>\n            </wcs-editable-field>\n        `);\n\n        // Check it renders correctly\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await expect(displayContainer).toContainText('Multiline\\nText');\n\n        // Go to edit mode\n        await displayContainer.click();\n\n        // Should need Ctrl+Enter to submit with textarea\n        const textarea = page.locator('wcs-textarea');\n        await textarea.press('Enter'); // This should NOT submit\n\n        // Should still be in edit mode\n        const editContainerVisible = page.locator('wcs-editable-field .edit-container:not(.display-none)');\n        await expect(editContainerVisible).toBeVisible();\n    });\n\n    test('works correctly with select', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Select Test\" type=\"select\" value=\"option1\" id=\"test\">\n                <wcs-select>\n                    <wcs-select-option value=\"option1\">Option 1</wcs-select-option>\n                    <wcs-select-option value=\"option2\">Option 2</wcs-select-option>\n                </wcs-select>\n            </wcs-editable-field>\n        `);\n\n        // Go to edit mode\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await displayContainer.click();\n\n        // We get the select element\n        const select = page.locator('wcs-select');\n        await select.focus();\n        await select.press('ArrowDown');\n\n        // press CTRL + ENTER (combined) to validate\n        await page.keyboard.down('Control');\n        await page.keyboard.press('Enter');\n        await page.keyboard.up('Control');\n        await page.waitForChanges();\n\n        // Should be in load state after change\n        const loadContainer = page.locator('wcs-editable-field .load-container:not(.display-none)');\n        await expect(loadContainer).toBeVisible();\n    });\n\n    test('properly handles custom formatting function', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field id=\"format-test\" label=\"Formatting Test\" value=\"test value\" type=\"input\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        // Set custom formatter\n        await page.evaluate(() => {\n            const el = document.querySelector('wcs-editable-field') as any;\n            el.formatFn = (val: string) => val ? val.toUpperCase() : '';\n        });\n\n        // Check formatted output\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await expect(displayContainer).toContainText('TEST VALUE');\n    });\n});\n"]}

package/dist/collection/components/form-field/form-field.e2e.playwright.js

@@ -0,0 +1,104 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Form field component', () => {
+    test.describe('Global', () => {
+        test.describe('Accessibility', () => {
+            test('Should put form-field label to aria-label of the spied element when non empty', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-input/>
+                    </wcs-form-field>
+                `);
+                // When
+                const input = page.locator('wcs-input').locator('input');
+                // Then
+                await expect(input).toHaveAttribute('aria-label', 'Label form field');
+            });
+            test('Should not put form-field label to aria-label of the spied element when empty', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label></wcs-label>
+                        <wcs-input/>
+                    </wcs-form-field>
+                `);
+                // When
+                const input = page.locator('wcs-input').locator('input');
+                // Then
+                await expect(input).not.toHaveAttribute('aria-label');
+            });
+            test('Should not concatenate form-field label with form control (switch, checkbox label when form-field label is empty', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label></wcs-label>
+                        <wcs-switch>Label switch</wcs-switch>
+                    </wcs-form-field>
+                `);
+                // When
+                const switchInput = page.locator('wcs-switch').locator('input');
+                // Then
+                await expect(switchInput).toHaveAttribute('aria-label', 'Label switch');
+            });
+        });
+    });
+    test.describe('With switch', () => {
+        test.describe('Accessibility', () => {
+            test('Should concatenate form-field label with switch label', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-switch>Label switch</wcs-switch>
+                    </wcs-form-field>
+                `);
+                // When
+                const switchInput = page.locator('wcs-switch').locator('input');
+                // Then
+                await expect(switchInput).toHaveAttribute('aria-label', 'Label form field Label switch');
+            });
+        });
+    });
+    test.describe('With checkbox', () => {
+        test.describe('Accessibility', () => {
+            test('Should concatenate form-field label with checkbox label', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-checkbox>Label checkbox</wcs-checkbox>
+                    </wcs-form-field>
+                `);
+                // When
+                const checkboxInput = page.locator('wcs-checkbox').locator('input');
+                // Then
+                await expect(checkboxInput).toHaveAttribute('aria-label', 'Label form field Label checkbox');
+            });
+        });
+    });
+    test.describe('With radio-group', () => {
+        test.describe('Accessibility', () => {
+            test('Should set aria-label on radio-group element', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-radio-group>
+                            <wcs-radio name="SA" label="SNCF" value="1"></wcs-radio>
+                            <wcs-radio name="SA" label="SNCF Réseau" value="2"></wcs-radio>
+                            <wcs-radio name="SA" label="SNCF Voyageurs" value="3"></wcs-radio>
+                        </wcs-radio-group>
+                    </wcs-form-field>
+                `);
+                // When
+                const radioGroup = page.locator('wcs-radio-group');
+                // Then
+                await expect(radioGroup).toHaveAttribute('aria-label', 'Label form field');
+            });
+        });
+    });
+});
+//# sourceMappingURL=form-field.e2e.playwright.js.map

package/dist/collection/components/form-field/form-field.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.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('Form field component', () => {\n    test.describe('Global', () => {\n        test.describe('Accessibility', () => {\n            test('Should put form-field label to aria-label of the spied element when non empty', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-input/>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const input = page.locator('wcs-input').locator('input');\n\n                // Then\n                await expect(input).toHaveAttribute('aria-label', 'Label form field');\n            });\n\n            test('Should not put form-field label to aria-label of the spied element when empty', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label></wcs-label>\n                        <wcs-input/>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const input = page.locator('wcs-input').locator('input');\n\n                // Then\n                await expect(input).not.toHaveAttribute('aria-label');\n            });\n\n            test('Should not concatenate form-field label with form control (switch, checkbox label when form-field label is empty', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label></wcs-label>\n                        <wcs-switch>Label switch</wcs-switch>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const switchInput = page.locator('wcs-switch').locator('input');\n\n                // Then\n                await expect(switchInput).toHaveAttribute('aria-label', 'Label switch');\n            });\n        });\n    });\n\n    test.describe('With switch', () => {\n        test.describe('Accessibility', () => {\n            test('Should concatenate form-field label with switch label', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-switch>Label switch</wcs-switch>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const switchInput = page.locator('wcs-switch').locator('input');\n\n                // Then\n                await expect(switchInput).toHaveAttribute('aria-label', 'Label form field Label switch');\n            });\n        });\n    });\n\n    test.describe('With checkbox', () => {\n        test.describe('Accessibility', () => {\n            test('Should concatenate form-field label with checkbox label', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-checkbox>Label checkbox</wcs-checkbox>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const checkboxInput = page.locator('wcs-checkbox').locator('input');\n\n                // Then\n                await expect(checkboxInput).toHaveAttribute('aria-label', 'Label form field Label checkbox');\n            });\n        });\n    });\n\n    test.describe('With radio-group', () => {\n        test.describe('Accessibility', () => {\n            test('Should set aria-label on radio-group element', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-radio-group>\n                            <wcs-radio name=\"SA\" label=\"SNCF\" value=\"1\"></wcs-radio>\n                            <wcs-radio name=\"SA\" label=\"SNCF Réseau\" value=\"2\"></wcs-radio>\n                            <wcs-radio name=\"SA\" label=\"SNCF Voyageurs\" value=\"3\"></wcs-radio>\n                        </wcs-radio-group>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const radioGroup = page.locator('wcs-radio-group');\n\n                // Then\n                await expect(radioGroup).toHaveAttribute('aria-label', 'Label form field');\n            });\n        });\n    });\n});\n"]}

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

@@ -120,7 +120,7 @@ export class Galactic {
                     "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/grid/grid.e2e.playwright.js

@@ -0,0 +1,153 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Grid component', () => {
+    test.describe('Events', () => {
+        test.describe('simple', () => {
+            test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }) => {
+                // Given
+                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];
+                await setWcsContent(page, `
+                    <wcs-grid id="simpleGrid" selection-config="single" sort="">
+                        <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    </wcs-grid>
+                `);
+                const simpleGrid = page.locator('#simpleGrid');
+                await simpleGrid.evaluate((el, d) => el.data = d, data);
+                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');
+                // When
+                const gridRadioFirstRow = simpleGrid.locator('table tbody tr:first-child td .grid-radio');
+                await gridRadioFirstRow.click();
+                await page.waitForChanges();
+                // Then
+                expect(selectionSpy).toHaveReceivedEventTimes(1);
+                const detail = selectionSpy.events[0].detail;
+                expect(detail.selectedRows[0].data).toEqual(data[0]);
+                expect(detail.selectedRows[0].selected).toBe(true);
+                expect(detail.changedRow.selected).toBe(true);
+                expect(detail.changedRow.data).toEqual(data[0]);
+            });
+        });
+        test.describe('multiple', () => {
+            test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }) => {
+                // Given
+                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];
+                await setWcsContent(page, `
+                    <wcs-grid id="simpleGrid" selection-config="multiple" sort="">
+                        <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    </wcs-grid>
+                `);
+                const simpleGrid = page.locator('#simpleGrid');
+                await simpleGrid.evaluate((el, d) => el.data = d, data);
+                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');
+                // When
+                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');
+                await wcsCheckboxFirstRow.click();
+                await page.waitForChanges();
+                // Then
+                expect(selectionSpy).toHaveReceivedEventTimes(1);
+                const detail = selectionSpy.events[0].detail;
+                expect(detail.selectedRows[0].data).toEqual(data[0]);
+                expect(detail.selectedRows[0].selected).toBe(true);
+                expect(detail.changedRow.selected).toBe(true);
+                expect(detail.changedRow.data).toEqual(data[0]);
+            });
+            test('should emit a wcsGridSelectionChange event when a row is unselected', async ({ page }) => {
+                // Given
+                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];
+                await setWcsContent(page, `
+                    <wcs-grid id="simpleGrid" selection-config="multiple" sort="">
+                        <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    </wcs-grid>
+                `);
+                const simpleGrid = page.locator('#simpleGrid');
+                await simpleGrid.evaluate((el, d) => el.data = d, data);
+                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');
+                await wcsCheckboxFirstRow.click(); // Row is selected
+                await page.waitForChanges();
+                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');
+                // When
+                await wcsCheckboxFirstRow.click(); // Row is unselected
+                await page.waitForChanges();
+                // Then
+                expect(selectionSpy).toHaveReceivedEventTimes(1);
+                const detail = selectionSpy.events[0].detail;
+                expect(detail.selectedRows).toEqual([]);
+                expect(detail.changedRow.selected).toBe(false);
+                expect(detail.changedRow.data).toEqual(data[0]);
+            });
+            test('should emit a wcsGridSelectionChange event when a new row is selected while another are already selected', async ({ page }) => {
+                // Given
+                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];
+                await setWcsContent(page, `
+                    <wcs-grid id="simpleGrid" selection-config="multiple" sort="">
+                        <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    </wcs-grid>
+                `);
+                const simpleGrid = page.locator('#simpleGrid');
+                await simpleGrid.evaluate((el, d) => el.data = d, data);
+                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');
+                await wcsCheckboxFirstRow.click();
+                await page.waitForChanges();
+                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');
+                // When
+                const wcsCheckboxLastChild = simpleGrid.locator('table tbody tr:last-child td wcs-checkbox');
+                await wcsCheckboxLastChild.click();
+                await page.waitForChanges();
+                // Then
+                expect(selectionSpy).toHaveReceivedEventTimes(1);
+                const detail = selectionSpy.events[0].detail;
+                expect(detail.selectedRows.length).toBe(2);
+                expect(detail.selectedRows[0].data).toEqual(data[0]);
+                expect(detail.selectedRows[1].data).toEqual(data[data.length - 1]);
+                expect(detail.changedRow.selected).toBe(true);
+                expect(detail.changedRow.data).toEqual(data[data.length - 1]);
+            });
+            test('should emit a wcsGridSelectionChange event when all rows are selected', async ({ page }) => {
+                // Given
+                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];
+                await setWcsContent(page, `
+                    <wcs-grid id="simpleGrid" selection-config="multiple" sort="">
+                        <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    </wcs-grid>
+                `);
+                const simpleGrid = page.locator('#simpleGrid');
+                await simpleGrid.evaluate((el, d) => el.data = d, data);
+                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');
+                // When
+                const wcsCheckboxAll = simpleGrid.locator('table thead th:first-child wcs-checkbox');
+                await wcsCheckboxAll.click();
+                await page.waitForChanges();
+                // Then
+                expect(selectionSpy).toHaveReceivedEventTimes(1);
+                const detail = selectionSpy.events[0].detail;
+                expect(detail.selectedRows.length).toBe(data.length);
+                expect(detail.changedRow).toBe('allCheckbox');
+            });
+        });
+    });
+    test.describe('Sort', () => {
+        test('should well sort with pagination', async ({ page }) => {
+            const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Zoe' }];
+            await setWcsContent(page, `
+                <wcs-grid id="simpleGrid" selection-config="multiple">
+                    <wcs-grid-column path="first_name" name="First Name" sort sort-order="desc"></wcs-grid-column>
+                    <wcs-grid-pagination available-page-sizes="2"></wcs-grid-pagination>
+                </wcs-grid>
+            `);
+            const simpleGrid = page.locator('#simpleGrid');
+            await simpleGrid.evaluate((el, d) => el.data = d, data);
+            // First page should contain 2 elements (page-size = 2) sorted descending by first_name
+            // Data order before sort: John, Doe, Jane, Zoe
+            // After descending sort: Zoe, John, Jane, Doe
+            // Page 1 should show Zoe, John
+            const firstRowFirstCell = simpleGrid.locator('table tbody tr:first-child td:last-child');
+            const secondRowFirstCell = simpleGrid.locator('table tbody tr:nth-child(2) td:last-child');
+            await expect(async () => {
+                await expect(firstRowFirstCell).toHaveText('Zoe');
+                await expect(secondRowFirstCell).toHaveText('John');
+            }).toPass();
+        });
+    });
+});
+//# sourceMappingURL=grid.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/grid/grid.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('Grid component', () => {\n    test.describe('Events', () => {\n        test.describe('simple', () => {\n            test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n                await setWcsContent(page, `\n                    <wcs-grid id=\"simpleGrid\" selection-config=\"single\" sort=\"\">\n                        <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n                    </wcs-grid>\n                `);\n\n                const simpleGrid = page.locator('#simpleGrid');\n                await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n                // When\n                const gridRadioFirstRow = simpleGrid.locator('table tbody tr:first-child td .grid-radio');\n                await gridRadioFirstRow.click();\n                await page.waitForChanges();\n\n                // Then\n                expect(selectionSpy).toHaveReceivedEventTimes(1);\n                const detail = selectionSpy.events[0].detail;\n                expect(detail.selectedRows[0].data).toEqual(data[0]);\n                expect(detail.selectedRows[0].selected).toBe(true);\n                expect(detail.changedRow.selected).toBe(true);\n                expect(detail.changedRow.data).toEqual(data[0]);\n            });\n        });\n\n        test.describe('multiple', () => {\n            test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n                await setWcsContent(page, `\n                    <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n                        <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n                    </wcs-grid>\n                `);\n\n                const simpleGrid = page.locator('#simpleGrid');\n                await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n                // When\n                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n                await wcsCheckboxFirstRow.click();\n                await page.waitForChanges();\n\n                // Then\n                expect(selectionSpy).toHaveReceivedEventTimes(1);\n                const detail = selectionSpy.events[0].detail;\n                expect(detail.selectedRows[0].data).toEqual(data[0]);\n                expect(detail.selectedRows[0].selected).toBe(true);\n                expect(detail.changedRow.selected).toBe(true);\n                expect(detail.changedRow.data).toEqual(data[0]);\n            });\n\n            test('should emit a wcsGridSelectionChange event when a row is unselected', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n                await setWcsContent(page, `\n                    <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n                        <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n                    </wcs-grid>\n                `);\n\n                const simpleGrid = page.locator('#simpleGrid');\n                await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n                await wcsCheckboxFirstRow.click(); // Row is selected\n                await page.waitForChanges();\n\n                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n                // When\n                await wcsCheckboxFirstRow.click(); // Row is unselected\n                await page.waitForChanges();\n\n                // Then\n                expect(selectionSpy).toHaveReceivedEventTimes(1);\n                const detail = selectionSpy.events[0].detail;\n                expect(detail.selectedRows).toEqual([]);\n                expect(detail.changedRow.selected).toBe(false);\n                expect(detail.changedRow.data).toEqual(data[0]);\n            });\n\n            test('should emit a wcsGridSelectionChange event when a new row is selected while another are already selected', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n                await setWcsContent(page, `\n                    <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n                        <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n                    </wcs-grid>\n                `);\n\n                const simpleGrid = page.locator('#simpleGrid');\n                await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n                await wcsCheckboxFirstRow.click();\n                await page.waitForChanges();\n\n                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n                // When\n                const wcsCheckboxLastChild = simpleGrid.locator('table tbody tr:last-child td wcs-checkbox');\n                await wcsCheckboxLastChild.click();\n                await page.waitForChanges();\n\n                // Then\n                expect(selectionSpy).toHaveReceivedEventTimes(1);\n                const detail = selectionSpy.events[0].detail;\n                expect(detail.selectedRows.length).toBe(2);\n                expect(detail.selectedRows[0].data).toEqual(data[0]);\n                expect(detail.selectedRows[1].data).toEqual(data[data.length - 1]);\n                expect(detail.changedRow.selected).toBe(true);\n                expect(detail.changedRow.data).toEqual(data[data.length - 1]);\n            });\n\n            test('should emit a wcsGridSelectionChange event when all rows are selected', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n                await setWcsContent(page, `\n                    <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n                        <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n                    </wcs-grid>\n                `);\n\n                const simpleGrid = page.locator('#simpleGrid');\n                await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n                // When\n                const wcsCheckboxAll = simpleGrid.locator('table thead th:first-child wcs-checkbox');\n                await wcsCheckboxAll.click();\n                await page.waitForChanges();\n\n                // Then\n                expect(selectionSpy).toHaveReceivedEventTimes(1);\n                const detail = selectionSpy.events[0].detail;\n                expect(detail.selectedRows.length).toBe(data.length);\n                expect(detail.changedRow).toBe('allCheckbox');\n            });\n        });\n    });\n\n    test.describe('Sort', () => {\n        test('should well sort with pagination', async ({ page }: { page: E2EPage }) => {\n            const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Zoe' }];\n            await setWcsContent(page, `\n                <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\">\n                    <wcs-grid-column path=\"first_name\" name=\"First Name\" sort sort-order=\"desc\"></wcs-grid-column>\n                    <wcs-grid-pagination available-page-sizes=\"2\"></wcs-grid-pagination>\n                </wcs-grid>\n            `);\n\n            const simpleGrid = page.locator('#simpleGrid');\n            await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n            // First page should contain 2 elements (page-size = 2) sorted descending by first_name\n            // Data order before sort: John, Doe, Jane, Zoe\n            // After descending sort: Zoe, John, Jane, Doe\n            // Page 1 should show Zoe, John\n\n            const firstRowFirstCell = simpleGrid.locator('table tbody tr:first-child td:last-child');\n            const secondRowFirstCell = simpleGrid.locator('table tbody tr:nth-child(2) td:last-child');\n\n            await expect(async () => {\n                await expect(firstRowFirstCell).toHaveText('Zoe');\n                await expect(secondRowFirstCell).toHaveText('John');\n            }).toPass();\n        });\n    });\n});\n"]}

package/dist/collection/components/grid/grid.js

@@ -77,6 +77,7 @@ export class Grid {
     onDataChange(newValue) {
         this.updateGridRows(newValue);
         this.refreshSort(false);
+        this.updatePageIndex();
     }
     onSelectedItemsPropertyChange(newValue) {
         this.updateSelectionWithValues(newValue);
@@ -282,7 +283,6 @@ export class Grid {
                 rows.push(row);
             }
             this.rows = rows;
-            this.updatePageIndex();
         }
     }
     componentDidLoad() {
@@ -295,6 +295,7 @@ export class Grid {
             this.updateSelectionWithValues(this.selectedItems);
         }
         this.refreshSort(true);
+        this.updatePageIndex();
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, GRID_INHERITED_ATTRS));
@@ -505,12 +506,12 @@ export class Grid {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '98d13e7497ec9d9ecd3e149b3f6986e16bc5cc2a' }, h("table", Object.assign({ key: 'a44825cf71ff284a5204e9d922c0eba2c2ca23f4', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '336578d350ae8082a19fa6798af35f2fdd015ff9' }, h("tr", { key: 'fdb38402ea5c58dd77dad7df2ef97d54c521123c', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
+        return (h(Host, { key: '1e9b1d5dc405c67428750276de3e38e8e163d20e' }, h("table", Object.assign({ key: '42e610c403c108f36c2f5e4eb276b9e1c6349b8c', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '365bf4de9329c94c5c891040b14ca844c6e8fd99' }, h("tr", { key: '9d1e4c4cf0418f585679a055edbb88ca08493d3d', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
             : h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
                 h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
-                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '2d68b72fac0251dab9f519cf84c25c96262c193b', name: "grid-column" }))), h("tbody", { key: '4156e796ac5a81170b5dba011159f8e6bb7a7e60' }, this.loading
+                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '4c1ed31eeaf61d0f94a156cc97b393abafdfb6e3', name: "grid-column" }))), h("tbody", { key: '5758c76c248e9e54759bd008310047a5c670339a' }, this.loading
             ? h("tr", { "aria-busy": "true" }, h("td", { colSpan: this.totalColumnCount(), class: "loading" }, h("wcs-spinner", null)))
-            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: 'c683eb883707ffbd1fed22d86ececb595f70c2c0', name: "grid-pagination" })));
+            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: '170e79b086e8235ae736c8cc54512b0e3bb0e7ab', name: "grid-pagination" })));
     }
     /**
      * Returns the row with all mapped cells inside.
@@ -820,7 +821,7 @@ export class Grid {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",