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

wcs-core 7.5.0 → 7.6.0

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

Files changed (484) hide show

package/dist/collection/components/radio/radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/*\n The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n \n @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n \n @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n \n @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n /\n@Component({\n tag: 'wcs-radio',\n styleUrl: 'radio.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n private inputId = `wcs-rb-${radioButtonIds++}`;\n @Element() private el!: HTMLWcsRadioElement;\n private nativeRadio!: HTMLInputElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n /\n If `true`, the radio is selected. \n * @private\n /\n @State() private checked: boolean = false;\n\n /\n The tabindex of the radio button\n * @private\n /\n @State() private radioTabIndex = -1;\n\n /\n Sets a unique value for each radio, used to identify which radio button in a group is selected\n /\n @Prop({ mutable: true, reflect: true }) value: any \| any[] \| undefined \| null;\n\n /\n The label text displayed for the user\n /\n @Prop({ mutable: true, reflect: true }) label: string;\n \n /\n If `true`, the user cannot interact with the radio.\n /\n @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n /\n Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n /\n @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n /\n Emitted when the radio loses focus.\n /\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio has focus.\n /\n @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n /\n The name of the control, automatically set by the radio group. \n * (You shouldn't set this prop by yourself)\n * @internal\n /\n @Prop({ mutable: true }) name: string;\n\n\n /\n The display mode of the control, automatically set by the radio group. \n * (You shouldn't set this prop by yourself)\n * @internal\n /\n @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n /\n @internal\n * Checks of unchecks the radio according to it's radio-group value\n /\n @Method()\n async updateState() {\n const radioGroup = this.getClosestRadioGroup();\n if (radioGroup) {\n this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n }\n }\n\n /* @internal */\n @Method()\n async setTabIndex(value: number) {\n this.radioTabIndex = value;\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeRadio, attr, value);\n }\n\n onFocus(ev: FocusEvent) {\n this.wcsFocus.emit(ev);\n }\n\n onBlur(ev: FocusEvent) {\n this.wcsBlur.emit(ev);\n }\n \n private getClosestRadioGroup(): HTMLWcsRadioGroupElement \| null {\n return this.el.closest('wcs-radio-group');\n }\n\n componentWillLoad(): Promise<void> \| void {\n if (this.value === undefined) {\n // If no value was given we use the text content instead.\n this.value = this.el.innerText \|\| '';\n }\n \n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n };\n }\n \n private onChange(_: Event) {\n if (this.disabled) return;\n\n // If the radio is unchecked, then the change represents its transition to the check state.\n // Only emit the change event when going from unchecked to checked, like the native behavior.\n // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n if (!this.checked) {\n this.checked = true;\n this.emitRadioChangeEvent();\n }\n }\n\n emitRadioChangeEvent() {\n this.wcsRadioClick.emit({\n label: this.label,\n source: this.el,\n value: this.value\n });\n }\n\n render() {\n \n return (\n <Host slot=\"option\"\n tabIndex={this.disabled ? -1 : this.radioTabIndex}\n class={this.checked ? 'checked' : ''}>\n <input\n id={this.inputId}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked} // Initial checked state of native input\n disabled={this.disabled}\n onChange={this.onChange.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-checked={`${this.checked}`}\n ref={(el) => (this.nativeRadio = el)}\n {...this.inheritedAttributes}\n />\n <label htmlFor={`${this.inputId}`}>{this.label}</label>\n </Host>\n );\n }\n}\n\nlet radioButtonIds = 0;\n"]}
1	+ {"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/*\n The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n \n @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n \n @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n \n @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n /\n@Component({\n tag: 'wcs-radio',\n styleUrl: 'radio.scss',\n shadow: true\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n @Element() private readonly el!: HTMLWcsRadioElement;\n \n /\n If `true`, the radio is selected. \n * @private\n /\n @State() private checked: boolean = false;\n\n /\n The tabindex of the radio button\n * @private\n /\n @State() private radioTabIndex = -1;\n\n /\n Sets a unique value for each radio, used to identify which radio button in a group is selected\n /\n @Prop({ mutable: true, reflect: true }) value: any \| any[] \| undefined \| null;\n\n /\n The label text displayed for the user\n /\n @Prop({ mutable: true, reflect: true }) label: string;\n \n /\n If `true`, the user cannot interact with the radio.\n /\n @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n /\n Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n /\n @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n /\n Emitted when the radio loses focus.\n /\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio has focus.\n /\n @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n /\n The name of the control, automatically set by the radio group. \n * (You shouldn't set this prop by yourself)\n * @internal\n /\n @Prop({ mutable: true }) name: string;\n\n\n /\n The display mode of the control, automatically set by the radio group. \n * (You shouldn't set this prop by yourself)\n * @internal\n /\n @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n /\n @internal\n * Checks of unchecks the radio according to it's radio-group value\n /\n @Method()\n async updateState() {\n const radioGroup = this.getClosestRadioGroup();\n if (radioGroup) {\n this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n }\n }\n\n /* @internal */\n @Method()\n async setTabIndex(value: number) {\n this.radioTabIndex = value;\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.el, attr, value);\n }\n\n onFocus(ev: FocusEvent) {\n this.wcsFocus.emit(ev);\n }\n\n onBlur(ev: FocusEvent) {\n this.wcsBlur.emit(ev);\n }\n \n private getClosestRadioGroup(): HTMLWcsRadioGroupElement \| null {\n return this.el.closest('wcs-radio-group');\n }\n\n componentWillLoad(): Promise<void> \| void {\n if (this.value === undefined) {\n // If no value was given we use the text content instead.\n this.value = this.el.innerText \|\| '';\n }\n }\n\n emitRadioChangeEvent() {\n this.wcsRadioClick.emit({\n label: this.label,\n source: this.el,\n value: this.value\n });\n }\n\n private selectRadio() {\n if (this.disabled \|\| this.checked) {\n return;\n }\n\n this.checked = true;\n // Only emit the change event when going from unchecked to checked, like the native behavior.\n // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n this.emitRadioChangeEvent();\n }\n\n private readonly handleClick = () => {\n this.selectRadio();\n };\n\n private readonly handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n\n if (event.key === ' ' \|\| event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n this.selectRadio();\n }\n };\n\n render() {\n \n return (\n <Host slot=\"option\"\n role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabIndex={this.disabled ? -1 : this.radioTabIndex}\n class={this.checked ? 'checked' : ''}\n onClick={this.handleClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n onKeyDown={this.handleKeyDown.bind(this)}>\n <span class=\"label\">{this.label}</span>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/radio-group/radio-group.e2e.playwright.js CHANGED Viewed

@@ -2,6 +2,18 @@ import { setWcsContent } from "../../utils/playwright/test";
 import { test } from "@stencil/playwright";
 import { expect } from "@playwright/test";
 test.describe('Radio Group', () => {
+    test('should not render an interactive radio descendant inside wcs-radio', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-radio-group>
+                <wcs-radio id="radio-1" label="SNCF" value="1"></wcs-radio>
+            </wcs-radio-group>
+        `);
+        const radio = page.locator('#radio-1');
+        // Then
+        await expect(radio).toHaveAttribute('role', 'radio');
+        await expect(radio.locator('input[type="radio"]')).toHaveCount(0);
+    });
     test('should navigate to the first not disabled radio when pressing tab key', async ({ page }) => {
         // Given
         await setWcsContent(page, `
@@ -57,8 +69,7 @@ test.describe('Radio Group', () => {
         await page.keyboard.press('Space');
         // Then
         await expect(firstRadio).toBeFocused(); // Ensure focus is on the first radio
-        const firstRadioNativeInput = page.locator('#radio-1 input');
-        await expect(firstRadioNativeInput).toHaveAttribute('aria-checked', 'true');
+        await expect(firstRadio).toHaveAttribute('aria-checked', 'true');
     });
     test('should navigate to the checked radio when pressing tab key', async ({ page }) => {
         // Given
@@ -90,13 +101,12 @@ test.describe('Radio Group', () => {
             `);
             const firstRadio = page.locator('#radio-1');
             await firstRadio.focus();
-            const thirdRadioNativeInput = page.locator('#radio-3 input');
             const thirdRadio = page.locator('#radio-3');
             // When
             await page.keyboard.press('ArrowDown');
             // Then
             await expect(thirdRadio).toBeFocused(); // Ensure focus is on the third radio
-            await expect(thirdRadioNativeInput).toHaveAttribute('aria-checked', 'true');
+            await expect(thirdRadio).toHaveAttribute('aria-checked', 'true');
         });
         test('should checked the first not disabled radio when we are on the last radio', async ({ page }) => {
             // Given
@@ -113,7 +123,7 @@ test.describe('Radio Group', () => {
             await lastRadio.focus();
             await expect(lastRadio).toBeFocused();
             const secondRadio = page.locator('#radio-2');
-            const secondRadioNativeInputInput = page.locator('#radio-2 input');
+            const secondRadioNativeInputInput = page.locator('#radio-2');
             // When
             await page.keyboard.press('ArrowDown');
             // Then
@@ -139,6 +149,26 @@ test.describe('Radio Group', () => {
             // Then
             expect(radioClickSpy).toHaveReceivedEventTimes(1);
         });
+        test('should keep only the last clicked radio checked in the same group', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-radio-group>
+                    <wcs-radio id="radio-1" value="1"></wcs-radio>
+                    <wcs-radio id="radio-2" value="2"></wcs-radio>
+                    <wcs-radio id="radio-3" value="3"></wcs-radio>
+                </wcs-radio-group>
+            `);
+            const radio1 = page.locator('#radio-1');
+            const radio2 = page.locator('#radio-2');
+            // When
+            await radio1.click();
+            await page.waitForChanges();
+            await radio2.click();
+            await page.waitForChanges();
+            // Then
+            await expect(radio1).toHaveAttribute('aria-checked', 'false');
+            await expect(radio2).toHaveAttribute('aria-checked', 'true');
+        });
         test('should fire wcsChange when we click or move to an unchecked radio', async ({ page }) => {
             // Given
             await setWcsContent(page, `
@@ -164,6 +194,30 @@ test.describe('Radio Group', () => {
             await expect(radio3).toBeFocused(); // Ensure focus is on the third radio (next radio after radio2)
             expect(changeSpy).toHaveReceivedEventTimes(2);
         });
+        test('should keep only the last keyboard-selected radio checked in the same group', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-radio-group>
+                    <wcs-radio id="radio-1" value="1"></wcs-radio>
+                    <wcs-radio id="radio-2" value="2"></wcs-radio>
+                    <wcs-radio id="radio-3" value="3"></wcs-radio>
+                </wcs-radio-group>
+            `);
+            const radio1 = page.locator('#radio-1');
+            const radio2 = page.locator('#radio-2');
+            const radio3 = page.locator('#radio-3');
+            // When
+            await radio1.focus();
+            await page.keyboard.press('Space');
+            await page.waitForChanges();
+            await page.keyboard.press('ArrowDown');
+            await page.waitForChanges();
+            // Then
+            await expect(radio2).toBeFocused();
+            await expect(radio1).toHaveAttribute('aria-checked', 'false');
+            await expect(radio2).toHaveAttribute('aria-checked', 'true');
+            await expect(radio3).toHaveAttribute('aria-checked', 'false');
+        });
         test('should fire wcsBlur and wcsFocus from the radios', async ({ page }) => {
             // Given
             await setWcsContent(page, `
@@ -206,7 +260,7 @@ test.describe('Radio Group', () => {
             // When
             await page.keyboard.press('ArrowUp');
             // Then
-            const secondRadioInput = page.locator('#radio-2 input');
+            const secondRadioInput = page.locator('#radio-2');
             await expect(secondRadioInput).toHaveAttribute('aria-checked', 'true');
         });
         test('should checked the last radio when we are on the first radio', async ({ page }) => {
@@ -223,9 +277,40 @@ test.describe('Radio Group', () => {
             // When
             await page.keyboard.press('ArrowUp');
             // Then
-            const lastRadioInput = page.locator('#radio-3 input');
+            const lastRadioInput = page.locator('#radio-3');
             await expect(lastRadioInput).toHaveAttribute('aria-checked', 'true');
         });
     });
+    test.describe('Behavior in window with scroll', () => {
+        [
+            { mode: 'radio' },
+            { mode: 'horizontal' },
+            { mode: 'option' }
+        ].forEach(({ mode }) => {
+            test(`should preserve the window scroll position when clicking a radio inside a scrollable container - mode: ${mode}`, async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <div id="scroll-container" style="height: 100vh; overflow-y: auto;">
+                        <div style="margin-top: 150vh;">
+                            <wcs-radio-group mode="${mode}">
+                                <wcs-radio id="radio-1" value="1">Radio 1</wcs-radio>
+                                <wcs-radio id="radio-2" value="2">Radio 2</wcs-radio>
+                                <wcs-radio id="radio-3" value="3">Radio 3</wcs-radio>
+                            </wcs-radio-group>
+                        </div>
+                        <div style="margin-top: 200vh;">Other content</div>
+                    </div>
+            `);
+                const body = page.locator('body');
+                const radio2 = page.locator('#radio-2');
+                await radio2.scrollIntoViewIfNeeded();
+                // When
+                await radio2.click();
+                // Then
+                const scrollY = await body.evaluate(() => window.scrollY);
+                expect(scrollY).toBe(0);
+            });
+        });
+    });
 });
 //# sourceMappingURL=radio-group.e2e.playwright.js.map

package/dist/collection/components/radio-group/radio-group.e2e.playwright.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-group.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.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('Radio Group', () => {\n test('should navigate to the first not disabled radio when pressing tab key', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-input></wcs-input>\n <wcs-radio-group>\n <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const firstTabbableItem = page.locator('wcs-input');\n await firstTabbableItem.focus();\n const secondRadio = page.locator('#radio-2');\n\n // When\n await page.keyboard.press('Tab');\n\n // Then\n await expect(secondRadio).toBeFocused();\n });\n\n test('should not make unselected radios focusable when a radio is clicked', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-input></wcs-input>\n <wcs-radio-group>\n <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const input = page.locator('wcs-input');\n const radio3 = page.locator('#radio-3');\n\n // When\n await radio3.click();\n await input.focus();\n\n // Then\n await page.keyboard.press('Tab');\n await expect(radio3).toBeFocused();\n });\n\n test('should checked the first radio when pressing space key', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-input></wcs-input>\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const firstTabbableItem = page.locator('wcs-input');\n await firstTabbableItem.focus();\n const firstRadio = page.locator('#radio-1');\n await page.keyboard.press('Tab');\n\n // When\n await page.keyboard.press('Space');\n\n // Then\n await expect(firstRadio).toBeFocused(); // Ensure focus is on the first radio\n const firstRadioNativeInput = page.locator('#radio-1 input');\n await expect(firstRadioNativeInput).toHaveAttribute('aria-checked', 'true');\n });\n\n test('should navigate to the checked radio when pressing tab key', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-input></wcs-input>\n <wcs-radio-group value=\"3\">\n <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const firstTabbableItem = page.locator('wcs-input');\n await firstTabbableItem.focus();\n const thirdRadio = page.locator('#radio-3');\n\n // When\n await page.keyboard.press('Tab');\n\n // Then\n await expect(thirdRadio).toBeFocused();\n });\n\n test.describe('When pressing arrow down key', () => {\n test('should checked the next radio not disabled when we are on the first radio and next radio is here', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio disabled id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const firstRadio = page.locator('#radio-1');\n await firstRadio.focus();\n const thirdRadioNativeInput = page.locator('#radio-3 input');\n const thirdRadio = page.locator('#radio-3');\n\n // When\n await page.keyboard.press('ArrowDown');\n\n // Then\n await expect(thirdRadio).toBeFocused(); // Ensure focus is on the third radio\n await expect(thirdRadioNativeInput).toHaveAttribute('aria-checked', 'true');\n });\n\n test('should checked the first not disabled radio when we are on the last radio', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const lastRadio = page.locator('#radio-3');\n // Click to select, then focus explicitly for WebKit compatibility\n await lastRadio.click();\n await lastRadio.focus();\n await expect(lastRadio).toBeFocused();\n const secondRadio = page.locator('#radio-2');\n const secondRadioNativeInputInput = page.locator('#radio-2 input');\n\n // When\n await page.keyboard.press('ArrowDown');\n\n // Then\n await expect(secondRadio).toBeFocused(); // Ensure focus is on the second radio\n await expect(secondRadioNativeInputInput).toHaveAttribute('aria-checked', 'true');\n });\n });\n\n test.describe('Events handling', () => {\n test('should fire wcsRadioClick when we click on an unchecked radio', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const radioClickSpy = await page.spyOnEvent('wcsRadioClick');\n\n const radio2 = page.locator('#radio-2');\n\n // When\n await radio2.click();\n await page.waitForChanges();\n\n // Then\n expect(radioClickSpy).toHaveReceivedEventTimes(1);\n });\n\n test('should fire wcsChange when we click or move to an unchecked radio', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const changeSpy = await page.spyOnEvent('wcsChange');\n\n const radio2 = page.locator('#radio-2');\n\n // When: Clicking on an unchecked radio\n await radio2.click();\n await page.waitForChanges();\n\n // Then\n expect(changeSpy).toHaveReceivedEventTimes(1);\n\n // When: Moving focus to another unchecked radio with keyboard\n await radio2.focus();\n await page.keyboard.press('ArrowDown'); // Move to the next radio\n await page.waitForChanges();\n\n // Then\n const radio3 = page.locator('#radio-3');\n await expect(radio3).toBeFocused(); // Ensure focus is on the third radio (next radio after radio2)\n expect(changeSpy).toHaveReceivedEventTimes(2);\n });\n\n test('should fire wcsBlur and wcsFocus from the radios', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const blurSpy = await page.spyOnEvent('wcsBlur');\n const focusSpy = await page.spyOnEvent('wcsFocus');\n\n const radio = page.locator('#radio-1');\n\n // When: Focusing on the first radio\n await radio.focus();\n await page.waitForChanges();\n\n // Then: Expect wcsFocus to be fired\n expect(focusSpy).toHaveReceivedEventTimes(1);\n\n // When: Moving to the next radio\n await page.keyboard.press('ArrowDown');\n await page.waitForChanges();\n\n // When: Moving focus to another radio\n await page.keyboard.press('Tab');\n\n // Then\n expect(blurSpy).toHaveReceivedEvent();\n expect(focusSpy).toHaveReceivedEventTimes(2);\n });\n });\n\n test.describe('When pressing arrow up key', () => {\n test('should checked the previous radio when we are on the last radio and previous radio is here', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const lastRadio = page.locator('#radio-3');\n await lastRadio.focus();\n\n // When\n await page.keyboard.press('ArrowUp');\n\n // Then\n const secondRadioInput = page.locator('#radio-2 input');\n await expect(secondRadioInput).toHaveAttribute('aria-checked', 'true');\n });\n\n test('should checked the last radio when we are on the first radio', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const firstRadio = page.locator('#radio-1');\n await firstRadio.focus();\n\n // When\n await page.keyboard.press('ArrowUp');\n\n // Then\n const lastRadioInput = page.locator('#radio-3 input');\n await expect(lastRadioInput).toHaveAttribute('aria-checked', 'true');\n });\n });\n});\n"]}
1	+ {"version":3,"file":"radio-group.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.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('Radio Group', () => {\n test('should not render an interactive radio descendant inside wcs-radio', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" label=\"SNCF\" value=\"1\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const radio = page.locator('#radio-1');\n\n // Then\n await expect(radio).toHaveAttribute('role', 'radio');\n await expect(radio.locator('input[type=\"radio\"]')).toHaveCount(0);\n });\n\n test('should navigate to the first not disabled radio when pressing tab key', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-input></wcs-input>\n <wcs-radio-group>\n <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const firstTabbableItem = page.locator('wcs-input');\n await firstTabbableItem.focus();\n const secondRadio = page.locator('#radio-2');\n\n // When\n await page.keyboard.press('Tab');\n\n // Then\n await expect(secondRadio).toBeFocused();\n });\n\n test('should not make unselected radios focusable when a radio is clicked', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-input></wcs-input>\n <wcs-radio-group>\n <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const input = page.locator('wcs-input');\n const radio3 = page.locator('#radio-3');\n\n // When\n await radio3.click();\n await input.focus();\n\n // Then\n await page.keyboard.press('Tab');\n await expect(radio3).toBeFocused();\n });\n\n test('should checked the first radio when pressing space key', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-input></wcs-input>\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const firstTabbableItem = page.locator('wcs-input');\n await firstTabbableItem.focus();\n const firstRadio = page.locator('#radio-1');\n await page.keyboard.press('Tab');\n\n // When\n await page.keyboard.press('Space');\n\n // Then\n await expect(firstRadio).toBeFocused(); // Ensure focus is on the first radio\n await expect(firstRadio).toHaveAttribute('aria-checked', 'true');\n });\n\n test('should navigate to the checked radio when pressing tab key', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-input></wcs-input>\n <wcs-radio-group value=\"3\">\n <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const firstTabbableItem = page.locator('wcs-input');\n await firstTabbableItem.focus();\n const thirdRadio = page.locator('#radio-3');\n\n // When\n await page.keyboard.press('Tab');\n\n // Then\n await expect(thirdRadio).toBeFocused();\n });\n\n test.describe('When pressing arrow down key', () => {\n test('should checked the next radio not disabled when we are on the first radio and next radio is here', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio disabled id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const firstRadio = page.locator('#radio-1');\n await firstRadio.focus();\n const thirdRadio = page.locator('#radio-3');\n\n // When\n await page.keyboard.press('ArrowDown');\n\n // Then\n await expect(thirdRadio).toBeFocused(); // Ensure focus is on the third radio\n await expect(thirdRadio).toHaveAttribute('aria-checked', 'true');\n });\n\n test('should checked the first not disabled radio when we are on the last radio', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const lastRadio = page.locator('#radio-3');\n // Click to select, then focus explicitly for WebKit compatibility\n await lastRadio.click();\n await lastRadio.focus();\n await expect(lastRadio).toBeFocused();\n const secondRadio = page.locator('#radio-2');\n const secondRadioNativeInputInput = page.locator('#radio-2');\n\n // When\n await page.keyboard.press('ArrowDown');\n\n // Then\n await expect(secondRadio).toBeFocused(); // Ensure focus is on the second radio\n await expect(secondRadioNativeInputInput).toHaveAttribute('aria-checked', 'true');\n });\n });\n\n test.describe('Events handling', () => {\n test('should fire wcsRadioClick when we click on an unchecked radio', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const radioClickSpy = await page.spyOnEvent('wcsRadioClick');\n\n const radio2 = page.locator('#radio-2');\n\n // When\n await radio2.click();\n await page.waitForChanges();\n\n // Then\n expect(radioClickSpy).toHaveReceivedEventTimes(1);\n });\n\n test('should keep only the last clicked radio checked in the same group', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const radio1 = page.locator('#radio-1');\n const radio2 = page.locator('#radio-2');\n\n // When\n await radio1.click();\n await page.waitForChanges();\n await radio2.click();\n await page.waitForChanges();\n\n // Then\n await expect(radio1).toHaveAttribute('aria-checked', 'false');\n await expect(radio2).toHaveAttribute('aria-checked', 'true');\n });\n\n test('should fire wcsChange when we click or move to an unchecked radio', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const changeSpy = await page.spyOnEvent('wcsChange');\n\n const radio2 = page.locator('#radio-2');\n\n // When: Clicking on an unchecked radio\n await radio2.click();\n await page.waitForChanges();\n\n // Then\n expect(changeSpy).toHaveReceivedEventTimes(1);\n\n // When: Moving focus to another unchecked radio with keyboard\n await radio2.focus();\n await page.keyboard.press('ArrowDown'); // Move to the next radio\n await page.waitForChanges();\n\n // Then\n const radio3 = page.locator('#radio-3');\n await expect(radio3).toBeFocused(); // Ensure focus is on the third radio (next radio after radio2)\n expect(changeSpy).toHaveReceivedEventTimes(2);\n });\n\n test('should keep only the last keyboard-selected radio checked in the same group', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const radio1 = page.locator('#radio-1');\n const radio2 = page.locator('#radio-2');\n const radio3 = page.locator('#radio-3');\n\n // When\n await radio1.focus();\n await page.keyboard.press('Space');\n await page.waitForChanges();\n await page.keyboard.press('ArrowDown');\n await page.waitForChanges();\n\n // Then\n await expect(radio2).toBeFocused();\n await expect(radio1).toHaveAttribute('aria-checked', 'false');\n await expect(radio2).toHaveAttribute('aria-checked', 'true');\n await expect(radio3).toHaveAttribute('aria-checked', 'false');\n });\n\n test('should fire wcsBlur and wcsFocus from the radios', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const blurSpy = await page.spyOnEvent('wcsBlur');\n const focusSpy = await page.spyOnEvent('wcsFocus');\n\n const radio = page.locator('#radio-1');\n\n // When: Focusing on the first radio\n await radio.focus();\n await page.waitForChanges();\n\n // Then: Expect wcsFocus to be fired\n expect(focusSpy).toHaveReceivedEventTimes(1);\n\n // When: Moving to the next radio\n await page.keyboard.press('ArrowDown');\n await page.waitForChanges();\n\n // When: Moving focus to another radio\n await page.keyboard.press('Tab');\n\n // Then\n expect(blurSpy).toHaveReceivedEvent();\n expect(focusSpy).toHaveReceivedEventTimes(2);\n });\n });\n\n test.describe('When pressing arrow up key', () => {\n test('should checked the previous radio when we are on the last radio and previous radio is here', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const lastRadio = page.locator('#radio-3');\n await lastRadio.focus();\n\n // When\n await page.keyboard.press('ArrowUp');\n\n // Then\n const secondRadioInput = page.locator('#radio-2');\n await expect(secondRadioInput).toHaveAttribute('aria-checked', 'true');\n });\n\n test('should checked the last radio when we are on the first radio', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-radio-group>\n <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n </wcs-radio-group>\n `);\n\n const firstRadio = page.locator('#radio-1');\n await firstRadio.focus();\n\n // When\n await page.keyboard.press('ArrowUp');\n\n // Then\n const lastRadioInput = page.locator('#radio-3');\n await expect(lastRadioInput).toHaveAttribute('aria-checked', 'true');\n });\n });\n\n test.describe('Behavior in window with scroll', () => {\n [\n { mode: 'radio' },\n { mode: 'horizontal' },\n { mode: 'option' }\n ].forEach(({ mode }) => {\n test(`should preserve the window scroll position when clicking a radio inside a scrollable container - mode: ${mode}`, async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <div id=\"scroll-container\" style=\"height: 100vh; overflow-y: auto;\">\n <div style=\"margin-top: 150vh;\">\n <wcs-radio-group mode=\"${mode}\">\n <wcs-radio id=\"radio-1\" value=\"1\">Radio 1</wcs-radio>\n <wcs-radio id=\"radio-2\" value=\"2\">Radio 2</wcs-radio>\n <wcs-radio id=\"radio-3\" value=\"3\">Radio 3</wcs-radio>\n </wcs-radio-group>\n </div>\n <div style=\"margin-top: 200vh;\">Other content</div>\n </div>\n `);\n const body = page.locator('body');\n const radio2 = page.locator('#radio-2');\n await radio2.scrollIntoViewIfNeeded();\n\n // When\n await radio2.click();\n\n // Then\n const scrollY = await body.evaluate(() => window.scrollY);\n expect(scrollY).toBe(0);\n });\n });\n });\n});\n"]}

package/dist/collection/components/radio-group/radio-group.js CHANGED Viewed

@@ -104,7 +104,7 @@ export class RadioGroup {
         }
     }
     render() {
-        return (h(Host, { key: '3179704d2f1ed56f940941c1777b90a49ecd0ffa', role: "radiogroup" }, h("slot", { key: 'f01213b0c89bc04622601447005e24df07fea376', name: "option", onSlotchange: this.onSlotChange.bind(this) })));
+        return (h(Host, { key: '9e945b3bd3935232dbfd859e6a53f49523d6f49b', role: "radiogroup" }, h("slot", { key: '7c6a9ae33e2dbc25c1c696ee2d9957cc882d5eba', name: "option", onSlotchange: this.onSlotChange.bind(this) })));
     }
     static get is() { return "wcs-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select-interface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select-interface.js","sourceRoot":"","sources":["../../../src/components/select/select-interface.ts"],"names":[],"mappings":"~~AAYA~~;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAsB,CAAC,QAAQ,EAAE,MAAM,EAAW,EAAE;IACrF,OAAO,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;AAC/E,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE,GAAG,CAAU,CAAC,CAAC,iGAAiG;AAIxJ,MAAM,UAAU,eAAe,CAAC,IAAY;IACxC,0EAA0E;IAC1E,OAAO,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface SelectChangeEventDetail {\n value: any \| any[] \| undefined \| null;\n}\n\nexport interface SelectFilterChangeEventDetail {\n value: string \| number \| undefined \| null;\n}\n\nexport type WcsSelectFilterFn = (optionEl: HTMLWcsSelectOptionElement, filter: string) => boolean;\n\n/*\n Default filtering function. Compares the string start of wcs-select-option element's text content\n * with your filter input.\n * @param optionEl - wcs-select-option element\n * @param filter - input filter field value\n * @constructor\n */\nexport const WcsDefaultSelectFilterFn: WcsSelectFilterFn = (optionEl, filter): boolean => {\n return optionEl.textContent.toLowerCase().startsWith(filter.toLowerCase());\n}\n\nexport const WcsSelectSizeValue = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsSelectSize = Extract<WcsSize, typeof WcsSelectSizeValue[number]>;\n\nexport function isWcsSelectSize(size: string): size is WcsSelectSize {\n // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n return WcsSelectSizeValue.includes(size);\n}\n"]}
1	+ {"version":3,"file":"select-interface.js","sourceRoot":"","sources":["../../../src/components/select/select-interface.ts"],"names":[],"mappings":"AAgBA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAsB,CAAC,QAAQ,EAAE,MAAM,EAAW,EAAE;IACrF,OAAO,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;AAC/E,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE,GAAG,CAAU,CAAC,CAAC,iGAAiG;AAIxJ,MAAM,UAAU,eAAe,CAAC,IAAY;IACxC,0EAA0E;IAC1E,OAAO,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface SelectChangeEventDetail {\n value: any \| any[] \| undefined \| null;\n /*\n Could be undefined if the wcs-select is in server mode, as the selected options are not rendered in the DOM\n /\n selectedOptions: HTMLWcsSelectOptionElement[] \| undefined;\n}\n\nexport interface SelectFilterChangeEventDetail {\n value: string \| number \| undefined \| null;\n}\n\nexport type WcsSelectFilterFn = (optionEl: HTMLWcsSelectOptionElement, filter: string) => boolean;\n\n/\n Default filtering function. Compares the string start of wcs-select-option element's text content\n * with your filter input.\n * @param optionEl - wcs-select-option element\n * @param filter - input filter field value\n * @constructor\n */\nexport const WcsDefaultSelectFilterFn: WcsSelectFilterFn = (optionEl, filter): boolean => {\n return optionEl.textContent.toLowerCase().startsWith(filter.toLowerCase());\n}\n\nexport const WcsSelectSizeValue = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsSelectSize = Extract<WcsSize, typeof WcsSelectSizeValue[number]>;\n\nexport function isWcsSelectSize(size: string): size is WcsSelectSize {\n // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n return WcsSelectSizeValue.includes(size);\n}\n"]}

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

