wcs-core 7.5.0 → 7.6.0

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

@@ -137,6 +137,130 @@ test.describe('wcs-editable-field', () => {
         const loadContainer = page.locator('wcs-editable-field .load-container:not(.display-none)');
         await expect(loadContainer).toBeVisible();
     });
+    test('displays selected option label for select in display mode', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="My select" type="select" value="1" id="select-label-test">
+                <wcs-select>
+                    <wcs-select-option value="1">One</wcs-select-option>
+                    <wcs-select-option value="2">Two</wcs-select-option>
+                    <wcs-select-option value="3">Three</wcs-select-option>
+                </wcs-select>
+            </wcs-editable-field>
+        `);
+        const displayValue = page.locator('wcs-editable-field .display-container span');
+        await expect(displayValue).toHaveText('One');
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await displayContainer.click();
+        await page.waitForChanges();
+        const selectValue = await page.locator('wcs-select').evaluate((element) => element.value);
+        expect(selectValue).toBe('1');
+    });
+    test('displays selected option labels for multiple select in display mode', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="My multiple select" type="select" id="multiple-select-label-test">
+                <wcs-select multiple>
+                    <wcs-select-option value="1">One</wcs-select-option>
+                    <wcs-select-option value="2">Two</wcs-select-option>
+                    <wcs-select-option value="3">Three</wcs-select-option>
+                </wcs-select>
+            </wcs-editable-field>
+        `);
+        await page.locator('wcs-editable-field').evaluate((element) => {
+            element.value = ['1', '3'];
+        });
+        await page.waitForChanges();
+        const displayValue = page.locator('wcs-editable-field .display-container span');
+        await expect(displayValue).toHaveText('One, Three');
+    });
+    test('keeps the updated single select value in edit mode', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="My select" type="select" value="1" id="single-select-edit-mode-test">
+                <wcs-select>
+                    <wcs-select-option value="1">One</wcs-select-option>
+                    <wcs-select-option value="2">Two</wcs-select-option>
+                    <wcs-select-option value="3">Three</wcs-select-option>
+                </wcs-select>
+            </wcs-editable-field>
+        `);
+        await page.locator('#single-select-edit-mode-test').evaluate((element) => {
+            element.value = '2';
+        });
+        await page.waitForChanges();
+        const displayValue = page.locator('#single-select-edit-mode-test .display-container span');
+        await expect(displayValue).toHaveText('Two');
+        await page.locator('#single-select-edit-mode-test .display-container').click();
+        await page.waitForChanges();
+        const selectValue = await page.locator('#single-select-edit-mode-test wcs-select').evaluate((element) => element.value);
+        expect(selectValue).toBe('2');
+    });
+    test('keeps the updated multiple select values in edit mode', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="My multiple select" type="select" id="multiple-select-edit-mode-test">
+                <wcs-select multiple>
+                    <wcs-select-option value="1">One</wcs-select-option>
+                    <wcs-select-option value="2">Two</wcs-select-option>
+                    <wcs-select-option value="3">Three</wcs-select-option>
+                </wcs-select>
+            </wcs-editable-field>
+        `);
+        await page.locator('#multiple-select-edit-mode-test').evaluate((element) => {
+            element.value = ['1', '3'];
+        });
+        await page.waitForChanges();
+        const displayValue = page.locator('#multiple-select-edit-mode-test .display-container span');
+        await expect(displayValue).toHaveText('One, Three');
+        await page.locator('#multiple-select-edit-mode-test .display-container').click();
+        await page.waitForChanges();
+        const selectedOptionValues = await page.locator('#multiple-select-edit-mode-test wcs-select-option').evaluateAll(options => options
+            .filter((option) => option.selected)
+            .map((option) => option.value));
+        expect(selectedOptionValues).toEqual(['1', '3']);
+    });
+    test('uses raw single select value when formatFn is provided', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Train select" type="select" value="train-1" id="format-select-test">
+                <wcs-select>
+                    <wcs-select-option value="train-1">TGV INOUI 8391</wcs-select-option>
+                    <wcs-select-option value="train-2">TER 84621</wcs-select-option>
+                </wcs-select>
+            </wcs-editable-field>
+        `);
+        await page.evaluate(() => {
+            const trains = new Map([
+                ['train-1', { name: 'TGV INOUI 8391', destination: 'Bordeaux' }],
+                ['train-2', { name: 'TER 84621', destination: 'Nantes' }],
+            ]);
+            const el = document.querySelector('#format-select-test');
+            el.formatFn = (value) => { var _a; return `Train ${value} - ${(_a = trains.get(value)) === null || _a === void 0 ? void 0 : _a.destination}`; };
+        });
+        await page.waitForChanges();
+        const displayValue = page.locator('#format-select-test .display-container span');
+        await expect(displayValue).toHaveText('Train train-1 - Bordeaux');
+    });
+    test('uses raw multiple select values when formatFn is provided', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Train select" type="select" id="format-multiple-select-test">
+                <wcs-select multiple>
+                    <wcs-select-option value="train-1">TGV INOUI 8391</wcs-select-option>
+                    <wcs-select-option value="train-2">TER 84621</wcs-select-option>
+                    <wcs-select-option value="train-3">OUIGO 7823</wcs-select-option>
+                </wcs-select>
+            </wcs-editable-field>
+        `);
+        await page.evaluate(() => {
+            const trains = new Map([
+                ['train-1', { name: 'TGV INOUI 8391' }],
+                ['train-2', { name: 'TER 84621' }],
+                ['train-3', { name: 'OUIGO 7823' }],
+            ]);
+            const el = document.querySelector('#format-multiple-select-test');
+            el.value = ['train-1', 'train-3'];
+            el.formatFn = (value) => value.map(trainId => { var _a; return (_a = trains.get(trainId)) === null || _a === void 0 ? void 0 : _a.name; }).join(' | ');
+        });
+        await page.waitForChanges();
+        const displayValue = page.locator('#format-multiple-select-test .display-container span');
+        await expect(displayValue).toHaveText('TGV INOUI 8391 | OUIGO 7823');
+    });
     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">
@@ -152,5 +276,95 @@ test.describe('wcs-editable-field', () => {
         const displayContainer = page.locator('wcs-editable-field .display-container');
         await expect(displayContainer).toContainText('TEST VALUE');
     });
+    test('displays correct input value after external value change', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test" value="old" type="input">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        await page.evaluate(() => {
+            document.querySelector('wcs-editable-field').value = 'new';
+        });
+        await page.waitForChanges();
+        const displayValue = page.locator('wcs-editable-field .display-container span');
+        await expect(displayValue).toHaveText('new');
+    });
+    test('syncs input value when entering edit mode after external value change', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test" value="old" type="input">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        await page.evaluate(() => {
+            document.querySelector('wcs-editable-field').value = 'new';
+        });
+        await page.waitForChanges();
+        await page.locator('wcs-editable-field .display-container').click();
+        await page.waitForChanges();
+        const inputValue = await page.locator('wcs-input').evaluate((el) => el.value);
+        expect(inputValue).toBe('new');
+    });
+    test('displays correct textarea value after external value change', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test" value="old" type="textarea">
+                <wcs-textarea></wcs-textarea>
+            </wcs-editable-field>
+        `);
+        await page.evaluate(() => {
+            document.querySelector('wcs-editable-field').value = 'new';
+        });
+        await page.waitForChanges();
+        const displayValue = page.locator('wcs-editable-field .display-container span');
+        await expect(displayValue).toHaveText('new');
+    });
+    test('syncs textarea value when entering edit mode after external value change', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test" value="old" type="textarea">
+                <wcs-textarea></wcs-textarea>
+            </wcs-editable-field>
+        `);
+        await page.evaluate(() => {
+            document.querySelector('wcs-editable-field').value = 'new';
+        });
+        await page.waitForChanges();
+        await page.locator('wcs-editable-field .display-container').click();
+        await page.waitForChanges();
+        const textareaValue = await page.locator('wcs-textarea').evaluate((el) => el.value);
+        expect(textareaValue).toBe('new');
+    });
+    test('displays correct select value after external value change', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test" value="1" type="select">
+                <wcs-select>
+                    <wcs-select-option value="1">Option 1</wcs-select-option>
+                    <wcs-select-option value="2">Option 2</wcs-select-option>
+                </wcs-select>
+            </wcs-editable-field>
+        `);
+        await page.evaluate(() => {
+            document.querySelector('wcs-editable-field').value = '2';
+        });
+        await page.waitForChanges();
+        const displayValue = page.locator('wcs-editable-field .display-container span');
+        await expect(displayValue).toHaveText('Option 2');
+    });
+    test('syncs select value when entering edit mode after external value change', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test" value="1" type="select">
+                <wcs-select>
+                    <wcs-select-option value="1">Option 1</wcs-select-option>
+                    <wcs-select-option value="2">Option 2</wcs-select-option>
+                </wcs-select>
+            </wcs-editable-field>
+        `);
+        await page.evaluate(() => {
+            document.querySelector('wcs-editable-field').value = '2';
+        });
+        await page.waitForChanges();
+        await page.locator('wcs-editable-field .display-container').click();
+        await page.waitForChanges();
+        const selectValue = await page.locator('wcs-select').evaluate((el) => el.value);
+        expect(selectValue).toBe('2');
+    });
 });
 //# sourceMappingURL=editable-field.e2e.playwright.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"editable-field.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/editable-field/editable-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('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"]}