@@ -106,7 +106,7 @@ test.describe('Select component', () => {
         await page.waitForChanges();
         // Then
         expect(changeSpy).toHaveReceivedEventTimes(1);
-        expect(changeSpy).toHaveReceivedEventDetail({ value: '1' });
+        expect(changeSpy.lastEvent.detail.value).toBe('1');
         // Vérifier le label dans le shadow DOM
         const label = select.locator('label').first();
         await expect(label).toHaveText('One');
@@ -242,7 +242,7 @@ test.describe('Select component', () => {
             await page.waitForChanges();
             // Then
             expect(changeSpy).toHaveReceivedEventTimes(2);
-            expect(changeSpy).toHaveNthReceivedEventDetail(1, { value: ['1', '2'] });
+            expect(changeSpy.events[1].detail.value).toEqual(['1', '2']);
         });
         test('Allows to unselect a value', async ({ page }) => {
             // Given
@@ -267,7 +267,7 @@ test.describe('Select component', () => {
             await page.waitForChanges();
             // Then
             expect(changeSpy).toHaveReceivedEventTimes(3);
-            expect(changeSpy).toHaveNthReceivedEventDetail(2, { value: ['2'] });
+            expect(changeSpy.events[2].detail.value).toEqual(['2']);
         });
         test('Displays all values separated by a comma', async ({ page }) => {
             // Given
@@ -321,7 +321,7 @@ test.describe('Select component', () => {
             await page.waitForChanges();
             // Then
             expect(changeSpy).toHaveReceivedEventTimes(2);
-            expect(changeSpy).toHaveNthReceivedEventDetail(1, { value: ['1', '2'] });
+            expect(changeSpy.events[1].detail.value).toEqual(['1', '2']);
         });
     });
     test.describe('Keyboard navigation when select is closed and not multiple', () => {
@@ -344,7 +344,7 @@ test.describe('Select component', () => {
             const label = select.locator('label').first();
             await expect(label).toHaveText('Option 2');
             expect(changeSpy).toHaveReceivedEventTimes(1);
-            expect(changeSpy).toHaveFirstReceivedEventDetail({ value: 'option2' });
+            expect(changeSpy.firstEvent.detail.value).toBe('option2');
         });
         test('select value of last option enabled on PageDown key pressed', async ({ page }) => {
             // Given
@@ -365,7 +365,7 @@ test.describe('Select component', () => {
             const label = select.locator('label').first();
             await expect(label).toHaveText('Option 3');
             expect(changeSpy).toHaveReceivedEventTimes(1);
-            expect(changeSpy).toHaveFirstReceivedEventDetail({ value: 'option3' });
+            expect(changeSpy.firstEvent.detail.value).toBe('option3');
         });
         test('select value of first option enabled on PageUp key pressed', async ({ page }) => {
             // Given
@@ -386,7 +386,7 @@ test.describe('Select component', () => {
             const label = select.locator('label').first();
             await expect(label).toHaveText('Option 2');
             expect(changeSpy).toHaveReceivedEventTimes(1);
-            expect(changeSpy).toHaveFirstReceivedEventDetail({ value: 'option2' });
+            expect(changeSpy.firstEvent.detail.value).toBe('option2');
         });
         test('open the overlay on Enter key press', async ({ page }) => {
             // Given
@@ -547,7 +547,7 @@ test.describe('Select component', () => {
             const label = select.locator('label').first();
             await expect(label).toHaveText('Option 2');
             expect(changeSpy).toHaveReceivedEventTimes(1);
-            expect(changeSpy).toHaveFirstReceivedEventDetail({ value: 'option2' });
+            expect(changeSpy.firstEvent.detail.value).toBe('option2');
         });
         test('move focus to next option on Down Arrow key down', async ({ page }) => {
             // Given
@@ -732,7 +732,7 @@ test.describe('Select component', () => {
         await page.waitForChanges();
         // Then
         expect(changeSpy).toHaveReceivedEventTimes(1);
-        expect(changeSpy).toHaveFirstReceivedEventDetail({ value: '1' });
+        expect(changeSpy.firstEvent.detail.value).toBe('1');
     });
     test.describe('Focus management', () => {
         test('after selection, focus is on the correct element', async ({ page }) => {