+{"version":3,"file":"editable-field.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/editable-field/editable-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('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('displays selected option label for select in display mode', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"My select\" type=\"select\" value=\"1\" id=\"select-label-test\">\n                <wcs-select>\n                    <wcs-select-option value=\"1\">One</wcs-select-option>\n                    <wcs-select-option value=\"2\">Two</wcs-select-option>\n                    <wcs-select-option value=\"3\">Three</wcs-select-option>\n                </wcs-select>\n            </wcs-editable-field>\n        `);\n\n        const displayValue = page.locator('wcs-editable-field .display-container span');\n        await expect(displayValue).toHaveText('One');\n\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await displayContainer.click();\n        await page.waitForChanges();\n\n        const selectValue = await page.locator('wcs-select').evaluate((element: HTMLWcsSelectElement) => element.value);\n        expect(selectValue).toBe('1');\n    });\n\n    test('displays selected option labels for multiple select in display mode', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"My multiple select\" type=\"select\" id=\"multiple-select-label-test\">\n                <wcs-select multiple>\n                    <wcs-select-option value=\"1\">One</wcs-select-option>\n                    <wcs-select-option value=\"2\">Two</wcs-select-option>\n                    <wcs-select-option value=\"3\">Three</wcs-select-option>\n                </wcs-select>\n            </wcs-editable-field>\n        `);\n\n        await page.locator('wcs-editable-field').evaluate((element: HTMLWcsEditableFieldElement) => {\n            element.value = ['1', '3'];\n        });\n        await page.waitForChanges();\n\n        const displayValue = page.locator('wcs-editable-field .display-container span');\n        await expect(displayValue).toHaveText('One, Three');\n    });\n\n    test('keeps the updated single select value in edit mode', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"My select\" type=\"select\" value=\"1\" id=\"single-select-edit-mode-test\">\n                <wcs-select>\n                    <wcs-select-option value=\"1\">One</wcs-select-option>\n                    <wcs-select-option value=\"2\">Two</wcs-select-option>\n                    <wcs-select-option value=\"3\">Three</wcs-select-option>\n                </wcs-select>\n            </wcs-editable-field>\n        `);\n\n        await page.locator('#single-select-edit-mode-test').evaluate((element: HTMLWcsEditableFieldElement) => {\n            element.value = '2';\n        });\n        await page.waitForChanges();\n\n        const displayValue = page.locator('#single-select-edit-mode-test .display-container span');\n        await expect(displayValue).toHaveText('Two');\n\n        await page.locator('#single-select-edit-mode-test .display-container').click();\n        await page.waitForChanges();\n\n        const selectValue = await page.locator('#single-select-edit-mode-test wcs-select').evaluate((element: HTMLWcsSelectElement) => element.value);\n        expect(selectValue).toBe('2');\n    });\n\n    test('keeps the updated multiple select values in edit mode', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"My multiple select\" type=\"select\" id=\"multiple-select-edit-mode-test\">\n                <wcs-select multiple>\n                    <wcs-select-option value=\"1\">One</wcs-select-option>\n                    <wcs-select-option value=\"2\">Two</wcs-select-option>\n                    <wcs-select-option value=\"3\">Three</wcs-select-option>\n                </wcs-select>\n            </wcs-editable-field>\n        `);\n\n        await page.locator('#multiple-select-edit-mode-test').evaluate((element: HTMLWcsEditableFieldElement) => {\n            element.value = ['1', '3'];\n        });\n        await page.waitForChanges();\n\n        const displayValue = page.locator('#multiple-select-edit-mode-test .display-container span');\n        await expect(displayValue).toHaveText('One, Three');\n\n        await page.locator('#multiple-select-edit-mode-test .display-container').click();\n        await page.waitForChanges();\n\n        const selectedOptionValues = await page.locator('#multiple-select-edit-mode-test wcs-select-option').evaluateAll(options =>\n            options\n                .filter((option: HTMLWcsSelectOptionElement) => option.selected)\n                .map((option: HTMLWcsSelectOptionElement) => option.value)\n        );\n        expect(selectedOptionValues).toEqual(['1', '3']);\n    });\n\n    test('uses raw single select value when formatFn is provided', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Train select\" type=\"select\" value=\"train-1\" id=\"format-select-test\">\n                <wcs-select>\n                    <wcs-select-option value=\"train-1\">TGV INOUI 8391</wcs-select-option>\n                    <wcs-select-option value=\"train-2\">TER 84621</wcs-select-option>\n                </wcs-select>\n            </wcs-editable-field>\n        `);\n\n        await page.evaluate(() => {\n            const trains = new Map([\n                ['train-1', { name: 'TGV INOUI 8391', destination: 'Bordeaux' }],\n                ['train-2', { name: 'TER 84621', destination: 'Nantes' }],\n            ]);\n\n            const el = document.querySelector('#format-select-test') as any;\n            el.formatFn = (value: string) => `Train ${value} - ${trains.get(value)?.destination}`;\n        });\n        await page.waitForChanges();\n\n        const displayValue = page.locator('#format-select-test .display-container span');\n        await expect(displayValue).toHaveText('Train train-1 - Bordeaux');\n    });\n\n    test('uses raw multiple select values when formatFn is provided', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Train select\" type=\"select\" id=\"format-multiple-select-test\">\n                <wcs-select multiple>\n                    <wcs-select-option value=\"train-1\">TGV INOUI 8391</wcs-select-option>\n                    <wcs-select-option value=\"train-2\">TER 84621</wcs-select-option>\n                    <wcs-select-option value=\"train-3\">OUIGO 7823</wcs-select-option>\n                </wcs-select>\n            </wcs-editable-field>\n        `);\n\n        await page.evaluate(() => {\n            const trains = new Map([\n                ['train-1', { name: 'TGV INOUI 8391' }],\n                ['train-2', { name: 'TER 84621' }],\n                ['train-3', { name: 'OUIGO 7823' }],\n            ]);\n\n            const el = document.querySelector('#format-multiple-select-test') as any;\n            el.value = ['train-1', 'train-3'];\n            el.formatFn = (value: string[]) => value.map(trainId => trains.get(trainId)?.name).join(' | ');\n        });\n        await page.waitForChanges();\n\n        const displayValue = page.locator('#format-multiple-select-test .display-container span');\n        await expect(displayValue).toHaveText('TGV INOUI 8391 | OUIGO 7823');\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    test('displays correct input value after external value change', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test\" value=\"old\" type=\"input\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        await page.evaluate(() => {\n            (document.querySelector('wcs-editable-field') as any).value = 'new';\n        });\n        await page.waitForChanges();\n\n        const displayValue = page.locator('wcs-editable-field .display-container span');\n        await expect(displayValue).toHaveText('new');\n    });\n\n    test('syncs input value when entering edit mode after external value change', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test\" value=\"old\" type=\"input\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        await page.evaluate(() => {\n            (document.querySelector('wcs-editable-field') as any).value = 'new';\n        });\n        await page.waitForChanges();\n\n        await page.locator('wcs-editable-field .display-container').click();\n        await page.waitForChanges();\n\n        const inputValue = await page.locator('wcs-input').evaluate((el: HTMLWcsInputElement) => el.value);\n        expect(inputValue).toBe('new');\n    });\n\n    test('displays correct textarea value after external value change', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test\" value=\"old\" type=\"textarea\">\n                <wcs-textarea></wcs-textarea>\n            </wcs-editable-field>\n        `);\n\n        await page.evaluate(() => {\n            (document.querySelector('wcs-editable-field') as any).value = 'new';\n        });\n        await page.waitForChanges();\n\n        const displayValue = page.locator('wcs-editable-field .display-container span');\n        await expect(displayValue).toHaveText('new');\n    });\n\n    test('syncs textarea value when entering edit mode after external value change', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test\" value=\"old\" type=\"textarea\">\n                <wcs-textarea></wcs-textarea>\n            </wcs-editable-field>\n        `);\n\n        await page.evaluate(() => {\n            (document.querySelector('wcs-editable-field') as any).value = 'new';\n        });\n        await page.waitForChanges();\n\n        await page.locator('wcs-editable-field .display-container').click();\n        await page.waitForChanges();\n\n        const textareaValue = await page.locator('wcs-textarea').evaluate((el: HTMLWcsTextareaElement) => el.value);\n        expect(textareaValue).toBe('new');\n    });\n\n    test('displays correct select value after external value change', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test\" value=\"1\" type=\"select\">\n                <wcs-select>\n                    <wcs-select-option value=\"1\">Option 1</wcs-select-option>\n                    <wcs-select-option value=\"2\">Option 2</wcs-select-option>\n                </wcs-select>\n            </wcs-editable-field>\n        `);\n\n        await page.evaluate(() => {\n            (document.querySelector('wcs-editable-field') as any).value = '2';\n        });\n        await page.waitForChanges();\n\n        const displayValue = page.locator('wcs-editable-field .display-container span');\n        await expect(displayValue).toHaveText('Option 2');\n    });\n\n    test('syncs select value when entering edit mode after external value change', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test\" value=\"1\" type=\"select\">\n                <wcs-select>\n                    <wcs-select-option value=\"1\">Option 1</wcs-select-option>\n                    <wcs-select-option value=\"2\">Option 2</wcs-select-option>\n                </wcs-select>\n            </wcs-editable-field>\n        `);\n\n        await page.evaluate(() => {\n            (document.querySelector('wcs-editable-field') as any).value = '2';\n        });\n        await page.waitForChanges();\n\n        await page.locator('wcs-editable-field .display-container').click();\n        await page.waitForChanges();\n\n        const selectValue = await page.locator('wcs-select').evaluate((el: HTMLWcsSelectElement) => el.value);\n        expect(selectValue).toBe('2');\n    });\n});\n"]}

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

@@ -259,6 +259,7 @@ export class EditableField {
     }
     onValueChange() {
         this.currentState = EditableComponentState.DISPLAY;
+        this.currentValue = this.value;
     }
     onDisplayContainerClick() {
         if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {
@@ -281,19 +282,42 @@ export class EditableField {
     getReadonlySvgIcon() {
         return h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "26", height: "24", viewBox: "0 0 27 25", class: "readonly-icon" }, h("path", { d: "M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z", transform: "translate(-0.5 -1.5)" }), h("path", { d: "M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z", transform: "translate(-0.5 -1.5)" }), h("path", { d: "M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z", transform: "translate(-0.5 -1.5)" }));
     }
-    formatValues() {
-        let formattedValue = this.value;
-        let formattedCurrentValue = this.currentValue;
+    getSelectElement() {
+        var _a;
+        return ((_a = this.spiedElement) !== null && _a !== void 0 ? _a : this.el.querySelector('wcs-select'));
+    }
+    computeSelectDisplayTextFromSlottedSelectOptions(value) {
+        var _a, _b, _c, _d;
+        const selectElement = this.getSelectElement();
+        // in server mode, selected options could be not found in the DOM so we could not find innerText of option
+        // so we fall back on the value 
+        if (selectElement.serverMode) {
+            return value;
+        }
+        const options = Array.from((_a = selectElement === null || selectElement === void 0 ? void 0 : selectElement.querySelectorAll('wcs-select-option')) !== null && _a !== void 0 ? _a : []);
+        const compareWith = (_b = selectElement === null || selectElement === void 0 ? void 0 : selectElement.compareWith) !== null && _b !== void 0 ? _b : ((optionValue, selectedValue) => optionValue === selectedValue);
+        if (Array.isArray(value)) {
+            return value
+                .map(selectedValue => { var _a, _b; return (_b = (_a = options.find(option => compareWith(option.value, selectedValue))) === null || _a === void 0 ? void 0 : _a.innerText) !== null && _b !== void 0 ? _b : selectedValue; })
+                .join(', ');
+        }
+        return (_d = (_c = options.find(option => compareWith(option.value, value))) === null || _c === void 0 ? void 0 : _c.innerText) !== null && _d !== void 0 ? _d : value;
+    }
+    getDisplayValue(value) {
         if (this.formatFn) {
-            formattedValue = this.formatFn(this.value);
-            formattedCurrentValue = this.formatFn(this.currentValue);
+            return this.formatFn(value);
         }
-        if (Array.isArray(this.value)) {
-            formattedValue = this.value.join(', ');
+        if (this.type === 'select') {
+            return this.computeSelectDisplayTextFromSlottedSelectOptions(value);
         }
-        if (Array.isArray(this.currentValue)) {
-            formattedCurrentValue = this.currentValue.join(', ');
+        if (Array.isArray(value)) {
+            return value.join(', ');
         }
+        return value;
+    }
+    formatValues() {
+        const formattedValue = this.getDisplayValue(this.value);
+        const formattedCurrentValue = this.getDisplayValue(this.currentValue);
         return {
             formattedValue: (formattedValue ? (h("span", null, formattedValue)) : (h("span", null))),
             formattedValueText: formattedValue,
@@ -302,7 +326,7 @@ export class EditableField {
     }
     render() {
         const { formattedValue, formattedValueText, formattedCurrentValue } = this.formatValues();
-        return (h(Host, { key: '81f6b6b92cd0a6f60a0eb4fbdb781a42863d4478' }, h("div", { key: '1278b7794e0127f1f2bc819d246712d55a139abd', class: "label" }, this.label), h("button", { key: '6049a936d198c5ee68db9a29466b82dc0ca55fa2', 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: '97020f20f553553b1e3a866d6d2ad274504b1bc9', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), h("div", { key: '17c58773fdaa738eef36c20545815ff10c35c5eb', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, h("wcs-spinner", { key: 'b2ef7dd52a95d0604cd74368a17cf26283a663a9' })), h("wcs-form-field", { key: '38891efe6c9c119ad7d261f31edba4b4e5e3ae71', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, h("wcs-label", { key: '80ff051b722d175932c4cf56410f8c4081fe4cb8', class: "visually-hidden" }, this.label), h("slot", { key: '4e8592e8283ce75e629f61dafd609c59cd5fbbc0' }), this.isError && this.errorMsg
+        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
             ? h("wcs-error", null, this.errorMsg)
             : null)));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"editable-field.js","sourceRoot":"","sources":["../../../src/components/editable-field/editable-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch,\n    Listen\n} from '@stencil/core';\n\nimport {\n    EditableComponentUpdateEvent,\n    EditableFieldType,\n    FormatFn,\n    isWcsEditableFieldSize,\n    ValidateFn,\n    WcsEditableFieldSize,\n    WcsEditableFieldSizeValues\n} from './editable-field-interface';\nimport { clickInsideElement, isEnterKey, isEscapeKey, isMouseEvent } from '../../utils/helpers';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n/**\n * Aria-label of the display button\n */\nconst EDIT_ARIA_LABEL = \"Éditer\";\n\n// We wait until the element is displayed on the page otherwise the focus does not work.\n// 20ms is a little more than a 16ms frame at 60fps.\nconst DELAY_BEFORE_FOCUS = 20;\n\n/**\n * The editable-field component can be used to simplify the user experience, avoiding the use of a redirection to a form\n * to edit the data of an entity. You can use it with these wrapped components : `wcs-input`, `wcs-textarea`, `wcs-select`. \n *\n * This component is not present in the SNCF design system specifications, so we tried to build it in the most\n * \"discoverable\" way possible (for users who interact with), but it's a first version.\n * \n * **How to use ❓**  \n * This component is mostly used with a server that returns a response to the input sent through the `wcsChange` event.\n * It has 3 internal states :\n * - DISPLAY = the default state of the editable-field\n * - EDIT = the editable-field is editable, the user should input the data\n * - LOADING = the data is submitted and the editable-field is waiting for a **response**\n *\n * A **response** is needed to get the component out of the LOADING state. You can either :\n * - Set the `value` property to a different value to tell the component to refresh and go back into DISPLAY state\n * - Use the `successHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * - Use the `errorHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * \n * **Accessibility guidelines 💡**  \n * \n * > - Aria attributes are put on the native component on the first rendering with the `label` and `errorMsg` you provided \n * > - Additional aria attributes put on `<wcs-editable-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @cssprop --wcs-editable-field-label-color - Color of the label text\n * @cssprop --wcs-editable-field-label-font-weight - Font weight of the label text\n * @cssprop --wcs-editable-field-label-gap - Gap between the label and the field\n * @cssprop --wcs-editable-field-label-font-size - Font size of the label text\n *\n * @cssprop --wcs-editable-field-background-color - Background color of the editable field\n * @cssprop --wcs-editable-field-value-font-weight - Font weight of the field value text\n * @cssprop --wcs-editable-field-value-color-default - Default color of the field value text\n * @cssprop --wcs-editable-field-value-color-hover - Color of the field value text on hover\n * @cssprop --wcs-editable-field-value-color-readonly - Color of the field value text when readonly\n *\n * @cssprop --wcs-editable-field-height-m - Height of the editable field in medium size\n * @cssprop --wcs-editable-field-height-l - Height of the editable field in large size\n * @cssprop --wcs-editable-field-font-size-m - Font size of the field value text in medium size\n * @cssprop --wcs-editable-field-font-size-l - Font size of the field value text in large size\n *\n * @cssprop --wcs-editable-field-border-radius - Border radius of the editable field\n * @cssprop --wcs-editable-field-border-width - Border width of the editable field\n * @cssprop --wcs-editable-field-border-width-focus - Border width of the editable field when focused\n * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover\n * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field\n * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover\n * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus\n * @cssprop --wcs-editable-field-border-style - Border style of the editable field\n *\n * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size\n * @cssprop --wcs-editable-field-padding-horizontal-m - Horizontal padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-horizontal-l - Horizontal padding of the editable field in large size\n *\n * @cssprop --wcs-editable-field-icon-color-readonly - Color of the icon when the field is readonly\n */\n@Component({\n    tag: 'wcs-editable-field',\n    styleUrl: 'editable-field.scss',\n    shadow: true\n})\nexport class EditableField implements ComponentInterface {\n    @Element() private el!: HTMLWcsEditableFieldElement;\n    private spiedElement: HTMLElement = null;\n    private editModeBtn: HTMLButtonElement;\n    private onInputKeydownCallback: (event: KeyboardEvent) => void;\n    private onWcsInputOrChangeCallback: (event: CustomEvent) => void;\n\n    @State() private currentState: EditableComponentState = EditableComponentState.DISPLAY;\n    /**\n     * Specifies which component is used for editing\n     */\n    @Prop() type: EditableFieldType = 'input';\n    /**\n     * Label of the field.  \n     * Will also be part of the edit button `aria-label`.\n     */\n    @Prop() label!: string;\n    /**\n     * Event called at each (valid) update of the field.\n     */\n    @Event() wcsChange!: EventEmitter<EditableComponentUpdateEvent>;\n    /**\n     * Specify whether the field is editable or not\n     */\n    @Prop({ reflect: true }) readonly: boolean = false;\n    /**\n     * Initial value of the field\n     */\n    @Prop({mutable: true}) value: any;\n    /**\n     * Function to customize the validation of the data during the update\n     */\n    @Prop() validateFn: ValidateFn<any>;\n    /**\n     * Function used to format the value\n     */\n    @Prop() formatFn: FormatFn<any>;\n    /**\n     * Error message displayed under the field if validation failed.\n     */\n    @Prop() errorMsg: string = null;\n    /**\n     * Specify the size (height) of the editable field.\n     */\n    @Prop({reflect: true}) size: WcsEditableFieldSize = 'm';\n\n    @State() private isError: boolean = false;\n\n    private currentValue: any = null;\n\n    componentWillLoad(): Promise<void> | void {\n        if(!isWcsEditableFieldSize(this.size)) {\n            console.warn(`Invalid size value for wcs-editable-field : \"${this.size}\". Must be one of \"${WcsEditableFieldSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        this.currentValue = this.value;\n    }\n\n    componentDidLoad() {\n        const assignedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements();\n        switch (this.type) {\n            case 'input':\n                this.initWithInput(assignedElements);\n                break;\n            case 'textarea':\n                this.initWithTextArea(assignedElements);\n                break;\n            case 'select':\n                this.initWithSelect(assignedElements)\n                break;\n        }\n    }\n\n\n    disconnectedCallback(): void {\n        this.cleanUpSpiedElementEventListeners();\n    }\n\n    private keyboardSubmitHandler(event: KeyboardEvent): void {\n        const shouldValidateOnEnterKey = \n            (this.type === 'textarea' || this.type === 'select')\n            ? (isEnterKey(event) && event.ctrlKey)\n            : isEnterKey(event);\n\n        if (shouldValidateOnEnterKey) {\n            this.sendCurrentValue();\n        }\n        if (isEscapeKey(event)) {\n            this.discardChanges();\n        }\n    }\n\n    private onWcsInputOrChange(event: CustomEvent) {\n        event.stopImmediatePropagation();\n        const value = this.type === 'select' ? event.detail.value : event.detail.target.value;\n        this.currentValue = value;\n        if (this.validateFn) {\n            this.isError = !this.validateFn(this.currentValue);\n        }\n    }\n\n    private cleanUpSpiedElementEventListeners(): void {\n        this.spiedElement?.removeEventListener('keydown', this.onInputKeydownCallback);\n        this.spiedElement?.removeEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n        this.spiedElement?.removeEventListener('wcsChange', this.onWcsInputOrChangeCallback);\n    }\n\n    private initWithInput(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-INPUT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted input element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    private initWithTextArea(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-TEXTAREA'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted textarea element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    private initWithSelect(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-SELECT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted select element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsChangeEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    /**\n     * This method subscribes the component to the change events produced by the other WCS components\n     * (provided by the user in slot)\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addWcsChangeEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsChange', this.onWcsInputOrChangeCallback);\n    }\n\n    /**\n     * This method subscribes the component to the input events produced by the other WCS components\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addWcsInputEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n    }\n\n    /**\n     * This method subscribes the component to the keydown events produced by the other WCS components \n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addKeyDownHandler(elt: HTMLElement) {\n        this.onInputKeydownCallback = this.keyboardSubmitHandler.bind(this);\n        elt.addEventListener('keydown', this.onInputKeydownCallback);\n    }\n\n    private focusEditModeBtn() {\n        setTimeout(() => {\n            this.editModeBtn?.focus();\n        }, DELAY_BEFORE_FOCUS);\n    }\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY;\n                this.focusEditModeBtn();\n            } else {\n                this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;\n                if (!this.isError) {\n                    this.currentState = EditableComponentState.LOAD;\n                    this.wcsChange.emit({\n                        newValue: this.currentValue,\n                        successHandler: () => this.forceDisplayStateAndValidate(),\n                        errorHandler: () => this.errorHandler()\n                    });\n                }\n            }\n        }\n    }\n\n    private discardChanges() {\n        this.currentValue = this.value;\n        this.currentState = EditableComponentState.DISPLAY;\n        this.isError = false;\n        this.focusEditModeBtn();\n    }\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n            this.focusEditModeBtn();\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    // Process only mouse clicks, to avoid interfering with keyboard triggered button clicks. \n    // In some browsers, pressing \"Enter\" or \"Space\" while focused on a button generates a click event\n    // with `event.detail` set to 0. It's a keyboard triggered click, not a real mouse click. \n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent | KeyboardEvent) {\n        // Ensure only true mouse clicks are processed\n        if (isMouseEvent(event) && event.detail !== 0 && !clickInsideElement(event, this.el)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\n    }\n\n    /**\n     * discard changes and force component state to DISPLAY\n     * <br/>\n     * This method must be call when component is in LOAD state\n     */\n    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n    }\n\n    private onDisplayContainerClick(): void {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n            setTimeout(() => {\n                if (this.type === 'input') {\n                    (this.spiedElement as HTMLWcsInputElement).focus();\n                } else if (this.type === 'textarea') {\n                    (this.spiedElement as HTMLWcsTextareaElement).fitContent();\n                    (this.spiedElement as HTMLWcsTextareaElement).focus();\n                }\n            }, DELAY_BEFORE_FOCUS)\n        }\n    }\n\n    private getReadonlySvgIcon() {\n        return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"24\" viewBox=\"0 0 27 25\"\n                    class=\"readonly-icon\">\n            <path d=\"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z\"\n                  transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n        </svg>;\n    }\n\n    private formatValues() {\n        let formattedValue = this.value;\n        let formattedCurrentValue = this.currentValue;\n        if (this.formatFn) {\n            formattedValue = this.formatFn(this.value);\n            formattedCurrentValue = this.formatFn(this.currentValue);\n        }\n        if (Array.isArray(this.value)) {\n            formattedValue = this.value.join(', ');\n        }\n        if (Array.isArray(this.currentValue)) {\n            formattedCurrentValue = this.currentValue.join(', ');\n        }\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedValueText: formattedValue,\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n    \n    render(): any {\n        const {formattedValue, formattedValueText, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <button\n                    type=\"button\"\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}\n                    ref={(el) => this.editModeBtn = el}\n                    aria-label={`${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}`}\n                >\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </button>\n                <div\n                    class={'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '')}>\n                    {formattedCurrentValue}\n                    <wcs-spinner></wcs-spinner>\n                </div>\n                <wcs-form-field is-error={this.isError}\n                                class={'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '')}\n                >\n                    <wcs-label class=\"visually-hidden\">{this.label}</wcs-label>\n                    <slot/>\n                    {\n                        this.isError && this.errorMsg\n                            ? <wcs-error>{this.errorMsg}</wcs-error>\n                            : null\n                    }\n                </wcs-form-field>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"editable-field.js","sourceRoot":"","sources":["../../../src/components/editable-field/editable-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch,\n    Listen\n} from '@stencil/core';\n\nimport {\n    EditableComponentUpdateEvent,\n    EditableFieldType,\n    FormatFn,\n    isWcsEditableFieldSize,\n    ValidateFn,\n    WcsEditableFieldSize,\n    WcsEditableFieldSizeValues\n} from './editable-field-interface';\nimport { clickInsideElement, isEnterKey, isEscapeKey, isMouseEvent } from '../../utils/helpers';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n/**\n * Aria-label of the display button\n */\nconst EDIT_ARIA_LABEL = \"Éditer\";\n\n// We wait until the element is displayed on the page otherwise the focus does not work.\n// 20ms is a little more than a 16ms frame at 60fps.\nconst DELAY_BEFORE_FOCUS = 20;\n\n/**\n * The editable-field component can be used to simplify the user experience, avoiding the use of a redirection to a form\n * to edit the data of an entity. You can use it with these wrapped components : `wcs-input`, `wcs-textarea`, `wcs-select`. \n *\n * This component is not present in the SNCF design system specifications, so we tried to build it in the most\n * \"discoverable\" way possible (for users who interact with), but it's a first version.\n * \n * **How to use ❓**  \n * This component is mostly used with a server that returns a response to the input sent through the `wcsChange` event.\n * It has 3 internal states :\n * - DISPLAY = the default state of the editable-field\n * - EDIT = the editable-field is editable, the user should input the data\n * - LOADING = the data is submitted and the editable-field is waiting for a **response**\n *\n * A **response** is needed to get the component out of the LOADING state. You can either :\n * - Set the `value` property to a different value to tell the component to refresh and go back into DISPLAY state\n * - Use the `successHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * - Use the `errorHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * \n * **Accessibility guidelines 💡**  \n * \n * > - Aria attributes are put on the native component on the first rendering with the `label` and `errorMsg` you provided \n * > - Additional aria attributes put on `<wcs-editable-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @cssprop --wcs-editable-field-label-color - Color of the label text\n * @cssprop --wcs-editable-field-label-font-weight - Font weight of the label text\n * @cssprop --wcs-editable-field-label-gap - Gap between the label and the field\n * @cssprop --wcs-editable-field-label-font-size - Font size of the label text\n *\n * @cssprop --wcs-editable-field-background-color - Background color of the editable field\n * @cssprop --wcs-editable-field-value-font-weight - Font weight of the field value text\n * @cssprop --wcs-editable-field-value-color-default - Default color of the field value text\n * @cssprop --wcs-editable-field-value-color-hover - Color of the field value text on hover\n * @cssprop --wcs-editable-field-value-color-readonly - Color of the field value text when readonly\n *\n * @cssprop --wcs-editable-field-height-m - Height of the editable field in medium size\n * @cssprop --wcs-editable-field-height-l - Height of the editable field in large size\n * @cssprop --wcs-editable-field-font-size-m - Font size of the field value text in medium size\n * @cssprop --wcs-editable-field-font-size-l - Font size of the field value text in large size\n *\n * @cssprop --wcs-editable-field-border-radius - Border radius of the editable field\n * @cssprop --wcs-editable-field-border-width - Border width of the editable field\n * @cssprop --wcs-editable-field-border-width-focus - Border width of the editable field when focused\n * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover\n * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field\n * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover\n * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus\n * @cssprop --wcs-editable-field-border-style - Border style of the editable field\n *\n * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size\n * @cssprop --wcs-editable-field-padding-horizontal-m - Horizontal padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-horizontal-l - Horizontal padding of the editable field in large size\n *\n * @cssprop --wcs-editable-field-icon-color-readonly - Color of the icon when the field is readonly\n */\n@Component({\n    tag: 'wcs-editable-field',\n    styleUrl: 'editable-field.scss',\n    shadow: true\n})\nexport class EditableField implements ComponentInterface {\n    @Element() private el!: HTMLWcsEditableFieldElement;\n    private spiedElement: HTMLElement = null;\n    private editModeBtn: HTMLButtonElement;\n    private onInputKeydownCallback: (event: KeyboardEvent) => void;\n    private onWcsInputOrChangeCallback: (event: CustomEvent) => void;\n\n    @State() private currentState: EditableComponentState = EditableComponentState.DISPLAY;\n    /**\n     * Specifies which component is used for editing\n     */\n    @Prop() type: EditableFieldType = 'input';\n    /**\n     * Label of the field.  \n     * Will also be part of the edit button `aria-label`.\n     */\n    @Prop() label!: string;\n    /**\n     * Event called at each (valid) update of the field.\n     */\n    @Event() wcsChange!: EventEmitter<EditableComponentUpdateEvent>;\n    /**\n     * Specify whether the field is editable or not\n     */\n    @Prop({ reflect: true }) readonly: boolean = false;\n    /**\n     * Initial value of the field\n     */\n    @Prop({mutable: true}) value: any;\n    /**\n     * Function to customize the validation of the data during the update\n     */\n    @Prop() validateFn: ValidateFn<any>;\n    /**\n     * Function used to format the value\n     */\n    @Prop() formatFn: FormatFn<any>;\n    /**\n     * Error message displayed under the field if validation failed.\n     */\n    @Prop() errorMsg: string = null;\n    /**\n     * Specify the size (height) of the editable field.\n     */\n    @Prop({reflect: true}) size: WcsEditableFieldSize = 'm';\n\n    @State() private isError: boolean = false;\n\n    private currentValue: any = null;\n\n    componentWillLoad(): Promise<void> | void {\n        if(!isWcsEditableFieldSize(this.size)) {\n            console.warn(`Invalid size value for wcs-editable-field : \"${this.size}\". Must be one of \"${WcsEditableFieldSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        this.currentValue = this.value;\n    }\n\n    componentDidLoad() {\n        const assignedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements();\n        switch (this.type) {\n            case 'input':\n                this.initWithInput(assignedElements);\n                break;\n            case 'textarea':\n                this.initWithTextArea(assignedElements);\n                break;\n            case 'select':\n                this.initWithSelect(assignedElements);\n                break;\n        }\n    }\n\n\n    disconnectedCallback(): void {\n        this.cleanUpSpiedElementEventListeners();\n    }\n\n    private keyboardSubmitHandler(event: KeyboardEvent): void {\n        const shouldValidateOnEnterKey = \n            (this.type === 'textarea' || this.type === 'select')\n            ? (isEnterKey(event) && event.ctrlKey)\n            : isEnterKey(event);\n\n        if (shouldValidateOnEnterKey) {\n            this.sendCurrentValue();\n        }\n        if (isEscapeKey(event)) {\n            this.discardChanges();\n        }\n    }\n\n    private onWcsInputOrChange(event: CustomEvent) {\n        event.stopImmediatePropagation();\n        const value = this.type === 'select' ? event.detail.value : event.detail.target.value;\n        this.currentValue = value;\n        if (this.validateFn) {\n            this.isError = !this.validateFn(this.currentValue);\n        }\n    }\n\n    private cleanUpSpiedElementEventListeners(): void {\n        this.spiedElement?.removeEventListener('keydown', this.onInputKeydownCallback);\n        this.spiedElement?.removeEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n        this.spiedElement?.removeEventListener('wcsChange', this.onWcsInputOrChangeCallback);\n    }\n\n    private initWithInput(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-INPUT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted input element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    private initWithTextArea(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-TEXTAREA'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted textarea element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    private initWithSelect(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-SELECT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted select element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsChangeEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    /**\n     * This method subscribes the component to the change events produced by the other WCS components\n     * (provided by the user in slot)\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addWcsChangeEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsChange', this.onWcsInputOrChangeCallback);\n    }\n\n    /**\n     * This method subscribes the component to the input events produced by the other WCS components\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addWcsInputEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n    }\n\n    /**\n     * This method subscribes the component to the keydown events produced by the other WCS components \n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addKeyDownHandler(elt: HTMLElement) {\n        this.onInputKeydownCallback = this.keyboardSubmitHandler.bind(this);\n        elt.addEventListener('keydown', this.onInputKeydownCallback);\n    }\n\n    private focusEditModeBtn() {\n        setTimeout(() => {\n            this.editModeBtn?.focus();\n        }, DELAY_BEFORE_FOCUS);\n    }\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY;\n                this.focusEditModeBtn();\n            } else {\n                this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;\n                if (!this.isError) {\n                    this.currentState = EditableComponentState.LOAD;\n                    this.wcsChange.emit({\n                        newValue: this.currentValue,\n                        successHandler: () => this.forceDisplayStateAndValidate(),\n                        errorHandler: () => this.errorHandler()\n                    });\n                }\n            }\n        }\n    }\n\n    private discardChanges() {\n        this.currentValue = this.value;\n        this.currentState = EditableComponentState.DISPLAY;\n        this.isError = false;\n        this.focusEditModeBtn();\n    }\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n            this.focusEditModeBtn();\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    // Process only mouse clicks, to avoid interfering with keyboard triggered button clicks. \n    // In some browsers, pressing \"Enter\" or \"Space\" while focused on a button generates a click event\n    // with `event.detail` set to 0. It's a keyboard triggered click, not a real mouse click. \n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent | KeyboardEvent) {\n        // Ensure only true mouse clicks are processed\n        if (isMouseEvent(event) && event.detail !== 0 && !clickInsideElement(event, this.el)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\n    }\n\n    /**\n     * discard changes and force component state to DISPLAY\n     * <br/>\n     * This method must be call when component is in LOAD state\n     */\n    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n        this.currentValue = this.value;\n    }\n\n    private onDisplayContainerClick(): void {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n            setTimeout(() => {\n                if (this.type === 'input') {\n                    (this.spiedElement as HTMLWcsInputElement).focus();\n                } else if (this.type === 'textarea') {\n                    (this.spiedElement as HTMLWcsTextareaElement).fitContent();\n                    (this.spiedElement as HTMLWcsTextareaElement).focus();\n                }\n            }, DELAY_BEFORE_FOCUS)\n        }\n    }\n\n    private getReadonlySvgIcon() {\n        return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"24\" viewBox=\"0 0 27 25\"\n                    class=\"readonly-icon\">\n            <path d=\"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z\"\n                  transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n        </svg>;\n    }\n\n    private getSelectElement(): HTMLWcsSelectElement {\n        return (this.spiedElement ?? this.el.querySelector('wcs-select')) as HTMLWcsSelectElement;\n    }\n    \n    private computeSelectDisplayTextFromSlottedSelectOptions(value: any): string {\n        const selectElement = this.getSelectElement();\n        \n        // in server mode, selected options could be not found in the DOM so we could not find innerText of option\n        // so we fall back on the value \n        if (selectElement.serverMode) {\n            return value;\n        }\n        \n        const options = Array.from(selectElement?.querySelectorAll('wcs-select-option') ?? []);\n        const compareWith = selectElement?.compareWith ?? ((optionValue: any, selectedValue: any) => optionValue === selectedValue);\n\n        if (Array.isArray(value)) {\n            return value\n                .map(selectedValue => options.find(option => compareWith(option.value, selectedValue))?.innerText ?? selectedValue)\n                .join(', ');\n        }\n\n        return options.find(option => compareWith(option.value, value))?.innerText ?? value;\n    }\n    \n    private getDisplayValue(value: any) {\n        if (this.formatFn) {\n            return this.formatFn(value);\n        }\n\n        if (this.type === 'select') {\n            return this.computeSelectDisplayTextFromSlottedSelectOptions(value);\n        }\n\n        if (Array.isArray(value)) {\n            return value.join(', ');\n        }\n\n        return value;\n    }\n\n    private formatValues() {\n        const formattedValue = this.getDisplayValue(this.value);\n        const formattedCurrentValue = this.getDisplayValue(this.currentValue);\n\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedValueText: formattedValue,\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n    \n    render(): any {\n        const {formattedValue, formattedValueText, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <button\n                    type=\"button\"\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}\n                    ref={(el) => this.editModeBtn = el}\n                    aria-label={`${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}`}\n                >\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </button>\n                <div\n                    class={'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '')}>\n                    {formattedCurrentValue}\n                    <wcs-spinner></wcs-spinner>\n                </div>\n                <wcs-form-field is-error={this.isError}\n                                class={'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '')}\n                >\n                    <wcs-label class=\"visually-hidden\">{this.label}</wcs-label>\n                    <slot/>\n                    {\n                        this.isError && this.errorMsg\n                            ? <wcs-error>{this.errorMsg}</wcs-error>\n                            : null\n                    }\n                </wcs-form-field>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/grid/grid-radio.css

@@ -17,6 +17,14 @@
   width: fit-content;
   cursor: pointer;
   padding: var(--wcs-grid-radio-padding, 0.125rem);
+  /*
+  * DO NOT REMOVE:
+  * The native radio input is absolutely positioned.
+  * This `position: relative` makes `.grid-radio` its containing block.
+  * Without it, the input can be laid out relative to another ancestor higher in the DOM,
+  * so when the browser focuses the native control it may scroll the window unexpectedly.
+  */
+  position: relative;
   /* If the selector focus-visible is not supported by the browser, use focus-within instead */
 }
 .grid-radio:has(input:focus-visible) {